A

Minor Project Report on

Handmade Hub
Submitted in Partial Fulfillment of the requirement for the Award of Degree of Master of
Computer Application
Session 2022-23

Submitted to

Dr. Bineet Kumar Gupta

(Head of Department of DCSIS)

Submitted by

Priyanshi Singh
(202110101050012)

Department of Computer Science and Information Systems

Shri Ramswaroop Memorial University

Barabanki, Uttar Pradesh
 ACKNOWLEDGEMENT
I would like to express my profound gratitude to Dr. Bineet Gupta, Head of Department of Computer
Science and Information Systems and to my faculty Dr. Rajat Sharma who gave me this opportunity to
work on the project HANDMADE HUB.

I would like to express my special thanks to my mentor who gave me useful advice and suggestions which
were really helpful to me during the project’s completion.

I would like to acknowledge that this project was completed entirely by me not by someone else.

Priyanshi Singh
 CERTIFICATE
This is to certify that the synopsis entitled Handmade Hub being submitted by Priyanshi Singh
towards partial fulfillment for the award of the Degree of Master of Computer Application from the
Department of Computer Science and Information Systems to SHRI RAMSWAROOP
MEMORIAL UNIVERSITY is a record of benefied work carried out by them under my guidance
and supervision.

The results embodied in this project synopsis have not been submitted to any other University or Institute
for the award of any Degree or Diploma.

Dr. Bineet Kumar Gupta Dr. Rajat Sharma

(Project Coordinator) (Supervisor)
 TABLE OF CONTENT

S.No. Description Page No.

1. Introduction 1
1.1. Background
1.2. Objective
1.3. Key Features
1.4. Scope
1.5. Purpose
2. Requirement Analysis 2
3. Software Requirement 2
3.1. Server
3.2. Client
3.3. Developer
4. Hardware Requirement 2
4.1. Server
4.2. Client
4.3. Developer
5. Project Team 2
6. Module Description 3
6.1. Frontend
7. Data Flow Diagram 3
8. ER Diagram 4
9. Code 4-16
10. Screenshot 17-19
8. Conclusion 19
9. Reference 19
1. INTRODUCTION

1.1 Background

During covid many people lose their jobs after which they start their small business. And since
2020 the number of small businesses has increased by 20%. But in order to reach more
customers we need this type of website. Handmade Hub provides online purchasing facilities
for guests who have been invited to select gifts from a list of gifts. This includes ordering,
provision of purchasing facilities, wrapping and delivery.
After a guest has entered his username and password, he can select the gift. The user can
view and select one or more gifts by looking at the price, category and details.
After the user has placed the gift(s) in the shopping cart, the user confirms the order. At
this point a Secure Payment Gateway connection is established and the user is required to enter
credit card details. After finally submitting the order, the company's inventory and payments
databases are updated and the user is sent an email with order confirmation and delivery details.

1.2 Objective

Its main objective is to grow my small business so that people can easily contact and buy
handmade gift items for their loved ones. This project will provide users a broad variety of gift
items such as acrylic sheet letters, memory globe etc. The gifts will be budget friendly and
customization will be available. This project stands for quality and commitment to the
customer. Also this project supports the Make In India initiative.

1.3 Key Features

- Provide handmade gifts with customization.

- Provide budget friendly gift items.
- Provide broad variety of gift items to select
- Provide shipping across the world.
- User Friendly website.
- This project is working on the principles of quality management and time bound delivery to
the customers.

1.4 Scope

● It had the scope and viability of the craft industry and its market potential.
● It will regulate the cash flow.
● It can also Tie up with various other small businesses and both the business can be grown.
● Can be used by customers all around the world.

1.5 Purpose

● It provides a platform to avail the handmade gift selling service.

● It can also help a small business to grow and enhance its capabilities.
● It is beneficial for both the user and the seller as it provides easy means of communication.
2. REQUIREMENT ANALYSIS

