1633-Assignment2.Pdf

Higher Nationals in Computing Unit 10: Website Design and Development ASSIGNMENT Learner’s name: PhamNguyenQuynhNhu ID:GCS210018 Class: GCS1005A Subject code: 1633 Assessor name: PHAN MINH TAM Assignment due: Assignment submitted: ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Pham Nguyen Quynh Nhu Student ID GCS210018 Class GCS1005A Assessor name TamPM 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 ❒ Summative Feedback: Grade: Signature & Date: ❒ Resubmission Feedback: Assessor Signature: Date: Assignment Brief (RQF) Higher National Certificate/Diploma in Computing Student Name/ID Number: Pham Nguyen Quynh Nhu/ GCS210018 Unit Number and Title: Unit 10: Website Design & Development Academic Year: 2021 – 2022 Unit Assessor: Phan Minh Tam Assignment Title: Website Design and Implementation Issue Date: 21 March 2022 Submission Date: Internal Verifier Name: Date: Submission Format: Format: A report document including below sections o Section 1: A review of appreciate web design principles, standards and guidelines o Section 2: Design document for online shopping website o Section 3: Implementation of website design o 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 Tutor The form of submission will be a soft copy posted on http://cms.greenwich.edu.vn/ Remember to convert the word file into PDF file before the submission on CMS Note:    The individual Assignment must be your own work, and not copied by or from another student 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 understand and follow the guidelines to avoid plagiarism Failure to comply this requirement will result in a failed assignment 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 Page |1 Assignment Brief and Guidance: Assignment scenario You currently work for a software training company that produces courses and topic presentations to established companies and, importantly, to new start-ups MWS wishes to pursue a bespoke web-based e-commerce solution MWS were impressed with your presentations and wishes to continue with the design and development of an ecommerce website A sister company develops web solutions and you have been tasked with taking the lead on the MWS solution you outlined previously You are now required to design and create an interactive website with the emphasis being on the production of a set of simple dynamic web pages, which embody good design principles The site will be themed around a template which would be most appropriate to MWS, with placeholders for text and content Images and icons will be used, to give MWS a feel for the proposed website design You will also include a membership area, where users can register to have access to restricted areas You will base on MWS-CaseStudy.docx for more information Page |2 Learning Outcomes and Assessment Criteria (Assignment 2): Learning Outcome Pass Merit Distinction LO3 P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user requirements M4 Compare and contrast the multipage website created to the design document D2 Critically evaluate the design and development process against your design document and analyse any technical challenges M5 Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages D3 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 P6 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content LO4 P7 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) recommendations for areas that require improvement Page |3 Table of Content Unit 10: Website Design and DevelopmentASSIGNMENT Assignment Brief (RQF) Higher National Certificate/Diploma in Computing ASSIGNMENT ANSWERS .7 A - Create a design document for a branded, multi-page website supported with medium fidelity wire-frames and a full set of client and user requirements (P5) Client and user requirement analysis Use case diagram a Admin use case diagram b Customer use case diagram .7 Design database diagram a Logical diagram .8 b Physical diagram Table: Login Table: Customer Table: Staff Table: Product 10 Table: Category 10 Table: Admin 10 Design website wireframes 10 a Home-page wire frames 10 b Details wireframes 11 c Register wireframes 11 d Login wireframes 12 e Admin wireframes 12 f Contact wireframes 13 Site map 14 a Customer site map 14 b Admin site map 14 B - Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content.(P6) 14 Font-end and back-end technologies applied in the website 14 a Tool 15 b Techniques 15 Function screen shot of multipage website 15 a Homepage layout 15 b List of product layout 16 c Register layout 17 d Login layout 17 e Contact page 18 f Admin layout 19 Source code of function in multipage website and explanation 19 a Source code of homepage layout and explanation 19 b Source code of list of product layout and explanation 21 c Source code of register layout and explanation 23 d Source code of login layout and explanation 23 e Source code of contact layout and explanation 24 f Source code of admin layout and explanation 25 Include some screenshots related to error handling 26 a Login admin 26 b Delete product 26 Screenshot some source code of back-end 26 a Create table 26 b Insert data 27 C - 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) 28 Page |4 Test plan 28 Test results 29 REFERENCES 31 Table of Figure Figure : Admin use case diagram of website Figure : Customer use case diagram of website Figure : Logical design diagram of website Figure : Homepage wireframes 11 Figure : Details wireframe 11 Figure : Resgister wireframe 12 Figure : Admin page wireframe 13 Figure : Contact wireframe 13 Figure : Site map of customer .14 Figure 10 : Site map of admin 14 Figure 11 : Home page layout 16 Figure 12 : List of product layout 16 Figure 13 : List of product layout 17 Figure 14 : Register layout 17 Figure 15 : Login layout 18 Figure 16 : Contact layout 18 Figure 17 : Admin layout 19 Figure 18 : Admin product layout 19 Figure 19 : Source code of homepage 20 Figure 20 : Source code of homepage 20 Figure 21 : Source code of home page 21 Figure 22 : Source code of product list 22 Figure 23 :Source code of product list .22 Page |5 Figure 24 : Create table category and table product 27 Figure 25 : Create table admin 27 Figure 26 : Create table login 27 Figure 27 : Insert product table and category table 28 Figure 28 : Insert admin table 28 Figure 29 : Insert login customer .28 Page |6 ASSIGNMENT ANSWERS A - Create a design document for a branded, multi-page website supported with medium fidelity wireframes and a full set of client and user requirements (P5) Client and user requirement analysis Companies in today's ever-changing information technology era all desire to possess an e-commerce website so that customers can learn about them and purchase things more conveniently Furthermore, employee expenses, facility prices, and other promotional expenditures are a challenge for businesses wanting to expand For businesses wishing to grow their market, an e-commerce website will be the greatest answer As a result, Marches Special Woods (MWS) is aware of the developing e-commerce scenario, and I hope I could construct a website to assist them in selling their products with complete information about the company's phone cover items The website features a front-end (the section that the consumer sees) that shows all of the information about the company's products and interfaces that make buying easier for the user Aside from the font-end, they require a back-end (the area where staff change product information), which contains customer information, employee information, product information, and bill Use case diagram a Admin use case diagram Figure 1: Admin use case diagram of website Description: This is a characteristic of the company's employees Employees must first log in using the right login supplied by the employer and the password they have registered with the company After successfully logging in, workers may modify, add, and delete products, as well as examine the brands that have collaborated with the organization The employee can then log out of the system b Customer use case diagram Page |7 Figure 15: Login layout e Contact page Figure 16: Contact layout P a g e | 18 f Admin layout Figure 17: Admin layout Figure 18: Admin product layout Source code of function in multipage website and explanation a Source code of homepage layout and explanation P a g e | 19 Figure 19: Source code of homepage Figure 20: Source code of homepage Explanation: This includes the source code for the bar's navigation, which includes signing in, choosing a money value from the menu, the company's logo, a list of something like the entire website, a search bar, and a cart This file was created primarily with HTML, CSS, and some PHP It has been created to display the P a g e | 20 navigation bar of webpages, the logo on top, and the concealed main menu of a webpage, and it may be displayed using Javascript handling The search function in the navigation bar is built in PHP, and the search characters entered by users are delivered to main.php, where they are handled and displayed appropriately Figure 21: Source code of home page Explanation: These source codes are essentially abbreviated models of Main.Php, which shows the homepage's main body This file is fairly big since it must handle the categories filter, slider, and all items including such products displayed at the top of the homepage, one of most purchased product displayed below, and ultimately the product being discounted is presented at the end of the customer's website The homepage slider was created with bootstrap and designed with bootstrap I may use Foreach Loop PHP to transfer the product's details into the HTML box built to represent the brief information of each product to display all items like names, prices, and photographs When administrators upload a large number of items, they are quickly shown on the homepage Furthermore, the items are presented based on comparable customers' search keywords with the name of the menu name and product name depending on the ID of these products If there are no products that match the search keywords in the URL, it will return to H1 nothing matches each other The filter for all goods belonging to each kind is located beside the slider on the title Customers may show the suitable goods by clicking on each category line b Source code of list of product layout and explanation P a g e | 21 Figure 22: Source code of product list Figure 23:Source code of product list Explanation: This is the source code that customers will use when making a purchase Brand filtering, price learning, and sticker filtering are the three filters Filters are written in HTML This is the product listing's source P a g e | 22 code, from which the buyer may pick and purchase To make the product easier to see, I utilized CSS to align the photos Furthermore, several visuals and icons are incorporated to help customers buy more easily, such as a comparison that compares two things so that consumers can quickly pick and a heart to use Only customers Save your favorite products, look for customers who are looking for the same thing, and rate products with stars In addition, I utilized php and html to list the products c Source code of register layout and explanation Explanation: This is the source code allowing customers to establish accounts in order to purchase To make the form more visible, I utilized the CSS language to align the frames Furthermore, the form on which clients fill out their information is created in HTML d Source code of login layout and explanation P a g e | 23 Explanation: Customers that log in to the purchase page will see this source code To make the form more visible, I utilized the CSS language to align the frames Furthermore, the form for clients to provide login information is created in HTML e Source code of contact layout and explanation Explanation: This is the source code that customers will use to find out how to contact the firm I've included address information as well as a map here so that clients may look for more convenient methods to get about In addition, I have included the store's phone number, address, and email address into HTML In addition, I aligned a form for consumers to utilize when sending a message to the store P a g e | 24 f Source code of admin layout and explanation Explanation: This is the product editing staff's source code At this site, I utilize PHP to connect to the database in order to better understand the product information In addition, I utilize this language to restrict an P a g e | 25 employee account to prevent others from logging into the system In addition, I employ HTML code to embed product books and methods for editing other items onto the page Include some screenshots related to error handling a Login admin Explanation: When you log in to the staff's page, the website will display "You must login with admin Role," followed by login admin If you have the proper account, you can access the admin page; if you have the incorrect account, you will be unable to log in b Delete product Explanation: When an employee attempts to remove a product, the website asks, "Are you sure?" To inquire whether you are certain If you are certain, click YES later to have the website remove that product for you If you are unsure, click NO later; the site will return to the previous page Screenshot some source code of back-end a Create table P a g e | 26 Figure 24: Create table category and table product Figure 25: Create table admin Figure 26: Create table login b Insert data P a g e | 27 Figure 27: Insert product table and category table Figure 28: Insert admin table Figure 29: Insert login customer C - 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) Test plan No What is being evaluated? What to to test? Data from tests was used Expected results Confirm the Log in/Log up method Enter a previously registered username and password, and the system will verify the account Log in/Log up is a method Deny the incorrect handle to the Log in/Log up procedure Validation of Input Add normal values, boundary values, and rejected values Product descriptions Acceptance of good data, rejection of poor data Feature set Attempt to use function in website Function in website Functioning effectively and meeting consumer demands P a g e | 28 Test results No Test case Test log in with the incorrect user name Description Actual results Expected results Overall Error Error Pass Error Error Pass Successful Successful Pass “011696” Input empty user name Error Error Pass Input wrong username : “admin01” instead of Test log in with the incorrect password “admin1” Input wrong password : “011695” instead of Test log in with the correct user name and password “011696” Input correct username : “admin1” and Log in using an empty user name as a test Log in using an empty password as a test Input empty user name Error Error Pass Profile upgrade with incorrect address structure Modify address that a special character Ex: “112 Ho@ng Hoa Tham” Error Error Pass Profile upgrade with incorrect phone number structure Modify phone number that includes a letter or a special character Ex: “0125a678!9” Error Error Pass Profile upgrade with incorrect email address structure Modify the number of email addresses missing @ Ex: “abc123gmail.com” Error Error Pass Update profile with the correct phone number Modify phone with “012567894” Accurately Accurately Pass 10 Update profile with the correct address Modify address with “112 CMT8” Accurately Accurately Pass 11 Update profile with the correct email address Modify email address with “abc123@gmail.com” Accurately Accurately Pass P a g e | 29 12 View all home page Check out all of the goods and functions on Hompage The homepage displays all products and functions The homepage displays all products and functions Pass 13 Test link product Selecting some products on the homepage Those products information is available on the details page Those products information is available on the details page Pass 14 System assurance through testing Add items to shopping cart before log in Error Error Pass 15 System assurance through testing Add items to shopping cart before log out Error Error Pass 16 System assurance through testing Buy an order even when the address and phone numbers are still blank Error Error Pass 17 System assurance through testing Looking for information using a string that is not a product name Error Error Pass 18 System assurance through testing Log in to the admin page using regular account Error Error Pass 19 Functional ability is be tested When logged in, users may update your profile The system has accepted it The system has accepted it Pass 20 Functional ability is be tested When logged in, users may edit your profile The system has accepted it The system has accepted it Pass 21 Functional ability is be tested Log out Capable of Logging Out Capable of Logging Out Pass 22 Functional ability is be tested Add products with administrative privileges Products may be easily added Products may be easily added Pass 23 Functional ability is be tested Edit products with administrative privileges Products may be easily edited Products may be easily edited Pass 24 Functional ability is be tested Delete products with administrative privileges Products may be easily deleted Products may be easily deleted Pass 25 Functional ability is be tested Sort by categories Products are organized into categories Products are organized into categories Pass P a g e | 30 REFERENCES Understanding middleware (no date) Red Hat - We make open source technologies for the enterprise Available at: https://www.redhat.com/en/topics/middleware (Accessed: December 11, 2022) Pucksurfer and Instructables (2017) Wood phone case, Instructables Instructables Available at: https://www.instructables.com/Wood-Phone-Case (Accessed: December 11, 2022) ZebranoWoodCraft and Instructables (2019) Resin and wood phone case, Instructables Instructables Available at: https://www.instructables.com/Resin-and-Wood-Phone-Case/ (Accessed: December 11, 2022) How to create a site map: Your guide to visual site maps (no date) Gliffy by Perforce Available at: https://www.gliffy.com/blog/how-to-create-a-sitemap (Accessed: December 11, 2022) HTML SITEMAP: The benefits for SEO and users (no date) Semrush Blog Available at: https://www.semrush.com/blog/html-sitemap/ (Accessed: December 11, 2022) (no date) What is use case diagram? Available at: https://www.visual-paradigm.com/guide/umlunified-modeling-language/what-is-use-case-diagram/ (Accessed: December 11, 2022) The Physical Network Diagram explained: EdrawMax Online (no date) Edrawsoft Available at: https://www.edrawmax.com/article/physical-network-diagramexplained.html#:~:text=A%20physical%20diagram%20is%20generally,visually%20documents% 20the%20physical%20connection (Accessed: December 11, 2022) Logical diagram - definition, meaning & synonyms (no date) Vocabulary.com Available at: https://www.vocabulary.com/dictionary/logical%20diagram#:~:text=Definitions%20of%20logica l%20diagram,in%20more%20than%20one%20dimension (Accessed: December 11, 2022) How to create a wireframe in straightforward steps | bluehost (no date) Available at: https://www.bluehost.com/resources/how-to-create-a-wireframe/ (Accessed: December 11, 2022) 10 Hamilton, T (2022) Test plan: What is, how to create (with example), Guru99 Available at: https://www.guru99.com/what-everybody-ought-to-know-about-test-planing.html (Accessed: December 11, 2022) 11 Admin panel templates free download Html5 CSS3 (2022) Bootstrap Themes and Templates Available at: https://www.bootstrapdash.com/blog/admin-panel-template-free-download-html5and-css3 (Accessed: December 12, 2022) 12 Bill, G (2022) 88 free CSS HTML login form page templates, freshDesignweb Available at: https://freshdesignweb.com/css-login-form-templates/ (Accessed: December 12, 2022) P a g e | 31 P a g e | 32