Project Report Submitted Under The University of Kalyani in Partial Fulfillment

Of The Requirements For B.Com Course

By
AVOY DAS
B.COM 6TH SEMESTER .
ROLL NO. 1316108-2108103
REGISTRATION No.010938 OF 2021-22
CHAKDAHA COLLAGE
NADIA

Under the supervision of Mr. Naresh Mondal

Assistant Professors & Department of Commerce Chakdaha Collage

1
 Acknowledgment

My journey to this point has been a rocky one and through it all, I have had some
people who have been there for me through it all. I would like to thank my
supervisor who have been of great help to me.

I would like to thank, Seppo Mäkinen for helping me to finish my degree program
finally. He has been instrumental in my thesis process, and I appreciate that very
much.

At this moment I never forget the names of MR. Goutam Dey, Mr. Naresh Mondal, and Mr.
Soumya Sourav Bose of the Department of Commerce, Chakdaha College for their kind
support in completing the project report. I amlargely indebted to them. I also convey my
heartiest gratitude to Dr. Paritosh Biswas, Teacher-in-Charge, Chakdaha College, and
teachers of the other department who have acted as well-wishers since the beginning of
college education.

Avoy Das

Date

Signature

2
 ANNEXURE-IA

Supervisor's Certificate

This is to certify that Mr. Avoy Das, a student of B.Com. General

of Chakdaha College under the University of Kalyani has worked
under my supervision and guidance for his Project Work and
prepared a Project Report with the title " AN E-COMMERCE
SHOPPING WEB SITE" which, he submitting, is his genuine and
original work to the best of my knowledge.

Name: Naresh Mondal

Name of the College: Chakdaha
Collage Designation: Department of
Commerce

SIGNATURE

3
 Information Technology

ABSTRACT
Author Dr. Naresh Mondal
Title An eCommerce shopping website
The year 2024
Language English
Pages 43

The thesis aimed to develop an online shop using open source technologies (PHP,
HTML5, CSS3, JavaScript, MySQL and Apache Web Server) for electronics products in
Ghana where customers will be able to buy products online.

The designed application will have an admin view and the public or guest view. The
admin view is meant for the administrator to update the products, change prices,
remove and add products and also manage customers. The customer view will be
accessible to the customers, and they will be able to handle their information such as
their name, address, and contact. Also, the customer will be able to order for products
from the shop.

Keywords Customer, User,PHP, MySQL, HTML5, CSS3

4
 TABLE OF CONTENTS
ACKNOWLEDGMENT ....................................................................................... 2
ABSTRACT.............................................................................................................2

1 INTRODUCTION ............................................................................................ 7
2 TOOLS AND TECHNOLOGIES ..................................................................... 8
2.1 Html/Html5 ............................................................................................... 8
2.2 PHP ........................................................................................................... 9
2.3 CSS 3 ......................................................................................................... 9
2.4 JAVASCRIPT ......................................................................................... 10
2.5 MySQL .................................................................................................... 11
2.6 UML ........................................................................................................ 12
2.7 XAMPP ................................................................................................... 12
2.8 Bracket(Editor) ........................................................................................ 12
2.9 PhpMyAdmin .......................................................................................... 12
3 APPLICATION AND DESCRIPTION .......................................................... 13
3.1 Overview of the Various Parts ................................................................ 13
3.2 Administrators Detailed Attribute ........................................................... 13
3.3 Customer Detailed Attribute ................................................................... 14
3.4 The Various Management Unit ............................................................... 15
4 MVC UNIT OF SHOPPING CART .............................................................. 20
4.1 Back-end Module layout ......................................................................... 20
5 DATABASE GUI DESIGN ........................................................................... 22
5.1 Database .................................................................................................. 22
5.2 Customer Interface layout ....................................................................... 24
5.3 Management Interface design ................................................................. 29
6 IMPLEMENTATION ..................................................................................... 32
6.1 Description .............................................................................................. 32
6.2 Implementation of functions ................................................................... 32
6.2.1 Basic HTML of the shop
............................................................. 33
6.2.2 Basic CSS of the shop
................................................................. 34
5
 6.2.3 Available products in the shop