It is used to determine the needs and expectations of a new product. It involves frequent
communication with the stakeholders and end-users of the product to define expectations, resolve
conflicts, and document all the key requirements.
Requirements analysis encompasses those tasks that go into determining the needs or conditions to
meet for a new or altered product or project.

3. SOFTWARE REQUIREMENT
3.1 Server
• Browser : Any browser, i.e, chrome.
• Operating System : Windows

3.2 Client
• Browser : Any browser, i.e, chrome.
• Operating System : Windows

3.3 Developer
• Browser : Any browser, i.e, chrome.
• IDE : Visual Studio
• Operating System : Windows
• Documentation Tool : MS-Word, MS-Powerpoint

4. HARDWARE REQUIREMENT 4.1 Server

• Processor : i3 or above
• RAM : 4 GB
• Display : 1024*768 High Color-64-bit
4.2 Client
• Processor : i3 or above
• RAM : 4 GB
• Display : 1024*768 High Color-64-bit

4.3 Developer
• Processor : Inter CORE i7
• RAM : 4 GB
• Display : 1024*768 High Color-64-bit

5. PROJECT TEAM
1. Priyanshi Singh (Roll No. - 202110101050012)
6. MODULE DESCRIPTION
User Side -
● Login module: In this module login option is provided to login. Also a new signup option is
provided for new users to sign up.
● Products module: The customer can see all the gift items with their detail.
● Order module: Here customer can see all the order details that he placed. When a
customer clicks the “Order” link it will go straight to the “Paid” orders.
● Shopping module: The customer can select the items and put it into a cart and as soon as
he clicks on finish, the total amount to be paid is displayed and the amount has to be paid
on delivery.

Admin Side -
● Dashboard module: The dashboard module is for administrators where admin can add
items, staff, category, promo code, etc.
● Admin module: Administrator has full permission to access this web site. Administrators or
employees can handle customer details, and he can communicate with customers through
mail.
● Products module: The shop owner has the authority to add or delete items from online gift
shops. Shop owner also has the right to modify those details. They can add new products
by entering product name, product price, product description, category, etc.

7. DATA FLOW DIAGRAM

0 Level -

1 Level -
8. ER DIAGRAM

9. CODE

9.1 Frontend

9.1.1 Base.html
{% load django_bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
{% bootstrap_css %}
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
icons/1.9.1/font/bootstrap-icons.min.css"
integrity="sha512-
5PV92qsds/16vyYIJo3T/As4m2d8b6oWYfoqV+vtizRB6KhF1F9kYzWzQmsO6T3z3QG2Xdhrx7FQ+5R1Li
QdUA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.9.1/font/bootstrap-icons.css" integrity="sha384-
xeJqLiuOvjUBq3iGOjvSQSIlwrpqjSHXpduPd6rQpuiM3f5/ijby8pCsnbu5S81n"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.1/css/all.min.css" integrity="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJ
Qd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% block css %}{% endblock %}
<style>
.navbar {
background-color: #A5F1E9 !important;
}
.bg-red {
background-color: #14d3dac3 !important;
}
.bg-red:hover {
background-color: #fffbfc !important;
}

</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3">
<div class="container">
<a class="navbar-brand" href="/">
<i class="bi bi-boxes me-2"></i>
HANDMADE HUB
</a>
<button class="navbar-toggler d-lg-none" type="button" data-bs-
toggle="collapse" data-bs-target="#topbarId"
aria-controls="topbarId" aria-expanded="false" aria-label="toggle
main menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topbarId">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link active" href="/" aria-current="page"><i
class="bi bi-house-door"></i>
Home<span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-tag"></i>
Product</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mt-2 mt-lg-0">
{% if user.is_authenticated %}
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none
dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo"
width="32" height="32"
class="rounded-circle">
</a>
<ul class="dropdown-menu text-small">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign
out</a></li>
</ul>
</div>
{% else %}
<li class="nav-item shadow-sm rounded-2 bg-red px-2">
<a class="nav-link text-white" href="{% url 'login' %}"
title="Sign-In">
<i class="bi bi-person-check me-3"></i> Sign-In
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
{% bootstrap_messages %}
<main>
{% block content %}{% endblock %}
</main>
{% bootstrap_javascript %}
{% block js %}{% endblock %}
</body>
</html>

