“ONLINE ART GALLERY SHOP”

PROJECT REPORT SUBMITTED

BY-

Rohit Raj Srivastava

UNDER GUIDANCE OF:-

“”,Centre Of Computer Education

Of

UNIVERSITY OF ALLAHABAD
Allahabad,(U.P) India

A PROJECT REPORT
Submitted to the
Centre Of Computer Education, UoA
2019-2020

Page 1 of 55
 CERTIFICATE

This is to certify that the project titled “ONLINE ART

GALLERY SHOP” is an academic work done by “Rohit Raj
Srivastava” submitted in the partial fulfillment of the
requirement for the award of the Degree of “Bachelor Of
Computer Application” from “University Of Allahabad,
Prayagraj” under my guidance & direction. To the best of my
knowleged and belief the data & information presented by
him/her in the project has not been submitted earlier.

Mr.
(Name of the Faculty Guide)

Page 2 of 55
 STUDENT UNDERTAKING

I ROHIT RAJ SRIVASTAVA have completed the project titled

“ONLINE ART GALLERY SHOP” under the guidance of in
the partial fulfillment of the requirement for the award of Degree
of Bachelor Of Computer Application of University Of
Allahabad. This is an original piece of work & I have neither
copied and nor submitted it earlier elsewhere.

Rohit

Place: Prayagraj
Date: 22-May-2020

Acknowledgement

Page 3 of 55
I am extremely grateful and remain indebted to my teachers for
being a source of inspiration and for his constant support in the
Design, Implementation and Evaluation of the project. I am
thankful to his for constant constructive criticism and invaluable
suggestion, which benefited me a lot while developing the
project on “ONLINE ART GALLERY SHOP”, He has been a
constant source of inspiration and motivation for hard work, he
has been very co-operative throughtout this project work. With
candor and pleasure I take opportunity to express my sincere
thanks and obligation to Mr.R.R TIWARI(Course
Coordinator, Head Of Department, CCE) and faculty
member. Though this column, it would be my utmost pleasure
to express my warm thanks to him for the encouragement, co-
operation and consent without which we mightn’t be able to
accomplish this project.

Finally, I gratefull acknowledge the support, Thank You!

Index

Title. Page No.

1. Introduction……………………………………………………….6

Page 4 of 55
Abstract …………………………………………………………………..6
Existing System………………………………………………………...6
Proposed System……………………………………………………...7
Scope……………………………………………………………………7

2. Feasibility Study…………………………………………………..8

3. System Analysis…………………………………………………..8

Context Level Diagram………………………………………………9

Data Flow Diagram……………………………………………….9-10

4. Software Requirement & Specification…………………….11-12

5. Code……………………………………………………………12-44

6. Screenshot……………………………………………………..45-52

7. System Maintenance …………………………………………52-53

8. Future Scope of the Project……………………………………..53

9. Conclusion ……………………………………………………….54

10. Bibiliography…………………………………………………….55

Introduction

A. Abstract
Online Art Gallery is an online application, which is used to display and
sell art works of artist irrespective of their nationality, gender and other
narrow consideration, through auction. Artist can register online for
Page 5 of 55
being a member in the art gallery and each artist can upload the digital
copy of their art work under the respective categories. They can host
their art work either for auction or for fixed price. The artist is liable to
pay a fraction of the price of each art work to the web site to find the
running fund for site. Art lovers have to go to the art exhibition to
collect their favorite arts or painting. But now-a-days they are not
getting enough time to go to the galleries and collect the arts and
paintings.

B. Existing system

Customer can also register online and they can browse art works that
are arranged in different categories scientifically. Each Customer can
create their own gallery to see his favorite art works without much
difficulty. And each user has the right to purchase an art work using the
integrated payment gateway and participate in auction by submitting
their bids. Qualified bidder should remit the amount using payment
gateway and after each valid payment the art work will be shipped
within some days.

