🗂️ الدرس الثالث: عرض الملاحظات المحفوظة في واجهة المستخدم

في هذا الدرس سنتعلم كيفية عرض الملاحظات التي تم حفظها في قاعدة البيانات على الصفحة الرئيسية للتطبيق.

سنجعل المستخدم يرى جميع الملاحظات المسجلة بطريقة أنيقة ومنسقة.

🎯 هدف الدرس:

جلب البيانات من قاعدة SQLite.
عرض الملاحظات في واجهة HTML باستخدام Jinja2.
تنسيق صفحة العرض باستخدام Bootstrap لجعلها مرتبة وجميلة.

🧠 الفكرة العامة:

حتى الآن قمنا بإنشاء قاعدة بيانات وحفظ الملاحظات فيها.
الآن سنجلب تلك الملاحظات ونظهرها في واجهة المستخدم.

🪶 الخطوات:

1. تعديل ملف `app.py`

أضف هذا الكود في نفس الملف:

from flask import Flask, render_template, request, redirect
import sqlite3

app = Flask(__name__)

# الاتصال بقاعدة البيانات
def get_db_connection():
    conn = sqlite3.connect('notes.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/')
def index():
    conn = get_db_connection()
    notes = conn.execute('SELECT * FROM notes').fetchall()
    conn.close()
    return render_template('index.html', notes=notes)

@app.route('/add', methods=['POST'])
def add_note():
    title = request.form['title']
    content = request.form['content']

    conn = get_db_connection()
    conn.execute('INSERT INTO notes (title, content) VALUES (?, ?)', (title, content))
    conn.commit()
    conn.close()
    return redirect('/')

2. إنشاء واجهة العرض `templates/index.html`

أنشئ مجلد باسم templates (إن لم يكن موجودًا)، ثم أضف الملف التالي داخله:

<!DOCTYPE html>
<html lang="ar">
<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">
</head>
<body class="bg-light">
<div class="container mt-5">
    <h1 class="text-center mb-4">📝 ملاحظاتي</h1>

    <form action="/add" method="POST" class="mb-4">
        <div class="input-group">
            <input type="text" name="title" placeholder="العنوان" class="form-control" required>
            <input type="text" name="content" placeholder="المحتوى" class="form-control" required>
            <button type="submit" class="btn btn-primary">إضافة</button>
        </div>
    </form>

    <div class="row">
        {% for note in notes %}
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">{{ note['title'] }}</h5>
                    <p class="card-text">{{ note['content'] }}</p>
                </div>
            </div>
        </div>
        {% else %}
        <p class="text-center">لا توجد ملاحظات حالياً 🌿</p>
        {% endfor %}
    </div>
</div>
</body>
</html>

💡 الشرح:

عند زيارة /، يتم جلب جميع الملاحظات من قاعدة البيانات.
يتم تمريرها إلى القالب index.html عبر المتغير notes.
حلقة {% for note in notes %} تعرض كل ملاحظة داخل بطاقة أنيقة (Card).
إذا لم توجد ملاحظات، تظهر رسالة "لا توجد ملاحظات حالياً".

⚙️ تجربة التطبيق:

1-شغّل التطبيق:

python app.py

2- افتح المتصفح على:

http://127.0.0.1:5000/

3- أضف ملاحظات جديدة وشاهدها تظهر مباشرة أسفل النموذج.

✅ حل تمرين الدرس الثالث: عرض الملاحظات من قاعدة البيانات

في هذا التمرين سننفذ عمليًا ما تعلمناه — سنجعل التطبيق يعرض الملاحظات المحفوظة بشكل منسق في الصفحة الرئيسية.

🎯 المطلوب:

إنشاء صفحة تعرض جميع الملاحظات من قاعدة البيانات.
تنسيق واجهة العرض باستخدام Bootstrap.
التأكد من أن الإضافة الجديدة للملاحظات تظهر فورًا دون تحديث يدوي.

🧩 الخطوات بالتفصيل:

1️⃣ ملف app.py

قم بفتح الملف الذي استخدمناه في الدروس السابقة واستبدل محتواه بهذا الكود الكامل:

from flask import Flask, render_template, request, redirect
import sqlite3

app = Flask(__name__)

# دالة الاتصال بقاعدة البيانات
def get_db_connection():
    conn = sqlite3.connect('notes.db')
    conn.row_factory = sqlite3.Row
    return conn

# الصفحة الرئيسية - عرض الملاحظات
@app.route('/')
def index():
    conn = get_db_connection()
    notes = conn.execute('SELECT * FROM notes').fetchall()
    conn.close()
    return render_template('index.html', notes=notes)

