INDIVIDUAL PROJECT FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title WEBG301 - Project Web

Submission date 03/11 Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Ngo Thanh Cong Student ID GCH18435

Class GCH0803 Assessor name Nguyen Dinh Tran Long

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 Cong

Grade
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:
 Table of Contents
I. Introduction ............................................................................................................................................................................................................ 6
II. User requirement .................................................................................................................................................................................................... 6
III. System design .................................................................................................................................................................................................... 8
1. Site map ............................................................................................................................................................................................................. 8
2. ERD.................................................................................................................................................................................................................. 18
IV. Implementation ................................................................................................................................................................................................ 19
1. Sample Source Code ........................................................................................................................................................................................ 20
a) Model ........................................................................................................................................................................................................... 21
b) Controller ..................................................................................................................................................................................................... 27
c) Views (template) .......................................................................................................................................................................................... 30
2. Web screenshots............................................................................................................................................................................................... 34
V. Conclusion ........................................................................................................................................................................................................... 46
1. Website evaluation ........................................................................................................................................................................................... 46
2. Future improvements ....................................................................................................................................................................................... 46
3. Appendix .......................................................................................................................................................................................................... 46
 Table of Figure

Figure 1-Table of User story .......................................................................................................................................................................................... 7

Figure 2-Site map ........................................................................................................................................................................................................... 9
Figure 3-Home Page .................................................................................................................................................................................................... 10
Figure 4-Manage Laptops ............................................................................................................................................................................................ 11
Figure 5-Create Laptop ................................................................................................................................................................................................ 12
Figure 6-Detail ............................................................................................................................................................................................................. 13
Figure 7-Update ........................................................................................................................................................................................................... 14
Figure 8-Brands & Sizes .............................................................................................................................................................................................. 15
Figure 9-Create ............................................................................................................................................................................................................ 16
Figure 10-Detail ........................................................................................................................................................................................................... 17
Figure 11-Update ......................................................................................................................................................................................................... 18
Figure 12-Entity relationship diagram of Laptrend-website ........................................................................................................................................ 19
Figure 13-The website is created by MVC design pattern ........................................................................................................................................... 21
Figure 14- Make new entity in terminal....................................................................................................................................................................... 22
Figure 15-tablet entity .................................................................................................................................................................................................. 23
Figure 16-getter and setter of each attribute in tablet entity ........................................................................................................................................ 24
Figure 17-relationship to brand class #1 ...................................................................................................................................................................... 25
Figure 18-relationship between tablet class and brand class #2................................................................................................................................... 27
Figure 19-Migration ..................................................................................................................................................................................................... 27
Figure 20-Migrate ........................................................................................................................................................................................................ 27
Figure 21-make new controller by command .............................................................................................................................................................. 27
Figure 22-Tablet Controller ......................................................................................................................................................................................... 28
Figure 23-detail tablet function .................................................................................................................................................................................... 29
Figure 24-index-Function of tablet controller .............................................................................................................................................................. 30
Figure 25-Views (template) ......................................................................................................................................................................................... 32
Figure 26-Index-Tablet views (indexTablet.html.twig) ............................................................................................................................................... 33
Figure 27-Homepage ................................................................................................................................................................................................... 34
Figure 28-Manage brand .............................................................................................................................................................................................. 35
Figure 29-Detail of brand Asus when click detail button ............................................................................................................................................ 36
Figure 30-update brand function .................................................................................................................................................................................. 37
Figure 31-Size management page ................................................................................................................................................................................ 38
Figure 32-delete demo ................................................................................................................................................................................................. 39
Figure 33- after delete .................................................................................................................................................................................................. 40
Figure 34- Manage Laptop........................................................................................................................................................................................... 41
Figure 35-create new Laptop ....................................................................................................................................................................................... 42
Figure 36-After creating new laptop ............................................................................................................................................................................ 43
Figure 37-laptop detail ................................................................................................................................................................................................. 44
Figure 38-detail Tablet ................................................................................................................................................................................................. 45
 I. Introduction
This report is approximately my Shopping cart web extend utilizing PHP with Symfony System and MySQL as database. The thought of this website
is Portable workstation shopping. Interior this report, I will cover the necessities, the method of plan and implementation as well as the ultimate
frame of the extend. I too covering stars and cons and future changes.

II. User requirement

Laptrend may be a website which offers Portable workstations and Tablets, as you'll see table underneath, the site has 3 of client are Staff, Admin
and Customer. Each sort of clients has a few capacities is the same and contrast. It'll appear in table client story underneath.
Figure 1-Table of User story
 III. System design
