Django For Beginners

Django installation:

Django is a web framework based on python. For Django first, we need to install python version 3.6 or the latest. Install Django inside a virtual environment.

Virtual environment:

We need to create a virtual environment for our project.

Install,create & activate:

pip install virtualenv #installation

Virtualenv Django1 #create virtualenv

Django1\Scripts\activate #activate virtualenv

“pip install Django”

Above command will install the latest version of Django.

Create project:

After activating virtualenv, in cmd window, go to the folder where you want to create your first project and run the following command which creates your first project.

(Django1) F:\Django project & doc>django-admin startproject demo1

As you can see I created the project by the name demo1 in the folder “Django project & doc”. After creating the project you can see some files in your folder as shown below.

Here, demo1: is a root directory.

manage.py : is a command-line utility that lets you interact with this Django project in various ways.like to run server , migrate database , makemigration etc..which we will see later in our project.

demo1/__init__.py: An empty file that tells Python that this directory should be considered a Python package.

demo1/settings.py: Settings/configuration for this Django project.

demo1/urls.py: The URL declarations for this Django project; a “table of contents” of your Django -powered site.

demo1/asgi.py: An entry-point for ASGI-compatible web servers to serve your project.

demo1/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project.

Now let’s verify if Django website works or not. For that run the following command and ignore the warnings about migrations as we have not done any work with the database.

(Django1) F:\Django project & doc\demo1>python manage.py runserver

