What is Django?
Django is a Python framework that makes it easier to create web sites using
Python.
Django is a battery-included framework meaning it takes care of the difficult
stuff so that you can concentrate on building your web applications. Like
admin panel, database ORM, security features etc.
Definition:
An architectural pattern is a blueprint that shows how to organize the parts of a
software system (like data, logic, and user interface) and how they should work
together.
It’s like a blueprint or pattern for how the different parts of your application
(database, logic, UI) should talk to each other.
And django Framework uses the MVT(Model View Template)
●Model - The data you want to present, usually data from a
database.
●View - A request handler that returns the relevant template and
content - based on the request from the user.
●Template - A text file (like an HTML file) containing the layout
of the web page, with logic on how to display the data.
Model
Definition:
A Model is the part of Django that defines and manages the data of
your application.
What it does:
Describes the structure of your database using Python classes.
Handles creating, reading, updating, and deleting (CRUD) records.
Acts as a bridge between Python code and the database.
Example:
class Student(models.Model):
name = models.CharField(max_length=100)
age = models.IntegerField()
View
Definition:
A View is the part of Django that contains the logic of your
application — it decides what data to show and how to respond to a
request.
What it does:
Receives requests from the user through a URL.
Fetches or processes data (usually from the model).
Passes data to a template or returns an HTTP response (JSON,
HTML, etc.).
Example:
def student_list(request):
students = Student.objects.all()
return render(request, 'students/list.html', {'students': students})
Template
Definition:
A Template is the part of Django that controls how the information
is displayed to the user (the presentation layer).
What it does:
Defines the structure of the web page (HTML, CSS).
Keeps the design (UI) separate from the business logic.
Example (students/list.html):
<h1>My Homepage</h1>
<p>My name is {{ firstname }}.</p>
🔹 URL
Definition:
A URL in Django is the mapping system that connects a specific
web address to the correct view.
What it does:
So the url is like a traffic controller, when the client sents the request
it control or directs it to the correct view(Logic)
Tells Django which view function should run when a certain URL is
requested.
Example:
from django.urls import path
from . import views
urlpatterns = [
path('students/', views.student_list, name='student_list'),
]
(URL → View → Model → Template → Response)
So, Here is what happens
When you have installed Django and created your first
Django web application, and the browser requests the URL,
this is basically what happens:
1. When a client or user(Frontend) sends a request django
receives the URL, checks the urls.py file, and calls the
view that matches the URL.
2. The view, located in views.py, checks for relevant
models.
3. The models are imported from the models.py file.
4. The view then sends the data to a specified template in
the template folder.
5. The template contains HTML and Django tags, and with
the data it returns finished HTML content back to the
browser.
Things you need to have installed
1.You need to have python installed on your pc
2.A code editor (VScode, Pycharm etc)
3.Need to have package manager
Links to youtube videos to help you understand Django basic
https://youtu.be/0sMtoedWaf0?si=-gZs71AAgCrJQzts
https://youtu.be/0sMtoedWaf0?si=-gZs71AAgCrJQzts
Steps to create your Django Project
1.Create a folder and enter the folde
2.Create a virtual environment(e) - python -m venv (venv_name)
3.Activate virtual environment - venv_name\Scripts\activate.bat
4.Pip install django to insall django on your project
5.Create django project - django-admin startproject (Project_name) .
6.Enter into your project folder and run python manage.py runserver, then
copy url and past on your browser.
7.Create app -python manage.py startapp app_name
8.Create Superuser (Admin) - Python manage.py
createsuperuser(makemigrations, migrate)
NOTE: So there is something very important you have to do after creating any
app you must go and register it in the settings,py in the main project.
6. So after that you will go to your settings.py and register your app url and
also remember to import inlude.
First Backend Project: Build a Django Authentication System
1.So to start you need to have python installed.
2.A code editor(VScode, Pycharm etc)
3.Have package manager installed
Steps to create your django project
1.Create folder and enter inside the folder
2.Create a virtual environment(e) - python -m venv. (venv_name)
3.Activate virtual environment - venv_name\Scripts\activate.bat
4.Install django - pip install django
5.Create django project - django-admin startproject project_name
6.Enter project - cd project_name
7.Run python mange.py runserver
8.Create app - python manage.py startapp app_name.
Create superuser(Admin) - python manage.py runsrver (makemigration,
migrate).
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('Auth_System.urls')),
]
Always remenber when creating your view it is a three step process create view
>> templaes >> url
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Welcome to Home Page</h1>
</body>
</html>
Register.html
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
{% load static %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="center">
<h1>Login</h1>
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<center><h4 style="color: firebrick;">{{message}}</h4></center>
{% else %}
<center><h4 style="color: dodgerblue;">{{message}}</h4></center>
{% endif %}
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<div class="txt_field">
<label>Username</label>
<input type="text" required name="username">
</div>
<div class="txt_field">
<label>Password</label>
<input type="password" required name="password">
</div>
<input type="submit" value="Login">
<div class="signup_link">
Not a member? <a href="{% url 'register' %}">Signup</a>
</div>
</form>
</div>
</body>
</html>
Register.html
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Register</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="center">
<h1>Register</h1>
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<center><h4 style="color: firebrick;">{{message}}</h4></center>
{% else %}
<center><h4 style="color: dodgerblue;">{{message}}</h4></center>
{% endif %}
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<div class="txt_field">
<input type="text" required name="first_name">
<span></span>
<label>First Name</label>
</div>
<div class="txt_field">
<input type="text" required name="last_name">
<span></span>
<label>Last Name</label>
</div>
<div class="txt_field">
<input type="text" required name="username">
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="email" required name="email">
<span></span>
<label>Email</label>
</div>
<div class="txt_field">
<input type="password" required name="password">
<span></span>
<label>Password</label>
</div>
<!-- <div class="pass">Forgot Password?</div> -->
<input type="submit" value="Register">
<div class="signup_link">
Already have an account? <a href="{% url 'login' %}">Login</a>
</div>
</form>
</div>
</body>
</html>
App urls.py
from django.urls import path
from . views import Home, Register, Login
urlpatterns = [
path('', Home, name='home'),
path('register/', Register, name='register'),
path('login/', Login, name='login'),
]
view.py
from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
from django.contrib import messages
# from django.contrib.auth.decorators import login_required
# Create your views here.
# @login_required
def Home(request):
return render(request, 'Auth_System/Home.html', {})
def Register(request):
if request.method == 'POST':
fname = request.POST.get('first_name')
lname = request.POST.get('last_name')
username = request.POST.get('username')
email = request.POST.get('email')
password = request.POST.get('password')
if User.objects.filter(username=username).exists():
messages.error(request, "Username already taken")
return redirect('register')
if User.objects.filter(email=email).exists():
messages.error(request, "Email already in use")
return redirect('register')
new_user = User.objects.create_user(username, email, password)
new_user.first_name = fname
new_user.last_name = lname
new_user.save()
return redirect('login')
return render(request, 'Auth_System/Register.html', {})
def Login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect('home')
else:
messages.error(request, "Invalid login Credentials")
return redirect('login')
return render(request, 'Auth_System/login.html', {})
Create statix folder and inside a css folder and that is were your styles and
images will go inti
@import
url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&displ
ay=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
margin: 0;
padding: 0;
background: linear-gradient(120deg,#2980b9, #8e44ad);
height: 100vh;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
border-radius: 10px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.center h1{
text-align: center;
padding: 20px 0;
border-bottom: 1px solid silver;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}
button {
border: 1px solid #2691d9;
background: #2691d9;
color: #e9f4fb;
}
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
LOGIN_URL = 'login'
LOGIN_REDIRECT_URL = 'home'
STATIC_URL = 'static/'
