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!

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.

Next Lesson: Lesson 37: Album Template From Bootstrap

This article was written by Zeddrix Fabian

Zeddrix Fabian became one of Jehovah’s Witnesses on February 21, 2016, and started regular pioneering last March 2020. He wants to volunteer at Bethel⁠—that is his goal. After going to both private and public school for 10 years (Grade 1 to 8 in private; Grade 9 and 10 in public school), their family started trying homeschooling when he leveled up to Grade 11 last 2019. (Continue reading on ABOUT ZEDD menu)

Leave a Reply

Your email address will not be published. Required fields are marked *