ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Date Received 1st

Submission date 20/80/2021
submission

Date Received 2nd

Re-submission Date
submission

Student Name NguyenVan Manh Student ID BHAF200048

Class PBIT17101 Assessor name Ngo Thi Mai Loan

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

P5 P6 P7 M4 M5 D2 D3

1
❒ Summative Feedback: ❒ Resubmission
Feedback:

2
Grade: Assessor Signature: Date:
Signature & Date:

Table of Contents
A. INTRODUCTION............................................................................................................................................................................................. 4
B. CONTENT......................................................................................................................................................................................................... 4
I. Design the sale website.................................................................................................................................................................................... 4
1. Design the structure and component of the website.....................................................................................................................................4
2. Database design........................................................................................................................................................................................... 9
II. Website development..................................................................................................................................................................................... 10
1. Tools and coding language used for development......................................................................................................................................11
2. Describe the operation of the website........................................................................................................................................................11
III. Use test plan to evaluate te design and performance of the website...........................................................................................................19
Test UI................................................................................................................................................................................................................... 19
1. Test UX.......................................................................................................................................................................................................... 20
2. Test log.......................................................................................................................................................................................................... 20
C. CONCLUSION................................................................................................................................................................................................ 21
D. REFERENCE LIST....................................................................................................................................................................................... 21Y

Figure 1 home page.......................................................................................................................................................5

Figure 2 allcourse page.................................................................................................................................................6
Figure 3 login page.......................................................................................................................................................7
3
Figure 4 register page....................................................................................................................................................8
Figure 5 user table database.......................................................................................................................................10
Figure 6 course table database....................................................................................................................................10
Figure 7 register page..................................................................................................................................................12
Figure 8 sign in page...................................................................................................................................................14
Figure 9 insert course page.........................................................................................................................................16

A. INTRODUCTION
- In this assignment, I will design a sale website including login, add products and shopping cart. I will talk about the
structure and database design for the website. Next, I will talk about the tools and languages that I use to develop
the website and describe how the website works. Finally, I will be the interface testing, user experience and test log
to the able to give the best assessment of my website.

B. CONTENT
I. Design the sale website

1. Design the structure and component of the website

Home Page:

4
Figure home page
All courses page:

5
Figure allcourse page
-Login page:

6
Figure login page

7
-Register page

Figure register page

8
 2. Database design
Entity Description of entity Attribute Description of attribute
User All user in the website 1. User ID 1. Primary key. It is a
2. Full Name unique identifier for
3. User Name each user in the
4. Password website
2. Full name of user
3. Name of user when
log in
4. Password of user
when log in

Course course in the database 1. Course id 1. Primary key. It is a

2. Course name unique identifier for
3. Course category each course in the
4. Course lectruers website
5. Course image 2. Name of course
6. Course price 3. Category of course
4. Lectures
5. illustrations of each
course
6. the price to pay when
buying the course

- Users table in the database

9
Figure user table database
-Course table in the database

Figure course table database

II. Website development

10
1. Tools and coding language used for development
- In the my website, I used HTML to design front-end And I also use CSS to make up for my website.

- For the back-end, I used MySQL to store and add products to the database.

- I also use PHP to be able to export data from mySQL to the website.

-I created my website using sublime text software and the support is xampp.

2. Describe the operation of the website

Here I will introduce my website and it includes the following functions: registration page, login page
and insert data into the website.

-The first is the registration page. here user can create his account and password:

11
Figure register page

12
-After entering the name and account, password and pressing the register button, the data will be saved to
the database:

13
 When registration information is displayed in the database, you have successfully registered for an
account.
-Next is the login feature. I will log in with the account I just created in the account registration section:

Figure sign in page

14
15
 Upon successful login, the website will notify the user and direct the user to the homepage.
-Next is the function to insert scraping data in the website, this function is the function that the website
needs to have. Here is the page that inserts data into my website:

Figure insert course page

Here I will add some information as follows:
16
- Course name: php
- Course Category: back-end programming
- Lecturers: MR. Manh
- Price: 599

17
After successfully inserting course information. there will be a message "course has been inserted
successfully"
If the course information has been updated in the database, the course has been added successfully:

then the information of the course will be updated immediately on the homepage of the user's website:
18
 Above I have provided all the steps and show all the pictures for you about the functions of registration,
entering account and adding new data to the database and displaying it on the homepage.
III. Use test plan to evaluate te design and performance of the website

Test UI
The criteria for test Details
Color of the website Blue, white, balck
Font Time new roman,arial
19
Images High quality image
Size, position, width, height of elements I used the right size and size for the word parts of the
website
Interface Beautiful, easy to operate
Test UXThe criteria of test Details
When open the website on many different devices The interface is compatible with computers, not yet
compatible with mobile phones
Website load time Quick website access, when it only takes a few seconds
to log in to the website
User ratings for the website User reviews are positive. Besides, it needs to be fixed
to be compatible with more devices
Test What is Test data used Expected Date Actual Note
logT being used result result
est
1 Register Fullname:Nguyen Van Manh Register 20/8/2021 Register
Account Username:”manhbtec” successfully successfully
Password:”manh123”
2 Login Username:”manhbtec” Login 20/08/2021 Login
Password:”manh123” successfully successfully
3 Add course Insert into Course values : Added 20/08/2021 Added
Course_id:23; successfully successfully
Course_name:php;
Course_category:back-end
programing;
Course_lecturers:Mr. Manh;
Course_image:;
Course_price:599;

20
C. CONCLUSION
- In this assignment, I used wireframe to design the sale table and database design. Next, I developed my
website with HTML, CSS pn front-end MySQL, PHP on back-end. And then, l have introduced features of
my website. Finally, I tested the website's features to see what its strengths and weaknesses were. In
addition, I also test the user interface and user experience to get the right perspective. My website is still not
able to experience on many interfaces but the user interface is considered a plus.

D. REFERENCE LIST
W3schools.com. 2021. HTML Tutorial. [online] Available at:
<https://www.w3schools.com/html/default.asp> [Accessed 20 August 2021].
W3schools.com. 2021. CSS Tutorial. [online] Available at: <https://www.w3schools.com/css/default.asp>
[Accessed 20 August 2021].
W3schools.com. 2021. PHP Tutorial. [online] Available at: <https://www.w3schools.com/php/default.asp>
[Accessed 20 August 2021].
Codecademy. 2021. Learn PHP | Codecademy. [online] Available at:
<https://www.codecademy.com/learn/learn-php> [Accessed 20 August 2021].

21