Creating Our Homepage
Making our first HTML page
So far, we have not had our own page being displayed, we have been working on django's page. Now let's have our own pages. Let's begin with creating an HTML page, which will be our homepage. We will use it to replace the message displayed by django when we visit the homepage. This means, our page will show instead of django's congratulatory one.
Django has its own way of teaching you how to organise your files and folders and we are about to delve into something like that practically. Please pay keen attention to what we are going to do. Within your accounts folder, create a new folder and call it templates. Now, within that templates folder, create a new folder and call it accounts. Now within that accounts folder, create a file and call it index.html
So now if we want to open the index folder these are directories we would have to go through:
Nounews/accounts/templates...
/accounts/index.html
Within the index.html file, let's write some basic HTML, Welcome the user to our Nounews project. You could use this to do that and don't worry about the basic look now, we will get something more graphic later:
<html> <head> <title>Our News</title> </head> <body> <header> </header> <main> <h3>Welcome to Nounews</h3> <p>You are at the right place for your latest and hottest news!. We report as it happens.</p> </main> </body> </html>
The above HTML has some tags that do not have any content within them yet, that is because we will work on those later. Let me take the opportunity to take you through each of these tags briefly:
<html>
The html element represents the root of an HTML document.
<head>
The head element represents a collection of metadata (descriptive data) for the Document.
<body>
The body element represents the content of the document.
<header>
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
<main>
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Calling Our HTML in views.py
Now, let's configure our project to recognize the html page we just wrote.
We need to call the page we just wrote in our views.py, This is where we define the logic of what should be calculated or not, and finally be return to the user. Please head over to the views.py file and let's begin:
Django has a render method (function), which can show a page or any data we want it to show. We will write a basic function in python and then call the index.html file we just wrote and then
render(present) it to the user when the user visits a particular url within our project. That last part about the user visiting a particular url, we will implement in the urls.py I asked you to create earlier. So, if you have not created it, please do create a urls.py file in the accounts folder, where views.py is.
Now let's head over to views.py file located in accounts folder and add our function that will present the HTML page (index.html) that we just wrote to the user. In the views.py file, paste this code:
def index(request): template_name = "accounts/index.html" return render(request,template_name)
Paste it right under this: # Create your views here, so that your views.py file now looks like this:
from django.shortcuts import render # Create your views here. def index(request): template_name = "accounts/index.html" return render(request,template_name)
Now, as I said earlier, we need to define the url on which the user can view this page so let's head over to urls.py file which is right where views.py file is and add the following code:
from django.conf.urls import url,include from accounts import views urlpatterns = [ url(r"^$",views.index, name="home"), ]
Any request coming to a django project first goes to the project itself before it is redirected to a particular application like our accounts application. Therefore if you take a look at your project, you will find a urls.py file located where settings.py file is. This should be in the project's main folder.
That file currently looks like this:
"""Nounews URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]Now, we are going to make very few changes to it. The first one, I want you to replace this line:
from django.urls import path
with this line:
from django.conf.urls import url,include
The second, this is to replace this line:
path('admin/', admin.site.urls), with this line:
url(r"^admin/",admin.site.urls),
The last thing is not a replacement but an addition, add this line right after the line you just modified:
url(r"^$",include("accounts.urls")),This will make your file look like this:
"""Nounews URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.conf.urls import url,include
urlpatterns = [
url(r"^admin/",admin.site.urls),
url(r"^",include("accounts.urls")),
]So, what did we do?
We are routing, or directing all requests that come to our site's url forward slash admin(http://127.0.0.1:8000/admin/) to django's admin page. That's what this line: url(r"^admin/",admin.site.urls), does. And then we are directing all request that come to our site's base url (http://127.0.0.1:8000), that is the raw url of our site without anything else added it to accounts.urls, that is, the urls.py file located in accounts and I hope you remember that we did something there earlier.
So basically, when a request comes to the project, it is redirected to the appropriate application's urls.py and then in that application's urls.py, an appropriate function from views.py of that application is called and then also in that function, appropriate calculations and validations are done and then we finally show the user the page they are looking for.
In this particular case, when someone visits our homepage, the request is redirected to the urls.py file we wrote in accounts folder and then the function we called index will be called upon from the views.py. This function will also finally call upon our index.html and the boom, our user has our homepage.
windows
python manage.py runserver
Linux
python3 manage.py runserver
Now visit: http://127.0.0.1:8000/ or simply click view site from your admin dashboard if your admin is already opened. You should see what we wrote in the index.html file appearing as:
Welcome to Nounews
You are at the right place for your latest and hottest news!. We report as it happens.
Congratulations again !!!
Next, we will be working on the beauty and responsiveness of the homepage.
Comments
braakwesi7
cool
April 2, 2020, 6:21 p.m. Reply