final project report business website development topic develop an e commerce website in the organic products business

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF ECONOMIC AND LAW FINAL PROJECT REPORT BUSINESS WEBSITE DEVELOPMENT TOPIC: DEVELOP AN E-COMMERCE WEBSITE IN THE ORGANIC PRO

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY

UNIVERSITY OF ECONOMIC AND LAW

FINAL PROJECT REPORT BUSINESS WEBSITE DEVELOPMENT

TOPIC:

DEVELOP AN E-COMMERCE WEBSITE

IN THE ORGANIC PRODUCTS BUSINESS

Lecturer: Ph.D Tran Duy Thanh Couse ID: 231MI5703

Ho Chi Minh City, December 25, 2023

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY

UNIVERSITY OF ECONOMIC AND LAW

FINAL PROJECT REPORT BUSINESS WEBSITE DEVELOPMENT

TOPIC:

DEVELOP AN E-COMMERCE WEBSITE

IN THE ORGANIC PRODUCTS BUSINESS

Lecturer: Ph.D Tran Duy Thanh Couse ID: 231MI5703

ACKNOWLEDGEMENTS

With the completion of this report, our team would like to express our deep gratitude to all who supported us throughout this journey Learning is an ongoing process of acquiring knowledge and skills, and the implementation of this report has provided us with valuable experience and confidence for future scientific research papers It has also propelled us forward in our graduation thesis journey

First and foremost, we extend our sincere thanks to the Rector of the University

of Economics and Law for creating a conducive environment that allowed us to delve into the subject of “Business Website Development” and for providing access to modern library facilities The wide range of books and documents available has been instrumental in facilitating our search for information and conducting thorough research

We are immensely grateful to our subject teacher, Doctor of Philosophy Tran Duy Thanh for your unwavering dedication and detailed teaching Your guidance and support equipped us with the necessary knowledge to apply to this project successfully With the collective efforts of everyone involved, we have achieved a significant milestone in our research journey Once again, thank you to all who contributed to the success of this project

COMMITMENT

Our team hereby declares that the research topic “Develop an E-Commerce Website in the Organic Products Business” is our research work under the scientific guidance of Doctor of Philosophy Tran Duy Thanh

The data and research results in the thesis are collected, handled honestly, and objectively, and have clear origins The content of the research has references to domestic and foreign studies and the references are fully listed in the list of references With limited research time, shortcomings are inevitable Looking forward to your suggestions for a more complete study

TABLE OF CONTENTS

ACKNOWLEDGEMENTS

COMMITMENT LG nh HH TH TH re TABLE OF CONTENTS

LIST OF ABBREVIATIONS L QL SH HH HH kh vi LIST OF TABLES

LIST OF FIGURES

CHAPTER 1 PROJECT OVERVIEW cceecceececeecenreeceeenesntesietnesntenteeneeas 1

1.1 The introduction of PACHA Shop .0cccecccccececceeeeceeeeeeeeteeeteeeeteeees 1 1.2 Reasons of the project n adddiđil

1.3 The goal of the project 2.0.0 .aaaa 1.4 Structure OÝ DFOj@CẢ LH HT HT KT KT KH ket

CHAPTER 2 THEORETICAL BASIS -Q L nhe 4

2.1 Django Framework

2.1.1 Advantages of Django Framework

2.1.2 Compare Django and Angular -.- S1 2.11211111112011 à 2.1.3 The architecture of Django Framework -Ặ 222cc nhe 8

2.2 CRUD and REST LH HH TH Hàn Hàng ren

2.2.1 CRUD (Creat - Read - Update - Delete)

2.2.2 REST (Post - Get - Put - Delete) LH hae 2.3 Python programming language -L 2222111111111 xxx rrrse, 10 2.4 Structured Query Language (SQLite)

2.4.1 Relational Database Management System .0 :ceeeeeteeees 2.4.2 Structured Query Language .- nọ nhe 13 2.5 Asynchronous JavaScript and XML SH He 14

