BTEC FPT INTERNATIONAL COLLEGE INFORMATION TECHNOLOGY ASSIGNMENT 1: UNIT: Semi Project STUDENT : TRAN THIEN THACH CLASS : IT16101 STUDENT ID : BDAF200018 SUPERVISOR : NGUYEN HOANG ANH VU Da Nang, JUNE 2022 ASSIGNMENT 1 FRONT SHEET Qualification BTEC Level 5 HND Diploma in Computing Unit number and title Unit 3: Website Design & Development Date received (1st Submission date 21/6/2022 21/6/2022 submission) Date received (2nd Re-submission date submission) TRAN THIEN Student name Student ID BDAF200018 THACH NGUYEN HOANG Class IT16101 Assessor name ANH VU 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: TRAN THIEN THACH Grading grid P5 P6 P7 Summative Feedbacks: Resubmission Feedbacks: Grade: Assessor Signature: Date: Internal Verifier’s Comments: Signature & Date: TRAN THIEN THACH i TABLE OF CONTENT TABLE OF CONTENT .1 LIST OF TABLES AND FIGURES.1 Functional and Non-Functional Requirements.2 Non-Functional Requirements: .2 Use-Case diagram .39 Performed Student: Tran Thien Thach 1 LIST OF TABLES AND FIGURES Figure 1: User Use Case Diagram. 8 Figure 2: Admin Use Case Diagram.
9 Figure 3: Site Map. 11 Figure 5: Admin table. 11 Figure 6: Item Table. 11 Figure 7: Order table.
12 Figure 8: Order track table. 12 Figure 9: Product table. 12 Figure 10: Users table. 13 Figure 12: Home page.
15 Figure 13: About us page. 17 Figure 14: All product. 19 Figure 15: Login page. 20 Figure 16: My account page.
22 Figure 18: How to choose size. 25 Figure 19: Shop system. 26 Figure 20: Contact page. 27 Figure 21: Sale off page.
29 Figure 22: Payment method page. 30 Figure 23: Track order page. 31 Figure 24: Login admin page. 32 Performed Student: Tran Thien Thach 2 Figure 25: Admin page .34 Figure 26: Home page.
38 Figure 27: Result successful registration. 38 Figure 28: Login user. 39 Figure 29: Login success. 39 Figure 30: About us page.
40 Figure 31: All products page. 42 Figure 32: My account page. 43 Figure 33: Bill ship address. 44 Figure 33: Bill ship addres.
45 Figure 35: How to choose size page. 50 Figure 36: Shop system page. 50 Figure 37: Contact page. 51 Figure 38: Sale off page.
53 Figure 39: Pay method page .54 Figure 40: Track order page. 55 Figure 41: Login admin. 56 Figure 42: Admin page. 58 Table 1 #UC11: Logout.
8 Table 3 System Message. 8 Table 4 #UC22: Log-out. 9 Table 6 System Message. 9 Performed Student: Tran Thien Thach 3 Table 7 #UC33: Delete Account.
10 Table 9 System Message. 10 Table 10 #UC44: View Produces. 11 Table 12 #UC55: Create Produce. 11 Performed Student: Tran Thien Thach 4 INTRODUCTION First of all, I would like to thank my family for their enthusiastic encouragement and invaluable support for me to complete this assignment.
Next, I would like to thank my sub-ject teachers for guiding me, helping me achieve good academic results, and thanking all my friends for exchanging and supporting me. Semi-Project is an introductory course that introduces us to the foundational services required to host, manage, and access a secure website. You will learn about back-end technology and front-end technology. The following report will cover the following sections: User Requirements System Designs Implementation.
Performed Student: Tran Thien Thach 5 1.1 Functional and Non-Functional Requirements 1.1 Functional Requirements - Functional Requirements indicate what the program or site ought to have the option to accomplish - Coming up next are a few instances of utilitarian necessities: + Client orders will be acknowledged utilizing the web-based application. + The web application will actually want to handle an exchange. + The web application ought to give a receipt that incorporates the client's name, the items bought, the expense of every thing, and the general sum. + The web application will actually want to give deals information on a week by week, month to month, and yearly premise.2 Non-Functional Requirements: - Non-practical necessities are the norms that the program or site is needed to meet.
Reaction time and dependability are instances of non-practical models. - Coming up next are some non-practical requirements for the vehicle shop application: + All staff, including agents and chiefs, should have the option to use the internet based application effortlessly. + The online application will be accessible in an assortment of dialects. + The web application ought to have the option to deal with a few deals simultaneously without forfeiting speed 1.2 Use-Case diagram Performed Student: Tran Thien Thach 6 Figure 2 :Admin Use Case Diagram Performed Student: Tran Thien Thach 7 1.3 Use case description #UC11: Log-in Name Log in Code UC11 Description Allow the actor to log in to the system to use it Actor Admin and User Trigger Actor presses log-in button Pre-condition - User created an account - The user's device is already connected to the internet before logging in Post condition - Actor login to the system successfully - The system records the successful login activity in the activity log Table 1 #UC11: Logout Activities Actor System Main Flow: Log out successfully 1 - Actor accessing the system - Actor enters account and press Login button 2 - The system authenticates the login information and allows the actor to access and use it - The system records successful logging in Activity Log Table 2 Activities System Message MS02 Message when the actor presses the Login button: <Login successful= Table 3 System Message Performed Student: Tran Thien Thach 8 #UC22: Log-out Name Log out Code UC22 Description Allow the actor to logout the account from the system Actor Admin and User Trigger Actor presses log-out button Pre-condition Actor has successfully logged into the system Post condition - Actor successfully logged out - The system redirects to the login page Table 4 #UC22: Log-out Activities Actor System Main Flow: Log in successfully 1 - Actor clicks Logout button on profile management page 2 - The system confirms the logout and then redirects to the login page Table 5 Activities System Message Message when the actor clicks the Log Out button: <Are you sure you MS02 want to sign out of your account from the device?= Table 6 System Message #UC33: Delete Account Name Delete Account Code UC33 Description Allow actors to delete accounts Actor Admin Trigger Actor presses Delete button Pre-condition Actor has successfully logged into the system Post condition - Actor deleted account successfully - Go to the user administration management page Table 7 #UC33: Delete Account Performed Student: Tran Thien Thach 9 Activities Actor System Main Flow: Delete Account successfully 1 - Actor click on account - Actor clicks Delete button to delete the account - Actor enters password 2 - The system asks for a password - The system redirects to the account management page - The system confirms the password, deletes it, and goes to the login page Table 8 Activities System Message Notice when actor clicks Delete button: "Are you sure you want to delete MS02 this account?" Table 9 System Message #UC44: View Produces Name View Produces Code UC44 Description Allow actors to view produces Actor Admin / User Trigger Actor clicks on the product Pre-condition Actor accessing the system Post condition Go to product detail page Table 10 #UC44: View Produces Performed Student: Tran Thien Thach 10 Activities Actor System Main Flow: View Produces successfully 1 - Actor presses the Home button - Actors click on the product they want to see detailed information about 2 - The system will load the product and display the product - The system redirects to the product detail page Table 11 Activities #UC55: Create Produce Name Create Produce Code UC55 Description Allow actors to create a new produce Actor Admin Trigger Actor presses Create button Pre-condition Actor has successfully logged into the system Post condition Go to product management page Table 12 #UC55: Create Produce Activities Actor System Main Flow: View Produces successfully 1 - Actor clicks the manage product button on the admin page - Actor fills in the information and clicks the Create button 2 - The system asks to fill in all information - Upload products to the product management page Table 13 Activities Performed Student: Tran Thien Thach 11 2.3 Wire frames and specific explanation Wireframing is a procedure for planning a site's construction.
A wireframe is a graph that shows how data and usefulness on a site ought to be laid up, thinking about client requests and excursions. - From the get-go in the improvement cycle, wireframes are utilized to assemble the key structure of a page before visual plan and content are added. A wireframe is a website page design that shows what interface parts will be available on significant pages. It's a significant stage in the interface configuration process.
- A wireframe's motivation is to make a visual portrayal of a page from the get-go in a venture so partners and task colleagues might endorse it before the innovative flow starts. - Our website is carefully wireframed with a clear and detailed plan that includes the following pages: ❖ Login page Performed Student: Tran Thien Thach 16 Figure 12: Login page Performed Student: Tran Thien Thach 17 ❖ My account page Figure 13: My account page Performed Student: Tran Thien Thach 18 ❖ Homepage Performed Student: Tran Thien Thach 19 Figure 14: Home page ❖ About us page Performed Student: Tran Thien Thach 20 Performed Student: Tran Thien Thach 21 Figure 15: About us page Performed Student: Tran Thien Thach 22 ❖ All products page Performed Student: Tran Thien Thach 23 FIGURE 16: ALL PRODUCTS Performed Student: Tran Thien Thach 24 ❖ How to choose size page Performed Student: Tran Thien Thach 25 Performed Student: Tran Thien Thach 26 Figure 17: How to choose size Performed Student: Tran Thien Thach 27 ❖ Shop system Figure 18: Shop system Performed Student: Tran Thien Thach 28 ❖ Contact page Figure 19: Contact page Performed Student: Tran Thien Thach 29 ❖ Sale off page Performed Student: Tran Thien Thach 30 Figure 20: Sale off page Performed Student: Tran Thien Thach 31 ❖ Payment method page Figure 21: Payment method page Performed Student: Tran Thien Thach 32 ❖ Billing and shipping address page Figure 22: Billing Performed Student: Tran Thien Thach 33 ❖ Track order page Figure 23: Track order page Performed Student: Tran Thien Thach 34 ❖ Login Admin page Figure 24: Login admin page Performed Student: Tran Thien Thach 35 ❖ Admin Page Performed Student: Tran Thien Thach 36 Figure 25: Admin page Performed Student: Tran Thien Thach 37 CONCLUSION After completing this report, I sketched the website design using a wireframe tool with full features to meet the requirements of users and customers. After the sketch, I proceed to design the website with my brand. In addition, I learned more front-end and back-end, functional and non-functional requirements.
I have scheduled a test to determine speed and use it to review your website functionality. Performed Student: Tran Thien Thach 38 REFERENCES 1.vn/web-server-la- gi.html#:~:text=Web%20server%20c%C3%B3%20ngh%C4%A9a%20l%C3%A0,%C4 %91%C6%B0%E1%BB%A3c%20giao%20quy%E1%BB%81n%20qu%E1%BA%A3n%20 l%C3%BD.&text=Ph%E1%BA%A7n%20c%E1%BB%A9ng%3A%20M%C3%A1y%20ch %E1%BB%A7%20web,thi%E1%BA%BFt%20b%E1%BB%8B%20c%E1%BB%A7a%20E nd%2Duser.com/reactjs-la-gi-184174 4.com/blog/hoc-nodejs/ 5.com/backend-developer/ Performed Student: Tran Thien Thach 39