Web301 assignment (pass)

Higher Nationals in Computing

WEBG301: WEB Project
ASSIGNMENT

Learner’s name: Trần Thái Hoà, Đào Vĩnh Khang, Lê Thanh Tùng
ID: GCS200222
Class: GCS0905B
Subject code: WEBG301
Assessor name: PHAN MINH TAM
Assignment due:

Assignment submitted:



ASSIGNMENT FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

WEBG301: WEB Project

Submission date

Date Received 1st submission

Re-submission Date

Date Received 2nd submission

Student Name

Class

1. Đào Vĩnh Khang

Student ID

1. GCS200222

2. Trần Thái Hoà

2. GCS200783

3. Lê Thanh Tùng

3. GCS200722

4. X

4. X
Assessor name

Phan Minh Tam


Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that

making a false declaration is a form of malpractice.
Student’s signature
Grading grid
P
M

D


 Summative Feedback:

Grade:
Signature & Date:

 Resubmission Feedback:

Assessor Signature:

Date:



Table of Contents
Contents
Chapter 1:................................................................................................................................................................... 2
1.

Background information ............................................................................................................................... 2

2.

Project aim and objectives ............................................................................................................................ 2

Chapter 2:................................................................................................................................................................... 3
Introduction ........................................................................................................................................................... 3
SDLC model ............................................................................................................................................................ 3
2.2 Type of SDLC: ............................................................................................................................................... 4
2.3 SDCL model applied in project: .................................................................................................................... 4
MVC architecture ................................................................................................................................................... 6
PHP Frameworks .................................................................................................................................................... 8
4.1 What is PHP Framework? ............................................................................................................................ 8
4.2 Why use a PHP Framework? ........................................................................................................................ 8
4.3 Common PHP Frameworks .......................................................................................................................... 8
4.4 PHP Framework is used in project: ............................................................................................................ 11
Database .............................................................................................................................................................. 12
Techniques and Tools........................................................................................................................................... 13
6.1 Techniques: ................................................................................................................................................ 13
6.2 Tools ........................................................................................................................................................... 14
Chapter 3:................................................................................................................................................................. 15
User’s requirements............................................................................................................................................. 15
Functional requirements.................................................................................................................................. 15
Non-Functional requirements .......................................................................................................................... 16
Use case diagram ................................................................................................................................................. 17
Use case ........................................................................................................................................................... 17
Use Case specification...................................................................................................................................... 18
Gantt chart ........................................................................................................................................................... 22
Chapter 4:................................................................................................................................................................. 23
Database design ................................................................................................................................................... 24
Database diagram ............................................................................................................................................ 24
Page|0

Data dictionary ................................................................................................................................................. 24
Class diagram ....................................................................................................................................................... 25
WireFrame design ................................................................................................................................................ 25
4.1 Home .......................................................................................................................................................... 25
4.2 Product ....................................................................................................................................................... 26
4.3 Registration ................................................................................................................................................ 27
4.4 Login ........................................................................................................................................................... 27
4.5 Admin ......................................................................................................................................................... 28
Chapter 5:................................................................................................................................................................. 28
1 Application screenshot...................................................................................................................................... 28
1.1 Customer side: ........................................................................................................................................... 28
2. Sample source code ......................................................................................................................................... 32
2.1 Customer controller ................................................................................................................................... 32
2.2 Product controller ...................................................................................................................................... 33
2.3

Product controller3 ............................................................................................................................. 34

3.GITHUB Repository: .......................................................................................................................................... 35
Chapter 6:................................................................................................................................................................. 36
What went well. ................................................................................................................................................... 36
What did no go well. ............................................................................................................................................ 36
Lessons learned and further improvements ........................................................................................................ 36
REFERENCES ............................................................................................................................................................. 37

Page|1

Chapter 1:
Introduction

1. Background information
Our scenario will work on a sales website that specializes in selling Lego items. Here we will update
and evaluate the latest products and have special offers for potential customers. The website will
continuously update and cover the product in the fastest way. With professional team and young
staff, we want to bring great experience to customers. Currently our website is accepting requests
to make custom products and everyone can guarantee the genuineness of Lego items in our store.

2. Project aim and objectives
Customer: To serve the needs of a customer, a person uses the website to view and Find out
about the manufacturer's products, learn about details, contact manufacturer or want to buy
models through the website. these different goals users can only view the information on
the website and leave feedback after implementation buy, lean on, cling to; he or she cannot
change the information of the product or the website.
Admin: The object that accesses the website to manage the information and data it contains.
This user can manage and modify product information (products, customer feedback).

Page|2


Chapter 2:
Literature Review

Introduction
It is generally accepted that there are three basic lifecycle approaches to software development,
the waterfall approach, iterative development and component-based software engineering. This
literature review places Rapid Application Development in context as well as looking at some of
reasons for the evolution of methodologies

SDLC model
2.1 Introduction to SDLC: The Software Development Life Cycle (SDLC) is a process that follows for a
software project, within a software organization. It includes a blueprint that describes how to develop,
maintain, change, or upgrade specific software.

Page|3


