Download ASM 2-1633-Website Design and Development and more Assignments Web Design and Development in PDF only on Docsity!
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date Thurday, November 5, 2020 Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name TRAN MINH QUAN Student ID GCS190 902 Class GCS0805 Assessor name Tran Thi My Trang 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 QUAN Grading grid
Academic Year 2018 – 2019 Unit Tutor Issue date Submission date IV name and date Submission Format: Format:
- A report document including some sections
- Section 1: A review of appreciate web design principles, standards and guidelines.
- Section 2: Design document for online shopping website.
- Section 3: Implementation of website design.
- Section 4: Test plan and test evaluation.
- A compressed file that encapsulates all source code and particular necessary resources including files of images, style sheets, java script and other files to support to install multipage website such as sql script and installation guide. Submission Students are compulsory to submit the assignment in due date and in a way requested by the Tutors. The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/ Note: The Assignment must be your own work, and not copied by or from another student or from books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you must reference your sources, using the Harvard style. Make sure that you know how to reference properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed Unit Learning Outcomes:
LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage website. LO4 Create and use a Test Plan to review the performance and design of a multipage website. Assignment Brief and Guidance: You work as a full-stack web team leader for a leading creative web solutions and marketing company. Your team is about to have a big contract to develop an online shopping mall. In order to finish your work effectively you need to review all appropriate principles, standards and guidelines for website designing and development, evaluate all technical challenges to produce a good design document for the online shopping website with wireframes, functional illustrations and a full set of client and user requirements. Then, you lead your team to utilize web design and development technologies, tools and techniques to implement your web design to develop the online shopping website. To get good result, you always ask your team for following your design document by comparison between created multipage website with your design document and evaluation. As your role, to ensure that the multipage website for online shopping developed by your team is a high quality product, you also need to ask your team members to follow quality assurance process and implement it during your design and development stages by creating a suitable test plan. The test phase should be seriously implemented by reviewing and analysing all test results to evaluate applied quality assurance process and point out suggestions of improvements for online shopping website
Table of content
- P5 P6 P7 M4 M5 D2 D
- full set of client and user requirements. P5: Create a design document for a branded, multipage website supported with medium fidelity wireframes and a
- 1/ Create design document
- Client and user requirement analysis:...................................................................................................................
- Use Case diagram:
- Database Diagram:
- Site map:..................................................................................................................................................................
- Wire frames and specific explanation
- The advantages and disadvantages of Wireframe
- P6: Functional screen shot after implementation.......................................................................................................
- User:
- Admin:
- performance of your website. User Experience (UX) and User Interface (UI). P7: Create a suitable Test Plan identifying key performance areas and use it to review the functionality and
- REFERENCE
- Figure 1: Use case diagram for website system Table of figures
- Figure 2: Database diagram for website system
- Figure 3: Site map for website
- Figure 4: Home page
- Figure 5: Products page
- Figure 6: Products detail page
- Figure 7: News page
- Figure 8: Home page of website..................................................................................................................................
- Figure 9: Product page of website
- Figure 10: Product detail page
- Figure 11: Admin page
- Figure 12: Insert Category
- Figure 13: Edit category...............................................................................................................................................
- Figure 14: Delate cateory
- Figure 15: Admin Category for Apple store website
- Figure 16: Insert Product
- Figure 17: Edit Product
- Figure 18: Delete product 14th
- Figure 19: Delete product
- Figure 20: Admin product for Apple store website
Figure 1 : Use case diagram for website system Store manager : Having the function of managing and decentralizing products and employees, can change the titles of products or employees as needed. Employees can manage product names, invoicing to customers and log into the system to work. Customers can login to save personal information and order product details.
Database Diagram:
Figure 2 : Database diagram for website system
Site map:
Sitemap (map system of a website) is a text file containing all the URLs of the website, detail the system of links leading to the main page and the sub-page which are clearly shown. In addition, your sitemap can also provide valuable metadata associated with the websites you list in that site's sitemap. It provides information, such as when the page was last updated, how often the website was changed or how important the pages are compared to other links within the site. The whole main job of the Sitemap is to help guide the search engines and search engines to access and collect information of the website effectively and easily, for more accurate website evaluation.
Cons: Since wireframes do not include any design or technical requirements, it is not always easy for a customer to grasp the concept/term. Web designers will also have to translate the wireframes into a design. In addition, there is a need for coordination between designers and copywriters when working with website content accordingly. Figure 4 : Home page This is the Home page wireframe. The top section displays the Apple store logo and functions such as home to return to the homepage, product to choose products, and new to read the news. The middle part of the page displays mainly the product categories of the store for users to reference and the bottom of the page is the contact information of the store for customers to contact.
Figure 5 : Products page This is the wireframe of the Products page. The header and footer are the same as the Homepage. The body designed for product display includes product photos and names categorized by product type. On this page, users can only see the same product categories, not like the homepage. Therefore, users can choose in advance the type of product they like to filter. Figure 6 : Products detail page
P6: Functional screen shot after implementation
User :
- Screenshot of the functionality of the website user:
Figure 8 : Home page of website
On the product page, users can choose the type of product they like (iPhone, iPad, MacBook), which will display the corresponding product, users can order there. Figure 10 : Product detail page When users want to view product information, they can choose to enter the price to enter the product details page including product name, price and description and can order.
Admin:
Admin page (View link list to navigate) Figure 11 : Admin page
The admin page imports data into the website, including the product and category pages for data entry. When the admin clicks on the Category, the admin will go to the website to view the imported categories. When the admin clicks on the Product, the admin will go to the website to view the imported products. Category (Insert-Update-Delete-Edit) Category interface has the function for admin to enter the information of the types of products you want to enter for the website, only admin can enter data. Corresponding to each type of product, there will be suitable products. Figure 12 : Insert Category Figure 13 : Edit category
