Đ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 10: Website Design & Development Submission date January 2022 Date Received 1st submission Re-submission 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 P5 P6 P7 M4 M5 D2 D3 Summative Feedback: Grade: Signature & Date: Resubmission Feedback: Assessor Signature: Date: Table of Contents A CREATE A DESIGN DOCUMENT FOR A BRANDED, MULTIPAGE WEBSITE SUPPORTED WITH MEDIUM FIDELITY WIREFRAMES AND A FULL SET OF CLIENT AND USER REQUIREMENTS(P5) I B Create Design Document Client and Customer Requirements Mechanism Diagram IMPLEMENTATION OF WEBSITE DESIGN(P6) 18 I Tool and Techniques Using for Website 18 Tools 18 Techniques 18 II Website Implementations 19 1.1 Interface homepage of this website 19 1.2 Product Details Decription Site: 25 1.3 Main Menu of Website: 26 1.4 Account Site: 29 1.5 Cart site 31 1.6 Website Admin Management site: 35 C CREATE A SUITABLE TEST PLAN(P7) 39 I PurPose of Test: 39 II Test Plan 39 III Test Log 40 D COMPARE AND CONTRAST THE MULTIPAGE WEBSITE CREATED TO THE DESIGN DOCUMENT(M4) 44 I Compare And Contrast 44 HomePage Interface: 44 Details Site 45 Cart form 46 User Page 47 Admin Management Site 48 E EVALUATE THE QUALITY ASSURANCE (QA) PROCESS AND REVIEW HOW IT WAS IMPLEMENTED DURING YOUR DESIGN AND DEVELOPMENT STAGES(M5) 49 I Overview The QA Process 49 II Review How It Was Implemented During Design & Development Stages & Evaluate Quality Assurance in each Testing Process 50 Web Functional Ability Test Process: 50 System Design Test 54 Page Interface Test 56 Accesible Test 60 Compatibility Test 62 III Evaluate QA Testing Process 66 References 67 A CREATE A DESIGN DOCUMENT FOR A BRANDED, MULTIPAGE WEBSITE SUPPORTED WITH MEDIUM FIDELITY WIREFRAMES AND A FULL SET OF CLIENT AND USER REQUIREMENTS(P5) I Create Design Document Client and Customer Requirements 1.1 Project Website Introduce and Decription VLSS – Virtual Luxurious Service Shop is the online shop in from of e-commerce with the main purpose are Buying – Exchanging – Provide decorations, decorative tools and decorative services All these products are listed on the primary page of website, it’s is easily for customer to observe and searching for what customer want in this commerce This shopping website has been designed and developed to display categories of decorative service available in this commerce Detailed information about the product and service name, total of number and price of each product and detail note about it can be observed by click on this products WebSite will be built for some common Platform by utilizing some website development technologies including HTML5, CSS, JavaScript, and PHP The website will well-operating on all leading web-browsers such as Google Chrome, Firefox, Microsoft Edge, etc And suitable on almost reponsive screen sizes like Laptop, TV, Tablet 1.2 1.3 Customers Object: Decorators and any people who want to decorate their room, their party, or for prettying crucial event of years with nice accessories and items Sellers who are in helding event field or in decorative field Input and Output of website For the database of website's system Product information: name, price, photo, id, quantity in stock, category, detail note Customer information: Full name, address, email, phone Category details: ID, name, description Order details: OrderID, DeliveryDate, Delivery location, Quantity Orders: Order ID, OrderDate, customer id, Store information: Introduction, Products, News, address, social networks, Website reservation Output in website: Product details, prices, image Search results and search technology Total order price in Cart static User interface Order information Processing in website Processing customer's registration Processing customer's login Change customer account information Adding, updating, deleting products in cart Processing admin login 1.4 Functionality Requirements For Customer Website development and design for online commerce include multi pages with Virtual Luxurious Service Shop For customer maniputating with functions: Customers are Registered members of the site and log in to buy products Adding products to cart Changing quantity in each products in cart Remove the item from cart Changing mode dark - light background color View order Previous Items Order Account configuration Searching Logout For administrators, perform the following functions: Upload, edit and delete items and products existed in shop View items, customer, order details management 1.5 Reset, view, preview order Search product, order detail Remove item order Logout Review accessibility standards and guidelines Alternative text: For photos, graphics, and logos, written explanations known as alt-text should be supplied As a result, those who use a screen reader will be able to grasp the visual material on your website Organized pages: Headers and lists should be included on web pages to make it easier for customers to navigate the site Vision impairments: Color should not be used to convey information To ensure that persons with vision impairments can read the text on my site, i should stick to the agreed color contrast standard They may also simply use the browser’s text zoom function to make the text large enough to read Text/content: My website's wording should be straightforward, and any message or content should be simple to comprehend (Agrawal, 2019) Cognitive impairment: Sites that are created simply and clearly aid users with memory, reading comprehension, problem solving, and concentration issues These characteristics are beneficial to everybody who visits my website Grid Responsive designs: Responsive design is that the contrast of programming and device which is difficult to feature after a specific website is intended it's mainly part of a redesign that's why it's a compact, not a corporation standard Responsive design has been regularly changed over the years Readable and web-friendly fonts: Using the proper fonts exemplifies shop brand personality and immediately grabs your audience’s attention However, it’s not almost well-to-do The typefaces you employ in web design also must be functional and readable Arial, Helvetica, Times New Roman, and Courier New are all samples of webfriendly fonts Mobile Web: In the world of smartphones, make sure that i create a mobile-friendly website Designing a responsive website that loads perfectly on any mobile is that the best thanks to win the user response Impressive home page: The home page of your website encompasses a specific value proposition It should be impressive and attractive the house page with high-value proposition implies that your website explains their value to the viewers (Agrawal, 2019) 1.6 No User Criteria User Criteria Homepage Interface Decription The homepage of website should have been created based on utilizing flags suitable with their commercial logo, the title of each product that can be added name of famous brands, Navigation bar shuold have some quick redirected navigation such as service, contact us, There should be the message box for customers can use it to directly contact with sellers and the footer with full social contact Reponsive ability for meet one web of all devices Interface should follow Website Accessibility Standard Item Display The product/item name and the price of the decorative services must be added with the illustrated images as well as all these must appear on a displaying section of each product Text/content need to be meaningful Admin ability Admin can add, edit and delete products and flexible form to handle with orders list requested from customers Customer ability Customer can have button to order, small box searching products on navigation bar, button or tool to add products to cart and delete it on interface Navigation Display Sticky on top ability, drop down menu with animated effect Color Switch when hover Text Display The typefaces employed in web design also must be functional and readable font such as Arial, Helvetica, Times New Roman, and Courier New are all samples of web-friendly fonts Mechanism Diagram 2.1 Flow Diagram Figure 1: Flow Diagram 2.2 Admin use-case diagram Figure 2: admin diagram This is the diagram describing manipulating with website for admin 2.3 Customer use-case diagram: Figure 3: Customer use-case diagram This is the diagram describing manipulating with website for customers System Design Test a Database Connection test To Test the mysqli database connection, I need to declare a variable that contains your DB connection, which I can examine at any point $conn = new mysqli('localhost', 'root', '', 'notashop'); or $conn = mysqli_connect('localhost', 'root', '', 'notashop'); After Declare Db connect variable, I can test querying via the $conn variable to figure out the connection quality if($conn->connect_error) { echo "Connection fail"; die($conn->connect_error); } To check for data integrity and errors while handle with Database the forms or any DB related functionality Check if all the database queries are executing correctly, data is retrieved and also updated correctly There are screenshot of code to test DB Connection: b Handling with Database Test Test insert Account information into Database from script language Check input and data retrieve from Sign in/ Sign up form after validation process To check whether these data has been got into program to store in database, I need to use die() function to stop and print at the variable query before continuting next step When print the variable assigned to query and it absolutely is normal and has no bugs or errors, I will delete die() function to next process has been executed Test insert Order info from script language Error: When testing the process of inserting all informations of an order into Database via PHP, my system has got bug After I had Tested input an order with some products and then, these information has not been inserted into database This bug seem to be an error at the duration of implementing code to swiching information got in cart to data that Database could retrieve After debugging in some code phrase, it has been realized that the bug happenning in the code below: I must have used die() function to figure out the reason and this bugs happen due to “$ToID” variable which store OrderID for determine what Order need to be inserted their details order Solution: Adding more function(Mysqli_fetch_array) to get only one value of orderid From there, the progarm can handle with order informations in not only insert them into database and store them carefully but also manipulating with these data to display in user page and storing in admin site Page Interface Test Test Sytem notification: Notification is a crucial part of a website, therefore; it needs to be tested carefully from designing code to try running on website To ensure system will notify when user wrong handle, there is example source code to display notification notify user that they wrong at sign in: Test & Check: Figure 38: System notify that user has been wrong at sign in Test process showed that system has been implemented properly, there are no bug and error => Partly Ensure quality of Account assurance Test Animated Effect on Homepage It is necessary to test Effect to ensure UI and UX Criteria: Smooth Not affect to other section No stalling when effect executed Flexible animation Drop-down in navigation bar effect test: Menu drop from top to down with the soft effect All criterias Passed Primary menu of web: Figure 39: Test Animated effect of menu All criterias Passed Content Checking for QA Criteria: Content, Text should be logical and uncomplicated Check for spelling/Grammar errors Content, title, Text should be meaningful All the anchor text links should be working properly Images should be placed properly with proper sizes Checking process: Page Evaluate QA Simple, clean, and friendly theme Content, name of products is meaningful, enought informations needed to be display Images is be placed properly with proper sizes Slider is located in appropriate location Anchor in navigation and anchor in (See all Products) work properly Clear font-size of Each Anchor flag Content, name of each information at footer is meaningful, enought informations needed to be display Spelling/Grammar Assurance Images in proper size to be displayed clearly Bad font size Aesthetic theme Detail Content is meaningful, enought informations of product Images is be placed properly with proper sizes Accesible Test Test Redirection Redirecting Pages From Website HomePage (asm2/index.php) No Accesible Pages from Website HomePage Evaluate i Signin.php Ability to access Success ii SignupOk.php Ability to access Success iii User-page.php Ability to access Success iv Cart.php Ability to access Success v Details.php Ability to access Success vi Fullstock.php Ability to access Success vii Admin/index.php Ability to access Success viii Admin/Order-List.php Ability to access Success Redirecting Pages From Admin Site (asm2/Admin/index.php) No Accesible Pages from Website HomePage Evaluate ix Signin.php Ability to access Success x SignupOk.php Ability to access Success xi User-page.php Ability to access Success xii Cart.php Ability to access Success xiii Details.php Ability to access Success xiv Fullstock.php Ability to access Success xv Asm2/index.php Ability to access Success Compatibility Test On Computer Screen, To Test and Evaluate QA, there are some common browsers to test 1) Google chrome – the most popular browser 2) Coccoc – the common browser in Vietnam 3) Microsoft Edge The Images reponsize size in slider The slider display images better in Google & CocCoc Browser In Microsoft Edge, The slider images frequently gets deviated size coressponding to slider size The color compatibility of each section In Chrome and CocCoc, colour tones of web are displayed clearly It's can clearly be seen the division between the colors, which proves that the website is very compatible in colours with these browser In Microsoft Edge, Colour tones are quite pale Error Images When the image get error in path, size of image still be intacto and not disappear when the image cannot display This means website is compatible in fixed size in any browser Test compatibility of web on mobile web User page when display in mobile screen size, All forms switch form from horizontal to vertical, all element of userpage are re-size to fit with mobile screen Good Compatibility Cart interface split from Cart and bill display in the form to Cart on above Bill at bottom, all element of userpage are re-size to fit with mobile screen Good Compatibility In footer, website is compatible well to mobile web screen but the main body of web sometime gets error in sizing of images, it can led to bad experiment to user Bad compatibility Signin/Signup and Sign into Admin site is well compatibility and reponsive well on mobile screen All elements are sorted appropriate to meet requirements Good Compatibility In Admin site, it can be seen that website can be compatible with mobile screen However, all element is so small for seeing Specially, admin site has many crucial tasks, it is not fine when all element hard-to-look Not really good compatible III Evaluate QA Testing Process Test Process Web Functional Ability Test System Design Test Evaluation Overall Success Rate Generally, the website's operations work in a logical, consistent, and 6/10 holistic manner The page's components are not redundant, and they all work together Their own function and significance From customer interface to user experience They all bring a solid user experience, including database processing experience The webpages are constructed in a cohesive block The website's material is solely focused on the no frills, no distractions, just the essential point of the page Validation of system is quite bad To make the good system and security is a challenging technique, but 7/10 through QA test process there are still ways to improve website system I think i can only design rudimentary techniques of avoiding errors and Page Interface Test Accessible Test Compatiblity Test bugs from data transition, but maybe this will only limit errors in operating process Although Database management still had error and bug, the database also operating quite proper Overall, the interface QA testing has yielded positive findings; the user 6/10 interface is almostly neither broken or crashed as a result of any faults arise as a result of the system All usual blunders are built in On a different error point to avoid any degradation of the user's experiment The page's navigation is well-designed No pages are stuck, and all pages are in the correct order However, the user interface in some page still in not good design and colour mixing The repondsive is not really fine Redirecting the same content group is possible Redirecting to the 8/10 other page is possible Overall, when it comes to compatibility testing, By testing compatibility 7/10 on various browsers, operating systems, and devices, we discovered that each of them displays webpages in slightly different ways, but in general, all information is fully displayed No website has been broken, no webpage has become unstructured, and no information has been lost Ensure that users receive correct information References Agrawal, A., 2019 [Online] Available at: https://customerthink.com/top-website-design-and-development-guidelines-for-2019/ CRESTODINA, 2015 orbitmedia [Online] Available at: https://digital-goal.net/top-principles-of-effective-web-design/ W3C, 2016 Standard Design [Online] Available at: https://www.w3.org/standards/webdesign/ ... fonts 2 Mechanism Diagram 2. 1 Flow Diagram Figure 1: Flow Diagram 2. 2 Admin use-case diagram Figure 2: admin diagram This is the diagram describing manipulating with website for admin 2. 3 Customer... 19 1 .2 Product Details Decription Site: 25 1.3 Main Menu of Website: 26 1.4 Account Site: 29 1.5 Cart site ... smoothly with animated effect Accepted by system 22 Test Functional ability Switch mode between Dark mode and Light mode 23 Test Functional ability 24 Test Functional ability All products which