Now open any browser and run localhost URL( http://127.0.0.1:8000/) with default port number 8000.

This shows that our project runs successfully. So the system is ready to build any Django project and now we are going to build a basic project which helps you to learn Django.

Create apps:

An app is a web application and a project is a collection and configuration of apps. A single app can be inside multiple projects and a single project can contain multiple apps.

Run following command to create app:

(Django1) F:\Django project & doc\demo1>python manage.py startapp app1

Here , we created an application by the name app1.As we create app, we get some files created by Django lib,and we are going to create migrations,static,templates folders.

Migrations folder is created when we run “makemigrations” command at the time of running the app. Static folder contains all css, js & bootstrap files which we need during web app development and templates folder contain all html files which we need to create to design web pages.

So, now firstly we should config app1 inside apps.py:

from django.apps import AppConfig

class App1Config(AppConfig):
	name = 'app1'

Now there is one flow which we need to follow to create every web page inside web app

Create model(table inside database) inside model.py
Register that model inside admin.py
Create form(if you want)
Create html file(inside template folder)
Create view inside view.py
Generate url inside urls.py

Create format of web application:

base.html

This file creates all formatting of web applications so we need to import this file in every html file we create for this web application. By this we could make all web pages look similar. This contain all scripts to add CSS, bootstrap and js etc.. which we need during development.

Create home page:

On the home page, let’s have only welcome messages so that we don’t have to create any model or form, just create html & view.

index.html:

{% extends "app1/base.html" %}

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
	<meta charset="utf-8">

  </head>
  <body>
	<div class="container">
  	{% block body_block %}
	<div style="margin-left:25%; margin-right:25%; margin-top:3%; background-color: #ffffff; border: 2px solid black; opacity: 0.6; filter: alpha(opacity=60); border-radius:50px; "></br>
  	<h1>hello everyone, this is home page of Django Demo Application</h1>
	</div>
 	{% endblock %}

	</div>
  </body>
</html>

view.py:

from django.shortcuts import render,redirect
from django.http import HttpResponseRedirect, HttpResponse

def index(request):
	return render(request,'app1/index.html')

app1/urls.py(inside app1):

from django.urls import path

from app1 import views

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

urls.py(inside project):

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


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

To run this web app we need to do some changes in settings.py file.

settings.py:

TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
STATIC_DIR = os.path.join(BASE_DIR,"static")

As we create static & template folders we need to join them with the base directory.

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

Define app1 in INSTALLED_APPS

TEMPLATES = [
	{
    	'BACKEND': 'django.template.backends.django.DjangoTemplates',
    	'DIRS': [TEMPLATE_DIR,],
    	'APP_DIRS': True,
    	'OPTIONS': {
        	'context_processors': [
            	'django.template.context_processors.debug',
            	'django.template.context_processors.request',
            	'django.contrib.auth.context_processors.auth',
            	'django.contrib.messages.context_processors.messages',
        	],
    	},
	},
]

Add TEMPLATE_DIR in TEMPLATES

STATIC_URL = '/static/'
STATICFILES_DIRS = [
	STATIC_DIR,
]

Add STATIC_DIR in STATICFILES_DIRS.

After these changes, run Django project and we get following page.

(Django1) F:\Django project & doc\demo1>python manage.py runserver

Now open any browser and run localhost URL( http://127.0.0.1:8000/) with default port number 8000. As you run this url in the browser you will get the following page

Create Login & Register page:

For login & register, first we need to create a table so for that we create a model inside model.py and then register that model within admin.py.

model.py:

from django.db import models
from django.contrib.auth.models import User

class Login_table(models.Model):
    
	user = models.CharField(max_length=100)
	password = models.CharField(max_length=129)
	def __str__(self):
    	    return self.user

Here we are creating a “Login_table” containing only 2 fields user & password and both are of character field.

admin.py

from django.contrib import admin
from app1.models import Login_table

admin.site.register(Login_table)

In this first we need to import Login_table from models & then register that with admin.

Now we are going to create form which we display on web page and used inside html files.

forms.py

from django import forms
from django.contrib.auth.models import User
from app1.models import Login_table
from django.core import validators
from django.core.validators import RegexValidator

class UserForm(forms.ModelForm):
	user = forms.CharField()
	password = forms.CharField(widget=forms.PasswordInput)

	class Meta():
    	    model = Login_table
    	    fields = ('user','password')

In forms.py first we import the forms package & then model which we create. To do user side validations import validators. After importing all packages,we create a “UserForm” class as shown in above code and set 2 fields & in Meta class we connect that 2 form fields with 2 fields of Login_table.

views.py:

Registration view:

from django.contrib.auth import authenticate,login,logout
from app1 import forms
from app1.forms import UserForm
from app1.models import Login_table

def user_registration(request):
	form = forms.UserForm()
	if request.method == "POST":
	    form = forms.UserForm(request.POST)

    	if form.is_valid():
            un = form.data['user']
        	password = form.data['password']
        	if bool(Login_table.objects.filter(user=un).exists()):
                 #Check for any existing user
            	return HttpResponse('<script>alert("User with such credentials already exist! \n Please enter another username! "); window.location.href="http://10.20.4.65:8000/ahome/";</script>')
        	else:
                l1 = Login_table(user=un,password=password)
        	    l1.save()
        	    return HttpResponse('<script>alert("User created successfully!"); Window.location.href="http://127.0.0.1:8000/login";</script>')
    	else:
            return render(request, 'app1/registration.html',{'form2':form})
	else:
    	return render(request, 'app1/registration.html',{'form2':form})

In this first check input is valid or not. If input is valid then check if the user already exists or not. If user exists it gives alert else creates the user successfully and redirects to the login page.

def user_login(request):
	form = forms.UserForm()
	if request.method == "POST":
    	form = forms.UserForm(request.POST)
        if form.is_valid():
            user = form.data['user']
        	password = form.data['password']
            if (Login_table.objects.get(user=user) and Login_table.objects.get(password=password)):
                request.session['user'] = form.data['user']
            	request.session['password'] = form.data['password']
            	return redirect('AfterLogin')
            else:
            	return HttpResponse("Invalid Credentials!")
        	
    	else:
            return render(request,'app1/Login.html',{'form3':form})
    else:
        return render(request,'app1/Login.html',{'form3':form})

Here again checks input is valid or not. If input is valid authenticates the user with database. If credentials are valid it redirects the user to the next page else gives an alert.

registration.html:

{% extends "app1/base.html" %}

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
	<meta charset="utf-8">

  </head>
  <body>
	<div class="container">
    	< /br>< /br>< /br>
      	{% block body_block %}
	<div style="margin-left:25%; margin-right:25%; margin-top:2%; background-color: #ffffff; border: 2px solid black; opacity: 0.6; filter: alpha(opacity=60); border-radius:50px; "></br>
  	<h1 style="font-family:Consolas;"><u>REGISTRATION</u></h1>
  	<form method="POST" action="" style=" font-weight: bold; color: #000000;">
    	{% csrf_token %}
    	{{ form2.as_p }}

    	<input type="submit" name="" class="btn btn-primary btn-lg" style="border-radius:30px" value="Register" /></br></br>
  	</form>
	</div>
	{% endblock %}
	</div>

  </body>
</html>

Here we just import base.html & inside body, code to display the form and connect that form with form2 defined in view.py & csrf_token is a kind of bot-catcher.

Login.html:

{% extends "app1/base.html" %}

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
	<meta charset="utf-8">

  </head>
  <body>
	<div class="container">
    	< /br>< /br>< /br>
      	{% block body_block %}
	<div style="margin-left:25%; margin-right:25%; margin-top:2%; background-color: #ffffff; border: 2px solid black; opacity: 0.6; filter: alpha(opacity=60); border-radius:50px; "></br>
  	<h1 style="font-family:Consolas;"><u>LOGIN</u></h1>
  	<form method="POST" action="" style=" font-weight: bold; color: #000000;">
    	
    	{% csrf_token %}
    	{{ form3.as_p }}

    	<input type="submit" name="" class="btn btn-primary btn-lg" style="border-radius:30px" value="Login" /></br></br>
  	</form>
	</div>
	{% endblock %}
	</div>

  </body>
</html>

This is the same as registration.html. Replace form3 in place of form2 because in login view we define form3 for login.and change heading of the container to LOGIN.

After creating login page we need to create next page after successful login. Let’s say “afterlogin” page and also generate Logout method to destroy session created at the time of login. For that create afterlogin view & logout view in views.py file.

views.py:

def login_success(request):
	return render(request,'app1/after_login.html')

def logout(request):

	del request.session['user']
	del request.session['password']
	return HttpResponseRedirect(reverse('index'))

after_login.html:

{% extends "app1/base_afterlogin.html" %}
<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
	<meta charset="utf-8">
  </head>
  <body>    
	<div class="container">
  	{% block body_block %}
	<div style="margin-left:25%; margin-right:25%; margin-top:3%; background-color: #ffffff; border: 2px solid black; opacity: 0.6; filter: alpha(opacity=60); border-radius:50px; "></br>
  	<h1>you are successfully login to demo application</h1>
	</div>
 	{% endblock %}
	</div>
  </body>
</html>

On this page we are just displaying a successful login message. But here we extend base_afterlogin,html file in place of base.html file as after login we need logout at navigation bar. This base_afterlogin.html is the same as base.html just add the logout option on the navigation bar.

app1/urls.py:

path('login',views.user_login,name='Login'),
path('registration',views.user_registration,name='Registration'),
path('afterlogin',views.login_success,name='AfterLogin'),
path('logout',views.logout,name='Logout')

Add these paths in urlpatterns. Here if we want to access the login page we need to append ‘login’ at the end of port number ex. “127.0.0.1:8000/login” this will call “user_login” view and we also access this view by the name “Login” in redirect, or reverse operation.

We are complete with all development for a simple Django Demo web app. Let’s migrate databases first by running the following commands.

(Django1) F:\Django project & doc\demo1>python manage.py migrate

(Django1) F:\Django project & doc\demo1>python manage.py makemigrations

This will make all required changes in the database.

Now let’s run a web application as we run before and go to localhost in browser.

Registration page:

Login page:

Success page(page after login) :

Once the user logged in successfully, let’s check the database and “Login_table” which was created inside the Django administration. For that, first we need to create a superuser. This superuser is the admin of our web application who can manage databases, add, modify & delete records also.

Run following command to create superuser:

python manage.py createsuperuser

As you run this you ask some questions about username, password, & email. Set your username & password.after that again start the server by runserver command as we did before and browse this “127.0.0.1:8000/admin” . as you request for the admin page you will get following screen.

Now give username & password which we set at the time of creating the superuser. And you can access your tables which we created before.

This is a complete Django web application tutorial for beginners who want to start development with Django which explains how to perform registration & login operation with database management for the website.