Create a Login Page in Django Python

In this article, we will learn how to Create a Login Page in Django Python. I will explain with the source code

https://referworkspace.app.goo.gl/9yR5

Create a Django Login Page

To create a project just follow the below steps.

Steps:

Create project

Open the terminal and then run the following command

django-admin startproject adminlogin

To Create app in adminlogin project.

Type command in terminal

cd adminlogin

python manage.py startapp login

Now it creates the project and app then opens Visual Studio code and opens project adminlogin.

These are steps.

Open settings.py and include the app in the adminlogin project, we need to add a reference to its configuration class in the INSTALLED_APPS setting.

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

The next step is to set the root urlsconf at the adminlogin

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

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

Create a urls.py file in the login app.

from django.urls import path
from . import views

urlpatterns = [
    path("",views.base,name="base"),
    path("user_login/",views.user_login,name="user_login"),
    
]

Creating models and defining models in the login app.

from django.db import models

# Create your models here.

class tbl_Authentication(models.Model):
    Empcode = models.IntegerField()
    username = models.CharField(max_length=50,default='')
    password = models.CharField(max_length=50,default='')
    is_active = models.IntegerField(null=True)

    def __str__(self):
        return self.username

    empAuth_objects = models.Manager()

Creating views.py

from django.shortcuts import render,redirect
from django.contrib.auth import login,authenticate
from .models import tbl_Authentication
	# Create your views here.
	
	def base(request):
	    return render(request, 'base.html')
	

	def user_login(request):
	
	    if request.method == 'POST':
	        username = request.POST.get('username')
	        password = request.POST.get('password')
	        
	        try:
	            user = tbl_Authentication.empAuth_objects.get(username=username,password=password)
	            if user is not None:               
	                return render(request, 'dashboard.html', {})
	            else:
	                print("Someone tried to login and failed.")
	                print("They used username: {} and password: {}".format(username,password))
	
	                return redirect('/')
	        except Exception as identifier:
	           
	            return redirect('/')
	
	    else:
	        return render(request, 'base.html')

5. Create a templates folder in the login app.

In that create base.html file and dashboard.html file, below source copy and paste.

base.html

{% load static %}

<!DOCTYPE html>
<html class=''>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='https://production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/aperyon/pen/oxzpaE?depth=everything&order=popularity&page=23&q=translate&show_forks=false" />

<style class="cp-pen-styles">html, body {
  border: 0;
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  background: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

form {
  background: white;
  width: 40%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
  font-family: lato;
  position: relative;
  color: #333;
  border-radius: 10px;
}
form header {
  background: #FF3838;
  padding: 30px 20px;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
}
form label {
  margin-left: 20px;
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 5px;
  position: relative;
}
form label span {
  color: #FF3838;
  font-size: 2em;
  position: absolute;
  left: 2.3em;
  top: -10px;
}
form input {
  display: block;
  width: 78%;
  margin-left: 20px;
  padding: 5px 20px;
  font-size: 1em;
  border-radius: 3px;
  outline: none;
  border: 1px solid #ccc;
}
form .help {
  margin-left: 20px;
  font-size: 0.8em;
  color: #777;
}
form button {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: inherit;
  color: white;
  background: #FF3838;
  outline: none;
  border: none;
  padding: 5px 15px;
  font-size: 1.3em;
  font-weight: 400;
  border-radius: 3px;
  box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
form button:hover {
  background: #ff5252;
}
</style>
</head>

<body>

<form method="post" action="user_login/">
 {% csrf_token %}  

  <header>Login</header>
  <label>Username <span>*</span></label>
  <input type="text"   name="username" placeholder="Username" required="" />
  <div class="help">At least 5 character</div>
  <label>Password <span>*</span></label>
  <input type="password"  name="password" placeholder="Password" required="" />
  <div class="help">Use upper and lowercase letters as well</div>
  <button type="submit">Login</button>

</form>

</body>
</html>

dashboard.html

<html>
<head>
</head>
<body>
<p><h3> WelCome dashboard </h3></p>
</body>
</html>

Open the terminal and then run the following command

python manage.py makemigrations

python manage.py migrate
Python manage.py runserver

Recommended Articles:

Django Session | How to Create a Session in Django Python

Find Duplicate Records in Django ORM

How to Create CRUD API in Django Rest Framework

How to Implement Join Operations in Django ORM