FIXED: Building a Social Media App With Python 3 and Django: Part 1 Landing Page and User Auth

hey guys in this video we're gonna start a new project this time we're gonna build a social media app this app will be similar to something like twitter there will be posts and comments as well as followers for each user we'll build all this using django and python and we'll also use boost chat 5 which is very new at this time this will be some differences with how we do some things in our tablets thin compared to how we did them in the previous projects and like the other projects this really isn't meant for a complete beginner we'll move fast in the beginning so it'll be a good idea to have a basic understanding of django including class based views and the django templating syntax with that said let's get started building this project so right here i haven't opened up a new empty folder for our project i'm going to jump into a terminal window here i already have django installed if not you can just do a pip install django and now i'm going to go ahead and install some things and get this project ready to go so first i'm going to go ahead and install two things so let's do pip install django dash all off and django dash crispy forms we already uh we're going to use all off for authentication to get that up and running pretty quickly and django crispy forms to make our forms look better by just adding a tag to our html templates now let's go ahead and make our actual project so i'll type django admin start project and we'll call this one social network and i'll create our project file in our folder let's go ahead now and cd into social network and then inside here we'll go ahead and create two apps i'm going to create an app called landing which will have all the guest pages for when an unregistered user shows the site and an app called social which will hold all of our actual social network views and urls so do python manage.python start app social and then i'll do the same thing make one and call it landing and now with those two things created we can jump in here you can see them both right here um let's go ahead now and migrate our changes so we'll do a python manage py migrate and now let's go ahead and create a super user so we'll do a python manage.py manage.py create super user we'll call it admin uh we'll leave our email just blank we'll give it a password i'll try it again and now we have our super user created and that's all we need to get this project set up so now i'm going to go ahead and just minimize this tab and now inside of our project here let's jump into our settings of ui so we'll go to our social network folder and to our settings.py and first let's go ahead and add both our apps to the installed apps list here so here i'll go ahead and do social and then put a comma i'll do a landing as well now with those two things added we'll go ahead and save this let's go ahead now and make our first view so let's jump into our um let's go into our uh landing and let's go ahead and jump into our views of py let's go ahead and add our first view so first we'll import our generic view class so from django.views import view this will be just for our our get and post methods that we'll put on our view class like the previous videos did let's go ahead and create a class we'll call it index and we'll inherit from our view class we just imported and in case you're not familiar on this generic view class right here what it allows us to do is to make different methods but different methods on our our class for each http method that we'll handle so for example um if i want to handle a get request and just load a web page i can go into my class here and do a definite and anything inside here will go will will run when a get request is sent to this url we do say the same thing for post for delete for put for any http method inside of our parameters for a git method i'm going to pass in self request get rid of this request star args and star star quarks and now within this get method i'm just going to return a template so i'll just do return render pass and request and then we'll go ahead and pass in our template name so do landing slash just index.html and we'll make that here in a second i'm going to save this and i'm going to create this directory so inside of our landing app i'll create a folder and we'll call this one templates and then inside our templates folder here we'll create a new folder uh here we'll call this one landing oops landing so now we have a templates and then a landing and inside here we go and create our template so we'll do index.html and this is just a standard path for django templates this will will make it so we don't have to actually add anything into our settings py to load these templates so we'll keep all of them here just to make it easier for our setup so now we have this index file but we also want to create two more files we want a navbar and we also want a base template so we're gonna go ahead and create those two files within the same directory so do a base.html and then we'll also do a navigation or enable to call navbar.html so our base template will hold all of our base styles and then our index template will uh inherit from that base template so let's go ahead and set up our base template first so to do this we can go ahead and jump into a browser and let's go ahead and get our bootstrap starter template from their website so the first link here should be a link to bootstrap 5 their blog you'll get a little description here about some differences in bootstrap 5. come down here to the bottom and you will see a link and right here this should take you to the bootstrap 5 documentation if you want you can do this read through this page to kind of learn about some of the differences or just go here to the link to get to the documentation and we'll go ahead and click on this get started button and then from here we can scroll down to the starter template right here i'm going to go ahead and copy this and back into my text editor inside my base html i'm going to paste it right in there i'll go ahead and save that i'm going to change this title here just to social network and remove this h1 and replace it with just a django content block so two curly braces two percent signs and do block content and then right here i'll do n block content go and save that i'm also going to go ahead and delete some of these comments um we're gonna use this first default way of using bringing in the javascript so delete all that and i'll delete this um comment right there we'll go ahead and save that um there we go so there is our basic template setup there's one more thing i want to grab so we're going to use some font awesome icons later on and so we need to pull on that link tag and put it within our base template as well so back in a browser if we jump into another tab here i already have it open if you go to font awesome.com you should be able to log in here create a kit and it should give you give you a link that you can paste into your site so i have one right here copy that we'll jump back into the browser here and come right below the boot uh the boot shop link right there we'll paste it right there there we go we'll go ahead and save that so now let's jump into the index.html index there we go and to start off here i'm going to go ahead and bring in or inherit from the the base template so i'll do curly braces percent signs and then do extends and then we'll do landing slash base.html now below here i'm going to create my content block so we'll do block content and below here we will do in block content and within this tag here let's go ahead and just make an h1 and we'll put landing just to test this out make sure everything's working so in case you're not familiar with this this content block right here this will take whatever's inside of these two tags in this case it's just this landing h1 tag and it'll paste it in between these two block content tags in our base so it will come in here and it'll paste the code right here so now that done i'm going to go ahead and create a urls pattern a url pattern for this route but to do this i'm going to go ahead and create a separate urls.py file and the landing app for all the landing urls and just include that into our brute urls file so instead of our landing directory here i'll go ahead and create a new file and we'll call it urls.py and so first what i want to do is i want to import the your the path from the django urls so i'll do from django.urls import path and now we're going to create a url patterns list here and paste all urls within this list so we'll create a path we'll have it go to the root url and we'll go ahead and we want to use our our index view so first i need to import that so up here i'll go ahead and import from landing.views imports index and down here i'll go ahead and do index dot as underscore view and in case you're not familiar for every class based view we need to put as underscore view after the view within our urls now it's going to give it a name in this case we'll make it the name just to be just indexed for this put a comma there and we'll go ahead and save that now when you go ahead and include this into our root urls file so i'll jump down to my url step ui with my social network folder and up the top here i need to go ahead and import the include function as well so within our from djangos.jango.url's import path i'll put a comma and put include to import include as well now below the pattern here i'm going to go ahead and create another path and this path will go to the root as well so just be empty string and we'll do include landing dot urls and that will include our ruger else and so in this well that'll include our landing urls into this root urls file so in this case when we go to the root file which is the root because we have an empty string it will then go look in our lineage.urls file for any other matching pass so in this case we'll jump into our urls in our landing app and we also have a root url path here because just nippy string and so if we go just the root this index view will run and it will show our index page now if all is set up let's go ahead and test this to make sure everything runs so let's run it up here and let's run just a pyth let's go ahead and just do a python manage py run server let's go to a browser go to localhost 8000 and there we go we have our landing page working now let's build an actual landing page because this is working but it looks pretty terrible there's nothing really here so now let's build an actual landing page with some buttons for the user to log in and register once we set that up later so i'll jump back into my text editor i'm closing these files out and we'll go back to our index.html we're going to delete this landing tag here and i'm going to start over here i'm setting up some bootstrap right here so steelhead so to set this up let's go ahead and do div class equals container within this div i'm going to go ahead open another div up and give it a class equal into row justify content center margin top dash five inside this div here i'm gonna do a div class equaling to column dash md 10. column dash sm 12 and text desk center center there we go and now with inside this column here i'm going to go and create h1 put a class on it that will equal display dash two this will make it like a little bigger and we'll go ahead and put connect with your friends explanation point and we'll close off that tag below that let's go ahead and put a paragraph and we've got a class on that of martian top dash three to create some space from our header as well as lead to make it a little bigger and we'll go ahead and put follow people who interest you stay up to date on the latest news and join conversations stations with your friends i'm going to close out that tag and now below here we want to go ahead and put two buttons and i want them to be side by side and so do this i'm going to create a flexbox and then by default it will set the flux direction to row so set all the items within the flexbox to be side by side so go ahead and create another div give it a class and a flexbox with bootstrap which is d-flex i'll also center if i do justify content center and give it some top margin by doing margin top dash five within the flexbox i'm going to create two links so i'll do a link with an href and for now i'm gonna go ahead actually put an empty string and a pound for now until we set up the authentication a little bit and then we do a class equal into btn btn dash light margin right dash 2. this will say log in we'll close off that that link now below this will create another link href it'll just be just empty but just a pound sign for now and we'll do a class of btn btn-dark this time and then we'll set this one equal to register and we're going to close off that tag as well you want to go and close off that flexbox and that should be it all we need to do is close off this column row and container so close off that div close off the next one and close off the final container as well we'll go and save that now and now let's go ahead and rerun this or reload our page and see what our template looks like so i'll go ahead here we go to page and there we go now i have a better looking template with these two buttons that are side by side right here um that right now won't do anything until we set that up in a little bit that's all looking pretty good and that's what our landing pages look like so now let's go ahead and set up all off and so up here i have a link open if we go to the documentation here you'll see it has like a little step-by-step process here to set up everything in our settings.py file so to get this set up let's go ahead and jump into our settings.py actually first before we do that if you don't have it installed already either on this command to install it just pip install django dash all off once it's installed then you're ready to go set up in your settings.py file so we'll go ahead and just copy this whole thing right here and i'll paste it i'll scroll down here to the installed apps and i'll paste it right above it we'll delete this extra stuff right here and right here and that should be good there we'll jump back into our documentation here and this will all be in the description as well so you can go get the link to this down there but you'll see these installed apps here um yeah these you'll say these the following apps are required um this off messages and sites as well as these all off apps these first two should be in your app by default if you come look at your installed apps they should be down here um if they're not you need to add those in as well but if they're they're there then all we need to do is grab this django.contrib.sites go and copy that i'll put that in here i'll put it right below all these as well as these all off accounts as well these all off the apps as well i mean so grab these three right here go and copy that and we'll paste those right there um and you'll see all these other optional apps here these are all for the social account providers if you want to add that in you can for this example i'm not going to do that so i'm going to skip that if you scroll down here at the bottom though you'll see the site id equals one so i'm going to copy that and i'm going to paste that right below the installed apps we'll go and save that the last and if you want to do some other social accounts you can follow this here to get those steps as well but we're not going to do that for now and now the final piece we need here is we need our url patterns added as well so we'll copy this go back here let's go ahead and save this file too make sure everything's saved and go into our root urls file below this path here we'll paste that in there which will set up all the all of the urls save that and now we can do follow this file here or this this page here you'll see finally the last thing we need to do here is just to migrate the changes so jump into our terminal we'll just stop the server we'll run a python just python manage py migrate and you'll see up here we have off site social account all that's there so set everything up there now let's go ahead and run our server again and let's jump into our web page here and now we should be able to go to i think it's accounts slash sign up yes so now we have our sign up page here and it also looks very bad but we'll fix that here in a second and we also have um like login i think yep and sign-ins right there so they're all working fine we can get to all the pages here as well as here let's go to make this look good now so the way this can be done is if you go search for django all off github you will get to this page here oops and if we come into here you can look at the code if you go into all off you'll see a folder here called templates and we can copy these in and we can edit them and uh django will override the default templates but the templates we added and so you can come up here you can come and just clone this repository or go back one here and just go ahead and download the zip either way it's fine you can clone it here with this url um but what i'm going to do is i'm going to have the ones we used in our previous project i'm going to copy those in and make a couple changes for boost chat 5. um that way i'm not going to spend time time here on just the basic bootstrap 4 on this project so in our old app here from the previous project there's this template folder i'm going to go ahead and just copy this and right here at the root of the project i'm going to go ahead and paste those in here and with that done let's go ahead and add one line to our our settings file so we need to tell django that's where our templates are at so we can do that by going into our templates list here so this is a little bit of an older version of django up here at the top it'll it still says import os and some newer versions you might see like uh i think it's like called path or something here if that's the case you will need to type in base stir and then just a space slash space templates if you have an older version like the one i'm using here then we can just do our standard os.path dot join baster comma templates so make sure you're using that based off what version of django that you're using i'm going to save that and now we should be using these templates so we can go and edit them to make them look a little better and with that done our templates should automatically look a lot better so we go and reload this oh i forgot about crispy forms so real quick jump back into our settings i did not add crispy forms as an app here so let's go ahead down here and we'll do crispy underscore forms let's go ahead and migrate those changes over so let's stop this and then we'll do python manage the py migrate and now let's go ahead and run our server again and now our templates should look a lot better now you'll see here our inputs don't look very good that's because we haven't set our template pack up for crispy forms in our settings file yet so jumping back into our settings file we'll scroll the bottom and we'll put the very bottom here we'll do crispy templates pack and we'll use boot shop 4 because it'll work fine for this so type bootstrap 4. save that come here reload the page and there we go so this all looks great although we're using bootstrap 4 for our templates if you want you can just leave it like this and it'll work fine if you want to use boot shot 5 though we can make a couple changes to it and we'll have to change our templates up a little bit so i'm going to make that change here for the video so first i'm going to go ahead and copy in this link tag again go down here to our base template and replace where is it um looks like all this here can be replaced as well as down here we'll have some oh wait i put the javascript last time but i'm putting this time so i'm gonna come down here and i'm gonna grab this line right here to grab the javascript and i'll go right the closing body tag so right here and now with those changes done if we save this come back here and reload the template you'll see here we have an issue now with our button and this is because the bootstrap 5 made some changes with the button block styling so what i'm going to do is i'm going to jump into my templates again now let's go to all of them so first let's go to my login scroll down here and you'll notice here we have btn btn dark and then btn-block this one no longer works in bootstrap five you'll see here inside of the um documentation four buttons um it talks about creating responsive stacks of full width block buttons like in bootstrap four you'll see they have their with their display and their gap utilities which is supposed to give you greater control over spacing alignment so really the only change here with the make is right here we'll have to do d grid to set the display to grid and put the gap to 2 and then we'll have a button that looks like this like how we did previously so now i'm going to jump in here and make those changes so i'll delete this btn block i'll go ahead and put this entire button tag inside of a div so we'll do a div a class equal into d dash grid and gap dash two and it's gonna close off that tag here and then inside of here we'll go ahead take this i'll paste that in there just go ahead and save that jump back in here reload the page here and there we go so now we have a button again here that spans the entire width of this this block here it looks like it's pretty close right here so let's go and add some margin to kind of bring that away so we'll do a margin margin top dash like three or something just to pull that down a little bit there we go that looks pretty good so now i'll need to do the same thing for sign up and register and maybe some other pages but for now i'll stick to just those two so we'll go ahead and make that change too so we'll do a div class equaling d grid and then gap dash 2. close that out we'll delete this btn block and we'll go ahead and delete or we'll copy this cut this whole thing out and paste it inside this div and then once again let's go ahead and add some margin although this one actually probably doesn't need it we'll leave it how it is now let's go ahead and jump into our sign up as well and do the same thing here um so right here we'll go ahead and do a div class equaling to d grid gap-2 and we'll close this off here and then inside here we'll go ahead and cut this and paste this right there go ahead and save that and let's check these and see how they look all right so it's looking good if we need to make those changes somewhere else we can go ahead and do those as they come up um i am going to add the margin here though it looks like it's right on the input which doesn't look very good so back in my sign up templates right here let's just do a margin top dash three again we'll go ahead and save that make sure that comes down a little bit there we go all right so as different things come up there might be small differences in this bootstrap five versus bootstrap four that will have to account for but other than that though that's all we need to do so let's go ahead and add these links to our landing page so back here inside of our landing we'll go ahead and add these links here so we'll do url and we'll pass in things accounts underscore login i might need to change that i'm not sure let's do the same thing down here url account underscore um sign up i think if they're wrong we can go check and get them fixed but let's go and try that first so we'll go ahead back to our index page here hit login it takes us here if we come back hit register it'll take us here perfect i'm going to go ahead and get rid of this as well this little menu here so let's go ahead jump back into our base template i think it is um and there should be yeah this whole thing right here so we go and just delete all this i think should get rid of that yeah right there and then reload the page and there we go let's go ahead and make one more change though and around this block content let's do a div with a class equalling margin top dash five and i will come we'll put around this entire thing let's just bring it down just a little bit like that perfect um that's all we really needed to do for our login you can go ahead and sign up and everything else but we'll do a couple more things to configure it in the sign up page here right now email is optional for social media accounts we don't want email to be optional we want that to be required so we'll make that change we also want to go ahead and redirect once they sign up or log in back for now to that landing page until we create the rest of our app um so to make these changes we can we can jump into our settings.py file um right here and go into our settings and scroll into the bottom to make these changes so below our our crispy template pack i'm going to add a couple lines here so first we'll do login redirect url this will equal index so it'll take us to the index page once they log in and we also want accounts underscore email underscore required equals true and this will make it just so the email is required and finally since we have email required it will always send an email once they sign up and we don't want to set up an actual email account right now if you want to you can go ahead and do that um all the documentation is on django if you want to go find that but for now i'm just going to send all the emails to just to the or just to the terminal so we can just view them there make sure everything's working and this works great for testing purposes so we can go and type email underscore backend equals and a string that will be django dot core dot mail dot back ends dot console dot email back in go ahead and save that um and that should be it let's go and try to register a user and see what happens so reload this page here um you'll see email now has come to the top here with a star showing that's required so i'm gonna go and type in an email username password to get started go ahead and sign up see what happens so there we go it redirected us to the index page look at our console you'll see we have an email here um but then you go ahead here and it gives you a link here you can go to to confirm your email if you want to so everything's working great for the signing in so now that's done let's go ahead and create a nav bar so it's a little easier to go to all of our off links so let's go ahead and get a bootstrap navbar to start so i'm going to go ahead and just open some of this buttons tab here search in our docs for navbar um scroll down here we'll find something similar to what we want so copy this one right here i mean grab any of these you want to look kind of like this doesn't matter which one you grab let's go into our nav bar file paste that let's go ahead and also come up here and grab this other input right where is it right here so let's grab this div right here or actually let's grab the entire form let's see how this looks actually no we'll grab just the div itself i don't think we need the form and then we'll come here and we'll place this um this stuff within this form right here with what we just pulled in let's see how this looks now if i save this i should be able to jump into the base html and then above our block content here i should ability to include landing slash navbar.html save that come back here and reload our page here and there we go so now we have this form here we can search for user which will make um functional towards the end of this this project there's also links here i'm going to change these links now so let's go ahead and jump back to our text editor here come back to our nav bar let's change the brand here's the social network or whatever you want to name the site um we'll go ahead and put for now actually let's go ahead and just delete all these links inside this unordered list as we make something you want to show up here we can add them later but for now i'll leave a blank just for simplicity of this tutorial i'm going to save that come back here reload the page there we go so i have social network here and we have our search over here let's go ahead and make this social network here go to the index page so we'll pass in index or url and it quotes index and now the final piece we want is a little drop down that has like some information if they're signed in so to do this we can use an if statement within our tag to check if they're signed in and then if they are we'll put a drop down with inside of that that will display like profile information you know log in or log out um settings whatever else you can put in there so to do this we'll go ahead and put this uh we'll put it right over here so to the right of this we'll go ahead and put in all that so outside our form here we will go ahead and create a div give it a class equaling to nav dash item and then drop down and then inside of this div create a link and we'll call it nav dash link drop down dash toggle text dash dark and we'll do data dash bs toggle equals drop down um we'll do a roll equals and close button and then we'll do area dash expanded equals false and then outside this tag here we're going to add an icon so to do this we can use our font awesome library pulled in we do an i class and then pass in whatever whatever class you want for the icon in this case we want a user so we can type fas fa user to show a little user icon then go to close out the i tag and close out the link on the next line down here we can create our drop down menu so we'll create a ul do a class which equals drop down dash menu and then inside of here create li and inside an li here we'll go and create an a tag that goes to where we want to go to for now let's go and just put a profile and a sign out inside our drop down so i'll create an a tag within this li create a class that's drop down dash item href equals for now just a pound sign until we create this page and i'll type profile outside of this tag for the text for this li uh let's go ahead now actually first i'm going to close off that a tag as well right there now let's go ahead and copy this thing right here and let's make a couple of changes uh actually only the new change here is just these little the uh text here to sign out and the href we have our sign out link here now so we go and put url and then account underscore log out save that and there we go so now we go back here and load the page we'll see a drop down here with the menu so here we go here's our drop down there is one issue though right now is cut off the screen so the easiest way to fix this will be just to put a container around this to pull everything inside a little bit so div a classic container and then we'll go ahead and close it off right down here i've tried to close off the ul as well make sure you put that right up here and i can change this here to that div and save that come back reel up the page it pulls everything inside here and now we have this drop down not being cut off the war is not being cut off now if you look closely you'll notice one issue right now the background color is like a gray but this is white so let's make the background color for this whole thing to be just white and to do that we can get rid of this bg dash light inside the nav tag at the top here come back without the page and now it should blend in with the background there we go and now this is not cut off and now the last piece we're missing here is the fact that this shows up no matter what we only want this to show up if we have a logged in user and luckily with django this is pretty easy we can go ahead and jump into our template and just add one thing here around this so we can add if statement and to check if the user is authenticated and on the user object inside the request there is a dot is underscore authenticated which checks with either sets of true or false to whether the user is logged in whether it's a logged in user in the request or not and so to use this we can come right here below our form tag here put our django template templates and text in here and type if user dot is underscore authenticated and then we'll put all this with inside of that so if the user is authenticated it'll show this if not it won't show anything and i'll just show just the this form here is the very um last thing on the nav bar so now let's go ahead and find where this closes out right here so now at this point right here i'm going to close off this if statement so i'll do end if i save that come back here and refresh and since i'm logged in this still shows up if i go to sign out it'll come here to the sign out page if we hit sign out it now redirects us back here to the home page but now this link here this drop down here is gone because we're not logged in so this is all working great we have a simple landing page and a login register page for application this is where we're gonna stop today for this video the code will be in the description below as well as all the links to documentation that we have throughout this video and the link to the written tutorial as well so thank you for watching and i'll see you in the next video

Channel: Legion Script

Views: 2,075

Keywords:

Id: BlXQCPsdcDc

Length: 42min 29sec (2549 seconds)

Published: Wed Feb 17 2021