"Twitter Clone" Full-Stack Web Development project tutorial on LAMP (Linux, Apache, SQL, PHP)

hey and welcome back to coffee time with your host ex-google X Facebook technically 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 setting up the website the domain getting the database set up building the backend and then the front-end as well so that's what we'll be doing in this video why don't we just start it alright so the first thing you want to do is set up a web domain I usually go to namecheap.com and you can use any number of these services and just search for a domain name that you like tweet demo 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'll just go through with this and I'll show you how you can get this set up so I could come from order and yeah it's gonna run me nine bucks but I'll make it back through all the ads on this video click some of those ads for me quick pause thanks to our sponsor curiosity stream a subscription video streaming service that offers thousands of documentaries and nonfiction titles from some of the world's best filmmakers including exclusive originals check them out at curiosity stream comm slash tech lead alright so now 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 can go into advanced DNS and what you want to do is route 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 services out there like Amazon AWS digitalocean Google cloud you can even use fully managed services like firebase I'm going to be using an IBM cloud because that's just what I'm used to but all of these interfaces are pretty similar I'm gonna click create resource here and there's things called virtual servers it's essentially like a paper use server there's one machine where many people can rent and the computing power and memory are just all divided up among many people you can see here I can click a multi-tenant public virtual server you can choose the location I'm gonna have mine and Dallas you can decide how much power you want like for virtual CPUs and 32 gigabytes of RAM I'm just gonna pick the most minimum one just to keep things low on cost choose the OS you want you know Red Hat Debian Microsoft I personally use sent OS any of these are pretty much fine though you can pick a storage this here I'm gonna go with just 25 gigabytes and yeah that pretty much looks good so I will click eight alright cool so now I have a web server set up here I can click into it and essentially they're getting this are provisioned up now here in the bill you can see at the cost of nine cents per hour they're anticipating about twelve hours of usage per day three hundred ninety seven hours per month which comes out to $33 71 cents 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 demotivating 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 to figure out what the IP address of it is and then route the domain name over so if I go into this dashboard I can see what the IP address is I'm going to copy that go into this advanced DNS and I will assign that to the www and the @ addresses and I will set these to be a records which allows me to just assign IP addresses to these click accept and by now this domain name should be routing over so if I access tweet demo comm now the site is broken because it's probably going to that virtual server I need to log into it so in order to login you use SSH the terminal to be able to log in to that so yeah if I go into the password section I can see what the username and password are that they assigned and this keep we're starting to get loud so I'll switch over to something more quiet for us alright where are we so I say SSH root at the IP address alright nice we're in now the first thing I like to do is just copy my bash RC file in which is essentially just a list of shortcuts that I personally like and I recommend that you can get something like this set up as well.you and these are just random settings that just make the terminal more useful for me it says up the prompt the way I like it so I will SCP this over into these server alright cool so I've copied that over and now I figured out that I don't have Emacs so the first thing we want to do is start installing some programs yum install Emacs should do it and now it's just installing a bunch of packages Emacs has so many crazy dependencies now let's talk about the tech stack I generally use Linux Apache my sequel or mariadb and PHP with some memcache so I'm going to show you how I might get this but you can easily adapt this to any type of tech stack that you may want to use you can use nodejs Python Django flask Ruby on Rails but this standard lamp tech stack is probably one of the most simplest and it's also very powerful many startups are using lamp as well as even Facebook is on the standard database PHP memcache this type of tech stack so you can definitely do a lot of damage just with this setup in order to get Apache web server set up you issue a command yum install HTTP D which is short for HTTP daemon so now if I run service HTTP D 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 website tweet demo comm was it and yeah you can see I've already have this website up and running on my own machine with my own web server the next thing we need to do is actually configure this server so I will go to slash httpd.conf so this is a standard path where this is set up I know this because you know if you just dig around you'll be able to figure out the documentation they tell you that this is where it's all set up and you can see ok the document root is var www slash HTML so I think that works for us so we can go over there alright so if I add the index.html and then input like hello there and save it and then access tweet demo I can see that my custom content is already starting to show up now the next step we need to do is install PHP so you run yum install PHP and that is pretty much going to get PHP all set up for you here and by the way these days another common technique is to use containerization through docker 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.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 page P info then it will output all the details and information about those installations I can go through here and check all right so we need a database server so I'm going to install Maria DB server and Maria DB which is just a client of that this is essentially like my sequel which is one of the most basic and common forms of databases so Farren surface MariaDB 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 so create database so now we're using the my SQL syntax and I'll create a table like same create table users we're gonna have a UID field which is an integer we'll make that a primary key auto increment and we need the IP address which is like a varchar' we'll say it's on low 64 characters and it needs to be unique okay there you go so we're going to try and create connection connection comes my circle connect the DB host equals localhost the user is a root ok if I try to run this my sequel connect doesn't exist so you actually need to install the - extension for PHP we just run yum install PHP - my sequel and D so now if I run index type PHP I can see that I am printing the resource ID so this is all setup wizard reconnecting and I can actually make a query here as well - sequel select database which is the database name and then we can make a query even select star from users given the connection and then we can print the result and if I were to go into the database show tables I could say describe users and insert into users just Impa an IP address like 127.0.0.1 and it inserts a item select star from users we can see what inserted now if I have to run the script I go run print R on the row which prints an array and I can see I am updating that value so we have the database connection setup now now in practice what I like to do is just create some wrapper functions around this like our creo function called the query where given the quarry it will automatically make that query into the database and return the values so I just copy these values put the inside of this function so now I'll be able to make a number of different database queries so let's talk about the tables that we need here and the fields we need the users table would say the user ID and their IP address right and we're not going to use user names or just use IP addresses we need a table for like tweet right we're given a UID we also have like a post right and then we also need follows we're given a UID a user we also know who the follower of 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 I'll issue some sequel statements like I'll create the tweets database create database tweets we have a UID which is an integer oh and this also need primary keys so tweet ID would be like an integer it would be a primary key this will also be auto incrementing and we'll have a UID which is another integer and then the post which we can make like say varchar' 140 right because it's going to be 140 characters oh the date as well right because we want to be able to sort this that would be at date time so we'll add some indices like key on the date and then why have a key on the user ID and the date so that's a compound key so that give you a chronological feed of every tweet as well as we want to be able to filter by user IDs okay create that Oh create table and then we also need to create a table for the follows where we have a UID which is an int and a follower which is an int and we can say here maybe the primary key will just be a compound key on the user ID 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-end all right so now back to this file I'm going to just use a single file here we need a form write an input form for tweeting use some HTML here and we'll have like a text area give it a name and then an input button alright we are 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 IP address is actually in this special variable called server remote header and we can try to print these okay good so now I'm actually echoing 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 ID if the user ID doesn't exist then I'm going to create a user for it and I'm going to insert that tweet right so I'll say ok let me create a helper function called like I like one called get single which essentially issues a query and returns a single value so result equals query we're going to parse that we get the row and then return the first item in the row we get the UID a select your ID from users where IP equals IP right and one bit of advisor anytime you're messing around with database queries like this it's not really safe so you want to make sure you sanitize your inputs so you use like my sequel real escape string to just sanitize that if the user ID doesn't exist we're going to create it right insert into users the IP okay so now if i refresh this if I were to go to the table and select star from users you can see I've already inserted a user ID number two for my current IP 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 up a second terminal here so for tweets we need a user ID the post and the date or and put the post and the date and what input the value is your ID well we'll say that the date is equals to 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 that this stuff is coming in under the proper user ID the next step is I just need to come in here and output all of the tweets right so Cory select star from tweets ordered by date descending and you know since we're an index on date this is going to be a fairly efficient query get the result and then we need to iterate through that while row equals my sequel fetch associated array from the result then we could just print the row right it's coming in we extract the tweet again here you don't want to do some impulse analyzation so I will use HTML special chars and I'm going to just put this inside the table just to get this formatted 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 they're up in descending chronological order we have this whole website set up the only other thing I need to do here is set up the follow function as well as to make this prettier right now for following we'll just create a new entry maybe with a follow link right and for this follow link we're just passing a parameter we'll have a route back to the same page index that PHP will say follow equals you know whichever user ID that you want to follow so we have a link here you can click on this stuff and over here I can come in here and handle that like if you get requests in the URL parameters for a follow you know what will get the value and again will escape that and then just insert that into the database well and we also need the user ID so I grab the user ID again here insert it if necessary and by this point maybe I'll just make a function like get you ID right query insert ignore into follows your ID follow so there we go if you click these values it does start inserting values into the follows table it may be nice to not show this link for users who you've already follow so you know before I render each of these I could just do a quick check if get single slag follower from follows where your ID equals your ID so only if that entry doesn't exist we will have a follow link there you go that's looking pretty good I can also follow these users as well for the users who you follow we want to also be able to show only the posts there right not just show other posts so maybe I just output a second area here and we pretty much do the same thing except the query is a little bit different so we can actually create like a function for a rendering and all this stuff right and then you can put all this stuff that's been rendering this into a function called render tweets so copy this code select star from tweets where the user ID is in and then I suppose this is going to be an essay query actually select follow where from follows where you are the equals user right so this is a more complicated sequel joint and yeah there you go so now we're only seeing tweets from the users who you're following that's user three it is sorted by date so obviously the site isn't very beautiful now but you can easily clean that up bootstrap is a pretty popular HTML CSS library that you can use to just style a website quickly so I'm gonna come in here you know import the style sheets and just paste them in just like just bring all this stuff in it's like four lines of code here right as soon as I put that in and then 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 area that looks pretty nice so all I gotta do is come in here and copy that styling paste it here give it a name and yeah that text area is starting to look good maybe I want this button to look nicer too so I can go into the buttons this primary button looks good put that in there type equals submit and then if I were to put this inside a table for users who we followed maybe we should allow users to unfollow them right so I can come in here change the link to say unfollow add an event handler for if we get unfollow if something comes in that says unfollow then I will get the ID and I'll simply delete that from the table now the leap from follows yeah there you go over time you can really build this out the sky's the limit but I hope I showed you how to get a basic web application started and going here and as for tech stack there are a number of different options as well like instead of using the Morea DB my sequel database we could've use like MongoDB instead of using PHP we could have used Python I built the UI 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 well check out curiosity stream comm slash tech leap the world's first subscription streaming video service about learning care and understanding our world created by the founder of the Discovery Channel it's content spent science nature history technology society and lifestyle I particularly liked the episode African and the more rescue following our crews saving some of the world's most exotic and endangered animal species can unlimited access their damages $2.99 a month or $19.99 a year there's a special promotion now where annual plans and gift cards are 40% off and because I'm the tech lead I'm getting you all your first 30 days completely free a curiosity stream calm slash tech lead so yeah lots of different purchase here let me know how you would have built a Twitter application I'm really curious to know in the comments below if you liked the video give it a like and subscribe I'll see you next time thanks bye

