#creating superuser
python3 manage.py createsuperuser
# it will ask some values as below,
(password is case-sensitive)
Username (leave blank to use 'lakshman'): admin
Email address:
Password:
Password (again):
The password is too similar to the username.
This password is too short. It must contain at least 8 characters.
This password is too common.
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.
Now, we can login to django-admin using address "http://127.0.0.1:8000/admin/"
To Change django administration text, Use code below in urls.py of main project file.
And change the code according to ur choice
# to change admin text
admin.site.site_header = "LMJ Ice-cream Admin"
admin.site.site_title = "Ice-cream Admin Portal"
admin.site.index_title = "Welcome to Ice-cream Researcher Portal"
Inheretance in html templates
Create a new base.html file in template folder.
Now, copy paste code from index.html code.
Use {% block body %}{% endblock body %} below nav tag, and use {% block title %}{% endblock title %} like below
<!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>{% block title %}
{% endblock title %}
</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Ice-Cream</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/services" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/services">Ice-Cream</a></li>
<li><a class="dropdown-item" href="#">Softy</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Family Pack</a></li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="/contact">Contact US</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block body %}{% endblock body %}
<!-- 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>
Change index.html file like this
{% extends 'base.html' %}
{% block title %} Home {% endblock title %}
{% block body %}
This is body bock
{% endblock body %}
Create a contactus.html, about.html and services.html file in templates
contactus.html will look like this,
{% extends 'base.html' %}
{% block title %} contact {% endblock title %}
{% block body %}
This is contact us page.
{% endblock body %}
about.html will look like this,
{% extends 'base.html' %}
{% block title %} About {% endblock title %}
{% block body %}
This is About us page.
{% endblock body %}
services.html will look like this,
{% extends 'base.html' %}
{% block title %} Services {% endblock title %}
{% block body %}
This is Services page.
{% endblock body %}
Now change the view.py file as shown
from django.shortcuts import render, HttpResponse
# render for templates
# Create your views here.
def index(request):
context = {
'variable':'This is sent'
}
return render(request,'index.html',context)
# return HttpResponse('This is home page')
def about(request):
return render(request,'about.html')
# return HttpResponse('This is about page')
def services(request):
return render(request,'services.html')
# return HttpResponse('This is services page')
def contact(request):
return render(request,'contactus.html')
# return HttpResponse('This is contact page')
Adding Carousel: A slideshow component for cycling through elements—images or slides of text—like a carousel. Copy code from site and paste it in index.html file. The file will look like this,
{% extends 'base.html' %}
{% block title %} Home {% endblock title %}
{% block body %}
<div class='container'>
<div id="carouselExampleCaptions" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.
</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.
</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.
</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
{% endblock body %}
Put link in src option and give margin so that image can be adjusted. Now, index.html file will look like this one. You can change the link according to urself.
{% extends 'base.html' %}
{% block title %} Home {% endblock title %}
{% block body %}
<!-- my-4 for margin -->
<div class='container my-4' >
<div id="carouselExampleCaptions" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- change size of image here 1200x500 -->
<img src="https://source.unsplash.com/1200x500/?nature,water"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/1200x500/?nature"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/1200x500/?sun"
class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
{% endblock body %}
No comments:
Post a Comment
If you have any doubt, let me know