2.2 Type of SDLC:
General categories of SDLC:
• Waterfall Model
• Prototyping Model
• Agile Model
• Spiral Model
• Lean Model
• DevOps Model
• Iterative Model
• V -Model

2.3 SDCL model applied in project:
We chose the waterfall model for the Mono sales website design project.

Page|4


Requirements: Our team analyze the requirements and the specification document to determine the
requirements related to the functional and non-functional aspects of the Mono sales project. This stage
needs the customer's activeness and ends with a document called "Software requirement specification" or
SRS (software requirement specification). The Requirement Specification document is the foundation for

further activities until the end of the project.
- Design: After having the functions and non-functions in the first step, we will shape the software system to
meet the requirements of the customer required in the SRS document (software requirement specification).
- Implementation: We program everything in the system analysis and design phase
- Verification: The testing step after the code is completed, we will test the entire project system with the
participation of the customer to see if the customer accepts it or not.
- Maintenance: The final step of the project, which is installation and maintenance when the customer has
accepted, this phase will only let the customer use the software and fix software errors if any or change new
requirements or add new requirements. reduce system functionality
Advantages of waterfall model:
This is a simple model, easy to apply, clear step-by-step process.
Page|5


Ease of management and maintenance by a linear and fixed step-by-step approach. The input and output
criteria are clearly defined so it is easy to control the quality. Works effectively on small projects, with clear
requirements. There are many documents provided to customers.
Cons of waterfall model:
Not the ideal model for large and long-term projects.
Not effective for projects facing unclear requirements from the start.
Difficulty adapting to change including requirements, plans, project scope Intuitiveness is low and value is
slow to deliver when the end-of-life user sees and uses the product

MVC architecture
MVC is an architectural pattern which means it rules the whole architecture of the applications. Even though
often it is known as design pattern, but we may be wrong if we refer it only as a design pattern because
design patterns are used to solve a specific technical problem, whereas architecture pattern is used for
solving architectural problems, so it affects the entire architecture of our application. It has three main
components:
-Model

-View
-Controller and each of them has specific responsibilities

The main reasons why MVC is used are: First, it doesn't allow us to repeat ourselves and second, it
Page|6


helps to create a solid structure of our web applications.
•

Model

It is known as the lowest level which means it is responsible for maintaining data. Handle data
logically so it basically deals with data. The model is connected to the database so anything you do with
data. Adding or retrieving data is done in the model component. It responds to the controller requests
because the controller never talks to the database by itself. The model talks to the database back and forth
and then it gives the needed data to the controller. Note: the model never communicated with the view
directly.
•

View

Data representation is done by the view component. It generates UI or user interface for the user. So, at
web applications when you think of the view component just think the Html/CSS part. Views are created by
the data, which is collected by the model component, but these
data aren’t taken directly but through the controller, so the view only speaks to the controller.
•

Controller

It’s known as the main man because the controller is the component that enables the interconnection
between the views and the model, so it acts as an intermediary. The controller doesn’t have to worry about
handling data logic, it just tells the model what to do. After receiving data from the model, it processes it
and then it takes all that information it sends it to the view and explains how to represent to the user. Note:
Views and models cannot talk directly.
Advantages of MVC:
- MVC architecture will separate the user interface from business logic and business logic
- Components are reusable.
- Easy maintain.
- Different components of the application in MVC can be independently deployed and maintained.
- This architecture helps to test components independently.
Disadvantages of MVC:
-The complexity is high.
-Not suitable for small applications.
-The inefficiency of data access in view.
• Conclusion

Page|7


So MVC is not that easy to understand, it’s hard, but not impossible to learn and every developer needs to
keep it in mind when developing an application. Just keep in mind that MVC is an architecture that divides
your software into smaller components. The model deals
with data and the logic of your system. The view only displays data, and the controller maintains the
connection between the model and the view. This ‘division’ enables readability and modularity as well it
easier the testing part.

PHP Frameworks
4.1 What is PHP Framework?
PHP Framework is very necessary for PHP Developer to do web programming. Instead of each time

developing an application, you must rebuild functions that have been used many times before, with
these frameworks, this "downtime" is minimized

4.2 Why use a PHP Framework?
PHP Framework provides a basic structure to improve the web application development process. It
can be said that PHP Frameworks are popular because they help speed up the development process.
Above all, the PHP Framework meets the performance needs of businesses thanks to the
responsiveness of websites and applications built with the PHP Framework.

4.3 Common PHP Frameworks
Have 10 common PHP Frameworks:
Laravel:

Phalcon:

Page|8


Symfony:

CodeIgniter:

Yii 2:

Cake PHP:

Page|9


Zend:

Fat-Free:

PHP-Pixie:

FuelPHP:

P a g e | 10


4.4 PHP Framework is used in project:
The PHP used in the website design project is the Laravel Framework. Because Laravel helps you
speed up the application development process, save you time, increase the stability of the
application. Reduce the number of times you have to rewrite programmer code.

Advantage:
•

Getting started is easy

The first reason is that Laravel is extremely easy to use for beginners, even if you only know a little
about PHP, you can still develop a website with 5 pages in a few hours.
•

There is open source code