.................................................... 34
6.2.4 User Registration
......................................................................... 35
7 TESTING ........................................................................................................ 37
7.1 Testing shopping cart .............................................................................. 37
7.2 Customer checking out ............................................................................ 38
8 CONCLUSION ............................................................................................... 41
9 FUTURE IMPROVEMENT ........................................................................... 42
Figure 1: The structure of the Html/Html5 webpage .......................................................
8
Figure 2: Demonstrating how the web server Operates using PHP................................. 9
Figure 3:CSS code style ................................................................................................ 10
Figure 4:Basic Javascript format code ........................................................................... 11
Figure 5: A diagram showing the concept of MySQL .................................................. 11
Figure 6: Use case diagram of the shop ......................................................................... 14
Figure 7: User registration function ...............................................................................
16
Figure 9: Customer login function .................................................................................
17
Figure 10:Administration registration diagram ............................................................. 18
Figure 11: Administrator Login diagram ....................................................................... 19
Figure 12: MVC diagram of the online shop ................................................................. 20
Figure 13: Module of Sale .............................................. Error! Bookmark not defined.
Figure 14: Back-end system management diagram ....................................................... 21
Figure 15: ER-diagram of the shop ............................................................................... 22
Figure 16: Database table showing various brands ....................................................... 23
Figure 17: Customer registered to the store ................................................................... 24
Figure 18: The homepage of the shop ........................................................................... 25
Figure 19: Customer registration page .......................................................................... 26
Figure 20: Customer login page .................................................................................... 27
Figure 21: Customer account page ................................................................................ 28
Figure 22: Shopping Cart .............................................................................................. 29
Figure 23: Paypal checkout ........................................................................................... 29

6
Figure 24: Admin registration page ............................................................................... 30
Figure 25: Admin content management ........................................................................ 31
Figure 26: Product display code .................................................................................... 35
Figure 27: Code for product display .............................................................................. 35
Figure 28:User registration code ................................................................................... 36
Figure 29: Product in a shopping cart ............................................................................ 38
Figure 30: Paypal checkout ........................................................................................... 39
Figure 31: Detailed Paypal payment ............................................................................. 40

7
 1 INTRODUCTION
E-commerce (electronic commerce or EC) is the buying and selling of goods and
services, or the transmitting of funds or data, over an electronic network, primarily the
internet. These business transactions occur either as business-to-business, business-
toconsumer, consumer-to-consumer or consumer-to-business.

E-commerce shops have become part of our daily lives. Technological advancement has
made it possible for people to sit in the convenience of their homes and still shop online
without going to a physical shop. Africans have also joined the trend of e-commerce
business, so this project is meant to design an eCommerce online shop so that the people
in Ghana (Africa)will be able to purchase their goods and services online.

This project is mainly divided into two main categories: The Administrators and the
Customers/Users.

The store manager and the staff members operate as the administrators. They can add,
edit, update products or, delete products thus they able to change the names of products,
change prices and, add or remove products.

The customer can search for products selection, update the cart, remove products from
the cart and check out from the shop. The customer is also able to update his information
such as names, address and other data.

The User is only able to browse the online shop and add a product to the cart. The user
is limited to the use of the shop.

This thesis contains eight chapters to explain the project. The first chapter introduces
the project; the second chapter defines the tools and technology used for the project,
and the third chapter describes the application and description of the process. The
fourth chapter represents the MVC layout, the fifth defines the database and the Gui
designs, the sixth chapter explains the implementation process,and the seventh chapter
describes the testing of the shop and its features,the eight chapter describes the
conclusion of the whole project. The ninth chapter illustrates possible future
improvement to the shop.

8
 2 TOOLS AND TECHNOLOGIES

These are the necessary tools and materials needed to build the website both the frontend
and the back-end. These include software and open source materials.

2.1 Html/Html5

HTML means Hypertext Markup Language. This language is used in creating web pages.
This language also supports other languages such CSS, PHP, JAVASCRIPT, etc. in
creating interactive and responsive pages on the pages. HTML5 is just an updated version
of the HTML. It supports new features, new attributes, new HTML elements, full CSS3
support, video and audio, 2D/3D graphics that help users and also help web developers
to create new features easily on the website.The structure of HTML5 is shown in figure
1./1/

Figure 1:The structure of the Html/Html5 webpage/11/

9
 2.2 PHP

