Transcript for:
Backend Development with Django

[Music] heat heat [Music] [Music] all right what's popping everybody welcome back to the FMB App Academy 2025 i am your host my name is Karo Mu i'm always thrilled and excited to be part of this beautiful ecosystem which is the app academy the perfect place to get you guys kickstarted on building those winning apps of yours all right so congratulations you guys have now made it into the advanced phase of the app academy this is the final stretch where you guys just have to continue pushing as we reached uh the finish line of this beautiful ecosystem all right so the previous session was a wrap-up of the intermediate phase where we had a session with Nolotando and Talaha who have been instrumental in this app academy journey so thank you so much Nolotando and Talaha for that engaging conversation that we had which was really insightful for all of you developers to be part of all right so today's session will be an intro into the backend development with Kingsley aka Skinny but before we get into that let us meet the guys behind last year's best enterprise solution at the app of the year Iris [Music] uh Iris is an automated algorithm meaning that it's a personal safety app uh that's designed to ensure that you are safe at any point in time moving through the different modes which are green amber red and blue you can then swiftly move through the moist to make sure you you are safe it's it's a big winner um it comes at a point where a very sad part of our lives where the president has dubbed GPV being the um and the the second pandemic and as we are on 16 days of activism um the winner today is uh all those victims that now have a solution uh to to look up to or to use whenever they're in trouble [Music] all right awesome congratulations to Iris solving an important problem with a unique solution all right guys so this is the important part where we need to know what you guys have been up to on social media so please let us know what these lessons have been um informative informative to you guys but also let us know what you guys are looking forward to in this particular phase of the advanced phase so speaking about social media please do let us know what you guys have been up to on social media don't forget to hashtag #Fnapp academy also let us know what you guys are looking forward to to this particular phase of the advanced phase all right so speaking about social media let us see what you guys have been up to on social media this week [Music] this is Grace a proud tech girl with big dreams and even bigger determination [Music] thanks to FNB Academy she's not just learning about technology she's becoming part of the future that shapes it [Music] [Music] all right awesome it's always beautiful to see you guys' reaction on social media letting people know out there what this ecosystem is all about all right so guys let us get into this week's lesson as we get into the intro of the backend development now guys this about to be a little bit of a marathon so brace yourself and let us over and meet Skinny [Music] all right awesome so right now we're joined in studio by Kingsley uh he is a senior developer at Saka Consulting and obviously we have all grown to know him in the app development journey as skinny my brother how are you bro I'm good yourself very good man thank you so much for being part of uh this particular FB app academy but obviously you have been instrumental in the ecosystem as an app developer right in the app developing um academy let us know that journey um and where we are today awesome awesome no thank you so much for inviting me and uh this is a great platform to actually share knowledge uh from I actually started as a premillionary sometimes English kills but you know what I mean yes as a judge and where we get a chance to actually test you know applications before they actually goes to the final rounds and from then I moved into the app academy as a coding structure or a facilitator and that time I was actually doing AI with no code uh using the platform called glide as well i went through some of the uh few basics of data science as well and personally I I have a background in robotics as well as uh machine learning data science as well i'm actually currently uh studying to become a cyber security specialist as well so yeah that has been my journey and I loved it got a chance to actually meet beautiful people such as yourself you know uh industry mentors and also got a chance to actually perform last year as well on the previous uh FM app academy as well so it has been a beautiful journey and I'm happy to be here again to share knowledge and you know to build these cool projects you know amen that's is skinny as he said he's been instrumental in the industry for the past 10 years and he's here obviously to share that knowledge that he's acquired throughout his uh journey obviously I know skinny um as him being a mentor and a facilitator in a lot of initiative that we've had throughout the course of the years which is truly extraordinary my brother obviously this is the app academy if we've reached now to the advanced level right obviously they've been you know at this for the past couple of weeks um how do you then begin to push them for that last stretch as we finish this our beautiful AB academy so it's it's actually going to be simple and um you know easy for you to actually feel welcome we're not going to um give you a lot of knowledge so that you get confused we're going to take you advanced techniques but we're going to take them as beginners because of yes you have been learning these basics you still need to make sure that your fundamentals are strong so we're going to go through steps we're going to show you how to actually you know work with these technologies that um you know seniors intermediate advanced uh techies they're actually using in the industry as well so as a beginner um or even in advance I always tell us that we we never leave the beginner stage because we always have to go back and you know revisit what we need to revisit so it's going to be a you know a beautiful journey it's going to be a beautiful session and we're not going to overload you with a lot of information we we we are going to be using Google google should be our friend um as my my my mentor used to call Google Google so we're going to be using Google to actually you know solve these issues do a couple of research as well and build something that's tangible all right as you guys heard it that's it with Skinny get your pens and paper ready as he is going to bombard you with knowledge i know Skinny's going to give you guys so much my brother all the best and uh enjoy yeah thank you so much cool skinny guys [Music] good day everyone i hope you guys are doing well as I was introduced my name is Scamlo Kingsley known as Skinny and I'll be taking you guys through with backend development and we're also going to be talking about which stack we can use for backend development and how are we going to be using it and a little bit um introduction to one of my friends uh his name is Django but before we go go into Django I would like us to actually picture how back end works and I'm also going to be explaining step by step uh how back end communicates with the front end as well so back end is more on what happens where behind the scene so you have the front end what the user sees with their naked eyes you know touch and feel if it's a button for an example if you're building an app or a website back end is what happens where behind the scene where the user cannot see anything so where it deals with your servers your data and APIs and along the line we are going to be learning about APIs and how they work so let's now get started with Django and let's you know uh understand why is he good with back end okay so now quick question who is Django and why is he good with back end so now uh before we get into who is Django we're just going to go through an overview on what we're going to be learning so we're going to learn about who is Django why Django how can we use Django and how can he help us build project and also the Django and his structure so the project architecture and also now how to run Django so how to run with Django just to keep it simple then also we're going to go through the applications build with Django and also backends meet front end okay that's Django my friend here with the nice glasses and nice hat and we are now getting to to to to work with him so he's going to tell us what to do and we're also going to tell him what we want awesome so now uh as I was explaining so backend development is actually um something that involves everything that happens behind the scenes of a website or an app so it also handles data it also handles your server logic your APIs or integrations with your database so now for your application to store data into a database it needs back end you cannot store data just by using backend we need to have I mean just by using front end we need to have back end okay so and the with back end we as developers we actually make sure that systems run smoothly enabling userf facing interface so this allows us to interact with the underly under underlying infrastructure and we write code that actually links browsers your like Safari your operamin your uh Brave your Chrome um Edge uh if you like using Edge good good we uh some of us don't like use Edge but I've seen that it's improving as well uh to databases so your database includes your MySQL database if you're using local you can download ZAMP um there's also uh Postgress which uses P psql if I'm not if PGSQL if I'm not mistaken there's number of you know database there's also SQL light that's what we are going to be using in this session as well and it also allows data to be stored um retrieved and also removed um whenever you want or whenever you feel like and this method involves uh I don't know how to call it but it involves something called crude so create read update and delete we're also going to show you guys how that works as well so now we do have uh different types of you know uh environments as well but in a team collaboration you backend developers get a chance to actually work with front-end developers you know architects or QA testers some individuals that like testing applications as well and also product leads and um the languages are commonly used is Python h that's what we're going to be using with the framework uh Django there's Java as well there's Ruby and also there's you know different types of of um backend technologies as well such as PHP with Laravel uh that's one of our main stack um from our side as well so I've also created a little bit of a backend versus I yeah backend developer versus the backend engineer as well so the role backend developer now implies a specific features so working with you know set of uh parameters to test ideas and now the backend engineer they're the ones who actually designs the system architecture and oversees the broader uh structural strategy so they're the ones who actually design how the application would behave and developers they develop um uh how the application should behave awesome so now what we going to be learning is the back end versus the front end development right so now this is where things get interesting so before we get into this this um scenario or the testing case or whatever we would like to call it for now so I want you guys to picture three individuals right we spoke about the back end uh engineer which uh normally they're the one who design the system architecture then we also spoke about the backend developer now um I'm going to exclude the backend uh engineer and only work with the backend developer the front-end developer as well as a full stack developer so full stack developers are the individuals that actually have both skills they know how to work with the back end as well as the front end right but right now what we talking about is the individual the back end as well as uh the front end you can be both no one's going to beat you you're fine you are safe um they won't call police on you on that one it's safe but in most cases there are individuals that like focusing only on the back end and the rest will focus on the front end then there's us so from my end I would like to call myself a full stack developer because I do both i do back end as well as front end sometimes front end is not that quite good but we'll show you guys how to actually get it good okay so now I want you guys to think right here i've I've I've I've compiled something that says think of a back-end developer as an unseen powerhouse that keeps a website or an app harming you know like the mechanics under a car's hood you know remember what we see in the car or at the car or on the car it's front end you know the wheels the nice rims the boot the door wind uh windscreen and etc the color of the car that's what we see that's front end now the back end now is what happens inside the engine your clashes the mechanics the computer box and etc that's the back end that's what makes the car move that that's what's makes the car light you know what we see what we hear and moving and etc so that's a back end so another um example would be just imagine how this is back in and in in in the gassy side you know when you passing by the street there's always you know our brothers and sisters building like your sofas your beds you know outside they're using wood and etc so there was a joke that they made um the internet made you know users take they made and posted online saying that um back end versus front end so with the back end it's always messy all always messy you'll find out they also left that there are shoes inside your couch there if you open up there's a jacket that you know uh Skinny left in there while he was you know making your sofa but you would not know up until the day you start to open your couch you know you'll find other stuff maybe I even hidden 2 million inside that uh couch as well you never know uh maybe it's something else as well but back end it's always messy uh according to to to uh the development uh jokes if I can put it that way you can clean your code it can be proper but they always say that if it works don't touch it you know so now when you come to the backend side when it comes to development it also helps with managing servers handling data authentication as well and powering APIs these are connected in different parts of your application as well it is not f flash fleshy but without it nothing function you can create a nice web app application no back end it does whatever click click click and click and click but when you start creating an account nothing gets created because there's no back end connection um um um on your application that allows you to connect or store those credentials in your database you need back end now if we flip um to the front end what we see is that everything uses engage with here in my computer this is front end i click the button I see that there's one two and etc inside there's a back end the mechanisms all these things your hard drives your RAMs um microcontrollers resistors and all these things in inside the computer that's the back end so now everything that the user engage directly it's considered as a front end you know so from where your page loads uh to your placement of your button animation um that's what front front end actually it deals with visual experience so mostly it actually uh developers use uh languages like HTML CSS JavaScript these are common skills that you know developers should have should know how to write HTML CSS and JavaScript you know then from then you advance to your frameworks your React your Vue.jx uh I'm starting to like React now with the NexJS it's beautiful i like it i like it and now um this this actually shapes what the user see and touch um it it it it you needs to feel welcoming needs to make sure that the users are interacting and they like that button that blows and all these things but at the back end uh we got heavy um army working on that back back and making sure that the look and feel looks proper as well so now in short the back end is the logic and structure so how it works and the front end is the presentation and the usability how it looks and feel and both are actually very very essential because working with them provides you know um you to actually deliver a complete and seamless digital experience okay as you can see also on the picture there we have a nice front end picture that has sunny uh with flowers and the baby there with the dad but pack and we see that something is happening everything is messy there it's not what we see servers connection buttons whatever they not buttons that you see but the functionality so that when you click something it sends an email or it submits something or stores the data that's what happening there okay so now we're going to move on to a backend uh responsibility so backend responsibility or backend developer responsibility so there's more i just went and just you know capture a few ones there's more so we have um website development so you guys backend developer you get to create and maintain the backend logic that supports the websites and application okay um clean coding it's not true it's true not true depending on who you are but trust me from my experience I've never seen a clean backend code maybe you you'll be the first one to see from mine i'm kidding but yes so you have um you write the structure of of your code well clean code write structured code or scalable and reusable code as well you know so what I like about back end as well is that the features or the functionalities you can actually reuse them in other components or in other applications so giving you an example from our side we have a couple of projects five of them I did mention about you know uh the projects that we're working on etc but we have a couple of projects that we are working on and all of them they are in their own servers own domains own hosting um environment and etc then we also have one main application so in most cases for S is it S SOS single sign in um um forgot about the O but we'll check what what does it mean but it's more of a single login so you have an API that you use to log in to one uh to multiple application but using one um credentials but in this case what we did is we created individuals projects and they do have LMS inside so you created an LMS we created an LMS for one project two and three and four and so on but we realized that okay for us to create LMS from the scratch it's going to take time for each individual project so what we did we built one LMS feature and we took those things we added them the the the reusable code we added the code in those other ones so just embedding the features and just changing the name so if um LMS1 was about business and LMS1 is about uh agriculture we just want to change the functions or the classes into um maybe would say course uh business course agriculture but the same feature the same functionality is more or less the same you can keep it the same you can just say course without underscore but they'll still work the same that's how um a clean and reusable code works like another one would be testing um your application so the quality of your application as well so ensuring that the functionality and the responsiveness responsiveness actually of the application through a a routine testing it's it's it's it's proper so backend developers they also test their features we can create beautiful um uh back end logic and our front end um it could be not even good doesn't have uh colorful buttons and etc but as long as the functionality works it does what it needs to be you know uh what it needs to be doing you are good to go then we also have per performance monitoring as well so this is where now you evaluate the the your systems uh speed and also um give you suggestion to make enhancements if they are needed so for an example the back end will actually now identify or get an understanding that oh if a user logs in email password press login how long does it take to actually respond to the next page does it take too long to process to check in the database and etc if it does take too long just just know that something's wrong with your application but because nowadays people just want quick quick things i don't want to spend 5 hours or 5 minutes just waiting for a page to load because I've pressed login so you need to also check the performance of application with the code that you're writing as well okay debugging this is what most of us hate i have a friend who likes debugging because he said that it actually gives him an opportunity to actually challenge him to see how he can solve problems quicker faster smarter and different ways to actually write code and solve problems as well from my side personally I do not like debugging because debugging mostly takes time sometimes you might miss um column a comma and you're trying to identify where is it but when you're reading through because you're tired sometimes or you don't like debugging like myself you you you would not spend too much time there but it's a must you need to know you need to understand because the minute you get an error if it's on the live one or on testing side you need to identify that error first and how quickly you are to actually fix it because the Remember applications mostly they run the business if it's something like your uh Uber Eats and people are pressing order order and they keep getting an error you're not fixing it they'll go to Bolt um eats if if or B foods or whatever uh food application are out there so you need to make sure that those debugs are um are actually fixed so from our end we also not created there's a platform called inspector because from our end we use a different technology as well so with inspector what it does is gives you an API key we will get into the APIs so if you're being bombarded with API what is an API you can you know chill a little bit drink coffee while you're looking into the lesson or listening to me research on your phone and etc just what is API but we will get into that as well uh but that platform provides us with an API key and we plug it in into our application and it actually checks the whole application without us writing everything it checks the whole application from start to finish from back end to front end and gives us an analytics and reports as well as notification each time a user logs into the application it captures that it records it and say okay if there's an error it immediately sends myself and my team an email saying that oh we've identified an error on this and you don't have to worry say is where's that error it actually provides you with that error as well i've seen also that you've embedded an AI so that you can just ask the AI to say quick fix and it guides you on what to actually do that power to AI loving it but uh for us it's just to say oh we see that emails are not being sent out we can identify that error we can identify where's the issue we're now being able to actually we are able to actually pick up and solve that fast we don't have to say what's that error and what not and whatn not it's actually quicker we don't even have to wait for testers in our company to say hey I found this error and whatn not it's good for them to actually do that because software testers are very important so you should also consider uh having a software testing skills as well now support and and and and training um backend also offers an ongoing assistance and guidance um guidance for junior developers so you have your senior developers advanced developers who are actually mentoring and assisting us with back end so that you can also follow a a a coding standard that they use to actually you know debug or write codes as well so we also have our own trainings at our digital team where we actually show okay guys this is a an application that we build it has one two three features if it's courses related LMS no one touches it we already have that feature just going to do copy and paste make sure that same feature works on this one you don't have to redo everything that's what reusable uh code and also I forgot I keep saying re reusable is actually readable code reusable it's beautiful but readable code the reason why I'm going back to readable code as well I just thought of something that most people are struggling to actually read other people's code you know but if your code is actually clean it's well written it's properly structured it will be an easy for another developer to understand what you are working on maybe we're working on a group we're building something here and there and after doing that we identify that okay your feature is working and my feature depends on your feature i need to also understand what you've been doing so that if I encounter anything related to your code I'm able to actually pick up and fix it and let you know as well and say hey I picked up an issue from my code and it is related to your code i managed to sort it out this and this and that that's how it works as well okay so common tools are being used as back end we have Python this is what we're going to be working on we have PHP as well i love it i hated PHP but I love it and we also have JavaScript did not like JavaScript but you are forced to do it but now as I mentioned I love React love Next.js and Vue.js beautiful we also have Ruby um I've read about Ruby before but never give it a chance uh Java I I'd say I've enrolled in you know Udemy courses and other platform as well for Java just to understand because I realized that most companies if you go see now we're doing FnB app academy if you go to FMB's uh profile and go through the jobs um uh descriptions you'll note you will notice that they always include Java Java is there as well it's strongly used by you know big corporate h companies or organizations ation then we also have C# as well the last time I've touched C# was 20 2018 then we also have the frameworks so now frameworks it's something that um I don't know how to put it but it's something that makes it easy for for back end and and and front end to communicate as well no then you also have Laravel you have Django you have Spring Rails we have Meteor we also have Node.js as well database there's number of databases there's a lot of them so here I've included um MySQL you have MongoDB as well as Oracle so if you go online and you want to um grow your skills check Oracle courses as well there's a certified um SQL as well but don't worry we're also going to provide just a little bit knowledge on that one as well there's also SQL light this is what we going to be using instead of the heavy SQL we also have the servers Apache or uh Nix some some of some some the other name but I think it's two different platform it's called NGO but um NG it's sort of like an engine nix then we also have your Microsoft IIS then you also have your light uh PD okay so in this picture we also have web development technology stacks you have your front end HTML CSS and JavaScript your back end Ruby and um uh Python Java.net net which is C# then you have your database which is your MongoDB MySQL um posgress as well is there PG uh is it yes PGSQL it's there your dev ops one thing backend developers and front-end developers and fullstack developers you need to know and you need to have a dev ops skills so dev ops deals with your you know servers where your application is being developed uh so we use github actions to actually deploy our application as well it's beautiful and it's nice and one thing I like about Dev Ops is because of you get a chance to actually work with different cloud uh platforms your AWS your Google cloud your uh Microsoft Azure cloud as well where you can actually host your application or deploy your application we also have mobile app development uh there's swift there's Android iOS uh there's technologies like dat flatter ionic uh which you can use react view and angular as well so now just to go back a little bit remember I spoke about the SSO which is the single sign on so that um functionality or mechanism it allows you as an individual to actually create a single sign on on different application like I mentioned we have five different applications And with our organization what they need is they need users to actually get in touch or get to um consume content from different uh h platforms but they want them to use only one credential so if you create an account on uh application one they get created on the other application so that you don't have to recreate uh different accounts on different applications so it's the single sign on okay you may check it out as well it uses APIs as well uh but yeah that's what I wanted to actually um do and I remembered thank you so much so now we are going to move on to the next slide okay so since now we have been talking about the back end from here we're not going to spend too much time cuz we need to do a little bit of coding and you know building this application so what's going to be happening now is that um we're going to start with the Django framework so now Django is actually a powerful highlevel Python web framework which is designed for development and clean and maintainable design it actually simplifies the creation of complex uh databased driven websites by providing reusable components as also builtin features so when we're talking about built-in features we're talking about something like authentication URL routing and templating and these are something that we are going to be using you know and uh including backing as well and popular companies like you know Instagram uh Mozilla and the washing ting times they rely on Django as well that that's something that I've realized as well so applications like your Netflix if you want to build your own Netflix clone can use Django with Python as well and it is easy and um I like it for its uh scalability and efficiency as well now if you expand your if we expand our our explanation in Django is actually free it's an open-source web framework written in Python if you know Python skills you're good there's another framework called uh Flask as well and I I haven't been focusing that much in in in in in Python uh in the previous couple of months but I've seen that there's other um uh frameworks that they have released as well i haven't played around them but if you want to you can go ahead and do that as well and um it also follow the bed included uh philosophy philosophy philosophy yes and it means that coming with essential tools and libraries needed for web development so by emphasizing dry don't repeat yourself principle Django would actually help us as developers to build secure and scalable application quickly it also provides with security as well you can improve the security but I like that it actually provides that to you okay excuse me so now we do have key features of uh Django the OM which is the object relation mapping this simplifies database integ integrations without writing raw SQL so you see that's why we're doing SQLite then we also have admin panel it auto generates interface for managing site content so now let us say you're building an application and you only want to focus on the front end your back your I mean the users dashboard your admin's dashboard you don't want to recreate it from scratch Django provides you with that provides you with a beautiful clean and simple uh back end you don't have to recreate it from scratch okay security as well I did mention about security it provides you with the built-in protection against SQL injection guys whenever you're building application you need to understand something build with uh security in mind so secure by design you need to make sure that whatever application that you're building it's secure if you're dealing with data password storing any information into your database make sure you also include security as well uh to avoid SQL injection to also provide you with the security when it comes to the the XS and also the C SRF this is something that you'll see more more often when we dealing with um a Django it's what we need to um it's it's the security behind capturing your data if I can put it in the simple manner we also have scalability and the scalability is just um power um powers your high traffic site like in Instagram and the other application as well that's what um the core features or the main features of Django there's more as well okay so this is just um a a a um to compare something uh between Django and and and and Flask you can see that you know with the structure when it comes to Django we have the MVC um model or like the M MTV as well not MTV base but MTV and the other one it's just you know unopenated or modular we do have a full featured app with Django Instagram for an example and the other one is just small apps for prototyping like API small applications the built-in OM Postgress and um Postgress SQL or MySQL and the other one requires extensions such as SQL Alami Alchemy yes then we have the admin panel autogenerated the other one doesn't have you must build The other one is actually high and and and and and and and also handles a number of um the scalability is high as well we made an example as well with these cues handles H uh B uh 8,000 billion plus monthly comments as well that one just needs manual optimization okay move on to the next slide so this is just how the MVC model looks like so the MV MVC or MVT or MTV if you like to put it that way this is how it works you have the user connects with your Jango application the URL your views after you have your views you have your model and your template what we see templates what we see okay so now this is just a simple model on Django model so remember we deal with the MVC the model the view and the template or the controller for C so MVT or MVC okay so this is how you actually define your your your your database you have your tables fields relationships as well and how it works is that you write a Python class in modules.py then Django automatically converts it into database table you also handle data validation and store and retrievalss okay so in this section what we have it's a code that creates a blog table with title content and publish dates fields so you have your import there you say from django db imports models these are built in libraries so you don't have to recreate them from scratch it's already there it's already you know developed uh for you while you're installing your application we'll show you how to do that as well so now here what you're doing you create a class you say models domodel because it's a model remember anything that has to do with database whenever it comes with with um Django has to do with the MVC or the MVT or the MTV you have your title and you actually say models do character field you add your maximum length so the maximum length is to say that okay I'm looking for a title and the character shouldn't be more than uh 00 imagine if you were looking to read a blog and the blog was long the title was maybe 2,000 uh APIs built with Django and then it does 1 2 3 1 2 3 it's too long for us to read the space and etc but you must keep it simple you also have the content as well so the content is the body what the user will read so we normally don't put it as characters you either put it as a text field okay because it's a text then you also have the publish date here you're using the date time field so this allows us to actually capture the date so you added the auto underscore now add true this says that the minute you press submit it captures the time the real time you created that application or that um content or that block okay and after that part you now move into the view mv model view so the views so the views it's the functionality uh that uh contains the business logic you know where the the requests are being processed interaction with the model and also return response okay for an example um how it before the example how it works is that you would write a function or a class in the view and uh it will take a user's request fetches or modify the data via model and send it back to the controller or the t which is the template okay so we have a few qu number of code here of the block so what we did here we created the model for database to store in the database now we're creating our view the functionality the logic that takes the content from the database and provide it to the T which is our templates what we see we say okay um shortcuts Django from shortcuts import render the render in this case means that we need to render the data we're taking data from the database we need to render it to a template so we're saying that we must import because it's the it's a library or a plug-in we're also going to say from domodels import blogs all of the models instead of writing them one one so for example we had the blog model instead if we had the category we will have category part but we're saying from all models import the blog you now name the other ones as well category instead of writing them individual limiting space as well okay clean code remember clean code then here you want to define your function which is the blog list and we say uh blog list it's a request because we are requesting what the data from the database we so creating a variable say blog blogs equals to blog the model do object all fetch all blocks from the database render those blog and I pass in that uh variable into uh the random line or the brackets and put it in curly brackets so that we actually pass in the data you also include the file name list.html if it's under a folder you for/ that folder as well okay and now when you now working with templates presenting the layer this is how it actually works so the lay the the the template it's it actually it's how data has been displayed in HTML plus Django template language so you store data or the the files are stored in HTML uh uh format inside a folder name called templates okay and you also dynamically render the data passed from views and this is how you actually pass it you create the HTML you create a for loop with ginger text say okay Kelly brackets percentage for blog in blogs another percentage and closing curly brackets then you're going to add where you need to list them so blog dot title the name of the title blog.publish date the date the blog was posted then you end that loop it's called a for loop because if there's more than one content they're going to be displaying instead of always displaying them one by one reusable code remember reusable code and it's clean nothing messy here nothing happens there okay let's now move on to the next slide so how the MVC works together user request view fetches data from the uh model interacts with the data and uh with the database and returns data and view sends the data to the template and the templates renders the final HTML and send it back to the user what we see so you can Check also Y MVT or MTV if you want to switch it around a separation of um uh concerns clean code uh maintainable code reusability models templates can be reused scalability as well easy to extend without messy code with Django that's what I like about it okay so this is how the the the Django framework works and what we are going to be doing now is a short practical to actually in not really install but to get familiarized with with um Django but by now you should have installed Python in your your your your machine a b a basic knowledge of Python because this is not a beginner level and also a a terminal uh or cmd or command prompt powershell or bash this is what we're going to be using as well so you install your Python and Django you set up an environment you also start a new project or configure the and also not all but and also configure a database okay so these are the steps so of installing your application and um your environment and etc so the project that we are going to be working with excuse me it's called the data management application for surveys with Django okay so what we're trying to do is we're trying to create surveys and we're saying users must do what users must actually um uh answer these surveys so that we call we we collect data you know uh it could be a survey for asking how um FnB app academyians so if we can call them um have been doing in in in the the the course of um the FMB uh app of the year you know did you like this cause was it difficult uh did Skinny fumble did skinny say something wrong those type of questions you know that's what we're trying to build as well just a simple um survey application the skills that you are learning here they could take you to a different route you know like the content management um task management application as long as you understand the MVC model so now table of contents setting up your development which is installing your Python installing your project and etc then you're also creating the project as well or before creating a project you need to also do what you need to run the python- m v n v e n v and you name it whatever this is where you create your um what what do you call your your virtual environment so the virtual environment are more of your container that will store all your dependencies your libraries your packages where whereby if you just install without creating that they get installed in your computer as well like your computer and sometimes storage messes up your system behaves somehow but if you create a virtual environment and you can only access that by activating it then you're on a good side as well okay so that's how you actually create it and on Windows this is how you're going to activate it on Linux or uh Mac that's how you actually activate it as well so we're also going to be creating the application um designing the data model setting up the admin um interface creating views URL building templates with uh bootstrap handling form adding authentication and deployment uh deployment consideration so what I've done is that we're not going to build the application from scratch we're going to go through the already built application and how did we do it to actually build the application step by step you know because we're looking at how um we can actually you know complete this application in one go instead of you know um you know errors we need to do errors and like I mentioned errors take too much time to solve them okay but if you have AI you're on a good side okay so now this is how the project uh infrastructure looks like so pip install and after pip install you uh remember remember you went back here you create you installed your python you've created your virtual environment right you activated it here right after activating it you now say pip install Django right once you're done with that you go to the next step we need these plugins we need the crispy forms we need the crispy Bootstrap just bootstrap 5 we need the python um environment as well once that is done you're on the good side you're now going to create your project okay your project which is the one that we're working on our project is server manager you um uh uh um direct yourself in that folder as well you know uh change directory to the project then from then you start creating apps okay so now if we look at the Django architecture like I've shown you in the previous uh moments ago you have your project django has this thing whereby it it it provides you with um application broken down into features so if you say app start an app for an example here people would think that okay we creating another app no no no no django says that in order for just to put it on a safe side for you to actually create number of um to avoid creating features in one folder to to to to um you know cause a lot of um mental health problem if I can put that right but not in a good not in a bad way or good way but in a stressful coding way so it says that okay I have a project this is our main project and this project has these files you have your uh init file your um SGI file you have your settings file you have your URLs file you have the WSGI files as well right but this is the project only the features in my understanding J said I'm going to consider these features as apps but they are features so if it's blog management For example your application deals with blog management deals with task management deals with uh survey management deals with you know other types of uh management or features i'm going to allow you to create these features uh features in my application as as apps to just avoid having a lot of number of uh scripts being written so you know that if my feature is survey related I'm going to create an app and say surveys if your feature it's blog management related you're going to create it as blogs you know that you're going to work on blogs and blog but at the back end they connected together as one okay so right here we have our application structure which is the survey in it file is there you need to have it pi unless you you're going to have errors you also have admin you also have apps.py your models test for testing your your your application and mig uh not migration and you also have your um your views so remember we spoke about the views then you have your migration table each time you make uh you create a model you uh make a change on your your your your model class or your model fields you need to your your migration will be stored under that um what's this under the the folder migrations okay so I'm not going to spend too much time explaining about the crispy form uh crispy forms but crispy forms make our application look beautiful not ugly but look beautiful and smoothless as well so for those who who who don't who don't like spending too much time on front end they just want a simple application you're maybe working on a prototype crispy form is your guy then we also have crispy bootstripe 5 it allows you to use bootstripe 5 CSS as well okay he's your guy as well then you have the python environment or so this is a library that loads your environment variables from the env file into your application okay then this is just a summary of these three and how they're going to be working in this application as well okay so it helps you render Django application which is the crispy and structured in a visual appealing way crispy form provides a specific templates that allows the crispy the jungle crispy form to render this form with a bootstrap 5 styling python.env helps you manage your application configuration uh including sensitive information for an example you're working with API keys remember I'm just speaking about these words but you'll learn more about them so this is a key and this key it's private no one needs to see it but your application needs to use that key to unlock the doors so that users can now come into your application and access different features so for you to store those keys where no one will have access to it it's called the env file it's the environment where the environment files are being stored to also keep your um main codebase cleaner and more secure because if you expose your key on the front end or on your logic code you're exposing your security you are you you're giving them your weak points next slide so once you're done creating your application you now need to register application under settings under settings you're going to go installed apps that's when now you need to install which is in this case we said uh surveys remember we also did what we did install Django crispy forms and bootstripe um crispy bootstrap 5 you need to register them there because they are also considered as apps right you register them so that your application knows that I'm dealing with these type of apps once you're done with this part on the bottom line of your uh code um um settings.py you need to add these two lines crispy_all allowed template um template packs you specify the name which is Bootstrap 5 you say crispy template bootstrap 5 as well this says that okay I've registered my application i've also configured some of their um configuration or their keys and it will also allow us to actually do what uh the application doesn't give us any errors okay so now um this is just to explain more on the uh ORM how it works so you can go through it on your spare time as well i am going to skip this part because I want us to start seeing the code and how it works as well okay and these are the advantages advantages of M so user friendly syntax improved clarity and uh uh optimize performance and etc okay then this is how you actually import your models this is how you import your models remember the built-in model the built-in model you don't have to create your authentication models from scratch use what Django provides it's easy you can manipulate them you can configure them however you want but you can use the already built one which is from django contrib.od models import user it's already there that's how uh we import the models as well then now this is where we need to go back so remember now uh these are your your models so I am going to skip this part so we're going to go to um okay go to Google you're going to type fire base studio right so the reason why I'm using this tool is my my my my my beautiful machine here my beautiful baby hair sometimes is very sick in nature so to avoid having hair to freeze while we're doing lessons I'm using an online platform for coding but it's more or less the same remember you go to Python you download your Python you install it into your application then from then you create you create uh whatever application you like so maybe I can just do Python- version if that's the one then it shows that my Python has been installed there we go right so I can create a folder and I'm going to say uh make a directory and I'm going to call it um FNB testing app okay then I go there and I say FnB testing app it is empty nothing is there let me just clear everything out now if we go back into our um installation uh slide going to go back there let me quickly do a little bit of uh should be using this guy okay we're going to go back a little bit just to you know remind us what's happening aritecture uhhuh we did we did that we said um what what do we call it python version okay now I'm going to check if we have pip pip version okay say that pip version is there okay then we are good to go then now what I need to do is to create a virtual environment okay python okay we say dash m venv then we're going to call it uh testing test env i might get an error i'm not sure i've never done this before it's our first time doing it okay but if we get an error we will solve it don't worry about it so it's going to take too much not too much time but diir so if we check now this is how it's created remember so remember if you're using Windows how do you activate this by doing this you write the environment name so from my side it says you say that then you're going to say backslash right you're going to say scripts black backslash then you activate it once you're done activating it you would see um some brackets there with your test environment it means that you created your environment right your virtual environment yes so once we're done it's now installing Django okay we're installing Django while Django is being installed we now go to the next one which will be paper install Django crispy forms crispy form bootstripe and python.net okay while this guy is waiting he's installing on the local okay then now he is done so it will tell you that oh a new paper has been released you can upgrade it you can just do python dash m pip install then you say dash upgrade pip okay already blah blah blah it's upgrading good so as as as back-end developers whatever plugins libraries that you work on uh you need to also keep them updated because they change right they get improved because if now excuse me for an example let's say I'm working on a library and they haven't I haven't updated that library in the next for the next two months it means that I'm also doing what i'm exposing the securities because if it's outdated it's easy for people to hack it as well it's easy for data to be leaked so you need to always update them okay so now this is what we're going to be doing as well pip install Django crisp crisp forms let me see i'm correct yes dash forms and did I write crispy proper then we're going to include the other one which is crispy bootstripe 5 python- nv enter if you get an error we'll revisit what's happening it's installing them good all of these guys have been installed there they are right we're good to go we haven't created any project we just started to to to do it to actually um um set up our virtual environment with the tools that we need to do so now creating a new project would be Django admin okay start the project start project is it yes start project then you name your project for this case testing project okay this is how that project that we we were going to be working on was created say enter right done d I d IR to check if it was created test project created we are good to go now if we open our VS code by doing code dash I like shortcuts but I'm definitely sure your computer does that as well but if it doesn't you can open it manually okay uh excuse me for that we have our visual um code here Visual Studio Code and we have our environment the virtual environment our project there it is so you said test project then it provides you with what remember these guys here the structure we have your uh as we have was we have URLs we have settings we have the init file as well they are there but we don't have these guys right they are there you can loop through them in there's Python code it is there it's available uh sorry about that these are the extensions so you can go through these guys as well understand what's working and what's not working the security key remember now this is the security key that I mentioned it's more of the environment as well the env but we'll get into that as well and those install apps will be uh each app that you create will be available here so in this case we have skipping we have surveys we have crispy forms we have crispy bootstrap 5 so I would actually come and say crispy forms right then another one would be that like how now visual studio code likes finishing the code for from from for for for us okay that's how it is and you know you just make sure that your application are uh configured in the installed apps okay so now once that part is done you will need to create your application okay python or before we need to change directory to our project which is test project okay then we are in you get a file which is the manage.py this is what we use to run migration run the server it's it's sort of like our our our applications engine you know our application engine so this is how we're actually going to be doing it as well so now I'm done i'm going to say Python manage okay start app then I'm going to call it testing app enter so the application gets created you now seeing that application right here testing app there we go fe not features files have been created for you your views your test uh pi models your apps your admin but there's also one thing that was not created which is the URL so I always like starting with this so that I don't forget you know like URLs py done you can leave it like that we will come back to it later on okay you have successfully created your application project your Jingle project as well as the apps as well now the the the the designing model the data model it's what we going to be doing in our application as well but before that let's now go into Firebase like to be honest Google is improving this used to be project project idx picture visual studio code on steroids you know they gave it a nice number of unlimited storage and etc so this is what I like about this platform it actually provides you with a prototype to create a prototype uh what's this application or you can import your application from git you know from GitHub or whatever or new and etc you can explore here number of you know different stacks and etc whatnot so from my end what you can do is you can say new environment you come here and ask you questions say that okay web development which stack do you want to use you can just say simple HTML react uh the other one here Astro Nexjx Angular or more they have you know Vue.js uh SolidJS uh the other ones I haven't trust tested them but there's more as well okay then back end you have Go Python flask Java.net and these ones are nude express Laravel or Python with Django and there's more as well that are available okay so if you're using this one you click here it's going to ask you for the project name maybe I'll say project uh FNB um let me just say back and dash two zero cuz this is just testing i'm showing you how we're creating these projects here so here you don't have to worry about installing Python on your computer you don't have to worry about your computer being slow because of the dependencies it's gener generally on the cloud okay excuse me for my for my English so it is going to set up your environment set up all your workspace then boom you are you have your nice um Visual Studio on the cloud that's what I like about these tools as well so your project has been created you didn't have to do project dot whatever whatever database as well has been created db.sqlite it's there you have your projects uh manage your manage manage.py it's there you also have your urls and etc so the same project that is similar to this one it's already there see it's also installing there that's what I like about this platform it is installing you don't have to wor about everything see it also created its own environment you didn't have to create anything about it that's what I like about this platform so we're going to do that it provides you with a web interface and Google Gemini if you want to use it but for now we're not going to use that as well just skip that see Python has been created not Python django has been created with Django 5.0 that's the latest one you can view this in a different browser so it's going to say open and copy and then you do this then it's going to open that application on a different browser okay that's how it works from then to move on continuing etc right so I'm going to refresh this page this is the project that we have been creating as well in the meantime while that is doing that I'm going to open our uh what do you call that thing documents cuz I've created a documentation here as well to go through the projects you know step by step as well we are bu we we are going through this document as if we are developing we in a company now they gave us a project we need to develop it as well you know okay so once that part is done let me just close these guys okay this is the whole project so I'm not don't don't don't focus too much on the number of other stuff because those other stuff are different um they are different for different section but we are going to be focusing on what we need which is a survey as well okay so we need to activate our environment so I'm going to do ls which is here in this case I have my env is this one so this terminal here it's more like a Linux so I'm going to say source right then I'm going to call my env i'm going to say bin and I'm going to say activate it's activated right once that part is activated you can install same thing that we just did same thing that we just did you know what I'm going to do i'm going to separate this guy and put him here then we're going to do this slide then I can switch nice nice okay so this is what's going to be happening right now this is a project structure we go to it which is surveys actually not surveys my side under my side we know that we have these two these normal files okay sure let's go back to our slide so now this is simple explaining the the the the the data models that we're going to be working with and I'm going to skip it and now it's explaining how it works as well so the first one that we need to sort out it's the importing of the models that we want to use okay if we go to our code and now we say oh I see that I do not have models you want to go create the same app that we just did remember how we did it right here we said testing I mean we we said python manage uhpy start app the name of the app on the live one what I did was say surveys then it created the service if I do dr created it remember then we came here we said we need this URL because we're going to we're going to use it right so now Django has the urlspy right inside your the the the project where the settings that's the main URL your application needs to have its own URL so that you can take that URL import it into the settings URL or the project's URL so that whenever I use type forward slash this and this it works okay okay so now we're going to go to our applications which is this survey one please ignore API for now then we are coming to the what is it the models okay this is how the code looks like so we said okay we need to import these two there we go we imported them right because we need them there we go so now if I had to now go to the local one I'd copy these two or write them from scratch if you want to go to models replace this one but it's there then you just type it like that model there we go this is where now you start creating your class okay then now the next step was to create your class model for these two don't worry about them now i will explain them step by step okay i think my baby is frozen let's see okay he's not i'm going to close this cmd for now because of my baby is very very sick okay once we done with that part you now come and outline the the fields that you want right so say we say okay we want to create a class model called survey it has to use the models model because it's a model then we say okay we need a title with the character for 200 we need a description which is a text field character text field we need to also add created by using foreign keys the user from where from here from this model that's why you see user here and we say on onore delayed models cascade so this with my understanding is that if you delete a course a user some of the data gets deleted anything that is linked with the user gets deleted or if you delete this model u the data uh that was added by user scheme anything related to the user and the the model will get will get deleted as well because the links linked using the foreign keys right then you also created created at it's the data uh the date time field and we said auto add now you also have the updated at using the same filter as well but this says auto now true that one is auto addedit and this one is auto sort of like auto update now okay we we also have the the is underscore active the which is a boolean field to true this says or allows us to say the content or the data that we just added here is actually true you know it should be active it should be visible to the user if default was false that means when you add and you don't take this it will actually go off off offline it will actually not go offline it will not be public you as an admin you only see you will be only seeing it okay so now we come through the the the the mini function inside of a class so which says uh define underscore sort of like a string string self and return self do I do um title this part here in the backend database if you did not add it your project or your data would be um for example project 01 you add another one project 02 you add another one project 02 like the default one i forgot the name how it is but it's the default one the minute you add this it's going to display the name from this from this guy the name from this guy instead of project 01 or object01 and etc that's what we're doing as well so now the second part here it's the URL now this part says guess the absolute URL self URL and you also want to pass it in you're going to pass it in the reverse and say surveys survey details um argument and you added that number there not number the string and the self ID so here it's allowing us to actually um sort of like get the URL of your your your survey item you know it's easy for us to use it but I have created a proper explanation there we'll go through it when we get there okay done this is the first first part okay so now this is what's happening as I was explaining um this is the class the same class on the code and now number one says okay this is a response model and this defines the mo this defines the response model representing a single submission of a survey by a user that's why we have the uh survey model so well the survey model foreign key of this would be like that so this is linked or this links the response to the specific survey that was answered here okay then now we said related um we also have like the related response name and uh this related spawns name will be available to um our application as well you'll be able to see them as well so this part here says it allows you to access all response responses yeah all responses for a single not a single for a survey using my underscore right survey dot response all the purpose is to identify which survey uh this response belong to okay we also have the created like I did mention about those guys as well so what I wanted to explain was this part it's the self this one here so this part here is the string representation will show you Which survey was responded to and who responded who's the who the respondent was anonymous if the respondent was not linked to a user then we have the answer so before we go to the answer I was actually the code that was there oopsie think my my my precious guy is very very sick in nature that's what happens when when when you're coding okay i think what I'm going to do Oh there we go so now we have the question this is the model one this question in um um is the one that um it's the questions that we're going to be asking users to to answer so we have question types has choices because we have text text answer single single choice multiple multiple choice then here we now using this class you see the SV class that the model that we just created we using it as a foreign key and we said the related name underscore question that's the line that I was explaining right here this part here this is how it's happening made a mistake by putting a wrong image there apologies for that I supposed to actually put the correct image but we move on mistakes we'll see them later on we have task text as well we had the question type the question type is a character we said maximum 20 and we adding choices choices says that okay question types these ones here so when we go to the back end they're going to be like a drop down say drop down i want to add this as a single as a text answer single multiple choice or um I mean single choice or multiple choices then we also have is required underscore is required it's a boolean as well it's a boolean true we also have the order models integer default zero then class ma order order ordering order so this is to put them in order as well then we added the self one the self return it's going to return the self title remember here on this question we do not have the title but it's going to take the title from the survey that's why we added this line here and it's going to also combine it with the text text this one 50 characters is just a widget to display 50 characters okay that's the the question then you have your choices as well you know your choice model you can create it similar to that one just in case you want to add more okay then you also have the response these are the response model and the question I mean not the question the answer model each model or the response you see model it it's it's always linked to a foreign key except for the first one which is which was the survey then now you move on to our next step which was the answer so if you going through this up uh PowerPoint uh maybe later on during your T hours uh whatever you want to uh brainstorm or you pause a little bit or you you know you want to relax a little bit you will read and you will notice that because of the screenshot uh it was not filled up what I did I just added here in this you know so that when you come back to your code you see that it's added here for for spaces purposes as well so now the answer model in Django it represents an individual response to a question within a survey it contains both the overall survey submission the response as well and the specific questions being answered question and allowing you as an admin to track how each question was answered okay we have the there are two fields as well um that are actually uh storing answers it's the text answer holds a written response for openended um open-ended questions and it's optional there's choices as well this handles a selection selections for questions uh predefined uh options both single or multiple questions as well and it uses a mini to many relationship with the choice model you can also check okay what are the types of relationship in the in the code as well so you have many to many one to many many to one and etc there's different types as well another thing what you can do is go on Google check and say get started with Django instead of REST API or REST framework you just say Django you look through the jungle documentation it's going to help you understand what's happening how do you install it and all these things and etc documentation wise you start there you read through it's quite good okay so these our model the survey model okay let's go to the next one so now how the system functionality works is that survey creation okay the admin will set up new surveys added by any like adding by adding entries to a survey model and each records includes what it includes title description um links and all these type of thing then you have adding questions each question models I mean each survey includes multiple questions and they are also tied back to the original survey okay we're also defining different choices or yeah defining choices for questions invol involving choices options are also created linked by the choice model okay we also have the user response the user response is whereby when someone fills out a survey and new response it's created recording answers and etc data retrieval and analytics we are using the ORM okay now this is how the interface looks like i made took another example this is the default Django one but before we do that let us now go through the routes actually not the routes the views okay I'm going to skip this part i'm going to come to this code here okay so we have our code here but before our code we have imported a lot of variables a lot of um uh plugins and whatnot so the first one that we need to do is to get the redirect because once you're done submitting something we need to redirect you to a successful page or another page and etc you also need to use the get object or the 404 error this one I'll also explain but with my understanding says it actually um it it it captures the error so that it doesn't it provides a user or it captures not captures it captures and raises HTTP 44 error request as well okay if a page does not exist it will let you know then here we are using the lazy URL we also explain not lazy URL the laz reverse lazy I don't know why they say it's lazy we also have the generic views so in Django there's I would say with my understanding two different ways you can write a view you can write it with the list view this is where now we are putting these things we say list view detail view create view update view delete view delete view okay but if you did not did not want to use that you would create it something like this you would define excuse me survey list view request and whatever that you want so you see this code that is here this code it's actually the same code as this one but written in different that's what I like about Jeno as well okay so we also um importing some of the plugins like the log in uh required um mix mix in the other one lo login is required uh the the the messages under the contribute as well most of these things they are built in then you also have the JSON the JSON response okay uh we also have the models uh uh count as well okay Now if we had to ask Google to what is then we do that it will tell you that the JSON response is a subclass of Django's um HTTP response that simplifies sending JSON encoded response to the client okay we mostly going to be working a lot with JSON data as well okay then here now it's our models the one that we just created from this folder here right not this one but this one this line number 12 say from dot remember if I had to for an example I was going to say um from dot models and I'm going to say import survey another one would be import question the the the lines are are never ending the the lines of code is never ending so rather than to than to do that you just add them in one line and say "Oh in this file models I'm going to import survey questions choices response and answers." Okay awesome let's go check our slide here and see what's happening to the next one okay and this is whereby yes before we go to the views because the views are for the user side I'm going to revamp back to um the the the admin side remember we we've done the um what's the thing the models we've seen how we can write the code how we can structure it as well uh you will actually get access to the GitHub as well i'll share the link as well so that you are able to go through and contribute if you want to contribute as well but now I need us to go back to the admin side okay so now here on the admin side which is admin here okay sorry about that my baby is very sick in nature so we are importing the the builtin plugin or library and we say from jango contrib import cuz this is admin so now we say models import survey questions choices and response and whatnot what's happening here we're saying that we want to use the default admin built by Django to say that okay we need to build this application and not built but we need to have access to the users interface and we don't want to create an admin dashboard from scratch we want to use the built-in so that we can add um surveys we can create all these things right by doing that you're also now creating um turbul inline h code as well but let's let's let's get to that part and see what's happening as well so we did mention about the importing then now it's the class choice inline admin.tubular inline this here defines an inline admin class for the choice model and it allows admin to manage related models directly within the admin page of another model the tabular in line displays the related um objects in a compact table format right then we also have what the model equals to choice this is that part here this part here we have that and this specific line specifies that this inline admin is for the choice model right the extra one this tells Django that okay display one extra empty row in the inline form when you are adding or editing a question this provides a convenient way to actually add new choices without having to click another button initially okay okay that was the choice in line then now we have the question the question at mean one and now this one uses instead of the tabular it uses the model at mean okay and it's being pulled from this guy here okay now we have the lines choices that's model list as well list display we displaying what so here you can specify what you want to display on the admin Inside you can display um text you can display surveys you can display questions uh whatever you know and etc list filter and you know filter by survey question type uh search fields search by text etc okay let's see what it means here so the inline choices by including the choice inline so this will tell us admin to manage the answers option tied to the question directly within the questions editing page okay and the last the other one would be list display and this will list the text the survey the question type that is required and the order as shown in the list as well and this gives an admin a quick glance at the key detail for each question without needing to click through them filtering option as well this is where you need to filter and etc the search functionality is there for admin so more or less the same uh code that we have on the um admin page it's there as well we also said can underscore delete is false here as well now we also add read only okay say we say list search display we don't have other ones as well but on the answer we saying read only why because we don't want the admin to manipulate the data you know someone could just uh go to uh the admin portal and say that you know what I want to edit um skinny's response and and write nonsense or night other stuff that are that are not related which may compromise the data as well so that's why we read only only the user that added this content is allowed to actually type and edit okay then we also have the response response is more or less the same as well as the previous one and um to to to also bypass this um means or for this part as well is that you don't have to use the Django admin for response object managing through customer views and commands and or commands or an API should be something that we can do as well uh we can also modify the response class to change how it looks within the admin okay okay then now we also have the register so you need to register your application that's why right here we have them at the end of the code here so what I'm going to do now I'm going to comment that i'm going to run our application python oo cd my site okay oh forgot that I'm not on the computer cmd ls and those things now that there say python run I'm used to to writing run sorry about that python then I'm going to say manage then run server hopefully there's no error cuz if there's an error you we are dead now we're going to open our application That's how it it's going to look like or where how it looks like but this part ignore it because we're not going to go there for it for now i want us to go to the data to the back end to the admin so already it logged me in because of uh previously I've logged in as well but if you log out and you say admin this is how it looks like like let's say now you started the application and you never added your views your layout it was just like this you for/ admin it's going to give you this admin and I see that the embedded dark mode beautiful you mostly yeah it's beautiful but now when you come here you won't actually have an account created you won't have anything that's when now this part comes in so after you've registered or even before you register you're going to create a super user right so now let's go back to our application this one here so what I'm going to do is I'm going to create user profile model and leave it like that just like that nothing hectic let's see um meta do we need meta meta let's see if metal will be created for us no nothing it's fine i'm going to leave it like that okay once that is done I'm going to open my terminal okay cd to my project okay python ooh remember it's model under under the the project so I need to register that project forgot about it test project no no no not undersc project but test testing app because it's testing app we are under here here right then I'm going to say python uh manage then make migrations hopefully it will make error there's some issues uh we need pip pillow oh yes I like about I like I like this is what I like about this platform um any error that you face anything that it will tell you so since we using images we need to install this plugin right this plugin so how are we installing that plugin i forgot we need to do one thing activate our virtual machine or virtual environment uh what was it again it was test env i don't think I'll need the these two then I'm going to say bin say active activate it might give an error okay if it gives an error uh we need to follow the Windows one the Windows one was uh when what is it was test environment then we're going to say scripts then we're going to say activate H okay there's something that I'm making that is wrong let's go back and see what we're doing that is wrong because it's Windows I will need bash i was actually correct because it's scripts then activate so I'm going to copy this open cmd ah never mind it's already there there we go it's already activated but that's how it is activate it then we're going to say pip install po okay once that is done Python manage oops forgot cd uh testing is it testing project yes python manage make migrations make migrations our migration has been created boom and when you create your migration this thing gets created as well see we we good now we created our migration we need to now migrate our application to the table migrate apply has been created all of these guys have been created it added authentication and all these things beautiful we are good to go now let's go to the other step so we were here now I need to sort of like run um this application going to do cmd again python run uhuh manage oopsie cd test score python manage pi run server now it's running on the local if I do it here it's opening if I admin take me to the admin there is no credentials dark mode what do we need to do i'm going to stop this Python and that guy what does he say slideshow he says Python then you must create a super user create super user okay it's going to ask you a name i'm going to say skinny it's going to ask for my email uh you can skip that if you don't if you like but I'm going to add my email skinny whitegmail.com password 1 2 3 4 5 6 7 8 9 then 1 2 3 4 5 6 7 8 9 password two commonly yes we're just going to keep it like that created now if I go back to that application not the live one the local one it's not running sorry about that okay if it's running and I'm going to say admin there we go took my username my username would be skinny password 1 2 3 4 5 6 7 8 9 was it nine or eight 1 2 3 4 5 6 7 8 Hopefully it would work it's wrong why is it wrong i think it is wrong because of the way the name was stored was it skinny like that one two three four five six seven eight nine there we go normally that's how it's going to look after making those migrations users have been created as well normally you wouldn't find it but it's there use authentication it's there then you know that on the live one which is now what we're going to be logging in we log in i'm I'm loving this dark mode then we have these guys as well if you included your authentication part it's fine you have included you can now add users by just clicking there create their password and etc you can view users these are the users that I have created i don't have a first name i don't have a last name if you want to add these things on your login you would actually ask them on your I mean registration page you would ask them if you're creating an account okay staff yes it's true i'm a staff filtering show counts all these things by super admin i mean super user active and etc your search functionality is there you can also add a user from here and groups they are there as well okay see now that I've com I've commented everything i'm going to uncomment them then after we going to go back there they are there we go you have your questions your surveys your response and you select them these are the responses that are available um you can edit them if you Yeah you can edit them change them what is Django the tool is cool by who as well if you have more than one users you can add a user as well just right there without leaving that page as well that is how Django admin works okay now back to the views let's go revisit our friend here so before going to the views um our URLs so now Django URLs help us to connect uh to call connect the address the address or the URL um um for users to actually you know type in their browser forward/home/sign in those are URLs when it comes to Django so now when we come to the user types of the URL on the browser like I explained it's your URL for/ whatever and Django receives this request and it also provides you with the response your view or your HTML now the URL dispatcher it's defined in our application the main main project which is urls.fy and this is where um it would request the path okay it will request a path it also matches the path against the pattern the patterns you have defined it also once the match has found Django would actually execute the view function and this view function associated with that pattern once the view function has been processed the request and it returns a response usually in HTML and Django sends back the respond back to the browser okay now to import um on the users on the uh project actually you're going to import the main one which is admin loads admin features um Django import um the path and also include so if we go to our code and we go to our project which is here is my site we have URLs I've added include here this include says that I've created um a project called survey I mean an app called surveys and it has its own URL users cannot access those URL if they're not registered in here so what I'm saying is that please include the URL for surveys into the URL of the project so that when the user types wskinny.za/create Z award slashcreate or get service it's able to pick up that's why we're using the include right the path is to say this is the path forward/ whatever whatever but include the URL that's why we say include surveys urls dot um yeah urls okay we also add the settings which is the the one that we're going to speak about later on about the static URLs and etc and we also included here as well we said from the contribute uh not contribute but Django config URL static import static as well so this is what we're explaining here as well about the URLs and etc so this ch the the the stat static one this one tells Django where to find static files during development okay and this helps the ser the this helps to serve static files like images styles during the development as well so now once we're done with that part these are the the views remember those views that we spoke about and here we're explaining each component or each line of what's happening importing the path importing the the views now let's go back to the views we added up where is importing the views so from our end we said oh not importing the views sorry sorry we must go to which page is this one this is views and URL so starting with the URL the one that we just created see in our code here it's empty but in our live code it is not because we created it in a way that we wanted users to simple just go through we said import we said dot import views this line said import all the views in the p in the page you don't have to write them we only need few lines there but if we see that the log out view it's not in our view we can create it or you can just use the built-in one say contribute views import log out view this will allow us to do what to log out of our application so we have the survey list view we have the survey detail view we have the response view we have the create view we have the edit the delete uh the results your surveys as well as what the account log out just to log out of the account it explains here what's happening here as well as you can see so we have this code as I did mention these are the importing we have imported them and um this line here or this section explain each what does it do renders a template with the data displayed that's the render one the redirect one sends the uh sends users to a different uh URL often after submission once you're done pressing login or sign up it redirects you to a different page the get_bject underscore allore 4 404 tries to find the database item and if it does not exist it's going to show you a 404 error or page not found error okay reverse lazy i don't know why he's lazy but is used in class based views these class base views are the views that we are using in this code here remember these are class hey why are you slow these are class vase view class but the normal one the normal one that you would probably see in other uh tutorials and section they use this one so it does that and it also um it awaits to resolve the URL up until uh it's actually needed we have the list view detail view create view and update and delete these are built-in class based views that we mentioned and uh uh that handle common task listing item showing one item creating editing and deleting them we also have the login one which makes sure someone is logged in before they can access any content login is required similar to the previous one but this one is it's used within or with function based views messages as well lets you see add a message submission successful whatever whatever then we also have JSON response that we just um explained a few moments ago when used um so this is used when returning JSON data useful for API and HX etc we have count we have surveys and all these things so now this is how the the other one the connection works as well right Now before the connection works we have our views here as I did mention so if we go to our document this part of the document I almost said document but this part of the document what it does is it explains each component and what does it do inherits from list views that's why we have list view which is designed to display um list of display object in a list objects in a list form if I can put it that way model specify which models that it use the templates which templates HTML and etc and uh the context object name is equals to uh surveys so this defines the name of the variable that will hold the list of objects of the survey object we're also using the ginger text as well this is how we're going to we accessing them in our templates we also define get query as well query set and we specify return survey.object filter is active true this method overrides the default overrides the default get query to return only the survey where it is active meaning they are public they need we need to see it so you can go through all of these things uh not all of them but uh yes all of them you can go through all of them provides you with the other one user survey list and etc so you can go through them line by line but because of our time we're not going to go through them line by line okay let us now go back to our code uh is it this one no no no it's not okay we have them here we have our URL test models our form so forms what happen what's happening with forms creating our form we say import Django forms import forms built in we need also the mo models that we we need after models what do we need survey forms with um we need to create our form this is where now it's going to store the data we say we need title description and if it's active done we have our questions form as well which is here we also have our choices form as well then we also have our form form set for uh questions this is where you have them as well and choices as well this is a code that allows us to actually fill in the form now when you create your code or your template as you can see I do not have templates under my project see I have to create them so I would look into this one it's under project yes under projects did I create app outside of a project yes I think here I did uh this guy was supposed to be inside Django Pro project yeah my project my Oh it's actually inside yes it is so now uh inside the project this main one I'm going to say Oops create a folder say templates everything will go there home then you say under home you say index.html your code will go here similar to what we have here templates then we have home we have that code we have registration we have that code we have surveys you have your code as well you also have a baseline or base base is where your code will be your base code layout so that you don't have to add them in one page as well so now if you look at the page not base the base code it says load static but before we go there revisit your settings so now a quick one would be um importing these libraries here as well always make sure that you import them include these guys include these as well to make sure you don't have any errors please do include them uh if you're working on a local one you can include them like that if you haven't added your applications you can add them don't add these ones for now and these ones don't add them add only the ones that we're dealing with survey crispy form and etc make sure you also go through the templates you add it like so like templates or you can add both them like this as well so this is just to avoid errors the static part you can add it like this as well so now let us do a test test just a quick one on our application to see how our application looks like on the front end this is how it looks like log in surveys my surveys create the surveys i can create a surveys uh FNB is it the coolest question tell us more about it just doing testing then you can add other ones or add questions there oh flip this is a survey about that then the question would be what do you like about F and B is it a text answer single choice multiple choice if it's multiple choice you're going to add those things but if it's single you add it ordering I'll say one and create once that part is created it's going to take you to its detail form then you are able to see oh it's created by me on this day and etc take a survey tell us more what do what do you like about FMB it gives out cool features on the app done submit your response then you're successfully uh thank you for completing this and etc then it counts as well how many response when you go to the admin side you go to survey you see it's been there it's been added this is the one you go to response you see this is the response by myself and you go to questions you see all these questions text answer blah blah blah and all these things so now if you want the code you will need to go to GitHub and it's actually public uh just search GitHub Siaka developer FNB-back not FNB Python back end with uh FNB then you'll be able to get that code as well that we have so now just to quickly wrap up our session because um we we looking at our time as well um the application that we just built is the the one that we just went through it's a survey data management application with Django and Bootstrap it allows users to actually authenticate yeah survey creation as well management um what's the other thing questions and choices management survey response results v uh visualization response s bootstrap UI and to further enhance you can work with these things like user registration implement survey sharing via emails more advanced analytics implement CSV or Excel export and etc add survey scheduling maybe this could be your your your practice to actually implement these features since you already have access to the GitHub so that's how Django uh works with backend development and I would like to just wrap up the session with that and I hope hopefully you guys build cool projects project could be task management blog management and other applications as well you can use Bootstrap templates whatever to actually enhance your application with it so I would like to thank you guys for having me and apologies for taking too long cuz I saw that time I was like went overboard next session I'll try to keep it simple and um easy and uh not longer than it should be and thank you so much for having me hope you guys are doing well peace out [Music] all right thank you so much Skinny for that amazing lesson that informative and engaging lesson i hope you guys all found that lesson extraordinary so please also head on social media and thank Skinny let's show Skinny some love all right guys so that's it for today's lesson we'll be continuing in our next lesson looking into the continuation of the backend development but next time we'll be focusing on building an API all right guys so that's it don't forget to hashtag us on our socials that's # FMBacademy i am your host my name is Kar Mu see you guys next time peace [Music] [Music] heat