Transcript for:
Quick Start Guide for Django

welcome to the quick start guide for django where django is a very popular python-based framework for web development and it's notorious for not having a beginner-friendly setup well not anymore because i am here to simplify it and i will explain exactly how to connect all the pieces of the puzzle together so in this tutorial we will first set up a django development server then we will use it to render an html template we will then style it with some css and lastly we will even add some javascript to the mix which will be awesome so if you're new to this channel welcome to python simplify my name is maria and let's roll so let's open our terminal and create a working environment now in my case i'm using anaconda so i will type conda create dash n as in name and we will go for django qs as in django quickstart then we will install a python version of 3.9 and let's give it a run now if you're not sure how to use anaconda i have an amazing tutorial on the topic check it out now once we are ready we will proceed with y and beautiful our new working environment was just created so let's copy this conda activate django qs command and let's run it awesome we are no longer inside the base environment but we are inside the new one and from here we will install django with conda install c anaconda django or pip install django if you're not using anaconda we will once again proceed with y and we have officially installed django cool now let's go ahead and create a brand new directory for our project and we will do this straight from our terminal with the help of the mkdir command as in make directory we will call this directory django qs just like our environment and once it has been created we will navigate into it with cd change directory django qs now let's make sure that this uh location exists in our file system there you go django qs for now it's empty but we will fill it with some data very soon now once we are happy with the location we can go ahead and create a django project which will very soon contain our application so a project is basically the parent of the app now we will do this with django dash admin start project and we will call this project my project just so we don't get confused you can of course rename it on your end now let's hit enter once we do so we will revisit our previous folder where we have a brand new directory popping my project so let's have a look now we can find a manage python file as well as another my project directory with a bunch of other python files now at this point of time we can officially run the server and the reason is this beautiful manage file let's see how it works so first we will navigate with cd to my project and once we are in we will type python manage dot py run server now the manage file is in charge of administrative tasks just like django admin which we've used to create this project we just didn't have the manage file earlier so we couldn't use it now once we ran this command we have our development server running at port 8000 okay by default so let's go ahead and navigate to our browser let's type localhost colon 8000 and there you go we are accessing our django server obviously everything worked otherwise we wouldn't see this message now if you'd like to customize the port number we will simply go back to our terminal we will press ctrl c to terminate the server and then instead of using the previous command we typed we will press the up arrow which will pull it out and we will then specify at the end of it a different port so let's say 8080 okay then back in our browser we will change 8000 to 8080 and there you go okay so we can customize it as we wish in addition you may have noticed that just by running the server we have generated this new sqlite database file and we'll take care of it in the next tutorial for now let's just acknowledge it exists hello let's move on now once we have a django project we will create our app inside it for this we will first terminate the server with control c and we will type python manage dot py start app and we will call this app my app given the name of our project it only makes sense now once we do so we have created a brand new directory in the root of my project called my app with a bunch of more python files which is just great like we didn't have enough but before we go over all of these or most of these in great detail i find that it's a bit easier to start with the html template so let's focus on that first so back in our terminal we will navigate into my app with cd my app and we will create a brand new directory called templates inside it okay hopefully my head is not going to block it so let me just pull this terminal up yep so mkdir make directory named templates we will navigate there with cd templates and inside it we will generate an html file we will do this with the help of the echo command and the content of this file will be can you read this pretty straightforward we will then finish this expression with a greater than symbol and we'll call this file index.html let's give it a run let's navigate there through our file system there you go here's the templates folder and here's index.html let's have a look beautiful oh john you read this i had a typo but that's not the only problem we have here another problem is that this path is clearly not localhost 8000. we are not running this with django it's just a random html file on our computer so let's make sure django is fully aware of the existence of this file where our first task is to link the new templates folder to my project so we will of course navigate to my project and then to the inner my project directory where we will find the settings file now here the first thing we'll do is we will import the os module which will help us with specifying the path of templates then we will scroll down until we find templates and in particular it's directories key which for now is just set to an empty list and as you may guess this is exactly where we specify the path of templates we will do this with os dot path dot join and the first argument here would be the root of my project which is given to us by base underscore deer in all caps and if you're curious django already took care of this variable for us right above so we don't need to worry about it now the second argument of join would be the rest of the path which in our case is my app slash templates boom let's save it and now django knows that all the html templates will be stored in this directory cool let's move on since django now has access to our templates we can finally assign our index page to an http request where generally speaking a client or a user makes a request to the server and then the server in return responds with a web page so the key note here is that web pages don't just automatically appear but only as a result of a user request now the file in which we map requests to responses is called views and we can find it in my project inside my app and then views.py so let's quickly access it now views is what we call functions that receive a request as input and return a response as output so let's go ahead and create our very first view for index.html to do so we will use the def keyword followed by the name of the view which in my case will be my view just to keep things consistent now this view function will receive a single parameter called request and then immediately we will return a render function that takes in this parameter as the first argument so request and the second argument would be the web page we would like to display so index dot html now keep in mind that we don't need to specify the templates directory or my app because we already took care of it in settings but aren't we missing anything here anything major like the route for this we will create an additional file inside my app we'll just make a copy of views and we will rename it to urls now within the new file we will first take care of the imports so from django from django.urls we will import path which will help us with specifying the route then right below it from our current directory which is given by a dot we will import views as in views dot py which we have just modified then right below we will create a list called url patterns and yes the name is very important and we will assign it to a set of square brackets in which we will nest a path function now the first argument of path would be the route we'd like to select for our view and in my case i'm gonna go for my view which is quite simple and we will finish this route with a slash now the next argument would be the view itself which is given to us by views dot my view so we are basically fetching a function called my view from a file called views.py which we have just imported above which is lovely but guess what just because we've placed this urls.py file inside our django application it doesn't necessarily mean that django is aware of its existence so let's go ahead and fix it let's save this file in case we haven't done it earlier and let's go back to our file system now inside we will go to my project and to the inner my project folder where surprise surprise we can find another urls.py file so let's access it and here we will need to import an additional function from django urls on top of path we will also need the include function and then right above our existing path admin instance we will create an additional path instance and please do not forget the comma in the end of this expression because we want it to be separated from the next item in the list okay and also indentation very important now the first argument once again is a route so i'm gonna go for my app and then a slash now the last argument would be the file which we'd like to include in our project which means urls.py okay and we will do this with the help of the include function we have just imported and we will specify a string of myapp dot urls inside it so we are basically fetching the python file of urls from the directory that is called my app great let's save it and believe it or not we can officially run our django app and everything should work thank god now i wasn't kidding when i told you it is not a beginner-friendly framework let's navigate to our terminal and run it finally we will do this well actually we'll need to navigate to my project first we will do this with cd uh dot dot slash dot dot slash which basically takes us two directories back there you go and from this directory we will run our app with python manage dot py run server alrighty so we can now navigate to our browser and we will then type localhost 8000 but since we've just added a bunch of new routes our new extension would be slash my app slash my view okay hopefully it worked let's run it and there you go here's our html web page good job now if for any reason you don't want to have this my view extension you can always go back to our code we can find urls.py and instead of my view we'll just include an empty string okay we'll save it we will now terminate the server we will run it once again we will navigate to our path when we'll delete this my view and boom we are accessing the exact same web page but with one route less and perfect the most difficult part is behind us and now we are only left with css and javascript which is what we call static files so let's navigate back to our terminal let's terminate our server with control c and we will navigate to my app where we will create a new directory which we will call static it will navigate to static where we will create an additional directory called css we'll of course navigate there as well now in this directory we will create our style css file with echo once again and let's keep it empty so let's just finish this with a greater than symbol and then style dot css then we can go ahead and navigate there from our file system so my app static css and there you go here's our style sheet let's open it so let's get rid of this placeholder text and let's replace it with the most basic styling block i can think of so let's select all the elements on the page with an asterisk and then in a set of curly brackets we will specify the background color of slate gray can go for any other color it doesn't matter and then we will place all the elements in the center of the page with text align center then lastly let's assign a text color with color let's go for white okay white let's save everything and let's navigate back to our file system now since we have created this brand new static directory we'll need to specify it in my project so we will navigate to my project then to my inner project directory where we will access the settings.py file which we are already familiar with and the best part is we already know how to specify the paths of folders we'll just navigate below and we will copy our os path join command and we'll slightly revise it so let's uh let's then scroll much lower until we see this static url variable then right below it we will create a new one called static files in the same word underscore deers in all caps okay we will assign it to a list in which we will paste the command we just copied with the only difference of changing templates so my app slash templates to my app slash static boom okay we are done with the settings file now in addition we will also need to link our css style sheet to our html document for this we will of course access our templates folder and we'll open index.html with a text editor i'm going to go for sublime now this is not exactly a traditional html document it's just a bunch of text now usually an html document begins with a tag of exclamation mark doctype html and this is how we know that we are dealing with an html document that's pretty straightforward now right underneath we have an html opening tag and an html closing tag and in between those tags this is exactly where our web page lives now inside html we have two other very important tags the first one is head which contains metadata or information about our document so for example this is where we place our title okay so let's choose the title of uh this is actually my first django app okay that's quite appropriate and then in addition to the head tag we have another important tag called body which just as it sounds contains the body of our webpage or the content okay so if we're trying to recreate our previous webpage but in an html kind of way we would place our text inside a paragraph element given by ap tag funny name and in between those tags we will type chen you read this okay we will keep our typo to be consistent so let's save it and awesome now we are dealing with an actual html document with a proper one now in order to link our stylesheet to this html template we will use the django templating engine which only sounds difficult it's actually quite easy so right below our doctype tag we will open a set of curly brackets and then followed by percentage symbols now this is what we call a logical tag this is where we place uh if statements and for loops but in our case we need to use it for something else we will need to load an address or actually a path we have within our app so we will type load static and that's it so we are basically loading the static folder which we have specified as a path inside settings.py now once we have access easy access to this directory we will then physically link our stylesheet to our html document within the head tag and the way to do so is to open a link tag no okay looks like uh sublime automatically filled up all the information i had in mind amazing so basically we said the type of text css which indicates it's a css document and then we set the rel or relationship to a style sheet now the last thing we need to take care of is the adref attribute which is basically the path of our css stylesheet document okay so since we are accessing this static directory from our templating engine we will open a set of curly brackets inside them a set of percentage symbols and we'll type static now this will link us to the static folder itself but we are actually looking for the style sheet which is within a different directory which we will specify with slash css and then slash style css which is the name of our file okay so this is the static directory and this is the rest of our path beautiful let's save it let's give it a run so let's go back to our terminal there you go and inside we will need to access my project so let's just copy this path and let's navigate there beautiful and from here we will type python manage dot py run server like we already used to let's access our browser now in order to see a change in style we don't just refresh the page we also need to refresh the cache now if you're using chrome you will press the ctrl key and with the control key pressed you will press on the refresh key beautiful there you go here's our style sheet it is officially connected so next we will move on with javascript now since javascript is also considered to be in the realm of static files we will of course navigate to the static directory where we will create an additional directory of js as in javascript and inside it we will create a javascript file we'll just do it directly from sublime let's just make a brand new file and the easiest way to check if javascript is connected to our webpage is by logging something to the console we will do this with console.log which is the most basic command probably the first command you learn in javascript and we will type yoyoyo okay we'll then finish this expression with a semicolon because this is javascript and this is how we do it and now we will save it in this new directory we have created static js we'll call this filescript.js next we will link this new script to our html document and the way to do so is to place it at the very end of our body tag we'll then open a script tag and there you go here's some sublime magic once again where it automatically filled in the type of the document which is text slash javascript now the last thing we need to mention here is the src or the source and we can just copy it from above because we we kind of already have most of it written so let's copy it let's scroll down and in a set of quotes double quotes we will paste what we just copied and we will adjust slash css style to slash js slash script dot js beautiful okay let's save it hopefully it works then yeah the script tag needs a closing tag unlike the link tag from earlier cool let's now go back to our browser and let's refresh the page we will then access the developer tools with a right click anywhere along the page then inspect and then we will access the console tab where you can find our lovely message of yoyoyo now thank you so much for watching if you found this tutorial helpful please share it with the world and don't forget to give it a huge thumbs up now if you have anything to say you can always leave me a comment below even if it's just saying yoyoyo if you like this type of content you can always subscribe to my channel and turn on the notification bell now if you're rich i actually added a brand new thank you button so you can buy me coffee even though i'll probably spend it on computer parts it's just full disclosure guys full disclosure and yeah i'll see you soon in a brand new tutorial and in the meanwhile bye