Django for Beginners - Building Task Manager Web Application (Part 1) | Shubham Sarda | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Django for Beginners - Building Task Manager Web Application (Part 1)

teacher avatar Shubham Sarda, Python Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction


    • 2.

      Understanding Django - Theory


    • 3.

      Setting Up Text Editor - VSCode


    • 4.

      Setting Up Virtual Environment


    • 5.

      Understanding Django Version Game


    • 6.

      Startapp - Taskmate


    • 7.

      Runserver For First Time


    • 8.

      Django Flow and Django Structure


    • 9.

      Urls and Views


    • 10.



    • 11.



    • 12.

      Base Template and Jinja 2


    • 13.

      Static Folder and Improving Website Look


    • 14.

      Admin Panel


    • 15.



    • 16.

      Database Migrations


    • 17.

      Fetch Data From Database


    • 18.

      Displaying Data On Templates


    • 19.

      Adding Condition On Data


    • 20.

      Adding Form and Accepting Input


    • 21.

      Adding Messages and Alert Option


    • 22.

      Close Option On Alert


    • 23.

      Understanding CSS and Bootstrap


    • 24.

      Deleting Queryset Item


    • 25.

      Editing Queryset Item - 1


    • 26.

      Editing Queryset Item - 2


    • 27.

      Editing Queryset Item - 3


    • 28.

      Adding Option - Mark Task As Completed


    • 29.

      Adding Option - Mark Task As Pending


    • 30.

      Pagination Overview


    • 31.

      Implementing Pagination - 1


    • 32.

      Implementing Pagination - 2


    • 33.

      Implementing Pagination - 3


    • 34.

      Fixing URLs and Links


    • 35.

      Fixing Task Page Design - 1


    • 36.

      Fixing Task Page Design - 2


    • 37.

      Designing Home Page - 1


    • 38.

      Designing Home Page - 2


    • 39.

      Thank You For Being Here!


  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Welcome to Django for Beginners, Build Strong Django Foundation By Building Task Manager Web Application With Python & Django Framework!

One course that will help you to start your Web Development Journey from Scratch Step-by-Step, This course touches each and every important concept for Django beginners with it's latest version Django,

