Developing an Electrical Store Web Application
Abstract
In this coursework, we explore the process of building an electrical
store web application. We’ll discuss the key components,
technologies, and best practices involved in creating a functional and
secure online store. Our focus will be on using HTML, CSS, PHP,
and MySQL for implementation.
Contents
1. Introduction
The advent of e-commerce has revolutionized consumer behaviour,
emphasizing the need for robust web applications. Our study centres
around an electrical store web application, which enables users to
explore, select, and purchase electrical products conveniently. Let’s
delve into the following aspects:
1.1. Purpose and Scope
Our primary goal is to create an intuitive and efficient platform for
users to shop for electrical products. By understanding the
architecture, components, and security measures, developers can build
a seamless experience that caters to both customers and
administrators.
1.2. Target Audience
Our application targets tech-savvy consumers seeking a hassle-free
shopping experience. Additionally, store administrators and
developers will benefit from insights into the application’s design and
functionality.
2. Problem statement
Enhancing User Experience in an Electronic Store
In today’s digital age, electronic stores play a crucial role in providing
consumers with a convenient platform to explore, purchase, and
manage a wide range of electronic products. However, ensuring a
seamless user experience remains a challenge for many online
retailers. The goal of this project is to enhance the user experience
within an electronic store system by addressing the following key
aspects:
1. User Registration and Authentication:
o Design an efficient user registration process that allows
new users to create accounts securely.
o Implement robust authentication mechanisms (e.g.,
username/password, OAuth) to protect user data and
prevent unauthorized access.
2. Product Discovery and Navigation:
o Develop intuitive interfaces for users to browse and search
for electronic products.
o Implement filters, sorting options, and categories to help
users find relevant items quickly.
o Consider personalized recommendations based on user
preferences and browsing history.
3. Shopping Cart Management:
o Create a user-friendly shopping cart system that allows
users to add, remove, and modify items.
o Handle scenarios such as out-of-stock products, quantity
adjustments, and saved carts for returning users.
4. Checkout Process and Billing:
o Streamline the checkout process to minimize friction for
users.
oCollect necessary billing information (e.g., name, address,
payment method) securely.
o Validate and process orders efficiently, ensuring accurate
billing and order confirmation.
5. Thank You Page and Post-Purchase Experience:
o Design a pleasant “Thank You” page after successful
transactions.
o Provide order details, estimated delivery dates, and any
relevant follow-up instructions.
o Consider post-purchase actions such as order tracking and
customer support.
Project Scope and Deliverables:
Create wireframes or mockups for key user interfaces
(registration, product listing, cart, checkout, and thank you
page).
Develop front-end components using HTML, CSS, and
JavaScript.
Implement back-end functionality using PHP or other server-
side technologies.
Test the system thoroughly to ensure usability, security, and
responsiveness.
Document the system architecture, APIs, and database schema.
Success Criteria:
Users can register, log in, browse products, add items to the cart,
and complete the checkout process seamlessly.
The system handles errors gracefully (e.g., invalid inputs, failed
transactions).
The “Thank You” page provides relevant information and
encourages further engagement.
2. Architecture and Components
2.1. Front-End Components
HTML (Hypertext Markup Language):
o HTML serves as the backbone of web pages, defining their
structure and content.
o Key elements include:
<html>: The root element that encapsulates the entire
document.
<head>: Contains metadata (e.g., title, character
encoding, linked stylesheets).
<body>: Houses the visible content of the page.
Tags for headings, paragraphs, lists, forms, images,
and links.
o Developers use HTML to create the layout, headings,
paragraphs, forms, and other essential elements of the user
interface.
CSS (Cascading Style Sheets):
o CSS enhances the visual presentation of HTML elements.
o Features include:
Selectors: Target specific HTML elements (e.g., by
tag name, class, or ID).
Properties: Define styling rules (e.g., color, font size,
margin, padding).
Box model: Determines how elements are sized and
spaced.
Media queries: Enable responsive design for
different screen sizes.
o By applying CSS, developers ensure a consistent and
aesthetically pleasing appearance across the application.
JavaScript:
o JavaScript is a versatile scripting language that runs in the
browser.
o Its role in our application:
Interactivity: Enables dynamic behavior, such as
form validation, real-time updates, and animations.
Event handling: Responds to user actions (e.g.,
clicks, input changes).
DOM manipulation: Allows modification of HTML
and CSS elements on the fly.
o Developers use JavaScript to create a seamless and
engaging user experience.
2.2. Back-End Components
PHP (Hypertext Preprocessor)
Purpose:
o PHP is a server-side scripting language designed for web
development.
o It processes user requests on the server before sending the
response to the client (browser).
o Key functionalities:
Form handling: Receives data submitted by users
(e.g., registration forms, login forms).
Database interaction: Communicates with the
MySQL database to retrieve or update data.
Session management: Maintains user sessions
securely.
o PHP scripts execute on the server, generating dynamic
content for the client.
MySQL Database
Role:
o MySQL is a popular relational database management
system (RDBMS).
o It stores structured data efficiently and provides powerful
querying capabilities.
o Our application’s database contains tables for users,
products, and orders.
o Developers define the schema, create tables, and write
SQL queries to interact with the data.
phpMyAdmin
Functionality:
o phpMyAdmin is a web-based tool for managing MySQL
databases.
o Administrators can:
Create and modify tables.
Execute SQL queries.
Import/export data.
Monitor database performance.
o Its user-friendly interface simplifies database
administration tasks.
3. Key Features
We outline the critical features of our electrical store web application:
1. Registration Page:
o Allows users to create accounts by providing necessary
details (e.g., name, username email, password).
o Implements validation checks to ensure data integrity.
o Securely stores user credentials in the database.
2. Login Page:
o Authenticates users based on stored credentials.
o Manages user sessions securely to prevent unauthorized
access.
3. Products Page:
o Displays a comprehensive catalogue of electrical products.
o Retrieves product data from the database.
o Enables sorting, filtering, and searching for efficient
product discovery.
4. Cart Page:
o Stores selected products during the shopping session.
o Calculates the total price dynamically.
o Allows users to modify their cart contents (add, remove,
update quantities).
5. Checkout Page:
o Collects shipping and payment information.
o Validates input data to prevent errors.
o Processes orders and updates the database with relevant
details.
6. Thanks Page:
o Displays a confirmation message after successful order
placement.
4. Database Design
A well-structured database is crucial for our application:
Define the following tables:
o Users Table: Stores user profiles (registration data).
o Products Table: Contains product details (name, price,
description, image URL).
o Purchases Table: Links users to their purchased products.
4. Use case diagram
5. Class diagram
+-----------------------------------+
| ElectronicStore |
+-----------------------------------+
| - users: List<User> |
| - products: List<Product> |
| - cart: ShoppingCart |
+-----------------------------------+
| +registerUser(username, password) |
| +login(username, password): User |
| +browseProducts(): List<Product> |
| +addToCart(product: Product) |
| +viewCart(): ShoppingCart |
| +checkout(billingInfo: Billing) |
+-----------------------------------+
+---------------------+ +------------------+
| User | | Product |
+---------------------+ +------------------+
| - userId: int | | - productId: int |
| - username: string | | - name: string |
| - password: string | | - price: float |
+---------------------+ +------------------+
| +getUserId(): int | | +getProductId(): int |
| +getUsername(): string | | +getName(): string |
| +getCart(): ShoppingCart | | +getPrice(): float |
+---------------------+ +------------------+
+---------------------+
| ShoppingCart |
+---------------------+
| - items: List<Product> |
+---------------------+
| +addItem(product: Product) |
| +getItems(): List<Product> |
+---------------------+
+---------------------+
| Billing |
+---------------------+
| - firstName: string |
| - lastName: string |
| - address: string |
| - paymentMethod: string |
+---------------------+
| +getFirstName(): string |
| +getLastName(): string |
| +getAddress(): string |
| +getPaymentMethod(): string |
+---------------------+
Conclusion
In the ever-evolving landscape of online retail, user experience reigns
supreme. An electronic store’s success hinges on its ability to engage,
delight, and retain customers. Let’s recap the critical aspects:
1. Empathetic User Journeys:
o Understand your users—their needs, preferences, and pain
points.
o Map out intuitive user journeys that guide visitors
seamlessly from discovery to checkout.
2. Responsive Interfaces:
o Prioritize mobile responsiveness and cross-device
compatibility.
o Ensure that interfaces adapt gracefully to various screen
sizes and orientations.
3. Visual Consistency and Clarity:
o Maintain a cohesive design language across pages.
o Use clear typography, legible fonts, and consistent color
schemes.
4. Frictionless Transactions:
o Simplify registration, login, and checkout processes.
o Minimize form fields and provide helpful tooltips.
5. Feedback and Validation:
o Give immediate feedback on user actions (e.g., successful
login, item added to cart).
o Validate user inputs in real time to prevent errors.
6. Security and Trust:
o Assure users of data security and privacy.
o Display trust badges, SSL certificates, and secure payment
gateways.
7. Post-Purchase Engagement:
o Beyond the transaction, nurture relationships.
o Send order confirmations, shipping updates, and
personalized recommendations.