# إضافة ملاحظة جديدة
@app.route('/add', methods=['POST'])
def add_note():
    title = request.form['title']
    content = request.form['content']

    conn = get_db_connection()
    conn.execute('INSERT INTO notes (title, content) VALUES (?, ?)', (title, content))
    conn.commit()
    conn.close()
    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

📘 شرح سريع:

index() تجلب جميع الملاحظات من قاعدة البيانات وتعرضها.
add_note() تضيف ملاحظة جديدة ثم تعيد المستخدم للصفحة الرئيسية لتحديث القائمة.

2️⃣ ملف القالب templates/index.html

قم بإنشاء مجلد باسم templates (إن لم يكن موجودًا)، ثم أنشئ بداخله ملفًا باسم index.html وضع الكود التالي:

<!DOCTYPE html>
<html lang="ar">
<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">
</head>
<body class="bg-light">

<div class="container mt-5">
    <h1 class="text-center mb-4">📒 تطبيق الملاحظات</h1>

    <form action="/add" method="POST" class="mb-4">
        <div class="row g-2">
            <div class="col-md-4">
                <input type="text" name="title" class="form-control" placeholder="عنوان الملاحظة" required>
            </div>
            <div class="col-md-6">
                <input type="text" name="content" class="form-control" placeholder="محتوى الملاحظة" required>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-success w-100">إضافة</button>
            </div>
        </div>
    </form>

    <div class="row">
        {% for note in notes %}
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">{{ note['title'] }}</h5>
                    <p class="card-text">{{ note['content'] }}</p>
                </div>
            </div>
        </div>
        {% else %}
        <p class="text-center text-muted mt-4">لا توجد ملاحظات حالياً ✨</p>
        {% endfor %}
    </div>
</div>

</body>
</html>

🧠 شرح التمرين:

استخدمنا حلقة Jinja {% for note in notes %} لعرض كل ملاحظة داخل بطاقة (Card).
أضفنا نموذجًا لإدخال العنوان والمحتوى.
بمجرد الضغط على زر "إضافة"، يتم إرسال البيانات إلى المسار /add لإدخالها في قاعدة البيانات.
بعد ذلك يعاد تحميل الصفحة تلقائيًا وتظهر الملاحظة الجديدة.

🧪 تجربة النتيجة النهائية:

1- شغّل التطبيق بالأمر:

python app.py

2- افتح المتصفح على العنوان:

http://127.0.0.1:5000/

3- أضف بعض الملاحظات وشاهدها تظهر فورًا على الشاشة.

🌟 ملاحظات إضافية:

يمكنك تحسين واجهة العرض لاحقًا بإضافة ألوان مختلفة لكل بطاقة.
في الدرس القادم، سنتعلم تعديل الملاحظات وحذفها بطريقة احترافية.

🗂️ الدرس الثالث: عرض الملاحظات المحفوظة في واجهة المستخدم

🎯 هدف الدرس:

🧠 الفكرة العامة:

🪶 الخطوات:

1. تعديل ملف `app.py`

2. إنشاء واجهة العرض `templates/index.html`

💡 الشرح:

⚙️ تجربة التطبيق:

✅ حل تمرين الدرس الثالث: عرض الملاحظات من قاعدة البيانات

🎯 المطلوب:

🧩 الخطوات بالتفصيل:

1️⃣ ملف app.py

2️⃣ ملف القالب templates/index.html

🧠 شرح التمرين:

🧪 تجربة النتيجة النهائية:

🌟 ملاحظات إضافية:

إرسال تعليق

وصف المدونة

#buttons=( أقبل ! ) #days=(20)

Contact form

🗂️ الدرس الثالث: عرض الملاحظات المحفوظة في واجهة المستخدم

🎯 هدف الدرس:

🧠 الفكرة العامة:

🪶 الخطوات:

1. تعديل ملف app.py

2. إنشاء واجهة العرض templates/index.html

💡 الشرح:

⚙️ تجربة التطبيق:

✅ حل تمرين الدرس الثالث: عرض الملاحظات من قاعدة البيانات

🎯 المطلوب:

🧩 الخطوات بالتفصيل:

1️⃣ ملف app.py

2️⃣ ملف القالب templates/index.html

🧠 شرح التمرين:

🧪 تجربة النتيجة النهائية:

🌟 ملاحظات إضافية:

مواضيع ذات صلة

إرسال تعليق

#buttons=( أقبل ! ) #days=(20)

Contact form

1. تعديل ملف `app.py`

2. إنشاء واجهة العرض `templates/index.html`