ASSIGNMENT 2 FRONT SHEET Qualification BTEC Level 5 HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date 23/04/2023 Date Received 1st submission 23/04/2023 Re-submission Date Date Received 2nd submission Student Name Tran Duc Long Student ID GCH210562 Class GCH1106 Assessor name Lai Manh Dung 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 Page 1 of 162 Summative Feedback: Resubmission Feedback: 2.4 Grade: Assessor Signature: Date: Signature & Date: Page 2 of 162 Table of Contents I. Project website introduce.
User’s requirements by using User Story. As an admininstrator. Review accessibility standards and guilines for website. Principles of website design.
Guidelines for web design. Admin use-case diagram. Customer use-case diagram. Entity relational diagram.
Add/ edit user account. Add/ edit Product. Register and Login. Screenshots of Final and source code Samples of the Website.
Add/ edit user account page. Categories management page. Product management page. Add/ edit product management page.
Order management page. Order detail page. Feedback management page. Header and footer interface user page.
Home user page. Register and Login page. Detail product page. Check out page.
Compare and contrast the multipage website to the design document (M4). Orders and order detail. Login and Register. Cart and check out.
Complete and contact. Critically evaluate the design and development process against your design document and analyse any technical challenges. Evaluation the design document. Evaluation the process of development .2 UI & simplistic design .3 Performance and speed.
Evaluating the quality of website. The technical challenges/ difficulties in web development. Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website. Testing and result.
Overall evaluation of testing part and solution. Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages. Importance of quality assurance. My website’s quanlity assurance.
Display on browser. Critically evaluate the results of your Test Plan and include a review of the overall success of your multipage website; use this evaluation to explain any areas of success and provide justified recommendations for areas that require improvement. Evaluate the web. Advantages and disadvantages.
162 Page 7 of 162 Table of Figure Figure 1: User story. 15 Figure 2: Flow diagram. 18 Figure 3: Use-case of page admin. 19 Figure 4: Use-case of page customer.
20 Figure 5: ER diagram of my website. 21 Figure 6: Page user mangement. 23 Figure 7: Page add/ edit user. 24 Figure 8: Page categories management.
25 Figure 9: Page product management. 26 Figure 10: Page add/ edit product. 27 Figure 11: Page order management. 28 Figure 12: Page orderDetail.
29 Figure 13: Page feedback management. 30 Figure 14: Page register and login. 31 Figure 15: Page profile. 32 Figure 16: Home Page.
33 Figure 17: Page Categories. 34 Figure 18: Page detail product. 35 Figure 19: Page cart. 36 Figure 20: Page checkout.
36 Figure 21: Page complete. 37 Figure 22: Page contact. 37 Figure 23: Site map for admin page. 38 Figure 24: Site map of my website.
39 Figure 25: File header. 40 Figure 26: File footer. 41 Page 8 of 162 Figure 27: Template admin. 41 Figure 28: Show data in user page.
42 Figure 29: User management page. 43 Figure 30: Code action delete user account. 43 Figure 31: Action delete user account. 44 Figure 32: Code add/ edit user page.
45 Figure 33: Code action add/ edit account user. 47 Figure 34: Foreach to show data in category. 48 Figure 35: Category page. 48 Figure 36: Code add/ edit category.
49 Figure 37: Action delete category. 49 Figure 38: Delete data in category page. 50 Figure 39: Code product management page. 50 Figure 40: Interface product management page.
51 Figure 41: Code action delete product. 51 Figure 42: Delete product in product management. 52 Figure 43: Code add/ edit product page. 53 Figure 44: Add/ edit product page.
54 Figure 45: Code action add/ edit product. 55 Figure 46: Code order management page. 56 Figure 47: Action update_status order. 57 Figure 48: Order management page.
57 Figure 49: Code order detail page. 58 Figure 50: Order detail page. 59 Figure 51: Code feedback management page. 60 Figure 52: Action MarkRead and delete feedback.
60 Figure 53: Feedback management page. 61 Figure 54: Code header of customer interface. 62 Figure 55: Header of customer interface. 62 Figure 56: Code footer of customer interface.
63 Page 9 of 162 Figure 57: Footer of customer interface. 63 Figure 58: Code home page interface customer. 64 Figure 59: Home page interface. 65 Figure 60: Code form login and register.
66 Figure 61: Function validate and process create account. 67 Figure 62: Process login account. 68 Figure 63: Register account. 68 Figure 64: Form login account.
69 Figure 65: Code profile page. 70 Figure 66: Jquery validate form and result. 70 Figure 67: Profile page. 71 Figure 68: Code category page customer.
72 Figure 69: Example products monile in categories mobile. 72 Figure 70: Code deatil page. 73 Figure 71: Event addMoreCart jquery. 74 Figure 72: Action add to cart.
74 Figure 73: Detail product page. 75 Figure 74: Code cart page. 76 Figure 75: Form process update cart. 77 Figure 76: Cart page.
77 Figure 77: Code check out page. 78 Figure 78: Process pay bill and cancel data cart. 79 Figure 79: Check out page. 79 Figure 80: Cart after paying bill.
80 Figure 81: Code complete page. 80 Figure 82: Complete checkout. 81 Figure 83: Code contact page. 82 Figure 84: Action send feedback.
82 Figure 85: Contact page. 83 Figure 86: Boostrap 4 of navbar in my project. 83 Page 10 of 162 Figure 87: Header in screen PC. 84 Figure 88: Header in screen tablet.
85 Figure 89: Header in screen iPhone 12 Pro. 86 Figure 90: Boostrap 4 in category part. 87 Figure 91: Category laptop in Screen PC. 87 Figure 92: Category laptop in screen tablet.
88 Figure 93: Category laptop in screen iPhone 12 Pro. 89 Figure 94: Boostrap 4 in footer. 90 Figure 95: Footer in screen PC. 90 Figure 96: Footer in screen tablet.
91 Figure 97: Footer in screen iPhone 12 Pro. 91 Figure 98: User mangement real and wireframe. 92 Figure 99: Add/ edit user account real and wireframe. 92 Figure 100: Categories management real and wireframe.
93 Figure 101: Product management real and wireframe. 94 Figure 102: Add/ edit product real and wireframe. 95 Figure 103: Order management real and wireframe. 96 Figure 104: Detail orders real and wireframe.
96 Figure 105: Feedback mangement real and wireframe. 97 Figure 106: Login page real and wireframe. 98 Figure 107: Register page and wireframe. 98 Figure 108: Home page and wireframe.
99 Figure 109: Profile page and wireframe. 100 Figure 110: Category page and wireframe. 101 Figure 111: Product detail page and wireframe. 102 Figure 112: Cart page and wireframe.
103 Figure 113: Check out page and wireframe. 104 Figure 115: Contact page and wireframe. 105 Figure 116: Code process searching in order management page. 131 Figure 117: Before test.
131 Page 11 of 162 Figure 118: After test. 132 Figure 119: After test again case 34. 133 Figure 120: After test again case 38. 133 Figure 121: Fix bug in category page.
134 Figure 122: Add condition for product page. 134 Figure 123: Before testing. 135 Figure 124: After testing. 135 Figure 125: Function msgLove.
136 Figure 126: Notification add to love. 136 Figure 127: Wireframe and real page. 138 Figure 128: Css transition in my website. 139 Figure 129: Example about Images in my website.
140 Figure 130: Example about image content in my website. 141 Figure 131: Display on PC (size: 1447x571). 142 Figure 132: Display iPhone 12 Pro (size: 390x844) and iPad Air (size: 820x1180). 143 Figure 133: Test performance on chorme.
147 Figure 134: Test performance on microsoft edge. 148 Figure 136: function getSecurity MD5. 149 Figure 137: Use MD5 in process create and login account. 149 Figure 138: Password encrypted with md5.
149 Figure 139: History on website in systerm. 150 Figure 140: Wireframe follow standard 12-column grid. 151 Figure 141: Notifications used by javascipts. 152 Figure 142: Summernote edit.
152 Figure 143: Choose method payment. 155 Figure 144: Payment by credit card. 156 Figure 145: Form login in the future. 157 Figure 146: Update avatar profile in the future.
158 Figure 147: Message box in website. 159 Figure 148: Chat box of website in the future. 160 Page 12 of 162 Figure 149: Detail product page in the future. Introduction We live in a modern society where everything is modern and innovative.
Every day, there is a lot of innovation, especially in technology. When it comes to technology, we must admit that it has permeated every aspect of our lives, from simple devices such as phones and computers to complex programming applications. Currently, digital transformation technology is gaining popular in a variety of disciplines, particularly e-commerce system. While offline stores are progressively becoming outdated, online shops are an excellent solution for developing this model.
In this exercise, I will present the design rules and process of building a fullstack sales website in terms of technology, specifically how I designed it and applied the design principles, explaining in detail about its functions and characteristics, and finally evaluate the functions and design. In the design of my website, there are two main interfaces, admin and customers, and I have authorized for them so that customers can go to the website to purchase and the administrator can receive data about orders as well as perform other tasks. functions like add, edit, delete. Project website introduce LONGTECH Shop is an e-commerce online store that buys and sells technology-related products like as computers, phones, televisions, and so on.
All of these items are available on the internet. Customers can simply observe and search what they are looking for on the website's main page. This shopping website was created to display technology-related service categories. By clicking on this product, you can see specific information about the product name, total amount and price, as well as detailed remarks about it.
The website will be designed for a variety of Common Platforms using a variety of website development technologies such as HTML5, CSS, JavaScript, and PHP. The website is compatible with all major web browsers, including Google Chrome, Firefox, and Microsoft Edge. Also appropriate for most responsive screen sizes such as laptops, televisions, and tablets. User’s requirements by using User Story Page 14 of 162 Figure 1: User story A User Story is a need presented through the eyes of an end-user.
A User Story is nothing more than a clearly defined requirement. An established technology firm required a website that could showcase items in order to promote their products and accept online orders.