Source Code - Online Library System

DIV: A
BATCH: C
GROUP: A1
Pokharkar Akshay Hanumant Chandrabhaga VU1F1920053
Dhumal Pratik Pramod Smita VU1F1920058
Singh Aman Shashidhar Sangeeta VU1F1920064
Hadawale Hrithik Kashinath Archana VU1F1920059
SOURCE CODE:
/**home**/
//admin.py
from django.contrib import admin
from home.models import Contact, Library, category, signup
# Register your models here.
admin.site.register(Contact)
admin.site.register(category)
admin.site.register(Library)
admin.site.register(signup)
//apps.py
from django.apps import AppConfig
class HomeConfig(AppConfig):
name = 'home'
//models.py
from django.db import models
# Create your models here.
class category(models.Model):
category = models.CharField(max_length=25)
def __str__(self):
return self.category
class Contact(models.Model):
name = models.CharField(max_length=20)
email = models.CharField(max_length=50)
phone = models.CharField( max_length=12)
date = models.DateField()
def __str__(self) :
return self.name
class Library(models.Model):
category = models.ForeignKey(category, on_delete=models.CASCADE, null=True)
author = models.CharField(max_length=50, null=True)
link = models.FileField( upload_to="pdf", max_length=100)
def __str__(self):
return self.name
class signup(models.Model):
email = models.CharField(max_length=50)
def __str__(self):
return self.name
//urls.py
from os import name
from home.views import index
from django.contrib import admin

