The application I created is designed to manage the cashier operations of establishments in general, enabling sales transactions, registering products and customers, controlling inventory, and managing cash flow. It is a website application that encompasses various languages, using CSS and JavaScript for the front-end, Flask and Python for the back-end, and phpLiteAdmin as the database.
The database is a fundamental element for the persistence of data recorded through the application. It is through it and the app.py file that the user can view any data from each of the tabs. It has four tables: users (to register the ID, name, and password of each cashier operator, with the password saved in hash format for security), products (to register the ID, name, value, quantity, and image of each product), customers (to register the ID, name, email, and photo of each customer) and orders (to join the data of the products purchased by the customer, with the linkage of a customer …
The application I created is designed to manage the cashier operations of establishments in general, enabling sales transactions, registering products and customers, controlling inventory, and managing cash flow. It is a website application that encompasses various languages, using CSS and JavaScript for the front-end, Flask and Python for the back-end, and phpLiteAdmin as the database.
The database is a fundamental element for the persistence of data recorded through the application. It is through it and the app.py file that the user can view any data from each of the tabs. It has four tables: users (to register the ID, name, and password of each cashier operator, with the password saved in hash format for security), products (to register the ID, name, value, quantity, and image of each product), customers (to register the ID, name, email, and photo of each customer) and orders (to join the data of the products purchased by the customer, with the linkage of a customer to the purchase being optional if some customers do not want to register in the system).
One of the most important files in the entire application development is the app.py, which contains all the back-end logic for each of the HTML files within /templates. It has all the necessary endpoints for navigating from one URL to another within the website. It has validation logic and bridges the data recorded by the user and the database.
The project structure is divided between the /static folder, which contains the styles.css and cart.js files, photos of products and customers, icons and images used in the styling and creation of the website, the /templates folder, which contains all the HTML files, the app.py file, helpers.py (which has functions that assist in error handling and login), the database access file (project.db), the README.md file, and the requirements.txt, which has the libraries used for the project's creation.
The style and layout of the application (located in the layout.html file, under /templates) remain the same across all tabs of the website. That is, the navigation bar at the top of the screens remains the same, as do the background and the footer. I wanted to maintain a standard because I thought it makes it more organized and provides a fluid visual for the user to navigate between the tabs.
When the application starts, the first screen that appears is the login screen, using the login.html file (inside the /templates folder), which does the front-end part to provide fields for Username and Password. Since the user needs to register before logging in, there is a "Register" tab at the top right of the screen (logic done under register.html), where the user can create a Username and a Password. These data will be saved in the database and checked at user login. Once the user is inside the application, there is also a logout option.
After logging in, the user is taken to the Home Page of the application (index.html), which is a screen aimed only at viewing data, such as the cashier operator who is logged in at the moment, an overview of sales, which shows the total value realized in product sales on the day, week, and current month. This screen also shows which products registered in the inventory are in low quantity. I decided to set as "Low Stock" the products below 5 units. Additionally, this screen also allows viewing the number of customers registered in the application and the last sale made (with the names of the products and the total value of the sale).
For the application to function smoothly, the next step is for the user to register products (register_product.html and app.py). For this, in the "Products" tab, made in /templates/products.html, there is a list of products (with ID, name, price, and image of each product). Initially, this list may be empty due to the fact that there are no products registered yet. Below the list, there is a "Register Product" button to register a product in the database, which leads to another webpage (register_product.html), where the user can fill in all the necessary data fields for the creation of a product in the inventory. This registration includes type and quantity validation.
After registering products, in the "Customers" tab, the cashier can also view the list of registered customers and also register new customers (logic done in the register_customer.html and app.py files), following the same logic as the Products tab, registering the ID, name, email, and photo of the customers. Both customers and products can be edited or deleted from each of the lists. The app.py file does all the logic behind altering or deleting a row in the database. This logic was done in edit_customer.html and edit_product.html. This allows the cashier operator to have greater control over the data that are recorded.
With Products and Customers created, the user can perform sales (logic done in the register_order.html and app.py files), through the "Register Order" tab, which has a list of all the products registered in the inventory, with name, quantity, unit price, and image. Thus, the cashier can add each of the products to the shopping cart, which shows the chosen products, with price x quantity and returns the subtotal, taxes, and total value of the purchase. At this moment, the option to select a customer to be linked to the purchase appears, making the system understand that purchase X was made by customer X. Here we have various validations, such as if the quantity of the product is less than 1, it will not be possible to make the sale, as the product no longer exists in stock. Another feature implemented is that once the product is added to the cart, the selected quantity is subtracted from the stock. After the products are selected and the customer is optionally selected, clicking on the "Place order" button will make the sale, registering all the data in the orders table in the database.
In the last tab of the application, called "History" (logic done in the history.html and app.py files), the cashier can see all previously made sales, with data such as order ID, customer name, customer photo, the name and quantity of the products, the total payment, and the date. Next to each order, there is a deletion option, but with validation that the order can only be deleted if the customer and the products related to the order have already been deleted previously. To reinforce the security of the data, the order can only be deleted by correctly entering an administrator password. As the application is for educational purposes, the password is simply "12345678".
Finally, for the design choice, I was greatly inspired by the activity prior to this final project, in which we created a website to buy and sell stocks (Finance, from Problem Set 9) using the same languages. But I decided to change the background and make it more stylized, with screens completely different and personalized by me. I was unsure about which color palette to use, but I opted for a darker aspect that matched the example of a burger joint that would be using the created cashier system.