C. Proposed System:
ONLINE ART GALLERY is a application software and it is very helpful for
the art lovers and others who wants to know the addresses where this
kind of arts will we sold. This application helps the end-users to search
their arts and paintings and they can place order for the selected
pieces. The end-user can also get the information about the art
exhibition and the respective address, so, that they can visit to those
exhibitions.
Page 6 of 55
Art Gallery brings you an opportunity to view online art exhibitions at
our Online Art Gallery we bring you details of all art exhibitions held in
the past and the forthcoming show. The Online Art Gallery is updated
daily, so the user can view and buy the latest collection of
contemporary art online from any where in the world. You can view
and buy the latest Indian contemporary art collection available at their
exhibitions and also at their online gallery.

D. Scope

Developing system on a topic like “Online Art Gallery Shop” has much
scope. It is an automated computerized system that will provide best
opportunities to all types of artist. It will be provide effective and
efficient in reducing the problems and errors that are faced in
manually.
It will be a web based online Art Gallery Shop, an online website in
which the artist can sold their paintings according to their prices. It will
make the artist aware of the current paltform opportunities.

Page 7 of 55
 Feasibility Study

The primary objective of this feasibility report is to inform the objective

of proposed system would be to overcome the problem faced in the
manual system. Updating records would not be a problem and also
cross checking of records in the proposed system would not be
required. There is an increased risk of error in the manual system.
Redundancy of data creeps in the manual system and it becomes a very
time consuming. job to search information criteria related to the artist’s
as well as his requirements. This burden can be reduced by making the
Online Art Gallery Shop related whole process automated right from
the beginning.

System Analysis and Design

MEMBERB ART ARTIST

GALLERY

ADMIN

Page 8 of 55
 Context Level DFD

login
login

MEMBER register ART register

ARTIST
GALLERY
Get details Get details

transactions Activate &

deactivation

ADMIN

Data Flow Diagram

DFD level 1 member:
REGEST
MEMBER ATION
D ATA B A S E

CHANGE
LOG
PASS
IN WORD

VIEW SEARC
GET ART H ADD SELEC
PROFILE GALLE ARTIST CART T ART
RY WISE

BILLI CON
ORD PAY
NG & FIRM
ER MEN
SHIP ATIO
NOW T
PING N

Page 9 of 55
DFD Level 1 Artist:
REGES
ARTIST TRATIO
N

CHANG
EPASS
LOGIN WORD
DATA BASE

GET VEW SEARCH UPLOA

PROFI GALLE BY D ART
LE RY ARTIST

DFD Level 1 Admin:

ARTIST

MEMBER ART DATA

GALLERY BASE

ADMIN

Page 10 of 55
 System Requirement and Specification

Hardware Requirement:-

This section will describe the hardware requirement which is at

least necessary to run this website.

 Processor
 RAM
 Hard disk
 Cache Memory

Software Requirement:-

Front end: html, css, and javascript.

1. Html ; html is used to create and save web document.
2. Css; create attractive layout.
3. Javascript; it is a programming language, commonly use with
web browsers.
Backend: php, mysql
1. Php: hypertext pre-processor(php) is a technology that
allows software developers to create dynamically
generated web pages, in html, xml, or other document
types, as per client request.

Page 11 of 55
 2. Mysql: it is a database, widely used for accessing
querying, updating, and managing data in database.

Code
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<link rel="stylesheet" href="css/w3.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body, html {

height: 100%;

margin: 0;

font-family: Arial, Helvetica, sans-serif;