Channel: TechLead

Views: 256,605

Keywords: techlead, lamp, webdev, coding, web development, programming, linux, php, mysql, mariadb, apache, developer, software engineer, google, facebook, amazon, microsoft

Id: 1YXqXPWjmKk

Length: 18min 28sec (1108 seconds)

Published: Thu Nov 28 2019

Reddit Comments

[u/AsmCoder110]

Oh god oh fuck please don't make me watch this dude. Aarrrgghh I lost my boner, I'm quitting pcj.

[u/porkslow]

Writing code in production, PHP 5.4, MySQL and concatenating SQL queries.

Either this is an elaborate troll or FAANG tech bros really can't write code for shit.

You might know this guy from his other hits:

• Why I'm so good at coding.
• I got fired from Facebook
• My wife left me.

[u/unfixpoint]

\unjerk -> This guy is not serious about anything, why should he be about this?

[u/nakilon]

That's a huge career jump -- from Google techlead to 11 minutes Youtube webmaster hello world sessions.

[u/28f272fe556a1363cc31]

lol, I down voted the click bait title...until I realized the sub.

[u/Volt]

https://i.imgur.com/lvsRoEX.png

[u/HitThingsWithSticks]

I mean the guy knows his LAMP stack but the whole approach of this video is much more 2009 than 2019. Also, at 14:55 he puts a sql query inside the while loop, meaning the query is going to be executed separately once per row. Until then I was watching in amused horror of remembering manually parsing query args and form values in classic ASP.

[u/l0gicgate]

/uj

This guy is an absolute clown for real, please don’t give him views

/j

I cAn Do A bEtTeR cLoNe iN 70 LiNeS oF gO

[u/editor_of_the_beast]

You can’t even safely enforce the 140 character limit in 140 lines of Rust.