Create a web page with Django (logic and concept).

If you are reading this, you either clicked on the article (I am sure à 99% it's the case) or manually typed its web address (I really don't thing it's the case 🙃). What happens during the elapsed time between when you click on a Shumpaga's link and when it is displayed ? We will try to answer this question by constructing together a new web page! Are you ready ? Let's go!


What will we do? We will create a page which will list and thank all people who whill comment this article; if you want your name to be displayed, you know what to do after reading 😉! This article is intented to be accessible even with zero knowledge in programming. We will focus on notions instead of code (sorry for programming experts). Let's start from the beginning, this blog is coded with Django. What is it? To explain simply, it's a set of tools which organises the way a website works. The following diagram summarize this organization.


Progressively, we will explain this diagram. In a few words, when you (user) you click on a link of my blog (django), it receives your demand. It identifies which page you are looking for (url) and constructs the message (View) which will be sent back. This message contains all necessary information to display the web page. In order to construct such message, it will use a n incomplete template message (Template) which will be rendered complete with data coming from the database (Model).

Don't worry if it's still unclear, we will discuss each part in what follows. We will need 3 steps to reconstruct our page :


1 - Choose and configure the web address of the new page

Consider the first two parts of the diagram : user and django. When you (user) click on a Shumpaga's link :

  • Your browser question my serveur (django) in order to ask for the code corresponding to the web page you want to visit. This is called a request.
  • My server receives this request and checks whether it is valid. If it is the case, the code corresponding to the web page is sent. Otherwise, you are redirected to an error page.
  • Your browser receives the page code, interprets and displays it!

This is called a client-server communication. What is a server? You can see it as a computer, running 24 hours a day and whose mission is to serve a response to each request received.

For our new page, I propose we add "/remerciements" at the web address of this article. We obtain :

Here is the code which add this new address :

urlpatterns += [
    url(r'^article/comment-creer-une-page-web-avec-django-logique/remerciements$', views.tech_remerciements, name='tech_remerciements'),

Don't worry if you do not understand, what is important here is that we say to our program "here is the new page we handle" and "if someone asks for this page, tell views.tech_remerciements to answer".


2 - Retrieve information to display

This section talks about Views and Model parts of the diagram. Let's start with the Views. What is a view ? It's a part of the program which is responsible for reconstructing the code which will be sent back to visitors. Why do we reconstruct the code at this moment? Why don't we have a ready-to-send code ?

Here, we talk about the concept of static of dynamic web page. A static web page is a page which presents predifined information altering very slightly or not at all. Therefore, a static page code is often complete, ready-to-send as soon as a request arrives. Our new page can't be static because each time someone wants to see it, we want to retreive all comments, even the one published a second ago. The information displayed on that page varies depending on comments, which justifies the need to reconstruct the message at each request. It is a dynamic web page.

Here is the code which retrieves all comments in relation with this article :

def tech_remerciements(request): #1
   art = get_object_or_404(Article, slug='comment-creer-une-page-web-avec-django-logique') #2
   comments = get_object_or_404(Comment, article = art) #3
   return render(request, 'tech/remerciements.html', {'comments': comments}) #4

Again, don't worry if you do not understand everything. Here we define the view tech_remerciements (line #1). This view retrieves all comments in relation to this article (line #3). Okay, but from where ? From our database (this refers to the Model part of the diagram). At the end (ligne #4), we say to the server "in order to reconstruct the message which will be returned, use the file 'tech/remerciements.html' and the comments I just retrieved".


3 - Reconstruct the source code of the page

Here, we talk about the last part of the diagram : Template.

Have you heard of HTML? It's a computer language used to structure the content of a web page. The code received by your browser is for most part written in HTML. In the previous step, we defined a mechanism which will retrieve, at each received request, the last comment published. How can we add automatically those not-known-in-advance comments in an HTML page?

To address this issue, django provides 2 kind of tags : {% ... %} and {{ ... }}. These tags can be used in an HTML file to defined areas where some HTML code will be generated. Let me give a clear example. In the 'tech/remerciements.html' file, I added the following lines :

{% for c in comments %}
  {{ }}<br/>
{% endfor %}

Here, we say to our program, for each comment (c) in the list of comments, add to the html file, the name of the author ( followed by the HTML code for a newline (<br/>). When the server will read this file, the code will be replaced by lines which look like these :

Alexander <br/>
John <br/>
Kevin <br/>

We will end up with an HTML code without any django tag which will contain all the data we want to display.


We just saw how a program using Django is organised. There are plenty of system designs. The one we just saw is a mere drop in the ocean. The way you organise your program if your name is Facebook is not the way you organise your program if your name is Shumpaga. The constraints are different. Before coding any program, a system design step is required to make the right choices depending on the constraints.

I hope you enjoyed this article. Ask me all your questions by commenting the article. Moreover, if you do so, your name will appear on our new page 😉 :

Writing : Alexandre Gbaguidi Aïsse
Translation : Alexandre Gbaguidi Aïsse, Prodil Houanhou

Who am I?

My name is Alexandre Gbaguidi Aïsse, half beninese, half russian and my life can be summed up in two words: computing and music. Graduate of EPITA, an engineering school, I currently work for Bentley Systems as a software engineer. In my spare time, either I do or listen to music.

Leave a comment

Comments (18)

  1. Premier commentaire !!! HAHAHAAAAA

    by ZEF at 14:11, Jan. 13, 2019

  2. ZEF, ah c'est une course? haha

    by Shumpaga at 16:15, Jan. 17, 2019

  3. Je ne pensais pas que cela pouvait être si bien expliqué

    by Afi at 14:12, Jan. 13, 2019

  4. Merci Afi! Ecrire cet article m'a permis de me rendre compte de la difficulté d'un tel exercice. A la base l'article faisait 2 à 3 fois la taille de celui ci! héhé

    by Shumpaga at 16:17, Jan. 17, 2019

  5. Arrête de nous arnaquer et nous faire croire que c'est si facile haha. On sent que tu es passioné en tout cas. Hâte de voir la suite!

    by Boris at 14:53, Jan. 13, 2019

  6. Boris, j'ai eu peur en commençant à lire ton commentaire haha! Merci cher ami!

    by Shumpaga at 16:18, Jan. 17, 2019

  7. C top, du courage pour la suite.

    by Eden at 17:31, Jan. 13, 2019

  8. Merci beaucoup Eden! Rendez vous en Février pour le prochain article Tech ou ce Dimanche pour découvrir la nouvelle catégorie! :)

    by Shumpaga at 16:19, Jan. 17, 2019

  9. c’est la première fois Je comprends quelque chose en informatique😂

    by Kenopow at 18:36, Jan. 13, 2019

  10. Kenopow, tu ne peux pas savoir à quel point ton commentaire est important pour moi! C'est exactement ça l'objectif de cette catégorie! Merci pour ton retour cher ami. Rendez-vous en Février pour le prochain article Tech! :)

    by Shumpaga at 16:21, Jan. 17, 2019

  11. Belle initiative bro, étant en filière de génie informatique, ça inspire vraiment à faire autant ! Force à toi !!

    by David Akotch at 19:38, Jan. 13, 2019

  12. David Akotch, merci beaucoup le frère! Courage à toi!

    by Shumpaga at 16:40, Jan. 17, 2019

  13. J'ai commencé par suivre.... Puis c'est parti en couille.... Totalement embrouillé... 😕😕

    by Komy at 21:11, Jan. 13, 2019

  14. Top

    by Donald APOVO at 21:26, Jan. 13, 2019

  15. Très instructif pour un demi lettrés dans le domaine Merci pour tes précisions

    by Amoussou at 08:18, Jan. 14, 2019

  16. Merci Alexandre, pour les info. Courage à toi Et Vivement le suite

    by hugo at 08:38, Jan. 14, 2019

  17. Très beau détail, bien succinct mais très instructif. Je suis également étudiant en année de Licence de Génie Télécoms et Réseaux Informatique à l'université Catholique de l'Afrique de l'Ouest - Unité universitaire de Cotonou. J'ai compris ce que t'as expliqué et vraiment je te félicite. T'as du bosser dur pour toutes ses connaissances. Du coup tu deviens un exemple pour moi. Merci Mr Gbaguidi. À très vite !

    by GANGBE-CONCEIÇAO Darryl Rangel at 13:44, Jan. 14, 2019

  18. This design is incredible! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool!

    by at 10:29, June 5, 2019