Step 1: Set Up Your Environment
Make sure you have Python installed, and then set up a virtual environment:
mkdir ecommerce-platform
cd ecommerce-platform
python -m venv venv
source venv/bin/activate # On Windows use venv\Scripts\activate
pip install Flask SQLAlchemy
Step 2: Create the Project Structure
Your project structure should look like this:
arduinoCopy codeecommerce-platform/
│
├── app.py
├── models.py
├── templates/
│ ├── index.html
│ ├── product.html
│ └── cart.html
└── static/
└── style.css
Step 3: Define the Models (models.py)
Create a file named models.py for your database models.
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
class Product(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
price = db.Column(db.Float, nullable=False)
description = db.Column(db.String(200), nullable=True)
Step 4: Set Up the Application (app.py)
Create a file named app.py for your application logic.
from flask import Flask, render_template
from models import db, Product
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///ecommerce.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db.init_app(app)
with app.app_context():
db.create_all()
@app.route('/')
def index():
products = Product.query.all()
return render_template('index.html', products=products)
@app.route('/product/<int:product_id>')
def product(product_id):
product = Product.query.get(product_id)
return render_template('product.html', product=product)
if __name__ == '__main__':
app.run(debug=True)
Step 5: Create the Frontend (HTML Templates)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<title>My E-Commerce Store</title>
</head>
<body>
<h1>Products</h1>
<ul>
{% for product in products %}
<li>
<a href="{{ url_for('product', product_id=product.id) }}">{{ product.name }}</a>
- ${{ product.price }}
</li>
{% endfor %}
</ul>
</body>
</html>
- product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<title>{{ product.name }}</title>
</head>
<body>
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
<p>Price: ${{ product.price }}</p>
<a href="/">Back to products</a>
</body>
</html>
- cart.html (Optional for future expansion)
You can expand this later with cart functionality.
Step 6: Add Some Styles (style.css)
Create a file named style.css in the static folder for basic styling.
cssCopy codebody {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
Step 7: Running the Application
To run your application, use the following command:
bashCopy codepython app.py
Visit http://127.0.0.1:5000 in your browser to see your e-commerce platform!
Leave a Reply