PHP is a server-side scripting language that is used to develop Static websites or Dynamic
websites or Web applications. It is designed for web development to implement dynamic
web pages and can be embedded into HTML for it to be displayed.Figure 2 demostrates
how the web server operates./2/

Figure 2:Demonstrating how the web server Operates using PHP/12/

2.3 CSS 3

CSS is simply referred to as Cascading Style Sheets.CSS is used to define styles for web

pages, including the design, layout, and variations in the display for different devices and

screen sizes./3/ The general structure of CSS Basic syntax: selector{property: value}

HTML tag you want to modify

the property you want to change

The value you want the property to take

Example:

p{text-align: center;

color: black; font-

family: arial}

10
CSS can be used in a separate style sheet or used in the webpage

Figure 3: CSS code style

2.4 JAVASCRIPT

Javascript is a high-level language which could be used independently or inculcated into

the webpage. It can be used to, handle requests and responses and also add dynamic
behavior and also store information on a website./4/

11
2.5 MySQL

MySQL is a free source database system, and it enables the cost-effective delivery of
reliable and a high-performance and scalable Web-based and embedded database
applications. It is a relational database system(RDBMS). It is a high performing program
and scalable to meet the demands of users and data. MySQL is written in C and C++, so
it is compatible with most of the operating systems available around the world./5/

Figure 4: A diagram showing the concept of MySQL

2.6 UML

(Unified module language)UML. It is used for constructing and documenting a system

or a project. This is widely used by people such as engineers to make module structures
of what they want to build./6/

2.7 XAMPP

XAMPP is an integrated development surrounding, which incorporates Apache HTTP

Server, MySQL Database, and PHP, Mercury, PERL or Python on a home
Windowsbased computer. Apache is a free web server. MySQL is an open source
database. XAMPP is used in collaboration with, PHP, MySQL and, Windows 8
operating system./7/

12
2.8 Bracket(Editor)

Brackets is a free-source editor written in HTML, CSS, and JavaScript. It is created

via Adobe structures, certified underneath the MIT License, and is
presentlymaintained on GitHub. Brackets are compatiblewith Mac, Windows, and
Linux operating system./8/

2.9 PhpMyAdmin

PhpMyAdmin is a free and open source MySQL managementprogram

applicationwritten in PHPand was first launched in 1998 under the GNU preferred
Public License. It is cross-platform help for the essential working structures and helps
management of more than one servers. It supports most MySQL capabilities and has an
intuitive net interface. It additionally has supports developing PDF graphics of database
layout, importing information from CSV and SQL formats as well as exporting records
to various codecs such as SQL, XML, PDF and, CSV./9/
3 APPLICATION AND DESCRIPTION

3.1 Overview of the Various Parts

This project has several parts to it, but the most essential are three listed in Table 1. Table

1: The overview of the three major parts of the shop

Administrators Customers User

Login access Login access Cannot login
Can add products Can add to cart Can add to cart
Can edit product s Can edit product in carts Can edit product in carts
Can view products Can checkout Cannnot check out
Can delete customer None None

3.2 Administrators Detailed Attribute

13
  Admin register
The administrator needs to register before they can have access to the core data of the
shop.
➢ Admin login
The admin logs in and can view, add products, manage customers.

 Admin Edit
The Admin can make changes to the shop such as delete customers, add a customer or,
upload new products.

➢ Manage Customer

The administrator has the authority to delete or add a customer.

3.3 Customer Detailed Attribute

 sign up
This refers to registering as a customer. The registered member has a lot of privileges
associated with the shop when one becomes a customer.
 Login
After the user has registered, the user becomes a customer, and he or she can log in with
their personal information.
 View
The customer can see all the products in the catalog and able to look at the products and
some features on the homepage.
 Edit
The customer can make changes to their data displayed on the customer page. ➢
Update Cart
This refers to putting or removing products from ashopping cart.

Figure 5 is the use case diagram of the shop. One can see the essential attributes
associated with both Administrator and Customers/Users.

14
Figure 5: Use case diagram of the shop

3.4 The Various Management Unit

The Administrators play the management role. They make sure everything in the shop
runs smoothly. Table 2 lists the various management units.

Table 2: Administrators management table

15
  User registration