.hero-image {

Page 12 of 55
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("art4.jpg");

height: 50%;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

position: relative;

.hero-text {

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

.hero-text button {

border: none;

Page 13 of 55
 outline: 0;

display: inline-block;

padding: 25px 25px;

color: black;

background-color: #ddd;

text-align: center;

cursor: pointer;

.hero-text button:hover {

background-color: #555;

color: white;

</style>

</head>

<body>

<div class="hero-image">

<div class="hero-text">

Page 14 of 55
 <h1 style="font-size:60px"><i class="fa fa-fw fa-opencart"></i>Port
Rayal</h1>

<p style="font-size:20px">Art Gallery Shop</p>

</div>

</div>

</body>

</html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<link href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif;

Page 15 of 55
}

.sidenav {

height: 100%;

width: 0;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

overflow-x: hidden;

transition: 0.5s;

padding-top: 60px;

/* Style the sidenav links and the dropdown button */

.sidenav a, .dropdown-btn {

padding: 6px 8px 6px 16px;

text-decoration: none;

font-size: 20px;

Page 16 of 55
 color: #818181;

display: block;

border: none;

background: none;

width: 100%;

text-align: left;

cursor: pointer;

outline: none;

/* On mouse-over */

.sidenav a:hover, .dropdown-btn:hover {

color: #f1f1f1;

.sidenav .closebtn {

position: relative;

top: 0;

right: 20px;

Page 17 of 55
 font-size: 45px;

margin-left: 200px;

.main {

margin-left: 200px; /* Same as the width of the sidenav */

font-size: 30px; /* Increased text to enable scrolling */

padding: 0px 10px;

.active {

background-color: green;

color: white;

.dropdown-container {

display: none;

background-color: #262626;

padding-left: 8px;

.fa-caret-down {

Page 18 of 55
 float: right;

padding-right: 8px;

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}

.sidenav a {font-size: 18px;}

</style>

</head>

<body>

<div id="mySidenav" class="sidenav">

<a href="javascript:void(0)" class="closebtn"

onclick="closeNav()">&times;</a>

<a href="./index pg.html"><i class="fa fa-fw fa-home"></i>Home</a>

<a href="./about.html"><i class="fa fa-fw fa-user-md"></i>About

us</a>

<button class="dropdown-btn"><i class="fa fa-fw fa-

users"></i>Account

<i class="fa fa-caret-down"></i>

Page 19 of 55
 </button>

<div class="dropdown-container">

<a href="./sign-up.html"><i class="fa fa-fw fa-user-plus"></i>Sign

Up</a>

<a href="./login.html"><i class="fa fa-fw fa-user"></i>Login</a>

</div>

<a href="./gallery.html"><i class="fa fa-fw fa-image"></i>Gallery

Store</a>

<a href="./contact.html"><i class="fa fa-fw fa-envelope"></i>Contact

us</a>

</div>

<div id="main">

<span style="font-size:30px;cursor:pointer"
onclick="openNav()">&#9776; Menu</span>

</div>

<script>

function openNav() {

document.getElementById("mySidenav").style.width = "250px";

Page 20 of 55
 document.getElementById("main").style.marginLeft = "250px";

function closeNav() {

document.getElementById("mySidenav").style.width = "0";

document.getElementById("main").style.marginLeft= "0";

</script>

<script>

/* Loop through all dropdown buttons to toggle between hiding and

showing its dropdown content - This allows the user to have multiple
dropdowns without any conflict */

var dropdown = document.getElementsByClassName("dropdown-btn");

var i;

for (i = 0; i < dropdown.length; i++) {

dropdown[i].addEventListener("click", function() {

this.classList.toggle("active");

var dropdownContent = this.nextElementSibling;

Page 21 of 55
 if (dropdownContent.style.display === "block") {

dropdownContent.style.display = "none";

} else {

dropdownContent.style.display = "block";

});

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

Page 22 of 55
body {

font-family: Arial;

*{

box-sizing: border-box;

form.example input[type=text] {

padding: 10px;

font-size: 17px;

border: 2px solid grey;

float: left;

width: 80%;

background: #f1f1f1;

form.example button {

float: left;

width: 20%;

Page 23 of 55
 padding: 10px;

background: #2196F3;

color: white;

font-size: 17px;

border: 2px solid grey;

border-left: none;

cursor: pointer;

form.example button:hover {

background: #0b7dda;

form.example::after {

content: "";

clear: both;

display: table;

</style>

</head>

Page 24 of 55
<body>

<form class="example" action="/action_page.php"

style="margin:auto;max-width:300px">

<input type="text" placeholder="Search..item" name="search2">

<a href="http://google search.com" class="submit btn"><button

type="submit"><i class="fa fa-search"></i></button></a>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<style>

*{

box-sizing: border-box;

Page 25 of 55
body {

font-family: Arial, Helvetica, sans-serif;

/* Float four columns side by side */

.column {

float: left;

width: 25%;

padding: 10px 10px;

/* Remove extra left and right margins, due to padding */

.row {margin: 0 -5px;}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

Page 26 of 55
}

/* Responsive columns */

@media screen and (max-width: 600px) {

.column {

width: 100%;

display: block;

margin-bottom: 20px;

/* Style the counter cards */

.card {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

padding: 16px;

text-align: center;

background-color: #ddd;

</style>

</head>

Page 27 of 55
<body>

<div class="row">

<div class="column">

<div class="card">

<img src="art13.png" style="width: 85%">

</div> </div>

<div class="column">

<div class="card">

<img src="art5.jpg" style="width: 100%">

</div>

</div>

<div class="column">

<div class="card">

<img src="art7.jpg" style="width: 100%">

</div>

</div>

Page 28 of 55
 <div class="column">

<div class="card">

<img src="art3.png" style="width: 90%">

</div>

</div>

</div>

<div class="row">

<div class="column">

<div class="card">

<img src="art8.jpg" style="width: 95%">

</div> </div>

<div class="column">

<div class="card">

<img src="art2.jpg" style="width: 100%">

</div> </div>

Page 29 of 55
<div class="column">

<div class="card">

<img src="art9.jpg" style="width: 100%">

</div> </div>

<div class="column">

<div class="card">

<img src="art4.jpg" style="width: 90%">

</div> </div>

</div>

<div class="row">

<div class="column">

<div class="card">

<img src="art14.jpg" style="width: 105%">

</div> </div>

<div class="column">

Page 30 of 55
 <div class="card">

<img src="art12.jpg" style="width: 98%">

</div> </div>

<div class="column">

<div class="card">

<img src="art15.jpg" style="width: 100%">

</div> </div>

<div class="column">

<div class="card">

<img src="art16.png" style="width: 100%">

</div> </div>

</div>

</body>

</html>

<!DOCTYPE html>

Page 31 of 55
<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

Page 32 of 55
 position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

Page 33 of 55
/* On hover, add a black background color with a little bit see-through
*/

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

/* Caption text */

.text {

color: white;

font-size: 25px;

padding: 8px 12px;

position: absolute;

bottom: 10px;

width: 100%;

text-align: center;

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

Page 34 of 55
 font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

.active, .dot:hover {

background-color: #717171;

Page 35 of 55
}

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

@-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

Page 36 of 55
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

</style>

</head>

<body>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext">1/ 3</div>

<img src="art26.jpg" style="width:100%">

<div class="text">Beautiful Painting For Sale</div>

</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="art27.jpg" style="width:100%">

<div class="text">Beautiful Painting For Sale</div>

Page 37 of 55
</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="art20.jpg" style="width:100%">

<div class="text">Beautiful Painting For Sale</div>

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

Page 38 of 55
<script>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

showSlides(slideIndex += n);

function currentSlide(n) {

showSlides(slideIndex = n);

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

Page 39 of 55
 }

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1">

<style>

/* Footer */

Page 40 of 55
.footer {

padding: 20px;

text-align: center;

background: #f1f1f1;

/* Responsive layout - when the screen is less than 700px wide, make
the two columns stack on top of each other instead of next to each
other */

@media screen and (max-width: 700px) {

.row {

flex-direction: column;

</style>

</head>

<body>

<div class="footer">

<h2><i class="fa fa-fw fa-opencart"></i>Port Rayal </h2>

<p>(Art Gallery Shop)</p>

Page 41 of 55
 <footer class="w3-container w3-padding-64 w3-center w3-black w3-
xlarge" align="center">

<a href="http://m.facebook.com"><i class="fa fa-facebook-

official"></i></a>

<a href="http://in.pinterest.com"><i class="fa fa-pinterest-

p"></i></a>

<a href="http://twitter.com"><i class="fa fa-twitter"></i></a>

<a href="http://www.flickr.com"><i class="fa fa-flickr"></i></a>

<a href="http://in.linkedin.com"><i class="fa fa-linkedin"></i></a>

<p class="w3-medium"><i>

Powered by <a href="https://themevault.net" target="_blank">Port

Rayal</a>

</p></i>

<head>

<hr style="border:3px solid #f1f1f1">

<!-- Font Awesome Icon Library -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

.checked {

color: orange;

Page 42 of 55
}

</style>

</head>

<body>

<h2><b>Our Star Rating</b></h2>

<span class="fa fa-star checked"></span>

<span class="fa fa-star checked"></span>

<span class="fa fa-star checked"></span>

<span class="fa fa-star checked"></span>

<span class="fa fa-star checked"></span>

<p>4.1 average based on 254 reviews.</p>

</footer>

<script>

// Automatic Slideshow - change image every 3 seconds

var myIndex = 0;

carousel();

function carousel() {

Page 43 of 55
 var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 6000);

</script>

</body>

</html>

Page 44 of 55
Screen Shot
Window1

Page 45 of 55
Window1

Page 46 of 55
Window2

Window3

Window4
Page 47 of 55
Window5

Window6

Page 48 of 55
Window7

Page 49 of 55
Page 50 of 55
Window8

Page 51 of 55
 Window9

System Maintenance

It needs to continually maintain the system. Programmers/ analyst

spend sufficient time for maintaining programs.
The study on the maintenance requirement for the information system
revealed that:
 60-90 percent of the overall cost of software during the life of the
system is spent on the maintenance.
 In document cases, the cost of maintenance, when measured on
the basis of writing each instruction in coding form, is more than
50 times the cost of developing a system.
 The software demand is increasing at faster rate than supply.
there is a backlog of new development work.
The maintenance can be classified as corrective, adaptation or
Perfective:-

Corrective maintenance:- means repairing, processing or

Page 52 of 55
performance failure or making alterations because of previous ill-
defined problems.

Adaptation maintenance:- means changing the program function.

Enhancing performance the programs according to user’s additional
needs are included in

Perfective maintenance:- more time and money are spent on perfective

than on corrective and adaptive maintenance together.
Maintenance covers a wide range of activities including correcting
coding and design errors, updating documentation and test data and
upgrading user support.

Future scope of the project

The main objective for developing this project was to sell art through
online. This project intends different types of forms with many types of
arts varities provides to user to buy online. Online art user can give
order from any place and pay cash on delivery. This project provides a
lot of features to manage in very well manner. The main aim for
developing this module is to manage the arts. This arts module is the
main module in this project.

Page 53 of 55
 Conclusion

The “computation of online art gallery management system” has been

developed by us through applying our knowledge referring to certain
images, browsing some sites and through the help of external and
internal faculties and using our own knowledge related to the subject
itself.

The system has been made so transparent for the users so that client
can trust and have faith in reliability of information. Our system is users
friendly and users will be satisfied with the system.

No project can be teamed as “perfect” in real sense and there always

remains scope for further improvement and so that helps to develop a
new version. We are always eager to know some new points and
validation related to the projects and which give us more knowledge
and help us to create new version.

Page 54 of 55
 Bibliography

Websites:-

 www.w3school.com
 www.pinterest.com

Search engine:-

 Google
 Yahoo

Books & Documents:-

 Html & Css by Jon Duckett

 JavaScript:

Page 55 of 55