9.1.2 Index.html
{% extends 'layout/base.html' %}

{% block content %}
<!------------ To Display Image ----------->
<div class="container">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="/static/images/logo1.png" width="100px"
height="100px" class="img-fluid">
</div>
</div>
</div>
 </div>
</div>
<div class="container">
<div class="row">
<h2 class="product text-center " style="color:rgb(255, 63, 15); font-
weight: bold;"></i>Product List</h2><br><br>
{% for item in images %}
<div class="col-md-6 col-lg-3 mb-3">
<div class="card">
<img class="card-img-top" src="{{item.image.url}}"
alt="{{item.title}}" height="200px">
<div class="card-body">
<h5 class="card-title">{{item.title}}</h5>
<p class="card-text">{{item.category}}</p>
<div class="card-footer text-center ">
<a class="btn" href="{% url 'view_image' item.id %}"><i
class="bi bi-card-image"></i></a>
<a class="btn" href="{% url 'cart' item.id %}"><i
class="bi bi-cart3"></i></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!------------ About the Seller ------------>
<div class="container-fluid seller" >
<div class="container-fluid" id="section1">
<b>ABOUT THE SELLER</b>
<p>Paragraph</p>
</div>
<div class="container-fluid" id="section2">
<img src="/static/images" class="img-fluid">
</div>
</div>
</div>
</div>
<!------------ Query Form -------------->
<div class="container-fluid query text-center">
<h4 class="text-center">LEAVE A QUERY</h4>
<form class=" query-form text-center"action="#" method="post">
<div class="form-group" method="POST">
<label for="name">Name</label>
<input type="text"
class="form-control" name="name" id="name"
placeholder="Enter your name">
</div>
 <div class="form-group">
<label for="email">Email</label>
<input type="email"
class="form-control" name="email" id="email"
placeholder="Enter your Email">
</div>
<div class="form-group">
<label for="query">Enter your query</label>
<textarea class="form-control form-control-sm" name="query"
id="query" cols="30" rows="10">Comment</textarea>
</div>
</form>
</div>
<!---------- FOOTER ------------>
<footer class="wrapper" id="footer">
<div class="container-fluid">
<div class="row align-top margin-bottom-xl">
<div class="col-lg text-center">
<a class="text-black" href="#">About Us</a><br>
<a class="text-black" href="#">Contact Us</a><br>
<p> Connect with us</p>
<a href="#" class="connect"><i class="fa-brands fa-
instagram"></i></a>
<a href="#" class="connect"><i class="bi bi-facebook"></i></a>
<a href="#" class="connect"><i class="bi bi-envelope"></i></a>
</div>
</div>
</div>
</footer>
{% endblock content %}
{% block css %}
<style>
#footer{
padding:10px 10px 10px 10px;
background-color:#A5F1E9;
color:black;
}
.seller{
background-color: #7FE9DE;
padding:10px 10px 10px 10px;
display:flex;
width:65%;
height:auto;
}
#section1{
width:70%;
float:left;
}
 #section2{
width:30%;
float:right;
}
.query{
padding:10px 10px 10px 10px;
margin:5% 0 5% 10%;
border:2px 2px 2px 2px solid #7FE9DE;
box-shadow: 2px 2px 2px 2px #FFF6BF;
width:75%;
}
.query-form{
width:90%;
margin-left:4%;
}
.connect{
padding:5px 5px 5px 5px;
color:black;
}
</style>
{% endblock css %}