The Users will use their exclusive information to register. After filling the form and
submitting it, the html5 checks to see if all the fields entered by the user are correct.
If the area is not correctly filled the user remains on the same pagebut if the
requirements are met the data goesto the database (table "customers") and saves the
information of the User. The User then becomes a customer, and he or she is then
directed to the login webpage of the shop. Figure 6 is the diagram that shows the
flow of the User's registration.

16
Figure 6: User registration diagram

 Customer login

The customer will use his particular data e-mail and passwordto log into the shop. After
submitting the form, the html5 checks if all the fields have been filled correctly. If the
condition is not met the customer remains on the same page but if the fields are
correctly filled the customer login information is sent to the database to check if the
data entered into the areas are same as the ones used to register to the database. If it is
correct, the customer is redirected to his homepage, and he can successfully pick
products and check out if they are done shopping. Figure 7 shows the flow diagram of
customer login.

17
Figure 7: Customer login function

 Administrator Registration
The Administrator will use his particular data such as name, e-mail, and password.
After submitting the form, the html5 checks to see if all the fields entered by the
adminis correct. If the filed are not correctly filed, or conditions are not met the admin
remains on the same page but if all requirements are met admin's information goesto
the database and saves the data in the "Admins" in the database. After that, the
administrator is directed to the admin webpage to log in. The Figure 8 shows the
administrator registration diagram.

18
Figure 8:Administration registration diagram

 Administrator Login
When the admin logs into the Administrators webpage the html5 checks to see if
conditions are met when logging in. If all the information provided are correct, the data
is sent to the database to check if the data corresponds to the information used to
register. If it matches to the information provided by the Administrator, a page opens,
and the admin can have access to the administrator's webpage if not the administrator is
restricted from having access to management webpage. The Figure 9 shows the
administrator log in diagram.

19
Figure 9: Administrator Login diagram

4 MVC UNIT OF SHOPPING CART

Figure 10: MVC diagram of the online shop

20
The three parts of the MVC software structure perform the following:

View – shows the interface that the person sees (usually, a webpage). The view
additives provide records to the user and moves to the Controller for manipulating
data.
Model – defines the statistics for the software (typically, the facts is saved in a
database(DB)). The controller provides the interface between the View and the model.

4.1 Back-end Module layout

This includes Units such as products, brand, category, orders and, customer management
modules. Figure 11 shows the diagram of the back-end module.

Figure 11: Back-end system management diagram.

The back-end module/Unit is used to manage the backend of the shop. This is only
available to the administrators. They can manipulate the shop to suit the conditions they
have set for the shop. They also make sure that customers have a good experience when
visiting the shop by updating products, deleting products, executing orders to
warehouses, and managing customers.

21
 5 DATABASE GUI DESIGN

Design for database and GUI application

5.1 Database

MySQL database is used to save software data for this project. MySQL is relational
database management, and it is free of charge. All of the informationis kept in a
selectedtable, and every table has particular range columns and rows. It has eight tables
named as admins, brands, cart, categories, customers, orders, payments and products.
Figure 12 shows the ER-diagram of the eight tables in the database.

Figure 12:ER-diagram of the shop

The ER-diagram has a specific name and it consists of columns and rows.
22
For each table, we need to mark at the least one area as a primary key. The primary
key is usually specified in a particular table. The table "admins" is created to store all
the Admin’ information. It consists of eight distinctive fields referred to as columns to
shop admin id, first name, last name, email, and password. The email and the
password are essential because they are needed for one to login into the shop.
"admin_id" is the primary KEY. Many columns of one table may be described as
primary KEY. Each column has a name, a datatype and different nonobligatory
attributes. Figure 13 only displays different brands of products, brand identity and also
the descriptions of the multiple brands.

Figure 13: Database table showing various brands

23
 Figure 14: registered customer's in the store

The customers who have registered to the online shop have their data automatically
stored in the database. This information is only available to the technical administrators.
The administrator can delete, edit, and update customer information.

5.2 Customer Interface layout

