SCHOOL OF ENGINEERING AND NATURAL

SCIENCES

Database Initial Draft

Group-Number10
Online Computer Marketplace

Student Name Student ID Department

Yasamin Akrami 64210011 CoE
Melisa Sarıtaş 64200005 CoE
Saba Fakharnasab 64210089 CoE
• Database system and programming languages used in the
project
This project involves the development of a computer marketplace. The goal of this e-
commerce platform is to provide a seamless online shopping experience for customers
looking to purchase computers or build their own computers. The core components of
this project is its Frontend, Backend and Database system which interact to ensure
optimal functionality and user satisfaction. In the following paragraph the details of
each of them will be explained.

• Frontends
The user interface which is the the initial interaction point for users engaging
with the platform, is built using HTML, CSS, and JavaScript. HTML lays the
foundation of a website by organizing content into a structured format that web
browsers can interpret. HTML can be used to defines the basic elements like
headings, paragraphs, lists, and links. CSS is responsible for the visualization of
a website by controlling its appearance, including aspects like colors, fonts,
spacing, and positioning. JavaScript adds interactivity to web pages, enabling
dynamic behavior such as pop-up messages, animations, and user input
validation which makes the shopping experience smooth.

• Backend

For the backend of this project, Python is chosen. Python is a popular

programming language in web development because of its simplicity and
extensive library support. It takes charge of crucial backend tasks such as
server-side logic, data manipulation, and database interaction. This ensures that
the platform operates smoothly and efficiently, meeting the needs of users
effectively.

• Database System
The platform utilizes MySQL as its database system. MySQL, a popular open-
source relational database management system, is prized for its scalability and
performance. In this e-commerce project, MySQL serves as the repository for
platform-related data, including user information, product and component
details, transaction records, and order history. Compatible with various
programming languages and frameworks, MySQL offers high availability and
security features, further bolstering the platform's reliability and data integrity.

In conclusion, a combination of technologies and tools are used to create a

robust and user-friendly computer marketplace. The use of HTML, CSS, and
JavaScript for the frontend while Python and MySQL on the backend ensure
 efficient data handling and an interactive user-interface which allows a
seamless and enjoyable shopping experience for the clients.

• The connection between frontend and backend

APIs (Application Programming Interfaces) are the foundation of communication
between the frontend and backend of a web application. They define a set of rules
and protocols for building and interacting with software applications. APIs are
particularly crucial in the context of web services, where they allow different
software components to communicate over the internet.
• RESTful APIs
In web development, RESTful APIs are widely used to enable the frontend to
communicate with the backend. REST (Representational State Transfer) is an
architectural style that uses standard HTTP methods like GET, POST, PUT, and
DELETE. Here’s how RESTful APIs work in a web application:
o Request-Response Cycle: The frontend makes an API call to the
backend by sending an HTTP request. This request includes an endpoint
URL, HTTP method, and may include headers and a body with data.
o Endpoints: The backend has predefined API endpoints, each associated
with a specific resource or action.
o HTTP Methods: Different HTTP methods are used depending on the
action required:
GET for retrieving data.
POST for creating new data.
PUT or PATCH for updating existing data.
DELETE for removing data.
o Data Exchange Format: The backend processes the request and sends
back a response, usually in JSON format, which is lightweight and easy
for JavaScript to parse.
o Statelessness: RESTful APIs are stateless, meaning each request from
the frontend must contain all the information the backend needs to fulfill
the request.
• API Integration in Web Development Stack
Django: As a backend framework, Django can be used to create RESTful APIs. It
handles incoming HTTP requests, interacts with the MySQL database, and
returns HTTP responses.
JavaScript: On the frontend, JavaScript is used to make asynchronous API calls,
often through the fetch API or libraries like axios. It handles the received data to
update the UI dynamically.
Sample images of our website
First page:

The first page is the most important part of the website, persuading the customer to stay and
potentially buy from our ecommerce website. The elements used in the page are as follows:

• Simple navigation bar

o Home page
o Build Pc page
o Pre-made computers page
o Contact us page
• Icons
o Accessing profile management system
o Accessing shopping cart

• Welcome banner
• Best seller products
o Sample best sellers
o Ratings
o Prices
o Option to add to shopping cart
• Footer
o Copy rights
 Premade Pc page:

