Đang tải... (xem toàn văn)
Điểm của bài asm còn tùy thuộc vào người chấm. Chỉ cần paraphase bài này là có thể pass. 1 trong nhưng tool paraphase mình recommend là quillbot.The submission is in the form of 1 document.● You must use the Times font with 12pt size, turn on page numbering; set line spacing to 1.3 andmargins to be as follows: left = 1.25cm, right = 1cm, top = 1cm, bottom = 1cm. Citation andreferences must follow the Harvard referencing style. ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title Unit 2: Networking Infrastructure Submission date Date Received 1st submission Resubmission Date Date Received 2nd submission Student Name Student ID Class Assessor name 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 P1 P2 P3 P4 M1 M2 D1 ❒ Summative Feedback: Grade: Lecturer Signature: ❒ Resubmission Feedback: Assessor Signature: Date: Table of Contents I Network Network definiton Ξ First of all, network also known as computer networking, which can be understand as a group of computers utilizing a principles of general communication protocols over digital connections for the intention of sharing resources located upon or accommodated by network nodes ... https:www.dnsstuff.comdatabreach 10 1 Dobran, B., 2 019 Information Security Risk Management: Build a Strong Program Online Available at: https:phoenixnap.combloginformation security riskmanagement garg, r., 20 21 Threats... List and give examples with dates 12 Propose a method to assess and treat IT security risks (M1) 18 TASK DESCRIBE AT LEAST ORGANIZATIONAL SECURITY PROCEDURES (P2) .20 Definition... Dan Swinhoe, 20 21 The 15 biggest data breaches of the 21st century, s.l.: s.n Ohri, A., 20 21 What Is DMZ Network Online Available at: https:www.jigsawacademy.comblogscyber security whatisdmz
GROUP PROJECT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title WEBG301 - Project Web Submission date Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Nguyen Huy Hoang Student ID Class GCH0908 Assessor name GCH200739 Nguyen Dinh Tran Long Student declaration I certify that the assignment submission is entirely my work and I fully understand the consequences of plagiarism I understand that making a false declaration is a form of malpractice Student’s signature Grade Hoang` ❒ Summative Feedback: Grade: Signature & Date: ❒ Resubmission Feedback: Assessor Signature: Date: Table of Contents CHAPTER – USERS’ REQUIREMENTS I User Stories Template II Use case diagram Customer use-case diagram Admin Use-case diagram: CHAPTER – SYSTEM DESIGN I Site Map: II Entity Relational Diagram 10 III Wireframes 11 Homepage wireframe: 11 Product detail wireframe 12 Product List wireframe 13 Shopping cart wireframe 14 Profile wireframe: Customer can view their profile, full name, email, contact link and other information 14 Login Wireframe 15 Register Wireframe 16 Admin view 17 OrderSite Wireframe 18 CHAPTER – SYSTEM IMPLEMENTATION 19 I Source Code 19 Introduce about MVC design pattern in Symfony 19 MVC pattern overview in Symfony(my project) 19 II Web Screenshots 32 CHAPTER - CONCLUSION (INDIVIDUAL) 46 I Advantages of website 46 II Disadvantages of Website 46 III Lesson Learnt 46 IV Future Improvement 47 APPENDIX: 47 References 47 TABLE OF FIGURES Figure 1: Usecase diagram Customer Figure 2: Admin Use-case diagram Figure 3: Site map image Figure 4: Adminsite sitemap Figure 5: ERD image 10 Figure 6: Homepage wireframe 11 Figure 7: Product Detail wireframe 12 Figure 8: Product list wireframe 13 Figure 9: Shopping cart Wireframe 14 Figure 10: Profile wireframe 14 Figure 11: Login Wireframe 15 Figure 12: Register Wireframe 16 Figure 13: Admin view 17 Figure 14: OrderSite Wireframe 18 Figure 15: Project Structure 19 Figure 16: Entity folder 20 Figure 17: env file source code 20 Figure 18: doctrine.yaml source code 21 Figure 19: Order Entity source code 22 Figure 20: Detail Entity source code 22 Figure 21: Migrations folder and migration file 23 Figure 22:Example of Repository Source code 23 Figure 23: Controller folder 24 Figure 24: Example of controller class in my project 24 Figure 25: annotation.yaml 25 Figure 26: Cart Controller source code 25 Figure 27: Order Controller 28 Figure 28: base.html.twig file 30 Figure 29: cart template source code 30 Figure 30: Select Delivery function 31 Figure 31: Products page 35 Figure 32: Product details page 36 Figure 33: Category page 37 Figure 34: brand page 38 Figure 35: Delivery Page 39 Figure 36: Supplier Page 40 Figure 37: User page 41 Figure 38: Cart Page 42 Figure 39: Add product page 43 Figure 40: Order Page 44 Figure 41: Order Detail page 45 CHAPTER – USERS’ REQUIREMENTS I User Stories Template User story No As a/an Customer Customer Customer Customer Customer Customer 10 11 12 Customer Customer Customer Customer Customer Customer 13 14 15 16 17 18 19 20 21 Customer Customer Admin Admin Admin Admin Manager Admin Customer I want to View all products in the store Search product in the store View product image Click on the product image to show all of its information View all categories in the store View all products have the same category in the store View all brands in the store View a brand’s product in the store View brand’s supplier Add products to the cart Manage products in the cart Preview my order Review all my orders Have an account online Manage all product Manage all category Manage all brand Manage all supplier View and take order Manage delivery Choose which delivery will ship my order so that I can Find the product I want Find the product I want Find product more convenient Know all the information about the product I care about Know what types of products they have in the store Compare products Buy from the one I trust Buy from their product Know where it came from Manage products that I need or want to buy Confirm what I am going to buy Confirm my order and know the information about the order View what I have purchased in the past Save my orders and my information Add new products or modify an old one Add a new category or modify the old one Add new or modify an old one Add new or modify an old one Decide to take order or refuse Add new or modify an old one Get my order as soon as possible II Use case diagram Customer use-case diagram Figure 1: Usecase diagram Customer Explanation: Customers before login into the web can only view products, categories, and brands in the store They can search a product, sort product by category, brand and view the product detail Customers can register for a new account Customers can know more about the store or get help by clicking links at the end of the website After login, the customer now can add products to the cart, they can manage their shopping cart, choose delivery and place or cancel the order Customers can log out or view their profiles Admin Use-case diagram: Figure 2: Admin Use-case diagram Explanation: Admin can log in by admin account to the admin site After login, Admin can manage all products, categories, brands, suppliers, delivery Admin can delete, add new, modify all information Admin can receive orders from the customer Admin can log out or view their profile CHAPTER – SYSTEM DESIGN I Site Map: Figure 3: Site map image Explanation: On the home page, the user can go to the login page to login into the website If users don’t have an account, they can go to the register page and register a new account On the home page, the user can see all products or sort products by category or brand Users can also view product detail by clicking on the product Users can add a product to their shopping cart They can preview their order and choose a delivery to ship their orders At the end of the website, users can find support links or links to our bog and information Figure 4: Adminsite sitemap Explanation: After login to the admin site, the user can choose to modify product, category, brand, delivery, and supplier User can view their profile by clicking the link in the navigation bar II Entity Relational Diagram Figure 5: ERD image Description: This ERD includes primary entities: Product Entity and its fields: ID, Name, Image, Description, Price, Date, Quantity, Category, Brand Category Entity and its fields: ID, Name, Description, Products Brand Entity and its fields: ID, Name, Image, Description, Products, Suppliers Supplier Entity and its fields: ID, Name, Image, Description, Brands Delivery Entity and its fields: ID, Name, Image, Description, Order User Entity and its fields: ID, User name, Password, Roles Order Entity and its fields: ID, Date, Delivery, Detail, User name Detail(Order detail) Entity and its fields: ID, Product ID, Product Name, Price, Quantity, Order ID Explanation: A supplier can have none or more than one brand in the store Brand must have one or many suppliers One brand can have many products but one product can only have one brand One product can only have one category but one category can contain many products A product can appear in many orders detail but one order detail can only contain one product Order can have many orders detail but order detail can only have one order A delivery can deliver many orders but one order can only deliver by one delivery Description: This page has been designed in form of a basic Long-scrolling Landing Page, with the fixed navigation bar always stick on top In the navigation bar have some redirected navigation links(which will change when login with different account’s role), beside are search box, cart button(click on to get in cart page), and login button(after login will switch into logout) The header of the home page is the slider(carousel changing texts and button) Below is the Top-offers product(show the top price products) section designed quite similar to the grid table In each product’s card showing brief information of product(name, price, assess, ) After the Top-offers is the panel which commonly used to show the advertisements followed by a blog and about us section, next is the “popular of this year” section which shows the popular and carecatching product in this year After all, the footer is shown at the bottom of the web, which shows some information about us and copyright Shop all products page Figure 31: Products page Description: Products page also has navigation and footer Products list section has been designed quite similar to the grid table view, in each product card also has some brief information including name, price and a button to add this product to the cart Above the products list section has a dropdown button which can be used to sort the order of products in the products list Product detail page Figure 32: Product details page Description: Product detail page also has navigation and footer The detailed card has been divided into two sites located in a row One site show a product image and the other site show all information about the product(name, quantity, Date, description, price and also has a button to buy) Category Page Figure 33: Category page Description: This page can only show when login with admin account Category page also has navigation(navigation has been changed because of admin role) and footer The category list has been designed in form of a table In column menu shows two-button(one for deleting this category and one for edit) Products column lists the products of this category To add more categories, click on the button with the icon “plus” Beside the add button is the search box(which perform the searching category by its name) Brand Page Figure 34: brand page Description: This page can only show when login with admin account Brand page also has navigation(navigation has been changed because of admin role) and footer The Brand list has been designed in form of a table In column menu shows two-button(one for deleting this Brand and one for edit) To add more Brands, click on the button “add brand” Beside the add button is the search box(which perform the searching Brand by its name) Delivery Page: Figure 35: Delivery Page Description: This page can only show when login with admin account Delivery page also has navigation(navigation has been changed because of admin role) and footer The Delivery list has been designed in form of a table In column menu shows two-button(one for deleting this Delivery and one for edit) To add more Deliveries, click on the button “add Delivery ” Beside the add button is the search box(which perform the searching Delivery by its name) Supplier Page: Figure 36: Supplier Page Description: This page can only show when login with admin account Supplier page also has navigation(navigation has been changed because of admin role) and footer The Supplier list has been designed in form of a table In column menu shows two-button(one for deleting this Supplier and one for edit) To add more Suppliers, click on the button “add Supplier ” Beside the add button is the search box(which perform the searching Supplier by its name) User page: Figure 37: User page Description: This page can only show when login with any account This page also has navigation and footer This page shows only one card which contains full information of an user(name, email, gender and contact) Cart page Figure 38: Cart Page Description: This page can only access when login with the user account However, the Cart page doesn’t have navigation and footer(graphic interface minimalisation) This page has two statuses When the cart is empty, it will show the panel notify that the cart is empty And when the cart has products and their quantity, the cart section will be divided into two sites on a row, a site shows information in cart(each row for each product and its quantity which can be adjusted or removed) one site to show the total price, delivery option and button to order all products in this cart Two sites also have a back shop button Add-Edit product pages Figure 39: Add product page Description: These pages can only access when login with the admin account Add-edit product page also has navigation(navigation has been changed because of admin role) and footer These pages actually are the forms, which has all fields(each field corresponds to each property of product entity) All fields of this form has been validated This also has the field to upload images directly from computer, Date selection in form of widget, category selection is in form of radio button, Brand Selection is in form of combo box To add or edit this product, click on the button “submit” This form also represents for all add-edit form page in our website Order Page Figure 40: Order Page Description: Order Page can only access when login with the manager account Order page also has navigation(navigation has been changed because of admin role) and footer The Order list has been designed in form of a table In column menu shows a button(for canceling this Order) Clink on the number(order id) to view detail of this order Delivery can be viewed by clicking on name of this delivery in column delivery There also is the button dropdown permit sort the order of order list Below is the card which calculate and show the revenue Statistic of shop Manager can filter the revenue based on date time(each day profits) or based on User(each user profits) Order Detail Page Figure 41: Order Detail page Description: Detail Page can only access when login with the manager account Detail page also does’t have navigation but has footer The Detail list has been designed in form of a table In column, menu shows a button(for cancelling this Detail) The product can be viewed by clicking on the name of this Product in the column Product name Below calculation which shows the total price of this order Login/ register form page Description: Two forms above have been designed quite similar to each other This form has the username and password field, check box and one button to login or register CHAPTER - CONCLUSION (INDIVIDUAL) I Advantages of website ☺ The website's operations are generally logical, consistent, and comprehensive The components of the page are not redundant, and they all work in tandem Minimalised design but also provide an eye-catching design Web responsive also is good ☺ Their function and significance From customer interface to user experience ☺ Website Pages all provide an excellent user experience, including database processing The site pages are arranged in a logical order ☺ The content on the website is completely focused on the fundamental objective of the page, with no frills or distractions ☺ The user interface is nearly never malfunctions or crashes due to any flaws ☺ The security(authentication and authorization) has been designed pretty good ☺ The navigation on this page is well-designed There are no stuck pages, and all of the pages are in the exact order ☺ Controller operates pretty well Call controller actions via router are hardly getting errors Additionally, it is feasible to reroute the same content group It's possible to redirect to another page ☺ No webpage has been broken, no webpage has been unstructured, and no data from the model has been misplaced Ascertain that users obtain accurate data II Disadvantages of Website The validation of the system is not really good Some web pages have been designed obsolete and sparing The loading speed of the website is really slow Some website functions(searching for products-category-brand, adjusting the number in cart) that are not optimized may create a bad user experience Lack of functional option for users, The website is still quite sketchy in providing users with features, smart filters as well sorting functions by many different criteria III Lesson Learnt After this course and after completing the design of this website with my team, I have learned some basic web design foundation with Symfony framework: How to create a basic CRUD website using Symfony framework Learnt how to handle and create the View(graphic interface) with twig template language engine Learnt some basic theory of MVC Design Pattern and its concept Learnt how to apply it to a small project Learnt partly how to use git and GitHub to work and share code with other members of my team Learnt how to use Postman to handle some basic HTTP methods (POST, GET, PUT) with API and serialize the data from Symfony to it IV Future Improvement In the future, to be more competent with coding back-end and front-end, I want to learn how to implement API and consume it with JavaScript Improve the code with the MVC pattern(optimizing it) APPENDIX: A1 Group member list + role No Member ID GCH210206 Name Nguyen Quang Huy GCH200739 Nguyen Huy Hoang GCH200767 Tran Quang Khai Roles Make Controller, templates for product, category and create Security(authentication and authorization) for the web Merge code from GitHub Make controller, templates, a repository for cart, order, order detail Co-Design home page, layout of the website Partly provide one wireframe + explanation Make controller, templates, form of brand, supplier and delivery Prepare report: draw and give detailed explanation/description for wireframe, sitemap, use case, ERD Write user story A2 Link to code on GitHub https://github.com/NguyenQuangHuy282002/DemoWeb References Docs, S., n.d Symfony Docs [Online] Available at: https://www.doctrine-project.org/projects/doctrine-dbal/en/current/reference/configuration.html Jobeet, n.d The Data Model [Online] Available at: https://symfony.com/legacy/doc/jobeet/1_4/en/03?orm=Doctrine programmingdive, 2020 programmingdive [Online] Available at: https://programmingdive.com/understanding-mvc-design-pattern-in-php/