Python Django Project Complete Step by Step Guide "How-sorry-are-you-quiz" | Full Stack Dev Tutorial

hey guys today we're going to create a full stack quiz application using D Jango because a bunch of people pissed me off they apologized but I don't know if I should forgive them cuz I can't quantify the level of sorry they're at that's why we'll be creating how sorry are you quiz all right so a prerequisite to using Jango and following along is having python installed on your system so let's check if we have python by typing pi- Das version I have python if you don't have Python and you want to follow along make sure to download it next up let's create a directory where our project will live that's call it sorry quiz and now let's CD into our sorry quiz and open it in Visual Studio code and now we're going to need need to create a python environment so you can click on view command pallet python create environment we're going to create a ven virtual environment right it took a few seconds but now we have our environment ready let's open Terminal and we see the V here which is great cuz that means our virtual environment is ready to use first thing thing we need to do is install D Jango so pip install D Jango okay I V think something suspicious might be going on and that's normal it always does that all right we're all good we have D Jango and next we want to start our project so we're going to use the command Jango admin start project I'll just copy it from the docs tutorial so Jango admin start project sorry quiz project is that a good name I don't know anyways let's see the end to it sorry quiz project okay and now we can um check on our server so P manage.py run server yay the install worked success successfully congratulations thanks D Jango for making me feel like I've done something important when I've done nothing now uh let's start our app Oh but before we do let's I'll run p manage. p migrate and now we want to create the app so pi manage.py start app sorry quiz nice super awesome okay and now we need to add the sorry quiz app to the installed items in the settings [Music] so sorry quiz. apps Sorry quiz config and then we want to create a urls p in our sorry quiz directory the url.py file is how we are going to connect our views to routes and to make it work I'm going to just check the docs really quickly uh URL dispatcher yes we're going to need this code let's copy it and paste it we're importing path from Jango URLs and we're importing our views that we haven't created yet actually why not create our first view okay so Define index request return render request and then index.html now we can go back to our urls.py and create our first URL pattern and and it would be path and we'll leave it empty because that's the root and then views. index name index okay and now let's create um a template directory to keep our HTML files so it be index.html and and um let's also create a base generic HTML file it's going to serve as a template and in order to make our HTML work we're obviously going to need boiler plate so let's get some boiler plate so HTML 5 boiler plate okay let's copy it and paste it all right let's also create a static folder to keep our CSS file so we're going to need a CSS file so let's create a directory in it and a new file and call it styles. CSS and now let's go back to our base generic and over here we're going to load static and now to connect our style sheet we're using D Jango templating link language and here we write static and then going to be CSS slash styles. CSS I think I think that's right okay and here let's add block title and let's make a default title are you sure you're sorry huh and we don't need the script tag let's create another block and it would be the content block and now let's go to our index.html and we want to extend our base generic okay and then we create block content and block and here let's type in hello world okay and now we got to go to our urls.py in the project directory and we got to import include and then we're going to add path let's say are you really sorry and include sorry quiz. URLs my gosh that's not how you spell include so from what I remember D Jango doesn't serve static files but by default we're going to need to activate that okay so I'm just going to copy this code cuz we're going to need to add it to the urls.py if we want to use static files in a development environment so let's copy this and delete the rest okay I think if we run our application we should be able to see Hello World so pi manage.py run server okay something is wrong with how I added it so maybe I should just cut it again and do a plus sign like this yes I think we got it let's try oh yeah see it works when we go to are you really sorry but let's make it redirect from the route to SL are you really sorry by itself I think there's something called redirect view but I don't remember how to import it so Jango base views where is redirect view here it is okay let's copy it so from tringo BL blah blah blah blah import redirect View and uh we will add path redirect view as View and we want to redirect it to are you really sorry and then we going to make it permanent true okay now there's something wrong maybe I need to add a slash I I need to write I think I think I should write URL cool here oh I I forgot this yay I think we fixed it redirects by itself all right guys since we're doing so well let's Grant ourselves super user status so we can access the admin page so to do that Pi manage.py create super user no not Pico super Pico email address is Pico at test do test password I'm totally not just going to re password yes yay all right now let's run server again and let's go to admin and type in super Pico because that's who I am and my password is totally not just the word password yay y there's an admin page already ready for us okay now let's create our models for the quiz let's create a model called quiz so class quiz models. model every quiz is going to need a title and it will be a character field so models charfield and and max length should be maybe 225 and then we want to make it so quizzes don't appear on the page unless they're ready to publish to do that let's make is ready to publish let's make the default false so models booleanfield default false okay and then let's define string method and it will be self do title okay and since plural of quiz is not just quiz with an S we should create class mattera and add in verbos name plural so that we don't need we don't see quiz with an extra in our tables and on the page and elsewhere so quizzes okay super cool all right now we want to create questions that are going to have a many to one relationship with our quiz model so class question models. model and it wants to have a text field I'm just going to copy this title field and um I'm just going to change the word title to text and then we're going to establish the relationship between the quiz and the question by adding forign key like this and then quiz and then related name is questions and then if the quiz is deleted we want the questions to be deleted as well so on delete models. Cascade all right and we also want string method defined as well and it will be self. text I'm thinking that this quiz should be a multiple choice quiz this way we would be able to guarantee that at least one of the responses on there would be a response that we would be okay with all right so let's create class choice and I'm so lazy so I'm just going to copy class questions and change the name to choice and choice would also have a text field and it will have a many toone relationship with question and I want the choices to have a score as well uh because we want to be able to calculate the level of sour us and it will be a float field for accuracy default would be zero all right oh and this should be question not quiz Pi manage. P make migrations I wrote plural okay wow let's fix that plural I am very sorry let's try again let's make my great okay Pi manage. P migrate okay our models are now ready so let's register them in admin.py first thing we need to do is import our models let's just import everything and then let's just register our models admin. site. register and let's register quiz Quest Choice okay and now let's check our admin page we can see our models okay let's check our quizzes models and let's try to add a quiz let's call the quiz how sorry are you okay and now our quizzes model has one quiz we can also create another quiz let's call it how sorry are you for real and we have two quizzes okay but if we click on the quiz we can't add questions to it let's go to questions and add a question let's say for how many hours have you dat up thinking about how wrong you were and we can choose a quiz so we can add questions we can add choices to that question but the UI is very annoying because you have to go to questions to add a question and if you want to add choices then you have to add the choices one by one which is not what we want so let's change that and make a more convenient I that is actually usable I can't imagine a situation where we would want to add choices without questions so let's comment out this line and let's define a choice inline class and we'll use admin tabular inline to do so model Choice extra one okay and and now we want to register this Choice inline class within our questions admin class so to do that we're going to Define another class which is class question admin admin model admin and in lines would be choice in line and also you want to add a list filter quiz okay let's refresh we see questions and quizzes let's go to questions we're supposed to see oh sorry guys I forgot to to register it question and question admin something is wrong in lines must be a list or a topple oh yes this oh list filter seriously okay let's go to admin yay all right let's go to questions and we can add choices okay so the question was for how many hours have you stayed up thinking about how wrong you are so choices are all night and let's make the score for this five or um 2 hours which is definitely not enough so let's make this score two and then I did not and this score should be definitely a negative score let's make it -6 and then more than 2 hours let's make this let's say 2.5 awesome all right let's go to our quizzes and you can see here that we can see both of our quizzes how about we start playing around with our styles. CSS okay let's begin by adding some styling to our body how about we create a linear gradient and we want to make it black black to Black yep but one black would have lower opacity than the other that is not what I had in mind let's fix that by making height 100% yes that worked okay and we no longer see our hello world so let's make text color white see it again nice Okie doie I'm probably just going to want to Center my quiz items so I'm going to just create I'm just going to create class parent div and uh give it display flex and align items Center and justify content Center and then I'll create another class call it Center div line items Center okay now let's go back to our index and let's create two divs and use the classes okay looks like it worked okay I'm thinking that we should go back to our base generic and start creating a nav bar so we want our nav bar to have some items to the left and others to the right so I'm going to create two divs I'll give this one FL nav left and the other one last nav right a nav left will just contain a hot link and it will link to the main page URL index in have right uh we're going to have login or log out so if users are logged in they'll see log out and if they're Lo logged out they'll see log in uh let's just make a placeholder for now and then later on we are going to create the logic for logging in and out so just going to copy this and for now we just want a placeholder okay now let's go back to our styles. CSS and let's add styling to the nav so display should be Flex justify content space between okay and in general we want to customize our links all over our app so uh let's get the a tag and make text decoration none all right I think we are ready to go back to our views and uh see if we can show the quizzes in our index so the first thing we want to do is import our models and then let's create variable quizzes and and it would be quiz doobs do filter and then is ready to publish equals true okay and then let's create variable context and it would be a dictionary to have quizzes Which would be our quizzes and now let's go to our index.html and let's start a for Loop so for quiz in quizzes quiz and then and four okay okay and now if we hit refresh we should see the quiz that we have set to is ready to publish and we do we did it that was so easy right okay um let's see what would happen if we add another quiz let's go to admin and um let's go to quizzes and let's make this quiz is ready to publish and save it now when we refresh we should see two quizzes and it works super cool right next up we are going to go back to our views.py because we want to create quiz detail view where we're going to render our quizzes and it's going to take request as a Pam and also the quiz ID which will be passing in through the URL okay first let's get hold of the quiz to do that let's import get object or 404 and use it get object or 404 quiz and here quiz ID and then we want to get a hold of the questions in that quiz so quiz do questions. all and then let's let's create a context dictionary okay and then going to return render request then we want to pass in the context um and we want to pass in the template name so it would be um quiz what am I doing it's a string quiz detail so let's create it okay just like we've done with the index let's extend base generic and also add in the block content let's see if we can get the quizzes title so quiz tile and then here instead of for quiz in quizzes let's make it for question in questions question all right now if we want to see what we've done we have to go to urls.py again and we have to add in the path to quick detail so path say quiz slash in quiz D quiz detail and name is quiz detail also okay I think this is correct all right and now we need to go back to our index.html and link to it so here for quiz to quizzes let's add a link H RF and then URL quiz detail quiz ID okay I'm hoping if we refresh oh something is wrong I think it should be quiz. ID right yes it worked it looks terrible we're gonna fix how it looks let's click oh it didn't work I spoke too soon okay so looks like the error is here and the views.py so let's go back to it and what if we add ID like this would that help oh I see I also forgot to write HTML okay let's try again yay it worked okay next up we want to add in the choices to our quiz detail so go over here and start another for Loop for choice in question dot choices. all and then we want radio input okay I'm going to copy this and then customize it so here the ID will be choice. ID so let's add in Choice like this and name let's make it question. ID and the value choice. ID and then for let's copy what we've added to the ID and paste it so Choice uncore choice. ID and over here you want to see our choice so choice. text all right right let's see what happens if we refresh oh I forgot to end the for Loop and four yay it works I'm so happy actually but let's add break nice we did it we have officially earned ourselves a break oh by the way if you like the video please hit the thumbs up button and if you haven't subscribed please do all right hello again I'm thinking that we should try to improve the appearance of our website we're not going to go crazy cuz we want to finish this quickly so let's actually create a variable to um uni y the text colors so font color and let's make it whsh okay I think that is better then let's change the font family let's choose this one sarif and now let's go to the nav bar and add some padding bottom let's make it three R and let's make the font size size x large let's add some padding top and make it one Rim okay and now let's go to our centered div let's make the width 80% and for our lengths let's change the color and let's make it the same as our text for now okay so let's add some margin top okay and let's go back to the quiz detail and let's make this an H2 just to see what happens and um let's add HTML tag to the quiz title let's make it H3 and let's give it the class title make text decoration underline and I'm not sure if I'm in love with how big half bar is that's better I feel like the quiz looks okay so far like I would send it to a person that I'm really mad at and I wouldn't feel embarrassed about it however uh I would like to fix this page the index.html I'm not going to like make big changes or anything but I would add a title that says quizzes and I would start an unordered list and have the quizzes be list items yeah I think that's better our app would be completely pointless if there was no way for us to tell which user answered what so we would need an authentication system all right luckily Jango is awesome and comes with an authentication system already set up with middleware and everything cool stuff but we we got to set up some stuff one of the things we need to do is create uh the templates for for our account related stuff so let's do that let's create uh a templates folder in the root directory and let's create another folder in it called registration and that's where we're going to keep files like login. HTML and so on okay now we need to go back to our settings.py and tell our template loader where to look for our templates so we're going to import OS and then we're going to go all the way to templates and over here we want to add in os. path do join base D templates all right super cool and now in order to include our account paths we have to go to the urls.py and our project directory and we're going to add path accounts and then we want to include actually I don't remember the exact code so I'm going to Google it quickly I'm sorry so uh Jango oath yourls yes that's it that's the line we want okay all right and now run server as you can see there are some paths that are already available for us just because we have included Jango Contra o. URLs and uh if we try to go to log in right now we will find that it's an empty page and that's because we created the login. HTML file but it's empty so uh let's change that all right let's go to our quiz detail and just copy this and then let's paste it in our login. HTML and then let's delete um everything other than the block content and the two divs that we have created earlier okay let's refresh yes it works okay now let's create a form and let's give it the method post and action URL login and also C srf token for protection and then we want to render our form form form as p and then we want a submit button so button type submit and it should say login and then submit okay let's refresh all right looks like I made a mistake and looks like the mistake is here okay oh I think should be like this oh yeah he it shows and doesn't look terrible all right let's try to use the super user we've created earlier to see what happens when we try to log in oh so it tried to redirect us to account SL profile which we haven't created at all so let's change where it redirects after login to do that let's go to settings.py and let's let's add login underscore redirect underscore URL and we want to redirect to the route let's run our app and try again so P manage.py run server okay super Pico it worked all right so we could just as e easily create a password reset form and also set up password reset system but I actually don't think we need that we don't need a registration form either because these quizzes or this entire website was created for specific people so I'll be creating accounts for them through the admin and then I'm going to send them their accounts so for example I'll create an account for a lady called Margot and I could create a password for her of course we could later on create all sorts of things if we want we could allow users to change their passwords we could do anything pretty much but for now minimalism will have to do cuz today is the 30th of December and I would like to forgive everybody that I'm mad at before the end of the 31st cuz I want to start the new year full of warm feelings towards everybody all right remember when we said that we are going to fix this part of the nav bar like we're going to make users able to log in and log out okay so let's add the logic the first thing we want to do is check if user is authenticated and if they are then we want to give them the ability to log out let's let's let's cut this inside U the nitetive okay so if user is authenticated then we want them to be able to log out so we'll create a form with the method post and action would be URL log out then we can add C srf token and a button with the method submit and it should say log out okay and then let's add else and else we want to be redirected to URL login okay so and if okay let's refresh yay when we click on login we go to the login page let's try logging in a super Pico again all right we logged in now let's log out and we logged out and then actually when we log out I I think it would be better if we get redirected back to index . HTML so um let's go to settings.py and I'm going to copy login redirector URL and paste it again and change login to log out right and that should do it all right so right now anyone could see any quiz but we obviously would not want that we want only logged in users to be able to see the quizzes so let's go to views.py and uh we're going to need to import login required decorator so I'm going to Google how to do that yes that is the one we want okay so we copied it and paste it and on the quiz detail we're just going to use it so add log in required and we're going to add in the login URL so that the user gets redirected to login all right I think now it should work so let's go back to quizzes and as you see when when we click on a quiz we don't go to the quiz anymore we go to the authentication page uh the login page uh so let's log in and see what happens password all right and now after we have logged in we can see the quiz easy peasy right all right I think it's time to create uh the user responses model all right so class user response which inherits from models. model and of course the user response model would have to be associated with with a user let's import the user so from Jango do contrib do oath. models import user all right and we want to establish a one to many relationship between a user and user responses so uh models. foreign key user on delete models. Cascade okay and we also want a one to many or a many to many relationship between questions and users so um keep it that way also we want a relationship with quizzes let's just copy this and then paste it fix it up okay and finally we need choice choice Choice okay and let's copy the string method and give our user response class string method also so it doesn't get jealous okay and it would be self. user do username all right so although I am very lazy I still feel like if we're going to make a string method let's make it make sense so let's start a string L literal I'll be self. user do user name then we can say response [Music] to s dot question text [Music] n self. quiz. tile is self. Choice dot text oh wh why why did I make this capital I I don't know I'm sorry I don't know all right next up we want to Define find another method to calculate uh the quiz score So Def calculate score self what's up with me writing capital letters accidentally I don't know okay total score again I did again I think I'm used to JavaScript okay tot score sum choice. score for choice and self dot question. Choice do all would this do it would this do it I hope so and then we want to return total score all right so now we have to go back to our views and our templates because although we can see the quiz question and choices this is not actually a quiz it's just displaying the choices for us but nothing happens like there is no logic and they there isn't even a submit button so uh let's fix that we are going to create a form element with the method post give it the ID quiz form and action URL quiz submit quiz. ID and of course we have not added this URL to our URL paths so before we continue the forms logic let's go to our urls.py and add it just to save myself some very little effort I'm just going to copy this and then paste it and and I'm just going to add submit and here in the views we will have views. submit we've also we also didn't create it yet but we will and the name will be qu submit so let's go to views and let's define quiz submit we're going to add the logic in later okay so let's go back to our quiz detail we could add a csrf token because why not you know everybody loves csrf tokens I think okay and over here we are going to add button with the type submit submit quiz button okay now let's go back to our views.py and let's add the logic to our quiz submit if request. method is post then we want to get the quiz I'm just going to copy this line and paste it and just and I'm going to copy this line where we get the questions and paste it and we want to make sure that our guilty users would answer all the questions we give them so to do that we're going to tell them when they miss a question by with an error message so let's initiate a variable error message and set it to none and then we want to iterate through the questions so for question in questions Choice ID would be request dopost doget and it would be string literal question underscore question. or none okay and if Choice ID choice is get object or for for again but not quiz be Choice an ID would be Choice ID okay now we want to create a user response object so user response doobs do create user is request. user quiz quiz question is question and selected choice choice else we want to populate the error message and that would be select a choice for each question okay so if there's an error message then we want to use messages from Jango contrap so let's import it so from Jango Contra import messages okay and if err message then messages. error request error message context quiz quiz and questions questions and then return render request quiz detail. HTML and context oh if error message okay and then messages if we don't get it an error message if everyone goes up as planned then you want to send a success message tell the user that so we want to tell them quiz submitted and we want to redirect to index because we can't be bothered to make any more templates right now okay so return redirect with detail with ID we can't use redirect without importing it so let's import it all right let's make migrations and now let's migrate all right and let's run server again so type error unexpected keyword selected Choice have I not added selected choice to the user response model oh I named it Choice okay let's change it to selected Choice let's make migrations so Pi manage. Pi make migrations yes and then Pi manage. Pi my great and then let's run server again I just remembered that I forgot to add messages which means that the error message and the success message won't show so let's let's just add them to the base generic under blog content let's make it if messages uh let's create an unordered list give it the class messages and then for message and messages if message. tags class message. tags and then and if message and then list and then let's end for and let's also end if adding in a conditional for the classes would allow us to style the m mesages differently based on whether they're success messages or error messages so let's go back to styles. CSS and let's add styling to class success let's make the color green and for error let's make the color red okay and now let's go back to our page template syntax ER error oh I see and if like this okay let's pick says qu submitted awesome but I don't want there to be a choice chosen for us by default I want to make sure that people deliberately pick their choices let's remove checked okay now if we submit quiz we see the error let's choose and submit and we see that quiz is submitted this is very nice okay how about we copy those Dives and wrap our errors in those Dives so that they don't look very out of place okay yay up until now we haven't registered our user response model in admin so let's get to that okay so unfortunately just registering the user responses like we've done with quiz would not do so we're going to have to create class user response admin with the admin model admin and we're going to have to customize it I'm just going to copy this and paste it and change the name to user PS admin and we are going to take advantage of this display functionality and we want to see the user or the username and we want to see the question and we want to see the selected choice of that question and we want to see the score the user got for this question or the score that is associated with the question and we want it we want to see quiz total score and also we want to add search Fields user usern name and we want to add list filter and we want to filter by user or by quiz okay oh another thing I forgot to add to the list display is the quiz title all right so in our list display we have some things that we are going to need to Define so let's start defining them first we want to Define quiz title and it is simply the title of the quiz and we just got to get it all right next next we want to define the score so return object dot selected Choice DOT score score if object do selected Choice else zero and then we want to Define total score and it's based on the user responses so user responses user response doobs do filter user object. user and quiz is quiz and total would be user responses do aggregate total score score sum and then finally return total if total is not none else okay and then just like we've registered question and question admin we're going to register uh user response and user response admin so I'm just going to copy this and change it user response response and user response admin let's run server again oh okay I made a mistake oh it's because I called this total score and this quest to Total store score so let's fix it yes that works all right so now if we go to our user responses we will find that uh we have a table with a user the question the selected Choice the score for the selected Choice quiz title and the total score of the quiz let's go to quizzes or to questions actually and let's try adding another question uh let's make it who is the best person in your life and let's make the text my mom and that would be one and I am let's make it two and then Pico and that would be 100 or 1,000 why not nobody says things have to make sense okay and let's make another question let's have you bought Pico and Apollo letter and the text is yes sure let's make it one and just because I'm tired and sleepy I'm going to add the questions later I'm just going to leave it at that and uh check our quizzes okay we got to sign in oh we made a mistake I mean I did you guys are innocent okay let's go to quiz detail and the mistake is that we have our button inside our for Loop which is very stupid of me all right now if we refresh problem solved okay let's try to submit quiz uhoh we have to select the choice for each question so let's just do that okay and if we submit quiz it works okay now let's go to admin and let's go to user response responses okay and we can see responses here we can see that our Crystal score actually calculates the score by summing up the score of each choice which is cool right it does it does so much for us okay I think I'm very happy um let's create another user let's call the user loser user and let's make the password I hate pass I hate pass right let's save let's go back to our quiz okay and uh you want to log in as loser user yay we logged in as loser user all right so let's pick some responses nice qu submitted okay now so let's look is super Pico again and the password is password yay and we can see loser user responses okay if we only want to see what loser user said then we can just click on loser user if we want to see what Pico said then we click on Pico test user we click on test user so everything works the way we want all right all right fine I'm going to add some styling to the button just chill oh I'm talking to the voice in my head all right so this is how the quiz looks now I think considering the time constraints and everything we've done an awesome job and all right guys thank you so much for watching I had fun if you have any questions or suggest suggestions please leave them down below if you like the video please hit the thumbs up button and if you haven't subscribed Please Subscribe all right have a lovely evening and see you later bye

Channel: Piko Can Fly

Views: 1,413

Keywords: python, django, fullstack, webdev, javascript, backend, developer, project, beginner, friendly, coding adventure, fireship, code with, code along, tutorial, guide, awesome, smart, best, cute, coding, girl, coders, girls can code, programming, API, portfolio project, easy, idea, portfolio, develop, code, js, html, django templating, full-stack, design, admin, database, python models, authentication, user class, admin class, .models, superuser, django project, settings.py, register, templates, computerphile, webdev explained

Id: s0aCEXg3ct4

Length: 62min 10sec (3730 seconds)

Published: Sun Dec 31 2023