Create a website with your own simple, custom CMS using HTML, CSS, JavaScript, Django, & Python!

1. Introduction/Trailer: thank you for your interest in taking my class the next few videos. I'm going to teach you how to create a completely custom CMS driven website. This class is mainly going to be for designers who have some HTML CSS and JavaScript experience, or maybe tired of manually entering data for portfolio pages and want to create a more efficient solution. This class is also for front and developers who want to take their back and knowledge a bit further. Get comfortable with using the command line and start building Web pages for clients without depending on existing. CMS is a CMS, or content management system is an application used to create and manage digital content. You've definitely come across or use them before. Some existing popular ones include Squarespace, Wix and WordPress. There's nothing wrong with using them, but sometimes you don't want to navigate through complex frameworks or in solid 10 of plug ins. To get one thing done in this class, I'm going to teach you to create your CMS Turban website using familiar Web development technologies and languages, plus give you an intro to using Python and Django. It's going to be lightweight, custom and the way that I break down, the code will be modular so that you can easily duplicate code and customize how your CMS works. So who am I? My name is Michelle and I'm currently a developer at this, also a product design studio in Brooklyn, New York I've been creating websites since I was in the sixth grade, which was about 17 years ago, believe it or not. But since then I've created and managed multiple websites and portfolios for different clients and friends. Things I've worked on that. This also include many CMS driven websites, including an internal CMS for a careers page to make it easy for others to add at it or remove jobless things from our website and several other CMS turban websites for clients like Google. I look forward to seeing you in the next video where will define our class goals. 2. Goals: By the end of this class, you will learn the basics of how to create a CMS driven website from scratch. This includes learning how to create an admin log in for your website with a separate dashboard view creating and using forms, and put your website data into your database and using the inputted data from your database on your public website and as a designer or front and developer. You'll also be able to learn a little bit about back in technology while working with the server application and database. 3. What are we making?: for this project. I'm going to be walking you through, creating a custom CMS for a job listing website. The focus of the lesson will be on the CMS, so absolutely feel free to use your own website for the example will mainly be focusing on building the environment, including creating an admin log in admin, dashboard and forms for publishing and editing entries. Milwaukee through saving a job listing on your database through a form and then linking that job listing database entry to your public website. 4. What's in our toolbox?: a couple of the applications you'll need in order to follow. My lessons include Sketch or Photoshopped, whichever program used open design files. Your preferred code editor. I personally use sublime text terminal or your preferred command line tool if you're not used to using the command line, and there may be afraid of it, don't worry. I was two, and it really isn't a scary as it seems. It's safe even for beginners, and you'll see how helpful it is when it comes to stepping up your workflow. You should have also downloaded a ZIP file from the Resource Is It includes the design folder, where you can find the sketch file for the job listing website, as well as a folder with all the screens exported as PNG's. There's also the development folder, which includes a folder with all the code for the finished website, as well as a folder with a skeleton project 5. Installing dependencies: before we can get started on setting up our project, we need to install two dependencies, python and Django Open up terminal or your preferred command line tool. First, you'll need to check for Python, which is a general purpose back in programming language that we're using to run our CMS. It should already come with Mac OS X, so let's check to see what version you're running in terminal type. The following Please note that in this class I'm going to be using Python version 2.7 point 10 which is what's included in Mac OS X as of publication, and it supports the use of libraries. If you get a response from the command line with a version number, you can skip ahead. If you don't get a response from the command line, then you need to download and install Python 2.7 from Pythons. Official Downloads page. I've provided the length in the docks for this lesson. After you've been sold Python, you'll need to check for Django. Type the following in terminal. Please note that we're using Django version 1.11 point 13 throughout the lessons, so any other version may be incompatible If you get this version as a response from the command line, you can skip to the next video. If you don't get a response, follow the next steps to download and install Django 1.11 point 13. Go to the docks for this lesson and go to the link provided to download Django. Version 1.11 point 13. Going to this link will immediately start downloading the package. Once that's complete, unzip the file and navigate to where the folder is via the command line. Next type the following. If you're getting a permission error, you can proceed the command with pseudo like this, which will install jangle for all users. You'll be prompted for your computer password. So have that ready. The password won't show up as you're typing, so just be mindful of that. Now. Type the following again to see if Django was installed. If you get version 1.11 point 13 your set to start. If you need extra help with these steps, you can visit the official documentation for Python Django. I've linked them in the docks for this lesson. If you're stuck, feel free to send me questions 6. Setting up our skeleton project: Now that we have Django and Python installed in our system, we can now set up our project. Django comes with this kind of hello world skeleton project that we can uses a blank template for creating our CMS and building our website around it. I'm going to give you two options for setting it up. The first option is the easier one in the development folder from the package files you saved earlier. There's a skeleton project folder. Drag that folder into sublime or your preferred coating editor and start working. The second option is more advanced and can help you further exercise using the command line . The following steps are going to be for building your skeleton project via the command line , which I definitely recommend trying first open up terminal and navigate to the folder you wanna work in. Here's a little tip. You can do this by typing seedy space and then dragging your folder from finder into the terminal window. Then type the following running. This command creates a skeleton Django project with this structure. After that, type the following running This command will create an app called jobs and you're fall structure should now look like this and you're all set to start 7. Assessing the design: Let's take a look at the design that I provided to outline the pages side note, thanks to my coworker, Tyler Moody, for helping me design these. If you're using your own designs, it will still be helpful to follow along for this video so that you can think about the structure of your own CMS pages. Feel free to open the sketch file that I provided in the package files or the exported screens as a reminder we are creating a job listing website for this website will have two different pages. The job listing page and the details page. Now for admin pages will have five different pages. The admin login page dashboard where you land After successfully logging in the ad job page , Edit job page in a settings page where you can add or delete add mons. 8. Creating our HTML files: Now that we've assessed the design, let's go ahead and map out what our HTML files are. If you have your own design, I still recommend following along to understand what type of files you'll need to create. These are all the different pages we need to create the job Listing page and job details page for the Public Facing website. In the log in page admin dashboard, Add job at a job and Settings page for the actual CMS. Pull up the folder where you have the Django skeleton project that you created earlier. We're going to be working inside of the Jobs APP folder, which is where all of our HTML, CSS and JavaScript files will live. For us. Create a folder called Templates and make sure to put it inside the Jobs folder. This is where we're going to be storing all over HTML files, opened the entire project folder into your preferred code editor and begin creating your HTML pages inside the templates folder. Let's create the main page, the job listing page and let's name that index dot html. We're going to leave all of these HTML pages that we create blank for now and start building them later. Now let's create the job Details Page. Also inside the Templates folder. That's all we need for a public facing website. Let's move on to creating our admin pages. Let's create a folder within the templates folder called Admin. All of our main admin files will live inside the admin folder. Create a new blank file and name it dashboard that HTML. This is the admin dashboard with the job list, and it's where you're directed after first logging into the admin console. Now let's create the Settings page and name it settings that HTML also inside the templates slash admin folder. Let's see what we have so far. Now all we have left are the log in ad job and edit job pages. If you look at the designs that provided, you'll see that the ad job and edit job designs are almost exactly the same with Django and Python, you can easily use conditions to display the correct data, depending on what page you're on. So it would make life a whole lot easier if we use the same template for both types of pages inside the admin folder. Make the file create that html for both the add and edit pages we have one page left to create, and that's the log in page. We're going to store that in a separate folder within the templates folder called Registration Within the Registration Page. Make your blank log in dot html file. Here is the final checklist with each pages path check to make sure you've saved them all in the right places, and we can move on to the next video or you'll map out the pages and python and check if our environment works. 9. Working with our Python files: now that we've created are blank HTML files. Let's go ahead and math amount in our python files. This video is going to be separated into a few different parts. Initial set up creating views, routing the euros abuse. Testing the Web page After we go through, these four parts will loop through the steps again, creating views, routing UralSib views and testing until we finish. Creating all our views afterwards will go through creating models. The Django skeleton project that you created or downloaded earlier is good to use out of the box, but there are a couple of things that we're going to want to add. Go into the job listing folder and open settings that pie. Find your installed APS. This should be online. 33 Ad Your Jobs App. The folder you created during set up to your installed APS by typing the following now, scroll down to the bottom of that file and add the following to lines. The Django Skeleton project includes its own admin dashboard, but since we're creating a custom dashboard view, thes two lines will redirect the user to thes euros when logging in and lugging out abuser python function that takes a Web requests and returns a Web response. This'll response can be the HTML contents of a Web page. A redirect A for oh, for error and so on were going to use these views to create our pages. Let's start in the Jobs folder Open Views that pie. One of the great things about Django is that it provides based view classes all views inherit from the view class, which handles linking the view into the Urals. Among other things, redirect view is for a simple http redirect and template view extends the base class to make it also render a template. But in order to use these based view classes, we need to import them into the python file. So in views that pie add the following to import view and template view. After that, add the following lines to create a view for the index at HTML file you created in the previous video. We're calling this class home page view and defining our index at html file as a template. Name attributes note that Jango automatically knows that templates are located in the templates directory, so there's no need to specify it in the path Temple of you should be used when you want to present some information in an HTML page. Since we're only using this view to display our home page, which is the public facing jobless page, this is the right view to use. We'll add more to this later, but let's move on to the next step, which is routing the euros of use you need to associate of you. Two are Ural in order to see it as a Web page. This is where we make sure that going to specific your URL will direct the person to the correct view and the job listing folder open Urals that pie. First, you'll need to import your views that pie file from the Jobs folder. Do that by adding the following to the top of the file. Now let's route our home page view. Inside the Euro Patterns list. You'll notice that there's already something in there. Since Django comes with a built in admin dashboard, the admin view is already routed. For now, let's delete that and add the following. This is pure python code and is a simple mapping between neural patterns, which are written as regular expressions to Python functions, which are your views in this particular instance, were mapping the route your L to our home page view from views that pie the are in front of the regular expression string is optional but recommended. It tells Python that a string is raw, which means that nothing in the string should be escaped. Since the regular expression is enclosed by a carrot and dollar sign, it matches the entire line. This means, for example, if your website is jobs, jobs, jobs dot com visiting that route girl jobs, jobs jobs dot com on your browser will return your home page view. Also note that there is no need to add a leading slash because every euro has that. If you don't understand this explanation, you'll start to make more sense once we're out other Urals with varying paths. This is where will first try to run our website on our local server to see if it works. Go back into terminal and make sure you've navigated into your route. Project folder, which is where your managed up I file is Type the following command to run your server locally will most likely see a minor error saying that you have un applied migrations. Just copy and run the command that's given, and you should be good to go. Go to local host Colon 8000 You probably won't see anything in there since her index dot html file was left blank. So let's quickly go into index dot html and add some text. Refresh, and you should be able to see the text on the page. Now you've successfully created your first Django up. Let's go ahead and do the same for the rest of the pages. Next will create the job details view in the Jobs Folder Open views that pie in your code editor and do the same thing that you did for the home page view. But we're going to name the class of job details and make the template name details at HTML . Next, go into jobless ng slash girls that pie and add the following below your home page view in the Ural Patterns List. Again, this is using regular expressions. This part of the path is going to be auto generated based on our data later, so this rejects just means that it's a string consisting of alphanumeric characters which are letters and numbers. If your website is jobs, jobs, jobs dot com, the job details path could be something like jobs. Jobs, jobs dot com slash details slash designer 21. Go into your details at html file and type something in there for testing. You should still have your local server running, so try going to local host Colon 8000 slash details slash Hello testing. And if you're seeing the text you just wrote, it worked. Now try changing Hello, testing to something else, like testing 21 try again. If that worked, then you're done with the public facing views, and you could move on to creating your admin views to keep things fairly clean. I'm going to separate our public facing views from our admin views by creating another file . Admin views. Got pie in the Jobs folder. Copy the view and template view that you imported in views that pie and put it into the admin views file. We're going to need to create template views for the dashboard settings and add job pages. We're going to have to create a couple of other views later, but for now, let's repeat the same previous steps for creating thes three views by adding these sets of code. Next, go into jobless sings slash urals that pie again. Since we put the admin views in a different file, we'll need to import admin views that pie. Since it's also in the Jobs APP folder, you can import it by adding it to this line. Now you can reference those three admin views in your euro patterns like this. Be sure to keep the dashboard view pattern last so that the APP goes through the views above it. First, we do this so that whenever you visit slash admin or slash admin slash dash ward or slash admin slash any path without routing, you're automatically directed to the dashboard view. If you put this above the other patterns, you'll end up with the dashboard You even when you try visiting your settings or add job pages, go into your dashboard dot html settings that HTML and create dot html files and add a couple of lines in each, then go to their Urals in your local server. If everything looks right, you can move on to creating models. A jingle model is the single definitive source of information about your data. It contains essential fields and behaviors of the data you're storing. Generally, each model maps to a single database table. Open models that pie in your jobs folder. You'll see that it's already importing Jang Go's model class. Each Marley create is a python class of sub classes. Drink oh dot db dot models dot model. First, let's figure out what models we need to create. So again we're creating a job listing website. We know that companies and jobs can have a 1 to 1 relationship. However, one company can have many jobs, so it turns into a one to many relationship. To avoid repeating data over and over, we can create two models, company and job. Let's start with the company model to create a new instance of a model just in San. She ate it like any other python class. Like so think about the kind of data you need for a company. There is the name of the company and maybe a logo. Your girl. You can also create a field to upload an image for the logo, but I'm going to keep it simple so that our html doesn't get too complex. Add these lines within your company model. We're using char field for both values. Char field is meant to be used for a Stringfield for small to large size strings, and it requires you to set the maximum length. So I went ahead and put those numbers for large amounts of text. You should use text field now. Let's create the job model for a job. You'll need to know the city state job title, job description, job link and date added. But first, you'll need to be able to connect your job to accompany. Since this is a many toe one relationship, do that by adding these lines. This links data from the company model to a job and make sure that upon deleting an entire company, it'll also delete all the jobs connected to it. Now add the following below that for the rest of the data we need for a job. We use chart field for everything except for the description, which is a large amount of text and should be text, field and date added, which is an auto generated timestamp. This ensures that the current time and date are recorded the moment the data is submitted and since we want our data to be displayed on the dashboard in order of when they were submitted at the following within the job model, you can override this in your queries whenever necessary, But this will be the default order for our jobs. After creating your models and models up, I you need to put the following in the command line toe, activate the models The first command makes the change file in the next command actually runs and applies it. Now our databases sink with the models that pi code a migration is just a change in your database. It takes whatever changes you have in your models that pie and converts it into. SQL basically just creates tables and columns for your models. Run these two commands Any time you make any changes to your models. That pie file 10. [*New*] Building out our HTML and Python files: Now that we see that the HTML files are linked properly through our Python files, let's start building out our HTML pages and forms and make the CMS functional. Let's start with creating or header and footer files. Since our header and footer are going to be Constance for every page, we're going to make them included templates so that we don't have to keep repeating the code in every page. First, let's create a new folder in the Templates folder and call it includes in that folder. Create a file header dot html In this file, add your HTML document tags like you would for any website at your website title and metadata. Your CSS files will go in here, too, but we'll worry about that after we create those CSS files later, also at an open body tag. But don't close that just yet. Now let's create the footer. Include in the includes folder, create a file footer dot html. For now, all we need to do is close the body and HTML tags that we put in header dot html. This is also where we'll add our JavaScript files later. Now that we've created rht melon footer includes, we can move on to building all our pages. Let's start with our home page. Open your index dot html file. First, let's include the header and Footer files by adding the following lines at the top and bottom of the page. Between those lines, I'm going to add the top title bar that we have in the designs. I enclose the page title in a couple of dibs because of how I'm gonna want to style this later. You could also have this entire title bar in another file and use it as an included template since we'll be using this for all the pages. But I'm writing it directly here to make things easier for now, because if you wanted to have this in another file, you'll need to add conditions to make sure the title changes based on the page. Use the same principle in different ways throughout the site, so feel free to explore this further on your own. If you're following the designs, you'll see that there's a job filter, too. I'm going to skip this step because we're not gonna make it functional. The files for the finished project includes the styled filter in the code. It is also nonfunctional, so you can take that and build on top of it. If you like moving on, let's add the jobless itself. Let's enclose the job list inside a main tag inside a container. DIV at the top. Let's add a small description says how many jobs are available. In order to do this, you'll first need to connect your jobs data from the job model you created in the previous video. You'll need to go back to your views that pie file now import the job model that you created earlier by typing the following line at the top under your home page view. We're going to use Jang Go's get context data mixing to reference our job model. Now you'll be able to reference all the attributes from the job model within your template with jobs. Let's return to our index dot html file now. You can easily reference how many jobs there are by typing the following Jang Go's count returns a number of entries that are in the database. Run your local server now. If it's not already running and visit your home page, you see the return zero because We don't have any jobs in our database yet. What would happen if we reference something that doesn't exist? You get nothing. Let's add some conditions to make this a little better. First, you should check if jobs exists. If it does, return the count if it doesn't return. Zero. If there's only one job, use a singular job. Otherwise, use the plural jobs before we move on. Let's add one test job in the database to make the rest of this lesson make more sense. Opened up. Used up I and add the following under your home page view class like this. Here we're adding a company and job to the database and saving them. Once you visit the home page, I'll explain how this works later. Save this file and refresher local website. It should now say one job available. Now go back to the views up. I file and delete those lines. Go back to index dot html and under job count. Let's add the jobs in an a nordeste at this if condition, so that this part only shows up if there are jobs in the database. This four loops cycles through all the jobs in your database. Now each job listing in your database will follow the same list format that we define here . Let's take a look at the data that we're recording in our models. First we have the job logo euro that's technically recorded in the company model, but it's linked to the job model with the company attributes so we can reference it in our templates like this. We should add some conditions so that there's a placeholder logo if the euro isn't recorded . But before we can even do that, I'm going to do a quick Segway into how to handle static files like images, CSS files and JavaScript files. Go into your settings that pie file in the job listing folder and scroll all the way down online 1 21 You'll find the path for static files. You can change this so different path, but let's keep it the same. Now let's create a new folder and our jobs folder and call it static. Now you can save all your static files in here. Let's make another folder within the static folder and call it images. I'm going to place that logo placeholder image I made in this folder. Now let's go back to our index dot html file. Her best practices were going to use a static template tag, which references a static Ural from your settings file. This makes it easier for if at some point you decide to host your static files elsewhere at the top of the file, add the following. Now you'll be able to use the static template tag. Let's go ahead and add the image outside of the UN ordered list. Just a test. If the static files air working, save this and refresh your website. It works. Okay, now delete that line and put this logo placeholder inside the list tag with the proper condition. Now let's have the rest of the data from our jobs model. Referencing the rest of the job attributes is pretty easy. Just use the attribute names from your models that pie file for the list. We want to have the job title company, name, city and state. That's also added details. Link for our details page the details Page uses the details template, but how will we know what dated to put in the template? We're going to get the jobs primary key, which From now on, I'll refer to as the job I d and capture it in the girl with jobs that PK. Now go into your views out pie file and copy the get context data instance from the home page of You and paste it under job details. Replace home page view to job details. We're going to modify this code so that it grabs the jobs I D that you define in the path earlier. First, get the path and split them into components based on the slash and to find the job i d. Variable by getting the string after the last slash. So this means that if you visit something like jobs fab shops dot com slash details slash 1234 The variable a job i d would be 1234 Now you can use Job I d to query only the job from the database that has the key by changing all to get. And since the details pages on Lee querying one job that's changed your reference name to job. Now we're done with the index dot html template and can move on to the details of HTML template. Open up details out HTML and copy and paste these constants from your index dot html file. Since the top part of the Details page has the same info as the home page, just make a few small changes now between this at the Saimon ordered list from the index dot html file. Since we're querying the data through the views up, I file, we can remove this condition and the four loop. Don't forget to remove the closures to also change the details linked to the company. Link and Onley have a display if the link exists in the database. Below that, let's add the job description as well as the date that the job was added. Now go visit your local site again, like on the details link for the test job entry. And here you should see all the info, plus a description that you input earlier. Let's move on to our admin pages. Let's first work with our dashboard. Open up your local admin page in your browser. Nothing there yet for this part will be working on both the dashboard that html file and the admin views That pie file. The admin dashboard is pretty much going to have the same information as the index dot html file. So let's copy over what we have from there into dashboard dot html, changing a couple of things in the process between the header tag that's at an image icon that links to the Settings page and a link to add a new job listing, Let me add that icon into our Images folder that's also lengthy jobs, jobs, jobs, title to the public facing jobless page. Your header should now look like this. Now refresh the page and you'll see that there are no jobs listed. That's because you need to link the job data to your admin dashboard view like how we did it for our home page view. Just copy the get context data instance from the home page view in views Up I in tow. Admin views that pie. And don't forget to import your job and company models also change this. A dashboard view. Save the file and refresh your page again. Now you should see your job listed on the admin dashboard. Let's go back into dashboard dot html and change the details linked into an edit link. Going into this link won't work yet because we need to handle that in our python piles. We'll come back to our dashboard, not html file later. But for now, let's move on to our ad job and edit job pages and forms like I mentioned before, since our ad job and edit job pages Air so similar will use one template for them both. And that'll be, create that. HTML. Open up that file. An admin views that pie as well as euros that pie from the job listing folder. Visit the Create Page locally. Nothing there yet. First, let's start with copying the header and footer from our dashboard page and let's change a couple of things. Let's link the admin title to the dashboard, remove the settings and add job link up an ad, an admin title bar with a back link. As per our designs. Looking back at our design components we need are the form and a preview. Let's put a form inside the main tag and build up on it. Upon submitting, the form will be handled through slash admin slash post. In case you're wondering, the CSR F token is an easy to use protection against cross site request forgeries. You can check the Django documentation for more information on that. First, you'll need the company name and company logo. Both of these will go into the company model in the database, and let's make the company name required. Next. We have all the info for the actual job, including City, State, job title troubling and job description. These all go into the job model in the database. And, of course, let's add the publish button and close the form tag under that. Let's add the preview. This won't be functional until we make it work in JavaScript. So we're just adding this is a placeholder. For now, that saver changes and refresh the page. Things were looking kind of messy right now with a preview placeholder. So let's comment out those lines for now and just work with our form. Okay, now, if we try filling this out, of course you're going to get an error because we haven't defined how to handle our forms and are Python files yet. Let's go into admin views up. I under add job view. We're going to create another class called add Edit job handler. I'm naming the class this because this is where will be handling both the add and edit job forms. But for now, we're just using it for adding jobs. We'll build this up when we work on how to edit jobs. This, like add job. You will put the template as admin slash create dot html. Under that, let's add a post instance method. This is where the form is handled after being submitted, and it's where we'll put the data into our database. First, let's grab and create variables for all the data from the form with requests. Post get you reference the form fields by using the fields. Name attributes. Now we want to make sure that the company doesn't already exist in the database. So let's add this validation check. There are definitely more foolproof ways to do this, But for simplicity's sake, this is only counting to see how many companies in the database share the same exact name as the company in your forms of mission. Let's add that condition and continue. If the company name is not in the database, try adding the company data in the company model like this, using the variable see to represent this object and save See in the database. Next, we need to create a variable. See for the company we just saved. Then at all the job data to the job model linking the company data using the C variable and then save J in the database redirected the admin dashboard of its successful. Otherwise, you're redirected back to the ad job page. And before I forget, we need to actually import that redirect shortcut function. Just edit this line at the top and include redirect in it. Okay. Now, if a company name is in the database as the job to the database and connected to the existing company by getting and using the company I d. This isn't the end of it, though. You'll need to go back to the Urals that pie file between your admin views and admin dashboard. Add your admin handlers, since our form is handled through admin slash Post for routing or add edit job handler view to that girl. Save this and refresher. Add job page and fill out the form with a test job entry. Perfect. You should have been redirected to the admin dashboard where you see your newest job entry at the top. Now that we have the ad job page all set up, we can build on top of that to make our edit job pages open. Create that HTML admin views that pie and your old that pie again. Let's first work with admin views that pie, As you can see from the designs, the Edit page form should already be filled in with existing data. So under are added job handler class. Let's add the following Get context data. Instance. First, we need to get the path of the U earlier visiting path for an edit page would be something like jobs, jobs, jobs dot com slash admin slash edit, and then the job i d. So let's add these conditions if the string edit is after the second to last slash of the path. If it is, let's say edit mode is true. It's also created variable for the job I D. So that we can use it in the edit page, similar to what we did for the Details page. And if you're not in an edit page, edit mode will return false. Let's save this And now let's go into euros. That pie under our admin views. Let's add or edit page. It's gonna be similar to her ad job you so we can copy that. Change this toe admin slash at it, then copy the regular expression from the details Euro and change the names. Edit. Now try going to the admin dashboard and click on one of the Edit Links Perfect. It uses the create dot html template. Don't try using this form yet, though, because there's still more that we need to do. Go back to the create that HTML file. Now that we have this variable edit mode that tells us whether or not we're editing or adding a job, we can use it freely as a condition throughout the page. And it won't affect the ad job page. Let's start simple first at the top of the page where it says Add job. Let's add this condition so that it says Edit job. If we're in edit mode, go back to the edit page you were in and refresh it. It should say at a job at the top. Now, Now let's just add a class to our form if it is an edit mode so that we haven't defined in case we need it later for styling purposes. We don't want to give someone the ability to change anything about the company, including the company name and the company logo, because that will change the data for any other job entries listed under that company. So if it is an edit mode, let's disable the field for company name. We still want to display the company name, though, so we'll put it in the value. As for the company logo, let's just remove that field altogether. If it's an edit mode, go back and refresh the page to make sure everything's working properly. So far. Okay, so far, so good. Let's continue with the rest of our forum fields. You want to give the user the ability to edit the rest of these fields, so all we need to do is if it's an edit mode, display the existing data inside the field, refresh the page again, and you should see it all. We're not done yet, though. If you click the publish button now, you'll end up redirected to the ad job page. In order to handle that, First will need to store the job I d through the form before the publish button. Add the following lines. This is a hidden field that stores the job ideas, the value. Let's also go ahead and change the button wording. Depending on whether you're adding or editing a job, we're done with our create about HTML page. For now, let's go back to admin views up high under the add Edit Job handler class in the Post instance method At the following lines. Job I. D. Variable is getting the value from the hidden field he created. So if you're in edit mode, this returns a job I d. Otherwise it returns. Not you can use this to determine whether you're posting a new job entry or not. Let's add this condition before company validation. If it's a new entry, do all the things you defined earlier. But if you're editing an entry, do the following. Get the job with this i d. Ed at the data within that job and save it in the database. If it works, you're redirected to the admin dashboard, and if it doesn't, you're brought back to the Edit page refresher Edit page and try it out. Things should work, and now you're done with both your add and edit pages. But what about the leading jobs for deleting jobs? Will be working from dashboard dot html. Admin Views Up I and Urals that pie. First, let's go into dashboard dot html. Based on our design, this is where we'll have or delete button. So let's add that after our edit link, we're using a form so that we can handle the leading the entry from our database through our python vials. Post your oral will be a slash admin slash delete, and the data will need is a job i d. So we put that in the hidden field. We're done with dashboard dot html. Now let's go into admin views up high and create a new class called lead job handler and use view instead of template view. Since we won't need a template for this at a post in since Method, and in that get the job I D. From the hidden field. Use that job I D. To get the job from the database now count how many jobs this company has in the database. If the company is only linked to one job to lead both the job and the company from the database. But if the company has more than one job, only delete the selected job from the database. Go to the Urals, up I file and under admin handlers at the Delete Earl now refresher admin dashboard and tried a leading an entry. Done. Best practice, of course, would be to add a confirmation state so that you don't accidentally delete data so you can go ahead and expand on that if you like, but we're done with the bulk of our actual CMS. Pretty simple. But you can expand on this in so many ways by adding more data and more models, uploading images directly through the form, displaying different templates based on what type of content you're adding. For example, if you wanted to show something different for a design job versus a developer job and so much more. But now that we have this part done, we need to protect our data behind a custom log in Consul powered by Django and Python. That's in our next lesson 11. Thank you!: thank you so much for taking my class. There was a lot that I couldn't fit in here. So feel free to send any questions and suggestions over and make sure to read the FAA cues from best practices by.