Through out this course you will learn about:

  • Django Development Environment Set-up. (Libraries, Extensions, IDE's, Virtualenv)

  • Django Flow & File Structure

  • Django URLS and Views

  • Django Models and SQLite3 Database

  • Django Templates

  • Set-up Static files and Media files Structure. (CSS, JS, Images)

  • Work with Django Administration Panel

  • Work with Django Forms and Fields

  • Learn Jinja 2 (Using Python Code In HTML Files)

  • Writing Function Based Views

  • Implement CRUD Functionality. (Create, Read, Update and Delete)

  • Django Messages and Notification.

  • Working with Python and Django Libraries

After completing this course you will be ready to work on beginner's projects as Intern, Fresher or Freelancer and you will also be able to implement everything yourself! Most importantly you will be ready to divide deep for big available scope with Django in future.

Enroll now and I will make sure you learn best about Django!

Meet Your Teacher

Teacher Profile Image

Shubham Sarda

Python Developer


Hey there!

I've created Complete Roadmap to become a Developer with different projects, specifically for the SkillShare audience. 

With this roadmap we will start with Python Programming, learn about basics, important concepts and solve some real life problems by building projects. Once we are ready with Python, its time to gain more experience with different field projects in Automation, Data Analysis, GUI Programming and Web Development. 

Here is Complete Python Programming - 
Python A-Z: Learn Python Programming By Building Projects
Python Programming - Advanced Concepts

Python Projects - 
Python Project - Building Twitter Bot With Python and Tweepy
Python GUI Programming - Build a Desktop Application with Tkinter and SQLit... See full profile

Level: All Levels

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Introduction: Hey, guys. Welcome to jangle for beginners building Web application with by Country and Django Do. And the scores will be talking about everything from very basics on build Strong Jangle Foundation by developing a task manager of of application. So this course is completely dependent on project building approach. It might look simple, but you are going to get pretty strong concept. Throw the course. This course will start by setting off jangle development environment, which includes Libra lease extension ideas and work for environment. And throughout the course you are going to learn turns off topic. We'll be talking about Django flu file structure. We're talking about MBT, an NBC architecture pattern, which is really important for any framework. Then we'll be talking about the baboon off Django, which is Django. You are is used mortal on database. One status done will be jumping onto template on. We'll be start talking about bootstrap and create our own template for our Web application . Once that is done, we'll be able to understand how to manage. Our static files are media files, which includes CSS, JavaScript and images. And once that is done, we are going to talk about Django admin panel, which is the reason to make Django suitable for fast development. Along with security, we'll be also talking about Django form feels how to use change a toe and how to write function based field. And all this would be implemented through crowd functionality, which is create Read update daily. And you will also learn design principle for dry, which is don't repeat yourself. We'll be also implementing jangle messages, libraries and not more so this course is totally dependent on project building approach. So from our very first lecture to the last real before closing one Django designed principle that help you to understand why we have written each and every line off court. By the end of this course, you will be comfortable to start any bigger level fight on jungle project on work on it on . To begin this, all you need is basic fight on knowledge and once you and ruling the scores, you will be getting video materials. Important external ings Online resources in the form off. Pdf teach it on also access to question answer form. So if you have any doubt, I will be there for you. If you still have any doubt. Don't worry. The scores comes with a 30 day money back guarantee. So you can trust on me now. What are you waiting for? And roar into the scores and I'm really excited to see inside. 2. Understanding Django - Theory: Hey, guys will come back in this lecture. We'll be talking about three important questions on Django. The 1st 1 is 40 Django. The 2nd 1 is what we can do with jangle, and the 3rd 1 is why Jangle January is a free, open source Web application framework. And there are two important terms. The 1st 1 is free, open source, and the 2nd 1 is Robert Application Framework. So if I talk about open source so it is a project which is available to all, and anyone can contribute to it so it can be a framework. It can be a library, or it can be a program so even you can contribute to jangle to some financial do initial or maybe giving input. True Cools. The second important dome is with the application framework. So if I talk about what this framework framework is something to give structure to a system , so if I say the application framework, so it is going to give a structure a pre defined plan for our Web application if I talk about what of the application need, So there are several common tasks which are framework control, so their Web application might need to control your you. Others may be handling your data ways, maybe handling your user or try implication, maybe handling forms that is taking important giving output. So there are several common tasks that we need with the application and the framework is a structure, a plan that help us to execute these common task very easily. That's where Django come into picture. So if we're using any framework, it is much easier to develop anything because we know a structure. We know her plan, how to execute certain thing. And that is why Jang, who has so much importance in the industry that are several common toss that jangle, handles really well. These can be some repetitive tasks, or these can be simple task. The next important point that I want to talk about before getting onto our three cautions is NBC and enmity that this mortal view controller or I can save mortal do template for jangle. So if I talk about any other framework in this world for PHP, for Java, for JavaScript, all of them for lose NBC. Where is if we are going to talk about bite on in jungle? They're going to follow MBD that is mortal view. Templates will be discussing about this in the further lectures. But here I want to pinpoint that there is architecture with Django follows and we call it as MBD. Now. General is not the only framework for bite on universe. We have flask, we have to buy. We have cherry by, We have water and there are tons off other different family. But they are low level their development framework. That means they have several other use cases. Some of them are quite useful. While creating a P A. Some are quite useful for doing certain tasks. Vera's Jang was the only framework which can handle heavy task altogether. Now you might have an answer for your 1st 2 cushions. What is Django? Django is a free, open source Web application framework. On your second question is what we can do with jungle. We can actually build back and off a website. That means it is a very framework so we can design back and off our website. Remember, Our website is divided into three parts friend back and indeed obvious friend and means how the website is going to look. There might be certain animation cholera hopes I'd phone and differently back and means all the functionalities on the 3rd 1 is state of is So how you're going to store all the data that you are getting from a user, all you are going to display it will use their Everything is stored in our database. If I talk about friend and HTML CSS and JavaScript basic knowledge off these three can help you a lot to create some static pages without any functionality. Just for the view poppers. Now, if you want to jump onto high in part, you might go with different JavaScript frameworks like angular view, react and not more now coming back to our back and park. So all the functionalities off website is controlled by backing. Here is a place Django come into picture on. If you are able to control complete jungle, you can control complete backing. And if you talk about databases so we are going to use SQL light tree, which is an in build it obvious bite on so four friend and we are going to use html CSS JavaScript with help off bootstrap for back. And we're going to use Django on for database. We're going to use SQL I tree don't really. Since we are going to use Django, everything would be quite easy and smooth to integrate. And you don't have to worry at all now coming back to our question number three. Why, Django? So I need to divide my screen into two parts. So here I would be talking about some obvious reason. And on the other side, I would be talking about some really strong and on to the point reason. The most important one is tangles fast. The development phase off jangles quite fast. And if you want to develop anything from very scratch with the help of jungle, you can start seeing your results in the 1st 30 minute itself. So Django is really fast for development fees. The 2nd 1 is fully loaded, so there are several component. There are several libraries that are auto build with Django. That makes your development quite smooth. The 3rd 1 is sick. Your if I talk about importance off data in this Sita, it is really, really high. So you need to have a secure application that can keep your website that can keep your data safe and that's where Jang, you have an additional edge. So there are regular security updates with every version off tango, and there are several other points that you might read. But the other most important point is spite on ecosystem. Since, you know, bite on a screen very fast. Netflix users fight on black hole images developed with the help of fight on, so you need to understand the importance off fight on ecosystem and community. So these are some obvious reason why you should use jangle now. The next few reasons I want to talk about are the 1st 1 Is it follow structure quite strictly so. If you're walking with any general project, it is quite easy for you to understand that project and implemented on your system. Because the structure is almost similar, the core base will be different, but you can understand the structure within first few minutes. The next is rich ecosystem. Since the popularity is growing, support from community is going big. Companies big started by using jungle, so the ecosystem is growing. Greeleyville on these start up for contributor Lotto Open source so you can see a good growth off Django in coming few years and then I want to mention majority. Jang was around for 11 years and have grown really well during these 11 years. There are some significance improvement with every new words in, and now comes my favorite point, that is, admin battle by default. So if you talk about any other framework in this world, you have to build your own admin panel from scratch. Where is jungle? Deliver a default admin panel, which you can use with your application. Even your smallest application is going to have our admin panel by default, and you don't have to called for it separately. So this is going to save Lord off. Time on. This is one of the most important and my favorite feature. Next few feature. I want to talk all orders library support. So if you want to walk with a B I, there is jungle restaurant work. If you want to walk with any CMS, there is fractal measure nine. If you want to work with some messaging up, there are several other libraries, so this is really cool. You can work with maps you can walk with pirin on. All have their different libraries. I hope this lecture gave you a lot off information regarding jangle. We started with three basic question. What is Django? What we can do with Django and by Django. This was a teary lecture and I hope you got laid off information from the next lecture. The starter project. See your demo started working on your up and get your system ready. I hope this letter was helpful. See you in the next one. 3. Setting Up Text Editor - VSCode: in this lecture will be installing our visuals truly accord if you have atom or if you have pie charm, that's okay. If you're installing your first tidy, I would recommend you know either use visual, studio, cord, atom or picture. You can use any of them, and it might take a few seconds to install. One start is that we're going to set up our system. Installation process remains him for almost all the application. So just quickly install this idea or new system. And then we need to set up several extension for Fight on and General, It's done. Let us law entirely your school Here is my welcome screen. Before being anything else, just jump onto an extension. And remember, we need to download extension for bite on as well as Django later in the holder videos. If we have any other specific requirement, we'll be downloading that are currently let me search for fight on. So this is one of the most popular vital extension on. Let me install it for now. What these extension do is there are several functionalities additional functionalities to RV escort, that is our I D. So that is done for vital. Let me also install for general. Now you will see different Daniel Extension. So firstly, you need to download this base order now in the leader section. If we have any specific requirement regarding different jangle nudes, we'll be installing different extension. What are currently you need to install fight on as well. Let's tango one status and we are good to go with our project. So in the next lecture will be falling up with our base folder as well as we'll be creating virtual environment to see in the next one and let us begin our project. 4. Setting Up Virtual Environment: Welcome back Now in this lecture will be talking about virtual environment. But before that, let me take a few seconds to set apart folder. So I've created up by Jungle Cooler and my dick stop and then inside that I have created a jangle project for dinner so you can name it anything. At this point of time. Naming is not important. But whatever we are going to do inside this particle a folder that is that jangle project folder, every name will be important. So this is the reference name that is familiar to me. So I'm taking this. If I need to create new project and future, I would create a new four letter index stop and then create a jangle project file inside that ad. Currently, naming is not important, but remember, all the other folders are the files were going to create. Naming will be very, very important. So let us begin with our virtual environment. So what is virtual environment by the name you can guess which will be something related to ? Not really, but it would be giving us an isolation space. So if you talk about worst, will reality or anything else so worthwhile means it's not really, but it gave us I solution space and environment. Means are area specific area. So what? We are going to do this? We're going to create a isolated area. So are currently, if I check different vital packages in strolling my computer, they would be in great number, but I don't need them. With my Django Project, I need few specific packages only. So for that we create our isolated space in our computer. Or maybe if you are working on a sober, we create an isolated space in our server on inside that particular isolated space. We work with our files with our packages and everything else. So let me show you number off vital packages that I have stalled but might not be useful for me when walking with my jangle project here. If I do Pip freeze, so pep freeze will return me all the packages that I have installed regarding Fight on. So here you can see it's more than approx 10 12 or maybe 15 packages that I have installed , but that off no use for me regarding my fight on project. So why I'm going to take this burden while running any off my bite on file. Next reason is if I'm working with different projects. Maybe I'm walking on up old project that required jangle one point time. Maybe I'm walking on a new project that required jangle 2.1 or maybe some other project that require Django 1.11 So I have to take it off. That and I'm not going to delete jangle origins and keep on changing. So for that I would create three water environments that has three isolated containers on enforced, isolated container. I would be using jangle one point pain on second container. I would be using Django 1.11 on on third container. I would be using 2.1. I can name them differently. I can store their file differently, and whenever I'm going to work with this particular project, I'm going to run this virtual environment. Whenever I'm going to run the second project, I'm going to use its virtual environment so I don't have to create Miss at this point of time. This might sound confusing, but let us work on it on. That would be clear for you. So what? I will do is I need to install virtual environment. So I would be installing a package called Who Are actually Ian be so all you have to do is Pip install were actually in B. That is done on hair. I also have a message regarding upgrading my pip, so I will be doing that in a by now. The second thing is how to create isolated environment that is how to create virtual environment. So that is quite easy. All you have to do is you need to take care of the folder in which you are going to create watch your environment. So here I would be creating virtual environment and I would be working with this particle of older, so I would be creating a pie jangle fuller here I would have our virtual environment folder on. This will be my project Fuller. So just open your command, prompt or if you're working with power shell or if you are working with Tamil Open in this particle a phone there. So I'm inside my pyjama fuller. Now all you have to do is use a simple command fight on Dash M v N b. And then the name off your virtual environment. So remember, you have to give us specific name now. I'm thinking my project name as task meat. So my vulture environment name will be PM gnb. So that would be simple for me. If I'm working with different projects now, hair, it will create a virtual environment folder. So this is the order in which all the files regarding a virtual environment would be stored . And we don't have to miss with this because it will store all the files that are required regarding our fight on Jango and a lot of things. We don't have to do anything with this particular Fola. We are going toe work only on our jangle project for her now one status done who have to activate it. So our system recognize that we are currently in this isolation more so I would be using my virtual environment. Fine. Then I need to go with scripts and where you can use tabs to order complete. And then I need to work with active it and then press enter. So now you can see we have activated our trail environment. So whenever you are going to work with your command prompt all your domino regarding this particular jungle project. You need to activate your virtual environment. Now, if I do pick trees to check all the packages that are already installed, you would see zero. That means it is an isolated environment and we need to install everything from bees. You see, I haven't got any package. That means there is no back it install. So it is completely empty. So are currently we are in our isolation, more so to be activated. This all you have to do this used deactivate common. Now we are back in a normal mood. So if I do pay freeze now you can see the difference. Now that is to one quick thing. Let us all to install Django so we can see the difference here. My water environment is activator. Now let me install Django. So all you have to do is Pip. Install Django. And if you have to install any particle aversion, you have to use Django double equals two. And then the words your name. I would been strolling latest virgin, so I just need to do Pip install jangle north stun. You realize there are two packages and strong. That is Django as well as despite easing on it is currently 2.1 point seven. Let me do my pip trees so it will give me a better idea regarding what packages are in stormed. Here. You can see there are two packages. Every label in our virtual environment That is our isolated container. So that's fine. Now we have a virtual environment. We are going to work inside this. So we are going to create by tone project and all the different thing inside are isolated container. But remember, we are going toe work with jangle Project folder. So just change your directory on. We'll be working inside this folder. I hope this lecture was handful. From the next lecture, we are going to start our Django project. That is actual Django files and all the different type off structures on the flu. That is Django flu it depend on. So from the next lecture, let us start our Django journey. So see you in the next one 5. Understanding Django Version Game: Hey there, welcome back. Along the side. Now in this lecture, let us understand about Django versions. Now there are multiple versions of Django, 2.23.2 and in future it will be 4.2. If you visit any website, if you visit different blogs, if you visit different courses, you will see everyone is juggling between different version and some are using to point to some I using 3.2. And in future you will see 4.24. Which version you need to use. Ham, what does this mess? So it has the quick answer. If you are working with software industry, there is no perfect software. Every software is evolving and improving. That's why we see different versions with some upgrade SLS, some bug fixes. So to answer this question, which version I need to install? You just need to jump onto the download option, scroll down a bit, and you are going to see this graph. You need to install LTS version, which has long-term support version. These versions are supported by jangle for regular updates. Most companies opt for LTS version, so they have a proper backend for any website. Similarly, you need to follow that at this point of time, at the time of recording this lecture, there are two activating SYN, either 2.2 or 3.2. You can install any one of them. If you are watching this lecture after 2023, then you can also install the 4. Okay? I hope this solves your problem. Most companies install the LTS version and so does we need to follow something similar. What you have to do is just jump onto the download option here on Django official website. And you will get an option about pip install Django w equals to the version name. If you need to install the latest one, you can install pip install Django that will download the latest version. But if you want to install these specific version, then you need to do pip install Django w equals two. And then mentioned the version name currently in market. There are two active versions, 2.23.2. In future, you will see newer versions with 44.14.2. Once you see 4 to install that, I hope this answers TO current cushion. Which version to install any IPS version 2.23.2 or in future for 0.2. Now, the other question, why we see these multiple versions? Well, it's simple. It's software upgrades. So if you see the liters of grid, they have fixed some box with 3.2. And there is also something related to admin section, so they have changed that. So these are small changes. These are small bug fixes that Django is currently doing. And you don't need to worry much. You can install any 2.23.2 or 4.2 version. But make sure you also check your Python version like Django for 0.2 is only going to support only delete as Python versions. Similarly, if you have the old Python version, then you have to install 2.2. That's all that the whole mess of Django versions as a Magna, you don't need to worry To be honest. Any margin of 2.2312 and in future for point to thank you for following. And I see you guys in the next one. 6. Startapp - Taskmate: Welcome back, guys. Now I hope you understand about that fool. A structure we need to talk about. Two important things. One is how Django flu works. And the 2nd 1 is how jangle structure works. These two are really important to continue our project. But before doing anything else, let us first start our project. Now to start a project or doing anything else with the Django application on Domina or CMD , make sure you remember two points. The 1st 1 is that your virtual environment is activated and the 2nd 1 is You are in the correct folder. So first, let me activate my virtual environment. Remember to you stop for auto completion. It would be quite easy for you. Do end into any directory. Now here my virtual environment is activated. The next thing is, I need to get inside my jungle project. Fuller. Before that, you can use City that this change directory and then the director name for what you want to switch. So I would be using Siri jangle. Bridget, that stone. I'm no inside my jungle project Fuller. This looks fine. So remember this is our workspace Now everything we are going to move. A jangle project would be inside this. So let me run my command. Django. Admin start project and then the project name. Remember, this project name is really important. And you can think off a good project Name according to wish, you can set load off your project. I would be using task made. This might take a few minutes, but if I'm going to open my Django project now, you will see a different type of files and folder. So let me go inside this on. This is my fuller. Now on, you will have several file inside this. So it's better to switch from on the screen to RVs school screen or maybe atom or your bike jump. So you will understand the structure off your jangle project. Now, this is a project fuller right now. So I have opened jangle project inside my via school on hair. You will see my task made fuller. Now, let me explain you some small things regarding this particle. A folder On the next lecture, we'll be talking about Django structure as well as Django flow, which are quite important for you to clarify whole Jang within one important thing I need to talk about this. If you can understand these two points Changle structure and dangle flow, you can basically build any application that you want. You can build a clone off blog's. You can build clone off e commerce. You can build blown off any other website. So the important thing is you need to be clear with the jangle structure as well as younger flow. No hay. Let us talk about our task. Me Now This is our project Fuller right now. So this is our mean project up. Django is completely divided into different type of abs. So this is our project up. Later on, if we try to create a blogging our website, we'll be creating Ah blawg up. So there will be new full local block inside our task Made toe task meters up project. This is our up and if you create a block, the block will be considered as up. Everything in jungle is divided into up. This point will be clear by next lecture act. Currently all you have to understand this. This is our main project, Fuller. That means we have several fights which will be only present inside this folder. Let me talk fuse again for each file The first filers in it which is not really useful for you at any point of time. Soon we basically don't pass this file during our whole course. Even with intermediate level or export devil, this file is not really useful. This is just to initialize our project. The next one is setting start by It is one of the most important file Toa alta project. We're not going to edit this file much, but this file control our whole project. Here you will find based directory which help us to connect all the files and our project next real basic your digi So the security key is kept as a secret by project administrator to keep our project secure. So whenever we share our courts with anyone else usually hide the security key or remove this one on the ski is really important for production. Next is debug. So whenever we are working on a project, we tone it as true. But whenever the who stop project or deploy a project, return it as falls. Then here we have allowed host. That is all the dough means on which our project is going to work, then install app. This is really important thing. As I told you, Django is divided into different taps. Eat section that we're going to work will be divided into APS. Don't think about these abscess and wrote up what? IOS up. These APS are basically jangle features that were the waiting. So here, if I create a block, I would be creating a blogger up and then add a new block up inside my in store naps. Next important thing that you should take care office, the bluesy application. So this is usually used when they are going to deploy our project into us over. Then we have something better to do databases. So, at currently, we are going to use sequelae tree for our project. But if you are willing to use my sequel or post Chris, you need to change and conflict them here and then we have all different things in order to do authentication, time zone, language and other things. So we can control our whole project through this file. And it is really important for you to understand this file. The next one is you. What is it? Basically control all the routing that is done by our project will be understanding them in the next lecture. Then we have WSC file, which is used when we are going to the prior project. And that's it for our project are fuller. Next is our managed or pipe. So this file is basically used to control and run our seven. So even if we are working on a local server or online's over, this file is going to remain same and we are not going to edit anything for that's all for this lecture, I hope now you have some basic idea regarding jangle project. Don't worry. In the next 23 lectures, you will be clear with each and every doubt. So see you in the next one on in the next lecture, let us run our sober for the first time. 7. Runserver For First Time: now in this lecture, let me quickly run our project, which we have created in the last lecture. So all you have to do is just jump onto our command from on here. You have to change your directory and get inside our task made fuller. That is your project, Fuller. And once you are inside your project, Fuller, you have to run a command call by tone. Manage short by Ransomware. Remember, you have to run this camel in your project Fuller itself. Because manage short bias President hair only. So just run this command and it might take fuse again to lose yourself. Ah, here. You can see your server is ready. Now, this is your current food. That is yourself a boot. So if you're working with an online server that this once you have sifted your whole project on lines, our this might change. At this point of time, we are running on a local server. So you might see this I p as a less This would. The next thing is, you might have seen this db daughter school I tree. That is our data misfiled. So if you jump back to your setting, start by here. You can see this is our database which we have given name. So if you are someone who is using whose Chris, if you are someone who is using my sequel, then do change your database before running was over for the first time. Remember, we have run this for the first time and it has executed several finds. Now, before talking anything else let me open myself for that is my I p and my port on here you can see I have a general screen. The install work successfully. Congratulations. And currently you can see this notification that I'm seeing this particular screen because my debug is true. That means I'm currently into development phase. If my debug ast equals true falls, that means I'm into production phase. Production face means my site is life to all the public. Now, if I open my command problem or terminal, you will see a message called You have 15 un applied migration. So what is this migration? So we need to understand this during our jangle structure as well. But let me bring fuel bit migration insulated to our data bees. So whenever we run on an application for the first time. Or whenever we edit anything with our database, we're going to get this message at Currently there are 15 UN applied migration. That means there are 15 different changes to my database. And since this was the first time, so I have to handle this migration. So for that, let me stop this Over. All you have to do is use control, See? And if I tried to refresh this one, you see, it's no Stop. Let me jump back to my command from and here you need to use to commands first run despite on managed or by make migration. And then 2nd 1 is white owned, managed by my great. So the 1st 1 is help us to convert our queries. And the 2nd 1 is help us to actually apply the queries. Now here you can see I have applied these migrations. Now, if I run myself where I'm not going to get this notification again. So if I run myself over again, remember, you can use up and down keys in your command from raw abdominal to get previous commands. Let me run myself again and you can see I haven't got this message or notification again regarding migration. That means we have applied the changes regarding our data bees. One more important thing. These state of exchanges was related toward these up. So we have something ready to our administration. We have authentication, some sessions. Everything was previously handled by Django. So that's all for this lecture. I hope you understand about how Do run yourself. Don't worry. In the next lecture, if we are going to focus on our structure as well as our Django flow, that will clear up most of your doubts. Thank you for falling this lecture. See you in the next one. 8. Django Flow and Django Structure: Hey, guys, Welcome back. Now welcome to one of the most important. I guess the most important lecture off this whole course that is understanding the structure, understanding the flow off our Django application. The first thing is, how did this up works before that? We need to understand how the jungle floor walks. So if I take a simple example here, you can see this image on it has several points are browser. You are is view model database templates. And you So I have also followed different other images that talk about the same thing. So here, let me clear you first thing. When I talk about jangle structure, I'm talking about all the files, all the folders that I included in this on when I talk about jangle flu, that means I'm talking about the mediating how this is transferred toe that how our database work on what are the files and world with our function on how do this front end work? Or how do this back and roll? So for us, let us talk about our Django flu. Remember, jungle follows M v p. That is mortal view template. If you talk about any other framework may be off PHP that is level or any other framework. They follow NBC that this mortal view controller, which is almost similar. So if I talk about MBT mortal that is related to databases view that is related to functionality, off function courts that we write on template that relates to front and Bart how our website is going to look. So the 1st 2 points relate to our database, and the functionalities that is our back and part and tablet works with a friend in part. So all these three are really, really important to work on our website now. Hair. I also want to add a C so it's see MBD, which is controller configuration or mapping whatever you want to call 10 mortal, then you then template. So what actually happened when you visit a website, so her? If I talk about two weeks, said that this PDM dot com on amazon dot com I don't know if they are famous for you or not , but let us consider them as a side and don't refer them on their popularity. So first thing is, if I talk about whenever I visit me team dot com my jungle application. First view this you are in. So that is it actually map. Okay, I'm on my home pitch. That is my pt m dot com is homepage or index speech for me. So then it moves towards the view, that is, it starts searching for a view that is related to wear Index. Pete, Where did get the functionality off that INEC space, that is, They might need to throw some ad. They might need to show some important slider or anything else that is controlled by our view. Now, view is connected to our mortar. That is our databases. So it might need to throw some sliders, but from database, it will fetch what type of slide I need to throw. So that is controlled by our view and mortal mortal means, our data wasting all the things that we are going to fetch from database and you decide what functionality that base cover. So once we our interview, we connect with model chip. What type of data we need to show? We then go back to you, return that data to view, and then you connect with our template and show that data on a browser. I know this might be tricky, and you might be confused. Let me take simple example. I came on amazon dot com. It checked it to waddle with help off you are it got to know that it is related to whom Beach got all the functions off home page connected with database. Then return all the data base related query. That is all our data door function on, then, with the help of this function, show that on our template that is on the homepage and then revert back to browser. So this was example in it. To whom? Peace. Now, what if I visit log in page? So if I click on Logan now, here you are, really map everything with the help off this particular link. Now they know that this is a log in page, so they will call the logging view that this view that handles log in page, connect with the database, get all the related query, then revert back to view, Then show the sampling. That is sure, logging bitch. So that means everything is in the flu with the help of few our view, Mortal and Temperley. Now, I hope you understand the importance off you are. So if I visit anything on baby and dot com, for example, if I visit the smooth bleacher section, that means if I just visit radium darken, it will call Ah, homepage you. Now if I call medium dot com slash creatures, it might call different view, which made it on different functionality, different database item and also different trampling. So that's how everything is controlled with the help of these thing. This might be confusing, but let me talk about jangle structure now. So the first thing I want to talk about this Django is divided Indo different APS. I'm not talking about IOS app. Android perhaps, but I'm talking about different sections off Django. So if I visit amazon dot com and I talk about different applications that are possible, so Amazon relates to different thing, so we have equal more section. Then we have a selling section so that can be divided into a different application. Then I talk about gift cards section that means it is totally are different section. That is a different application. So whenever you can divide any project into different section, it is an app. If I talk about pt m dot com. It can be divided into different application that is different section. So PDM has movie the chart section flight booking section Boss Sexual train section deal section that its e commerce than even booking section hotel booking. I'm buying in porches and car, some gift vouchers on all different thing. They also have trip planning. That means they are different section and they are different application. So if I try to build something like this, I need to divide my project into different section that does our application. This might be confusing, but don't worry. Let us to a simple example. So in our application at currently we only have one section that is a project. So that is our asked me if I were born to our my first section that is maybe a block or maybe our to do list, or maybe our daily diary. So these are different section off your website. I can work on them with the help off APS. So let him create my first application as to list. First let me and drop my server. And now to add a section or up, all after do is gonna come on by tone manage short by start up and in the app name. Remember her up name is important So I would be taking AP name as cruellest And if you want to mention underscored up, you can do that. Let me present now if you check out the background You see, we have created our first application and we have number of files inside this particle Aram . Now, if you remember during our floor I talk about moral view templates So at currently you can see mortal view. Now we need to create our you are Alonso create a new file and call It s u n n start by dream in it as it is. But whenever you create 1/2 remember toe added inside your setting. Start by Remember, if you are not going to add this application inside setting start pie I jangle project is not going to recognize this particle a file itself So we have to mention not install up in our setting start by so setting and all the other files for our production and deployment inside our project A fuller And this is our first up that is our first section. I think a moated If I want to add a block, I will be creating a new app called Blawg up. If I want to add our daily diary, I would be calling a dust new. Uh, that is my new section. So that's how it flues. I hope you understand a bit about Django structure and flew in the next lecture. Let us talk about you, Ahrens, how this mapping happens. So as I said, if I call amazon dot com, it will directly map everything That is my view. Functionality from index on. If I call log in page from Amazon Said would call of you that dysfunctionality that is related to log in page. So we were talking about this from the next lecture. I hope in law you're clear with everything that is our structure and flew and difference between project and up. This is the best part. If you can understand this, you can complete any project in the short operate off. I'm next lecture is important. Thank you for falling this lecture. See you in the next one 9. Urls and Views: Hey, guys, Welcome back. Now, in this lecture we're going to talk about you. Ours as well s views. So you weren't are something regarding related to configuration and mapping on views are related. Toe are functionality off that page. I hope this would be clear by the end of this lecture. So now let me open the first Urs that this art project you Arnold. So whenever be open our homepage that is our website ling or maybe our I pier in Port Link . So we are going to hit this Ural at the very first time. First let me on my cell phone and talk about this. So at currently I'm just treating my homepage. That means if I talk about in your earldom, I'm just visiting slash or empty Ling. The second is if I talk about my argument So this is ah you honor that I have already defined That is by default from Django. Let me visit this one here You can see our jangle setting easily map this one. That means whenever we are going to visit our domain link slash admin, it is going to call this particular function. I hope this part this clear? Think about our own application. We are going to create a to do list. Um, so let me create a link. Our domain name slash Cruelest. So for that, I need to define my own neural into my application. That is my app. So what happened whenever we visit our website? It was it the menu RL's and then it see with Django up, it needs to read on it. So if it is related to do list, it is going to redirect to this particular Ural. If it is related to blow, it will redirect to block app. You are so we have to define this. Let me remove all these comments on here defined my to do list you are in. So all you have to do is define apart. And the first thing I need to pass is my link. So I would prefer my domain drink slash task. So that would be my to do list applications. I would be using task. So this is my You are Remember this one on then here. I need to redirect to my particular application. Since this is the main project you wanna So I just need toe, add include and then which up? I need to rely. So let me first import. My include. What after do is from Django. You RL's import include for this will help me to connect with you are else off different up . That is Jang. Well, now I can use, include. And here I can mention which you are as I need to read addict. So whenever I'm going to visit task I need to connect with to do lists up. And then you, Ahrens, that's done means whenever our user is going to visit the star sling, it would redirect. So this particular you else And here we need to mention what we are going to do with this particle Erling. So here, the first thing I need to do is just copy paste my UN's content. And this is my app. You are Remember this one? Let me remove all this on here. I need to import my view since I need to connect my You are else in you now, head, I don't need this one. I would be simply using my slash on here. I need to mention which view I need to connect. Quit. Since it is the application I need to connect with a view for the functionality. So if someone visit my task, cling, it has to do something. And I have to mention that. So for that, let me mention my view on after those views and then give a view name on. I would call it us to do list. And you have also provide a name for this particular ling, and I would call it asked to do list. Make sure your name is into quotation marks. So are you are jealous? Domain slash task. Our view name is to rule list and our name is Prue List. Okay, this looks fine. Also, don't forget to him for your jungle bad. Now let us write a function with the name to do list. Just move on to our views on here. You need to write all the views that are required for this particle telling. Let me define my first function. That is my to do list on. It will take a perimeter called request. So if we need any information from browser or anything else, it would carry along with this request on head. I just need to return something at this point of time So I would simply return our HDTV response. That is a simple text. I also need to import my http response. You just need to do from django dot Actually be import extra db response will get This looks fine. Let me save all my tabs. So know what is going to happen is someone is going to visit our website. They are going to visit our domain name slash task It would be redirected to our to rule a stop Then they will come on This particular you are They will see if that you are in this plan it would redirected toe of you Take all the things that is required that the functionality and it could return this particular response. I hope that's fine if I visit my particular website now whom pitch will given enter off photo food because you're running our server running up are currently only two year olds will work If I talk about admin, this is going to work perfectly fine. And the second thing is our task. Now you can see I have a response. That means I can rid Oh, now it should be response. I can also return on render templates are its female CSS JavaScript all the different type of templates that we require. So that's the basic thing. We now understand our connection and also we are now able to understand about you are voting. So if I do one small change and quartered as ABC and if I refresh this one, I'm going to get an error because now it is in their task. And then I have to use a B. C. That's how it is going to work. Let me reword back the change. The second thing is I can also change this particular link I can use to list on now are jostling would be changing to our to do list. So if I refresh this one, it will give me out for not for error on I have to use to list. So this is cornice. You are mapping and configuration. So whenever we visited kneeling it is first goes to our project. You, Errol, than it redirect to R AP, Ural on hair app, Ural, connect with our views. Take a response and submitted Now views can be corrected with our mortals. That is our database as a less template. So help us to get all the data from our database and send a response in the form off template. So I hope this lecture was helpful for you to understand all the configuration and view part in the next lecture. Let us create a template folder and start working on that part also. So we can pick this project in a forward direction. I hope this letter was helpful. See you in the next one. 10. Templates: Hey, guys, welcome back In the previous lecture, we talked about a lot of stuff regarding he waddles view. But now it is time to talk about templates. So, as you know, we have divided our project into a different section. Eat section is referred as up. Now each up that is eat section will have its own template. So if I talk about the task pitch, it will have a different look. If I talk about our homepage, it will have a different look on. If I talk about our daily diary page, it will have a different law. So the first thing I need to talk about this, how to get started, So at this point of time, I'm just returning. It's true TB response here, so I want to render our template page for that. I need to create our estimate page first, so just create a new four look or less templates. And remember, it will always be called less templates because it is a general structure, as I have told the boat on. As we follow along with the course, you will realize that what name is important and what is not like this will always be called us and men. This will calm as APS. So this four level be called us template and head. I need to create three Fullers First will be ceases. Second will be JavaScript heard would be images. And then the fourth will be We can create all HTML finds. So let me create it. We're not going to add anything. Is this just a matter to explain you about the importance off template and the full of structure? Now, let me create html file on which will be rendering this. So let me create html file on. I would call it as fast or touched female, or I can call it as a to do list dot html whatever I want. So this looks fine here. I'm doing just a small thing. I would be using a joint tag on. Right. A welcome message. This looks fine. Now we have our HTML pay share, which is call s to do list. We can call it as task or whatever we want. So this is our template. Fuller inside are up now, head, I need to change minus ones. Spencer off. It shouldn t be response. I would be trying to render my template So I would be using render on. I need to pass my request and then my html pays. And then if I need to send any content at currently I'm just sending request as well as template on my content would be empty. So content would always be X is in the form off nationally. Let us keep it empty for now on understand our template part. So this looks fine Now we have seen this one it made on myself over and check. My task pays. Yeah, this worked fine on if I open my template again, check my esteem l page and change something here. Say this one. Come back here and re fish. You would say it's working fine. So now I'm able to connect with my templates as well as my html Be now Think it as a project we now eat. Apple have so 10 files that is related to them only. Like if I talk about despise these are illiterate toe only this particular up. I'm talk about templates. This is related to this particular around Now in future, if we create more apt, we need to perform similar step in you to create a template fuller for that particular around. Now here is a catch. There would be some common finds. Common friends like there would be some common images. There would be some common structure. So if I talk about amazon dot com, you will see there is some common structure, even if there are different application. Like if I open the gift card section, if I open the cellar section, you would see there is a common header, which is common for all, So there are different application, but this header is common. You would also realize the same with footer. So on the old three different taps off Amazon, there is something common, which is called less common Templars. The common files so Amazon logo would be common on all application. Even if I open amazon dot com at Seller page, its slogan page everything. This is the common part, so we have to create a common folder in the main directory and rest. Everything will be inside our APP directories. So if there is some template for this particular up, it is going to be inside this, But there will be a common fuller in which will be keeping the different common items. I hope to know everything is clear. We are moving with a great place with lot off knowledge. And I hope you are able to consume everything in the next lecture to stop more about this. See you in the next one. 11. Bootstrap: Hey, guys, welcome back on that. Couldn't leave a interesting point for our project. Now we have to start working on the template, so we need to work with its team. Ill and CS is as I talked before. We are the back and guys. That means Jang with something that handles the back and on. This is related to something about friend and but as a developer, as a Web developer or as a back and developer, you need to have certain knowledge about CSS, HTML and JavaScript, Northern expert. But you should have 13 knowledge. And for that 30 knowledge will be working towards this tempted. That is our to do list template. Now the first thing I need to do is I knew to start with bootstrap. All you have to do is just create a basic design in your mind. And then we are going to complete that. So this is our current website. Now, I have a basic thing in my mind that we will have ah header and then our logo are the name off our abbot decide. Then we will have so dealings off different up or different section off our website just visit this website. Get bootstrap dot com If you are already familiar with CSS html, you are good to go. You just need towards the section you will understand everything in very simple manner. The second thing is just click on The documentation on you will be redirected towards the introduction. I would say just go through this introduction. It is quite easy and you will understand a lot off thing. For now, the scope of this is started template on based on a beach. Now the starter template contains some javascript as well. A CSS on it also contain our body section. Israel is our idol. So at currently at this is a body section. This is our title on We are doing the single. If you visit this mean whom paid off Bootstrap, You will understand about that title thing. So if I am on the introduction part, they have our title regarding in corruption and then the site name. So we have to do something similar. So let me save this one on you fresh my page. You can see now we have a different phone style as a Lazar different title. So let me fix this small thing. So title should be littered somethingto do list and then our site name, so I would be using task made. Let me also change some content inside my body, so that would be quite useful. One status done. Let me refresh my page again. Yeah, that idol looks better now Now we have to do a lot more thing. Firstly, we need to talk about how to get this header. So just move on to Bootstrap. Just visit this component part and inside that you will get navigation by. It's just scroll down a bit and you will get on navigation bar on. This is what I require at this point of time so you can see the sample. This is the narrow bar that is currently available. Let me check out our different one. Yeah, this one looks fine. So all you have to lose. Just copy this one on based it. Here, let me do you fish this one now. This look fine. I have to do one small thing. Let me get this inside container. So what you have to do is just going to this layout setting So that container help us to set Leo all after Lou's creative class and inside that at this one. So all I have to do is create a day but with class container and then keep all the content inside that this look fine. Let me do you fresh This one again. Now our page will be improper for Mac off margin according to a boost ramp. The next thing is, I need to talk about these links and also editing this. So in the next lecture, we'll be talking about Ginger to as the less base template. And this is going to be super important regarding templates. So see you in the next one in which will be talking about ginger do as well as base extend . 12. Base Template and Jinja 2: Hey, guys, Welcome back. Now, in this lecture, we are going to complete two important things. That is our ginger, to which we have already started doing on expanding off template or playing with templates . So we'll be creating a base template on. We'll be using different pages in which will be extending that Pamplin. It is actually core less pamphlet in evidence. Okay, that's fine. But the important part is you need to understand about how we extend different pamphlets. The first thing I'm going to do us, I'm going to create multiple HTML pages so I can extend that does I can inherit different content on different pages. So what? I'm going to rest saying my templates, I'm going to add a contact us html page and also about the startext. Email for these two will be dummy pages. I'm just adding them so I can talk about different concepts. I will also replicate content from Clueless. And the next thing is, I will change this title. This looks fine to me. So we have our html ready. I also need to hard my, um als as well s view. What I'm going to do is I'm going to use contact. The 2nd 1 I would be using as about this looks fine. Remember these toward me. I'm just trying to show you some concept on how things are willing to work. Virginia, Israelis aren't emulating. I need to add views for both of them. Let me go Pee based them. And here I will change the textures. Welcome toe do list. Welcome to contact Page. Welcome to amount. This looks fine. Now we have three Ling's You have three views on. We have three different pages. Okay, Let me run myself. Hey, you can see we haven't got any enter. But if I jump onto my website, this is to list working. Fine. Let me open my contact. This works fine. Let me also open my about us. There's also work. Fine. But what if I knew toe edit this link? I need to do them on all the pages. But this is the same content. Why I'm doing on all the pages? There should be some method by which I can create a base file store every common tasks they're on there. I just need to keep the unique content, which is this on all three pages. Everything is common. Just this line is different. Why not create a single based file here? Even if I need to enter something here I need to do on all three files. And that's the important part I was talking about here. I need to add a new link for about us. I have to replicate this line on all three pages, which is a Lindy man will task on if you think off big application. This is currently just 23 pages we are talking about. Think about Amazon. Think about some 10 2050 100 page application. This type of manual dusk is actually Landy. So what we're going to do is we are going to create a base template. For that, we'll be creating a template. Fuller in our project finds that is our who project at currently this template Fuller belongs to our two rules. Stop. But we'll be creating a new template file inside our base. Fuller called us templates inside that we'll be storing all the formal HTML file images CSS and JavaScript. So just create a new for local template and this is going to store all the basest email file from which we can just inherited this common content. So let me create a based or that steam in here. No, What I can do is I can just copy this common content hair on if I need to enter something I would be reading in this based or HTML on. These three will just indebted that change, and that would be fine for me before that. We also need to do one small change. You have to visit the settings file and inside the setting file, we need to give that directory off our template, Fulla that does this template for love, which is our main base. Fuller. So I was searching about this and I got results from Stack overflow. My main motive was to bring out the users off stack overflow. So if at any point of time you feel that you are not able to achieve something that you have some problem or you are trying to do something innovative with the project, make sure you search some quit ease Some errors on questions on stack overflow. It is a good habit for you to follow stack overflow on a regular basis. It actually sharpen up your skin. Now all I have to do is just copy this one and basted here. It's nothing different. They are just giving the base directory on talking about the fuller name. So which is templates which we have already mentioned? Save this one that's done for our sitting sort by now. What I need to do us. I just need to take common content on based it here. And I need to extend my based on HTML here. So just to use this command khalib races, person date symbol, a news commanders extends, and then the file name. And once you have this simple habit, you can just use extend erratically on Arjun were extension with auto complete dark here, you just need to give me a storage demon. Now, this looks fine. And if I go to my to do list starts manager and it's working fine here. You see how a mistake with manager Let me fix. Here, Let me be fresh. This one you have done. Now let's talk about the second part of the game. So here, if I import my based on text email inside my contact page also, this is going to remain same for contact place. Also for my about a speech. So how I need to solve this problem. This can be done with Virginia, as I talked about at the earliest age. Gender help us to use fight on commands in HTML. So head whenever you have something unique or something different from your common file, you can replace this with Ginger. So just delete this because this will be title will be different for all the pages. You just need to delete it from the base file because it is not common. And here you need to add change a blow. So what is Ginger Block? So I would be using a block or title. Just give a name title. Now. This flock indicates that on based our estimate, there will be some content from these three pages which is named asked Idol. And if I want to insert something between these block, all have to do is just mentioned that content here. So I just need to mention block title there. Now, between this block title, everything I'm going to write will be replaced here. So just write me a title for this particular HTML piece, so that would be true List manager now I need to replicate. Same for my contact us and about us. This looks fine. Let me refresh this one. You can see this exchange on if I open my about us page, that worked fine. And if I open my contact? A speech? Yeah, this worked fine. Do Now let me fix these. You are because if I go here, this work fine. But if I now go to my contact us, it is going to give me a better. Or if I change any link, I need to replicate them on my base file. So for that we can use Ginger. Remember? On our Ural section, we gave unnamed toe each. You are this you are name is really important. As I said earlier now let us use our Jinya here. So all you have to do is just remove this one. Just use you are and then mention the name off that particle Ayuthaya. And the name is to rule ist I also need to repeat the same for Contactar space and saying will be followed with about us. Now the problem is sorted. We don't have to worry much. It is dynamic Every time we have to change anything, it would be directly with RG Wattles and news. Let me do you fish this one. Go to my about. Go to my contact us go to my to do list That look fine on If I change anything here, maybe I change it from about two about us. I don't have to change on based on text email, because it is dependent on this name. So now the link has changed, but we don't have to worry. So if I just refresh this one So if I go to my about us now you see it's working fine and we don't have to worry because this is dependent on this particular name. So that's how our template ing inheritance work. That's how our Jinya works on. It is really important for us to understand. Now. The second thing is body will be different for all the pages. For that, we'll be using another block off court. So here we'll be creating a bloke called Contain. So all you have to do is create a block, and that would solve Nordoff problem. So just copy this block and mentioned the content off this block into different HTML pages . Here, let me with my content which is welcome text corporatist on every bit earlier we were not getting any error with our welcome text because on views we have mentioned this but it is not going to be same on contact. We might have different key and value pairs on about us. We might have different key and value pair So this is going to get better if I change my view now. So if I refresh this one, you can see I'm not able to print anything here because their complex not exist for our about the space on. If I go to my to do list up, this is working Fine. So I have to fix this one. That is the reason I use content blow. I would be fine if I use contact next here on about next year. This looks fine. Let me on. This one will do my contact. A space about the space? Yeah, that's fine. So we have three pages in our template now. Also, we have a base template on. We have used changer to properly in our application. So we are going good with that project that's done for our first off. That means we are ready with our base. And now we can tackle Django very well. The next thing we have to do is let's start building our application properly with databases. We'll be talking about mortals. Databases water him a lot more thing because we have cleared one good small bod, which is accepting requests. You are mapping, controlling views, controlling templates on working with the flu. That's all for this video. In the next video, let us talk about mortals on data. Misses. Thank you for falling this lecture. See you in the next one. 13. Static Folder and Improving Website Look: Hey, guys, welcome back now, Before moving forward to our mortals migration databases as well as Adam Addiction, we need to talk about something really important. So we'll be talking about two points in this lecture. The 1st 1 will be our static fuller, which contain our CSS JavaScript as well as images. The second will be our current website. So So if you look at our website currently, I want this to be a more attractive one, so you'll be doing small changes. What I'm going to do is I'm going to use this particular navigation. But I was surfing throughout the bootstrap and thought this would be a nine slope. So we'll be changing on navigation bar. And the second thing is, we'll be using static folder. So earlier I talked about damn plates. I talked about all the HTML files, but hair will be using a separate static folder. I'm going to delete these three folder that is our CSS images and JavaScript here on I will be creating a different static fuller on inside that static fuller. I'm going to stole my CSS images and javascript. Why? Because it is a good practice, and I thought this is the right lecture to talk about this, to use any static files. We knew to mention that in a second Fuller, we'll be doing that in a minute. But before that, we need to talk about what we are going to change in this page. So we'll be changing our team from light to dark. And the 2nd 1 is, I'm going to use a local for that. We'll be using a static image. That's where we need our static. Fuller. I hope you got that point. So at us, just open your be stored HTML and change your team from light to dark. All you have to do is change your light on your doctor. Let me check this one. This looks fine. And now I need to use the image here. Before that, I need to get a logo on. I have already created that I would be adding that in the resource section on. Now I need to store that logo in our directory. So for that, I need to create a directory. So let me close all these and create a static folder on your root directory. Remember your root directory, which were followed for template. Once you're static, Fuller is created. Now create all the three Fuller's, your JavaScript, your CSS and images because all the files which we containing these three folders would be considered as static finds. Once that is done, now you need to register the static folder. In the sense you need to tell our Django Project in the Settings File that this is my static folder. This folder is going to store all my static finds. All you have to do is just go to a project folder, go inside the sitting on at the last. You just need to mention the directory. All you have to do is just mentioned a directory. Your static files underscore the A. R s. That is your directory. And then you have to pass a list on inside the days you have to provide your particular directory name. We have followed the same while our template fuller, solely after this user who s got about your join and then you're based directory and then the folder name in which you are stored in your static. Fine. Remember, if you're scoring a static file inside templates dis mentioned employees in If you're using a different fuller that a static fuller just mentioned static for land. Different programming teams follows different culture, so sometimes follows all the file inside template folder and some teams divided into two part. That is all the HTML files inside template and all the images CSS and JavaScript inside our static full. Now it's really reforming that. So all you have to do is just mentioned this and save your fight. That's done. Now, one thing I need to do is I just need to be lead these three folder. This looks fine. Now I need toe my image. That is my logo for my website inside my image. Bolnar. So I need to get our local for this. Let me copy my local inside that folder. That's done. Now you can see that we have our Lou. Now this looks fine. The next thing I need to do is I need to change my base toward HTML. So I need to remove my website name and add our image tag here. That does. I m g. And then I need to pass my image name. So just use your I am ji attack on hair. I need to pass my image. Ling, for that we just statically need to use our ginger. Come on, All you have to do is just use your college braces for city each static and then inside that we need to pass our images slash And then the image name that is our local or PNG. Once that is done, let me check on website. So we got an error because you forgot to load our static. So what is this load means So whenever we are going to use the static come on. Any time in our HTML file, we need to mention static load at the top off. Fine. So early afternoons Just used load that is this command on. We are going toe. Let me do you fish this one? Yeah, this looks fine. So now we have our website logo and all our links are working. Let me do one small change. Also, let me use my to do list ling for our home currently later really pretending that So I hope now you understand about the static folder. So all you have to do is just create a static food in the root directory create three full is that a CSS images JavaScript. Then they distort this four day into sending start by one status. Done. Just scoot. Your base directory mentioned the static back wherever you want to use your CSS, JavaScript or images. And then also don't forget to mention your Lord. Come on. So this would be fine. And now you are able to use any static files with your project. I hope this lecture was helpful. See you in the next one. 14. Admin Panel: Hey, guys, welcome to a new section in the section. We'll be starting with mortals Data ways, Admin on migration Before moving forward with anything else, Let us start with our admin section. So by now you have seen this ad manual many times. If I visit my adamant section here, you might see it asked what I user name and password for that we need to register as a user in our wagon panel. So no use there can be off different time. It can be a super user. That means a super user have all the powers regarding our application, or it can be a normal user that will have a limited power. So let us first register are super user. That means someone who can control complete application with one user name and one password . Just drop us over a news, a command bite on managed or by creating super user. Now, this will help us to register a new user which have all the power that he is the admiral. Develop sane, select a user name and password for your bridging. I would be using shoe bomb. You can use admin. You can use your name or anything else. Then you need to provide our email address. Since you are working on a demo project, you can give this plan. If you're working on a real project to provide are valid email interests one status that you need to provide a password. Make sure you provide a strong password. Since Django has their own validation, you need to have a police eight character password that combination off gnome arsenal for bad. So hair. If I try a B c d 1234 you might see an error that the password is too common. So that's how John will use its own valuation. If you want to skip this validation, just use why. So we have successfully created are forced valued, user Now a little slogan. But before that, let me run my server. Now let us Logan and check out our admin section. My user name is Obama, and then password is a B C. D. One. Duty four. Here you can see I currently have two feels by default because if you remember, we have done 13 migration at the starting off the project. That is during our first run. So if you check user we currently have shown, and if I go back, you can see there is a group plan. So I currently these other two feels and are adamant section In the next lecture, we'll be talking about our own feels that is, without to do up. We are going to register certain mortals that is database fields. So you'll be doing that in the next lecture. I hope this lecture was helpful. And now you can access your own admin section in the next sector. Let us write our own database queries. That is our own Morgan. So see you in the next one and let us get started without mortals for are truly stop. 15. Models: Welcome back. Now in this lecture will be knighted mortals for our project. Before writing our model, we need to visualize our project in terms off data bees. So what type of data and how West data you need to store in the databases. So for our to do list application, we are either going to ride our tasks. And if that task is done or not so suppose if I talk about a tourist application for me, so my task would be to create lectures. My task would be to edit lectures. My task would be toe upload lectures. So these are my treat us. And then I have an option that it is done or not. So that can be a tick mark. Or that can be a Tom has done on order. So we need to store that. So if it is done, we are going to say that's true. And if it is not done, we are going to see it as false, sir. Currently what? I required my databases to fields. The 1st 1 would be to store my task, and the 2nd 1 would be to store that after task is done or not. now I hope we're able to understand this and can visualize this. Let us write our modern. So to write any mortal only afterwards initiate a class and then give a nimble Morgan I would be calling it asked to do list our task list and then inside that you need to pass Mortal start morning one status. And now you have to mention these two fields which we're talking about. So when is we need to store task So you after this use task and then you need to mention your borders dot its data time. So I would be using car field. That is, they know. I need to mention what is the maximum lend I need toe except for us. Like if you're creating a user name feel we might accept 15 to 20 characters. If you're creating a password, feel we might accept minimum and maximum as tardy. So in the same manner we need to accept the maximum land so it can be a approx 300 to 500 character. So all you have to do is just mentioned Max lint and then the character that's done. So that is our first feel now The second is if the task is done or not done so you can use . The woman has done so. We can use it as bullion. If Dennis Falls, that means task is northern. And if Janice to that means task is done, you need to follow the same former mortals dot bullion feel. And then we need to provide a default when you why bullion feels we are going to use to and forms here. We need to provide a default when you because once we add at us, it should be northern by deformed. That means Dennis Falls. That's done. So we have created our first Morton. Now, after creating your model, you have to talk about migration because this is currently only in our fine. We need to do migration to get this field in our database, so migration would before over to stem. First, we need to run our command, make migration and then we need to run. Come on, my dreams. We'll be falling. Both documents in the next lecture 16. Database Migrations: nine Disliked Teller. Just talk about migration. So as I told you, you have to follow through step. The 1st 1 is make migration and the 2nd 1 is my great. So let me run my first command and then talk about it. So all you have to do is just use the command by tone managed by make migration. Now here you can see it created are not by file inside my migration folder Let me open that one and you can see this is the good in generated with a single command that is make migration. So they have three fields in the database. That is a idee task and done so why I need ideas used to provide a uniqueness toe everything. So if I create any to us, we can connect with that particular tasks. We can search for that particular tasked with the idea because I d would be unique. So I created us the court course. I created a task and it course I created a task upload course. So if I want to refer any off them, I can use its I really, which is unique and created by Jang would sense on it is or do created and it is auto increments. So whenever I'm going to add new dusk, it would automatically increase the number. And also in this primary key, that means that is unique. And I can direct clear for to it the next to fields our task and done so instead of writing this whole cord, we just write are mortals and one that come on. The second step is we need to apply the score. The first step was used to create this file. The skin step is to apply this particular core with a jungle project. So all you have to run the commander spite own, managed by my great That's done. Now we have this field in our data bees. So let me run my server and open my Jang Weidmann panel. You can see we created our migration. We also applied all the changes. But still, we don't have any change in our admin section because we need to register these feel with this particular find, that is admin, not by now. Here, you need to register all your models that you want to showcase on your admin section. So maybe if this model is not important. You can hide it. If you want to showcase it, you need to register here. Now you might be thinking how to register. So it is a two step process. All you have to do is just import your mortal which you want to register. And the 2nd 1 is add the simple registration line. So let me import my model. So from my current directory than mortals import cast list. That means this is my current directory on. I need to import this particle if I What? If you want to mention the specific app name. So all you have to do is from up name dot models and then import dust nous and that would be fine. Do so Let me add my court. That is admin dot side don't register and then you need to pass your modeling so that would be classless. That's done. Let me check if myself what is running fine on. Let me finish this one. No, you can see we have our task list Name here on Let me out Food Ask later on, we'll be creating ah, front and panel toward these tasks for let me type my first task that is to record lecture . And if this task is done or not, it's not done so by default of this force and let me save this one. Let me out! Our second ask ended lectures and save this one. Now here you can see it's currently appearing as object that is task list object. Why? Because if you remember, our model is a class and every element which we are going to register will be stored as objects. So we have a solution for that. All you have to do is define str class and then return the name that you want. So let me they don't ask name itself. So all you have to do is you self dot ask. This looks fine. Since we are not editing anything from database, we don't need to run make migration and my great again. If you're willing to change anything with them, we need to run make migration again, but that currently we're not changing them. So that's fine. So all you have to do is just be fresher Admin section on. You can see this is our task one and this is our task to this looks fine. The next thing I want to talk about this this data time. So there can be different data type that you want to use. So, Django, mortal as bindle. Far greater lie. So they have email. They have date and time. They have characters. That is for Tex. They have for numbers they have for decimals, for floating point and all other things. What is the advantage off these little dive? They have sudden filters. So if I'm using our data time for email, it will have a certain filter automatically. And I don't have to worry much if I'm using a password field. I don't have to worry much regarding the minimum land. Maximum land, different conditions like you need small alphabet, bigger for bed numbers, special symbol and all other thing would be taken care by General. So that is the use or gator knife with mortals in jungle. So I hope by now you understand about these data lives do check them out. And it would be really useful. And I also hope by now you understand these objects. Let me. I did the name and add something here. Hey, you can see that I'm able to see the changes on. If I go back on, let me change few things there. Let me also add for done. Since this is a bullion feel, I need to convert it into a string. If I did, you finish this one. You can see this is forced business walls. And if I change anyone off them, this task is done. So it is true. So that's how we are going to play with our models. I hope this lecture was handful. Now you understand about writing models, migration and also admin Fine. In the next lecture, just continue playing with our models and also fetch all the data and show on our to do list speech. Thank you for forming this lecture. See you in the next one. 17. Fetch Data From Database: Welcome back, guys. Now in this lecture via going to fetch all the data from our database and display as our table on our to do list section the first thing I want to do this I need to add more data because currently there is only two objects. Let me here two or three more. So here I have added a few simple data and currently all our fault except one. The next thing I want to do this. I want to write a view that dysfunction through, fetch data and display here. So we'll be arresting two fights. The 1st 1 will be view. So if you're going to fetch all the data here, then passed with contexts and then honor html file, we are going to display that data are currently you're displaying are welcome text. So let me start working on this. The first thing I need to do is I need to talk about how to fetch data. So whenever you want to fetch data from a model, the first thing is you need to import that model. And then the second thing is select. Whatever the country do you want from that mortal and store in a very well. Let us do that from two really stab dot mortals. I need to import my task list. So, Doctor, now I need to use a variable. I would be calling it as all tasks. And inside that I would take all the objects off this class. So all the object means I would be taking all the elements that is all might ask. So you need to use mortal door objects dot on now. This will help us to fetch all the data inside this. So now this is an object, and this will have all the elements. Let me do one small thing. Let me remove this one. This context, remember this is going to be list off object. Although objects from our detainees what I can do is I can pass the statically as my dish near here. So one after the other issues my keep and repair. So this is my key on. This would be my value. So I can use this list as my additionally now on this would store everything on insert off My welcome text lets me use my dictionary hair and then do you fresh my own beach here you can see I got a desert and it is a query said as I told you, it is going to store all the data which we have as an object. Let me remove this. H one tag on. Refresh this again. So this is our query set with all our object. The next thing I want to do is I want to loop inside. All the query said that is I want to loop inside this all objects and fetch one by one. So I would be fetched this object number one and get details Often I would fetch inside this object number two and then get details off it. That means I need to go inside of you. We'll be doing that in the next lecture. So for now, I hope you understand our logic. What I did is I just important, are mortal. And then hair. I fetch all the content inside my old US variable, which is a list. So I passed all the content inside a key and value pair. And now this key contain all my task that does my complete list. So whenever we are going to print this one, we are going to get this list. Let me stop this lecture hair. And in the next lecture, let me work on a loop and fetch all the data and printed on our home beach. See you in the next one. 18. Displaying Data On Templates: Hey, guys will come back now in this lecture, we're going to look through each of the object off our data. So we have extracted the leader. Now we have a result with all the objects that we required. Now I need to go through each of them and then extract data before that. I just need to write a book condition I would be using for loop. So just remove this one. My hair. What I'm going to do is I'm going to create a for loop on with the help of for Luke, I'm going to select each object inside my old task. Inside this group, I can access all the details off that object before moving forward letters also end this four loop and then start walking inside this room. Now what I'm going through with objectives, I can access all the data which is inside them. So I'm going to select each object. For example, if I have selected the first object, I can exist all the data inside this first object. So what would be the data inside that first object? It would be It's idee its task on the value that it's done or northern. That would be true and falls. So don't print that. I just need to use Jinya again. I inherited this object. All you need to do is what will you need to print. So let me bring the task so it would be printing task each time. Let me also add a brake line on. Let me refresh this one. So here you can see I'm all my desk and cities. Let me do one small thing along with Tusk signal. Also see if it's done or not done. If I refresh this one again, you can see I'm getting the value so out currently, I'm just printing them on the speech without any systematic condition. So now I'm able to fetch my data. All I'm doing is using a for loop, selecting each object from on my task on with this object, I'm selecting what value I need to print. I hope this was understandable. Now what? I'm going to do this. I'm going to use table from Bootstrap. So it would be quite easy for us to make it systematic so you can just visit this content and then table or if you're not able to find anything on would stop. Just use the search option on right table. It would be quite helpful for you now select their design. But you want I would be perfect with this dark and light team. Let me explain your table for a while. If you are already familiar with HTML and CSS is you can just statically go with the flow. If you are new to HTML and CSS is just spend a few moments. So what we are going to do is we are going to create a table on inside the table. We are going to divide everything into rules and Cornum. So this would be a first stroke which is not going to change. That means it would be starting. Why? Because we're not going to fetching in data for this row from databases. So we are going to replace this through with task name and the task is done on or done believed option and something like this is a heading, which is going to remain constant. The next thing will be all our task from our database. So we are going to face that with help off Luke and print inside that. So what I'm going to do this. I'm going to create a table, and then I'm going to use this through on then this column for heading. And then this column would get all the data with the help off Alu. So let us do that on. Don't worry. This is the task off friend and guy. You would get help if you're working in any company or if you're working as a internal fresher, I would be recommending you just get family a bit with friending. If you are are back and I don't worry, we just need to do some simple task. So let us copy the state out here. Let me delete this content for now and just with my table content. Now, this is the data via court. What? I need, Lewis. I just need to get the constant rule that is our first row outside of this. And here I want my first column as task. That would be task name. Second would be if they are, task is done on northern. That would be the end adoption. So if I need to edit this task that would be there on the 4th 1 will be delete option. This looks fine. Now we have started with a loop, so I don't need this one, actually, since it would be repeated by Liu. So I also need this party to be out. So it would repeat only the rope part. That's fine. I hope you're not confused. This world, the formatting. Now let me do you fish. This one you have this looks fine. I need to give a bit space. So what actually happened at current, Please, We have created this role. Now here we are going to print our task and then we are going to show that ask is done or Dordogne. Then we'll have added option and then they need option. But most important thing, you might be seeing this result for the five time because we have currently five task in our task list on we're not trending in it. Us. We're just going through this room. So what actually happened is we started with the first flu printed this content we started with the second group printed on euro started with the third who printed on Euro on its warning on. So let me change a bit on hair instead of that let me print out my task. So simply use your Jinja and then select the object. And don't ask. Let me check if this is going fine. Yep, That's fine. Let me also do this for our done in northern, and then they need in it. It also just remove this heading option. So just remove this through and change it through PD. That would be fine. I don't want this to be highlighter. Yeah, this is fine. Now we have our task, and it is showing that if their task is done on Northern on also we have, ah, adoption as well as we have a deal. Adoption. But these are not working. We'll be making them work in the for the lectures. Now, The next thing is, if you want to change the stable anytime. Just used are different class for this particular table. So you can also add this class for border. Yep. This is much better. Yeah. From now we are going to play with this. Just add a new line, a pair and then continue from the next lecture. It may have a break for no later we'll be changing with other classes. Disrupts fine And in the further letters, let us start walking on all the other room. Anything. Thank you for falling this lecture. See you in the next one. 19. Adding Condition On Data: Welcome back Now in this lecture we are going to lose some quick task. The 1st 1 is we are going to check if the contenders only leader. So if it is true so we should write down instead of this True on the row, color should be changed. So we need to use if condition That means if the task is done we're going to change the color off this rope. An effort is not done. Then we are going to use the same sitting. The second thing is, if the task is done so we are going to write down else we are going to write nor done so. Let us do that. It would be quite simple. We just need to add our if statement So all you have to do this before looping toe this row . You need to check if the task is done or not done So if the subject is true, that is If this dinos troop What? We're going through us. We are going to change in this one and then let me out of this condition here. If the task is northern, then we are going to show something else. So let me mark as Let me see if this works. But before that, don't forget toe and your If, after that we're going to add a new class to change the color of this room. So if I really fresh this one, you can see we are able to see if this is completed. This is not completed. Let me jean the regular here. If I browse to my bootstrap, you will say I have different options. Let me try all the sexists that's working fine. So that us, which is completed, would be shown in the screen option on all the other task would be shown in the normal color. Let me do one more thing. Let me test this out and mark one other item has done. Yeah, this is working Fine. So these are the pending items were going to do a lot more changes. We are going to do change this one also, but at currently I hope now you are able to understand this part. Now, in the next lecture, let us talk about how to add a new task. Are currently we are adding task and editing them from the admin panel. I warned that Toby added from a friend. So in the next lecture, let us start working on that 20. Adding Form and Accepting Input: Welcome back. Now, this lecture is going to be quite long in this lecture. First, we're going to add a form that means we are going to take input from the user regarding task, and then we will have a summit button. So once the user submit that task, we are going to save the task in our database and then faced elitist, ask and add inside our deal that this looks quite simple. Let us rewrite the task into two parts. First we need to add friend and feels that would be our task. And then the second would be our back and fields. So let us work on that for the first spark near the search about the forms. Let me quickly copy the first form on start making Lotina's here. I would be adding my form at the top, basted here and then it it this one also let me add a brake line. And then now let me remove these two lives. I just need to keep tell my task line and also remove this small heading. But our current A This is dedicated to email feel. Let me jean this one. Hell it meeting this to a task. And also, I need to change this type and move unnecessary dogs at a place cooler Just removed the submit to act. Ask and they should be fine. Let me finish my Broza here. You can see this looks fine. I just need to write my task and click on add. So this is the front end part. I can distance Cicely will. Actually, that would be fine. I hope this looks better. Yep. So if we need to add any dust, all I have to do it the slicker, right, The task. And click on an task. This looks fine as a friend and design. Now you could talk about back and which is our main important thing. So here we are dealing with form, so I need to create a formed or pie inside my app. So all you have to do is just right click and click form. Not by now. This file is really important whenever we are dealing with any form. So if you're taking any import that is related to our database, we can just write short codes on connect with our DWS. The second thing is, we need to edit this form tag also. So first, let me write some content hair and then start falling the next because this is going to get in sequence and we need to connect. Abuse are formed, or why are you are else and also our form down. So let's start with our form north by so inside our phone nor pie, the first thing you need to do is important are mortal as well as forms. So from jangle import forms and from our models, I just need to import my task list. Once that is done, I knew to mention a class. Now the class would talk about which mortal I'm connecting. That is which database I'm connecting. So that would be my classless. The second thing is, it would talk about which few lime editing. So I would be editing my task, feel as a less my done and not done feeling. So let me mention a class here you need to import your forms and then your mortal form, and inside that you need to mention your meta. It should contain two variables your models and your field. So here you just need to mention your mortal that is your date of this and then the fields off that morning, so that would be my task and that done in Northern. So this looks fine. Now we have created our formed or pipe once are formed or bias created. I need to shift to my view because all the data in this file is getting from view. So I need to edit that on before doing anything else. Let me import my former pie and remember, you can name it as form, start fire and formed or buy whatever you want. You just need to mention everything in a sequence. So if you want form, start by just mention forms here on if it this form, not by this mention form. So if you want to change it to forms, that would be totally fine. Just mentioned everything with the help of form sort fire. So let me just make a dance forms on. That would be perfectly fine. Just make sure you are using the correct name on the board, said. Now we are a good stage to talk about our views as a less our to do list that steam and file the first thing I need to do is I need to take this data from this particle a file. That is, if I use a visit, the speech and doesn't data click on at task. It goes to our you are. And then from Ural, it goes to our view on in this view, we need to get that particular data before doing anything else. Let me talk about get and post matter. So whenever we load any page in which we are going to get only information, we have get requests. But whenever we're sending some data into our database from our page, we are going to use post requests. So we're going to load the speech on when it doesn't get request. That means you're not sending any data database were just floating the stable. But when we have a post request, that means we're sending some data. That means we're adding a new task. So you have to define host request as we're sending some data into database and get request , as we had just loading someday down, that would required simple for you to understand. So here, whenever I'm going to lure my view, I need to check. If it doesn't get Request a post request. So if it is a get request, that means I'm just loading this data and printing out my content. But different is a post request. That means I need to get all the data, which is a red hair, and then save it into my data bases and then know the speech. This might be quite confusing, but this is going to be tricky as a less interesting. So let's edit art form and let me out of metal there. Just call it mattered as opposed. And we also need to use the CSR left open, which is why Jang go on. Without that, any form with Post request is not going toe. It doesn't security. So if you're sending did along with this form, it need to be secure. That is why we are going to use CSR left open. Now this looks fine. Also, let me are our name for my input p. So I would call it as task so I can recognize my input field with this particular name. So we have done three changes our post matter CS out of broken and then name. Now, whenever I'm going to hurt us lit at last button. It is going to connect with my view, so it would correct the same view. That means that is going to connect with this part club. You on here? I need to check if the request is supposed to get if it doesn't get request, that means I'm just refreshing this. I'm not adding our data. But if it is a post request, that means I have added some data in this particular field on. I have played this postpartum. That is my password. So her first. I need to check if my request is posed. Forget the request disposed. I'm going to do something else. We'll be doing the same thing that we are currently doing. So let us see what we are going to do. If the request is supposed, that means I need to get that content. So discontent. I need to get discontent on storing my data bees. So that means I need to talk to my form because the content is connected with my phone. So all I have to do is creative variable. And then I need to use my phone. That is my task warm on here inside this task form. I just need to pass my post Request or none of the field is empty. That would be checked by a form itself. The next thing is, we need to check if you are getting a validator or not. So for that, all you have to do is use if condition on with our form that is this particular form. I just need to use a method called Israeli. Now this is valued. I just need to save this form. If this is not valid, it is going to exit automatically for this. Looks fine. What? I'm going through. Those epithets aborts request. I connect with my form. Check if the form is valid and then save it. Okay. But we are not rendering or returning anything. We have saved our contain. But what next? So I just need to load up is what I can do is I can relate it to our to do lists page. So let me also import my redirect. I hope this works The freshman toss. What's my lectures? Our task? Yeah, that is I need I hope now you understand about this. If not, let me give you a brief So what we have created first we created a form class, imported everything what is required and mention my model on which I'm going to edit and also the field on which I'm going to end it. The second thing. I did this with the form. I changed the method. I added us yes, out of Tokcan and then gave a name to my input field. Once that is done, I jump back to my view. And then Hurtic, if I'm going to get a post request again, Post means I'm sending our data. This one was the post and get means I'm receiving their leader. So when the request is supposed, that means I'm sending the data. So I just checked on my view. So if I'm getting a post request, I just need to connect with my form and then submit all the data check if everything is valid and then save. And once everything is saved, I just need to return to my to do list else. If it doesn't get request, that means it's a normal request. So I'm just collecting all the data and Brendan care that's done on. I hope this was in full from the next sector. Let us give a pop up whenever we are contain. So it would be nice for us to get notification. So in the next bachelor to stalk about that. Andi, I hope this lecture was handful. See you in the next one. 21. Adding Messages and Alert Option: Hey, guys, welcome back to the previous lecture. Be implemented. The functionality toe. Add new task in our application In this lecture will be talking about messages. So whenever we tried toe our new task at the task or delete any task we should get a pop up , that is, we should get alert off message. We'll be talking about that now. Hair. If I come back to my view once I save my form, I should are a message that my task has been added in the application or in the list successfully. So all after this first, I need to import my message class. So all you have to do is from Django Con Trib import messages. And here you need to our messages dot success. And then you need to pass through barometer. The 1st 1 will be a request, and the 2nd 1 will be your message. So I would add a message New DOS guided. This looks fine. Now here. If I'm going to render do any other page, I can just exist. Dismisses statically. So all after the is on my doula speech, I just need to access that message. So let us spring that message is the top. So that would be above my form on. I would be selecting our message type. So before that, let me print a sample message to access all the messages I need to use a for loop. So I will be selecting each message in my messages. Don't forget to use your and for who? And you look on, then print eat message individually. Let me try this out here. I've added a new task and this is the message that I've got and it's working perfectly fine . All after the us just print this message with on alert. So there are different dollar tax available. You can select anyone off them. Ah blue, Would we find? Or maybe Green? Let me set this blue one. That is regarding that in for one copy. This one on on after Lewis just based it in between. Here, let me just replace this middle content with my message on if I go here, go to my to do list at a new dusk here. I got a new notification. This looks fine, but how to remove this one? So I should get across Britain or something like clothes or remove something to remove this notification that we will be doing in the next lecture. I hope this lecture was information for you to understand the spot. This was quite short and easy. All you have to do is in both your messages. Add a message method after you verify and save your form. And then all you have to do is desperate this one before ending this lecture. What we have to do is we also need toe are a restriction that is a filter. So whenever I'm going to load the space even on get method, this is going to be checked. So I should use if condition that if there is any message, I should read discontent. Otherwise I should just skip this one. So what I can do is I can add a if condition in check if there is any messages available or not. So whenever I do even get request, this space actually lured discontent behind the scene. All we can do is R A f condition and check if this message is available or not. Now this looks fine. Now, whenever we are going to load this page, they will check if there is any value inside this message or not. If there is any value, they are going to run the slough. If not, they're going to skip this one. Also, seem we should fall over this all task. If there is unevenly with all task, I should go inside this loop. Otherwise I can skip that. So are currently we have a piece 56 Task spent us. But what if there is no doubt scatter so we can just add a condition that if there is no task, just skip this condition, So let me out of my condition for all dusk. Now, this looks fine. So whenever we are going to load this page, if this is not available, that means if there is no task every label we are going to skip this content on. This is the best option to actually validate your content. I hope this letter was helpful in the next lecture. Allah does our our clothes option for a notification. Thank you for falling this lecture. See you in the next one 22. Close Option On Alert: Hey, guys will come back to a quick lecture in this lecture. We are going to just do a simple task. We're going toe add across Britain. That is a close option for our message. Or you can call it as notification. So all you have to do is just jump onto bootstrap on search for alerts. Just scroll down a bit. You will get this option. So earlier, we were checking about different alert option That is alert variation. If you scroll down a bit, you will also get alert. Variation with across option on. This works for perfectly fine. So all you have to do is just off your message. You just need to cooperate this button and let me out this part in my code, remember, toe are desperate and before your div let me set inundation on this looks fine. I also need to add a class here. Just go up in this class. Yep, that's done. So all you have to do is just add the blues button and then you need to add this class. This looks fine. Let me our demo content hair and check if I can dismiss my notification or not And if I add new Basque? Yep. I got my notification. That is alert. And if I dismissed this one? Yeah, this is working fine. And that's all for this lecture. I hope this was easy from them. Further electors, let us talk about this. Delete button. This edit button on also how toe undo this. That means if we have completed any task, I just want to make this not completed. You also need to talk about this. So let us focus on this delete and added functionality and then improve my application. That's all for this lecture. See you in the next one. 23. Understanding CSS and Bootstrap: Hey, guys, Welcome back now, before moving forward without other functionalities, I want to talk about a bit Regarding RCs is in bootstrap. To be a good back and developer, you need small knowledge that a certain knowledge off CS is on HTML, which is quite important. So here in this lecture will be talking about the concept called Screened awaiting. So if you have a friend in the leper and have basic knowledge regarding bootstrap, this is a good lecture for you. You can just go with the flow, and if you're new to bootstrap, you will get some basic knowledge. So whenever we talk about our screen with bootstrap, we can divide our screen into 12 parts. And now, if I need to set any digits on my screen, Aiken just set them according to that, well, parts so heavy. If I talk about this input fear it is currently taking complete will parts. So what I can do is I can keep everything in a single No, that means in one row I can divide a screen into four part than six part, then do part, So that will be equal suit. Well, what a Force four part I can utilise a label. Then I can use this input field and then are passed Britain. So let us do that and understand what I'm talking about. Let me jump onto my court at currently. What I'm doing is I'm taking this stuff section, creating our input field and then adding a button. Let me change this one. So what? I'm going to rule us. I'm just going to remove the state feel now we have just this input in Britain. So here all I need to Lewis, I just need to convert this form into a single low. So here I would be adding a class called Roe. Now every feel in this form would be inside a single. Oh, that means thes board field will be on the same line. The next thing I want to do is I want to give this input feel only six gap. That means only 50% off my screen. So all you have to just use the class column large six. And here I will be following the same handle. Provide only two spaces. That means I will be giving two parts out off oil. Now, let me guess this one. So this is the current result that we are achieving. We can do one more small Jane. What if I r a label before my input field? So let me do that. All after Lewis Adderley will feel inside this label feel Let me ask for today's task and let us also provide our bootstrap class that s column large and four. That means it will dig approx 1/3 off our screen. Let me finish my dessert. Yep. This is my result. I will change this text later. Let me remove this one. For now, we will plan something and other new decks. The next thing is, if you want to just remove this room on If you don't want this raw all, you have to do it. Just remove this Dee. Hey! And it would solve all your problems. So some off you might not like the store. You just need to remove the head from the table. And you're good to go for. These are all your task and you don't need any headache. But if you don't have any problem, you can just utilize it now. This was a small change, but I really wanted to talk about screened orientation. I hope this letter was helpful for someone who is not from CSS or Bootstrap Bagram in the next. Taylor does continue our application and talk about functionality regarding delete function . 24. Deleting Queryset Item: Hey, guys, Welcome back Now in this lecture will be talking about delete functionality. I hope I know you really understand the importance off you are. So as you know, everything in our application is dependent on you are in. So if I open this contact a space, my application read this contact, connect with a proper view, passed on all the information and then you return everything with a template. I hope you have heard this so many times from me throughout the course. Now, in this lecture, let us utilize why I was talking so much off this information previously if I want to delete any off the object, that means if I want to delete any off the task, I need to get a reference I d. So if I talk about this subject, this must be I d number one. This must be I d number two or three. So every object here is referred to some I d. Let me bring their i d for a while so we can take this example properly. And I had a friend. You first This one you can see every object has an i d. So if you see nineties missing because I've deleted one from my database. So if I want to delete this one, I need to write a view that the league record number one That is my object number. My Primerica Lee. Item number one. So what? We are going to do this when we click on this silly, but we are going to a new you are. That would be called as D league and then I d one and now are you are is going to read this one on it would connect with our delete view and pass on the saidi on inside our view will be deleting this object on redirect to our home page. I hope this is quite simple. Let us try this one. So all after this just opened my UL at first. And here I want to add a delete part along with my i d. So just delete. And after delete we are going to pass an I d. So that would be our task i d So if you want to capture any i d from the link all you have to utilizes this simple thing. So here, if I want to delete toe what? I'm going brutalize us. My You are ill. And then this would be my task. I d if I want to delete 10. So this would be my task. I d Now, once we map this, all I have to do is just go to my daily task view. So I would be using it as delete. Underscore Task on would be using Same for my name now one status. Don't let me jump onto my view on here. I need to write a function called delete task. I would be taking a request now. Head, I would be taking my second perimeter, which will be my task I d. So all you have to do is to Skopje this one and take it there. That is done. Now remember, we can actually connect with our database from you. So like, if I want to access anything I was trying to do this If I want to add anything, I was trying to do this so her If I want to delete anything, all I have to do it just first Select might ask and then use delete Common. So let me select my DOS. I would be taking a variable s task and then I would be using my classless mortal. And instead of selecting all I would be selecting one particular object. That is my task idea object. So if my toskay distin, that means I'm going to delete only that particular task. So I would be using get and inside that I need to pass my Primerica That is my PK and this past your task I t now head but us which we have selected is off primary care which we have passed on and you are in the next thing is all You have to rest with that particular task. You just need to use delete function And now you're item Misty Leader Once a writer, Mr Leader, all you have to do is just returned to your to really speech. This looks fine. Let me jump onto my to rule ist application. Currently, we don't have link. Let me try this one with the help off, you are so just use delete. And if I want to delete number three, let me try this one present. Yeah, that's done. So what we have actually done is mapped the particle a length that is to leave and our task I d pass every information to our view. Then our view selected that particular task I d And then we just deleted that on redirected to our tool a space that was quite easy. Now, all after Lewis, Just add a tripling that this creator link for this burden. So if I click on this one, it would be redirected towards our chili and then slash one. If I click on this one, it would before item number two and so on. Let me jump onto my HTML file on here with this delete, I just want to add extra fling. Now remember, to use your dynamic you are in. So if you jump onto our base, you are ill. And if you remember something like this, you are good to go. You are following your jungle practice here. You need tobe fastest. Any task now? This would take you to slash Tilly. I also need to pass the I d. So all your tourist just pass on this object and I need that means you first this one and see if it is working or not. So here you can see I got both the links. Let me delete this one. Yup. It's working fine. Now. I also need to add this for the 2nd 1 Don't forget to add a closing tag. That's done. Let me do you fresh. My browser? Yep, I got the links. Let me delete this It then. Yeah, this is working fine. So I hope now you are able to understand this Delete functionality. Now, one thing we can do in future is instruct this delete link. We can change it with a button. Are a small icon for deleting this task. So all we have to do is just replace this with a button for a Nikon image. I hope this lecture was helpful. And now you are able to understand importance off you are again and how to delete that. Asked in the next lecture, let us talk about how do any time task So see you in the next one 25. Editing Queryset Item - 1: Hey, guys, welcome back. Now we're at a really important point according to course perspective. Also, according to Django concept perspective, now in this lecture will be talking about how to edit any task that they have already seen . That is editing an object. So if I talk about one small thing, as I have told you at the earlier state, also, when we add any task when we edit any task or update any task, that means we are changing values in our database. So we'll be using forms while deleting anything. We don't require something, so let us talk about it. So what do you think we are going to do? First we'll be creating some murals will be creating some views on. Also, you'll be creating an edit form. Feel solar destroyed. Are you well, first here. All you need to do is just copy this one on and do not believe. Just use it. It This works fine for all the three fields. Now jump onto your views and create our task function before writing anything else. In my view, just take a moment and create our ended or each demon. Why? Because we are going to create a new form there. So we'll click on this and adoption. It will open a new page on that Fish will have input field as a less an adoption. This input wheel will have a pre value, and then we can update that content and just click on an adoption that would say a post request. So when we click on this adoption, it is going to create a get request. And once we click on update option, it will create a poster quest. This might sound confusing, but let us do that. And by the end of this lecture, you will understand everything already after this just can't be this one. And hair removed all the content for a while and Alba Mrs Task every day. And instead of fetching all the data, I would just try to fetch single leader off that particular I d. So let me get this one. And instead of calling old us, I will be calling it as task object. Since that would be only one object. So all you have to do is just rename it to task. Object. Now, when we are going to walk with a did not esteem. L I don't have to mess with a loop because this is only one object. When we were walking with all task, we were working with different objects at Currently we only have one objects so we don't have to mess with any loop. We can just statically use this object and print our task. Bring our i d and print. If it is done on organ, let me keep this handy on jump onto my radar It's General inside that force extent RB, start each team ill and then addio title on your block Contend let me copy or content from contact or html Once that is done it meeting my title on here is my door HTM Already here I can radically use my task object And now I can directly print my i d my task and done or not done. And also don't forget to edit your trampling So here inside of to really start html disuse your editor or html This looks fine. Let me go here who do my head it on Just go to my first object So we have our task Number one Let me try this for task number two Yeah, this looks fine. Now, at this moment, we are just printing this one. We are not utilizing any form or anything else. So we are taking the park on checking. If this get request is working, fine or not, in the next lecture will be working this post request on. We'll be utilizing our form that is will be trying to create a replication off this form inside our head or extreme it. I hope at this point of time you are able to understand this you other this view and also this area dot html Don't worry. If you're no, they will do. Understand. Just repeat these to let just which are quite important. Because this is some tricky task. I hope this lecture was helpful. See you in the next one and let us complete our edit functionality. 26. Editing Queryset Item - 2: we'll come back now Let us get back to work hair and strove printing my object. I need to add a form. So let me call be this one now. Currently, this form is not useful. Asper the functionality we need to lose or gain changes along with this form. The first thing I need to do this I need to remove this place holder and stroke this. I would be using my task. And the second thing is, I also need to add a value, so just use value common on Repeat the same one status done. Let me jean this and use update ask. This looks fine. Uh, industry fresh Arpege. So this is our current field and this is update. Option me. Remove my actual Dagnall. Let me remove this h one tag and I had a brake line. He fresh my bitch and yeah, what I can do. One small thing is and slot for I can just leave a gap off to Yeah, this is perfectly fine. Now what? I'm working with this. If I'm on object number one, I will have a form with that particle of value and this update task at currently If I click on this update task, it will take a post request. And if I go here, I'm not doing anything with that particular post request. And I'm not even connecting with my database inside this. So what I need to do is I need to utilize my post request. So whenever user click on this particular Burton, it is going to get a post request on the same page. Now, inside this first, I need to select the task I'm talking about. So I need to select that particular object. So just select the task for all you have to do is just use the same command here. Now I have selected that asked. The second thing I need to do is I need to use my form if you remember, while adding I was utilizing my form. Now here I'm anything. I'm updating this one. Then I was adding I was creating ah, fresh task idea of fresh task content here. However task i d. Previously so I'm utilizing that. So all after this just utilize my form. Andi, take my task form here. Inside this, I need to pass my request post or none on hair I need to mention my instance. So which instance that would be my task? Instance, this will help your database to recognise which task you are anything. So if you call it as task underscore object. This would be your task. Underscore. Object. So this will help you to get your instance when you are updating when you are adding you are creating a fresh content when you are updating your utilizing a previous instance that is your previous content. So this would be my instance. Now, once everything is done, all you have to do is check your form is when you don't know if your form is valid. Just save your phone. Now everything looks fine. That medium born to my browser and try to edit record number two that is our task numbers. Again. Let me turn this from Reddit Lecture Toe added electives 5 to 7. If I click on up there, let us see a result. Yep, that's working. So we have got our task. Aided notification on our task has been updated. Yup, this look fine. The next morning I need to do is I just need to create any burden. Sylar just do that. First, let me call for the stock and add it here and snow part delete us. It would be either task on. We will be passing on ID's. Also, don't forget to close your a dog. This looks fine. Let me visit my browser and try this out. It's a read book on hair. I should mention the book name. Also, let me click on a big Yep, that's working fine. So we are updated our task. I hope this lecture was helpful, and now you are able to understand this important concept regarding your form. You are abuse and also creating a new pitch regarding are headed section. Thank you for falling this lecture on in the next lecture. We'll be doing something really interesting. We'll be trying to change this content on before the electors let us convert the sling. So some major icon that would be much better. So see you in the next one and let us explode. More concept regarding our jangle application 27. Editing Queryset Item - 3: Hey guys, Welcome back now. In the previous lecture we were talking about editing off task. Now we have missed one important point. We were only focusing on who obeyed our task. But remember, there are two values that we can t We have our task value and the 2nd 1 is are done value. That is, if our task is completed or not. And remember, this was something really important. So if I tried to edit this task and if I did this one, you might not see anything different here. Our task Well lose updated on hair. I still have not completed. Why? Because our default value for done is falls. That means this task is not completed by different on. If I tried to edit this one, remember, this task was completed and if I just did this task, you might see it exchange from completely do not completed because the default value which we are carrying for our done is false. So we need to fix this one. So what we have to do is we have to take a hidden input. We have to take ahead and feel so whenever we are on this edit page. We just need to store the previous value off are done. That does. If it was true, the store it as true. And we don't need to object that if it was false, just store it as false and we don't need to update that. And you might be thinking why this problem created Remember, we are using our form on in the form we have mentioned both the values that is our task and done so we need to pass value for done. If it is a true well, your false when you so here will be passing the old value. That means the instance that this particular task is carrying Let us do that. Let me add Ah, hell input here. So just change your type two hidden on You don't need any class since this will be ah, head and values. So you don't want to display that now. Here, change your name from task. Done. Just remove your placeholder because we are not displaying it on Dhere. The value of the field would be changed from your task to your done Now dis should solve our problem. Let me try this one. So let me go to my to do list. First, let me mark some off. My task is complete. Quickly open your admin banner and just mark your task as true. One status on Let me the first. This one on this task is completed. Let me did this one on. If I have did this task, you see it's still completed. So this was something missing in our previous lecture on It was really, really important. Now I hope you understand what other different type of feels that we need to take care off . Even if the feel is bullion, we have to take care offers previous value. I hope this letter was helpful. See you in the next one. 28. Adding Option - Mark Task As Completed: Welcome back, guys. Now I hope you're going well, Video course along with the course I was thinking what other things? We can add more with our current website. That is our current application here at currently, if I want to pinpoint any problem, that would be if I want to change or make them complete or not complete That is done. A banding to suppose if I want to make this task as completed, I have to go to my adamant section, select this task and then Mark, this has done so. I should add a burden or not. Here in this lecture, we'll be doing that. So the first thing is I need to edit this text. So if our task is already completed, we should have on option to market as spending or not completed an effort. Task is not completed. We should have an option to market as completed or done in this lecture will be doing that So we'll be using two domes that is done and the 2nd 1 would be pending. That would be fine for us to understand. Let me jean this one. So if our task is complete, er we want a button to make it as not completed. That is to make it as spending. Now, let me change this text as mark this task as completed. So this task is not complete currently and we are marking it as completed. And let me change this one as mark this task as spending. So this task is completed and I want to market asked finding that means I'm changing Trudeau falls and fall true. True. This looks fine on here. If I refresh this one, you can see we have an option. So if you want to get rid off this long text you can use complete and pending next Yeah, that's better. We'll be also center lying. All these three feels that would be much better according to our display knowledge to start walking on our functionality. So we have already worked on our delete. We have already walked on our edit. I guess by now you are family with this matter. So what we have to do is we have to create a You are and then we have to create a view on. In that view, we have to take that particular i d and change the value to true or false for that particular Rieti and then return it to are totally space. So I'll have to do is just grab the you are get onto our views and update the value off bullion for are done so this year and will be used to mark our task as complete. Let me save this one. Jump onto my views and competence, delete task for you We'll be taking request and then task I d hair will be selecting our task. And now instead of the lead what I'm going to do us? I'm going to update the value off. Done So use that have plagued on complete. That means user have plagued on marked as complete. When it is completed, we are going to turn the value s true and one status done. Use your safe command. So that means we have actually changed this turn value. True. Now this looks fine to me. Let me try this one with the one off our item. So I will be changing my dos number six as completed. Yep. This work fine that we try it with five also. Yeah, this is working fine. Now the last thing I need to do is add a link to my text. Let us do that and jump onto my tourists. Start html. And here I need to add a eight. And And don't forget to close your Radack. Once that is done, let us get back on our application. Refresh this one on here we have our link. Yeah, this looks fine. So we have marked them as completed. Now our task is to mark them as spending so that will be doing in our next lecture. I hope by now you are able to understand what we are going to do in our next lecture. All we're going to do is create a pending you are. And then we are going to write a new view. Once that is done, we have tojust add our hln. Flink, I hope this lecture was helpful. See you in the next one. 29. Adding Option - Mark Task As Pending: Welcome back. Now in this little let us quickly repeat everything we have done in our previous lecture. For pending option. Let me jump Born to my you are is after you are too modest spending. We'll take a task i d And then change this complete depending on same for my name. Once that doesn't jump onto of you and right of you for pending, you just need to copy paste your complete tasks on hair instead of true use the value s falls Once that is done, jump on door H demon file. And here we just need to simply copy Are a drifter on instead of this complete I just need to use spending. Don't forget to close early. Yeah, this looks fine. Let me refresh my browser. Now I have marked this has spending. Yeah, this world. And now we are able to actually change our task from pending to complete and from complete depending. I hope this was quick. And now you are able to understand how we are going through lists 30. Pagination Overview: Hey, guys, welcome back on in this lecture, we are going to talk and discuss about really important topic which most of us want to live in but don't know how to do that. And the selector. We'll be talking about pagination, so if you visit any Web site, they have a limit to show number off items on number, off task or number off object on each piece. After that, the usually dig help from pagination. That means they divided their result in the form off different beaches. On when I click on page numbers again, it would take a para meter that it's based on market does, too. And if I click on page number three, it would show me the result according to that. So that's how pagination is really, really important. So here is what I done without application. I randomly added some several 25 tasks just to make the speech a bit long, But now what I want is I just want to see six or five result on each piece. That means I want a result that is distributed among different pages, and for that we'll be using pagination. Don't worry, this concept It's really interesting on. If you are going to work on any application in near future, maybe social media may be equal MERS or something else. Pagination is really important. I hope by now you are able to understand what we are going to do in the section, see you in the next one and start working on our imagination functionality. 31. Implementing Pagination - 1: Welcome back. Now let us jump onto our work and start writing our views. So the first thing I want to talk about when we are going to use pagination whenever we are gonna get requests That means if we are in a post request we are going to save data here on the get request. We are actually loading our data. So the first thing Harris, I will be performing my pagination on my to do list for you now the first every new terrorist import pagination class. So all you have to do is from django dot co dot originator import Beijing it And don't forget to use capital B for this page emitter one status and jump onto our views. Get on board or get request on here. I need to do one simple change before writing any further. Good I have to use parentis is for isn't if you don't do that, we are willing to get error and are few Jenison. They're just start walking on a page in ator. So the first step is I need to create an instance for my page in ater I would be calling a dance paginated itself on here I would be using my page in it. A class on that required to arguments. The first will be on what objects I need to perform that pagination. So I would be using my old ask. And the second will be how many tasks that is how many objects I need to show on one beach . So I would be using five now one status done. Remember what I have said. We'll be using pagination on our kids request. So her Amazon divide their pages with the help off beach Equal screw tree. Remember, we used this question mark to add are different para meters So we had a question mark. Now this is one para meter for Amazon then they are using And that means they have another barometer which is this and they have another and that means they have another perimeter and then another perimeter. So her this Param Eter means this is the page number three. We need to define something similar. So we have to define what would be the name of this perimeter you can use PG or you can use page on. You need to define that we are performing on a get request. So all you have to do is create a instruments called piece and now you need to take requests. They find it as get requests and then you need to define your perimeter down. Currently, we will call it SPG Toe Award. Confusion off the speech and BT you can call it as fish or you can call it a speedy whatever you want. So this PG means we'll be using PG equals through tree for darling. Now, once that is done, we have to re lord are all tasks. So we'll be reloading are all tasks according to our imagination result. So let me take my own task and take my page emitter instance so that would define I have to take only five item and then I need to define which piece number and that would be taken care with the help off my BZ instance. So what we are going to do is if this is space number two, we are going to pass Wizard from 6 to 10. If this is speech number one, we are going to pass from 1 to 5. So that's how it is going to follow. I know this might be confusing at this point of time, but believe me, it is really important feature on it is really worthy for you to spend time on imagination . Now, here we have done with our views. The next thing is, I need to jump back to my HTML page on here. I need to add our pagination, but them So if I come back to my bootstrap, we need something like this. So just search Beijing mission here on you will get different type of feelings. So what I need to do is I need to get a simple button which can lie at the bottom. Maybe on right inside. This looks fine to me. So this would be first page. This would be last page and there would be our current page number, and this would be the nearest one. So if we are on page number five, this would be five. This would before this would be six. This would be one, and this would be the last face. So what we can do is we can utilize this. According to Honey, I hope this lecture was helpful in the next lecture. Let me cooperative scored on added to our HTML file on. We have to do a lot off anything there. See you in the next one and let us complete a pagination concept. 32. Implementing Pagination - 2: Welcome back Now let me quickly copy the score and after my HTML file. So once our table is completed, I would be adding this pagination. Let me see how our imagination cool. Looks like so you can see we are getting only five result at this point off time on these are dummy burdens. So this is our result is going to look you cannot 10 per page, you can add five per pays according to your requirement. Now here we need to work on this with several logics on these logics can be very dangerous . The first thing I need to talk about this several pagination cold. So how to get our current pace number? How to get next space number, how to get previous page number or total number of pages we are going to be even. So these are the code that you need to focus on now. Here currently, these two button should be the place. I want the sense last and I want the sense first. So this one would be by current pitch on. This would be the previous speech and this would be the next piece. So if the total pages are 10. I'm on 50. So this would be five. This was before this would be six. This would be then and this would be first I understand this. So first I need to remove this disabled class on hair. Let me fix both of these. So this would be the first speech you can use this command on here. This would be the last one. Now, this looks fine to me Now here. I need to use pagination cord to access my pages before that. Let me check out my page number two. So if you remember, we were using PG So all you have to lose. Use a question mark. Now you can add different perimeters through the sling. So I would be using PC for my page and then equals two and defined which pay you want to access. So if I give in protest tree So these are the item from my pager Number three. Let me try for peace number four and these other item for peace number four. So if I want to give link toe any off my base, I can describe tickly. Copy this one. That means space number forward with this space number two would be less. That's how we can use our differing. And if you look at us, we have also changed our imagination. Let me get back to my page on here. Let me start adding my pagination Cool. So with abuse, we sent all us So all the pagination method would be applied on this on task. Now I need to edit the middle one toe print out my current beige number all after the issues my own desk and then number. Now go print by previous space number. I have to use all task previous on the school page under school number. Now you can also guess for my next space. That would be my old Ask the next on the school page on the school number. Let me see if this is sprinting Correct pages. So if I try my paid number three here you can see this is 234 Let me drive it. Baby number two This is fine. Let me drive it Paid them off. Five This looks fine. But remember we will get better if I try paying number six. Why? Because there is no result on being number seven. That means paid Number six is the last option. And when the spade number six is here, this would be five on. We don't have risen for being number seven. Don't worry, We'll be fixing that. But before that, I want to create link for these pages so accurately we don't have links. Let us create links for them. For the fourth straight. It would be my question mark than perimeter and then the base number one. Now, for this period, I have to use question mark than my perimeter. And the page number would be close to this one. Yeah, this is fine. I need to follow the same method for my next to feeds. Now, how we're will deal with the last piece so we can actually use a method to get total number of pages. So it's the total number of pages A seven to the last page would be seven on. Let us use that. So instead, off your next space number, all you have to reuses numb underscore pages. I hope this is going to work. Fine. Let me visit my browser. Refresh to our for space and we are going to get better because our second, feel less free number one. So this will be our big number zero, which does not exist. Let me go back here on my page. Number two on If I go here on my pain Number three, this link is working. Fine. Go on. My big number four This is working. Buying? Try this tree. This is working fine. That means these are working. Fine. But the problem is on my pain. Number one, I'm going to get an error on my last speech. I'm going to get better. Why? Because they don't have previous and they don't have next. We need to solve this problem by adding a condition. So the next lecturer to solve this problem and add a condition regarding our page number I hope this lecture was helpful. See you in the next one. 33. Implementing Pagination - 3: Welcome back. Now let us quickly start working on our and a now her. What we need to do is we need to add a condition to check if we have any previous page or not. So that means if we are unpaid number one, we are not going to have any big number zero. And if you're on last page, we are not going to have any next. So what we can do is while printing previous, we can check if it actually has a previous page or not. And also we'll be doing seem for our next page. So we'll be checking that if it actually have an expiry or not. So, head, I need to add f condition. So all after this, use if and then use my old ask and then check if it does. Previous contender nor so you need to use has previous so If it has previous contend then we are going toe print us Otherwise we're not going to do anything. So that means that block will be missing. Don't forget to in your condition No, I have to follow similar condition for my next piece. So here are all your clues check. The big has next. Now, if the condition is true, we are going to print page number. Otherwise nothing that means that block will be missing. And don't forget to end your condition as well. This looks fine to me. Let me be fresh. My browser. So now we have under two dabs If I go on second. So this is previous. This is next. This is current. If I go on my 1st 1 my previous is mixing. This is my current and this is my next. And if I go to my last one, Okay, we haven't editor here. We don't have any pattern. You know, maybe I have missed something. Yeah, So you need to use paging it up for this because we are taking total number off Pete, remember, because off patient data we are able to calculate total number of pages. And that was done automatically during our view. So we don't have to worry about total number of pages. It is calculated by our agitator. Now let me go to my browser and refresh my result on here. Let me try being number second. Let me try a last page. And this works fine. I hope now you are able to understand how this is going to work. Spare some minutes and understand each line carefully because it is really important. And don't forget. If you want to increase the paid size, all you have to do is instead of five result you can use then. Now, if I did, you fresh might truly speech. We have 10 objects if I try on page number second. Yeah, that's done. We have paid them about three years old. Let me get back to my first piece. Yeah, this is fine. On this is one of the most important concept. So we are done with presentation. I hope this lecture was helpful. And now you are able to understand how to add condition without HTML pages how to walk without pagination and also how to work with different parameters on our link. I hope this letter was helpful. See you in the next one. 34. Fixing URLs and Links: Hey, guys will come back now Let us complete this section by creating our homepage for our website and also completing some small details which we have missed. So in this lecture will be forced Start working on our home page. So are currently if I try to visit my home page I don't have anything So I need to specify I need to design a template for my home page. We'll be doing that with the help off Bootstrap. The next thing I want to talk about this are links. So this is some small changes that we need to do art. Currently, if you see our contact a speech, it's routers dedicated towards our to rule list and then contact on. Same for are about us. So we need to talk about small concept regarding this before moving forward and start working on our template, I would recommend to do small changes, so the 1st 1 would be our link on the 2nd 1 would be I need to remove this idea also, let us to that let us start with our links. Currently I have my us. That is my app. You are on the second you are all I knew this my project you are in. So if you see, I'm currently routing all the links to my to really stop. What I can do is I can separate these two part. Let me cut from here on pace them here Now here. All I need to mention is there exactly you. So I'm taking this You from my to do list up so alive place Just import my views from my to really stamp. Now here you can see it. This is going to work fine on. Let me save this one also let me refresh the speed and see how our links are working. If I go to contact, this is fixed. If I goto my about us, this is fixed on We don't have to worry much because our complete routing is working on this particular name. And this is fine because we have defined visual disconnecting on we have imported that what I can do is I can give this view a particle and name because in future if you're working with any different project and you have multiple view import So currently we are just importing one view from a particular app. Maybe you are working with five or six APS and all will have the same name as view. So when you are importing views into different you errors, I would suggest to give it our name. Just use as and gave a name to her particle abuse on. Then all you have to do is instead off this view. You have to use this name and this is going to work. Exactly. Fine. But if in future you are going to import more application, that is more laps on more views. You don't have to worry about name. You can give them a separate name according to a requirement. Let me refresh this one again. Yeah. This is totally working. Fine. Now we need to work on this. I d I just need to remove this idea from my task. So this visit your to do list html page on insider table. You will easily find this one on hair. I have removed both off them. Go back to my browser and refresh this one. Yeah, that's fine. Now the next important thing I want to talk about this creating Ah, home, Pete. So I have to create a ul for it. I have to write views for it. And then I have to create our each team in template inside my time prayed Fuller. So that would be interesting and we should work on it. So the first thing I need to do is I need to create an out. So let me write part for my homepage. That would be blank because we are going to work on index. And then I would be calling it Does whom or in Next on, give it our name as in next, Remember why I'm calling it as index because every website called their home page, as in next each and every website that's done. Now I need to write view for them. This copier sample about you, Andi Name it as in next. Just replace every about doing next on here. I need to create our indexed or HTML. So what I should do now inside My template, I should add are indexed or html. This looks fine. Now I just need to copy based structure. So what I'm going to do is I'm going to take this content from my about or html and it be basted here right. My title on hell, it meeting my next. Now this looks fine. We have completed the whole face. We started with a route. Wrote our view on dinar template. Let me go hair and refresh this one. Yeah, that's fine. I need to do one small change. Now I need to change this home. You are. We can easily do that from our based on HTML on here for your home. You need to use index and also give a link to a logo I would be giving it for home itself. The scope of this one on here is our logo. And this is Rh tripling. Let me fresh this one. Yeah, that's why I know. I hope now you understand about this. We also need to design our home page. Virtually doing in next lecture will be creating a basic template for our home page. So this is going to be interesting and fun activity if you're new to bootstrap. So in the next leg. Taylor, this work on our home page Thank you for watching this lecture. See you in the next one 35. Fixing Task Page Design - 1: Welcome back. Now, let us quickly eat up up here. Let me add my buttons. So what? I'm doing us. I've just searched for burdens on boots Shop on here. If your school on you will get their idea of buttons, all we need to Lewis, we need to decide what type of person we want for our specific term for delete. I guess red would be fine for headed. I guess yellow would be fine. And then we need for Marcus completed or market spending. You can utilize either with this one or this one. There are two different light options, So let us quickly change for the lead first. Also, I would recommend you do research different buttons. So you will understand regarding these bootstrap classes forward. And also either you can use these. These are straightforward. Are you can utilize these outlines? Let me try this one. Simply copy this on added hair. Same. I need to follow for the 2nd 1 He fished my browser. Yep. This is fine at the sick in Britain, which is my edit option since I linking is already done, so we just need to add button instead of that text Let me refresh this one and see how this is going to look at this point of time. Here you can see we are not currently online. At this point of time, you can see we have replaced all our text with buttons. Next simple thing we need to do is we need to provide proper spacing. Tow them also, the linemen Let us do that quickly. Alignment is done. Next thing we were talking about, this spacing I would recommend you to use great system at currently were not dividing these column into exact spaces. What we can lose without well, spaces. We can dedicate some off this pace according to our requirement. Visit Bootstrap going Go lay out and then go into your great system on here. What I want to do is I want to dedicate our task based something like this. And then our markets turn and then edit and then buried. So I would be using my column system 36. Fixing Task Page Design - 2: now let us quickly solve spacing problem. I currently were not utilizing the column. The violation. So all we have to do is whenever we're using any type of pro, I would change it to crow class and then I can use column to divide my screen. That means I'm using roof for my heading. I'm using rope for my completed tusk. I'm using row for my not completed tasks. So all I could lose our class at three points for my heading for my completed tasks and for my not completely task. Let me are grow class for all these three. And once we have converted them into row, we can actually provide column size, I know despite be confusing, but this is the part off boot shop. We have completed our jangle part that is back and part. Now we are just customizing it for its better look. So, while I have to do is I need to define my column size for all these four feet. The 1st 1 I would expect as seven and then three, then one and one. That would be fine. So all I have to do is instead off the school. I would be using class and her column size for towels should be seven. I need to follow the same for done. Edit and delete. Now, this is done for our heading. Let me the fresh my screen. Yep, that's done for our heading. I need to follow sale for my niece. Duty are Get back to my template. And at this class, that would be seven, 31 and one. That's done a fresh my browser. You have dis looks fine. You can change your text for your about us your contractors at Currently I'm fine with this application and its functionality we have at us. We have all the edit, delete and all the different type of function which was required by us. And I'm really happy with my application. I hope this is helpful for you. And now you can create and edit your own application. You can utilize a whole lot of boots, stop and jangle functionality. I hope by now you understand about you are else fused routing regarding your flu as well. A structure the most important fingers You work your environment, your static files, your project file, your template file as well as your app file. And now you can manage your jungle application easily. Thank you for four in this section. See you in the next one. 37. Designing Home Page - 1: Hey, guys, Welcome back Now in this lecture will be designing our index page. That is our home base. Basically, there are different design or different templates that we can follow. We can also download different templates. What? Our website before starting off any project are even during the working off Grujic. Now, before starting this lecture, I need to tell you that this letter is totally dependent on Bootstrap. We are not going to do anything with Django for this lecture. That means we'll be understanding how to utilize Bootstrap will as a back under labour on how to create sample pages with the help of Bootstrap. That would be really useful as a back and available. No, let us start our work and visualize our design. So there are different design in my mind. At this point of time, I can take three images on the top and then we will have some timeline after that. And then we will have a burden. Let us get back to our editor at current TV. I just printing this simple index text here. The first thing I should change is my background. So currently we have white background. I would prefer some light gray background for all my bages. So if you talk about about us, contact us to do, lest our home page I would prefer a bit off light grey. Let us search our background color. As I said, if there is something that you want to do with your design, I would prefer to search on bootstrap. That will solve your problem as a fresh back and deliver. This one looks fine. All you have to do is copy this one on video body tag on your base template. Just add a new class with our body. If I refresh my page now, I hope you can see the difference with color. Here. You can also utilize a jocular. Let me test this one. So that's how you can use different Magnum. Go back to my light one. You applied grace. Fine. Now the next us, we need to do this. We need to add a row and then divide that true into three columns so we can add three images. Four images. I would suggest you do visit on Splash. It's a free site. So all you have to do is search what? Type off. Imagine you're on, you can download that and utilize that for three. Since I knew a mist that is related to notes task some note Bad. I would be preferring something related with that. And if you scroll down, you will get high quality images and you can utilize them for free. I have already downloaded an image on. We'll be utilizing that. So here is that imagine. And I have Cooler Does speaking hopes No, Let me get inside my container here. We need to create a row and then we need to add three columns. So that's easy. The Scholar New live on news class. As room now, we have actually created a neuro. Now this Rooney to be divided into three parts. And if you want to understand more regarding this, just jump onto a layout and visit great section that will solve all your problems. Now, if you want to divide into three parts, this is the result that we are getting. And if you want to divide them with the help off, well, screen parts, it would be 444 on. That would be quite fine. I would recommend you toe the scroll down this page and learn more about bootstrap. That is quite easy with this documentation hair. With the column, you might see Dems like S M or L G. These type of terms are four screen size. So if I talk about algae, it is for live screen. If I talk about sm it, that's what small screen. So I would be using energy and then I would be dividing them with help off for here. All we have to do is create treated class, use our classes, column energy and then the violation off screen that this fool Now we are ready to lock in rule. Now we have our three columns. I just need to add I am ji attack to add my image. So all you have to do is just add a I am de attack and then here we need to pass the source off our image. So for that we can use static and then use images slash our image name. That would be quite easy. We have done the same step While using Aluko. Let me also pass an alternative name. This looks fine. Now don't forget toe load your static tongue. That means you cannot utilize the static unless you load at the top off your page. So all you have to do is just load your static back. Once that is done, we are in good shape to utilize our image. They've been corporate this one and add to all three columns and see out. My result. This looks terrible because we are not re sizing our image. Let me size my image all after this. Just use my wit and hide. Come on, let me check current size off my image. It's 7 50 by 500. So I think it would be good to go with that issue off. 3 60 by 2 50 Let me try this one. Let me be fresh. My page. Yeah, this looks fine, but we also need toe add a margin Or are you so all of the actors just utilize our bootstrap class? Remember for margin we need to use. Come on em. And then for top Martin, it s t for border margin. It is be for left and right. It is l R. So I need to add margin toe the top so it would be empty and then your picks is So you just drive it. Five fixes This looks perfect for our top. Oh, now I'll be working with a next row in which we need to add some phone. That might be our tagline. And then we need to add some button. Need to start working on our noodle. Does creative and use your class as room. Now, let me are some sample decks that would be off two or three lines. I would be utilizing my paragraph. I mean, do you fresh my beach now? These are currently all in a single line and also there is no gap between our images and our techs. Let me add margin top again. You fresh this one. Let me start planning them according to our design that we have in mind. Firstly, let me talk about typology. So all you have to do is jump video content and click on typology. Here you will get different option to make our text look better. So the next leg Taylor the stock about this and start working on our next role. So here will be improving the sticks and add a button. And then I hope this lecture was helpful. And now you can understand regarding Bootstrap in much better way 38. Designing Home Page - 2: The next thing we need to do is we need to fix the alignment off our text at this point of time. So I would be taking something related to our grid so we can arrange everything into center . That means we'll be keep all the content off this throw into center on well, relieving space on the right as well as on the left. So that means we need to talk more about good. At this point of time. I'm utilizing my paragraph tag to display these three lines off content. If I don't want to, my great hair will be seeing some differently out off columns. Let me scroll down a bit and see which one will be perfect for us. Now this officer class would we find if you look at this one this is exactly I need all the content that we want to display on our face would be at the middle on. We need to leave space at the right and the left. Let me copy this third class and we just need to add that inside our room. Let me be fresh. My base here You can see we have bit more organized section. Now the next thing I want to do with my paragraph is to align, dammit! Center on, Gene. The text size I want the phone size should be a bit bigger on. We might also need to talk about something related to margin. Let me quickly add center tag to all my three paragraph and then I need to add class for my paragraph. I would be adding each one at this point of time for all three. And let us see what results we're going to get, like, meaty fish. This one, they're actually not looking financed. For my requirement, we need to fix our offset class. At this point of time, we are currently taking space off 36 and three. I should change it to one. Then in one, I also think I should change the phone size and make it as each to on this one. Should be h Fife. This one looks much better than our previous risen. Now I just need to do one simple quick thing. I also need to add a button so all you have to do is just jump on the boot shop. So it's about the large wooden and just copy this Scored. And here I just need to add it below my last text. And I also need to align this wooden at center one status in Let me do you fish this one. Okay, this looks fine. I need to change text. I also need to add a high pulling and I also need to add some margin. So with my button class, let me add margin, maybe three. This looks fine. I also need to add hyperlink and Jane districts. Let me replace the sticks with Let's get started. And here I simply need to add my drift and also close my bag. And here I simply need to add my dynamic link. That is my dynamic. You are ill which would be redirected towards our two ruler speech. So just copy this one. Yeah, this looks fine. Now there are few more changes that I would like to implement. Maybe adding some rounding to this image also may be adding some shadow toe my images as well as my button. Also maybe changing the phone color. So let us implement them really quickly so we don't raise time. And we also understand this concept this is completely related to Bootstrap on has nothing to do with jangle. So all you have to do is just jump on the boot shop. So let me search about rounded. You will find something looted with our borders. You just need to check your requirement. I think this one will be fined for us. If we cope with this one and just jump onto my I am G attack on here. I just need to add a class. And inside this classic replace this one. Once that is done, I also think I should add shadow. So just jump order boot shop search about shadow on you might see several auction. Let me choose this one. I think this one would be fine. So let me copy this one. Let me also add that here. Come back to my home page. I hope you cannot see the difference. Let me also try this one. This one is also fine. You can decide whichever you like. One thing I need to do. I also need to arch Arlotto this burden. Oh, let me quickly do that. Yep, That's fine. Toby Drew with the shadow. I like the previous one better for my images. But the 2nd 1 is better for my Martin. Now, to be true, we can do a lot more thing without bootstrap. But let me finalize this and add a margin between these two on change the color of this one . So that would end our section with a decent looking page jump on your editor and heard this class. All you have to do is add margin tree if I had you fresh, This one? Yep. This is better on Had I just need to change the color. That research that on my boot shop I would prefer this primary color. Let me be fresh, this one on here, you can actually see the difference. You can also replace these two images according to a requirement. I think this is a decent page for our application. Our last changes remaining, which is our favorite gone. So all you have to do is just jump onto your base class because this very cornice present on all the pages. If you talk about your brutalised about the speech home page, this very corners available on all pages, so all you have to do is just jump onto a base class and paste the school. Remember to paste it there. Your title. And here we need to give location off our image. Let me add that image inside my images folder, you can download that from resource section. All you have to do is just provide the path with static. So I would be coping this one on instead of our local or PNG. I need to pass for a week or not. I c e o Remember, all the fabric ones are in the format Off. I see you. I saved this one. Come back to my browser and refreshed my page. Yeah, this looks fine. And now we have our fabric on our homepage is really are truly speeches Treaty. And we are good to go to do anything without application. So this is how our back and developer completes its application. I know at this point of time, we are not dealing very high with friend, but all the back and courts we have done very well. There are not more thing that you can do. I think this design is sufficient as a backend available. I hope this design looks nice. Thank you for falling this lecture. See you in the next one. 39. Thank You For Being Here!: Hey, guys, Welcome back. Glad you released this lecture. You reserve a pizza or maybe a short break. You just unlock a new set off skill by completing the schools. Thank you for choosing and believing me. If you like this course, don't forget to leave a review. Your review. Keep me motivated to work hard. A big lake just as relus add more lectures on a regular basis. Thank you for falling. See you in the next one.