Consumer refers to customers and non-customers. These are individuals who visit the
shop either to buy products or to browse. There are two categories of interfaces namely
the Consumer and the Administrator interface. The administrator has higher authority
over the customer in the shop. The admin can edit, replace a product and, manipulate
data in the shop. The customer can browse a product, add a product to thecart, change
personal information, check shopping history and checkout or log out. The User, on the
other hand, can only browse and add a product to cart.The homepage or interface is the
index page of the shop so can be accessed when the address is typed into a browser.
The webpage hasproducts images, names, prices, product categories and product
brands. The webpage has a registration link, login link, cart, company contact
information. A picture of the homepage is shown in Figure 15.

24
Figure 15: The homepage of the shop

 Registration web page

This registration page is only for users who wish to become customers. They have to
meet the required filled standard for them to register successfully; otherwise, they will
remain on the same page. When they register, their information is saved directly to the
"customer". This registration file "customer_registration.php" is run with a code editor.
The Figure 16 shows the diagram of the customer registration form.

25
Figure 16: Customer registration page

 Login web page

Customers will have the right to log in with their information such as e-mail and
password. The information is sent to the database to check for a match. If no match is
found the customer remains on the same page, otherwise he is directed to the customer
page. This can be accessed by running "customer_login.php" file with an editor. Figure
17 is the customer login page snippet.

26
Figure 17: Customer login page

 Customer purchasing product

Figure 18 shows the link involved when the customer is making a purchase of a product
in the shop.

Figure 18: Diagram of the customer making a purchase

27
  Customer Account page

This web page can be accessed if customer information matches with the one in the
database that was used to initially register. The customer is able to edit his data, orders,
orders, password, log out.

Figure 19: Customer account page

 Shopping Cart
The customer can add products to the shopping cart. They can also update the shopping
cart from time to time until they are done shopping. After that, they can check out by
clicking on the checkout button.

28
Figure 20: Shopping Cart

 Payment
This is the final stage of the shopping experience. The customer who is satisfied with
their choice of product and price can now pay with

Figure 21: PaypalPayment

5.3 Management Interface design

The administrator must enter his username, email, and password. The html5 will check
if all the fields are filled. If field conditions are not met the admin remains on the same

29
page; otherwise, his information is saved in the database. He is directed to the login
page to login. Figure 22 shows the administrator registration form.

Figure 22:Administrators registration page

Figure 23: Admin login page

The administrators canlog in with theiremail and password. If there is no match for the
information provided he or she will remain on the same page until the correct data are
inserted into the login space.

30
Figure 24: Admin content management

When the administrator has finally succeeded to log in the admin's content management area will
emerge for the admin to have access to the webpage.

31
 6 IMPLEMENTATION

This chapter contains the functions for implementation.

6.1 Description

The created online store is based entirely on free source applications and with the
intention to cut cost. All of the functionalities need to be carried out in an orderly
manner. The customer or user interfaces are critical because the administrator interface
will be used to manage the activities on the customer interface. The technologies used
for the project is HTML5, CSS3, PHP, and MySQL.

6.2 Implementation of functions

Customer interface and administrator interface are the main interfaces created in this
project. With the customer and admins interface, I used HTML5 and CSS3. The
HTML5 was used to create the structure of the page whiles the CSS was used to style
the page. PHP is a dynamic language,so I used it to automatically fetch information
from the database unto the web pages without rewriting every data by hand.

32
6.2.1 Basic HTML of the shop

Figure 25: The fundamental part of the HTML5

This is the basic HTML of the shop. PHP is used to enclose the file because the project
will use PHP in most of the project otherwise the system will fail to work with the
database. The DOCTYPE declaration is a simple indication that the page is written in
HTML5.The content of the page shows the title, links, logos, and the CSS used in
styling the webpage.

33
6.2.2 Basic CSS of the shop

Figure 26: Basic CSS font of the shop

Figure 26 is the basic CSS used for the project. It has the body, banner, main and sidebars
frames. They are also padded whiles the sidebar headers font size are sized to be
1.8em(29px).

6.2.3 Available products in the shop

Any user with an internet connection can access the online shop. The user can surf the
webpage to see what is available on the website. To get the product, we create a
function called "get prod()" which also has a connection to the database. When "get
prod()" function is called a relationship is established in the database to retrieve
products from the table product in the database. The quantity of the products was
restricted to display six on the webpage.

$get_pro = "select * from products order by RAND() LIMIT 0,6"

34
Figure 27 shows the code for displaying products. "echo" is used to display the
products with its details, beneath is the code.