The free, open source Laravel framework allows you to build large and complex web applications
quickly and easily.
All you need to do here is install PHP, plus a text editor to get started.
•

Community support

In case you are stuck with difficult bugs, but someone has gone through and guided you, nothing
better.
P a g e | 11


Laravel has an extremely large support library system and is more powerful than other frameworks.
If you report a bug or a security breach in the Framework, the community response will be very
quick.
•

Follow MVC

The MVC architecture and OOP object-oriented programming are still retained in the Laravel
Framework, providing better documentation, and increased performance.
•

Built on top of the most efficient frameworks

Because it was born late, Laravel inherits the advantages and strengths of other Frameworks, when
there is a strong route section. A video example is Laravel using some of the best components of
Symfony.
•

Easy Database Migration

Database migration is one of the key features of Laravel. It allows you to maintain the application
database structure without necessarily recreating it.

Database migration also allows you to write PHP code to control the Database, instead of using SQL.
It also allows you to roll back the most recent changes in the database.
•

Complete security features

Your application will be safe using the Laravel Framework. Laravel's ORM technique uses PDO, antiinsertion SOL.
Additionally, Laravel's crsf protection helps prevent cross-site request forgery. It's a syntax that
automatically escapes any HTML being passed through view parameters, to prevent cross scripting
on the web page.
What you need to do here is use the appropriate components of the framework.

Database
MySQL is an open source database management system (referred to as RDBMS for short) that works under
the client-server model. With RDBMS stands for Relational Database Management System. MySQL is
integrated apache, PHP. MySQL manages data through databases. Each database can have many relational
tables containing data. MySQL also has the same access and similar code to
the SQL language. MySQL was released in the 90s
Advantages:
P a g e | 12


- Ease of use: MySQL is a high-speed, stable, easy-to-use, and cross-operating database that provides a large
set of very powerful utility functions.
- High security: MySQL is very suitable for applications that access databases on the Internet when it has
many security features even at high level.
- Multi-feature: MySQL supports many of the SQL functions expected from a relational database
management system both directly and directly.
- Scalable and powerful: MySQL can handle a lot of data and moreover it can be extended if needed.
- Fast: The introduction of several standards allows MySQL to work very efficiently and costeffectively, thus

increasing execution speed.
Disadvantage:
- Limitations: By design, MySQL is not intended to do it all and it comes with limitations on the functionality
an application might need.
- Reliability: The way specific functions are handled with MySQL (e.g., references, transactions, audits, etc.)
makes it less reliable than some DBMSs. other relationships.
- Limited capacity: If your number of records is growing, it is quite difficult to assess your data, then we will
have to apply many measures to speed up data retrieval such as load sharing this
database to many servers, or create a MySQL cache.

Techniques and Tools
6.1 Techniques:
CSS:

Bootstrap:

P a g e | 13


JavaScript:

MySQL workbench:

6.2 Tools
Visual studio code:

Xampp:

P a g e | 14

Chapter 3:
Requirements Analysis

User’s requirements
Functional requirements
1.1.1.
Customer roles:

P a g e | 15


•
•
•
•
•

1.1.2.

Sign in and sign up with store accounts like Facebook, Google, or create a new
account for yourself.
Users can search tool information such as name, price, detailed information about
the products of our Lego store.
Users can give reviews and ratings on the quality and services they have used.
Users can view and buy some promotional accessories included with the product.
User can add and buy products to cart.

Admin roles:
•

•
•
•
•

The admin account can do things like add products, remove products, update
products.
Web statistics and the manager's download account can do things like update
more products.
The admin account can do things like add manufacturers, remove manufacturers,
update manufacturers
Administrator account can register, log in, log out, edit information.
The admin account can do things like view customer information, delete
customers.

Non-Functional requirements
- The speed, capacity, and reliability of the system: Any interaction between the user and the
system should not exceed 3 seconds.
- The system downloads new status parameters within 6 minutes of a change.
- The system should be available for use 24 hours per day, 365 days per year.
- System can run on all device as Phone, Web, ...

P a g e | 16


Use case diagram
Use case

-

Users can use the following functions:

-

User has 2 main functions and each function has many sub functions Accounts:

-

•

Login

•

Log Out

•

Register

View Product:
•

View Product Image

•

View Product Name

•

View Product Price
P a g e | 17

Manage


-

Admin manages higher functions:

Admin has 4 main functions and each of its functions has 3 to 4 sub functions:
-

Manage Product :

•

Update Product

•

Show Product

•

Delete Product

•

Edit Product

-

Manage Admin Account:

-

•

Login

•

Log Out

Manage Customer:
•

Delete Customer • View Infomation Customer - Manage Producer:

•

Add Producer

•

Delete Producer

Edit Producer • Show Producer

Use Case specification
1.1.3.

UC-1

Use Case Name: Login

ID: UC-1

Priority : Medium

Actor: Admin and Customer
Description: Admin and customer must be logged in properly to be able to access the site
Preconditions: Account must have been created before
Normal Course:
Enter the correct account and password
Click and login button to enter the website
Postconditions:
After logging in we will go to the main page of the web

P a g e | 18