Python Django Introduction and Beginners Tutorial

[Music] hello and welcome I'm Dave today we're starting to learn D Jango a python web framework and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there today we're starting to learn D Jango a python web framework and starting at D jango.com this is the homepage for the D Jango project and it has great documentation I'll provide a link to this in the course repository so what is D Jango well on the web page it says Django makes it easier to build better websites or web apps more quickly and with less code it is a web framework and after you learn the framework that is definitely true a framework abstracts some things you would have to build otherwise and so you can get started faster but when you first learn a framework it's a little more tedious because you have to learn how to use that framework and that's what we'll do so in the future you can also build better web apps more quickly with d Jango let's scroll down just a little bit and it says meet Django here it says Django is a highlevel python web framework that encourages rapid development and clean pragmatic design it's built by experienced developers so that will help us get started ridiculously fast with any project as they say because they've already mapped out a lot of this work for us it's also secure exceedingly scalable it has lots of great features built in as well and we'll get to some of those as we start learning D Jango now let's talk about prerequisites if you haven't learned python yet that's a good place to start this is not a python for beginners course but D Jango is a python framework for the web so you should probably learn some of the basics of python before starting this D Jango course and I do have a python for beginners course on my YouTube channel I'll be using visual studio code as the code editor for this series and you can get it at code. visual studio.com if you don't have it if you want to use it of course you could use another code editor of your preference but I will be using visual studio code also you're going to need Python and so if you don't have that installed or just want to update the version you do have installed you could download it and install it here from python.org and you can see once we're here there's a downloads page and the current version is python 3.2.1 I'm in vs code now and I've created a new folder my folder is called lesson one you could name yours whatever you want to as we start this series and after you create a folder and open it in vs code go ahead and open a terminal window by pressing control in the back tick and now let's just verify the python installation now I'm on windows so I'll type py but if you are on Mac or Linux you might be typing Python 3 to go ahead and execute python either way just so you know I'm on Windows and I'll be typing py okay after that let's check our version by typing D- version I'll press enter you can see I have the latest as of the making of this video python 3.2.1 now after after this we want to create a virtual environment we're going to do that by typing Pi or Python 3 if you need to on Mac or Linux and then- M and then V NV and then Dove NV if you haven't seen this before I Do cover it in my python 4 beginners course so after we've typed out this let's go ahead and press enter we should now see a folder over here in our file tree that is venv that would be our virtual environment but we haven't started it yet now this is another difference between Mac and Linux so on or not between Mac and Linux pardon me between Windows or Mac and Linux so what I want to type on Windows is Source space. venv scripts SL activate and that would activate my virtual environment but on Macer Linux instead of scripts it is probably in bin SL activate like that just so you know the difference once again so I'll type script SL activate press enter this is now activated my virtual environment so if I press enter again you'll see the parentheses. venv here so we know the virtual environment is activated now anytime we want to deactivate that we just type deactivate if I could spell it correctly deactivate and press enter and that would deactivate our virtual environment but we're going to need it right now as we install other things we want to do that in the virtual environment for our project so now let's install Django let's do that by typing p-m then pip install and then D Jango with the capital D press enter and this should install D Jango in our project virtual environment okay and after it's finished we also have a message here that says we could update pip from 23.2 1 to 23.3 point2 so let's go ahead and do that you may have a different message if this is in the future but I'll type p-m install and oh pip install excuse me pip install now dash capital u is the same as two dashes and the word upgrade so I'll just do that and then pip once again press enter that should update and I should now have 23.3 point2 which would be the latest now with everything up to date let's verify our Django installation so I'm going to type pi and that opens up the repple here for python so now that we're using python I can just type import Django and after that I can type print then Jango dogor version and then parentheses and then close out with another parenthesis press enter and yes we have D Jango version 5.0.1 as of the making of this video video now I want to go ahead and quit the python repple so I'll type quit I am having a hard time typing today quit with parentheses and now we're out of the repple we're still in our virtual environment if I press enter you can still see the virtual environment here with the parenthesis so now let's create our project with Django since we have Django installed so I'm going to type django-admin then start project then we need to name our project and I'll just call it my project and and press enter this is going to create our Django project for us and now we see a my project folder in the file tree after that let's go ahead and open it and we see another folder inside with the same name that can be a little bit confusing but that's actually what should happen we also see a manage.py file or py we will be using that to issue commands we won't change anything in it but we will use it now inside of this my project folder we see several other files as well and we will be working with some of those today since we've now installed Django and created a project we can start the server and make sure that is working so let's go ahead and do that here in the terminal window once again let's type Pi well we need to go into this directory first and remember we have two of these so we want to go into the top directory right now I'm in my lesson 01 folder so I'm going to CD to go into the my project folder now I'm inside of that that top level my project folder from here I want to type pi and then I'm going to type manage.py and now I'll issue my command which will be run server and we can specify the port the default Port is 8,000 but if I wanted it on 801 I would just type the port number afterwards but we could just let it go to the default which will be 8,000 so I'm going to press enter it will start the server now we do have a message here about unapplied migrations and you will probably see that too we won't be doing that today but just so you know that's nothing wrong just means we haven't got there yet and we will cover that right now the server is running and we can see it's running at HTTP 127.0.0.1 which is the same as Local Host that means your computer and then app Port 8000 so let's go to the browser we're back in the browser let's open a new tab and after we do that let's open up local host and let's go to 8,000 press enter and you should have the install worked successfully congratulations from Jango with the little rocket here just like I do that's our server and it's serving a default page and it says you're seeing this page because debug equals true is in your settings file and you have not configured any URLs yet but we will be configuring our own URLs this is just what you see from the initial installation now we're back in VSS code and in the file tree you should also notice that you now have a pach directory over here and that's nothing to worry about that just gets added and also this db. sqlite3 file those were added since we've created our project and started the server and nothing to worry about once again we will eventually get to those the pie cash actually just helps serve some things for our project faster but it's nothing we need to be concerned about now let's stop our server I'm going to click over here in the terminal and press control C and that stops the server from there I want to go ahead and click on the urls.py file that we have here inside of the my project folder and we'll scroll down to where we see the URL patterns here so we have a list and inside of it we see one pattern already that has path with the admin SL and then admin. site. URLs we're going to add to this let's start by adding a path for the homepage and so this will start out with path and now we'll just have an empty string here so two single quotes and then a comma now we're not going to put the next half yet but we will we will create a view for that but right now let's just put a comma and move on to the next one so I'll put another path and I want to put in an about page route so it will be about Slash a lot like we see for the admin with a slash and I'll put a comma there as well and then let's go ahead and put a comma afterwards also so with that much there let's go ahead and save the file we will come back to this to finish it but now we need to create a views file so in the same directory here where we have our urls.py let's create a new file let's name this views.py now inside of this we're going to have an import so we'll say from Django HTTP we will import the HTTP response now after we import that we can create a function for our route so we'll name this one homepage because it's going to our homepage it's going to receive a request for the homepage now this is a function so then underneath we're indented and here we're going to let's not comment that out we'll return and we'll have HTTP response now I'm going to response with something or respond with something very simple here like hello world that's kind of to be expected in a intro tutorial right after we say hello world let's go ahead and add something else like I'm home that works so that's just a simple HTTP response to a request for the homepage and that's what we should see when we go to our homepage once we hook all of this together let's put in another one for about so we'll request the about page now these don't have to be named homepage or about but it just kind of makes sense to match them up to what we are actually uh providing that is requested as well so we'll we'll link all of this together in the next page here in just a second but right now we'll say def about for our function and then I'm going to return once again an HTTP response now here I'm going to say my about page just keep it simple so we have our two responses when we expect to get the homepage or the about page requested so now let's go back to the url's page and we can can link all of this together and we're going to do that once again with an import we need to import those views first so I'll say from dot which means the folder that we are in will then import views that we just created now that we have those views imported we can use those with the paths here so I'm going to say views. homepage and that links to that homepage function that we created right here now after that let's go to the about and here I'm going to say views. about and so now we've linked those functions to our routes here in our URL patterns so when we get a request for the homepage it will call that function for the homepage and when we get a request for the about page it will call that function for the about page so now let's once again open a terminal window with control in the back tick and from here let's start our server I'll Arrow up so we can see the same command it's Pi then we call the manage.py file that we have over here and then we call the command from it run server and again you could choose a different port by specifying it like 80001 all once again go to theault which is 8,000 so after I enter this we once again see this warning that you can ignore about migrating and then it says it's running at Port 8000 and again that's at Local Host let's go to our browser and check this out now currently we still have the page that we saw before so we need to refresh this to see the new page refresh and we get a very small hello world I'm home I can zoom this in this a lot bigger here I'm at 500% now and you can read that very well let's go ahead and check out the about page while we're here so 8000 SL about press enter and we get my about page now these are pretty boring and I really had to zoom them in so we want to go ahead and do more than just send a couple of text messages like we currently did with the HTTP response let's create some HTML templates and make this look just a little bit better for our first lesson okay back in vs code we need to create a templates directory now so we can have some HTML templates instead of just sending text so what I want to do is go to the file tree going to click the manage.py file just so I know I'm on that same level and here I'm going to click a new directory icon and now I'll type templates so if we close this inner my project directory we should see templates directly underneath that now here I want to create a couple of HTML files I'm going to create home.html and here I'll type an exclamation mark which is an image shortcut and I'll press tab that gives me a quick skeleton of an HTML page and that's all I need right now going to switch the name document in the title home inside of the body I'm going to put an H1 and put the word home in there as well and I'm going to have a paragraph that says check out my about page but I'm going to change the word about here to a hyperlink so I need the anchor tag with an href inside of here I'll put a slash and then about close that out and put the word about so that links to our about page contrl s to save that file now contrl a to select everything in the file contrl C to copy everything now I'm going to just create another new HTML file here call it about. HTML and I'm going to contrl V to paste all of that in I'll double click home and then I'm going to press contrl D to select the next instance of home going to change that word to about now in the link here in our anchor tag the word about needs to be deleted because we're just going to go to the slash which is our root or homepage if you will and we'll change the word about to home so it says check out my homepage contrl s to save that file and we're finished with the HTML files now let's open the second my project folder look inside of here to the settings.py file we need to scroll down if you start at the top here to scroll all the way down to where it says templates then inside of this list for templates we need to go to where it says durs in all caps stands for directory This Is Us telling D Jango where our templates are so we put in single quotes we going to type the word templates here that refers to our templates directory contrl s to save that change and that's the only change we need for the settings.py file right now after that let's go back to the views .p file now I'm going to comment out some of the code here I want to leave it in here because we used it earlier in the tutorial and Others May of course download the code and need to see these lines as well so I'm just going to use the hashtag to comment out that import and both return lines here we're going to change these but I want to leave this in just to refer to earlier in the tutorial so now the import we need starts with from then we'll have Jang . shortcuts after that we'll say import render and then we're going to return render on each of these lines so I'll start a new line here and I didn't need that quote either let's come down return render the first thing we pass into to render is the request after the request we're going to render our HTML template so here I'll say home.html we don't need to do anything else d Jango now knows where this template is because we linked it in the settings I'm going to copy this line for the return render contrl C come down here into our about function paste it once again change home to about so now I'm referring to that about template go ahead and contrl S to save this let's open a terminal once again with control and the back tick I still have it running right now but just to make sure let's contrl C to quit and then let's go ahead and restart it with Pi manage. Pi run server I'll press enter now we know it's restarted and let's bring the browser up to see if we can see our changes right now we still have the old page here that says my about page we can hit back we still have the old hello world I'm home but let's refresh and see if we get the changes yes we do so we now have an H1 check out my about page and it looks like it links to the about page let's click that it does we're now on the about page and it has a link to the homepage so our HTML templates are working as expected back in vs code let's go ahead and contrl C to stop the server close the terminal and now we want to create a static folder for some CSS and JavaScript some static assets for our project so to do that we want it on the same level as this templates directory to make sure you're on that same level you could click the manage.py file here in the file tree if you want to from there I'm going to click new folder once again here I'm going to call this folder static because they are static assets that will go inside then I'm going to create a new directory inside of static I'm going to call it CSS now inside of CSS I'll create a file call this style. CSS now I hope you're familiar with CSS if you're not I do have a CSS course on my YouTube channel as well here I'm going to start with a simple reset we're not going to add a lot of styles here but I'll reset as I usually do so part uh margin and padding both at zero after that box sizing to border box that is my simple reset after that let's make a change to the body so we definitely know the CSS is taking hold we'll do a Min height here of 100 VH after that let's set the display to grid and then we're going to place content Center so everything will be in the center of the page set the font size to three Rim so it's big but not too big background color let's switch these around so let's go with black and then let's set the color the text to white smoke after that we'll just change our H1 and paragraph just a little bit so both of those and let's say text align going to be Center that's all the CSS we need and we can apply this to both of our HTML templates and to do that we need to go to the settings.py file again that is inside of that second my project folder at the very top of the file we need to add One Import and that is import OS after we make that import we'll scroll down to almost the bottom of the file now we can see we have a static URL here but we need to add something underneath this so here in all caps we'll say static filesor for dur from there we'll put in an equals and we'll create a list now let's refer to that import so os. path. jooin then inside of here we'll refer to the base directory that's already defined above in this file for us and then we'll say static and this is referring to the static directory that we created over here so we're telling D Jango where this folder is for our static assets so let's go ahead and contr s to save those changes again to the settings file and now we need to go back to our HTML templates and add our stylesheet in and we can do that with a d Jango templating engine it's very cool how it works so I'll show you in the homepage and we'll go right underneath the dock type definition here and let's put in a curly brace and then a percent sign say load and then space static another space and another percent sign and then the closing curly brace so we have loaded in static asset now and now we can use that and we're going to use that when we link to the H or to the CSS and that is a link element I can scroll down or arrow down here and say link CSS I get some Auto completion it says it's a stylesheet it's already linking to style.css but that's not what I want to do here in D Jango I to link specifically to the file that I have told Jango that we have and so so I'm going to use that templating engine again a curly bracket opening and closing and then a percent sign and then the word static and then in single quotes here I'll say CSS style. CSS so now I've used the templating engine but I need to put in that closing percent as well so this is what it looks like when we're using the templating engine we're starting with these curly brackets and and of course having the percent signs as well this should link our stylesheet to this page so let's check this out we'll need to again open the terminal start the server after we start the server let's go back take a look at our home page let's refresh and see if the changes apply yes they do so we have a big home and it says check out my about page we haven't applied the CSS to the about page yet so when we go there it still is without those Styles so I'm going to apply that in the GitHub repository for this lesson but I'll leave this one for you to apply because it's just the same thing we did to the homepage and once again back in VSS code let's link some JavaScript as well so you can see it works the same way I'm going to click on the static directory going to click to create a new directory make this one JS now inside of the JS directory I'll create a new file and this will just be main.js inside of here I'll just put a console.log and say this is Js from your about page and we should see this message in the console if we link the JavaScript correctly to the about page so now in the about. HTML and this is where you're going to link the stylesheet and you can check my repository to see if you did it the same way that I did but now we need to link the JavaScript as well so again at the top which you would need for the CSS anyway we're going to start with load static and we're using that templating engine so we have the curly brackets and the percentages now after the title here I'm going to put a script tag so I typed script and I'm just going to choose the source here from the list so we could specify a source this is where we'll use that templating engine but I also want to point out we should put defer right here as an extra attribute for the script tag so this will wait until all of the page is loaded and then it loads the script is what defer essentially does now here we'll put in the curly bracket percent say static just like we did before and now our link so JS main.js again the closing percent there as well so let's save this change I left the server running let's see if it applies our changes when we go back to about reload Lo the page now I'll press control shift and the letter i to open up our Dev tools over here and see the console and we have our console message this is Js from your about page remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon and

Channel: Dave Gray

Views: 49,712

Keywords: python django introduction, django, python, python django, django python, python web framework, django for beginners, django beginners tutorial, python django for beginners, beginners python django, beginners django, django introduction, django intro, django website, django web pages, django URLs, django views, django templates, django static files, django tutorial, django python explained, django python web development, django python framework, django python app

Id: qcJZN1pvG6A

Length: 27min 29sec (1649 seconds)

Published: Fri Jan 05 2024