Welcome back, everyone, to this lecture where we're going to review how to create a website that uses
models.
What we're going to do is we're going to create an online website that sells cars and then later on,
we can use this website to actually test out the admin panel.
But in order to understand the admin panel completely, we do need some sort of website that is using
models to do this or to create a very simple landing page that can report back what cars we have in
stock.
You can think of this as just an HTML list of all the rows in a database connected to a model.
Then we're also going to want a way to add or remove cars from our inventory.
This is essentially going to be two other templates to have a form for adding a new car and the form
for removing a car.
Keep in mind, everything's shown in this lecture should feel like a review of past concepts.
We're not actually going to introduce the administration panel yet.
So technically speaking, we're not going to take too much time to review the details of what we do
here since we've pretty much seen it all before.
Well, we're going to do now is create templates, create views that actually render those templates,
connect with the URLs, create a model for cars and then we'll test some creative functionality as a
quick point.
We're not actually going to worry about updating the cars will simply create, read or delete cars from
our database.
Let's get started.
All right.
Here I am.
I have an empty folder called Django Lectures underneath my desktop.
Let's create a new project.
Remember we say Django Admin Start Project, and for this project, I will go ahead and start it by
just saying my car site.
OK, so I have my car right here, and then I also want to do is create an application within it to
do that.
I'll say Python managed a pie start app and the name of our app is going to be cars.
And looks like we accidentally forgot to CD into my car site.
So I'm going to change directory into my car site, and then I should be able to run that Python managed
up my startup cars.
OK, there we go.
So now I see cars here.
So remember, you need to be inside the same directory as this managed is pipe file.
So I have cars and I have my car site.
The other thing I'm going to do is create a templates folder to hold a basic HTML template file that
I can later inherit from.
So at the same level directory as cars in my car site, I will create a new folder and call it templates,
and we'll create a new file here and I'll call it basic HTML.
So this is a review of template inheritance.
I'm going to fill this out later.
I won't worry about it for right now.
What I need to do is have three template views.
I personally like to start from the user side of things and then work my way backwards to the models,
especially for explanatory purposes.
Some people, especially when they're just developing solo, like the start from the models and then
push out forwards to the views, URLs and then templates.
And then some people like to kind of mix and match and develop both simultaneously.
There really is no right or wrong way to do this, but for explanatory purposes, I think it's a little
easier for me to start from the template side of things and the user interaction.
So that's where I'm going to start.
Underneath cars, I will create a new folder called templates.
And then underneath that, I'll create another folder called Cars.
Remember, this is the convention.
And let's create three templates.
One, it's going to be list each HTML.
Another is going to be ad html.
And another one will be the HTML.
So we'll say new file.
At each tlmo.
We'll create a new file, delete each HTML.
And we'll create a final file called we want to add a car list to OK, so list, delete and add, and
for right now, we'll just keep those all blank.
I'll fill them out in a second.
Once I filled out the basic HTML, but I also want to make sure that these are being connected through
a view and a URL route.
So to do that will come to views that pi inside of cars, and I'll create three simple views.
One is going to be the list view that is simply, in fact, let's just call it list.
It's going to take in the request, and it's going to return the rendering based off that request.
And it's going to be cars forward slash and then the actual template for listing is called list HTML.
All right.
And we're going to create three more views like that.
We have a list of you.
I'm going to copy and paste this.
And let's make this one now at so we'll change it from list to add.
And we're going to create one more collapse this a little bit here.
One more that instead of listing or or adding it's going to be removing or I think I called the delete,
so let's just call it delete.
And we'll call this deletes h html.
All right.
We will have to fill these out later and actually have some interactivity with a model.
But for right now, there is no models yet to speak of.
So we'll just keep on like this.
Let's connect these to a URL.
So we'll say inside of cars, so cars, new file URLs, dot pi and let's connect that.
So we say from Django that URLs import path.
Later on, I will want to use Django URL names.
So I'm going to say that my app name up here is equal to cars, which matches my folder name.
And then let's create our URL patterns.
Remember, this is a list.
And inside this list, I simply have.
The paths, so this path is going to be a list.
Forward slash and I need to import the views, so we'll say from dot import views, this will then allow
me to do the following views dot list.
So I have my list of you there.
And let's give it a name.
I'm just going to mark the names list.
So hopefully it's pretty obvious what's happening.
I'm just setting up my URL patterns to be the list.
So this is technically then going to be something like domain dot com slash cars slash list, add or
delete.
Those are essentially the only three pages on our website.
So let's do this one more time.
I'm just going to copy and paste this here.
And copy and paste it again.
And let's set it up for the other views, so it's ad.
Add.
At.
And this one's going to be it's actually delete, delete views, delete here and then delete.
OK, so so far, so good.
I have my usual patterns ready to go and I have HTML files.
There's technically empty right now, but I'll fix that in just a second.
The views are simply rendering those HTML files.
What I want to make sure is that my settings and the project level URLs is OK.
So what I'll do is I'm going to come to.
Underneath my car site, my car site, come to the URLs that profile here, and let's set up the path,
remember to include another URL configuration I have to import include.
So I'm going to import include.
And then here I'm going to create a new path.
This path is going to be cars forward slash.
Note here that there's already an advent path for that.
We'll be exploring that later on.
And then what I need to do is include and then as a string, cars thought euros.
OK, then we want to make sure that our application and our templates are all connected inside the project
level settings that pie file, remember for actually registering the application as an installed app.
We come to class apps that PI that's already created for you, and you check out that it has a configuration
name already here.
So this is under cars, the apps that cars config.
So I'm going to come to settings that pi and add that in to installed apps.
So a new string here that says cars, the apps dot and then remember, it's underneath apps.
We want cars config.
So that's what I'm adding here.
Cars config.
And then I'm going to add a comma.
Don't forget that comma.
Kind of a tough one to debug.
The other thing is, I want to make sure this templates directory at a project level is already associated
in site settings.
That pie, if you scroll down, remember, we have app directories is true, so we don't need to do
any additional registration for the templates inside our application.
However, I do need to register this as a top level template directory, basically telling Django,
Hey, look in this folder for templates.
Technically, you could use the Base Directory forward slash templates.
I prefer the more old school way which is importing OS and then using OS path join.
Either is OK.
You can build paths like this or build paths using OS.
So I'm going to come down here and just add that path to my directory will say, OS that path join and
I'm going to join my base underscore directory with the templates folder.
Go ahead and save that.
And now Django is going to make sure to look underneath templates in order to have basic HTML.
So the only thing I have left here as far as templates are concerned, is to connect base each HTML
to these other templates.
Inside cars add, delete and list.
So we'll come to base each HTML.
And what I'm going to do in my basic HTML is set up a bootstrap navigation bar.
This is actually pretty simple to do.
First things first, we set up the base dock.
Let me collapse the explorer so we can see this.
I want to add in the links to bootstrap.
That's easy enough to do.
I just come to bootstrap or get bootstrap BCom.
I come over here to just deliver.
Let's copy the CSIS and JavaScript links.
Put them inside the head of the table.
So that's the CSIS link.
And then let's grab the JavaScript link as well.
Although keep in mind, this is technically just the NAF bar that we're using here.
Not going to really run any JavaScript.
So we have CSS and JavaScript, and then I want to set up my nav bar.
So Nafaa, it's going to go up here and then I'll set up my content blocks down here.
So let's set that up now, the content.
So we'll say Block, and I'm going to call this my content block.
And then let's set up our.
And block.
OK, so we have block content and block and then a nav bar outside of it that I can then actually have
that be extended to the other pages.
So here what we're going to do, then we'll go back to bootstrap.
I'm going to go to docs, then I'm going to go to components.
Scroll down until you see NAV Bar.
And this is the component we're going to be using.
And there's lots of different things you can use here as a base.
Probably the simplest one is if you scroll all the way down to NAV Bar, you could use this item list
method.
But because of the fact that they're also using classes, you technically could use this simpler call.
I won't need this nav bar brand button, and I won't need this disabled or really home button.
Really, all I want is the things that look like features and pricing.
So I will copy this whole thing and then delete what I don't need.
So I'll copy that.
Let's put in the NAF bar outside the block, and then I'm going to delete this disabled link and I'm
going to delete this home.
And I also don't need this nav bar brand link, and instead we'll just have these links.
One is going to be for the list, one is going to be for AD, and then let's copy and paste one more
for delete.
Keep in mind is actually it won't redirect anywhere because I haven't added in the URL names list.
So remember, if we come back to you URLs that pay at the application level, I did give these all a
name, which means I should be able to refer to these using URL names in Django.
And we cover this back when we talked about templates, filters and tags.
We have the app name and then the specific path name.
So we just come back to base each HTML.
Let me collapse explorer and inside of each breath, I use my tags here.
So Curly braces, two percent signs call euro space.
And then quotes here for the name of the app is cars colon and then this is the name of the list was
or excuse me, the name of the view was list.
So now I get to copy and paste this.
For add and delete.
And we'll call this ad and we'll call this the delete.
All right.
Save those changes, your navar should now be ready to go.
Now we just need to add it and extend it into the other HTML files.
So we'll come back to explore.
And let's quickly open up the ad delete and list.
And all these will say the following.
Curly braces percent science extends and then we'll say it extends basic HTML.
Don't forget the quotes there, and then we'll set up our block.
So again, percent science there say block.
Content and then don't forget to end the block.
So then we'll say end the block coming.
Copy and paste this into the other ones real quick.
So they're all going to be extending basic HTML.
Let's go and paste that in as well.
And then the question is, what do we actually want in here?
Well, later on, we will be adding in more code, but for right now, just make sure everything is
working on a set list.
HTML.
On the list, page will say hitting one delete each HTML on the delete page and then here on air.
Have heading one that says AD.
Each time on this page.
OK.
So make sure you save all those changes, don't forget to save them across different files.
And let's run this.
Make sure everything's working.
Say Python managed not pie run server and turn.
Make sure we don't make any typos.
Looks like that's working.
Let me go to my browser and go to that link.
Remember, it's one two seven zero zero one, and then the default port was 8000.
However, if you just go to that in your browser.
So remember, if you just go to that in your browser, you should get a 404 because everything is defined
later on and cars forward slash list add and delete.
So I'm super zoomed in here, but we do see list each HTML.
And then let's make sure enough Bar is working.
I should be able to now click, add and get taken to the add html perfect.
Expand this go to delete and I'm on delete HTML.
Now we have some nice functionality with our nav bar and it looks good because of bootstrap.
I am super zoomed in here and not using any container.
So clearly this isn't the best looking site, but it definitely doesn't look too bad given the fact
that this is just almost raw.
It's HTML.
And now let's connect to the models and set up these forms lectures running a little long.
So we'll do that in Part two in the next lecture.
I'll see you there.