Figure 27: Displaying products with details

6.2.4 User Registration

The User will insert his personal information including an image into the registration
form. After submitting the form, a connection is established with the database which
saves the data. The IP address of the customer is also sent to the database to be kept.

Figure 28 is the code that shows how User's registration is processed.

35
Figure 28: User registration code

The user is expected to provide the necessary information shown in the Figure 28. Any
missing space or wrong information may lead to the customer not being able to register.

7 TESTING

To affirm the online store assessments had been made at distinct stages of the task; I
checked the reliability of all of the functions. The test is built on the customer/user and
Management Unit. The customer test proved that an account could be created, login can
be established, the cart can be loaded with products and the customer can check out
when done shopping. The administrator can create an account and log in afterward. The
admin can then manage all the content in the shop.

36
7.1 Testing shopping cart

Some quantity of products was inserted into the shopping cart, and then I proceeded to
check out. When I checked out and tested with Paypal, the cart became empty. This
indicates that the cart works appropriately as it should. The "cart.php" file is
responsible for handling the cart of the shop. When an editor runs the file "cart.php"
the cart() function is called which insert products into the database. After that, the view
cart() function can also be invoked to show the product in the cart. The customer can
manipulates his cart such as updating the cart or, adding a product to cart.

Figure 29: Product in a shopping cart.

7.2 Customer checking out

The customer can only check out if he has logged in as a customer. Without being a
customer, he is unable to checkout successfully.

37
Figure 30: Paypal checkout

Figure 30 shows how Paypal works with the shop when the customer is about to
completely check out out of the shop using paypal.

38
Figure 31: Detailed Paypal payment

Figure 31 shows how Paypal works with the shop after the customer has finally checked
out of the shop. The name of the product, amount, email and the destination of the product
are all displayed for the customer to view. The customer will then receive an email
indicating that the product ordered was a success.

39
 8 CONCLUSION
The electronic shop was developed using PHP, MySQL, HTML5 and CSS3 technology.
Any consumer can browse products, add, replace or delete a product from the cart.
The consumer can log in, with his information such as his email and password. If the
logindoes not go through, the user can re-register or ask to change the password.
After login, the user cansee the product in the cart and proceed onwards. The product
can be paid with PayPal. The administrator can verify the order, However the
consumer can still look at the orders in his or heraccount. The ordered price is saved
in the database.

40
9 FUTURE IMPROVEMENT

Invoices need to be implemented in the shop, emails and notifications need's to be sent
to customers for new arrivals or discount. The shop hasto have a search engine where
users and customers can search for the various product from the shop. Debit and credit
cards need's to be implemented in the shop as well. There have to be language varieties
so that none-English users and customers can shop easily without any difficulty.

41
REFERENCE

/1/www.w3school.com

/3/CSS3 characteristic and attributes 3.05.2018

/2/php features. 08.03.2018

http://www.biogem.org/downloads/notes/PHP%20-
%20Hypertext%20Preprocessor.pdf/4/Javascript academic. Accessed 09.03.2018

/4/http://www.w3schools.com/js/default.asp https://dev.mysql.com/doc/apis-

php/en/apis-php-pdo-mysql.html

/5/Documentation for mysql/ 05.01.2018 /6/UML idea.

access 1.05.2018

https://en.wikipedia.org/wiki/Unified_Modeling_Languag

/7/XAMPP 2.05.2018

https://www.apachefriends.org/index.html

/9/PhpMyAdmin. 5.05.2018

https://www.phpmyadmin.internet/ /8/Bracket editor

5.05.2018

https://en.wikipedia.org/wiki/Brackets_(text_editor)

/10/PayPal developer and Sandbox account 5.05.2018

https://developer.paypal.com/developer/accounts/

/11/The basic diagram of the HTML/HTML5 5/24/2018

http://www.modelrumahminimalis.co/html-menu-templates-

42
freedownload/69033.html/top-result-html-menu-templates-free-download-
inspirationalgenerous-menu-template-html-images-entry-level-resume-templates-
picture-2017-hdj5

/12/Demonstrating how the web server Operates using PHP5/24/2018

https://www.safaribooksonline.com/library/view/learning-
phpand/0596101104/ch01s04.html

43