2.2.2 User Interface………22 LO4 Create and use a Test Plan to review the performance and design of a page website………multi-39 3.1 Create a suitable Test Plan identifying key performance are
Create a design document for a branded, multipage website supported with medium-fidelity wireframes and a full set of client and user requirements (P5 )…
Priorities
Key Requirements for running the website sys- tem
Client Requirements
No User Requirement Measure of ef- fectiveness
1.1 On the homepage, the user requested a product display area.
Users may view items without having to navigate to another website.
When a adds new items, they all appear on the main page.
1.2 The user requests that the product page include a data- related item.
Customers may learn more about an item before purchasing it.
When a customer visits the product page, all of the goods are displayed.
1.3 To make a purchase, the user must first log in or register.
All users must register in order to access information and become members in order to make purchases.
1.4 When users have issues, they should contact the adminis- trator or support services.
Make a link between the developer and the user.
All users have the ability to contact the a dministra- tor and support service by email or chat at any time.
1.5 The user requests a shopping cart page so that they can change the number of things in their cart.
Users may view the total price of the things they select as well as the number of products they se-
Before you can check out, you must first add the item to your cart.
1.6 On the product page, the cus- tomer sought product re- views and ratings.
Customers may read reviews and learn about the product's quality before pur- chasing it.
Product reviews and ratings must be included 2
1.7 A page for the user to add, delete, and alter product quantities is required.
Users can choose how much of their items they want to include or remove.
Admins may con- trol quantity, user quality, pricing, import date, and export date, among other things.
1.8 Administrators can look at a user's product order after they've placed it.
Orders can be managed by ad- ministrators.
The administrator must be informed of any products acquired or purchased.
1.9 The user who has been con- tacted can make changes to their personal information.
Users can make changes to their data.
Each entry allows the owner to update the database.
Use Case Diagram
User Use Case Diagram
-A use case diagram is a dynamic or behavior diagram in the Unified Model Language In use case diagrams, actors and use cases are used to model the operation of a system.Use cases are a collection of activities, services, and processes that the system must do.-Use case diagrams are regularly developed during the early phases of development and are commonly utilized for the following purposes:
Figure 1-2 User- Use Case Diagram
Admin Use Case Diagram
Figure 1-3 Admin Use Case Diagram
Site Map
A sitemap is a map for your website that will assist search engines in identifying, crawling, and indexing all of your material Sitemaps also inform search engines about the most essential pages on your website.
-Sitemaps are classified into several types:
+The standard XML sitemap is the most frequent form of a sitemap It is often in the form of an XML Sitemap that contains connections to various pages on your website.
+Video Sitemap: This is used to assist Google in understanding the video content on your page.
+The Google News sitemap: Aids Google in discovering material on sites certified for Google News.
+Image Sitemap: Assists Google in discovering all of the images on your website.
Database Diagram
In the Admin table, I create fields including ' id, username, password, creationDate,updationDate.In which id is the primary key
In the Category table, I create fields including 'id, CategoryName, CategoryDescription, , creationDate, updationDate In which 'id' is the primary key
In the Order table I create fields of 'id, userid, productld, quantity, oderDate, payment Methoad, oderStatus In which 'id' is the primary key
In the Ordertrackhistory table, I create fields including 'id', orderld, status, remark, post- ingdate.Where 'id' is the primary key
In the Product reviews table, I create fields including 'id', product, quality, price, value, name, summary, review, reviewDate Where 'id' is the primary key
In the Product table, I create fields including 'id', category id, subcategory, creationDate, updationDate Where 'id' is the primary key.
In the User log table, I create fields including 'id, user email, userip, login Time, logout,status’ Where 'id' is the primary key.
In the Users table, I create fields including 'id', email, name, contact no, password, ship - pingAddress, shipping state, shipping city, shippingPincode, billingAddress, billing state, billing city, billingPincode, regDate, updationDate Where 'id' is the primary key
In the Wishlist table, I create fields including 'id', userld, productld, posting date Where 'id' is the primary key.
In summary, my Shopping Database includes 10 tables including 'Admin, Category, Or- der, Ordertrackhistory, Product reviews, Product, User log, Users, Wishlist'.
Wireframe
Figure 1-21 Change password Admin Page
Specific explanation about wire frames
This is my website's main page This page lists all of the products in the shop, grouped by accessible categories (Smartphones, Laptops, Smartwatches, Tablets, and home goods) On the site, there are additional sliders and advertisements, as well as prod- uct brands There are commands such as:
Search: helps us find product information.
Shop: Display all products on the website
LapTop: Displays the laptop included in the website
Product: is considered to display the products contained in the categories Contact: allows buyers to contact to respond to questions when using the product Pay: A page that displays all payments to users when purchasing products cart: show the order value and the number of products in the cart Will take us to the cart page.
Account: helps us log into our account and change our personal information That leads us to a new page that is the account page
This button helps you to add your favorite products to your shopping cart Then the prod - uct is added to the cart, you can change and add the product.
Figure 1-24 introduce in this section it introduces information and help questions and recruitment information vv
The dimensions of the logo are: width 100px and height 120px.
The dimensions of the slider are: width 1150px and height 650px.
The width and height of the product under FEATURED PRODUCTS, SMART PHONES, and LAPTOPS are 200px and 350px, respectively.
Add to cart button is used to add products to your cart
Compare button is used for customers to compare this product with another product
The Add to Quote button is used to add to the cart and quote the product for the customer
The administrator can use the admin login page to manage the website's listings Include all information on the webpage (User, Product, ) This site is extremely essential, and it should be extremely secure to prevent hackers from breaking in and stealing information. There are some important buttons on this page.
The administrator will be able to access the admin's internal files after pressing this login button.
Following successful login, a new interface, distinct from the user homepage, emerges.This page allows you to change your admin password, add a new category, a new subcat - egory, a new product, and so on Some product, user, and management functions
Save changes is used to save and change information when you change your infor- mation
Use your design document with appropriate principles, standards and guide-
Tools and techniques for website development
The 7 Most Important Frontend Web Development Tools
Let's start with the basics: a high-quality code editor with a user interface that is well-de- signed, extremely efficient, and lightning-fast There are a handful that are good at this, but Sublime Text is the best (and most popular).
Wouldn't it be amazing if you could change your HTML and CSS in real time, or trou - bleshoot your JavaScript while viewing a comprehensive website performance analysis. You can accomplish precisely that with Google's Chrome Developer Tools They come pre-installed in Chrome and Safari and give developers access to their web application's internals A palette of network tools can also help you optimize your loading flows, while a timeline can show you exactly what the browser is doing at any given time. jQuery.
Developers have long considered JavaScript to be an essential frontend language, despite its flaws: it's littered with browser quirks, and its rather convoluted and unapproachable syntax meant that functionality was sometimes sacrificed.
That is, until 2006 when jQuery–a quick, lightweight, cross-platform JavaScript framework targeted at easing the frontend process–arrived By abstracting a lot of the functionality that was previously left to developers to figure out on their own, jQuery allowed them more power to design animations, integrate plug-ins, and even browse documents.
You make a mistake while working on a new project feature Version control systems (VCS)–specifically, GitHub–come into play.
You'll be able to view any modifications you've made and even go back to a prior state if you use the service to roll out your project (making pesky mistakes a thing of the past) For a number of reasons, developers need to use GitHub In addition to issue tracking, feature requests, task management, and wikis for each project, the repository hosting service pro- vides a strong open-source development community (which makes team collaboration a snap).
Do you get tired of typing in the same container style? What about the recurrently appear- ing button? When you start building frontend apps on a regular basis, you'll notice several trends.
UI frameworks attempt to solve these problems by abstracting common characteristics into reusable modules, allowing developers to rapidly and simply create new app components.
The most popular of these frameworks is Bootstrap, a comprehensive UI kit created by the Twitter team Bootstrap includes tools for normalizing stylesheets, creating modal objects, integrating JavaScript plugins, and a boatload of other features that can help you cut down on the amount of code (and time) you need to finish your project.
HTML is generally the foundation of every front end developer's toolkit, but it has a bug that many consider fatal: it's not built to handle dynamic views.
AngularJS, an open-source web framework, comes into play here AngularJS is a Google framework that allows you to expand your application's HTML syntax, resulting in a more expressive, legible, and quick-to-develop environment that you wouldn't be able to achieve with HTML alone.
Your closest friend will be time-saving web development tools, and one of the first things you'll learn about code is that it must be DRY ("Don't Repeat Yourself") You'll undoubtedly notice the second thing: CSS isn't always DRY.
The CSS preprocessor is a tool that aids in the development of reliable, future-proof code while also reducing the amount of CSS you must write (keeping it DRY).
Perhaps the most well-known of these is Sass, an eight-year-old open-source project that helped to define the current CSS preprocessor genre Although first confusing, Sass's combination of variables, nesting, and mixins produces simple CSS when compiled, mak- ing your stylesheets more legible and (most importantly) DRY.
User Interface
After changing the account information, there will be a notification informing the user that their information has been changed.
The administrator can update the password for logging into the website administration system on this page We may simply and smoothly change the password.
This page manages all registered users, the administrator can view all customer informa- tion An administrator can search for a user by searching.
The subcategory page, like the category page, has a similar interface to the category page A new subcategory will appear after you press the create button Admins can cre- ate, edit, and delete subcategories.
After creating the category, you will see the category you just created appear as shown below
The insert product page, like the category and subcategory pages, has the same inter- faces as the other two pages A new product will appear in the web page after pressing the insert button An existing product can be added, edited, or deleted by the administrator.Following the addition, the system will display a notice indicating that the addition was suc- cessful.
Before adding products, you must first create a category and a subcategory After creating the category and subcategory, the new insert product page allows you to specify the prod- uct's fields By attaching an image file to the related item, you can add an image for the product.
The administrator can see all of the details for each product on this page, which main - tains all of the products added to the site Administrators can use search and search to find a product The administrator has the ability to change and delete product data.
LO4 Create and use a Test Plan to review the performance and design of a multi- page website
3.1 Create a suitable Test Plan identifying key performance areas and use it to re- view the functionality and performance of your website User Experience (UX) and User Interface (UI)(P7).
The functional requirements define what the software or website should be able to do (the functions).
-Some instances of functional needs are as follows:
+The internet application will be used to take customer orders.
+A transaction will be processed by the online application.
+The web application should generate a receipt that includes the customer's name, the items purchased, the price of each item, and the total amount.
+The online application will be able to give weekly, monthly, and yearly sales statistics.
Figure1-53 Functional and non-functional requirements
Non-functional requirements are the criteria that must be met by the application or website. Non-functional requirements include response time and dependability.
Some non-functional requirements for the vehicle shop application are as follows:
+All employees, including sales representatives and managers, must be able to use the online application with ease.
+The web software will be available in a number of different languages.
+The web application should be able to handle several sales at once without slowing down.
User Interface and User Experience (UI & UX) text log
In this part, I will rely on the client's specifications, and I intend to evaluate the functionality and performance of my site in the future to ensure that it meets the client's needs.
Fetch products, catalog data from the database
All Products and Categories are viewable on the
Search and add goods from the database, as well as category data
2 Make an attempt to log in as a user.
Username, email, name, id, and password are entered into the login and registration forms, and then the data is INSERTED into the database with validation.
The whole user- name must be entered, the email must not be repeated, the email must be the proper form id, and the re-enter password must be accurate The registration will not be possible unless one of the aforementioned procedures is completed.
The whole user- name must be entered, the email must not be repeated, the email must be the proper form id, and the re-enter password must be accurate The registration will not be possible unless one of the aforementioned procedures is completed.
All product information must be re- trieved from the category page.
All product Information must be retrieved from the category page.
4 Test link wish list.php id to view favorite products click on my-wishlist.php
All product details must be accessed by clicking on the heart icon.
All product details must be id clicked on the heart and will be presented on the Wishlish page.
All product details must be accessed by clicking on the heart icon.
All product details must be id clicked on the heart and will be presented on the Wishlish page.
5 Test link my-cart.php want to see selected products click on mycart.php
Users will be able to see all product details as well as the selling price in the " Cart" page.
Users will be able to see all product details as well as the selling price in the " Cart" page.
Update, Insert, Administrators have the ability
Good has the authority to change and add items in accordance with the store's mission.
Delete User, Product in User Database and Price and Product Information to modify their users, add or delete products to modify their users, add or delete products
7 In the My ac- count Site, the incom- ing user (
Provider) has the ability to change their information.
Update information into users databas
The user has the power to make changes to their information.
The user has the power to make changes to their information.
8 The capacity to take up the role of provider username, name, email, password, , id Insert into provider database
To become a supplier, any user can register.
To become a supplier, any user can register.
Table 1-3 User Interface and User Experience (UI & UX) text log
Back-end User Interface and User Experiences (UI & UX) text log
1 View all Prod- uct and
All Products and Categories are viewable on the Home
All Products and Categories are viewable on the Home Page
Search and add goods from the database, as well as category data
2 Make an attempt to log
Username, email, name, id, and
The whole user- name must be
The whole user- name must be
Good in as a user password are entered into the lo- gin and registration forms, and then the data is
INSERTED into the database with validation. entered, the email must not be repeated, the email must be the proper form id, and the re-entered pass- word must be ac- curate The regis- tration will not be possible unless one of the aforementioned procedures is completed. entered, the email must not be repeated, the email must be the proper form id, and the re-entered pass- word must be ac- curate The regis- tration will not be possible unless one of the aforementioned procedures is completed.
3 Image of prod- uct inspec- tion, product pricing, and comprehen- sive product content
Check that the pricing, titles, and content of the products corre- spond to the prod- uct infor- mation in the data- base
All items, product information, and prices are the same as in the database.
All items, product information, and prices are the same as in the database.
4 Check the list in the navigation bar examine and click on a product listing on a website like (cell phone, laptop, )
After pressing the button, the items appear
After pressing the button, the items appear.
Click into “add cat- egory” button The website takes you to the data- base editing page.
The website takes you to the data- base editing page.
Select the "add subcategory" button.
The website takes you to the data- base editing page.
The website takes you to the data- base editing page.
Select the "add product" button.
The web page will display a form where you may enter product information and press insert.
The web page will display a form where you may enter product information and press insert.
The site will navigate to the form where you may submit information and edit the category.
The site will navigate to the form where you may submit information and edit the category.
The page will reload, and the category will be deleted.
The page will reload, and the category will be deleted.
Select "edit" from the drop-down menu.
The site will direct you to a form where you can enter information and update the subcategory.
The site will direct you to a form where you can enter information and update the subcategory.
"remove sub category" fea- ture.
Select "delete" from the menu that appears.
The subcategory will be deleted and the page will be updated.
The subcategory will be deleted and the page will be updated.
Select "edit" from the drop-down menu.
The website will take you to a page where you may enter information and edit the product.
The website will take you to a page where you may enter information and edit the product.
The website will be refreshed, and the product will be removed.
The website will be refreshed, and the product will be removed.
Table 1-4 Back-end User Interface and User Experiences (UI & UX) text log
Evaluate the Quality Assurance (QA) process and review how it was imple-
What is Quality Assurance (QA) process
Any systematic method of verifying whether a product or service fulfills defined standards is known as quality assurance (QA).
Set requirements for designing or producing dependable goods are established and main - tained by QA A quality assurance system is designed to boost consumer trust and credi - bility while also enhancing work procedures and efficiency, allowing a firm to compete more effectively.
Quality assurance methodologies and the mapping of quality assurance procedures are driven by the ISO (International Organization for Standardization) The ISO 9000 interna- tional standard is typically used in combination with QA Many businesses utilize ISO 9000 to ensure that their quality assurance system is in place and functioning effectively. Quality assurance began as a systematic approach in the manufacturing business and has since spread to a wide range of industries, including software development.
History of ISO and QA
Although quality assurance procedures may be traced back to the Middle Ages, they became increasingly essential in the United States during World War II, when large quantities of armaments had to be inspected.
The ISO was founded in Geneva in 1947, and its first standard, on reference temperatures for industrial measurements, was published in 1951 The ISO evolved and increased its set of standards over time.
The ISO 9000 series of standards was first released in 1987, and each number represents a distinct set of requirements for various circumstances.
Quality assurance methods
One of three strategies is used to ensure quality:
Failure testing is the process of repeatedly testing a product to see if it breaks or fails This might include testing the product under heat, pressure, or vibration if it is a physical prod - uct that has to endure stress Failure testing for software products may entail putting the software under high usage or load situations.
Statistical process control (SPC) is a methodology created by Walter Shewhart in the1920s and 1930s at Western Electric Company and Bell Telephone Laboratories based on objective data and analysis To manage and regulate product manufacturing, this system use statistical methods.
Total quality management (TQM) is a strategy of continuous improvement that uses quan- titative approaches To assist product planning and performance assessments, TQM de- pends on facts, data, and analysis.
QA is not the same as testing Testing is primarily concerned with the logistics of using a product in order to detect problems, whereas QA is more concerned with processes and procedures QA establishes testing criteria to guarantee that a product fulfills specified business requirements Testing is a more tactical procedure for testing a product's function and discovering flaws.
Automation is critical because it allows for speedy review and supports continuous integra- tion, which is an important aspect of the agile methodology.
One of the key reasons why QA engineers must learn and be able to do automated proce- dures is to minimize expenses and enhance the productivity of your QA workers.
Automation is critical because it allows for speedy review and supports continuous integration, which is an important aspect of the agile methodology.
One of the key reasons why QA engineers must learn and be able to do automated procedures is to minimize expenses and enhance the productivity of your QA workers.
After the development step is completed, software testing generally begins In any event, for optimal quality in an agile strategy, you must narrow your focus and begin testing and testing from the beginning It guarantees that problems are detected sooner rather than later, saving both money and time.
It also guarantees active alignment with the team's engineers, releases applications fast, and considers a wider spectrum of tests.
Testing thoroughly and thoroughly might be difficult from time to time, since many people do not have the means or time to encounter every possible combination of circumstances.
However, you must be strategic in your testing methods and subjects It means that speaking with an engineer to uncover little trials will decide the optimal amount of flaws.
Although QA managers are trained to discover defects, an astute QA expert will also ex- plore how to avoid them in the first place.
Regular QA begins with UI testing, but an agile methodology begins with the unit and func - tionality testing before moving on to the UI phase This strategy stops the error from pro- gressing to the greatest degree of development, which might result in more significant is - sues and delays in delivery.
Furthermore, instead of focusing on a large number of minor flaws and errors, start with the important ones.
A system crash is not a singular event Quality control, on the other hand, necessitates testing of the system's ability to withstand component failure Even if a product failure oc- curs, the system must be capable of resuming full control.
Document administration and archiving are governed by this procedure Any modification to the record is made with the proper change control technique The procedure also in- cludes the approval of all sorts of papers.
The two categories of QA testing are functional and non-functional testing Before going on to functional testing, let's take a look at the four stages of non-functional testing.
Vulnerability testing looks for security flaws and vulnerabilities in a website or software that hackers may exploit The goal of this stage of testing is to ensure that there are no security flaws that might compromise the user's information or other sensitive data.
The similarity test determines if the product is completely compatible with the software and hardware that will be utilized with it.
Various components, such as the internet browser, hardware, operating system, and inte- grated modules, are inspected during this period.
Software that is easy to use and comprehend is referred to as convenience testing This stage of the testing process guarantees that the product's design and user interface do not frustrate or confuse the end-user.
Performance testing comprises verifying that the gadget functions effectively in a range of conditions that might affect users, such as heavy loads and low battery power.
Through a load test, performance testing ensures that the application operates effectively and establishes the program's limits.
Functional testing is usually divided into four parts Each one is described in great depth further down.
The unit testing technique is used to test the individual software modules or components that make up the system or application.
These tests are frequently generated by the module's developers and utilized in a test- driven improvement approach (e.g Agile, XP, or Scrum) Prior to the module's inclusion in the specification, they are written To investigate all module functions, a unique unit test configuration built in the same programming language as the module is employed. integration testing
In this step of the testing process, individual modules or components that have been suffi- ciently unit tested when coupled to accomplish defined activities and tasks are tested (or also known as scenario testing).
Because automated testing of some integrated components is very simple, this inspection technique is usually completed using a mix of human and automated functional testing.
Scalability testing of the entire framework is included in system testing Standard system testing is running the entire framework in order to detect flaws, stability difficulties, and serious issues before they become a problem.
As should be evident, the first three phases of functional testing consisted of a continual expansion of the range, from a single unit to several integration units to the entire system.
Acceptance testing is the last phase in the functional software testing process, and it com- prises validating that all of the project's or product's important criteria have been met It also ensures that the framework is thoroughly tested by the client and end-user to ensure that it works as expected and meets all of their specifications.
Some steps to use in the website
Customers are forced to check in with a website-registered email address, and the administrator hosts these people The only prerequisite for logging in is that the syntax is complete For instance, abcdef@gmail.com is a valid email address Otherwise, the web- page will not be logged if you are missing @ gmail.com The password must be the same as the one used to register.
All of the fields on this page must be filled out completely When placing an order, it is nec - essary to enter correct information so that the business may call consumers at the regis- tered phone number Both the first and second passwords must be exactly the same.
To test the whole framework, I utilize a large, integrated test suite To determine whether or not the webpage is functional The entire framework is tested for omissions, slowness is- sues, and major flaws as part of standard system testing Check my website's loading speed, since it may have an impact on the customer Ascertain that the website is as sta - ble as possible I test the primary function buttons on my website by clicking on the button icons and seeing if the outcome looks as intended Increase the buy volume of a certain product, for example, and save if the order is recorded in the database and the amount is raised according to my instructions.
I do compatibility checks to see if the product is entirely compatible with the software and hardware it will be running on After testing, I am confident that the product is entirely com - patible with both software and hardware After the admin adds the product, it appears in its entirety.
Figure 1-59 Products appear after the admin adds the product
My Susceptibility Testing is the process of inspecting a website or application for security faults and vulnerabilities that hackers may exploit The goal of this stage of testing is to en- sure that there are no security flaws that might compromise a user's personal information or other sensitive data All user and admin information is encrypted on the database man - agement page for the admin As a consequence, all information is secure.
All user passwords are encrypted into a string to avoid hacking.
Unit testing looks at the various software modules or components that make up a system or application Examine any software associated with your website (Xampp, Visual Studio Code, ) Other pages with unique characteristics, such as , are also available to improve the website.
I learned something new after finishing this report, which helped me learn a lot from it This Assignment 2 assignment has two primary assignments that I have done These are LO3: Create a multipage website using website technology, tools, and strategies while adhering to good design standards LO4 Create and apply a Test Plan to evaluate a multipage website's performance and design I had a lot of fun writing this report, and I got some fantastic findings.
P5: I construct a multi-page connected website using the information and concepts from Assignment 1 In this work, I evaluate user requests and create request tables for them. For your website, create a site map Create a database to store website information, inte - grate it into the website, and perform other tasks Then I drew up the fundamental blue - print for my website using a wireframe It consists of several pages with buttons to navi- gate between them a connection between the pages The P6 section follows The P6 sec- tion is based on P5's fundamental design and the creation of a comprehensive website. According to the blueprint, I must create a website that is similar to the design, with similar functionalities and buttons Demonstrate the buttons and explain how they function M1 is the next component I use a blueprint to examine the similarities and differences between the design and the whole website in this part, which is responsible for developing the en- tire website After that, make a distinction between the design and the entire website.
P7 comes next To test the major feature of my website, I constructed a planner The UI and the admin UI buttons are compared Examine the predicted and actual outcomes For the website's primary functionality, I utilized the necessary input data Observe how well the functions respond to the user's request
Thank you to my teachers and friends at BTEC for helping me complete this course After I finished studying I found website development very interesting Perhaps this is a strength that I need to promote.