9.1.3 Login.html
{% extends 'layout/base.html' %}
{% load django_bootstrap5 %}
{% load static %}
{% block content %}
<div class="container pt-5">
<div class="row justify-content-center align-items-center 100h pt-5">
<div class="col-lg-8 ">
<div class="card mb-3 border-0 rounded-3 shadow-lg mt-5">
<div class="row g-0">
<div class="col-md-4 rounded-start mx-auto d-flex align-items-
center">
<img src="{% static 'images/logo 1.png' %}" class="img-
fluid mx-auto hero" alt="login form">
</div>
<div class="col-md-8 py-5">
<div class="card-body">
<h3>Sign In to Handmade Hub </h3>
<form method="POST">
{% csrf_token %}
{% bootstrap_form form %}
{% bootstrap_button "Sign In" type="submit" %}
<a href="{% url 'register' %}" class="nav-
link">Dont have an account, Register Free!</a>
</form>
</div>
 </div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block css %}
<style>
body {
background-color: rgb(44, 41, 39);
height: 100vh;
}
.hero {
transition: all 0.5s ease-in-out;
}
.card:hover {
background-color: rgb(244, 241, 239);
}
</style>
{% endblock %}
{% block js %}
<script>
// function that will rotate .hero when #is_username is focused
function rotateHero(elem, val) {
const hero = document.querySelector(elem);
hero.style.transform = `rotate(${val}deg)`;
}
// get the input field
document.querySelector('#id_username').addEventListener('focus', () => {
rotateHero('.hero', -30); });
document.querySelector('#id_password').addEventListener('focus', () => {
rotateHero('.hero', - 4); });
</script>
{% endblock %}

9.1.4 Register.html
{% extends 'layout/base.html' %}
{% load django_bootstrap5 %}
{% load static %}
{% block content %}
<div class="container pt-5">
<div class="row justify-content-center align-items-center 100h pt-5">
<div class="col-lg-5 ">
<div class="card mb-3 border-0 rounded-3 shadow-lg mt-5">
<div class="card-body">
<h3>Create a new account on Handmade Hub</h3>
<form method="POST">
 {% csrf_token %}
{% bootstrap_form form %}
{% bootstrap_button "Register" type="submit" %}
<a href="{% url 'login' %}" class="nav-link lead my-
3">Already have an account <b>Login</b></a>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block css %}
<style>
body {
background-color: rgb(237, 147, 87);
height: 100vh;
}
</style>
{% endblock %}

9.1.5 Image_view.html
{% extends 'layout/base.html' %}
{% block content %}
<div class="container vh-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-md-6 col-lg-4">
<img src="{{img.image.url}}" class="img-fluid shadow-lg"
alt="{{img.title}}">
</div>
<div class="col-md-6 col-lg-8">
<h1 style="padding-bottom: 40px; padding-top:20px;">{{img.title}}</h1>
<p>{{img.category}}</p>
<p>{{img.description}}</p>
</div>
</div>
</div>
{% endblock content %}
{% block css %}
<style>
main {
background-color: #FFF6BF;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color:white;
text-align:center;
font-weight: bolder;
 }

img{
border-radius: 20%;
border:10px 10px 10px 10px solid #A5F1E9;
box-shadow: rgba(32, 128, 128, 0.26);
}
p{
color:#1a998c;
font-size:medium;
}
</style>
{% endblock css %}

9.1.6 Cart.html
{% extends 'layout/base.html' %}

{% block content %}
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Product Name</th>
<th>Product Image</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{% for item in product %}
<tr>
<td style="width:10%;">{{item.image.id}}</td>
<td style="width:20%;">{{item.title}}</td>
<td style="width:40%;"><img src="{{item.image.url}}"></td>
<td style="width:30%;">{{item.price}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock content %}
{% block css %}
<style>
table{
border:5px 5px 5px 5px solid black;
box-sizing: border-box;
}
tr{
width:auto;
 }
</style>
{% endblock css %}