1. Site map
Behind is the site map of Laptrend website, in this system I have many site-pages, the first is the homepage, this page will briefly introduce Laptrend,
this is also the first page that people see when starting system top. The login page always exists if you are one of the system users, you can log in as
Administrator who manages all the system user's accounts, besides, you can also log in entered as an employee, who will manage the entire system
of products, brands... . The last user you can login is client authentication, in this case you log in almost like a user. Customers can view all products
just like all laptops and tablets

On the other hand, customers can see all brands and sizes of products, making it easier for them to decide on a purchase product. In the website's
laptop it will show all the store's laptops, it's the same for the tablet's site. Because all product information is stored in this website, it must be
managed. Staff will manage them on several websites such as laptop, tablet, size, brand, etc. In the website of the customer, of course it also appears
the shopping cart, which is the store that includes all the products that the customer has added. It also shows all products being paid, product purchase
history of customers in the system. Next to some information such as delivery details and payment methods are displayed.
 Figure 2-Site map

2. Wire Frame

2.1. HomePage
 Figure 3-Home Page

This is the home page, and there are functions to choose from

2.2. Manage laptops & Manage Tablets

In the two sections manage laptop and Manage Tablets are basically the same, both have a display page and 3 functions Detail, Update,
Delete
 Figure 4-Manage Laptops

Create Laptop & tablet

This is a laptop product creation page, similar to that for a tablet, when you need to create a product, the user must enter all the information such
as: (name, color, avaible, made in, price, price discount, image) , size, brand) then click "create" the information of the product will be saved
and displayed on the manage laptop or tablet page
 Figure 5-Create Laptop

Detail

This is the Detail button, when the user clicks here the page will display the image of the product and the information that the user has entered
in the "Create" page, helping the user to know more information about the product and give it a go Easier choice
 Figure 6-Detail

Update
This page will help users to edit the information of the product

Figure 7-Update
Delete

With the delete function, after the user clicks on "delete" next to the product, the product is immediately removed from the list, helping the
user to remove the unused products.

2.3. Brands & Size

The display of Brands and sizes pages is relatively similar and all have 3 functions (Detail, Update, Delete)

Figure 8-Brands & Sizes

Create Brands & Sizes

Create brand and size helps users enter size and brand information for products, making it easy for users to choose size and brand for products

Figure 9-Create

Detail

This page will show the size and brand information that the user has added
 Figure 10-Detail

Update

This page will help users to edit the information of size and brand
 Figure 11-Update

Delete

With the delete function, after a user clicks "delete" next to the item they want, that information is immediately removed from the list, helping
users remove unused information.

3. ERD
The ERD behind show all of table that will include all of data of product and relation of them. It consists of 4 of tables, each table have key is id. In
entity size, I create 2 of column are name and description, it also same with entity brand. The table laptop have some attributes like name, brand,
size, color, amount, madein, price, price_discount and image. In table tablet I create 4 of column is brand, name, price and Image. In this table,
brand_id is foreinkey, this table be related to entity brand, the relation is many to one (one brand have many tablet, one tablet is definition by one
brand). The laptop table is related to brand and size is many to one, one laptop just be definition by one size and brand but one size have many
different laptops, one brand have many different laptops.

Figure 12-Entity relationship diagram of Laptrend-website

IV. Implementation
The website was created by PHP and Symfony framework in Visual studio code and website use Xampp, it is a free and open-source cross-platform
web server solution stack package developed by Apache.

Laptrend is website created by MVC pattern.

 1. Sample Source Code
The MVC (Model, Views, Controller) pattern is shown in the explorer, in this section I will give some explanation on how my web works using
this framework

Above are my folder structure of my web, the important component of the MVC can be seen in the “src” folder.

The “config” represent the configuration of the website as well as store the directories of plugins.

The “public” are the storage of the frontend of my web such as css, js and images.

The “migrations” will help push my entity models to the database. Like I mention in the start of the paragraph, the “src” folder plays an important
part in the MVC model. Inside the “src” folder, we can see the controller and entity are being store here.

The “Views” are being store inside the “template” folder. We can see that inside the “templates” folder have template of each function of the website
as well as the home page.
 Figure 13-The website is created by MVC design pattern

a) Model
The Models can be create using this command inside the project folder:
 Figure 14- Make new entity in terminal

The model in MVC is your database, it contains properties inside of a specific Entity. Here is what inside an Entity model
Figure 15-tablet entity
Above are the entity Tablet of my website, we can see that it’s properties such as id, name, brand, price and image. Each of properties come with
getter and setter method

