Creating Django Personal App – Part 1

As I said, we are going to build a personal website that will contain pages and a blog. The website will be made of two apps, one app will be the pages (home, about, portfolio, and contact) and the other app will be the blog.

The first app we want to create is named personal. It will contain the pages (home, about, portfolio, and contact).

The second app will be named blog and it will function as a blog.

Creating the first Django app

Before starting to create a Django app we have to make sure we are within the correct development environment, it is active, and you are within the folder where manage.py file is.

(MyWebsite) ddn_ro@Linux:~/PythonProjects/MyWebsite/mywebsite$ ls
db.sqlite3  manage.py  mywebsite

Let’s create the first app of our website by running the following command in terminal:

python manage.py startapp personal

Now, we have a new folder named personal which is next to the mywebsite folder, manage.py file, and db.sqlite3 file.

Create Django app

This folder contains a folder named migrations and a few other files which we will use and take a closer look later on.

Django app folder content

Installing the app

Our personal app is created but it is not installed yet. We have to install it into settings.py file. All you have to do is to add 'personal', to your settings.py file. The INSTALLED_APPS within the file will look like it is shown below:

Settings.py installed apps

INSTALLED_APPS = [
    'personal',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Creating the URL to our app

Now, we need to create a link that sends people to the app! This is done into the urls.py file.

Open the mywebsite/urls.py file and modify it to look like it is shown below:

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', include('personal.urls')),
]

On the first line I added include.
Within the urlpatterns I add the url to the personal app.

Create URL to app in Django

So, we included personal.urls but we don’t have it (there is no urls.py file within the personal folder).

Creating urls to the views within the app

So, the mywebsite/urls.py links to the personal/urls.py. The personal/urls.py will contain urls to the home, about, portfolio, and contact pages.

Let’s create the personal/urls.py file.

In this file we are going to return views, not include other urls as we did in the mywebsite/urls.py. There is a difference between the mywebsite/urls.py and personal/urls.py.

mywebsite/urls.pypersonal/urls.py → render views (views are web-pages).

The personal/urls.py will contain the following code:

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

We need to import views because this is what we want to serve to the visitors of the website. The . (dot sign) means “current directory” (the personal folder).

At the urlpatterns the first URL says: If the URL is just the domain name then show to that visitor the index from the views. In this situation, index is a function that renders a web page.

Creating views

Now, we have to open the views.py and create the index.

This is how views.py looks like with the index function created.

from django.shortcuts import render

def index(request):
	return render(request, 'personal/home.html')

So, we defined a function named index that renders the page named home.html which is located in the personal folder.

Creating the HTML pages

We don’t have the home.html file, so we have to create it. But, we don’t want to place it in the root of the personal folder. We are going to create a new folder for all of our templates and name it templates. Within the templates folder we are going to create another folder and name it personal. It seems to be redundant doing that but it is part of Django official documentation and I plan to follow it.

Before creating home.html I created header.html. You will understand why very soon:

This is header.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Website</title>
</head>
<body>

	<div>
		{% block content %}
		{% endblock %}
	</div>

</body>
</html>

It is a very simple HTML file but it contains two lines of code that are probably unfamiliar to you:

{% block content %}
{% endblock %}

This is Jinja templating and the lines above are called logic tags. We are going to create files that will replace those logic tags when the page is rendered.

Now we are going to create another file and call it home.html.

{% extends "personal/header.html" %}

{% block content %}

  <p>Welcome to my website!<br>
    My name is Dan. I am a programmer.</p>

{% endblock %}

So, the first line says: take the header.html (which is our template) and extend it, or add more content). Where add more content? Right between the {% block content %} and {% endblock %}.

So, basically, the home.html is the header.html plus whatever content I add in between {% block content %} and {% endblock %}. Right now all I added is “Welcome to my website! My name is Dan. I am a programmer”.

Now, there is one more way to include HTML within HTML, basically add HTML content to an HTML page.

Like we use extends we can use include within Jinja logic to include HTML snippets. I am going to place these snippets in a new folder called includes. The logic will look like below:

{% include "personal/includes/snippet.html" %}

Add the above logic tag to the home.html file so it will look like it is shown below:

{% extends "personal/header.html" %}

{% block content %}

  <p>Welcome to my website!<br>
    My name is Dan. I am a programmer.</p>

    {% include “personal/includes/snippet.html” %}
    
{% endblock %}

Let’s create the includes folder within templates/personal folder. Create the HTML file snippet.html and add the following code to it:

{% block content %}

  <p>This is the snippet.html</p>

{% endblock %}

Now, if we visit http://localhost:8000 we should see our home page.

Home page with Django

Leave a Reply