Django – Making a simple web app with 4 links

The idea of the article is to show how to make a simple Django App, with 4 links, each of which navigates to a specific page. The whole code of the “app” is in GitHub, here:

https://github.com/Vitosh/Python_personal/tree/master/JustProject. In general, these are the 4 pages:

Not a lot, but if you take a good look at the URLS, you will notice that we have 2 apps actually – justcode and vitoshacademy. In order to create these two apps, the following code is called from the console

django-admin stratproject vitoshacademy
django-admin stratproject justcode

And these are having each two separate pages, as displayed on the picture below:

So, there are “python.html” and “vba.html” for justcode and “about.html” and “info.html” for vitoshacademy. In order to make the simple 4 pages working, we need to assign the URLs of the main app JustProject (JustProject/JustProject/urls.py) to the local apps:

VitoshAcademy (JustProject/VitoshAcademy/urls.py)
JustCode (JustProject/JustCode/urls.py)

This is done the following way:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('vitoshacademy.urls')),
    path('vitoshacademy/', include('vitoshacademy.urls')),
    path('justcode/', include('justcode.urls')),
]

from django.contrib import admin
from django.urls import path, include

from justcode.views import show_vba, show_python

urlpatterns = [
    path('', show_vba, name='justcode vba'),
    path('vba', show_vba, name='justcode vba'),
    path('python/', show_python, name='justcode python'),
]

from django.contrib import admin
from django.urls import path

from vitoshacademy.views import show_info, show_about

urlpatterns = [
    path('', show_info, name='vitoshacademy index'),
    path('about/', show_about, name='vitoshacademy about'),
]

The Views of the 2 smaller apps are the ones, that hold the logic and navigate the direction to which the app should go in order to find the html files:

from django.shortcuts import render


def show_info(request):
    context = {
        'some_title': 'vitoshacademy.com INFO',
        'info_info': 'The site is available at https://vitoshacademy.com',
    }
    return render(request, 'vitoshacademy/info.html', context)


def show_about(request):
    context = {
        'some_title': 'vitoshacademy.com ABOUT',
        'info_about': 'We can talk about vitoshacademy.com a lot!',
    }
    return render(request, 'vitoshacademy/about.html', context)

from django.shortcuts import render


def show_vba(request):
    context = {
        'some_title': 'VBA Information',
        'info_vba': 'VBA is not a macro!',
    }
    return render(request, 'justcode/vba.html', context)


def show_python(request):
    context = {
        'some_title': 'Python Information',
        'info_python': 'Python is a Dutch snake!',
    }
    return render(request, 'justcode/python.html', context)

So, the views navigate towards the html folders. However, the html folders look a bit strange – e.g. vba.html consists only of these 4 lines:

{% extends 'shared/site.html' %}

{% block site_content %}
<h1>{{info_vba}}</h1>
{% endblock %}

And yet, there are some links on the top of it. These are in stemplates/shared/site.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    {% include 'partials/nav.html' %}
    <div>
        {% block site_content %}
        {% endblock %}
    </div>
</body>
</html>

If you take a good look, this one includes something called partials/nav.html, which is where the actual links are. They are present only once, but used for each page:

<header>
    <ul>
        <li>
            <a href='{% url 'vitoshacademy about' %}'>About</a>
        </li>
        <p></p>
        <li>
            <a href='{% url 'vitoshacademy index' %}'>Info</a>
        </li>
        <p></p>
        <li>
            <a href='{% url 'justcode python' %}'>Python</a>
        </li>
        <p></p>
        <li>
            <a href='{% url 'justcode vba' %}'>VBA</a>
        </li>
    </ul>
</header>

Well, this is all I guess. The rest would concern some changes in the settings which is present in GitHub. 🙂

Django – Making a simple web app with 4 links

Related posts: