CS5054NI Advanced Programming and Technologies

50% Group Coursework

2023 Spring

Group Name:
SN Student Name College ID University ID
1 Aashma Rai Np01cp4a210072 21039792
2 Takhangma Rai Np01cp4a210102 21040043

Assignment Due Date: Monday, May 8, 2023

Assignment Submission Date: Monday, May 8, 2023

Word Count: 242

Project File Links:

Google https://drive.google.com/drive/folders/10pZxcEyFFgCvkZA0jebKgf99JRvUtvDt
Drive
Link

I confirm that I understand my coursework needs to be submitted online via Google Classroom under the
relevant module page before the deadline in order for my assignment to be accepted and marked. I am
fully aware that late submissions will be treated as non-submission and a marks of zero will be awarded.
Table of Contents
1 Introduction .............................................................................................................. 1

1.1 Aims .................................................................................................................. 1

1.2 Objectives ......................................................................................................... 1

2 UI Design ................................................................................................................. 2

2.1 Wireframe ......................................................................................................... 3

2.2 Actual Design .................................................................................................... 9

2.2.1 User Screens ............................................................................................. 9

2.2.2 Admin Screens ........................................................................................ 14

3 Class Diagram........................................................................................................ 18

4 Method Description ................................................................................................ 19

5 Test Cases ............................................................................................................. 23

5.1 Test Case 1..................................................................................................... 23

5.2 Test Case 2..................................................................................................... 26

5.3 Test Case 3..................................................................................................... 30

5.4 Test Case 4..................................................................................................... 32

5.5 Test Case 5..................................................................................................... 35

5.6 Test Case 6..................................................................................................... 38

5.7 Test Case 7..................................................................................................... 40

5.8 Test Case 8..................................................................................................... 42

5.9 Test Case 9..................................................................................................... 46

5.10 Test Case 10................................................................................................... 47

5.11 Test Case 11................................................................................................... 52

5.12 Test Case 12................................................................................................... 57

6 Tools and Libraries Used ....................................................................................... 60

 6.1 Tools ............................................................................................................... 60

6.2 Libraries .......................................................................................................... 62

7 Development Process ............................................................................................ 63

8 Critical Analysis ...................................................................................................... 65

9 Conclusion ............................................................................................................. 66

10 References ......................................................................................................... 67
Table of Figures:

Figure 1 – Wireframe of Home Page ............................................................................... 3

Figure 2 – Wireframe of login page ................................................................................. 4
Figure 3 – Wireframe of My Cart ..................................................................................... 5
Figure 4 – Wireframe of Admin Dashboard ..................................................................... 6
Figure 5 – Wireframe of Edit Product Details .................................................................. 7
Figure 6 – Wireframe of Purchase History ...................................................................... 8
Figure 7 - Actual design of Home Page........................................................................... 9
Figure 8 - Actual design of Cart Page when no item is added. ...................................... 10
Figure 9- Actual design of Cart Page when Item is Added ............................................ 11
Figure 10 - Actual design of User Profile ....................................................................... 12
Figure 11 - Actual design of Purchase History Page ..................................................... 13
Figure 12 - Actual design of Admin Dashboard 1 .......................................................... 14
Figure 13 - Actual design of Admin Dashboard 2 .......................................................... 15
Figure 14 - Actual design of Editing Product Page ........................................................ 16
Figure 15 - Actual design of Manage Order Page ......................................................... 17
Figure 16 - Class Diagram ............................................................................................ 18
Figure 17 - Before adding credentials. .......................................................................... 23
Figure 18 - After adding wrong credentials.................................................................... 24
Figure 19 - After adding valid credentials. ..................................................................... 25
Figure 20 - Before adding registration credentials. ........................................................ 27
Figure 21 - Adding correct Credentials. ......................................................................... 28
Figure 22 - After registration.......................................................................................... 29
Figure 23 - Registering User. ........................................................................................ 31
Figure 24 - Encrypted Password in Database. .............................................................. 31
Figure 25 - Before trying to add products without logging in. ........................................ 33
Figure 26 - After trying to add product before logging in. .............................................. 34
Figure 27 - Before Searching ........................................................................................ 36
Figure 28 - Valid Search................................................................................................ 36
Figure 29 - Search Result ............................................................................................. 37
Figure 30 - Clicking add to cart button........................................................................... 38
Figure 31 - Product being added. .................................................................................. 39
Figure 32 - Clicking remove button................................................................................ 40
Figure 33 - Product removed from cart.......................................................................... 41
Figure 34 - Before editing user's details. ....................................................................... 43
Figure 35 - Before editing user's details in database. .................................................... 43
Figure 36 - Editing the details. ....................................................................................... 44
Figure 37 - After editing the details................................................................................ 45
Figure 38 - After editing the details in the database. ..................................................... 45
Figure 39 - Purchase History ......................................................................................... 46
Figure 40 - Before adding the new product. .................................................................. 48
Figure 41 - While adding the new product. .................................................................... 49
Figure 42 - Before product is added. ............................................................................. 50
Figure 43 - After product is added. ................................................................................ 51
Figure 44 - Before editing the product. .......................................................................... 52
Figure 45 - Editing Page................................................................................................ 53
Figure 46 - While editing the product............................................................................. 54
Figure 47 - Before product is edited. ............................................................................. 55
Figure 48 - After product is edited. ................................................................................ 56
Figure 49 - Pressing the delete button. ......................................................................... 57
Figure 50 - Before product is deleted. ........................................................................... 58
Figure 51 - After product is deleted. .............................................................................. 59
Figure 52 - After product is deleted in the database. ..................................................... 59
Figure 53 – Logo of Eclipse ........................................................................................... 60
Figure 54 – Logo of XAMPP .......................................................................................... 61
Table of Tables:

Table 1 – Method Description of Authentication Server ................................................ 20

Table 2 - Method Description of EncDyc ....................................................................... 21
Table 3 - Method Description of editProfile ................................................................... 21
Table 4 - Method Description of productQuery .............................................................. 22
Table 5 - Method Description of Query.......................................................................... 22
Table 6 – Testing of user and Admin login .................................................................... 23
Table 7 – Testing of registering new user. .................................................................... 26
Table 8 – Testing showing the encryption of user password. ........................................ 30
Table 9 – Testing showing the functionality of Add to Cart Option. ............................... 32
Table 10 – Testing of searching products according to category, price, and brand. ..... 35
Table 11 - Testing of add to cart feature. ...................................................................... 38
Table 12 - Testing of remove from cart feature. ............................................................ 40
Table 13 - Testing of User profile edit. .......................................................................... 42
Table 14 - Testing of User Purchase History. ............................................................... 46
Table 15 - Testing of adding products by admin. .......................................................... 47
Table 16 - Testing of editing product details by admin. ................................................. 52
Table 17 - Testing of deleting products by admin. ......................................................... 57
Table 18 - Table of Libraries ......................................................................................... 62
Table 19 – Individual Roles ........................................................................................... 64
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

1 Introduction

This group coursework is about the development of an E-commerce website specifically

about clothes. This project will practically implement Model-View-Controller (MVC)
pattern throughout the overall process of its development. This coursework shows
detailed implementation of crucial functionalities like Login, Register, Admin Panel,
password encryption, html, CSS, etc., for developing visually aesthetic, robust and fully
functional E-commerce website.

1.1 Aims

 The main aim of this coursework is to design and develop a fully functional,
efficient and user- friendly e-commerce platform for customers to explore and
purchase clothing items.

1.2 Objectives

 To create a login system where both user and admin can login with encrypted
password.
 To create an admin panel that permits admin to add, edit, delete the products
information and view product lists.
 To create a user-friendly platform where user can edit their profile, change their
password, search and buy cloth items according to category, price, brand, etc.
 To provide functionalities because of which the user can order the product by
using AddToCart and view their ordered or purchased list of products.
 To provide a logout system so that the users can securely end their sessions
ensuring that the personal information remains safe, and their privacy is
protected.

1
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

2 UI Design

The method that designers use to create user interfaces for digital products in software
or computerized devices, with a focus on aesthetics or style, is known as user interface
(UI) design (Bak, n.d.). UI design aims to assume what users might be needed to do
while exploring platforms and therefore ensures that the interface of platform is
designed with components for simple user accessing, understanding while facilitating
those actions. The user interface is implemented for designing visual appearance,
usefulness, interactivity, behaviour, concept and overall feel of a product.

2
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

2.1 Wireframe

Figure 1 – Wireframe of Home Page

3
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 2 – Wireframe of login page

4
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 3 – Wireframe of My Cart

5
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 4 – Wireframe of Admin Dashboard

6
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 5 – Wireframe of Edit Product Details

7
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 6 – Wireframe of Purchase History

8
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

2.2 Actual Design

2.2.1 User Screens

Figure 7 - Actual design of Home Page

9
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 8 - Actual design of Cart Page when no item is added.

10
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 9- Actual design of Cart Page when Item is Added

11
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 10 - Actual design of User Profile

12
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 11 - Actual design of Purchase History Page

13
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

2.2.2 Admin Screens

Figure 12 - Actual design of Admin Dashboard 1

14
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 13 - Actual design of Admin Dashboard 2

15
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 14 - Actual design of Editing Product Page

16
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 15 - Actual design of Manage Order Page

17
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

3 Class Diagram

Figure 16 - Class Diagram

18
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

4 Method Description

 AuthenticationFilter.java

Method Name Description

destroy(): The web container invokes this method to inform the filter that
it is being taken out of action. There is no special cleanup
procedure that has to be carried out for this filter since the
destroy() function is empty. If the filter does not use any
resources during initialization that need to be freed after
destruction, the destroy() function can be empty and do
nothing.

doFilter() The doFilter is the main method of the filter that performs the
authentication. It accepts ServletRequest, ServletResponse
and FilterChain objects as parameters. It determines if the
user is logged in or not by retrieving the user object from the
session. The filter chain in permitted to continue if the user is
logged in and has [email protected] as their associated
email address. The user is redirected to the home.jsp page if
they are not already logged in or doesn’t have their email as
[email protected].

Init() The web container invokes this function to inform the filter
that it is being put into service. Because it is empty in this
instance, no initialization tasks are required for this filter. This
method is a component of the Filter Interface meaning that it
must still be used. When the filter is initialized, the web
container throws a ServletException if this method is not
implemented.

19
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

doPost() The doPost() function manages HTTP POST requests, which

often include sending data to the server. The doPost()
function, for instance, may be used to process the data and
verify the user's credentials when the user submits the login
form.

doGet() The doGet() method is used to handle HTTP GET requests

often include retrieving data from the server. The doGet()
function, for instance, may be used to display the home page
of our website.
DataBaseConnection() The DataBaseConnection() function, which is used to connect
to the database, is a crucial part. Typically, this function will
provide a connection object that may be used to insert,
update, and remove data as well as send queries and get
data from the database.

encryption() The encryption() method is used in this project to encrypt the

user password before it is stored in the database. This
method is important as it allows secure password storage and
authentication.

Table 1 – Method Description of Authentication Server

20
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

 EncDyc.java

Method Name Method Description

encryption() The encryption() method is used in this
project to encrypt the user password
before it is stored in the database. This
method is important as it allows secure
password storage and authentication.

decrypt() This method takes encrypted string and

secret key string ‘secretkey’ and decrypts
it using AES decryption.
generatekey() This method takes in a secret key and
converts it into a byte array using UTF-8
encoding
Table 2 - Method Description of EncDyc

 editProfile.java

Method Name Method Description

change() This is a method from the ‘Query’ class
that takes in several parameters related
to user profile information and updates
the user record.
Table 3 - Method Description of editProfile

21
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

 productQuery.java

Method Name Method Description

productQuery() This constructor method takes a
connection object as input and sets it to
the class variable ‘con’.
addProduct() This method takes product object as input
and inserts its properties into the product
table in database.
deleteProduct() This method takes an integer ‘id’ as input
and deletes the record with the
corresponding ‘id’ from the ‘product’ table
in database.
editProduct() This method takes an integer ‘id’ as input
and deletes the record with the
corresponding ‘id’.
addOrder() This method takes order details as input
and inserts them into the ‘order’ table in
the database.
Table 4 - Method Description of productQuery

 Query.java

Method Name Method Description

register() This method inserts a new user into the
database.
check() This method checks whether a given
email already exists in the database.
login() This method logs in a user with a given
email and password.
change() This method updates the user’s profile.
Table 5 - Method Description of Query

22
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5 Test Cases

5.1 Test Case 1

 Valid Login:
Objective To log in to the website based on user or Admin

Action The user/ admin enters their credentials email and password
to login to the website.
Expected Result The system identifies the user and admin directs user to the
home page and admin to the admin panel page respectively.

Actual Result The system identified the user and admin role and directed
them to their respective pages which is to the home page and
admin page respectively.
Conclusion The test was successful.
Table 6 – Testing of user and Admin login

Figure 17 - Before adding credentials.

23
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 18 - After adding wrong credentials.

24
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 19 - After adding valid credentials.

25
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.2 Test Case 2

 Valid Registration

Objective To register new user

Action Input the required credentials in the registration page which

includes First Name, Last Name, Contact Number, Email
Address, Password, and Image and click the Register Now
button.
Expected Result The user’s data should be stored in the database and users
should be directed to the login page.
Actual Result The user credentials were successfully stored in the database
and the user was directed to the login page.
Conclusion The test was successful.
Table 7 – Testing of registering new user.

26
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 20 - Before adding registration credentials.

27
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 21 - Adding correct Credentials.

28
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 22 - After registration.

29
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.3 Test Case 3

 Encrypted Password
Objective To Encrypt the user’s password while registering

Action While registering users set password which is encrypted and is

stored in the database.
Expected Result After the registration is successful, the users provided password
should be stored in the database in the encrypted form.

Actual Result The user was registered, and the password set by the user was
encrypted and saved in the database.
Conclusion The test was successful.
Table 8 – Testing showing the encryption of user password.

30
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 23 - Registering User.

Figure 24 - Encrypted Password in Database.

31
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.4 Test Case 4

 Logging in before adding products.

Objective While ordering the product, to redirect the user to login page if
had not logged in the website previously, and register the user if
the user has not registered
Action The user clicks on Add to cart option to order the product they
want.
Expected Result User should be redirected to the login page of the website if has
not logged in and should be registered by clicking on the create
account if had not even registered.
Actual Result The anonymous user is redirected to the login page and asked to
login and register before buying products from the website.

Conclusion The test was successful.

Table 9 – Testing showing the functionality of Add to Cart Option.

32
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 25 - Before trying to add products without logging in.

33
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 26 - After trying to add product before logging in.

34
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.5 Test Case 5

 Search Feature:
Objective To let user search products according to category, price and
brand
Action Users navigates to the home page that consists of products
and clicks on the search button that let’s user to search
according to category, price range and brand name.
Expected Result Users should be able to search the products according to their
price range, category and their preferred brand name.

Actual Result The user is provided range of product category (Skirt, tops,
dresses), options of brands (Dior, Chanel), and price range
from high to low prices and low to high prices.
Conclusion The test was successful.
Table 10 – Testing of searching products according to category, price, and brand.

35
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 27 - Before Searching

Figure 28 - Valid Search

36
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 29 - Search Result

37
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.6 Test Case 6

 Add to cart feature:

Objective To let user, add products to their cart

Action User should press the add product button on the home page
of the product.

Expected Result The product should be added in the cart of the user.

Actual Result The product is added in the cart of the use.

Conclusion The test was successful.

Table 11 - Testing of add to cart feature.

Figure 30 - Clicking add to cart button.

38
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 31 - Product being added.

39
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.7 Test Case 7

 Remove product from cart:

Objective To let user, remove products from their cart

Action User should press the remove button on the cart page of the
product.

Expected Result The product should be removed from the cart of the user.

Actual Result The product is removed from the cart of the user.

Conclusion The test was successful.

Table 12 - Testing of remove from cart feature.

Figure 32 - Clicking remove button.

40
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 33 - Product removed from cart.

41
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.8 Test Case 8

 Editing user Profile:

Objective To let use change their profile information

Action User should navigate to their profile page and can update
their details.

Expected Result The user details should be changed in the database as well
as in the webpage.

Actual Result The user details are changed in the database as well as in the
webpage.

Conclusion The test was successful.

Table 13 - Testing of User profile edit.

42
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 34 - Before editing user's details.

Figure 35 - Before editing user's details in database.

43
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 36 - Editing the details.

44
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 37 - After editing the details.

Figure 38 - After editing the details in the database.

45
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.9 Test Case 9

 Check User Purchase History

Objective To check the purchase history of users.

Action User should navigate to their profile page and can check the
purchase history.

Expected Result The user should be able to view their purchase history.

Actual Result The user is able to view their purchase history.

Conclusion The test was successful.

Table 14 - Testing of User Purchase History.

Figure 39 - Purchase History

46
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.10 Test Case 10

 Add Product:

Objective To let admin, add products to the website

Action Admin should fill the required fields properly.

Expected Result The product should be added on the website as well as in the
database.

Actual Result The product is added on the website as well as in the

database.

Conclusion The test was successful.

Table 15 - Testing of adding products by admin.

47
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 40 - Before adding the new product.

48
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 41 - While adding the new product.

49
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 42 - Before product is added.

50
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 43 - After product is added.

51
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.11 Test Case 11

 To edit the product

Objective To let admin, edit products on the website

Action Admin should press the edit button on the product which is to
be edited.

Expected Result The product should be edited on the website as well as in the
database.

Actual Result The product is edited on the website as well as in the

database.

Conclusion The test was successful.

Table 16 - Testing of editing product details by admin.

Figure 44 - Before editing the product.

52
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 45 - Editing Page

53
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 46 - While editing the product.

54
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 47 - Before product is edited.

55
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 48 - After product is edited.

56
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

5.12 Test Case 12

 To delete product

Objective To let admin, delete products in the website

Action Admin should press the delete button on the product which is
to be deleted.

Expected Result The product should be deleted on the website as well as in

the database.

Actual Result The product is deleted on the website as well as in the

database.

Conclusion The test was successful.

Table 17 - Testing of deleting products by admin.

Figure 49 - Pressing the delete button.

57
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 50 - Before product is deleted.

58
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

Figure 51 - After product is deleted.

Figure 52 - After product is deleted in the database.

59
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

6 Tools and Libraries Used

6.1 Tools
 Eclipse: Eclipse is an integrated development environment (IDE) for developing
computer-based applications utilizing the Java programming language and other
programming languages like C/C++, Python, PERL, Ruby etc. (Gupta, 2023).
The Eclipse IDE is well-known for its Java Integrated Development Environment
because it offers rich features that make it simpler for developers to create
complex applications for the Eclipse platform.

Figure 53 – Logo of Eclipse

Eclipse IDE is used because it enables the capabilities of numerous distinct

components called plug-ins. Eclipse IDE includes a number of advanced capabilities for
the creation of java-based apps. When compared to other IDE, the eclipse IDE's
installation process is rather simple as the pre-packaged bundle is available for
download, allowing users to install Eclipse for programming purposes right away.
Eclipse IDE is used in this project because it offers a number of capabilities, including
code editing, debugging, and project management, that streamline the development
process. The Eclipse (IDE) is used for creating and managing Java code as well as to
interact with the Apache Tomcat server, which is used to run the web application.

Eclipse IDE is utilized by developing a new Dynamic Web Project and setting its
Tomcat Server configuration. Then, we developed the necessary packages for the
Model-View-Controller pattern, building the JSP files for the view package, the

60
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

appropriate servlets for the controller package, and the database operations for the
model package.

 XAMPP: XAMPP is an open-source web server solution package mainly used for
web application testing on a local host webserver (S, 2023).

Figure 54 – Logo of XAMPP

In this project, a local server is built using XAMPP on the developer's computer to
host and test the e-commerce website. The website's files can be kept in XAMPP, and it
can be visited by navigating to localhost in a web browser. The website's database is
likewise set up and configured using XAMPP and is built with necessary tables and
relationships. In this way, setting up a development environment for the e-commerce
website is made simple and convenient by XAMPP.

61
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

6.2 Libraries
There are various types of libraries used for this project some of them are
described below:

Libraries Functions
java.sql This package is a component of the Java Standard
Library used for the establishing database connection and
manipulation of data.
java.util It provides utilities and provides frequently used data
structures, algorithms, date and time management etc.
java.io This contains class and interfaces that enables non-
blocking I/O, memory mapped I/O which is used to handle
I/O tasks more effectively.
java.crypto This package offers a number of classes and interfaces
that are used for various cryptographic techniques, such
as encryption, decryption, key generation and message
authentication.
javax.servlet This package contains classes and interfaces that outlines
the components and functionality needed to create web
applications in Java.
JSTL This library is used to streamline the process of creating
JSP pages by offering standard sets of tags to carry out
activities.
java.security This package provides different classes and interfaces
necessary for integrating security services and features
into applications.
Table 18 - Table of Libraries

62
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

7 Development Process

We were familiar with the requirements of this project, and we were sure about the
technologies and frameworks we were about to implement for the overall completion of
this project. After identifying crucial components of the website and the interaction
between the pages, we designed the user interface of our website using wireframe.
Before starting the actual coding and system development process Tomcat Server was
added, and external jar files, taglib jar files, were added in the eclipse IDE. 3 tables
were developed named Product, order and new user in XAMPP to store the data related
to each table. MVC pattern with the packages model, view, and controller was followed
thoroughly for the development of the project to structure the code, with the view
displaying data to the user, model managing data, and controller handling requests. We
created the login, register, system as per the requirements following the MVC pattern.
We incorporated the register and login functions based on the user roles like customers
and admin. We encrypted the password of the user to provide security to safeguard
their confidentiality. Then login session was used after the user was successfully logged
in to the system to store their authentication details. Now, all the other pages admin
panel, home page was also developed incorporating all crucial functionalities. MVC was
followed thoroughly for the development of the project. For every page, conditions were
set like, for the home page the users were not being able to purchase from the website
until and unless he logs in or registers on the website. During the entire development
process, several tests were run to confirm whether the code is functioning, works the
way it was intended and errors that arose were resolved for each and every pages.
After constructing the pages using HTML and CSS, the backend was added to support
every functionality. As each pages have unique function to offer, pages were structured
and styled accordingly. Finally, a well fully function e-commerce website was developed
using HTML, CSS for Frontend and java for backend handling.

