Overview: In a traditional environment, order management might rely on paper forms or spreadsheets. We’ll implement a digital solution that allows customers to place orders online, which are automatically stored and processed in a database, and track order statuses through a web application.
This project will utilize:
- Backend: Python with Flask
- Frontend: HTML, CSS (optional: JavaScript)
- Database: SQLite (or you can use MySQL or PostgreSQL)
- Deployment: This project can be deployed on a platform like Heroku for cloud hosting.
Step-by-Step Guide
1. Set up the Environment
Make sure you have Python and Flask installed. You can install Flask with pip:
bashCopy codepip install flask
Install SQLite (it comes built-in with Python, but for more robust systems, you might want MySQL/PostgreSQL).
2. Create the Backend with Flask
Folder Structure:
luaCopy code/digital-transformation-project
|-- app.py
|-- templates/
|-- index.html
|-- order_status.html
|-- static/
|-- style.css
|-- orders.db
app.py (Main Application File):
pythonCopy codefrom flask import Flask, render_template, request, redirect, url_for
import sqlite3
app = Flask(__name__)
# Initialize the database
def init_db():
conn = sqlite3.connect('orders.db')
c = conn.cursor()
c.execute('''CREATE TABLE IF NOT EXISTS orders
(id INTEGER PRIMARY KEY, customer_name TEXT, product TEXT, quantity INTEGER, status TEXT)''')
conn.commit()
conn.close()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/place_order', methods=['POST'])
def place_order():
customer_name = request.form['customer_name']
product = request.form['product']
quantity = int(request.form['quantity'])
conn = sqlite3.connect('orders.db')
c = conn.cursor()
c.execute("INSERT INTO orders (customer_name, product, quantity, status) VALUES (?, ?, ?, ?)",
(customer_name, product, quantity, "Pending"))
conn.commit()
conn.close()
return redirect(url_for('order_status'))
@app.route('/order_status')
def order_status():
conn = sqlite3.connect('orders.db')
c = conn.cursor()
c.execute("SELECT * FROM orders")
orders = c.fetchall()
conn.close()
return render_template('order_status.html', orders=orders)
if __name__ == '__main__':
init_db() # Initialize the database if it doesn't exist
app.run(debug=True)
In this code:
- The
init_db()function creates a SQLite database and anorderstable if they don’t already exist. - The
/route renders a page where users can place an order. - The
/place_orderroute processes the order form and stores it in the database. - The
/order_statusroute displays all orders, showing their status.
3. Create the Frontend (HTML)
index.html (Order Placement Form):
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Order Management</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>Place an Order</h1>
<form action="/place_order" method="POST">
<label for="customer_name">Name:</label>
<input type="text" id="customer_name" name="customer_name" required>
<label for="product">Product:</label>
<input type="text" id="product" name="product" required>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" required>
<button type="submit">Place Order</button>
</form>
</div>
</body>
</html>
order_status.html (Display Orders):
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Status</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>Current Orders</h1>
<table>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Product</th>
<th>Quantity</th>
<th>Status</th>
</tr>
{% for order in orders %}
<tr>
<td>{{ order[0] }}</td>
<td>{{ order[1] }}</td>
<td>{{ order[2] }}</td>
<td>{{ order[3] }}</td>
<td>{{ order[4] }}</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
4. Add Styles (CSS)
style.css (Basic Styling):
cssCopy codebody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 50%;
margin: auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
h1 {
text-align: center;
}
form input, form button {
width: 100%;
padding: 10px;
margin: 10px 0;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 12px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
5. Run the Application
Now you can run the Flask app with the following command:
bashCopy codepython app.py
Your app will run at http://127.0.0.1:5000/.
Features and Digital Transformation Impact
This project demonstrates a simple Digital Transformation of a manual order management system into a digital one by:
- Allowing customers to place orders online.
- Storing orders in a structured digital format (SQLite database).
- Providing an easy way to track the status of orders.
For a more advanced system, you could:
- Integrate email notifications to customers when their order status changes.
- Add user authentication to differentiate between customers and admins.
- Use cloud databases and deploy the application on platforms like Heroku, AWS, or Azure.
Leave a Reply