V1: Virtual Environment
Make a Folder Project(ecommerce) and change directory
mkdir ecommerce
cd ecommerce
Virtual environment for window machine and activate
python -m virtualenv env
env\scripts\activate
Virtual environment for linux machine and activate
python -m venv env
source env/bin/activate
Deactivate virtual environment
(if you want to deactivate a virtual environment by typing “deactivate”)
V2: Start Project
Installed Django
pip install Django
mkdir src && cd src
django-admin startproject ecommerce .
Python manage.py runserver
Note: (space dot( .) created this folder inside the src folder not new project)
File Structure
- Ecommerce
- src
- ecommerce
- init.py
- asgi.py
- settings.py
- urls.py
- wsgi.py
- dbsqlite3
- manage.py
V-3: Render Html
Create New file views.py inside the src/ecommerce/views.py
from django.shortcuts import HttpResponse
from django.shortcuts import render
def home_page(request):
return HttpResponse ("<h1>Hi Nishu</h1>")
def home_page_old(request):
html = """<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>"""
# return HttpResponse ("<h1>Hi Nishu</h1>")
return HttpResponse (html)
urls.py
from django.contrib import admin
from django.urls import path
from .views import home_page
urlpatterns = [
path('admin/', admin.site.urls),
path('$/', home_page),
]
V4: Django Template
- Create New Directory templates inside the src/templates/home_page.html
- Copy & paste starter template from Bootstrap.com in home_page.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, Nishu!</title>
</head>
<body>
<h1>Hello, Nishu!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Add templates direcory path(BASE_DIR/'templates') in settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR/'templates'],
'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 db direcory path for sqlite3 (BASE_DIR / 'db.sqlite3) in settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
V5: Template Context
- Open views.py file in core directory and fill the views with this script code
from django.shortcuts import HttpResponse
from django.shortcuts import render
def home_page(request):
context = {
"title" : "Hi This is my home Page",
"content" : "Welcome to our Scorpio World"
}
return render(request, "home_page.html", context)
def about_page(request):
context = {
"title" : "Hi This is my About Page",
"content": "About Scorpio"
}
return render(request, "home_page.html", context)
def contact_page(request):
context = {
"title" : "Hi This is my Conatct Page",
"content": "Conatct: 787888"
}
return render(request, "home_page.html", context
Managing Url and Templating
from django.contrib import admin
from django.urls import path
from .views import home_page, about_page, contact_page
urlpatterns = [
path('admin/', admin.site.urls),
path('$/', home_page),
path('about/', home_page),
path('contact/', contact_page),
]
Create home_page.html in templates directory(src/templates/home_page.html)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, Nishu!</title>
</head>
<body>
<div class="text-center">
<h1>{{ title }}</h1>
</div>
<div class="container">
<div class="row">
<p> {{ content }} </p>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
V6: HTML Form
- Create New Directory(contact) inside the template(src/templates/contact)
- Create New Html(view.html) file inside the template(src/templates/contact/view.html)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, Nishu!</title>
</head>
<body>
<div class="text-center">
<h1>{{ title }}</h1>
<h1>Scorpion's Site</h1>
</div>
<div class="container">
<div class="row">
<div class="col">
<p> {{ content }} </p>
<div class="col-sm-6 col-12">
<form method="POST"> {% csrf_token %}
<input type="text" class="form-control" placeholder="Name" name="fullname">
<input type="email" class="form-control" placeholder="Email" name="email">
<textarea name="content" class="form-control" placeholder="Your Content"></textarea>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Update Views.py
def contact_page(request):
context = {
"title" : "Hi!This is my Conatct Page",
"content": "Conatct: XYZ"
}
if request.method == 'POST':
# print(request.POST)
print(request.POST.get('fullname'))
print(request.POST.get('email'))
print(request.POST.get('content'))
return render(request, "contact/view.html", context)