Django templates

Let’s started adding HTML file to support the views that previously created by using Django template engine.

Django follows a templating language to understand more about Django template you can look at the documentation.  

Assuming you know HTML, CSS and bootstrap let’s start our templates changes. 

Static files and media files:

Static files are the files that you program use such as stylesheets and JS files. Media files are the files uploaded by user. For storing static files and or templates lets create two folders.

  • Create folder name static – this will store the static files used in this project.
  • Create templates folder- this will have base.html(this will be your base template), navbar.html, footer.html

These two folder should be created in the project directory along with the two apps. 

Let’s download the static contents

Go to GitHub and download starter template. These templates will have an assets folder. Copy the folder and add it inside the static folder that you just created. 

Adding template files in django

Templates folder will have three files base.html, navbar.html and footer.html. Create these folder inside the templates/ folder you just created. 

Let’s add code in each folder. 

  • base.html file: Copy the code from downloaded template files copies the base.html file in templates/ folder to the base.html file in your project.
  • Copy the same folder navbar.html code to the navbar.html file in your project and do the same for footer.html

This should be in templates/ folder of the downloaded assets.

Adding templates in the the blog app

Create a templates folder inside the blog app. And then copy the blog folder with all the files from downloaded folder to this tempalates folder.

Adding templates in contactus app

Create a templates folder inside the contactus app. And then copy the contactus folder with all the files from downloaded folder to this tempalates folder.

If you run the code it will show no such table exist becuase you have create models but have not migrated it. Let’s migrate our models.

  • First, run makemigrations, type the following code in the terminal from where the file is located. Also, make sure that your virtual environment is activated.

python makemigrations
  • Then run migrate command, type following in terminal

python migrate

This will show the following output:

Now you can run server to see the output:

To run the server type:

python runserver

You can now add some data in the database to make it work. 

Leave a Reply

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