Well, hello, Internet and welcome to part four of my Django Video tutorial series.
In this part of the tutorial, we are going to cover a lot.
We are going to be adding on to our previous project that was covered in part three of this tutorial
series, so you definitely have to watch that first.
And in this part of the tutorial we're going to cover CSS styling, static files, adding detail pages
linking to them, updating models, working with images and a whole bunch more.
Everything done in this tutorial is available in the resources directory and I have a lot to do, so
let's get into it.
All right.
So this is basically where we were.
We had this in our web page and this is the settings folder and everything is exactly the same on Windows
and Mac, except for a couple different things, which I will point out, and we want to make sure we're
in the correct directory on Windows.
You type dir to get this on Mac you type LS and we want to go into our virtual environment by typing
pip env shell and you can see it says tut three.
That means we're in the shell and then we can see what's inside of here.
I want to change into my project three directory and LS you can see Manage.py is right there and I could
run the server by typing in python manage.py run server if I'd like to, but I'm not going to do that
right this second.
Now what I want to do first is I want to come over here and create a folder that's going to hold all
our CSS files.
So I'm going to go into Project three, right click on it, say new folder, and then I'm going to type
in Static forward slash CSS and that's going to create that directory for us.
As you can see right here.
Now what I want to do is go and create that CSS file.
So I'm going to right click on it, say new file, and then I'm going to name that base CSS.
And there it is.
And now I'm just going to do some very minor styling.
I'm going to say I want to style my paragraphs and I want to add some padding to them.
So I'm just going to zero and then I'm going to add some padding on the bottom of our paragraphs.
This goes top right bottom, and then the next one would be left.
So I'm just going to throw in a little bit of padding on the paragraphs and what else do I want to do
here?
I am going to say that our main section and we're going to be changing the HTML, we're going to be
changing a whole bunch of different things.
I'm going to say that the padding for Main is going to be set for two M, I'm going to be using images.
So even though it's not in there yet, I'm going to go and say that I want my images to float to the
left, to the side of the paragraph which is going to be the article.
And I'm going to say that they are going to have a margin of ten just to start off.
And I'm going to say that my H three tag is going to have a margin on the bottom of one M And like I
said, as we play around with this, I'm going to go and change this up.
So that's my base CSS file for now.
Now what I want to do is go and create a base HTML template.
So and then I'm going to put home inside of it.
So I'm going to go over here to templates.
I'm going to say new file, I'm going to call this base HTML, I'm going to load my static directory.
So I'm going to come in and say static and that's going to give me access to my my CSS file.
So load static and then I'm just going to put in some just generic basic HTML.
So doctype HTML and HTML and define my language as being equal to English.
I'm going to go and put in a header section of course, to load the CSS files.
I'm going to go and give this a title of Django articles, whatever you want to call it, and then to
load the CSS file, I'm going to say link H reference is equal to and then to get the static directory
where I have everything stored, I say static and then I'm going to say CSS, which is that directory
inside of the static and then base dot CSS close off that tag and then just say that this is a style
sheet.
Close that off.
Close off.
The heading section, and then I'm going to define what's going in the body section.
And here we're going to be pulling that information from home dot HTML.
So it's going to be block content and that's where I'll define that in a bit.
And then I'm going to say end block content and then close off the body section and then close off the
HTML altogether.
So there you go.
That's going to be the base template that we are going to use for all of our other files.
So let's go and open up home dot HTML.
Also in the templates directory, as you can see right here.
And what I'm going to do with this is, well, first off, I have to come in here and extend or pull
in the information in the base HTML template.
So I'll say extends and then base HTML close off that tag.
Then I'm going to define the block content.
Let's go and get rid of this part right here.
I don't know.
I might add it in later.
I just want to clear up what's going on here.
Then inside of this, what I'm going to do is put main and I'm putting a lot of this in here just for
styling purposes, and I'm still going to use for article and all articles list.
So let's bring that up there.
I'm going to put a section area inside of the HTML after this.
I'm going to put in an article tag.
I'm going to have an image in here in a bit, but I don't have one in here right now, so let's just
leave that for a little bit later and then I'm going to close off the article part of the HTML and close
off the section part of the HTML as well.
And then after that close off main.
So all those will be inside of sections with articles defined.
Then I'm going to have to end the block content and block content, close off that tag and everything
else there looks fine.
So let's save that.
And I think I want to add a wrapper on the base also.
So I'm going to go into base again, open that up and I'm going to add a wrapper here, div wrapper.
Then I'm going to use just for styling purposes again.
Let's save that.
That's in Base.html.
All this stuff is in the resources directory step by step.
And also, since I made that change, why don't I go into my open up base CSS again, add a little bit
more styling to this.
So let's say that I want to go and across the whole site, I want to come in and define whoops like
this and then I'm going to define that the margin is going to be zero and padding is going to be zero.
And I'm going to go and add some just background color styling here a little bit.
So I'm going to say background color and I'm going to have the background color for the body be gray,
and I'm going to change the font size up here a little bit.
Let's have it be 62.5%, which is like a standard thing.
And again, padding is going to be zero and margin is going to be zero.
Anything else?
Oh, yeah, I added a wrapper to that.
And the wrapper is a class.
And if you don't know CSS very well, if you want to be able to reference a class, put a dot in front
of it and then wrapper is going to allow me to do a little bit of editing there.
And this isn't going to be the prettiest site on earth.
I'm just going and adding just a little bit of styling to it just so it looks a little different here.
I'll set font size and 1.6 m and margin for this is going to be zero and auto so that it changes up
and as the web page changes width and background color for this, I'm just going to have it be white
and and did I do everything.
Oh I also put didn't I put header inside of here.
Nope I guess not.
But I do have main inside of there so that'll be the last thing I style.
Okay.
So I'm going to go main and I'm going to say padding for Main is going to be two M.
I know this is some stuff that I guess Django is a web development thing, so you should know something
about CSS and so forth.
All right.
So let's just see how this changed a little bit.
Oh, I have to first start my server Python manage.py run server and everything looks okay and let's
load it and it has a problem getting the CSS file.
Let's figure out why that's happening.
Oh I know why.
I forgot to add it to settings.
So go into your settings file, come way down to the very bottom and we're going to do here is we're
going to define static route.
Equal to and then I'll just be empty quotes.
And then after this, we're going to say static files directories is equal to and OS dot path dot join
and then throw static inside of there like that with a comma.
Now let's see and it looks like it's working now and reload it.
Whoops.
And I also have to change.
Get that out of there.
All right.
So save that and reload it.
And now you can see there's a little bit of styling on it.
Like I said, it's not going to change the world.
I just wanted to do a little bit of styling on it so it looked a little bit different.
All right, so now what are we going to do?
Well, I want to have this set up so that you can click on these titles right here and then see the
individual articles and a whole bunch of other different things.
Like, for example, our paragraphs are all floating into each other.
I want to get rid of that fix that, fix a whole bunch of things.
But what I want to do first is I want to add individual article pages, and I'm going to use detail
views this time.
So what I'm going to do is go into articles, views, so articles, views, open that up.
We're going to come up here and where it says list view, I'm now going to create a detail view.
So detail, view.
And then come down here after my home page view and go Class Article.
Detail.
View.
And detail.
View.
And here define my model again which will be article just like before.
And then template name is going to be article detail which I'm going to create here in a second.
And that's it.
I have that all set up now.
I need to create the article detail template.
So come over here to templates and new file and then go and give it the same name that I defined in
the view.
So article detail, dot HTML.
And then inside of this is going to be very simple.
I'm just going to come in and extend my base again.
So extends base dot HTML like that and then define our block content block content, close off that
tag and I'm going to define a main section inside of here and section again, just like we did whenever
we had our home page.
And then I'm going to have an H3 tag.
And if I want to go and get the article title, I just say article title and then close off that H3
tag, then I'll just define the article part of my HTML page.
And we have everything inside of paragraphs and I can say article.
Text.
And if I want the line breaks to show up in the paragraphs as I define them inside of the database,
I can just come in and put a pipe character there.
That's what that is on the right side of your screen or right side of your keyboard, far right.
And then I just type in line breaks and that's going to go and put those inside of there.
And then I can close off my paragraph tag.
Close off the article.
Close off the section.
And then finally close off Main.
I guess not totally.
Finally, because we also have to close off and block content.
And there we go.
Now, after I have that set up, I need to go and add the article detail URLs to my articles urls file.
So articles urls.
Open that up and here I'm going to use a primary key to refer to those.
I'm going to also have to go and get our view.
So it's article, detail, view.
Got that added in.
And then in the URL patterns, I'm going to say path and article forward slash and we're going to use
a primary key here.
Each of the individual articles is automatically going to have a primary key that is associated with
it.
And then after that I can go article detail.
Vue as Vue.
Cause.
Once again, Article Detailview is a class and then I'm going to give it a name, which is going to
be article detail, which we will use here in a second.
Throw a comment in there.
Everything else is good.
Now what I want to do is update my home template so that I can click on those links and then get details.
So right like this.
And then inside of here, if I want to be able to link to the detail page right here where I have article
title, I'm just going to get rid of all that altogether.
Well, I don't have to get rid of it.
I'm going to leave it in there because I am going to use the name, but I'm going to go a reference
to to go and create a link.
So like this.
And then I can use a tag to go and get the article URL, the article detail URL.
So I just have to refer to it with its name.
So it's article detail and then say I want to look up the article based off of the primary key for our
current article that we have here, close off that tag and then right after this close off the beginning
of our link tag HTML tag, use the article title as the name of the link and then close off the link
itself.
Right like that.
And it should load.
And if we see don't mess with drop dropbear click on it and you can see we can go to the individual
articles now by clicking on the title and we can do styling because that looks kind of ugly, but we're
not going to.
All right.
So you can do that for homework or something like that.
All right.
So now what I want to do is I want to update my models so that I have a author which is going to be
used as a foreign key to look up all of the individual articles.
So once again, go into articles, models, open this up.
And here I'm going to define a author.
So I'm going to say author is equal to I'm going to show you how to change your models multiple different
times and how to correct things and so forth.
And foreign Key and I talked about databases multiple different times, just a unique identifier for
our authors.
And then I'm going to say author, user, and this is going to handle authentication for our different
users inside of our website.
And then what I want to do is I want to say that if this object is ever deleted, I want to delete all
references to it across the entire database.
To do that, you say on delete is equal to models and cascade.
Then I'm also going to give it a default value because we already have articles inside of there that
can cause some problems.
So the default is going to be one, which is going to be the main super user who is me currently.
And basically we are defining here a foreign key so that we can define that an author can have many
different posts and then we'll be able to identify our users using the built in authentication system.
Like I said before and everything else there is pretty much good to go.
Another thing I'd like to do is inside of the admin section, it's showing object instead of the title.
So what I want to do is I want to have any time that this object is printed, I want to print out the
title of the article instead of printing out nothing.
So to do that I say define two underscores.
Make sure you put two underscores.
Two more underscores and self.
And then in this situation, we will just return the title for our article.
And everything's looking good there.
Now what we need to do is migrate our our model over to our database.
To do that, of course, we have to shut down our server.
So hit control C and then I'm going to type in Python.
Well wait a second here.
RLS Yep, manage.
PY I'm in the correct directory.
Pull this out here so you'll be able to see it.
So I'm going to say Python manage.py make migrations and if this is in any way overwhelming, you just
need to make a bunch of sites, just make a whole bunch of sample sites and after a while it'll all
start to click.
And if you get a message such as provide a one off default, what you would do is it's basically giving
you an error, saying there is no default value set for the articles you have already.
What you're going to want to do is just select the first option and then type in the number one and
it'll automatically use one for that.
But if you follow all the directions I gave you here, you should not see that.
But if you do, it's no big deal.
Just one.
And then type in one again and everything will set.
Everything will be great.
So migrate articles and everything is looking good there.
And if we would go into our admin section, well first off we have to start our server manage run server.
Everything looks good there and dash admin is what I've just typed in there.
Okay.
Run that and you're going to have to type in your username.
And you can see here is articles.
And if I click on it, you can now see jackalopes.
You know, everything is using articles instead of that generic what we had before.
So now what I want to do is I want to go and start working with images.
Now to do that, I'm going to have to create a media folder.
So I'm going to go into my project that I have here, right click new folder, and I'm going to call
this media.
So like this media.
And now I have a media folder and that's where all my images are going to go.
Now I want to go and add a couple images to it, so I'm in the media folder in inside of here and I'm
going to go and paste in two pictures.
I'm going to put those in a resources directory as well.
It's just a drop bear picture and a jackalope picture and those will now show up inside of Atom.
So there you see both of those pictures.
Now what I need to do is I need to go into settings and define my media information location.
So I'm going to say media route is equal to and OS path dot join and I'm going to say base directory
and media and then I'll say media URL is equal to and then media again like that and save the settings
folder.
And now what I need to do is update my project URL.
So project three URL, open that up.
Am I in the correct one?
No, this is the wrong one.
Where is the project one?
Let's close that one project.
Three URLs open up the wrong one.
Make sure it's this one, not articles.
Okay.
Now what I'm going to do is import the settings information.
So I'll say from m dot import settings.
And then from Django.
Contrib static files urls import static.
And I'm going to copy this, paste that down inside of there.
And then I'll also have static and this is going to be URL patterns, URL patterns.
Now if you would like to add to your URL patterns array, another way you can do it is you can say URL
patterns like this and then go whoops plus equal to and I'm going to go static files, URL patterns
like this.
And then once again URL patterns plus equal to static.
Sometimes it's easier to do this because this can get kind of full and kind of hard to read.
And then I'm going to say media URL document route.
Equal to settings dot media underscore root and you can just copy and paste this if you'd like.
And I got that all set.
All right.
And that's once again in the project three directory URLs file.
So save that.
And now if I want to work with images however, so I'm going to hit control C to shut down the server,
I'm going to need to install pillow.
And to do that I'm going to have to exit out completely from my shell, my virtual environment and then
install pillow.
To do that, you just go.
Pipenv install and pillow.
Equal to 7.000.
That's what the current version is.
And Pillow is being installed.
Everything looks good.
Then I need to go back into my shell.
Well, it's Pipenv.
Shell.
There I am.
I'm back in it again.
And now what I want to do is go and add my images to the model so that the database knows about the
images.
So jump over into models.py which are inside of the articles directory.
This one right here and I'm going to call this photo.
So we'll go photo is equal to models dot image field and this will not work if you don't have pillow
installed.
So I'm going to say upload to equal to.
And I'm going to call this gallery and let's go and give it a default value because once again, we
do have things inside.
We already have articles inside of there.
So I'm going to give everything the drop bear image if there's nothing set for it.
So got that set.
Now I'm going to have to migrate.
So come over here inside of the terminal once again.
So I'll say Python manage.py make migrations.
Whoops, I'm in the wrong directory.
I need to change into the project directory.
And there's manage.
All right, so once again, go make migrations.
Importerror cannot import static URL patterns and I see what I did over inside of Urls.py which is in
the project three directory.
I need to come in here and where it says static URL patterns I need to go and change that to static
files url patterns.
So that's saved.
Come back over here again and let's migrate again.
Make migrations.
And that worked.
And then I just need to migrate everything again to the database.
So manage.py migrate articles, everything's good.
All right, so we got everything set up there.
Now what I want to do is update my home page to go and show those images.
So let's just move this out to the side here and go to the home page, Come right here after article
and I'm going to put my picture inside of there.
So I'm going to say image and source is equal to.
And if I want to go and get the photos that are assigned to each of the articles, I just go article
photo and then its URL and I can go and also throw in an alt if I'd like so alt equal to and let's use
the article title for that.
So article title.
And then I also want to add the styling to it.
So I'm going to say that the class is equal to art image, which is what I defined that I wanted all
my images to have and my CSS file base, CSS, where is it?
Art image.
And there's a dot there because it's a class.
So there it is.
And that's all I need to do for those pictures.
And I'm going to go and copy this and also use it inside of the detail page.
So where is that at article detail dot HTML and I'll put that right here once again right before the
paragraph.
So that's saved.
Let's also go and get this line breaks thing here and put it on home if it isn't already there and it
is not there.
So let's throw that there and let's see what we got going on.
So let's go and run the server Python Manage.py run server, see if we have any errors.
Looks like it might be working.
All right, that's good.
Come up here.
Boom.
Uh oh.
That's kind of frightening.
So there are my default.
You can see that there's line breaks in there now.
So what we need to do is resize this koala bear so he doesn't look so crazy.
All right, so base CSS and art image.
Let's just go and have his height be equal to 100 pixels and width again.
100 pixels.
And let's come in and reload it and it's not reloading.
So I want to do a force reload so that happens.
Control shift.
R And there you go.
So now we got our pictures inside of there and we have let's go.
Yep, we have a pictures over here.
And like I said, I've lined this up a little bit better, but I don't want to work forever on that.
That's just CSS.
That's nothing really specific to Django and I want to go and change the images so that we show the
right images for each of these guys.
So I'm going to come in and I'm going to go into my admin section again.
Articles and jackalopes are real frightening and if I come down here, I have it's assigned for Dropbear
because that's the default.
I'm going to change this to the jackalope which is right there and click on I am in the right place,
right?
Yeah, I think so.
Open and save.
I don't know if that took or not.
I think it did.
All right, let's go and check it out.
Jump out of here.
Jump there.
And now we can see there's the jackalope.
All right.
So pretty cool stuff.
Hopefully you guys enjoyed that and you learned a lot.
And like always, please leave your questions and comments down below.
Otherwise till next time.