First views in my Django blog project
July 2, 2019, 11:49 a.m.
Last time I wrote how I had created a virtual environment and started a Django project called website. Then I also started an app called blog.
To continue building the blog application let’s find the directory with the website folder in it. There should be also blog folder, db.sqlite3, Pipfile and Pipfile.lock and manage.py file.
Now I can activate the virtual environment using `pipenv shell` command and then activate local server using `python manage.py runserver` command but we still have only Django startup page.
For me, the best approach to build an app is to start from a template (it can be a very simple one, to begin with) and a view. I also can’t forget about joining the template with the view through URL.
If we want, we can write HTML and CSS code on your own or use popular CSS frameworks like Bootstrap or Bulma. But this time I looked for a free CSS, HTML5 and Responsive template online. And I used Keep It Simple theme from Styleshout , not only because it’s got a minimalist design but also because it’s got not so many folders and files.
I will write about adjusting the theme next time.
Files used for creating an app’s layout should be saved in three different folders: templates for HTML files, static for CSS and JavaScript files and media for images or videos.
1. Create first templates
The templates folder can be created inside each app, for example:
`blog/templates/blog `
or one collaborative templates folder for every app in the whole project with sub-folders for each app.
This templates folder will be at the same level as website or blog folder in our project’s tree.
I used that approach.
But first, let’s make some adjustments in settings.py file.
In TEMPLATES list I changed the value of DIRS
‘DIRS’ : [ospathjoinBASE_DIR, templates’)],
without adding this line the template loader will look for templates in blog folder, not in a DIRS directory.
I am starting small. So first in templates/blog I create a new file directory, called index.html with very basic code:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Coding Journal</title>
</head>
<body>
<h1>Home</h1>
</body>
</html>
2. Create first view
I’ve got a template, now I need a view, so in blog/views.py I write my first class.
from django.views import generic
class IndexView(generic.TemplateView):
template_name = ‘blog/index.html’
I will change this class later.
3. Add URLs
Now I need a URL address to access my app on a server.
In folder website/urls.py file I added our app path('', include('blog.urls'))
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('blog.urls')),
path('admin/', admin.site.urls),
]
For the convention I put the comma at the end of the line.
The app doesn’t work yet.
Now in blog folder, I create urls.py file and start the file with imports
from django.urls import path
from . import views
and then add path to our first template
urlpatterns = [
path(‘’, views.IndexView.as_view(), name=’home’),
]
And now I can write in my terminal
python manage.py runserver
to see the first page:
I know, nothing fancy.
In the same manner, I create the About page.
1. Create about.html in templates/blog directory
2. Add class AboutView in views.py
3. And then the path to the template in blog/urls.py file, below the Index path
path(‘about’, views.AboutView.as_view(), name=’about’),
The beauty of the framework lies in the fact that we can have nav bar or sidebar or footer on every page of our application without repeating the code in each HTML file.
To achieve it, in the templates folder I create base.html file. But not in templates/blog directory but only in templates one. And this base.html will be our … base and other templates will be extensions of this page.
Now in base.html I can add basic code but in the body I remove HTML syntax and use Jinja. Jinja is the Django template language. A template contains variables and tags. Variables are written in double curly brackets {{ title }}. And tags, which control the logic of the template, use single curly brackets but with percentage signs {% block content %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
title>Coding Journal</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Now in index.html and about.html I can remove almost all the html code and leave only <h1>Home</h1> or <h1>About</h1>. But to make this pages work I need to add some Jinja tags.
At the very top of the file:
{% extends ‘base.html’ %}
and then I put h1 tag between {% block content %} and {% %} tags.
{% block content %}
<h1>Home</h1>
{% endblock %}
When we want to check if our About page works, we should add /about at the end of the 127.0.0.1:8000 address in our browser.
My code for this part is in the branch called firstT: https://github.com/maknetaRo/website/tree/firstT
Next time I’m going to show how I used the Keep It Simple theme in my blog app.
written by
