Django Tutorial 4 – MyNotes App

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

In this lesson we are going to prepare the website template. I have chosen a very simple and responsive template from (https://startbootstrap.com/previews/heroic-features/). I have modified the template with title and few other minor changes to that template. I have included our menu as well in the template. I have given the screenshot of our initial template below. You can download our modified template from this link(Download)

Figure 1: Website Template for MyNotes

We need to place this template files in Django folder in appropriate folders. Before doing that, we need to have a look at what is static directory in Django and how to configure that. When we start developing a single application, it may look simple to manage the static files which are the assets like images,style sheets, script files. But over the time, it will become hard to manage these files for multiple applications. To reduce that pain, we use STATIC_ROOT configuration in Django which tells the server where to look for static files. I have updated our settings.py with the below configuration to do that.

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Django provides an option to collect all the static files used from another applications to this newly configured folder. Run the below command to fetch all the static files from Django Admin page to this folder.

(djangoenv) arockia@arockia-pc:~/Scripts/Python/eazytutor_work/mynotes/mynotes$ python manage.py collectstatic

119 static files copied to '/home/arockia/Scripts/Python/eazytutor_work/mynotes/mynotes/static'.

If you check your static folder inside the project directory, it will have one folder named admin with admin related static files. Now, I have created one folder named “assets” where I am going to copy our static files from our template. Find the directory structure now

mynotes
├── mynotes
│   └── __pycache__
├── notesapp
│   ├── migrations
│   │   └── __pycache__
│   ├── __pycache__
│   └── templates
└── static
    ├── admin
    │   ├── css
    │   │   └── vendor
    │   │       └── select2
    │   ├── fonts
    │   ├── img
    │   │   └── gis
    │   └── js
    │       ├── admin
    │       └── vendor
    │           ├── jquery
    │           ├── select2
    │           │   └── i18n
    │           └── xregexp
    └── assets
        ├── css
        └── vendor
            ├── bootstrap
            │   ├── css
            │   └── js
            └── jquery

Now, we are ready with asset files. We need to place our html files to the proper place in Django directory structure. Create “templates” directory inside the app(notesapp) and place the index.html to that folder by renaming that to “notes_list.html”. We will be developing multiple html files and we can’t keep on copy and paste all the portion of that html page. And if we follow that approach, we will be in trouble. Let’s assume the following scenario. If there is a change in menu or any place which appears in all the pages, we have to go and change each page manually. Instead of that, let’s separate the common content in the page to a separate file and we will use the {% block %} tag from Django template.

What is that {% block %} tag in Django template?

It’s a placeholder in the template which can be replaced by the template which extends this placeholder template. Let’s do that to understand better. I am going to separate the notes_list.html to two diffetent html files base.html, notes_list.html. The content of the two files are here.

base.html

<!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="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="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="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

notes_list.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
  <!-- Page Content -->
  <div class="container mt-3">

    <!-- Page Features -->
    <div class="row text-center">
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/500x325" alt="">
          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary">Find Out More!</a>
          </div>
        </div>
      </div>


    </div>
    <!-- /.row -->

  </div>
  <!-- /.container -->
{% endblock %}

Now, the placeholder {% block content %} in the base.html will be updated whenever the extended template(notes_list.html) has the {% block content %} tag in it. So, If there is any change in the menu or any common content, change will be in one place which is base.html.
We have prepared the front-end template. Next, We need to work on URL handling in Django.

  •  
  •  
  •  
  •  
  •  
  •  
  •  

You may also like...

Leave a Reply

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