This exercise scores Distinction in Web programming. This exercise demonstrates how to program an ecommerce website in PHP, using tools such as html, css, js, boostrap. There is full authorization and exception handling.
Introduction
We live in a modern society where everything is modern and innovative Every day, there is a lot of innovation, especially in technology When it comes to technology, we must admit that it has permeated every aspect of our lives, from simple devices such as phones and computers to complex programming applications Currently, digital transformation technology is gaining popular in a variety of disciplines, particularly e-commerce system While offline stores are progressively becoming outdated, online shops are an excellent solution for developing this model
In this exercise, I will present the design rules and process of building a fullstack sales website in terms of technology, specifically how I designed it and applied the design principles, explaining in detail about its functions and characteristics, and finally evaluate the functions and design In the design of my website, there are two main interfaces, admin and customers, and I have authorized for them so that customers can go to the website to purchase and the administrator can receive data about orders as well as perform other tasks functions like add, edit, delete.
Design plan (P5)
Project website introduce
LONGTECH Shop is an e-commerce online store that buys and sells technology-related products like as computers, phones, televisions, and so on All of these items are available on the internet Customers can simply observe and search what they are looking for on the website's main page
This shopping website was created to display technology-related service categories By clicking on this product, you can see specific information about the product name, total amount and price, as well as detailed remarks about it The website will be designed for a variety of Common Platforms using a variety of website development technologies such as HTML5, CSS, JavaScript, and PHP The website is compatible with all major web browsers, including Google Chrome, Firefox, and Microsoft Edge Also appropriate for most responsive screen sizes such as laptops, televisions, and tablets.
User’s requirements by using User Story
A User Story is a need presented through the eyes of an end-user A User Story is nothing more than a clearly defined requirement An established technology firm required a website that could showcase items in order to promote their products and accept online orders
• I want to add/edit/delete products for categories to my website so that customers have more choices
• I want to access customer account information so that shop can track order history
• I want to create an account for customers so that I help them login to the purchase homepage
• I want to correct the information for the customer so that I can help them verify the information for each order
• I want to delete the account information of customers who have not been on the website for a long time
• I want to see the customer's order details so that facilitate delivery
• I want to see customer feedback on the product so that shop keep in mind during the upcoming import process
• I want to login so that I can use the full utility on the website
• I want to update my personal information in my account to correct purchase information
• I want to see a detailed list of product categories so that helping me choose my order
• I want to know how much so that I can pay for a product in the cart for checkout
• I want to order online so that I don't have to go to the store
• I want to delete the selected products in the cart
• I want to send feedback for each purchased product to rate them for quality.
Review accessibility standards and guilines for website
Web Content Accessibility Guidelines (WCAG): This is a set of guidelines developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to people with disabilities WCAG has three levels of conformance - A, AA, and AAA - with each level having specific success criteria that must be met Accessibility standards and guidelines are important for ensuring that digital content, websites, and applications can be used by people with disabilities These standards and guidelines aim to ensure that everyone, regardless of their abilities, can access and use digital content, including people with visual, auditory, physical, and cognitive disabilities
To make your website user-friendly, it should have a clear purpose on each page This will help users navigate and engage with your content Websites can serve different purposes, such as providing practical information, entertainment, or selling products However, all websites share core purposes such as showcasing expertise, building reputation, generating leads, and sales (Marianne, 2021)
➢ Simplicity The user experience and usability of your website are improved by simplicity Design choices such as color, typography, and imagery can impact the customer's behavior towards your brand A brand-specific color palette using a maximum of five colors, complementary colors, and pleasing color combinations can be used to communicate messages and evoke emotional responses Typography plays a crucial role in the website's visual interpretation and should be limited to three legible typefaces Imagery, which includes still photography, illustration, video, and graphics, should be expressive and capture the brand's spirit and personality Using high- quality imagery forms a first impression of professionalism and credibility in visitors' minds (Marianne, 2021)
Navigation is the wayfinding system that visitors use to interact with and find what they need on a website Simple, intuitive, and consistent navigation on every page is crucial to retaining visitors If navigation is confusing, visitors may become frustrated and leave the site to find what they need elsewhere
An effective website design should consider the F-shaped pattern, which is the most common way visitors scan text Eye-tracking studies have found that people tend to focus on the top and left areas of the screen The F- shaped layout follows the natural pattern of reading in the West, which is from left to right and top to bottom By designing a website that works with a reader's natural scanning pattern, you can increase the likelihood of engagement with your content
➢ Visual hierarchy The arranging of things in order of importance is known as visual hierarchy This is accomplished by the use of size, color, images, contrast, font, whitespace, texture, and style The establishment of a focus point, which shows visitors where the most significant information is, is one of the most important purposes of visual hierarchy
A good website has both good design and good content Great content may attract and influence visitors by converting them into clients by using appealing language
➢ Grid base layout Grids help to structure your design and organize your information The grid assists in aligning and keeping objects on the page neat The grid-based layout organises content into a clean rigid grid structure with columns, sections that line up and feel balanced and enforce order, resulting in a visually appealing website
➢ Mobile Friendly More people are browsing the web on their phones or other mobile devices It is critical to consider developing your website with a responsive layout that can adjust to multiple screen sizes
➢ Create a web page format: You must first decide what kind of website you want to build If you have an online store It will be focused on new product launches, will have a high level of consumer involvement when it comes to purchasing, and customers will be able to contact the Shop using the information on the home page (Juviler,
➢ Establish objectives: Make a list of the most important objectives for the website Make a specific list or a list of the most basic components, and add anything else that comes up when building a website to the list
➢ Concerns concerning the website: Ask questions like "How many pages should a website have?" as if you were a customer
• Is an account login required to purchase goods on the website?
• Is it possible to join the site as a member?
• Is it possible to order through the website?
➢ Create Basic Content: One of the most important aspects that distinguishes your website from others is its content The content of a website is crucial to its success Many people believe that establishing a visually appealing website, increasing loading speed, and offering high-quality merchandise is sufficient, but these are merely auxiliary aspects The most crucial thing for a new website is to create content, yet most of us still don't comprehend the true value of content, therefore website content production remains a gray area
➢ Website Promotion: Businesses can use social media to sell items and services on their websites, as well as to improve their image and build brands
➢ You'll need to create your website once it's up and running If you think it's just working properly, you're mistaken You should continually be researching and upgrading your website in order to keep your visitors happy and comfortable You should also provide your customers with very useful items These are the qualities that will make your website appealing and assist you in retaining a big number of customers (Juviler, 2023).
Mechnism diagrams
Each interface will have a separate login account to access the website The customer account cannot access the admin page
Figure 3: Use-case of page admin
In my website, admin can add, delete and update products, categories on the website, in addition, censoring customer information is also essential Admin can also add/edit user accounts and delete accounts and users who violate the terms Admin can read feedbacks of customer about product and delete them when already reading Admin can also aprrove and cancel order help customers and watch that detail order
Figure 4: Use-case of page customer
When visiting the website, customers can view products as well as search for products they want to buy Customers will not be able to go to the shopping cart page if they do not have an account in the system Therefore, customers can register, log in to use the website, update their own personal information, view information about the items on the website and place an order, they can also delete the product added in the cart After ordering, customers can send feedback for shop to review quanlity items
Figure 5: ER diagram of my website
The diagram above has 9 entities that are related to one another, with the OrderItems entity being distinct from the link between the two segments sales and productions There are 7 relationships between 9 entities:
• Role and Users :(1 - m) 1 role can have multiple user but those users can only be had by 1 role
• User and Orders (1 - m): 1 user can place multiple orders but those orders can only be ordered by 1 user
• Users and Tokens (1-m): 1 user can have many tokens but the tokens can only be used by 1 user
• Orders and Order_Details: (1 - m): 1 order can have multiple items to more than 1 items of order detail if the orders contains more than 1 products, but each items in the order detail is only related to one order
• Product and Order_Details: (1-m): 1 product can have multiple order detail but those order detail can only be selected by 1 product
• Product and Galery (1-m): 1 product can have multiple galery but those galeries detail can only be selected by
• Categories and Product(1-m): 1 category can have multiple products but those products can only be had by 1 category.
Wireframes
I have applied the design principles outlined above to design a complete wireframe to bring to the user I use Grid base layout to divide the screen into 12 columns, this helps me design the right proportions as well as help my website display on many different screen sizes I use navigation for both the user management system and the client interface to help users find and click what they want on the site My wireframe provides a full range of unique, simple content that customers can see and understand In this part, I used the figma tool to build the interface of the longtech website as I introduced in assignment 1
Link figma wireframe of my website: https://www.figma.com/file/y1nu8LxxUQuyY5hYbDGuqk/LONGTECH?node-id=4%3A207&t=2UYfWJOxsvkALz5v-1 https://www.figma.com/file/y1nu8LxxUQuyY5hYbDGuqk/LONGTECH?node-id=0%3A1&t=y0GbTojeNwm2SVX7-1
Page 23 of 162 Figure 6: Page user mangement
Page 24 of 162 Figure 7: Page add/ edit user
Page 25 of 162 Figure 8: Page categories management
Page 26 of 162 Figure 9: Page product management
Page 27 of 162 Figure 10: Page add/ edit product
Page 28 of 162 Figure 11: Page order management
Page 29 of 162 Figure 12: Page orderDetail
5.2 Interface User 5.2.1 Register and Login
Page 31 of 162 Figure 14: Page register and login
Page 32 of 162 Figure 15: Page profile
Page 33 of 162 Figure 16: Home Page
Page 34 of 162 Figure 17: Page Categories
Page 35 of 162 Figure 18: Page detail product
Sitemap
I applied the F-shaped pattern reading as outlined above to design user-guided sitemaps My sitemap follows the function from top to bottom and from left to right following as:
Figure 23: Site map for admin page
Users must have an admin account to access the admin page If customers intentionally access this page, they will be redirected to the login page here If there is no admin account, they will not be able to access the website When admins go to the site they can manage user accounts such as adding, editing and deleting user accounts The admin account cannot be deleted In addition, they will manage the product catalog and products they can add, edit and delete items for the website to display on the front-end page They can manage the order by approving or canceling the order for the customer, and view the order details for delivery to the customer Finally, they can read the customer reviews about the website's products
Figure 24: Site map of my website
Customers will initially peruse the homepage interface of the website, where they can search for information about things for sale Promotions and adverts will be shown by category on the main page, allowing consumers to pick and examine product details Users cannot place an order unless they first create an account and log in After logging in, the user will be able to utilize all website functions, including ordering After completing the order, users will be able to enter the shopping cart page by clicking on the cart icon If the user no longer wishes to purchase, they can remove the previously selected things from their shopping basket After viewing the cart, the customer will be taken to the checkout page to place an order They have the option to continue with the purchase if they wish Users can go to the contact section on the navbar to go to the contact page to send feedback to the store Users can also change their personal information, such as phone numbers, addresses, usernames and passwords.
Implementation (P6-M4)
Screenshots of Final and source code Samples of the Website
In this section I use wireframe as the main design template to make the website And apply the design rules mentioned above such as grid layout, mobile friendly to build the website
The admin template is the general interface of the pages in the admin interface In this part, I have divided it into 2 files, header.php file and footer.php file to use for all pages
Figure 25: File header.php (Admin)
Figure 26: File footer.php (admin) Here I use bootstrap 4 as a generic template for the interface As a result, I get a generic template interface like this:
I reuse the template above, this part I use bootstrap, css inline to build the table interface for the page and use the foreach loop combined with the data query to dump the data on the screen
Figure 28: Show data in user page
I use jquery ajax technology to do user account deletion The if else and switch statements are used to test the condition When clicking the delete button, a confirmation message will appear to delete data The admin account cannot be deleted
Figure 30: Code action delete user account
Figure 31: Action delete user account
1.1.3 Add/ edit user account page
When clicking the add or edit button the user will be redirected to the Add/edit user account page:
On this page, I still use the above template and the boostrap 4 library, css inline to create the front-end interface for the page and the foreach loop to dump the data The if-else statements are used to test the condition
Figure 32: Code add/ edit user page
All the boxes I have left required=true to force the user not to leave the input blank except the last 2 cells
In the last 2 cells, I use the ternary operator instead of if else to check if the user account already exists or not, if it exists, then it doesn't have to be entered, it must be entered to register an account
I use get method to get user id If id > 0 means the user already has an account, they will update set the account to correct information, otherwise, if there is no account, the insert into statement will be executed I use the ternary operator condition to check the condition if the user exists, the password box can be left blank when updating, and if the user does not exist, the password is required because required= true
Figure 33: Code action add/ edit account user
When the user clicks on the category item, it will display the category page Here I use a foreach loop to dump data onto the page from a query still in the database
Figure 34: Foreach to show data in category
Figure 35: Category page When the user clicks on the input box and clicks to save the product, the list will be displayed in the next table I use post request method to add and update data If - else to check the condition if $id>0 ie the category already
Page 49 of 162 exists and then will execute the update child statement otherwise, will execute the insert into statement to add the category
Figure 36: Code add/ edit category
I use jquery ajax technology to perform the action of deleting category When clicking the delete button, a confirmation message will appear to delete the data If the data of the category has products, it will show a message that it cannot be deleted because of the association of primary key and foreign key If the category has no products, a data deletion action will be performed
Figure 38: Delete data in category page
1.1.5 Product management page Just like the above two pages on this page I still use the above template and boostrap 4, css inline and foreach loop to display products
Figure 39: Code product management page
Figure 40: Interface product management page
I use jquery ajax technology as above to perform product delete action When clicking the delete button, a confirmation message to delete data will appear If - else and switch-case statement to check condition
Figure 41: Code action delete product
Figure 42: Delete product in product management
1.1.6 Add/ edit product management page
When the user clicks the add button or the edit button, it will be redirected to the Add/edit product page This page I also use template and boostrap 4, css inline Get method to get id and use foreach loop to display data If - else and switch-case statement to check condition
Page 53 of 162 Figure 43: Code add/ edit product page
Figure 44: Add/ edit product page
Because each product has a different id code I use get to get the product id If id>0 means that the product already exists, the system will now perform the update process, otherwise the product does not exist, it will perform the process of adding a new product
Figure 45: Code action add/ edit product
When the user clicks on the order management item, they will be taken to the order page On this page I also reuse template, boostrap 4, css inline and foreach loop to dump data Orders will have two statuses: approved and cancel If-else-if statement to check order status Initially order status =0 If status = 1, it will be approved, if it is 2, it will be cancel
Page 56 of 162 Figure 46: Code order management page
I use ajax to perform order status update action
Figure 47: Action update_status order
When the user clicks on the details button on the order page, he will be redirected to the detail page of that order Here I use boostrap 4 and inline css to make the order more eye-catching, get method to get order id, and foreach loop to display order information:
Page 58 of 162 Figure 49: Code order detail page
Responsive
Because all my files use boostrap 4 I calculated the grid layer to display on different size screens
• For example navbar I used boostrap classes like container-fluid, navbar-nav mx-auto, nav-item This will help my header will display on many different screen sizes together
Figure 86: Boostrap 4 of navbar in my project
Page 84 of 162 Show on displays:
Figure 87: Header in screen PC
Figure 88: Header in screen tablet
Figure 89: Header in screen iPhone 12 Pro
• For exmaple: Or in the display of products I use classes like 'row', 'col-md-3', 'col-6' of boostrap 4 to divide the size of each product for each display
Figure 90: Boostrap 4 in category part
Figure 91: Category laptop in Screen PC
Figure 92: Category laptop in screen tablet
Figure 93: Category laptop in screen iPhone 12 Pro
• For example: the footer part I use the container, row, col-md-4 class to divide it into 3 parts to display on the screen:
Figure 95: Footer in screen PC
Figure 96: Footer in screen tablet
Figure 97: Footer in screen iPhone 12 Pro
Compare and contrast the multipage website to the design document (M4)
Figure 98: User mangement real and wireframe
Figure 99: Add/ edit user account real and wireframe
In general, the actual page is built very similarly to the wireframe, with the header and body fully developed and streamlined Each panel's border has also been smoothed and modernized
In comparison to the design document, real user management is also created to have the majority of the functionality as the given document, including the following functions: product search bar, category filter section, navigation bar design flexible, logo, and button logout All functionalities are designed to be both aesthetically pleasing and functional The page loads quickly as well Furthermore, all websites make use of user-friendly fonts But unlike the design here, I don't show delete button with admin account I want the admin account to not be deleted If I want to delete the admin account, I have to edit the user account to delete it The position of Elements also quite meet the criteria of Design Standard
Figure 100: Categories management real and wireframe
Compared to the design document, the actual page is built very much like a wireframe, with a fully developed and streamlined header and body The page actually has tables, angled title bars make the page more
Page 94 of 162 beautiful The silde bar items used icons to enhance the aesthetics of the page more than the original raw document The page still fully meets the functions of adding, editing, deleting
Figure 101: Product management real and wireframe
Figure 102: Add/ edit product real and wireframe
Compared to the design document, the actual page is built very much like a wireframe, with a fully developed and streamlined header and body The page actually has tables, and the angled title bars make the page beautiful Button colors are used to make the website more aesthetically pleasing The page still fully meets the functions of adding, editing, deleting The note box is made in summernote style so that users can edit product descriptions such as italic, colorful text, insert photos and videos for products
Compared to the design document, the actual page is built very much like a wireframe, with a fully developed and streamlined header and body The page still fully meets the functions of adding, editing, deleting The font is thin, the buttons are rounded, the css is quite eye-catching for users
Figure 103: Order management real and wireframe
Figure 104: Detail orders real and wireframe
Figure 105: Feedback mangement real and wireframe
Compared to the design document, the actual page is built very much like a wireframe, with a fully developed and streamlined header and body The page still fully meets the read and delete functions The font is thin, the buttons are rounded, the css is quite eye-catching for users When the read button is clicked, the feedback is marked read and jumps down after the unlearned responses
In general, the actual page is built quite similar to the wireframe The page uses background images and css color schemes, so it looks very nice Thin fonts, rounded buttons, thin borders However, the register page was missing the eye icon compared to the original design This is a small flaw in the process of building a website
Figure 106: Login page real and wireframe
Figure 107: Register page and wireframe
Figure 108: Home page and wireframe
The homepage is designed very similar to wireframe, fully satisfying 3 main parts header, body and footer Items are made of moving images, so it is easy to create sympathy with customers The buttons are designed angular
Page 100 of 162 and use css so it is quite eye-catching Icons have been added with meanings for each item's purpose All are more complete and beautiful than the wireframe version Animated effect of the big image in this site is quite eye- catching which assesser based on web design standard
This page is designed based on the wireframe and improved over it The added icons and the color of the update button brought the page to life, the small shopping cart icon and the small message inform the quantity of the selected product
Figure 109: Profile page and wireframe
This page is very similar to the homepage, just different slides, so it's all fully responsive compared to the wireframe, the friendly general font without footer and the cart icon on the right side helped make a complete website compared to the previous the design
Figure 110: Category page and wireframe
This page is the same, all the items are displayed with images, the buttons are css added colors and the corresponding icons have made the page more complete than the wireframe to bring to customers
Figure 111: Product detail page and wireframe
In general, these two pages are quite similar to the design The two pages still fully meet the function of adding, deleting, and entering information The colors used are quite limited The tables are aligned to the boostrap standard to display on many devices, so the actual website is quite different from the size of the tables in the template Cart's responsiveness is quite good and reliable after some testing It can automatically adapt its size to accommodate various screen sizes
Figure 112: Cart page and wireframe
Figure 113: Check out page and wireframe
In general, these pages are very similar to the wireframe, this is the perfect version of the website, the map is displayed, the buttons are colored css, the information input boxes are rounded and softer than the design
Figure 114: Contact page and wireframe
Critically evaluate the design and development process against your design document and analyse any technical challenges (D2)
Evaluation the design document
• The objective of the document, which I designed to convey clearly, is to offer the company's products and services to potential clients Goals for the website will be clearly specified and measurable, such as boosting website traffic and generating leads
• My design documentation includes mechnism diagrams such as flow diagrams, admin and user use-case diagrams, er diagrams and wireframes to outline the functionality of the website, including product catalogs, online ordering systems and contact form The technical requirements for the website are clearly defined, including the need for a content management system and e-commerce functionality
• Because I began developing a website and regarded the wireframe as the primary blueprint for this website So, during the development phase, I diligently measured each pixel gap to verify that the finished site properly suited the wireframe However, it is a far more complicated board than the wireframe that I sketched, as I noticed a few faults that must be fixed along the process
• I employ documentation rather than a one-time action It is not always possible to create all papers in a single effort
As a result, as I prepare and build the website, my design materials are regularly updated to provide the most complete website design to help users through the process.
Evaluation the process of development
The reactions, perceptions, and feelings that users have when interacting with a website are referred to as user experience (UX) Great design gives me a sense of ease and simplicity It also could also be the frustration I feel when interacting with the poor design
That's why it's critical to consider the overall impression I want to leave on the user before making particular decisions about how to create that impression
If I effectively meet the deeper requirements of all users by delivering overall pleasure, engagement, and emotional appeal, my website can become a primary focus in users' daily life while also meeting my website's business goals
User Interface (UI) design encompasses all of the visual components with which your users interact on my website Everything the user sees on their screen and everything they click to move them through the experience is part of it
Great UI design makes my website visually appealing, but it goes beyond that The goal is to make the real user experience easy, accessible, and usable This includes employing just focused, targeted content and copy selection, explaining a user's preferences throughout the experience, and ensuring information is readily available at all times
Intuitive user interfaces typically of my website include:
Slow load speeds are disliked by all users And it has serious implications for my website Users will not wait if our site is slow They will depart This is the truth of today's web app development issues As a result, I needed to scale my application quickly I don't want my site to slow down once it hits the market or if traffic increases This kind of forward preparation will ensure that my first website launch can achieve the speed and performance
I want for our early users, who are frequently our important people It also means that my original build will serve as the foundation for future company website growth
I intend to make the website load faster by first making a CDN connection for the website and then utilising images from the system rather than needing to load them online
The scalability issue is related to how I want my site to evolve over time If I want to build my site today, I'll need to know as much as possible about what we want it to do in the future
My site may have interesting information when it first launches, but after a year or two, I can create a rich, thorough experience Scalability comes into play here Scalability occurs when a website is initially developed with the intention of incorporating new capabilities and features in the future This can be incorporated from the beginning of the development process My website can be constructed to expand and evolve over time if I can explain a long-term vision for it Scalability planning assists me in managing various types of users, handling increased traffic, and scaling.
Evaluating the quality of website
• The quality of a website is determined by both the process and the ultimate result Mandatory is thus a strategy that takes into account the unique features of a website The same model can be used to create a website When performing requirements analysis, I discovered that the model can provide a good reference wireframe
• The functionality of the website is another important factor that can affect the user experience As a result, my website should load swiftly and without issues My website must also be dependable and secure, with no downtime or performance concerns, as well as provide accurate product information Next, my website must be search engine optimized, with the appropriate information, alt tags, and keywords to assist users locate it as soon as possible So I had to apply the approaches listed above to construct a completely functional and user-friendly website
• My website must also have trust signals and social proof to prove its credibility and reliability These can include customer reviews, testimonials, and ratings Therefore, I must implement clear and transparent policies regarding privacy, security and customer service
• The overall user experience is very important to the success of my website The user interface of my site should be intuitive, with clear navigation menus, buttons and links that make it easy for users to find what they are looking for They can also leave feedback so I can learn from them and update my site continuously to make it as complete as possible
• Finally, about the graphics, I will be important to set up to sell technology products So, color image element is very important in my website I have to design so that the interface is eye-catching, inspiring to users
Inaddition, I have to design them so that they display on many interfaces with different screen sizes so that users can experience them.
The technical challenges/ difficulties in web development
• During the process of creating a website, the most difficult thing I encountered was SEO optimization I have to design how my website can meet w3c standards So in the implementation process, I always have to put semantic problems first, such as a web page that uses only one h1 tag or ul tags with only direct child tags li, etc
• Next, I also had difficulty making the website responsive I had to design it so that it would display on PC, tablet or mobile So, I solved this problem by using boostrap 4 and consulted the template documents online, as well as try to avoid using absolute units like pixels, but instead use relative units like rem, %, vh, vw so that they are taken according to their respective parent tag sizes, this will help the website look and feel mine can be displayed on different screen sizes
• I also have difficulty in optimizing css, javascript In the process of building the website, I have had a lot of code repetition which will affect the loading speed of the website So to fix this I would move the CSS rules or JavaScript snippets into an external file instead of repeating the code on every page This method only needs to be loaded once per hit So instead of downloading dozens or hundreds of lines of code, I simply reference the script or stylesheet that was downloaded earlier
• I also had a hard time choosing images for the website's products Using lots of high-quality images makes my website more visually appealing and user-friendly, but it also makes my site load slower So in the process I usually convert the image from svg to png or jpg, but this method can make the image quality of the web reduced compared to the original
• Finally, the difficulty that I faced was how to make my website display on many different browsers Many times, my css properties write only support on chorme and cup browsers and browsers like mozila, opera, safari are not supported So, it took me quite a while to find the properties and ways to display that css property in these browsers.
Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website User
Test plan
• As a user, I want the site to be successfully registered as a new user
• As a user, I want the site to be successfully logged in
• As a user, I want the website to see the product so that I can choose to buy it
• As a user, I want to search for a product by typing in the search box
• As a user, I want to add a product to my favorites
• As a user, I would like the site to allow me to update my profile information so that I can make changes as needed
• As a user, I would like the site to allow me to contact you to submit product information feedback for the site
• As an administrator, I want to visit the site to read customer feedback
• As an admin, I want to delete previously read replies
• As an administrator, I want to help customers cancel orders or accept orders
• As an administrator, I want to go to a website to view customer orders so that I can ship to customers
• As an admin, I don't want clients to access my admin page without an admin account
• As an admin, I want to add products to my site to display on the user page
• As an administrator, I want to delete products that have not been purchased for a long time so that they are no longer available in the system
• As an administrator, I want to edit product information so that it can be read by customers
• As an admin, I want to create an account for my customers so they can make purchases
• As an administrator, I want to correct a customer's account information so that they have the correct information if they request it
• As an administrator, I want to remove a user account that violates the site's community policy
• As an administrator, I want to search for a product I added earlier by typing in the search box
• As an admin, I want to search for a product by a previously added category by typing in the search box
• As an administrator, I want to search for user accounts by role by typing in the search box
• As an admin, I want to search for responses by a previously added subject by typing in the search box
• As an admin, I want to search for an order by a previously added phone number by typing in the search box.
Testing and result
1 Register with an existing email on the system
Enter an existing email: dlongminhtan@gmail.com
Password box: 1234567 Password confirmation box: 123456
Enter the wrong email type For example dlongminhtangmail.com, missing @ character show missing @ error
4 Password must be 6 or more characters
Enter password with 5 characters example 12345
Update address: Hà Nội instead of begin Thái Bình
Show message Success and update success
7 When the customer has not logged in but wants to pay, go to the login page
Click on cart when not logged in
Display the message and click ok to go to the login page
Add 3 iphone 14 pro products in detail page to cart
Remove the product iphone 14 pro max from the cart and reduce the number of laptops to 1 delete and reduce successful
Enter information and click pay bill to pay successful payment and go to complete page and cart showing number 0
“gaming: in the search box on the navbar display products with the word
When you click on the favorite button, a notification will appear that the product has been added to your favorites
13 Send feedback, contact the store
Enter the information and press the seed feedback button
Submit successfull and show complete feedback page
Click the logout button on the navbar
Log out of your account and go to the login page
15 When customers access the admin page, they must have an admin account to access otherwise, they will switch to the login page
Enter url: http://localhost/myFirstW ebFullStack/admin/index.p hp
Show login page have url: http://loc alhost/my FirstWebF ullStack/a dmin/auth en/login.p hp
16 Customer account can't login to admin page
Enter customer account: dlongminhtan@gmail.com pass: 1234567
Show message not admin account
17 Login to the admin page
Longtdgch210562@fpt.ed u.vn pass: 1234567
Change the laptop product to computer
” on the side table and show the
" in the navbar of the custermer page
After editing and navbar of user page
Click button delete to category laptop display a confirmati on message then display a message that cannot be deleted because there is a product in the category
Add tablet category to the beside table
Displayed from the tablet on the side table and on the navbar of the user page
After adding and navbar user page
Show this product on product manage page
22 Edit information product fix price: 2,100,000 VNDC discount:18,000,000 VNDC
The correspon ding result is displayed on the screen
Remove product: Acer Nitro 5 Gaming Laptop AN515 57 5669 i5
Show message and delete from system
Click the appove button Show approve and detail button
Click the cancel button Show cancel and detail button
Click button detail above Order have email: openai@gmail.com
27 Mark read feedback of customer
Click button read of email: openai@gmail.com
The button to read the sign
Page 125 of 162 disappears and push the line with the read button up After clicking
Click button delete of email: openai@gmail.com show a deletion notice and remove this response from the site
Enter informations of user pass: 1234567
Display the newly created account on the user mange page
30 Create an account with an existing email on the system
Enter customer information, Enter email: dlongminhtan@gmail.com
31 Confirm password to create account
32 Granting website access rights to users
Edit account have: dlongminhtan@gmail.com to admin account
33 Remove user accounts that violate the site's rules
Delete account with email openai@gmail.com
Show message and don't show that account on user manage page
In box search of navbar
Show products contain word gaming Fail
35 Click on the product category to display the correspondi ng products in the category
Click category Mobile Show product have category mobile
36 Find the order by phone number
In box search of navbar
In box search of navbar
Show informatio n that feedback Pass
In box search of navbar
Show informatio n those products Fail
Enter keyword: admin in box search of navbar
Show 2 accounts admin on screen Pass
Click button logout in navbar
Logout success and show login page
Overall evaluation of testing part and solution
After the testing process, through 40 tests, the program received 5 tests that did not pass the test condition That shows that my website is still incomplete, there are still many problems to fix The test panel provides an overview of the possible scenarios in the system and the details clearly allow users to better understand my website These 5 fail cases are still under maintenance and I will try to fix them so that I can bring the most complete website to users
• The search function of the admin page is currently having problems The page was found the page was not found so I will improve it by the following:
In the header.php file in the admin page in the search form, I will name the variable so that the action will be .php to be able to call multiple pages
Then the page I intend to search, I will assign the variable value with the corresponding file name, remove the .php Now I search keyword = with the site data, the data will be displayed
Figure 115: Code process searching in order management page
From the above results, we can see that the repair process was successful The order was found by entering the phone number In addition, by searching by phone number in the above code, users can find orders by fullname, email, and address
Case 34, 38 successful is similar to case 36:
Figure 118: After test again case 34
Figure 119: After test again case 38
• Regarding case 35, when clicking on the category line on the category management page, the products about that category are not displayed, I will handle it as follows:
On the category page I will add a link tag for the category name line and for the href to be the link to the product page, I use the get method to get the category id
Figure 120: Fix bug in category page
Then in the product page I check that id if it exists then execute the query and assign the category_id with the id just pushed up in the category page
Figure 121: Add condition for product page
As everyone has seen the computer has id = 1 and after testing id = 1 has been pushed to the product page and displays the data In short, I successfully fixed it
• The case 12 about the add to favorites button is also crashing and I will fix it as follows:
I would fix it by using javaascripts to create a notification function, and call it with the button's onclick event Notification function I use alert to notify added to favorites
Figure 125: Notification add to love
All the above error cases have been solved by me and fixed it The first 5 error test cases after performing the repair process was successful, this helps my website system become more and more perfect.
Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages (M5)
Quanlity assurance
Quality assurance (QA) is a systematic procedure for verifying whether a product or service fulfills particular requirements, which is necessary for designing or manufacturing dependable products The major goal of quality assurance is to boost consumer confidence, improve work procedures and efficiency, and boost a company's credibility, making it more competitive ISO, or the International Organization for Standardization, is a key proponent of quality assurance practices and assists in mapping the procedures used to achieve quality assurance Companies frequently utilize ISO 9000, an international standard, to ensure the efficacy of their quality assurance system Quality assurance was first institutionalized in the manufacturing business and has subsequently spread to other industries, including software development (Gillis, 2022)
The implementation of quality assurance by a company results in the production of products and services that align with customer needs, expectations, and requirements This, in turn, creates high-quality products that foster trust and loyalty among customers The standards and procedures that are a part of a quality assurance program play a significant role in preventing product defects and issues from arising (Gillis, 2022).
My website’s quanlity assurance
When done, the original design was an exact colorless clone of my website We collaborated with the customer to create a thorough wireframe The main distinction is that there will be no graphics or colors in the
Page 138 of 162 wireframe In addition, we should specify the typeface and font size, as well as how the buttons were employed to add borders and corners Icons have been added according to each item's function to make the interface look better I have applied successfully the design principles mentioned above to create the most complete website for users
Figure 126: Wireframe and real page
Different from the original design plan, in the process of creating the website, I used images with png and jpg extensions instead of using svg extensions like when planning Because png and jpg are smaller in size than svg, it helps my website load faster However, this can also affect the image quality, but this only happens if the user zooms in to the full size of the browser I have to make sure that the images on my website are always in the correct aspect ratio Together with the css “transition all 5s” property effect, the images in my website are uniquely animated every time the user hovers over them It is not too colorful so as not to hurt the eyes of users, but just enough to create an impressive highlight for users with your website
Figure 127: Css transition in my website
Figure 128: Example about Images in my website
We must guarantee that our material comprises all of the pages required for launch, is of good quality, and includes proper language, spelling, and other components
Figure 129: Example about image content in my website
With the successful application of design principles, I have learned how to use boostrap 4, CSS Grid Layout Module and relative css units like rem, vw, vh, % which have helped my website can display on different screen sizes I can make sure that my website can run on all devices It can be seen that my website is responsive even though it is not very professional
Figure 130: Display on PC (size: 1447x571)
Figure 131: Display iPhone 12 Pro (size: 390x844) and iPad Air (size: 820x1180)
2.5 Browser test 2.5.1 Display on browser
Google chrome -the most popular browser
Coccoc- the common browser in Vietnam
The slider displays photos more clearly in Google and CocCoc Browser
In Microsoft Edge, the slider images commonly fluctuate in size depending on the slider size
Web color tones are displayed clearly in Chrome and CocCoc The separation between the hues is clearly visible, demonstrating that the website is very color compatible with these browsers
In Microsoft Edge, the Tone is quite bold
In general, the website can be displayed on many different browsers, each browser has clear advantages and characteristics, different colors, but the size and aesthetics do not affect my website too much It can be said that my website can display compatible on many different browsers
I compared the performance of my website across multiple browsers It works nicely in modern browsers such as Microsoft Edge, Google Chrome, and Mozilla Firefox When using ancient browsers, it may run quite slowly in some circumstances
This is when I use chrome to test my website performance:
Figure 132: Test performance on chorme
I use microsoft edge to test my website performance:
Figure 133: Test performance on microsoft edge
From the above 2 test cases, we see that the download speed on the chorme browser is longer than the other browsers Overall, the page load speed is quite good, which is what I expect when my website is launched
User information such as email address number, phone number, address is applied In addition to the password, my website system uses MD5 code to encrypt in the process of customer creating password This means that even the admin cannot know the customer's password to access their account The customer generated password is only visible on the server system my sql php admin This also helps to improve the security of our website Customers will feel safe when shopping on my website
Figure 135: Use MD5 in process create and login account
Figure 136: Password encrypted with md5
Figure 137: History on website in systerm
Hackers will not be able to get customer's password when attacking our website Because each time a customer logs into our website, the md5 code generates a different line in the login history in the tokens column above This will help the security of our website be better.
Critically evaluate the results of your Test Plan and include a review of the overall success of your multipage website; use this evaluation
Tools
I use tools to design and create my website
Figma: design wireframe Diagram.io: design mySql of relational SQL by ER diagram
IDE: Visual Studio Code version 1.60.1 Hosting: XAMPP v3.3.0 has Apache distributions for Apache server, PHP And it is commonly a local host or a local
Page 151 of 162 server This local server works on my own laptop The utilization of XAMPP is to test the clients or website before uploading it to the remote web server This XAMPP server software gives me the suitable environment for testing MYSQL, PHP, Apache projects on the local computer
Web Browser: Coccoc, chorme and microsoft edge.
Evaluate the web
Based on the testing and case studies described above, I reach the following conclusion:
• Wireframes are drawn according to the customer's requirements and in accordance with the standard 12- column grid
Figure 138: Wireframe follow standard 12-column grid.
• The parts are separated from each other and implemented very logically
• Fluently use html 5 language but don't know how to optimize seo
• Haven't used tags like to separate sections to make it easier to update the code later
• Use classes of bootstrap 4 library to responsive website for different screen sizes
• Use many available libraries such as icon libraries to bring the website to life
• Ajax and jquery technology have been used by me to perform dynamic actions such as adding, editing, deleting, or validating data to make my website more attractive
• I use a lot of javascript code to make response messages for buttons like delete, update, or access the cart when not logged in
Figure 139: Notifications used by javascipts
• I have consulted summernote javascript code on javascript internet to create a product description box that admins can add color, animation and detailed product description
• I use all 3 ways of css: inline, external and internal This caused my code to be repeated quite a lot during the web creation process Many cases related to css property priority was overridden during website creation
To create this website on the server, I use the PHP programming language I've come to the following conclusion:
• Well organized presented php syntax directly on html code
• I splitted into multiple php files to perform different tasks and reuse php files with the same task to avoid wasting memory
• Some of the code inserted between the html language is annoying for the website builder, me
• PHP's easy-to-understand syntax helps me create websites that are efficient and accessible
• I used loops like foreach, while and for to dump data from the databse onto the UI
• If-else conditional statements and ternary operators are used by me to make the system more compact
• I used session and cookie to store cart and login account
• I already know how to apply the ajax request technology Get and Post methods to push data to the server
• I already know how to use the md5 code to encrypt the password of the user account on the website to make the website secure.
Advantages and disadvantages
• Highly appealing layout, with reduced parts and information - There is no unpleasant or inappropriate content, and it is appropriate for people of all ages
• The motion effect of the images as the user hovers the mouse over them entertains the children while lowering stress for the user
• High image resolution, the image displays the correct size in png and jpg formats
• It works well on any mobile device, tablet, or PC
• Can communicate with any user via Gmail
• Users can register, login, change information, place orders immediately
• Product details are clearly displayed
• Users can search for products or submit product reviews to the shop
• Products are clearly shown in detail
• There are notifications displayed for each function when the user clicks on buttons like delete, update, cart
• To provide more information to consumers and answer their inquiries, the website is linked to other fanpages or social networks
• The page transition effect makes it comfortable for users to put
• The site is secure thanks to the use of MD5 encrypted password
• Sometimes small errors appear on mobile devices
• The add to love button is under maintenance and can't be completed
• When logging in with gmail, the system cannot get the avatar
• Payment method not created yet
• There is no purchase history function yet
• There is no function to cancel orders on the customer interface
• There is no chat box to consult customers yet.
Improvements
I have successfully applied the design principles and created a fullstack e-commerce website for myself Website has made breakthroughs with obvious advantages as mentioned above However, there are still some bugs, the feature is currently under maintenance So in this section I will highlight future improvements to my website and outline those improvements via wireframe
• Now that technology is developing, there are many forms of payment, not just cash So I will add payment methods such as credit card, cash, When the customer enters the order information in the check out page, if he clicks on the cash button, he will keep it, and if he clicks the credit card button, a form will appear for the
Page 155 of 162 customer to enter the credit card information and click submit to return to the check page out then click pay bills to pay
Figure 142: Payment by credit card
• I want my website to be able to support people to login accounts on different platforms So I plan to create more login function with facebook account, phone number for website
Figure 143: Form login in the future
• I will add the function to select the avatar for each account in the customer profile section The website can take the profile picture of the facebook or google account After entering the profile page, users can click the plus sign to select an image where they can update their avatar on the website
Figure 144: Update avatar profile in the future
• Currently, there are more and more websites on the market, so to make an impression on customers, my website must have good customer service, so I plan to create more chat windows for consultants and
Page 159 of 162 customers so that users feel good service When successfully logged in, users can click on the chat bubble on the right side of the website to receive customer care of the website Here users can ask any questions related to our products and website We will respond within 1 minute
Figure 145: Message box in website
Figure 146: Chat box of website in the future
• I will add a color picker function when purchasing for each product so that customers can freely choose the product color they like
Figure 147: Detail product page in the future
The website is currently under maintenance So, we will try to complete the website as quickly as possible to be able to launch the market as soon as possible.
Conclusion
In conclusion, I have created a fullstack technology sales website with my own brand Although it is still very basic, and simple, it also marks certain successes and results in the process of learning and building it I have learned a lot and gained more experience in creating a sales website system Also, by participating in this exercise, I broadened my understanding of the PHP programming language, technologies such as jquery, ajax request, framework boostrap, and building on what I have learned from keywords In this study, I will continue to develop myself more and more to increase my knowledge of my major.