Figure 16-getter and setter of each attribute in tablet entity

In addition, due to the ManyToOne relationship with “brand” class the entity also have three functions related to the connection between two classes
such as get, add and remove

Figure 17-relationship to brand class #1

 Figure 18-relationship between tablet class and brand class #2

The code is shown in brand entity.

After create entity, we must migrate it so that the entity can be pushed into the database. The migrate process can be performed
within this command. Use this migration command :

Figure 19-Migration

Then we can migrate it:

Figure 20-Migrate

Note that when you have any changes to attributes or add and delete changes to the structure, connections, and relationships of the tables in the
database, use the migration and migrate statement.

b) Controller
Controller are responsible to the controlling the way the user interact on the website. This is where the web function are being implemented. For
example, here is my sample of the controller of product. First, to make a new controller in symphony, we must use this command:

Figure 21-make new controller by command

Below here are one of my controllers:

 Figure 22-Tablet Controller

Example are the view detail of tablet function

 Figure 23-detail tablet function

We can see the usable of the “$tablet = $this->getDoctrine()->getRepository(Tablet::class)->find($id);” code as a command to go to the data base
and get the tablet information with id is imported (Equal to SELECT * FROM Tablet when id = … in SQL). And then render view in the “return
$this->render()” code.

One more example of function view list of tablet are in the website:
 Figure 24-index-Function of tablet controller

The “$tablet = $this->getDoctrine()->getRepository(Tablet::class)->findAll();” code as a command to go to the data base and get all the Tablet
information (Equal to SELECT * FROM product in SQL). And then render view in the “return $this->render()” code.

This controller has some function to navigate to some different views (template) such as: updateTabletFunction, deleteTabletFunction,
addTabletFunction. All of function will make query to database . Next we will take a look in the Views section as the final part of the MVC model:

c) Views (template)
Views are representing the users interface of the website. In symphony, views are called “template” usually stores in twig extension. In other words,
templates are what we are seeing in the final version of the web. Here are some sample starting with the base.html.twig:
 Figure 25-Views (template)

The base.html.twig are the father of the templates, in here, they are includes the navigations to other pages. Base also contains the location of
javascripts and css, in this case are bootstraps.

Different from the classic html, every part of the website have to placed inside a block (for example, body part have to start with {% block body
%} and end with {% endblock %}) . Also, the header of the website are being store here. In “twig”, we can create as many as children twigs. To
do that, we must use “{% extends "base.html.twig" %}”. I will show the index function, extended from the “base.html.twig”:
 Figure 26-Index-Tablet views (indexTablet.html.twig)

In this figure, it’s where I display my tablets upload from my database for example (“tablet.name”). All the function such as details and remove,
create and update configured in the controller are rendered in here.

So behind is one of example of implementing system of this website. In the next step I will show the web- screenshots.
 2. Web screenshots
The homepage of this website

Figure 27-Homepage
 Figure 28-Manage brand

This is the template of manage brand, in this site the customer can see all of different brand of shop and brand's detail, the function update and delete
just has on the page when login by staff account. I will show more detail in some figures below:
Figure 29-Detail of brand Asus when click detail button
 Figure 30-update brand function

Staff is the only person allowed to do this function; he can change information of all items in database. In “size” management, all of thing is same
with brand, in demo version, it also has function like brand
Figure 31-Size management page
 Figure 32-delete demo

When I click button delete in 17,7’’ size of laptop, the Bulletin board will appear to reconfirm.
 Figure 33- after delete

Of course, if I click oke the item will be deleted right away.

 Figure 34- Manage Laptop

In this page we can see all of laptop is sell in website, we also create, see detail, update and delete them (the customer is just see list and detail). I
will show the function create in below.
 Figure 35-create new Laptop

After fulfill the information of new laptop, size and brand of laptop was chosen form data of list size and list brand, then click button create to finish
the process, the result is below, the new laptop will add to the last of list.
Figure 36-After creating new laptop
 Figure 37-laptop detail

When click detail button, the detail of product will appear.

It is same with tablet-management. Because it is demo version so it quite simple and not beautiful, in next version this web will be more specific
and have more friendly UI
Figure 38-detail Tablet
 V. Conclusion
1. Website evaluation

2. Future improvements
In the future I will:

• Improve the front-end of the web to make them looks better and smoother.

• Implementing the login system and authentications

• Able to implement a condition that deny the removal of brand if that brand have existed in laptop and tablet

• Adding function for admin to manage account user

• Adding function carting for customer and manage they orders

3. Appendix
Link to GitHub: https://github.com/ngothanhcong2882/webapp_cong