Placeholder Image

Subtitles section Play video

  • Hey, and welcome back to class every time with your host, the ex Google ex Facebook tackle it.

  • This is going to be a bit of a technical episode.

  • We're actually going to be doing some coding.

  • I'm going to show you how I might build Twitter, and we're going to build this start to finish from said they have the website that domain getting the database set up, building the back and then the front end as well.

  • So that's what we'll be doing in this video.

  • Why don't we get started?

  • All right, So the first thing you want to do is set up a Web domain.

  • I usually go to them, keep dot com and you can use any number of these service is and just search for the remaining that you like.

  • Tweet them out dot com.

  • Sure.

  • Fine.

  • Why don't we just go with that?

  • You know, you can rename it later.

  • No, I'm just joking.

  • You can't rename it, but we just go through with this and I'll show you how you can get the set out so quick come from order.

  • And yet it's going to run me nine bucks, but I'll make it back through all the ads on this video.

  • Click some of those.

  • As for me quick balls, thanks to our sponsor, Curiosity Stream, a subscription video streaming service that offers thousands of documentaries and nonfiction titles from some of the roads.

  • Best filmmakers, including exclusive originals, check them out a cure us the stream dot com slash tack lied.

  • All right, so not that I have this set up.

  • I just go into the dashboard and, you know, sometimes it might take a little bit of time.

  • It's usually pretty quick.

  • Actually, I could go into advanced E N s.

  • And what you want to do is rot this domain name to your own Web server.

  • So why don't we go get a Web server set up?

  • There are many different Web hosting.

  • Service is out there like Amazon AWS Digital Ocean, Google Cloud.

  • You can even use fully managed service is like fire base.

  • I'm going to be using IBM Cloud because that's just what I'm you stoop all of these interfaces, they're pretty similar.

  • I'm going to click, Create resource here, and there's things called virtual servers.

  • It's essentially like a paper you server.

  • There's one mission where many people can rent and the computing power and memory are just all divided up on Many people can see here I can click a multi tendon public virtual server.

  • You can choose the location.

  • I'm gonna have mine in Dallas.

  • You can decide how much power you want.

  • Like for virtual CP use and 32 gigabytes of Ram.

  • I'm just gonna pick the most minimum one just to keep things slow on cause choose the OS you want.

  • You know, Red Hat, Debian, Microsoft.

  • I personally use Santo s.

  • Any of these are pretty much find, though.

  • You can pick us, storage this care.

  • I'm going to go with just 25 gigabytes And yet that pretty much looks good.

  • So I will click, Create.

  • All right, cool.

  • So now I have a web server set up here.

  • I can click into it and essentially they're getting this.

  • Our provisions.

  • Now here in the bill, you can see at the cost of nine cents per hour.

  • They're anticipating about 12 hours of usage per day 397 hours per month, which comes out to $33.71 or so, and I'm showing you how to set up a Web server and domain because I think this is one of the most important things that any self respecting Web developer can do.

  • You really need a platform for you to distribute your work.

  • If you don't have that, then it just gets really de motivating coming up with pet projects that you can't show to anybody now.

  • With that said, the server is all set up already.

  • What we need is a figure out with the I P address of it is, and then route the domain name over.

  • So if I go into the stash board, I can see what the I P addresses.

  • I'm going to copy that, going to this advance the anus, and I will sign that to the www and the at addresses.

  • And that was said these to be a records, which allows me to just assign I p addresses to these click accept.

  • And by now, this domain name should be riding over.

  • So if I access, tweet them without calm.

  • Now the site is broken because it's probably going to that virtual server.

  • I need to look into it.

  • So in order to log in you use sssh the terminal to be able to log in to that.

  • So, yeah, if I go into the pastor's section, I can see what the user name and password are that they assigned and this keyboard starting to get loud, so I'll switch over to something more quiet for us.

  • All right.

  • Where were we?

  • So I say sshh route at the I P address.

  • All right, Nice.

  • We're in now.

  • The first and likely do is just copy my Bashar CFO, and we just essentially just listen.

  • Sure.

  • Custer.

  • I personally like and I recommend that you could get something like this.

  • Said that as well.

  • You and these are just random said things that just make determine the more useful for me.

  • It sets up the prompt the way I like it.

  • So I will STP this over into the server.

  • All right.

  • Close.

  • I've copied that over.

  • And now I figured out that I don't have a max, So the first thing we want to do is start installing some programs.

  • Young install Imax should do it.

  • And that was just just only a bunch of packages.

  • Imax has so many crazy dependencies.

  • Now let's talk about the tax Tak.

  • I generally use Lynn Nix, Apache, my sequel or Maria D B and PHP with some man cash.

  • So I'm going to show you how I might get this set up.

  • But you can easily adapt this to any type of text back that you may want to use.

  • You could use know Js, python, Django flask, Ruby on rails.

  • But this standard lamp tech stock is probably one of the most simplest, and it's also very powerful.

  • Many start ups are using lamp as waas.

  • Even Facebook is on the standard database PHP main cash this type of text back so you can definitely do a lot of damage.

  • Just with this set up.

  • In order to get a party Web server set up, you issue a command.

  • Yum.

  • Install http d we just short for http Damon.

  • So now if I run service http de status, I can see it is not running.

  • And now if I run, start well, it should be running now.

  • So now I can try accessing the Web site tweet demo dot com was it?

  • And yet you can see I've work to have this website up and running on my own wishing with my own Web server.

  • The next thing we need to do is actually configured their server.

  • So I will go to slash http d dot com.

  • So this is a standard path word.

  • This is set up.

  • I know this because, you know, if you just dig around, you'll be able to figure out the documentation to tell you that this is where it's all set up and you can see Okay, the document root is far www slash html.

  • So I think that works for us so we can go over there.

  • All right, So if I add the index that HT amount and input like hello there and save it and then access tweet them.

  • Oh, I can see that my custom content is already starting to show up.

  • Now the next that we need to do isn't stopped PHP.

  • So you run young and stark hp, and that is pretty much going to get PHP all set out for you here.

  • And by the way, these days, another common technique is to use container ization through dr to get Web server set up so that you don't even have to configure like monolithic Web servers.

  • But overall, this is still probably the simplest and fastest way to get yourself going.

  • Now we can remove index dot html that we have been using and change this to a PHP file which allows us to generate more dynamic content.

  • If I use the special command, actually, pay should be invoked.

  • Then it was up.

  • All the details and information about this installations I can go through here and check.

  • All right, so we need a database server.

  • So I'm going to install Maria de B Server and Maria de B, which is just a client of that.

  • This is essentially like my sequel, which is one of the most basic and common forms of day, the basis.

  • So now, fireman Service, marry a D B status.

  • I can see that it is not active.

  • I will start that.

  • And now if I run my sequel Okay, you can see I'm running this here.

  • Let's create database created a the base.

  • So now we're using the my secrets in text and not create a table like saying create table users.

  • We're gonna have a your I d field, which is an integer we'll make that a primary key, although increment And we need the I P address, which is like a bar.

  • Char will say it's, Ah, 64 characters and it needs to be unique.

  • Okay, there you go.

  • You're going to try and create connection connection because my sickle connect the TV host equals local host on the user is say route.

  • Okay, if I tried to run this bicycle connect doesn't exist.

  • So you actually need to install that?

  • My secret extension for PHP We just run Yemen style PHP dash bicycle and deep.

  • Now, if I run index dot PHP, I can see that I am printing to research I d.

  • So this is all set up is already connected, and I can actually make 1/4 share as well.

  • Lance equals like database, which is the database name.

  • And then we can make a Cory even select star from users given the connection, and then we can print the result.

  • And if I were to go into the database shell tables and could say, describe users and insert into users just impotent I p address like 1 to 7.0 point 0.1 and it starts.

  • I them slack star from users.

  • We can see what insert it now if I had to run the script print are on the room, which prints and the ray and I can see I am up putting that value So we have the database connection set up Now.

  • Now, in practice, what I like to do is just crazy.

  • And rapper functions around this, like our Korea function called the Quarry, were given their quarry.

  • It will automatically make that Cory into the database and return the values I just copy these valleys put inside a dysfunction.

  • So now I'll be able to make a number of different database quarries.

  • So let's talk about the tables that we need here and the fields we need.

  • The easiest table would say the user I d and their i p address.

  • Right?

  • And we're not going to use usernames or just use I p addresses.

  • We need a table for life tweets, right?

  • We're given the your I.

  • D.

  • We also have, like, a post, right, And then we also need follows were given a U idea user.

  • We also know who the follower off that is.

  • So I think these are the three primary tables.

  • We need to get this set up so we'll go into our database and get this stuff set up And our issue.

  • Some sequel statements like I'll create the tweets database, create database tweets.

  • We have a your I D, which is the integer Oh, and he's also need primary keys, So tweet I d would be like an inter jury will be a primary key.

  • This will also be other incriminating.

  • I will have a your i D, which is another interest her and then the post, which we can make, like, say, far char 1 40 right?

  • Because it's going to be 100 40 characters.

  • Oh, the date as well, right, because we want to be able to sort this would be a date time, So we'll add some indices like key on the date.

  • And though I have a key on the user, I d and the date So that's a compound key so that give your chronological feed of every tweet as well as we want to be able to filter by user, I d.

  • S can't create that create table, and then we also need to create table for the follows where we have a your i d which is int and a follower, which isn't.

  • We can say here may be the primary key would just be a compound key on the user I d and the follower.

  • There you go.

  • So show tables I can see these are the three tables that I've created.

  • Now we go back into our web server back in.

  • All right.

  • So not back to this file am going to just use a single file here.

  • We need a form, right.

  • I am put form for tweeting you some HTM out here and we'll have, like, a text area give you the name and then input button.

  • All right?

  • We're looking good here.

  • We have a text area.

  • You can tweet that.

  • So now I'm going to have portion at the top here, which brings in the request.

  • So this is the way PHP handles this.

  • At least then we get the tweet, and we're going to parse it.

  • And the I P address is actually in this special variable called server remote.

  • Better.

  • And we can try to print these.

  • Okay.

  • Looking good.

  • So now I'm actually going back.

  • The input that I want to insert into the tweets table.

  • Right?

  • All right, So here's what I have to do.

  • I need to obtain the user i d If the user i d doesn't exist, then I'm going to create a user for and that I'm going to insert that tweet.

  • Right.

  • So I'll say, OK, let me create a helper function called like I like one can't get single, which essentially issues that Cory and returns a single value.

  • So result equals quarry.

  • We're going to parse that we get the room and then return at the first item in the room, get the I d.

  • A.

  • Select your I d from users where I p equals.

  • I pee right on.

  • One bit of advice, sir, Anytime you're messing around with database quarters like this is not really safe.

  • So you want to make sure you're sanitizer input, So use like my sequel really escape string to just send that ties that if the user i d.

  • Doesn't exist, we're going to create it right?

  • Insert into users.

  • The i P.

  • Okay, So now if I refresh this, if are to go to the table, it's like star from users.

  • You can see I've already inserted a user i d number two for my current I p address.

  • I'm accessing this from and now I just need to insert the tweet as well.

  • Just say insert into tweets and let me open them.

  • But second terminal here.

  • So for tweets, we need a user i d the post and the date well, and put the post and the date and wouldn't put the valley is your I d.

  • Well, we'll say that the day is equals two current year, month, day hour, minute seconds.

  • Okay, so now I can just start tweeting a bunch of stuff, and I can check my tweets like star from tweets.

  • I can see all of this stuff is coming in under the proper user i d.

  • The next step is I just need to come in here and up all of the tweets, right?

  • So, Cory, select star from tweets order by date descending.

  • And you know, since we're people and index on date, this is going to be a fairly efficient quarry.

  • Get the result.

  • And then we need to reiterate through that while Rachael's my sickle fetch associated array from the result, then we could just print the rope, right?

  • It's coming in to extract a tweet again.

  • Here.

  • You don't want to do some in percentages ations.

  • I will use HTML is pressure charged.

  • And I'm going to just put this inside the table just to get this format it properly, quickly, and we'll also put in the date, right?

  • So you can see here that this is already starting to be fairly functional, right?

  • Like I can tweet stuff.

  • They're sorted there up in descending chronological order.

  • We have this whole website said that the only other thing I need to do here is set up the follow function as well as to make this prettier, right?

  • Not for falling.

  • We're just creating new entry, maybe with a follow link, right.

  • And for this follow link, which is passing the parameter, we'll have a route back to the same page index that PHP will say follow equals.

  • You know, whichever user I d that you want to follow.

  • So we have a link here, you can click on this stuff, and over here I could come in here and handle that.

  • Like if you get requests in the euro parameters for a follow.

  • You know what?

  • We'll get the value and again we'll escape that.

  • And then just insert that into the database.

  • Well, and we also need the user I d.

  • So I grabbed the user I d again here, inserted, if necessary.

  • And by this point, maybe I'll just make a function like get your i d ready quarry insert, ignore into follows.

  • You already followed.

  • So there we go.

  • If you quick thes values.

  • It does start inserting values into the follows table.

  • It may be nice not show this link for user's who you've already follows.

  • So, you know, before I render each of these, I could just do a quick check if get single slack, follow where follows where you are, the equals.

  • You're the only.

  • If the entry doesn't exist, we will have a following.

  • There you go.

  • That's looking pretty good.

  • That can also follow these users as well.

  • For the user's who you follow.

  • We want to also be able to show only the post their right not just show all the posts.

  • So maybe I just up a second area here, and we pretty much do the same thing except the quarry is a little bit different, so we can actually create, like, a function for a rendering on this stuff, right?

  • And then you can put all this stuff that's been rendering this into a function card render tweets.

  • It's company.

  • This coat.

  • It's like star from tweets where the user i d is in.

  • And then I suppose this is going to be in this a quarry, actually.

  • Select Follow where from?

  • Follows where you are the equals user.

  • Right?

  • So this is a more complicated sequel joint and yet there you go.

  • So now we're only seeing tweets from the users who you're following that use your three it distorted by date.

  • So obviously the site isn't very beautiful now, but you can easily clean that.

  • The bootstrap is a pretty popular HTML CSS library that you can use to just our website quickly.

  • So I'm going to come in here.

  • You import the style she's and just paste them in just like just bring all this stuff in is like four lines of code here, right?

  • As soon as I put that in and I refresh, you can see that this page is already starting to look better So this is where I'm starting to get into HTML.

  • This is a text field.

  • I can go into bootstrap, look into components and look up.

  • You know, like this example text every that looks pretty nice.

  • So all I gotta do is come in here and copy that styling.

  • Paste it here, give it the name.

  • And yet that text area is starting to look good.

  • Maybe I want this button toe look nicer too, so I can go into the buttons.

  • This primary button looks good, but that in there type, equal submit.

  • And then if I were to put this inside a table for users who we followed, maybe we should allow users to un follow them.

  • Right?

  • So I can come in here to change the link to say, um, follow at an event handler for if we get, um, follow.

  • If something comes in that says Unfollowed, then I will get the I d.

  • And are simply deleted from the table.

  • Now delete from follows.

  • Yeah.

  • There you go.

  • Overtime.

  • You could really build this out.

  • The sky's the limit, but I hope I showed you how to get a basic Web applications started then going here.

  • And as for text back, there are a number of different options as well.

  • Like instead of using the Maria de Be my secret database, we could've used like Mongol DP Instead of using Page P, we could've used Python I built the U.

  • Y using standard HTML generated server side.

  • It could also have been done client side using, say, JavaScript.

  • Purely hey, excited about learning more about our world?

  • What?

  • Check out curiosity stream dot com slash tech Leak.

  • The world's first subscription streaming video service about learning, curiosity and understanding.

  • Our World, created by the founder of the Discovery Channel, is content.

  • Spends a science, nature, history, technology, society and life.

  • So I particularly like the episode African and the more rescue following our crew saving some of the roads.

  • Most exotic and endangered animal species get unlimited access, starting at just 99 a month or 1999.

  • The Here There's a special promotion now where annual plans and gift cards are 40% off.

  • And because I'm detect lead, I'm getting you all your 1st 30 days completely free and curiosity stream dot com slash tech lead.

  • So, yeah, lots of different approaches here.

  • Let me know how you would have built a Twitter application.

  • I'm really curious to know in the comments below if you like the video, give the like and subscribe with you next time.

Hey, and welcome back to class every time with your host, the ex Google ex Facebook tackle it.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it