9.2 Backend
9.2.1 core
urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
path('admin/', admin.site.urls),
path('',include('product.urls')),
path('account/',include('account.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns +=static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)

9.2.2 account
forms.py
from django import forms
from django.contrib.auth.models import User

INVALID_USERNAMES = ['admin','administrator','root']
# login form
class LoginForm(forms.Form):
username = forms.CharField()
password = forms.CharField(widget=forms.PasswordInput)

def clean_username(self):
username = self.cleaned_data.get('username')
qs = User.objects.filter(username__iexact=username)
if not qs.exists():
raise forms.ValidationError("Invalid Credentials")
return username

# register form
class RegisterForm(forms.Form):
username = forms.CharField()
email = forms.EmailField()
password1 = forms.CharField(widget=forms.PasswordInput,
label='Password')
password2 = forms.CharField(widget=forms.PasswordInput,
label='Confirm Password')
 def clean_username(self):
username = self.cleaned_data.get('username')
qs = User.objects.filter(username__iexact=username)
if qs.exists():
raise forms.ValidationError("Username is not
available!")
if username.lower() in INVALID_USERNAMES:
raise forms.ValidationError("Username is invalid")
return username
def clean_email(self):
email = self.cleaned_data.get('email')
qs = User.objects.filter(email__iexact=email)
if qs.exists():
raise forms.ValidationError("Email already exists")
return email

urls.py

from urllib.parse import urlparse

from django.urls import path
from .views import login_view, register_view

urlpatterns = [
path('login/', login_view, name = 'login'),
path('register/', register_view, name = 'register')
]

views.py
from django.shortcuts import render, redirect
from django.contrib import messages
from django.contrib.auth import authenticate, login, logout
from .forms import LoginForm

def login_view(request):
form=LoginForm(request.POST or None)
if form.is_valid():
uname = form.cleaned_data.get('username')
pwd = form.cleaned_data.get('password')
user = authenticate(request, username = uname, password =
pwd)
if user is not None:
login(request, user)
messages.success(request, 'Login Successful')
return redirect('/')
else:
messages.error(request, ' Invalid Data')
ctx={
 'form': form ,
'title' : 'Login | Hub '
}
return render(request, 'account/login.html',ctx)
def register_view(request):
pass

9.2.3 product
admin.py
from django.contrib import admin
from .models import *

@admin.register(Product)
class ImageAdmin(admin.ModelAdmin):
list_display = ('title','image')

@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
pass

models.py

from django.db import models

class Category(models.Model):
name = models.CharField(max_length=50)
def __str__(self) -> str:
return self.name

class Product(models.Model):
title = models.CharField(max_length=40)
image = models.ImageField(upload_to='images/')
description = models.CharField(max_length=200)
uploaded_at = models.DateField(auto_now_add=True)
category = models.ForeignKey(Category, on_delete =
models.CASCADE)
def __str__(self):
return self.title

urls.py

from django.urls import path

from .views import *

urlpatterns = [
path('',index, name = "index"),
path('view_image/<int:image_id>/', view_image,
name='view_image'),
 path('cart/<int:product_id>/',cart, name='cart'),
]

views.py

from django.shortcuts import render, redirect, get_object_or_404

from .models import *

def index(request):
product = Product.objects.all()
ctx={
'images' : product,
'title' : 'Handmade Hub',
}
return render(request, 'product/index.html' , ctx)
def view_image(request, image_id):
try:
item= Product.objects.get(id=image_id)
ctx = {
'img' : item,
'title' : item.title,
}
return render(request, 'product/image_view.html',ctx)
except:
return redirect('index')
def cart(request,product_id):
try:
product=Product.objects.get(id=product_id)
ctx={
'product': product,
'title' : 'Cart'
}
return redirect('cart')
except:
return redirect('index')
10. SCREENSHOT

10.1 Admin Side

10.2 User Side
11. CONCLUSION
The package was designed in such a way that future modifications can be done easily. The following
conclusion can be deduced from the development of the project:
• Automation of the entire system improves efficiency.
• It provides a friendly graphical user interface
• It gives appropriate access to the authorized users depending on their permissions.
• It effectively overcomes the delay in communications.
• Updating information becomes so easy.

12. REFERENCE
● https://www.w3schools.com/html/
● https://www.djangoproject.com/
● https://www.w3schools.com/w3css/defaulT.asp
● https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction
● https://github.com/django/django