Django Tutorial 5 – MyNotes App

Share the blog with your friends
  •  
  •  
  •  
  •  
  •  
  •  
  •  

We have added the front-end template to our project. Now, We need to configure how URLs for our project are going to be handled. Create urls.py file with the below content inside notesapp folder.

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


urlpatterns = [
    path(r'list', views.index, name='list_notes'),
]

We have configured in such a way that, when we hit ‘http://server/list’, it should look for index method in views.py file which handles the request and return the content. But, We need to distinguish each app we create in mynotes project. In order to do that, update the urls.py file in mynotes project folder with the below content.

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('notes/',include('notesapp.urls')),
]

We have added “path(‘notes/’,include(‘notesapp.urls’)),” line to urlpatterns list. This includes the urls configured in notesapp Django app. And since mynotes.urls has been configured as the root url file, “notes/” will be the prefix for all the url patterns in notesapp urls.py file. After this change our URL to access the index method will become like below
http://server/notes/list
Add the below code to views.py to create index method which we mentioned in urls.py

rom django.shortcuts import render, HttpResponse

# Create your views here.

def index(request):
    return render(request, template_name='notes_list.html')

Refer the below diagram to understand how the URL routing happens in Django.

Figure 1: Django URL routing
Source: https://mdn.mozillademos.org/files/13931/basic-django.png

URL Routing in Django in short:

  1. When you hit the URL in browser, Django looks for a pattern match in root urls.py file which is mynotes/urls.py file in our project.
  2. From urls.py file, it looks for what is the view function the request to be sent for processing which is index method in views.py file.
  3. View returns the response for the request received
  4. return response will be rendered in browser.

You could have guessed that we are simply trying to render the notes_list.html which we had prepared earlier. But the output was not satisfactory without styles and scripts like below.

Figure 2: notes_list output

The reason for this is the page is not able to locate the static files. Let’s see how to make the template to use static files in Django way.

Update the base.html with the below content and notice the href and src attributes while referring the static files.

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>MyNotes</title>

  <!-- Bootstrap core CSS -->
  <link href="{% static "assets/vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="{% static "assets/css/heroic-features.css" %}" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Track Your Notes Easily</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Create New</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">View Notes</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  {% block content %}
  {% endblock %}

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright © MyNotes 2019</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="{% static "assets/vendor/jquery/jquery.min.js" %}"></script>
  <script src="{% static "assets/vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>

</body>
</html>

{% load static %} will enable us to use static URL inside the template. By updating the base.html content, see the page output below which we expected 🙂

Finally, we could complete the URL request handling by displaying the page without any issues. Next, we need to learn a bit about Django ORM stuff. We will discuss that in next lesson.

  •  
  •  
  •  
  •  
  •  
  •  
  •  

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *