ONLINE DOORS STORE

Video Demo: https://youtu.be/6akggWSCbFI

Description:

The idea for this project was suggested to me by a friend who works in the door sales industry. He said that for a number of tasks it would be convenient to provide the user with a visual configurator (door constructor).

The implementation of this project aims to create a prototype of such a tool for an online door store. The hypothetical task was to implement a visual configurator, where the user can visually change the design of the product and send the finished version for cost estimation (if desired, the price of door components can be added to the database and the cost estimate can be displayed on the configurator page immediately).

Project structure:

Doors-store
├─ .DS_Store
├─ __pycache__
│  ├─ .DS_Store
│  ├─ app.cpython-38.pyc
│  └─ routes.cpython-38.pyc
├─ readme.md
├─ run.py
└─ store
   ├─ .DS_Store
   ├─ __init__.py
   ├─ __init__.pyc
   ├─ __pycache__
   │  ├─ __init__.cpython-38.pyc
   │  ├─ forms.cpython-38.pyc
   │  ├─ models.cpython-38.pyc
   │  └─ routes.cpython-38.pyc
   ├─ forms.py
   ├─ models.py
   ├─ orders.db
   ├─ routes.py
   ├─ static
   │  ├─ .DS_Store
   │  ├─ css
   │  │  └─ style.css
   │  ├─ favicon.ico
   │  ├─ images
   │  │  ├─ glass_1.png
   │  │  ├─ glass_2.png
   │  │  ├─ glass_3.png
   │  │  ├─ paint.png
   │  │  ├─ stain.png
   │  │  └─ unpainted.png
   │  └─ main.js
   └─ templates
      ├─ 404.html
      ├─ account.html
      ├─ admin.html
      ├─ base_layout.html
      ├─ index.html
      ├─ login.html
      ├─ products.html
      └─ register.html

Details of the main files and directories

run.py

Runs a Flask Application

store

Main project directory

init.py

Used to mark the directory on disk as Python package directories.

Also in this file:

some libraries are imported;
connected SQLite database;
setup a secret key;
setup Sqlalchemy;
configured Bcrypt and LoginManager, providing encryption of passwords and access to convenient tools for user authentication;
login_manager.login_view and login_manager.login_message_category define the default page when a user attempts to access a login_required view without being logged in and design the corresponding message;
Configure session to use filesystem (instead of signed cookies).

models.py

Creates 2 classes and and consequently 2 tables in the orders.db database: "User" and "Orders". Also, the user class implements the generation of a password hash and their verification.

routes.py

Contains all routes.

@app.route('/') Route for the main page. The home_page function renders the index.html template

@app.errorhandler(404) Route for 404 page. Displays a 404.html template for non-existent URLs / pages.

@app.route('/login', methods=['GET', 'POST']) @app.route('/logout', methods=['GET', 'POST']) For registration and authentication of users, both GET and POST methods are required. The functions use the toolkit provided by the Flask Login, Flask Session, Bcrypt, Flask_WTF, WT Forms libraries. As well as sessions, flash messages and redirects.

@app.route('/account') @app.route('/admin') Displays the user account or admin page. Both pages are prohibited from visiting unregistered or non-logged users (@login_required).

@app.route('/products', methods=['GET', 'POST']) The product_page function processes the POST requests (generated by a function in the main.js) and writes the data to the database.

forms.py

The RegisterForm and LoginForm classes are created, which are used in the registration and verification forms on the corresponding pages.

Templates Folder:

Contains templates for all project pages

Static Folder:

Contains a folder with CSS styles, images, and a main.js file that should be described in more detail.

This project uses pure JavaScript. First, the orderInfo class is created with default values. Next, the "Сanvas" is set. I decided to use it, because the project needed to implement the overlay of some images.

Next, i use DOM manipulation and event handling (addEventListener ("change") to change images. To do this, in the "products.html" file, I set the data-img attribute for each image.

To transfer data to the back-end, it was decided to use JSON.

Function sendOrderInfo() creates and sends a POST request. Then it received by the product_page() function on the "/products" page (see the routes.py file).

dmbak / Doorstore