FPT = 1010) ) 1-0 ““( ăẼ ă 15

CHAPTER 3 SYSTEM ANALYSIS AND DEVELOPMENT 16

3.1 Actors and se CaS6@S Q LH HH HT HH ky 16 3.1.1 Use Cases for CUS†Om@TS LH HH HH tệ 16 3.1.2 Use Cases for Administrafion che 17 3.2 Business Process Modeling Notation 0n n S222 nhe 19 3.2.1 Login and Registrafion -LL Q0 02222211 nn ng n1 vn ng ket 19 3.2.2 Change personal information and password 21 3.2.3 Forgof DaSSWOFd HH HT TH HT TT KT nhe, 23 3.2.4 View cart and make Order o.oo ee ee eee ngu 24 3.2.5 Add products to wishliSE 0000122221222 11111 n xnxx ke, 25

3.3 Database ốc ậáná.ag 27 3.3.1 Define collections of database oo Tnhh ke 27 3.3.2 E-R diagram cece cccccctenseeeeceeeestseeeeeseecesssseeeeseeessteeeeesess 34 3.3.3 DFD of order and payment process che 35 3.4 Draft and Templafe L Q0 22111111111 011111 kh ket 36 3.4.1 SitOMAP ằ.aa 36

3.4.3 Mock-up for components of the websife cc.Q co c.ccnnhvằ 42 3.5 Website Interface Design L0 2220010111111 1 12011111111 key 45 3.5.1 Mock up for user interface 0n n HT n2 n n2 HT HT ng key 45 3.5.2 Special functions of the websif€ nh HH Hee 52 3.5.3 Admin interface LH eee HH TK ệt 57 3.5.4 Project Implementation - c0 0022222211111 1111152111111 ky 59

CHAPTER 4 CONCLUSION nh HH HH Hà net 60

¬: cee ee ern erent e tent eters cneecniesenietinresentesneeesnesenerenrenees 60 4.2 Limitations 0.0.0 e a.a n.aăaa 61 4.3 Solutions and development direcfions - nen Hee 62

REFERENCES Q0 Q00 nh HH HT ưng 63

13500900 27 7 65

LIST OF ABBREVIATIONS

Abbreviations Definition

Ajax Asynchronous JavaScript and XML

API Application Programming Interface

BPMN Business Process Model and Notation

CRUD Create Read Update Delete

Css Cascading Style Sheets

DDS Data Distribution Service

DFD Data Flow Diagram

DRY Don’t Repeat Yourself

DTL Django Template Language

HTTP Hypertext Transfer Protocol

JSON JavaScript Object Notation

KISS Keep it short and simple

LISP List Processing

MVC Model View Controller

MVT Model View Template

NoSQL No-Structured Query Language

OTP One Time Password

PHP Hypertext Preprocessor

RDBMS Relational Databases

RESS Responsive Web Design + Server-Side Componeni

vi

Extensible Markup Language

vil

LIST OF TABLES

Table 2.1 Compare the features of Django and Angular framework 6 Table 3.1 Use Case & Actor mapping c2 112112 1121111111101 1111811 16 Table 3.2 Description of the functions of administrator in the website 18 Table 3.3 Description of product dafa 0000000022222 vn 1n nn ng vn ky 27 Table 3.4 Description of category data HH TT n TS n2 HH HT ng ng ghen he, 28 Table 3.5 Description of product collections data Q2 222222 vn sexy 28 Table 3.6 Description of product attributes dafa - 22H nhe 29 Table 3.7 Description of product image attributes data cc Son seo 29 Table 3.8 Description of user dat†a 0000000002222 n TH ng Tnhh, 29 Table 3.9 Description of user addresses dafa 0n HQ n TH HH HH nen 30 Table 3.10 Description of review dafa 0n HQ TT HT TT HT TT TH ng ket 30 Table 3.11 Description of promotion dafa 22H HH nnnn ng ket 31 Table 3.12 Description of order data L0 0000000222 220111 1111111 0111 11kg kế 31 Table 3.13 Description of order item data 0000000222222 vnn ng ng vn nhe, 32 Table 3.14 Description of blogs dafa 00H11 T111 22 1n n TH ng ng va 32 Table 3.15 Description of contact dafa Q00 002222 HH nnn ng n Tnhh nghe, 32 Table 3.16 Description of Wishlist data Q0 nQ Q00 2n nnnS 2n vn net 33

vill

LIST OF FIGURES

Figure 2.1 Model View Controller - - L1 111121 11121111011111111 1111111111011 k HH 7 Figure 2.2 Model View Templafe 00000001222 nnHn TH TH ng HT khe, 7 Figure 2.3 The MVT architecture of Django L0 2221111 n1 1122 1111k xy 8 Figure 2.4 Describe the operating principle of REST Ặ Si ee 10 Figure 2.5 Examples of a relational database 0n n TH này 12 Figure 2.6 The interface of SQLite RDBMS QQQQ nh ha 14 Figure 3.1 Use case overview of the customer websife uc nnsenhhree 16 Figure 3.2 Use case overview of the administrator website .0 eee 18 Figure 3.3 BPMN for Login 0.0.0.0 ccccccccecccceccsssseeeeeeeesssseeeseeeecsssseeeeseeesstseeeeeess 19 IIe00)i- ch nh») |) 8/s0n{- s] —ir-u ci)ỤŨỤRMRẠIỊÍIIIAIAIỤIAIỘIAIỤIiiiii 20 Figure 3.5 BPMN for changing personal information c 22222 cssse 21 Figure 3.6 BPMN for changing password L0 000002222 2n nn ng n1 vn kg 22 Figure 3.7 BPMN for forgetting password 0n nnnnnnnnnnnnnn ng khe, 23 Figure 3.8 BPMN for viewing cart and making order cà s22 24 Figure 3.9 BPMN for adding products to wishlist 0s nhe, 26 Figure 3.10 BPMN for canceling order 0000110222222 111v 1n ng khe, 27 Figure 3.11 Entity-Relationship Diagram of Basic Database 34 Figure 3.12 DFD of order and payment process Q22 nhe 35 Figure 3.13 Sitemap of the websif€ LH rky 36 Figure 3.14 Header of the websife LLQ Q0 0Q 000222 HH TT HH1 g TT ng khen và 37 Figure 3.15 Footer of the websif@ L0 0000002222 HH HT ng HT KT ru 37 Figure 3.16 Homepage Q00 000000222021 nnnnn n1 Tnhh ghe, 38

