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
1 2 |
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:
1 2 3 4 5 6 7 8 9 |
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')), ] |
1 2 3 4 5 6 7 8 9 10 |
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'), ] |
1 2 3 4 5 6 7 8 9 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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:
1 2 3 4 5 |
{% 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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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. 🙂