Simple Web Application Product Management

NUR ARIF
2 min readJun 23, 2023

Technology used:

  1. Flask: A web framework used to develop web applications with Python.
  2. SQLAlchemy Flask: A Flask extension that provides integration with SQLAlchemy, which is an ORM (Object-Relational Mapping) for interacting with databases.
  3. SQLite: The database used in this example, which is lightweight and easy to use.

Business Logic Flow:

File backend.py: This file is the main file that contains the Flask application. In this file, a Flask application object is created, configured with a SQLite database, and the routes to be used are set.

  • /: This route will display the main page of the application.
  • /add: This route will handle adding a new product.
  • /edit/<int:id>: This route will handle editing the product with the specified ID.
  • /delete/<int:id>: This route will handle deleting the product with the specified ID.
  • /all: This route will list all existing products.
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///products.db'
db = SQLAlchemy(app)

class Product(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50), nullable=False)
price = db.Column(db.Float, nullable=False)

@app.route('/', methods=['GET', 'POST'])
def handle_request():
if request.method == 'POST':
name = request.form['name']
price = request.form['price']
new_product = Product(name=name, price=price)
db.session.add(new_product)
db.session.commit()
return redirect('/')
else:
products = Product.query.all()
return render_template('index.html', products=products)

@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit_product(id):
product = Product.query.get(id)
if request.method == 'POST':
product.name = request.form['name']
product.price = request.form['price']
db.session.commit()
return redirect('/')
else:
return render_template('edit.html', product=product)

@app.route('/delete/<int:id>', methods=['POST'])
def delete_product(id):
product = Product.query.get(id)
db.session.delete(product)
db.session.commit()
return redirect('/')

@app.route('/all')
def show_all_products():
with app.app_context():
products = Product.query.all()
return render_template('all_products.html', products=products)

if __name__ == '__main__':
with app.app_context():
db.create_all()
app.run(debug=True)

File all_products.html: This file is a page view that displays all existing products. On this page, the product list is displayed in tabular form. Each table row displays the product ID, name, and price. This page can be accessed via the /all route.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Products</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
padding: 20px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #f2f2f2;
}
</style>
</head>

<body>
<h1>All Products</h1>

<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
{% for product in products %}
<tr>
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
</tr>
{% endfor %}
</table>
</body>

</html>

In the application business flow, users can interact with the application through the views provided. They can add new products, edit existing products, delete products, and see a list of all products. Each user action will be sent to the server via the appropriate routes, and the server will process the request, manipulate data in the database, and provide a response back to the user via the appropriate view.

--

--

NUR ARIF

Backend | Data Scraping | Content Writer | Python Programming | Passionate Cyber Security