from django.urls import path
from home import views
urlpatterns = [
path('', views.index, name= 'home'),
path('home',views.index, name= 'home'),
path('about',views.about, name='about'),
path('Category',views.Category, name='services'),
path('Books',views.Books, name='services'),
path('Contact',views.contact, name='contact'),
path('signup',views.signup, name='signup'),
path('pay',views.pay, name='pay')
//views.py
from django.shortcuts import render, HttpResponse
from home.models import Contact, Library, category
from datetime import datetime
from django.contrib import messages
# Create your views here.
def index(request):
return render(request, "index.html")
#return HttpResponse("Home page")
def about(request):
return render(request, "about.html")
#return HttpResponse("about page")
def Books(request):
return render(request, "books.html")

def Category(request):
lis = Library.objects.all()
return render(request, "category.html", {"lis":lis})
#return HttpResponse("Books page")
def contact(request):
if request.method == "POST":
name = request.POST.get("name")
email = request.POST.get("email")
phone = request.POST.get("phone")
contact = Contact(name=name, email= email, phone= phone, date= datetime.today())
contact.save()
messages.success(request, 'Your message has been sent.')
return render(request, "contact.html")
#return HttpResponse("contact page")
def signup(request):
return render(request, "signup.html")
def pay(request):
return render(request, "pay.html")
/**home**/
/**static**/
//App.js
const form=document.getElementById('form');
const username=document.getElementById('username');
const email=document.getElementById('email');
const password=document.getElementById('password');
const password2=document.getElementById('password2');
//Show input error message
function showError(input,message){
const formControl=input.parentElement;
formControl.className='form-control error';
const small=formControl.querySelector('small');
small.innerText=message;
function showSuccess(input){
const formControl=input.parentElement;
formControl.className='form-control success';
//Email
function isValidEmail(email)
const re= /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-

9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
form.addEventListener('submit',function(e){
e.preventDefault();
if(username.value===''){
showError(username,'Username is required');
else{
showSuccess(username);
if(email.value===''){
showError(email,'Email is required');
}else if(!isValidEmail(email.value)){
showError(email,'Email is not valid');
else{
showSuccess(email);
if(password.value===''){
showError(password,'Password is required');
else{
showSuccess(password);
if(password2.value===''){
showError(password2,'confirm password is required');
else{
showSuccess(password2);
}
});
/**static**/
/**Templates**/
//base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"

integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">

<link rel="icon" href="static/images/images.png" type="image/png" sizes="15x10">
<title> {% block title %}{% endblock title %} | welcome To Online Library</title>
<style>
*{
box-sizing: border-box;
body{
background-image: url('./static/images/pexels-photo-19077851.jpeg');
background-size: cover;
}
nav{
text-transform: uppercase;
font-family: 'Archivo Black', sans-serif;
footer{
background-color: black;
color: bisque;
</style>
</head>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Online Library</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-

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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="home">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">about</a>
</li>
<a class="nav-link" href="Books">My Books</a>
</li>
<a class="nav-link" href="Category">Category</a>
</li>
<a class="nav-link" href="Contact">Contact Us</a>
</li>
<a class="nav-link" href="signup">Sign up</a>
</li>
<a class="nav-link" href="pay">Membership</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
{% block body %} {% endblock body %}

{% block js %} {% endblock js%}

<script src=" https://code.jquery.com/jquery-3.5.1.slim.min.js%" integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js "

integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"

</body>

<footer class="page-footer font-small black pt-4">

<div class="container-fluid text-center text-md-left">

<div class="row">

<div class="col-md-6 mt-md-0 mt-3">


<h5 class="text-uppercase">Contact us</h5>
<p>Here you can use rows and columns to organize your footer content.</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-3 mb-md-0 mb-3">

<h5 class="text-uppercase">Help</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

<div class="col-md-3 mb-md-0 mb-3">

<h5 class="text-uppercase">Feedback</h5>
<ul class="list-unstyled">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>

</div>


<div class="footer-copyright text-center py-3">© {% now 'Y' %} Copyright:
<a href=""> OnlineLibrary.com</a>


</div>

</footer>

</html>
//books.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Books{% endblock title %}
{% block body %}
<div class="container my-5">
{% for i in lis %}
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5>{{i.name}}</h5>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">

<a href="{{i.link}}"" >
View
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock body %}
//category.html
{% load static %}
{% block title %}Books{% endblock title %}
{% block body %}
<div class="container">
<div class="name">Category Name:</div>
<div class="container my-5" style=" border: 2px solid;">

{% for i in lis %}
<div class="row" >
<div class="card mb-4 shadow-sm">
<h5>{{i.name}}</h5>
<h7>Author:{{i.author}}</h7>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">
<a href="pdf/{{i.link}}" >
View
</a>
</button>
<button class="btn btn-sm btn-outline-secondary cart" id ="{{i.id}}">Add To My

Books</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
//contact.html
{% csrf_token %}
{% block title %}Contact{% endblock title %}
{% block body %}
<div class="container mb-3 py-4">
<h1 class="text-center">Contact Us</h1>
<form method="post" action="/Contact">
{% csrf_token %}
<div class="form-group">
<div class="col-md-6 mb-3">
<label for="name">name</label>
<input type="text" class="form-control" id="name" name="name" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="email">Email Id</label>
<input type="email" class="form-control" id="email" name="email"

placeholder="abcd@gmail.com" required >
<div class="invalid-tooltip">
Please provide a valid Email Id.
</div>
</div>
<div class="form-group col-md-6 mb-3">
<label for="phone">Phone Number</label>
<input type="phone" class="form-control" id="phone" name="phone" required>
<div class="invalid-tooltip">
Please provide a valid Phone Number.
</div>
</div>
</div>
<button class="btn btn-primary col-md-1.5 " type="submit">Submit form</button>
</form>
</div>
<style>
.container{
color: beige;
</style>
{% endblock body %}
//index.html
{% block title %}Home{% endblock title %}
{% block body %}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<style>
*{
box-sizing: border-box;
}
body{
background-image: url('./static/images/pexels-photo-19077851.jpeg');
background-size: cover;
h2{
text-transform: uppercase;
color: white;
font-size: 40px;
font-weight: 700;
text-shadow:8px 8px 8px rgba(0, 0, 0, 0.644);
.heading{
position: absolute;
display: flex;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
.container1 .intro{
position: absolute;
display: flex;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
.container1 .intro p{
color: wheat;
font-family: 'Bebas Neue';
text-shadow:8px 8px 8px rgba(0, 0, 0, 0.644);
font-size: 25px;
</style>
</head>
<body>
<div class="heading">
<h2>Online Library</h2>
</div>
<div class="container1">
<div class="intro">
<p>
Online Library Project is about Providing more free boks to students, Teachers,<br>
People in search of ebooks,etc.
We decided to provide as much as free books we can. <br>
Members can add books if they want.
</p>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
</div>
</div>
<div class="container my-5 pt-5 mt-5">

<br><br><br><br><br><br><br><br><br><br>
<h2>Various Genre Books</h2>
<hr class="my-4">

<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-

chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-

chevron-right"></i></a>
</div>


<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>


<div class="carousel-inner" role="listbox">

<div class="carousel-item active">

<div class="row">
<div class="card mb-2">
<img class="card-img-top" src="static/images/scifi.jpg"
alt="Card image cap">
<h4 class="card-title">Sci fi</h4>
<a class="btn btn-primary">View</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<img class="card-img-top" src="static/images/programming.jpg"
<h4 class="card-title">Programming</h4>
</div>
</div>
</div>
<img class="card-img-top" src="static/images/Religion.jpg"
<h4 class="card-title">Religion</h4>
</div>
</div>
</div>
</div>
</div>


<div class="carousel-item">
<div class="row">
<img class="card-img-top" src="static/images/educational.jpg"
<h4 class="card-title">Educational</h4>
</div>
</div>
</div>
<img class="card-img-top" src="static/images/thriller.jpg"
<h4 class="card-title">Thriller</h4>
</div>
</div>
</div>
<img class="card-img-top" src="static/images/medicine.jpg"
<h4 class="card-title">Medicine</h4>
</div>
</div>
</div>
</div>
</div>


<div class="carousel-item">
<div class="row">
<img class="card-img-top" src="static/images/biography.jpg"
<h4 class="card-title">Biography</h4>
</div>
</div>
</div>
<img class="card-img-top" src="static/images/horror.jpg"
<h4 class="card-title">Horror</h4>
</div>
</div>
</div>
<img class="card-img-top" src="static/images/Drama.jpg"
<h4 class="card-title">Drama</h4>
</div>
</div>
</div>
</div>
</div>

</div>

</div>

</div>
{% endblock body %}
//pay.html
{% load static %}
{% block title %}Pay{% endblock title %}
{% block body %}
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<link href='https://use.fontawesome.com/releases/v5.8.1/css/all.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script
src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<div class="container py-5">

<div class="row mb-4">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-6">Become a Member, Pay here</h1>
</div>
</div> 

<div class="row">
<div class="col-lg-6 mx-auto">
<div class="card shadow-lg">
<div class="card-header">
<div class="bg-white shadow-lg pt-4 pl-2 pr-2 pb-2">

<ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3">
<li class="nav-item"> <a data-toggle="pill" href="#credit-card" class="nav-link active

"> <i class="fas fa-credit-card mr-2"></i> Credit Card </a> </li>
<li class="nav-item"> <a data-toggle="pill" href="#paypal" class="nav-link "> <i

class="fab fa-paypal mr-2"></i> Paypal </a> </li>
<li class="nav-item"> <a data-toggle="pill" href="#net-banking" class="nav-link "> <i

class="fas fa-mobile-alt mr-2"></i> Net Banking </a> </li>
</ul>
</div> 

<div class="tab-content">

<div id="credit-card" class="tab-pane fade show active pt-3">
<form role="form" onsubmit="event.preventDefault()">
<div class="form-group"> <label for="username">
<h6>Card Owner</h6>
</label> <input type="text" name="username" placeholder="Card Owner Name"

required class="form-control "> </div>
<div class="form-group"> <label for="cardNumber">
<h6>Card number</h6>
</label>
<div class="input-group"> <input type="text" name="cardNumber"

placeholder="Valid card number" class="form-control " required>
<div class="input-group-append"> <span class="input-group-text text-

muted"> <i class="fab fa-cc-visa mx-1"></i> <i class="fab fa-cc-mastercard mx-1"></i> <i class="fab
fa-cc-amex mx-1"></i> </span> </div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group"> <label><span class="hidden-xs">
<h6>Expiration Date</h6>
</span></label>
<div class="input-group"> <input type="number" placeholder="MM"

name="" class="form-control" required> <input type="number" placeholder="YY" name=""
class="form-control" required> </div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group mb-4"> <label data-toggle="tooltip" title="Three digit

CV code on the back of your card">
<h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>
</label> <input type="text" required class="form-control"> </div>
</div>
</div>
<div class="card-footer"> <button type="button" class="subscribe btn btn-primary

btn-block shadow-sm"> Confirm Payment </button>
</form>
</div>
</div> 

<div id="paypal" class="tab-pane fade pt-3">
<h6 class="pb-2">Select your paypal account type</h6>
<div class="form-group "> <label class="radio-inline"> <input type="radio"

name="optradio" checked> Domestic </label> <label class="radio-inline"> <input type="radio"
name="optradio" class="ml-5">International </label></div>
<p> <button type="button" class="btn btn-primary "><i class="fab fa-paypal mr-2"></i>

Log into my Paypal</button> </p>
<p class="text-muted"> Note: After clicking on the button, you will be directed to a
secure gateway for payment. After completing the payment process, you will be redirected back to
the website to view details of your order. </p>
</div> 

<div id="net-banking" class="tab-pane fade pt-3">
<div class="form-group "> <label for="Select Your Bank">
<h6>Select your Bank</h6>
</label> <select class="form-control" id="ccmonth">
<option value="" selected disabled>--Please select your Bank--</option>
<option>Bank 1</option>
</select> </div>
<p> <button type="button" class="btn btn-primary "><i class="fas fa-mobile-alt mr-

2"></i> Proceed Payment</button> </p>
</div>
<p class="text-muted">Note: After clicking on the button, you will be directed to a

secure gateway for payment. After completing the payment process, you will be redirected back to
the website to view details of your order. </p>
</div> 

</div>
</div>
</div>
</div>
<style>
body {
background: #f5f5f5
.rounded {
border-radius: 1rem
.nav-pills .nav-link {
color: #555
.nav-pills .nav-link.active {
color: white
input[type="radio"] {
margin-right: 5px
.bold {
font-weight: bold
</style>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}
//pdfpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pdf</title>
</head>
<body>
<embed src="/pdf/<embed src=”/pdf/sample-3pp.pdf#page=2" type=”application/pdf”

width=”100%” height=”100%”>
</body>
</html>
//signup.html
{% block title %}Sign up Or Login{% endblock title %}
{% block body %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
:root{
--success-color:#2ecc71;
--error-color: #e74c3c;
.container{
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0, 0.3);
margin-top: 10%;
width: 400px;
h2{
text-align: center;
margin: 0 0 20px;
.form{
padding: 30px 40px;
.form-control{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
.form-control label{
color: #777;
display: block;
margin-bottom: 5px;
.form-control input{
border: 2px solid #f0f0f0;
border-radius: 4px;
width: 100%;
padding: 10px;
font-size: 14px;
.form-control input:focus{
outline: 0;
border-color: #777;
.form-control.success input{
border-color:var(--success-color);
.form-control.error input{
border-color:var(--error-color);
.form-control small{
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
.form-control.error small{
visibility: visible;
}
.form button{
cursor: pointer;
background-color: #3498db;
border: 2px sold #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
width: 100%;
</style>
<div class="container">
<form id="form" class="form" autocomplete="off">
<h2>Register with us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
</div>
<label for="password2">Confirm Passsword</label>
<input type="password" id="password2" placeholder="Enter password again"><br><br>
</div><br><br>
<button type="submit">Submit</button>
</form>
</div>
<script src="static/App.js"></script>
{% endblock body %}
/**Templates**/

Source Code - Online Library System

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Source Code - Online Library System

Uploaded by

Copyright:

Available Formats

DIV: A

from django.contrib import admin

from home.models import Contact, Library, category, signup

# Register your models here.

from django.apps import AppConfig

from django.db import models

# Create your models here.

phone = models.CharField( max_length=12)

category = models.ForeignKey(category, on_delete=models.CASCADE, null=True)

author = models.CharField(max_length=50, null=True)

link = models.FileField( upload_to="pdf", max_length=100)

from os import name

from home.views import index

from django.contrib import admin

from home import views

path('', views.index, name= 'home'),

path('home',views.index, name= 'home'),

from django.shortcuts import render, HttpResponse

from home.models import Contact, Library, category

from datetime import datetime

from django.contrib import messages

# Create your views here.

return render(request, "index.html")

#return HttpResponse("Home page")

return render(request, "about.html")

#return HttpResponse("about page")

return render(request, "books.html")

return render(request, "category.html", {"lis":lis})

#return HttpResponse("Books page")

contact = Contact(name=name, email= email, phone= phone, date= datetime.today())

messages.success(request, 'Your message has been sent.')

return render(request, "contact.html")

#return HttpResponse("contact page")

return render(request, "signup.html")

return render(request, "pay.html")

//Show input error message

const re= /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-

showError(email,'Email is not valid');

showError(password2,'confirm password is required');

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"

<link rel="icon" href="static/images/images.png" type="image/png" sizes="15x10">

<title> {% block title %}{% endblock title %} | welcome To Online Library</title>

font-family: 'Archivo Black', sans-serif;

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">

<a class="navbar-brand" href="#">Online Library</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mx-auto">

<li class="nav-item active">

<a class="nav-link" href="home">Home </a>

<a class="nav-link" href="about">about</a>

<a class="nav-link" href="Books">My Books</a>

<a class="nav-link" href="Category">Category</a>

<a class="nav-link" href="Contact">Contact Us</a>

<a class="nav-link" href="signup">Sign up</a>

<a class="nav-link" href="pay">Membership</a>

<form class="form-inline my-2 my-lg-0">

<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

{% for message in messages %}

<div class="footer-copyright text-center py-3">© {% now 'Y' %} Copyright: