Next Lesson: Lesson 35: Back-End vs Front-End Development
In this lesson, you’ll learn how to create pages in Django for our homepage. We’ll also have some changes on Projects for a better website!
Let’s take a look at the sketch for our website’s homepage:
Well, what does this tells us? This tells us: “You should put the views.home inside the hobby and projects app.” Why? “Because Hobbies and Projects are both on our homepage.
So go to the hobby‘s views.py:
Now type these in:
We’re gonna take care of that home.html later. Here on portfolio‘s urls.py:
We’ll add something on Line 20 and Line 24:
Hopefully, you’re now familiar with all these.
Create templates/hobby/home.html
Now let’s create a new folder and name it templates:
Inside this folder, we’ll create another folder and name it hobby:
ENTER:
Good. That’s normal. Now inside this folder, we’ll create a new file named home.html:
ENTER:
Good.
‘hobby/home.html’
Now because this file is under the hobby app, we need to go back to our views.py:
And add hobby/ before the home.html here on Line 4 like this:
You may be wondering: “Why did we create a hobby folder, inside our hobby app? Do we really need to do that?” Technically, no, we don’t need to do that. We could just simply create a templates folder and then create a home.html straight. “Well, why didn’t we do that?” Let me explain.
Let’s say that two different apps have the same file name like the home.html. Inside the views.py, you’ve requested for that file. Where will Django look for it? Will it not get confused? Fittingly, putting our home.html inside another folder will really avoid the collision of files.
Oh! That reminds me of our projects app! We’ll take care of that later.
Our Homepage
For the meantime, let’s go back to our home.html:
And type these in (or anything that you want to say):
These sentences should be displayed on our homepage. After that, open up the Terminal:
Then activate your virtual environment:
And run the server:
Finally, let’s go to localhost:8000:
Nice! We definitely got this one down.
You know, I just realized that we should put the Projects on a different page, hence, a different URL. I know that it is not what we were planning here:
Although that’s on our sketch, can’t we be flexible when we got a better idea? Of course we can! So let’s do it.
localhost:8000/projects
On projects‘s views.py:
We’ll do this:
And then, as I have already shown you before, we’ll create templates/projects/projects.html:
And then here on our portfolio‘s urls.py:
We’ll do this:
Alright. That looks good now. Now let’s take care of our HTML:
Finally, let’s see if this works. This is our homepage:
Let’s add the /projects on the URL:
ENTER:
Yes! We did it! Let’s commit all these changes to GitHub:
This lesson seems to be just a review on how to create pages in Django. But don’t worry, ’cause on the next lesson, we’ll do something new. Besides, this new page doesn’t look that exciting, same case is with our new homepage. On the next lesson, we’re gonna do something about that, with the help of Bootstrap.