Django Guide: From Novice to Expert

Step 1. What is Django?

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.

Django is a full-featured web framework that follows the Model-View-Controller (MVC) architectural pattern. It provides a set of tools and libraries for building web applications, including an ORM, a templating engine, and a built-in admin interface.

Step 2. Django Setup

To get started with Django, you’ll need to install it on your computer. You can do this by running the following command in your terminal, after setting up a virtual environment:

python -m venv .venv # Command to setup virtual environment

# for macOS and linux
# python3 -m venv .venv

Now to activate the virtual environment we use the following command:

.venv\Scripts\activate # To activate the virtual environment

# for macOS and linux
# source .venv/bin/activate

Step 3. Django Project

A Django project is a collection of settings and configurations that define the structure and behavior of a web application. It includes the code for the application, as well as the templates, static files, and other resources that make up the application.

To create a new Django project, you can use the following command:

django-admin startproject demoproject
cd demoproject

This will create a new directory called demoproject with the basic structure of a Django project.

Step 4. Start a Django Server

To start the Django server, you can use the following command:

python manage.py runserver

This will start the server and make it accessible at http://localhost:8000.

Ignore the unapplied migrations warning. This is a common issue when starting a new Django project. We will address this in a later section.

Step 5. Creating our first views

Create a new file called views.py in the demoproject directory. In this file, we will define a few views that are simple functions that return a response. We want to have home page, about page, and contact page. Each of these pages will return html content.

from django.http import HttpResponse

def home(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Home page</h1>")

def about(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: About page</h1>")

def contact(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Contact page</h1>")

Now, let’s create a new file called urls.py in the demoproject directory. In this file, we will define the URL patterns for our application. If the file is already there, you can just add the following code to the end of the file:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]

Now, let’s run the server again and visit the following URLs:

You should see the following output in the above routes:

Welcome to Chai's Django Project: Home page
Welcome to Chai's Django Project: About page
Welcome to Chai's Django Project: Contact page

Step 6. Adding Templates App in Django

In Django, templates are used to generate HTML pages. They are used to display data and perform logic in a web application. To create a template, you can create a new file called templates/layout.html in the root directory. Make sure that template folder is at same level as manage.py file.

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Chai's Django Project</title>
</head>
<body>
    <h1>Welcome to Chai's Django Project</h1>
</body>
</html>

Now if you need to view this template in the http://localhost:8000/ you need to make some changes in the views.py and settings.py file:

# Python : settings.py

'DIRS': ['templates'], # add the name of the templates directory inside this array

from django.http import HttpResponse
from django.shortcuts import render

def home(request):
    # return HttpResponse("<h1>Welcome to Chai's Django Project: Home page</h1>")
    return render(request, "index.html")

def about(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: About page</h1>")

def contact(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Contact page</h1>")

Step 7. Adding CSS and JavaScript

To add CSS and JavaScript to your Django project, you can create a new file called static/css/style.css in the root of the demoproject directory. In this file, you can write CSS code that will be used to style the HTML page. You can also create a new file called static/js/script.js in the same directory. In this file, you can write JavaScript code that will be used to add interactivity to the HTML page.

To add these static files go to settings.py and add the following line:

import os # import this at the top of settings.py file

STATIC_URL = '/static/' # below this add the following line
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

In the index.html file, at the top of the file add the following line:

{% load static %} 
<link rel="stylesheet" href="{% static 'css/style.css' %}">

Now, let’s run the server again and visit the http://localhost:8000/ URL. You should see the output.

Step 8. Adding Jinja2 Templates to Django Project

Jinja2 templates are written in a simple text format called HTML. The syntax is very similar to HTML, but with some additional features. You need to inject variables into the template using the {{ variable }} syntax. For example, if you want to display a name, you can use the following code:

Hello {{ name }}!

Jinja2 is a template engine for Python. It is a very powerful template engine that can be used to render HTML, XML, and other formats. It is also used to render templates for the Django admin interface. If you are in Django, you don’t need to install Jinja2 separately. It is already installed with Django. Django also comes with a built-in template configurations that allows you to use Jinja2 templates.

For more details on how to implement Jinja Templates in Django refer the article: Getting Started with Jinja Templates in Django

Step 9. Install Tailwind CSS and Flowbite to your Django project

Tailwind CSS is a CSS framework that allows you to build custom styles for your web pages. It provides a set of pre-built classes that you can use to style your HTML elements, whereas Flowbite is an open-source library of UI components based on the Tailwind CSS featuring all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers. For step-by-step installation refer this article how-to-add-tailwind-css-and-flowbite-to-your-django-project

Step 10. Adding Apps in Django

The most common way to organize your Django project is to use apps. An app is a self-contained module that contains models, views, templates, and other components of your project. Apps allow you to organize your code into logical units and make it easier to manage and maintain your project.

You can create it manually or use the startapp command to create a new app for you. To create an app, navigate to the directory where you want to create the app and run the following command:

python manage.py startapp demoapp

This will create a new directory called demoapp with the necessary files and directories for an app.

To add an app to your project, you need to add it to the INSTALLED_APPS setting in your project’s settings.py file. You can do this by adding the app’s name to the list of installed apps:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'demoapp',
]

In Django, templates are organized into apps. Each app can have its own templates directory, which contains the templates for that app. Create a new directory called templates in your app’s directory. Inside the demoapp directory, create a templates directory and add a my_app.html file to it.

Add your basic html code to the my_app.html file.

To serve this file, we need a view and a url. Create a new file called views.py in your app’s directory. Add the following code to the file:

from django.shortcuts import render

def all_chai(request):
    return render(request, 'my_app.html')

This view will render the my_app.html template when it is called.

Create a new file called urls.py in your app’s directory. Add the following code to the file:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.my_app, name='my_app'),
]

This urlpattern will map the root URL of the app to the my_app view.

Now, we need to make aware of this new urlpattern in our project’s urls.py file. Add the following code to the project’s urls.py file:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('demoapp/', include('chai.urls')),
]

Now, we can access the my_app view by going to http://localhost:8000/demoapp

Django for Beginners and Beyond: A Complete Learning Path

Table of contents