ClothesStore

This project is a web-based clothing store application that allows users to create an account, browse and add products to the store, place orders, and add items to their shopping basket as long as there is sufficient quantity in stock. Users can view the total price of their order and have the option to modify it.

The main goal of this project was to create a simple app that combines the backend and frontend into one project. For the backend, we used a MySQL database to store the data, the Flask framework in Python to create a localhost server and route pages, and Jinja2 to pass variables from the Python code to the HTML and to create blocks of HTML code that can be used anywhere.

As for the frontend, HTML is used to structure and organize the content of the web page, CSS is used to style and enhance the visual appearance of the page, and JavaScript is used to add interactivity and functionality to the page.

Flask is a micro web framework written in Python that provides useful tools and features for building web applications. It includes a lightweight server and the ability to connect to a database, among other things.

Jinja2 is a templating engine for Python that allows developers to generate HTML or other markup code from templates and data. It allows you to insert dynamic content into a template and keep the presentation separate from the application logic.

Database Design

How to navigate through the website

1.To reset the database to the default setup, go to the header and select Delete Tables

2.Then we have to create the tables also from the header

3.We have to create a new customer

• To do that we must go to our customers page
• The customer page allows us to create, view, and update customer information in the database
• Then we can easily create a new customer from the top right form
• If we want to make any chamges to any customer we can do that by typing the customer id in the Update Customer form

4.Add Some Products into the database

• To perform this we must go into our products page
• There we can find an Add Product form in the top right

5.The last step is to place an order

• We have to navigate to the Orders page
• The orders page allows us to create, view, and update orders and the products in each order
• After that we can enter into the Basket of that order from the basket form
• Here we can add ,remove or update existing products in the basket

The website allows us to insert some default data or to delete the existing data

• To perform this we can enter into the Tables dropdown list from the header and press Insert Data or Delete Data

How to start the project

• We utilized a Python virtual environment for this project to keep the dependencies for this project separate from the rest of the computer

To set up the project, follow these steps:

1.Set up an Ubuntu distribution.

2.Activate the virtual environment by running source ".venv/bin/activate".

3.Install the project dependencies by running "pip install -r requirements.txt".

4.Set the FLASK_APP environment variable to main by running export "FLASK_APP=main".

5.Start the server by running "flask run".