Name Role

63
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

AASHMA RAI Report Preparation: Wireframe, Conclusion, Class Diagram,

Method description, User Interface Design, Libraries and
objectives.

System Development:
 Worked on the backed for the admin of the website, along
with the development of database for the website.
 Worked alongside teammates for the development of
features of the project which required development of code
in eclipse.
 Worked on linking the frontend to the backend portion of
the project.
TAKHANGMA RAI Report Preparation: Test Cases, Introduction, Development
Process, Actual Design, Critical Analysis, Tools and aims.

System Development:
 Worked on the development of the user interface along
with database implementation for the website.
 Worked on implementation of the design of the website.
 Testing and analysis of the backend code to optimize the
features.
 Worked on the java servlet files for the proper functioning
of the website.
Table 19 – Individual Roles

64
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

8 Critical Analysis

Overall, this website was completed following all the necessary and specified
guidelines and requirements. To separate concerns and provide modularity, the Model-
View- Controller (MVC) design pattern proved to be an effective strategy. This project
integrates a number of Java Servlet APIs and technologies, including Tag Libraries,
JDBC, and JSTL, which are often used in web development. While making use of
following approaches for the development of our website, we encountered several
challenges and some of them are listed below:

 Designing and implementing the MVC architecture: Our project main

requirement was to implement the MVC pattern architecture. This requires
separation between model, view and controller components which was really
challenging to implement. Testing in MVC pattern requires testing each
independent component and ensuring all the components comply and work
together as expected.

 Creating a user-friendly interface: Understanding the preferences and

requirements of customers and creating a website incorporating all the basic
functionalities having simple and smooth UI design that is easy for users to
navigate was challenging. Balancing aesthetic elements without compromising
the functionality of the platform to enhance the user experience was challenging.

 Database Management: In order to insert the user's data and perform several
queries, a database connection is important. The problem we faced during
database management was establishing connections. We solved the problem by
thoroughly checking the names of the tables and their column names in the
database and tallying them with the names of the tables and columns in our
code.

65
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

9 Conclusion

For this coursework we developed a fully functional robust e-commerce website

called NaNa using eclipse IDE and various libraries. With this project we demonstrated
the implementation of MVC pattern, use of database and functionalities like user and
admin management, login, registration, product management, order processing, and so
on. Overall, our E-commerce website provides every functionality that a customer wants
from a shopping platform, ranging from smooth and visually pleasing UI to simple
interactive concept for users to search and purchase products according to their whim.
Our website's design prioritizes security, effectiveness, and user-friendliness to offer all
users a seamless and enjoyable shopping experience.

66
21040043 || 21039792
CS5054NI ADVANCED PROGRAMMING AND TECHNOLOGY

10 References

AniketSingh1, n.d. Introduction to Java Servlets. [Online]

Available at: https://www.geeksforgeeks.org/introduction-java-servlets/
[Accessed 6 5 2023].

Bak, T., n.d. UI Design Process - 7 Easy Steps to Make Great UIs Faster. [Online]
Available at: https://www.softkraft.co/ui-design-process/
[Accessed 6 5 2023].

Gupta, P., 2023. What is Eclipse IDE?. [Online]

Available at: https://www.educba.com/what-is-eclipse-ide/
[Accessed 6 5 2023].

Hartman, J., 2023. JSTL (JSP Standard Tag Library) Tutorial: Core & Custom Tags.
[Online]
Available at: https://www.guru99.com/jsp-tag-library.html
[Accessed 6 5 2023].

S, R. A., 2023. How to Run a PHP File Using XAMPP: A Step By Step Guide. [Online]
Available at: https://www.simplilearn.com/tutorials/php-tutorial/php-using-xampp
[Accessed 6 5 2023].

67
21040043 || 21039792