🎯 هدف الدرس:
تعلم كيفية تعديل محتوى ملاحظة موجودة مسبقًا وتحديثها في قاعدة البيانات دون حذفها.
🧱 الخطوة 1: تعديل ملف app.py
افتح ملف app.py وأضف المسار الخاص بالتعديل كالتالي:
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///notes.db'
db = SQLAlchemy(app)
class Note(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String(200), nullable=False)
with app.app_context():
db.create_all()
@app.route('/')
def index():
notes = Note.query.all()
return render_template('index.html', notes=notes)
@app.route('/add', methods=['POST'])
def add():
content = request.form['content']
new_note = Note(content=content)
db.session.add(new_note)
db.session.commit()
return redirect(url_for('index'))
@app.route('/delete/<int:id>')
def delete(id):
note = Note.query.get(id)
db.session.delete(note)
db.session.commit()
return redirect(url_for('index'))
# ✅ مسار تعديل الملاحظات
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
note = Note.query.get(id)
if request.method == 'POST':
note.content = request.form['content']
db.session.commit()
return redirect(url_for('index'))
return render_template('edit.html', note=note)
if __name__ == '__main__':
app.run(debug=True)
🧱 الخطوة 2: إنشاء صفحة التعديل edit.html
أنشئ ملفًا جديدًا في مجلد templates باسم edit.html وأضف المحتوى التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>تعديل الملاحظة</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-5">
<div class="card shadow-sm p-4">
<h3 class="text-center text-primary mb-4">✏️ تعديل الملاحظة</h3>
<form method="POST">
<div class="mb-3">
<label for="content" class="form-label">نص الملاحظة:</label>
<textarea id="content" name="content" class="form-control" rows="4" required>{{ note.content }}</textarea>
</div>
<div class="d-flex justify-content-between">
<a href="{{ url_for('index') }}" class="btn btn-secondary">🔙 رجوع</a>
<button type="submit" class="btn btn-success">💾 حفظ التعديل</button>
</div>
</form>
</div>
</div>
</body>
</html>
🧱 الخطوة 3: تعديل صفحة العرض index.html
في صفحة الملاحظات الرئيسية، أضف زر تعديل بجانب كل ملاحظة:
<div class="card-body">
<p class="card-text">{{ note.content }}</p>
<div class="d-flex justify-content-between">
<a href="/edit/{{ note.id }}" class="btn btn-warning btn-sm">✏️ تعديل</a>
<a href="/delete/{{ note.id }}" class="btn btn-danger btn-sm">🗑 حذف</a>
</div>
</div>
💻 الخطوة 4: تجربة التطبيق
1- شغّل التطبيق:
python app.py2- افتح المتصفح على:
http://127.0.0.1:5000/4- بعد حفظ التعديلات، سيتم تحديث قاعدة البيانات مباشرة.
✅ النتيجة النهائية
- يمكنك الآن تعديل أي ملاحظة دون الحاجة لحذفها.
- كل التغييرات يتم حفظها في قاعدة البيانات فورًا.
- التصميم متناسق وسهل الاستخدام.
🧠 نصائح إضافية:
- يمكنك لاحقًا جعل نافذة التعديل تظهر كـ نافذة منبثقة (Modal) لتجربة أكثر احترافية.
- كما يمكن تفعيل رسائل فلاش (Flash Messages) لتأكيد نجاح عملية التعديل.
إضافة تحسين بصري عبر Flash Message بعد تعديل الملاحظة سيجعل تجربة المستخدم أجمل وأكثر احترافية، مثلما تفعل المواقع الحديثة عندما تُظهر إشعار “تم الحفظ بنجاح ✅”.
لنبدأ بالخطوات المنظمة 👇
🎨 تحسين بصري: عرض إشعار نجاح بعد تعديل الملاحظة
🧱 الخطوة 1: تفعيل Flash Messages في Flask
افتح ملف app.py وأضف السطرين التاليين في الأعلى بعد الاستيرادات:
from flask import Flask, render_template, request, redirect, url_for, flash
ثم أضف مفتاح سرّي (لتمكين الفلاشات):
app.secret_key = "mysecretkey123"
🧱 الخطوة 2: تعديل دالة التعديل (edit)
أضف رسالة فلاش بعد نجاح التعديل:
@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit(id):
note = Note.query.get(id)
if request.method == 'POST':
note.content = request.form['content']
db.session.commit()
flash("✅ تم تعديل الملاحظة بنجاح!", "success")
return redirect(url_for('index'))
return render_template('edit.html', note=note)
🧱 الخطوة 3: عرض رسائل الفلاش في الصفحة الرئيسية
افتح ملف index.html وأضف هذا الكود داخل <body> مباشرة بعد بداية <div class="container"> مثلاً:
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="mt-3">
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
🧱 الخطوة 4: تجربة الإشعار
1- شغّل التطبيق:
python app.py2- افتح صفحة التطبيق:
http://127.0.0.1:5000/4- عدّل النص واضغط حفظ التعديل.
5- ستظهر رسالة خضراء جميلة أعلى الصفحة تقول:
✅ تم تعديل الملاحظة بنجاح!
💡 ملاحظات إضافية (اختيارية):
يمكنك تغيير لون الإشعار إلى “info” أو “warning” حسب الحالة:
flash("⚠️ لم يتم العثور على الملاحظة!", "warning")✅ النتيجة النهائية:
واجهة أكثر تفاعلًا، وسلوك احترافي مثل التطبيقات الحديثة 👍
عند التعديل، يظهر إشعار تأكيد أن التغيير تم بنجاح دون الحاجة لتحديث الصفحة يدويًا.