This page enables the customers to buy pre-assembled PCs, rather than building the
whole pc from scratch. As the name suggests, this pages focuses on user convineint and fast
shopping experience.

User is free to choose from 4 categories of premade pcs.

Categories include:

• Laptops
• Engineering PCs
• Gamin PCs
• Desktops
Build pc page:

This page satisfies one of the main goals of this projects, which is making a pc from
scratch. Specific group of users who would like to have full control of their pc components
can use this page.

The available components for shopping include:

• CPU
• GPU
• HDD
• SSD
• Keyboard
• Monitor

Each component is placed on a rectangle with the corresponding image. The complete model
name and a complete description is written for each product.

Header:

Navigation bar and banner, plus a header that informs users about the page that they are in.

Example PC components:
Main body of the page:

Main body of the page include:

• Search bar
• Component categories
• Sorting options
• Price filtering options
• Additional options

Sorting by

• Price
• Popularity
• Performance
• Brand
• Compatibility
• Availability
User management:

User management systems is one of the important parts for each websites, where it ensures
a seamless experience for user to log in, sign up, check the user credentials, see order history,
and see the profile overview and change the profile details if needed. Our user management
system include:

• Log in page
• Sign up page
• User management dashboard

Login page:

A simple form where it makes the users who already have an account log in and access their
account.

Sign up page:

A form where it asks the users who do not already have an account their credentials, and
creates an account for them, then redirecting them to the user profile dashboard page.
User management dashboard includes:

Profile overview:

Showing the user their credentials that they have used to create and account such as name,
email, locatoin, memeberhip type, date of joining and the last login date. Also a simple button
is used to log out, and exit the profile management system.

Order history:

This part of profile management system enables the user to see all the orders that they have
placed in the website. Each entry includes an order id, the order date, the order amount and
the status of order, all of which are useful for both user and admin which manages the
database management system.
Setting – change the profile details:

This part enables the user to change the profile details such as name, email and location. The
changes will also be reflected in the database management system.

Support / Help center:

This part enables the user to see the frequenctly asked questions, which includes changing
the password and contacting the support for help. By clicking on the blue links, the user can
either change their password, or be redirected to the contact us page.
Contact us page:

This page uses a form where it enables the users to contact website admins for their possible
question and problems, or suggestions to improve the shopping experience further more.
Admin Panel:
 It can be seen how many customers the website has, how many items are sold, how
many of the orders are in shipping and how much it is earned until now via the admin
panel. It can be managed and analyze user data and stock data. To see the data in
detail, it can be either press the buttons ‘load more’ or choose the appropriate data
from the navbar. Also, it can be seen the account detail and sign out easily from the
right sidebar.

History in Admin Panel:

It can be seen the history of the orders in detail with this page.

User Data in Admin Panel:

It can be seen the user information in detail with this page.

Stock Data in Admin Panel:

The stocks can be managed from this page.

• The progress status of our project
So far, we have made the front end part of the website which includes the following pages
and management systems:

• Home page (welcome page)

• Pre-made PC page
• Build your pc page
• Login
• Sign up
• User profile management system
o Profile overview
o Order history
o Setting
o Support / help center
▪ Contact us
• Admin panel
o History
o Stock data
o Order data

As the project seems to be ahead of the previously defined time table, we will continue
to refine the front end part. Refining the front end part includes fixing the inconsistencies
especially in image size and rectangle component sizes, plus developing few extra pages
that makes the website even more easy to use and user friendly. This extra pages allows
the user to shop specific components such as CPU alone.

Meanwhile, the backend development continues to move forward by using the Django
framework, and implementing the sql database. One of our main goals is to create a solid
base for our database management system using Django, Creating the necessary tables,
and writing fundamental queries that helps us fetch data from our stock and our
customer’s information, which makes the base of our ecommerce business.

To finalize a complete and integrated website, establishing a seamless connection

between the front end and back end is extremely important. Other than the goals
mentioned above, we will continue to implement HTTP GET and POST requests to
facilitate efficient data exchange between the client-side and server-side components.
This ensures smooth interaction and real-time updates, enhancing user experience and
functionality. Additionally, optimizing API calls and handling responses effectively will be
crucial for maintaining performance and reliability across different platforms and
devices.