في هذا المشروع، سنقوم ببناء متجر بسيط باستخدام Flask كإطار عمل خلفي (Backend) وBootstrap لتنسيق الواجهة (Frontend).
حيث يتيح هذا المشروع للمستخدمين رؤية قائمة منتجات، وسنقوم لاحقًا بتوسيع المشروع لإضافة خواص مثل سلة الشراء أو إدارة المنتجات.
المتطلبات الأساسية
قبل البدء، تأكد من تثبيت الآتي:
pip install flask
هيكل المجلدات
simple_store/
│
├── app.py
├── static/
│ └── style.css
├── templates/
│ ├── base.html
│ ├── index.html
│ └── add_product.html
└── products.json
1. ملف app.py
from flask import Flask, render_template, request, redirect, url_for
import json
app = Flask(__name__)
PRODUCTS_FILE = 'products.json'
def load_products():
with open(PRODUCTS_FILE, 'r') as f:
return json.load(f)
def save_products(products):
with open(PRODUCTS_FILE, 'w') as f:
json.dump(products, f, indent=4)
@app.route('/')
def index():
products = load_products()
return render_template('index.html', products=products)
@app.route('/add', methods=['GET', 'POST'])
def add_product():
if request.method == 'POST':
name = request.form['name']
price = request.form['price']
image = request.form['image']
products = load_products()
products.append({'name': name, 'price': price, 'image': image})
save_products(products)
return redirect(url_for('index'))
return render_template('add_product.html')
if __name__ == '__main__':
app.run(debug=True)
2. ملف products.json
[
{
"name": "ساعة يد كلاسيكية",
"price": "150",
"image": "https://via.placeholder.com/150"
},
{
"name": "سماعات لاسلكية",
"price": "250",
"image": "https://via.placeholder.com/150"
}
]
3. ملف templates/base.html
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<title>متجري البسيط</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
<a class="navbar-brand" href="{{ url_for('index') }}">متجري</a>
<div class="navbar-nav">
<a class="nav-link" href="{{ url_for('add_product') }}">إضافة منتج</a>
</div>
</nav>
<div class="container mt-4">
{% block content %}{% endblock %}
</div>
</body>
</html>
4. ملف index.html – عرض المنتجات
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4 text-center">قائمة المنتجات</h2>
<div class="row">
{% for product in products %}
<div class="col-md-4 mb-4">
<div class="card h-100 shadow-sm">
<img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}">
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">السعر: {{ product.price }} جنيه</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
5. ملف add_product.html – إضافة منتج
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4 text-center">إضافة منتج جديد</h2>
<form method="POST" class="w-50 mx-auto">
<div class="mb-3">
<label for="name" class="form-label">اسم المنتج</label>
<input type="text" class="form-control" name="name" required>
</div>
<div class="mb-3">
<label for="price" class="form-label">السعر</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="mb-3">
<label for="image" class="form-label">رابط الصورة</label>
<input type="url" class="form-control" name="image" required>
</div>
<button type="submit" class="btn btn-success">إضافة</button>
</form>
{% endblock %}
6. ملف style.css – تنسيقات بسيطة
body {
background-color: #f8f9fa;
font-family: 'Cairo', sans-serif;
}
.card-title {
color: #343a40;
}
.navbar-brand {
font-weight: bold;
}
7. تشغيل المشروع
لتشغيل المشروع:
python app.py
ثم افتح المتصفح وانتقل إلى:
http://127.0.0.1:5000/
ملاحظات:
✅ التصميم سريع وجميل بفضل Bootstrap 5.
✅ المشروع يدعم اللغة العربية.
✅ يمكن تطويره لاحقًا بإضافة: تسجيل دخول، لوحة تحكم، سلة مشتريات، تصنيفات.
