This exercise scores Distinction in Web programming. This exercise demonstrates how to program an ecommerce website in PHP, using tools such as html, css, js, boostrap. There is full authorization and exception handling.
ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date 23/04/2023 Date Received 1st submission Re-submission Date 23/04/2023 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 Page of 162 D2 D3 Summative Feedback: Resubmission Feedback: 2.1 2.2 Grade: Signature & Date: 2.3 2.4 Assessor Signature: Date: Page of 162 Table of Contents I Introduction 14 II Design plan (P5) 14 Project website introduce 14 User’s requirements by using User Story 14 2.1 As an admininstrator 15 2.2 As a customer 15 Review accessibility standards and guilines for website 16 3.1 Principles of website design 16 3.2 Guidelines for web design 17 Mechnism diagrams 18 4.1 Flow diagram 18 4.2 Admin use-case diagram 19 4.3 Customer use-case diagram 19 4.4 Entity relational diagram 20 Wireframes 22 5.1 Interface Admin 22 5.1.1 Manage User 22 5.1.2 Add/ edit user account 23 5.1.3 Manage Categories 24 5.1.4 Manage Product 25 5.1.5 Add/ edit Product 26 5.1.6 Manage Order 27 Page of 162 5.1.7 Order Detail 28 5.1.8 Manage Feedback 29 5.2 Interface User 30 5.2.1 Register and Login 30 5.2.2 Profile 31 5.2.3 Home 32 5.2.4 Categories 33 5.2.5 Deatail Product 34 5.2.6 Cart 35 5.2.7 Checkout 36 5.2.8 Complete 37 5.2.9 Contact 37 Sitemap 38 III Implementation (P6-M4) 39 Screenshots of Final and source code Samples of the Website 39 1.1 Interface Admin 40 1.1.1 Template admin 40 1.1.2 User management 41 1.1.3 Add/ edit user account page 44 1.1.4 Categories management page 47 1.1.5 Product management page 50 1.1.6 Add/ edit product management page 52 1.1.7 Order management page 55 Page of 162 1.1.8 Order detail page 57 1.1.9 Feedback management page 59 1.2 Interface User 61 1.2.1 Header and footer interface user page 61 1.2.2 Home user page 64 1.2.3 Register and Login page 66 1.2.4 Profile page 69 1.2.5 Categories page 71 1.2.6 Detail product page 73 1.2.7 Cart page 76 1.2.8 Check out page 77 1.2.9 Complete page 80 1.2.10 Contact page 81 Responsive 83 Compare and contrast the multipage website to the design document (M4) 91 3.1 Admin 91 3.1.1 Users 91 3.1.2 Categories 93 3.1.3 Products 94 3.1.4 Orders and order detail 95 3.1.5 Feedbacks 97 3.2 3.2.1 User 97 Login and Register 97 Page of 162 IV 3.2.2 Home 98 3.2.3 Profile 100 3.2.4 Categories 100 3.2.5 Deatil Product 101 3.2.6 Cart and check out 103 3.2.7 Complete and contact 104 Critically evaluate the design and development process against your design document and analyse any technical challenges (D2) 105 Evaluation the design document 105 Evaluation the process of development 106 2.1 UX 106 2.2 UI & simplistic design 106 2.3 Performance and speed 107 2.4 Scalability 107 Evaluating the quality of website 107 The technical challenges/ difficulties in web development 108 V Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website User Experience (UX) and User Interface (UI) (P7) 109 Test plan 109 Testing and result 110 Overall evaluation of testing part and solution 130 VI Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages (M5) 137 Quanlity assurance 137 1.1 Definition 137 Page of 162 1.2 Importance of quality assurance 137 My website’s quanlity assurance 137 2.1 Design 137 2.2 Images 139 2.3 Content 140 2.4 Website responsiveness 141 2.5 Browser test 143 2.5.1 Display on browser 143 2.5.2 Performance 146 2.6 Privacy policy 148 VII 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 (D3) 150 Tools 150 Evaluate the web 151 2.1 Front-end 151 2.2 Back-end 153 Advantages and disadvantages 153 3.1 Advantages 153 3.2 Disadvantages 154 Improvements 154 VIII Conclusion 162 IX References 162 Page 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.php (Admin) 40 Figure 26: File footer.php (admin) 41 Page 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 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 of navbar in my project 83 Page 10 of 162