4.1 Start With A Single Click

The first page when you enter this website called home page, where you can see the tab above, and the list of the post as the content of the page. Maybe it is taken for granted that the website is "supposed" to show a new page when we click on any link of the current page, but how is this workflow implemented in Django?

To follow this section, please get the source code of this website ready, which is in the code section of this repo. Also, note that this is NOT a tutorial which teaches from scratch, rather, you should be familiar with the most basic concepts of Django. If not, please follow the tutorial of Django here.

urls.py (under blog folder)

Any link of the website is mapped with an URL, which is defined in this file. In this example, home page is defined here:

url(r'^$', views.PostListView.as_view(), name='post_list'),

views.py

So in this page, the function of PostListView in views.py is called:

class PostListView(ListView):  # home page: show a list of post
    model = Post  # what do you want to show in this list: post, so model = Post

    def get_queryset(self):  # Pythonese SQL query
        return Post.objects.filter(published_date__lte=timezone.now()).order_by('-published_date')

The basic idea is that this class will list all the posts from the database in the order of published_date, but how to display the posts on the webpage the way we see? To understand this, we have to explain the way PostListView works. This class basically inherits the generic class of ListView provided in Django. Since we define model = Post, by default, ListView will look for any template page (.html, under blog_website_to_understand_Django/blog/templates/blog/) that uses post_list to show the posts, and in our case, it is post_list.html.

post_list.html

    {% for post in post_list %}
        <div class="post">

            <h1><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h1>  <!-- List all the post, going to the post page when clicked-->
            <div class="date">
                <p>Published on: {{ post.published_date|date:"D M Y"}}</p> <!-- this is template filter, showing published date is a certain format -->
            </div>
            <a href="{% url 'post_detail' pk=post.pk %}">Comments: {{ post.approve_comments.count }}</a>
        </div>

In this section of code, it iterates all post in post_list, and for each post, it lists the title of the post, along with the published data, and the number of comments. Additionally, we can see that the title of the post has been attached with a link, which will display the content of the post (post_detail makes the intuitive sense) by calling an URL whose tag is post_detail in urls.py:

url(r'^post/(?P<pk>\d+)$',views.PostDetailView.as_view(), name='post_detail'),  # show a post when clicking one

It calls PostDetailView defined in view.py:

class PostDetailView(DetailView):  # show the content of the post when clicking
    model = Post  #

It inherits Django's generic DetailView, which is similar with ListView, to look for any template HTML page that uses post tag in it, and it is post_detail.html in this case, to display the details of the post.

This is the first example of showing how the source code works in order to present the website you see and interact with. Basically, each link of each page of the website will have a URL, which maps a view class, which will run some query of the database (model), and the corresponding template HTML file will use the template tag (post_list in this case) to obtain the query result, and display them in a webpage, and the format how the content (post, in this case) will be defined by this template HTML file. The workflow of link - URL - view class - query of the database - display results on the corresponding HTML is the basic pattern of Django in source code when you navigate through the website.

Another example

Another example will be given in order to explain more clearly: Take a click of About of the home page as another example, how is the flow of source code in order to show the webpage with About me... ? As explained above, each button will be mapped with an URL defined in urls.py, and when we place our mouse on About button, it shows the URL at the left bottom of the browser as 132.206.14.123:8000/about/ or we can find it when we clicked the button and it will show on the search bar of the browser. Again, it is defined in urls.py:

URL(r'^about/$', views.AboutView.as_view(), name='about'),

and as usual, it calls AboutView:

class AboutView(TemplateView):  # show about page
    template_name = 'about.html'

which explicitly defines which HTML file it will display, in this case, it will display the content of about.html.