Figure 3.18 Blog list page 2201111111112 111111 khen va 39

|cons inSfaInfL ee eee eee ete HH TH TH KT KT KH 44 Progress IndiCafOrS L0 0000002222211 1n nnn ng 111kg nhà 44 Header component Q00 0000222221111 nnnn ng 1 11T nhà 44 IEssii>115e-)10)9.5)5)-13) EEEaẦầaiiiiắđ.i.ÚÝỶẼỶÃỶÝẼỶÝẮ.Ả 45

Em 46 B910) 19|-53IIỆẮđiắaầaầdaaiiiiaầ 47 ADOUt US PAGE e äšẽšŠ ốố 47 Blog list page -. 0000000222221 111111 n1 vn, 48 Sample blog page Q0 SH nh KH két 48 Product page 0000000022222 HH nnn TT TT TT kh ket 49 Product list page 00H11 nnn n2 HT TT Tnhh key 49 SAlS PAGE mm (a4 50 Shopping bag page Q0 1 nh nh HH HH 50 Payment page L Q00 000000222221 1n nnnn ng TT nhe 51

CHAPTER 1 PROJECT OVERVIEW

1.1 The introduction of PACHA Shop

PACHA shop is a brand created and simulated by the group for course projects Brand information is based on a similar website abroad PACHA Shop is an online store specializing in natural organic beauty and relaxation products Some outstanding product lines at the shop include scented candles, bath soap, etc

At the PACHA store, we always provide consumers with natural green products, produced extremely “green” but of outstanding quality However, to encourage more consumers to access organic products, we developed an e-commerce website platform

to expand the customer base, bringing products closer to customers

1.2 Reasons of the project

Currently, sustainable consumption is increasingly important in the context of gradually depleted natural resources, polluted environment, and complex climate change Consumer awareness is getting better and better, especially as people’s living standards improve every day Besides the quality of products and services, how the production process impacts the environment

From people’s concerns about the environment, the definition of “green consumption” began to appear and gradually became popular In the world, the concept

of green consumption was first mentioned in 1970 in the United States and since then, many studies have expanded this concept The concept of green consumption emphasizes incorporating environmental awareness into the consumption process or green consumption is a form of consumption that encourages people to actively protect the environment In Vietnam, in the articles of some authors, green consumption is understood as the purchase and use of environmentally friendly products that do not harm human health or threaten the natural ecology Along with the trend of global integration, the definition of green consumption in Vietnam is increasingly expanding Green consumption means people increase the use of environmentally friendly products and services, especially organic products Organic products contain organic ingredients that do not use any pesticides, sewage sludge, or genetically modified

organisms during the farming process Organic products will be produced from farm ingredients with a focus on conserving water and soil resources, using sustainable resources, and improving the quality of the living environment Organic cosmetics usually contain no or very little chemical content Organic cosmetics will contain a minimum of 95% organic ingredients and only 5% other substances, so they are very benign and safe for the user’s health [1]

The use of organic products is quite popular abroad, however, it has only appeared

in Vietnam in recent years In particular, in this context, Vietnam is a country with many rich sources of natural ingredients with many health benefits Vietnam’s agricultural products contain many rare medicinal herbs that are exported abroad, so the organic product market is a potential market

With the purpose of promoting the development of sustainable business, using available natural materials, and encouraging Vietnamese consumers to use “green” products to contribute to environmental protection, The group chose the topic

“Developing a website to sell vegan products under the PACHA brand.”

1.3 The goal of the project

The main goal of the project is to use Django Framework and Structured Query Language to develop a reliable and quality e-commerce website for PACHA Shop The platform will provide an intuitive, easy-to-use, and user-friendly interface, meeting modern design criteria and cosmetic industry standards, specifically as follows: About scope

The team will analyze and develop the website for both users and store administrators Users can easily access, search, register, and log in to the store’s website system, so ordering and payment becomes faster and more convenient In addition, administrators will be able to access the admin page to monitor, manage status, and product information in stock, manage users, track orders, and process orders extremely easily and conveniently On the admin page, there will be some dashboards displaying

an overview of some important information so that managers can observe the store’s situation

About the interface

The PACHA website’s interface is designed to be eye-catching and familiar with

a warm yellow-brown color scheme, creating lightness and comfort for customers accessing the website At the same time, an important factor that attracts customers to search and use the website is that the website must be easy to use and operate, quick to search, easy shopping cart management, and convenient payment

About the function

In the first phase, the team focused on analyzing the most necessary and basic functions of the e-commerce website, developing it on time After that, the team continued to add, perfect, and upgrade new, unique features to meet the growing needs

of people and the store’s purposes

1.4 Structure of project

The project includes 4 chapters:

Chapter 1: Project Overview will introduce the reason for choosing the topic and briefly introduce the website Determine the scope, time, and purpose of implementation

Chapter 2: Theoretical Basis presents basic theories about technologies such as Django framework and Python programming language used in websites so that readers can have an overview of the website In addition, this chapter also introduces the SQLite database management system that will be used in this project

Chapter 3: System Analysis and Development shows the website’s functions and service processes such as logging in, ordering, payment and many other functions This chapter will focus on presenting the results of the project through interface designs, sitemaps, layouts, and mockups of users, visitors, and administrators In addition, this section also describes the database as well as the relationship between the entities and DFD of the key process of ordering and payment

Chapter 4: Conclusion Overview of achieved results, conclusion of the problem, and suggestions for further research

CHAPTER 2 THEORETICAL BASIS

2.1 Django Framework

2.1.1 Advantages of Django Framework

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design Django is beneficial for database-driven websites, it emphasizes the reusability of components and comes with ready-to-use features like a login system, database connection, and CRUD operations [2]

Django was created in the early 2000s by Adrian Holovaty and Simon Willison, two web developers working at the Lawrence Journal-World newspaper in Lawrence, Kansas, United States, and first released as an open-source project in July 2005 [3] Since then, Django has seen significant development and has been adopted by numerous large websites worldwide, including Instagram, Pinterest, Bitbucket, and Disqus Typically, websites require certain basic functionalities, such as accessing information from a database, handling URL routing, rendering page content, ensuring security, and authentication Developers usually have to write code for these functionalities in every application they build Django can assist them with these common web development tasks, such as:

- User authentication;

- Testing;

- Database models, forms, URL routing, and templates;

- Admin interface

- Security and performance upgrades;

- Support for multiple database backends

There are some advantages of Django:

Fast: Django is designed to help developers turn ideas into reality as quickly as possible with the principle of KISS Django provides almost everything developers might need All components in the framework work seamlessly together, following a consistent design principle Additionally, Django uses the DRY principle, allowing

developers to reuse existing code and eliminate unnecessary code duplication This reduces the amount of code, making it easier to maintain

Versatile: Django can be used to build a wide range of websites, from content management systems to social networks or news websites It can work with client-side frameworks and handle content in various formats such as HTML, RESS, JSON, XML, and more

Security: Django is one of the most secure frameworks available today With its built-in security system, developers can avoid common security issues such as Clickjacking, Cross-site scripting, Cross-site request forgery, and SQL injection The framework also regularly releases security patches and is proactive in responding to security vulnerabilities and notifying other frameworks For example, Django provides secure management of account names and passwords, avoiding basic mistakes like storing session information in cookies and encrypting passwords instead of storing them directly

Scalability: Django uses a shared-nothing architecture based on components, where each part of the architecture is independent and can be replaced or modified if necessary The clear separation between components allows Django to scale for increased traffic by adding hardware at each level: caching, servers, database servers,

or application servers Django currently supports both Horizontal Scaling and Vertical Scaling, and it also supports database pooling in cases with multiple connections to the database

Flexibility: Django is written in Python, which means it can run on multiple platforms This means you are not tied to a specific server platform Django is well- supported by many hosting providers, who offer infrastructure and specific documentation for hosting Django web applications Django offers full support for translating the text into different languages, plus locale-specific formatting of dates, times, numbers, and time zones

In addition, Django supports standard SEO tools such as robots.txt Django helps save page load time by caching templates and compressing CSS and JavaScript

2.1.2 Compare Django and Angular

Django and Angular are two powerful web development technologies, but they are used to solve different problems in web application development Django mainly does server-side tasks and handles logic, while Angular focuses on the client side and building dynamic user interfaces

Table 2.1 Compare the features of Django and Angular framework

Applications, views, models,

Project structure and URLs

Complex web applications,

such as e-commerce sites,

CRM applications, content

management applications

Angular Front-end framework

TypeScript / JavaScript

MVC Components, Services, Modules, and Routes

Interactive and productive web applications, such as mobile web applications, enterprise web applications

MVC is a method of dividing data, presentation (output) and user input (input) components into separate components

- Model contains data and logical processing calculations to solve the problem that the software targets (business logic) The model component is often represented as a Domain Model

- View is the component responsible for presenting Model data View includes what is displayed on the screen such as controls, forms, widgets, etc

- Controller is the component responsible for processing and responding to data input from the user such as mouse and keyboard events, interactions with controls Controller is the bridge between the user and the application

Figure 2.1 Model View Controller [4]

Meanwhile, Django uses the MTV, MVC is slightly different from MVT in that Django itself takes care of the Controller part

- Model (M): It is responsible for accessing the database, validating data, managing behavior and relationships of the data, and more

- View (V): It collects user input gathered through templates and uses the model to retrieve the necessary data from the database to process the user’s request

- Template (T): It is related to displaying data to the user, and determining how the data is presented Templates manage HTML and CSS files

Figure 2.2 Model View Template [5]

2.1.3 The architecture of Django Framework

Figure 2.3 The MVT architecture of Django [6]

Django web applications typically groups the code that handles each of these steps into separate files [7]:

URL: While it is possible to handle requests from each URL through a single function, it is much easier to maintain by writing a separate view function to handle each resource The URL mapper is used to redirect HTTP requests to the appropriate view based on the request URL URL mappers can also match specific string or digit patterns that appear in URLs and pass them to the view function as data

Views: Views are request processing functions, receiving HTTP requests and returning HTTP responses The view accesses the data needed to satisfy requests through the model and delegates response formatting to templates

Models: Python objects that define an application’s data structure and provide mechanisms to manage (add, modify, delete) and query records in the database Template: A template is a text file that defines the structure or layout of the file (such as an HTML page), with placeholders used to represent the actual content A view can automatically generate an HTML page using an HTML template, populating it with

data from a model A template can be used to define the structure of any type of file; it doesn’t have to be HTML

The MVT architecture is used when creating an application with user interaction This pattern includes HTML code with DTL The models create database tables and export dynamic HTML templates to the user interface using views With Django, developers can access data from the database and map it to URLs without writing SQL code When Django knows which data will be presented, it constructs a view based on that data Whenever a user makes a request, Django processes that request using the Model, View, and Template components

2.2 CRUD and REST

2.2.1 CRUD (Creat - Read - Update - Delete)

CRUD is an acronym that stands for CREATE, READ, UPDATE, and DELETE These four database commands are the foundation of CRUD This acronym is well- known among programmers, but many software developers view it as more of guidance since CRUD was not made as a modern way to create API After all, its origins are in the database By its definition, it’s more of a cycle than an architectural system [8]

It is believed that the acronym CRUD was created in the 1980s to describe database functionality used by SQL The CRUD cycle is designed as a set of functions

to enhance persistent storage with the database often outliving the processes that started

it In modern programming and software development, CRUD has gone beyond its beginnings as a function and become a design principle for applications such as SQL, DDS, and the HTTP protocol

As discussed above, the four main principles of the CRUD cycle are: CREATE, READ, UPDATE, and DELETE:

- The CREATE function adds one or more entries and is the equivalent of the Insert function in SQL

- The READ function retrieves data based on different criteria and is equivalent to the Select function in SQL

- UPDATE procedures change and modify records without overwriting

- The DELETE function removes one or more entries that are specified 2.2.2 REST (Post - Get - Put - Delete)

REST was made to standardize the HTTP protocol interface between clients and servers and is one of the widely used design styles for web API

Figure 2.4 Describe the operating principle of REST [9]

REST is controlling data through HTTP commands It is a way of creating, modifying, and deleting information for users CRUD functions may exist in REST APls, but REST APIs are not limited to CRUD functions REST generally refers to the use of data through HTTP commands It is a dogma intended to facilitate users’ manipulation of data on the screen and information stored on the server Programmers can create REST APIs that can handle essential CRUD functions, but not the other way around

2.3 Python programming language

Python is just one programming language of many Just like human languages, there are many different computer languages, such as Java, LISP, PHP, Perl, and let’s not forget C or others, as well as useful things like UNIX scripting [10] Python is a powerful, flexible, interpreted programming language developed in the early 1990s by Guido van Rossum It has quickly become one of the most popular programming

10

languages in the world, especially in the fields of web development, artificial intelligence, data science, and many other fields

Some important features of Python include its simple, readable, and easy-to- understand syntax, which helps programmers focus on the logic of the program without having to worry about complex syntax It supports many programming paradigms such

as object-oriented programming, functional programming, and high-level programming Python provides a rich and powerful library, helping developers minimize the effort when implementing specific functions without having to rebuild from scratch Python’s standard library also includes many useful tools for a variety of tasks

This language has a large community and full support documentation, helping programmers quickly solve problems and learn from the community This makes Python a popular choice for both beginners and experienced developers Python was designed for readability and has some similarities to the English language with influence from mathematics [11]

2.4 Structured Query Language (SQLite)

2.4.1 Relational Database Management System

Modern business systems manage increasingly large volumes of heterogeneous data On e-commerce websites, there is a huge data type and data to store, such as product data, customer data, order data, and others However, e-commerce websites also have to ensure system responsiveness and data integrity Therefore, it’s important to understand the main storage models and their tradeoffs Selecting the right data store for corresponding requirements is a key design decision There are hundreds of implementations to choose from among SQL and NoSQL databases Data stores are often categorized by how they structure data and the types of operations they support There are two types of databases commonly used to store and manage website data: RDBMS and NoSQL RDBMS are a strong choice for websites that require a structured and consistent approach to data management, especially when dealing with complex relationships, transactions, and a need for data integrity Some RDBMSs are

11

MySQL, Oracle, Microsoft SQL Server, SQLite, While NoSQL databases have scalability, RDBMS can scale effectively for certain workloads, especially when optimized and combined with technologies like sharding, replication, and clustering

A RDBMS stores information in tabular form, with rows and columns representing different data attributes and the various relationships between the data values The relational data model provided a standard way of representing and querying data that could be used by any application Data is typically structured across multiple tables, which can be joined together via a primary key or a foreign key These unique identifiers demonstrate the different relationships that exist between tables, and these relationships are illustrated through different types of data models [12]

Figure 2.5 Examples of a relational database [13]

For example, the Users table can include user_id, first_name, last_name, and email of users with the foreign key id; the attributes for Movies are user_id, name, and description The Ratings table which includes ratings with user_id and movie_id, can join together with the common field Therefore, with every rating_id, relational databases can get to other information at other tables like customer and movie information

12

2.4.2 Structured Query Language

In 2000, D Richard Hipp designed SQLite as a library in the C programming language SQLite is an embedded SQL database engine that is embedded in apps It is the most widely deployed database engine, as it is used by several of the top web browsers, operating systems, mobile phones, and other embedded systems SQLite is one of the most popular and easy-to-use relational database systems [14] It was designed to allow the program to be operated without installing a database management system or requiring a database administrator Unlike client-server database management systems, the SQLite engine has no standalone processes with which the application program communicates

SQLite is very carefully tested prior to every release and has a reputation for being very reliable Most of the SQLite source code is devoted purely to testing and verification An automated test suite runs millions and millions of test cases involving hundreds of millions of individual SQL statements and achieves 100% branch test coverage [15] SQLite is an open-source software that operates without the need for any license after installation Remarkably, it is a serverless database management system, eliminating the necessity for a separate server process or system to function SQLite can support multiple databases simultaneously within the same session, providing users with exceptional flexibility As a cross-platform DBMS, SQLite can seamlessly run on various operating systems, including macOS and Windows One of its user-friendly attributes is the absence of any demanding configuration requirements, making it an effortlessly accessible and efficient choice for database management without the need for extensive setup or administration

13

Figure 2.6 The interface of SQLite RDBMS

SQLite database is integrated with the application that accesses the database The applications interact with the SQLite database read and write directly from the database files stored on disk It requires minimal support from the operating system or external library as well as no configuration needed The data in SQLite is organized into tables, which consist of rows and columns The rows represent individual records, and the columns represent the attributes of those records SQLite provides a SQL interface for interacting with the data

Django officially supports 5 databases: PostgreSQL, MariaDB, MySQL, Oracle, SQLite When creating a project with django, the default database is SQLite It provides

an excellent development alternative for applications that are predominantly read-only

or require a smaller installation footprint

2.5 Asynchronous JavaScript and XML

Ajax is a technology that helps us create dynamic Web sites that do not reload the page at all, so they are very smooth and beautiful For today’s web technology, Ajax is indispensable, it is a part that makes the website lively Ajax is written in Javascript language so it runs on the client, meaning each machine (user) will run independently without affecting each other Currently, there are many javascript libraries such as jQuery or Angular that support this technique to help us operate more easily

14

2.6 Bootstrap

Bootstrap is a front-end framework written in SASS and compiled into CSS, it is

a powerful library that integrates many available CSS to make HTML & CSS programming simpler and easier Normally when we program with pure CSS, the job

of checking compatibility on different browsers and on different mobile devices is very difficult, but with Bootstrap, the programmer does not need to spend much More effort because Bootstrap creators have taken care of everything

Bootstrap divides the layout of a website into 960 Grids and includes 12 columns, each column is 80Grid and this is Bootstrap’s HTML & CSS design standard It supports most modules of a website such as menus, tabs, tooltips, popups, etc In addition, it also uses Javascript to handle high-level effects Bootstrap’s javascript uses jquery, so it should be used To use it, you will need to add the jQuery library Benefits

of using bootstrap include quick interface development, easy to learn, easy to use, javascript and jquery support

15

CHAPTER 3 SYSTEM ANALYSIS AND DEVELOPMENT

3.1 Actors and Use Cases

3.1.1 Use Cases for customers

Figure 3.1 Use case overview of the customer website

There are 2 objects customers will use the website, (1) User - who already has an account or has at least made a transaction, (2) Walk-in Guest - who access the website for the first time The functions specific to each object are presented in the table below:

Guest User Create an account for customer getting

access to the website

Sign in or sign out of user account x

Change account information (phone

Review placed orders so customers can

Change account password x

Track order status (payment, shipping, X

receiving )

16

Leave comments and product reviews af

purchasing the product at the store

Add products to cart, place orders, apply

promotions and make payment

Search by keyword to display related

products

View product information & filter products

that match user requirements

Advertising campaigns, receiving discour

codes, promotions

Contact the store for questions and prod

introduction advice

3.1.2 Use Cases for Administration

Admin in a website (Administrator) can be understood as the main operator of activities taking place on a certain website Admin holds the highest rights, in addition there are admin1, admin2 (decentralized by the main admin) and lower user levels (users) to jointly operate and manage the website Website admin duties may include: Ensuring web servers, hardware and software are working correctly, creating and modifying web pages

17

Figure 3.2 Use case overview of the administrator website

Applying CRUD as an administrator, the website admin can perform management, monitoring, and editing of settings and configurations Below is a description of the administrator’s functions:

Table 3.2 Description of the functions of administrator in the website

CRUD a news article, statistics views and user interactio! capture consumer trends

CRUD a promotion, evaluate which promotion is effective Receive and respond to requests/questions from custom: Implement business results reports (inventory, revenue, : quantity ) to propose business strategies

18

3.2 Business Process Modeling Notation

3.2.1 Login and Registration

Figure 3.3 BPMN for Login During the login process, users are asked to select an account and password or log

in with a registered Google account

19

- When logging in with an account, the system will check whether the phone number and password are valid and accurate with the account the customer has registered

- With google login, users are asked to select the email that previously registered their account The system will authenticate the email

If correct, the login session will be saved and forwarded to the home page If incorrect, the user is notified of the incorrect information and asked to try again

Figure 3.4 BPMN for Registration During the registration process, users are required to enter all necessary information (Name, Phone Number, Email, etc.) and tick to accept the account policy After pressing “Register”, all information filled in will be checked for validity If all

20

information is valid, all information will be sent to the database for a match check lf the information does not exist in the database, the account is considered valid and is created and saved in the database If the information is invalid, the user will be asked to fill in the invalid information again until successful

3.2.2 Change personal information and password

Figure 3.5 BPMN for changing personal information

21

During the process of changing personal information, users will select and re-fill the information they want to change This information will be checked in the database

If the required information is valid and complete, the new information will be updated

in the database If the required information is invalid or omitted, the user will be notified and re-filled

Figure 3.6 BPMN for changing password

Changing a password is similar to the process of changing information The user

is asked to re-enter the old password, enter and confirm the new password There are 2 checking steps including checking the accuracy of the old password and the validity of the new password If it passes the 2 checking steps, the database will update the password for the user If 1 of the 2 checks fails, the user will be notified and re-entered

22

3.2.3 Forgot password

Figure 3.7 BPMN for forgetting password

In the process of retrieving the password when forgetting the password, the user will select email or phone number and enter the corresponding information to receive the OTP code The system will check the validity of the phone number/email If valid, the OTP code will be sent to the selected address Users use this code to confirm on the Forgot Password interface of the website If the entered code is correct, the user can

23

enter and confirm the new password The new password will be checked for validity, if valid, the new password will be updated to the database In case the OTP code is not received, the user can choose to have it resend

3.2.4 View cart and make order

Figure 3.8 BPMN for viewing cart and making order

The user chooses to view the shopping cart to view details of the selected product, check the selected products, can increase or decrease the quantity of the product or delete the product The user then chooses a delivery method including fast delivery and express delivery Free delivery when the user purchases the full promotional amount will be automatically “checked” Next, the user clicks on proceed to payment to go to

24

the payment page, on this page the user enters his or her address and payment method With the address, users can use the customer’s address saved in the database or enter a new address With the payment method, users have 2 options: pay via card or pay in cash upon receipt After the required user input options have been entered, the selected user has read the company policy Finally, click complete payment to receive the results

of the order

3.2.5 Add products to wishlist

In the process of Adding or removing products from the favorites cart, this function is used when the user is logged in to the account The user clicks the “Add to Wishlist” button to add to the cart and will be notified successfully If the user wants to delete the product from their favorite shopping cart, click the Delete icon, the user will

be asked to confirm deletion and be notified of success Your favorite shopping cart will

be updated again

25

Figure 3.9 BPMN for adding products to wishlist

26