🧩 الدرس الثامن: إضافة شريط بحث متقدم عن الملاحظات (Search Notes)

في هذا الدرس سنضيف ميزة رائعة تمكّن المستخدم من البحث عن ملاحظة معينة داخل قاعدة البيانات بسهولة من خلال الكلمات المفتاحية أو العنوان أو المحتوى.

ستتعلم أيضًا كيفية دمج البحث مع واجهة HTML بشكل أنيق.

🔹 الخطوة 1: تعديل ملف `app.py`

افتح الملف الرئيسي للمشروع وأضف منطق البحث في الراوت الرئيسي / كالآتي:

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

app = Flask(__name__)
app.secret_key = "secret"

def get_db_connection():
    conn = sqlite3.connect('notes.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/', methods=['GET', 'POST'])
def index():
    conn = get_db_connection()

    # إذا كان هناك بحث
    query = request.args.get('query')
    if query:
        notes = conn.execute(
            "SELECT * FROM notes WHERE title LIKE ? OR content LIKE ? ORDER BY id DESC",
            ('%' + query + '%', '%' + query + '%')
        ).fetchall()
        flash(f"تم العثور على {len(notes)} نتيجة عن '{query}'")
    else:
        notes = conn.execute("SELECT * FROM notes ORDER BY id DESC").fetchall()

    conn.close()
    return render_template('index.html', notes=notes, query=query)

🔹 الخطوة 2: تعديل واجهة `index.html`

الآن نضيف شريط بحث أنيق في أعلى الصفحة، مع تنسيق جميل باستخدام Bootstrap:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>📒 دفتر الملاحظات</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="bg-light p-4">

<div class="container mt-4">
  <h1 class="text-center mb-4">📘 دفتر الملاحظات</h1>

  <!-- شريط البحث -->
  <form method="get" action="/" class="mb-4 d-flex justify-content-center">
    <input type="text" name="query" value="{{ query or '' }}" class="form-control w-50 me-2" placeholder="ابحث عن ملاحظة...">
    <button class="btn btn-primary">بحث</button>
  </form>

  <!-- عرض الرسائل -->
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      {% for msg in messages %}
        <div class="alert alert-info text-center">{{ msg }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <!-- عرض الملاحظات -->
  <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>
            <a href="/edit/{{ note['id'] }}" class="btn btn-sm btn-outline-secondary">تعديل</a>
          </div>
        </div>
      </div>
    {% else %}
      <p class="text-center text-muted">لا توجد ملاحظات مطابقة للبحث.</p>
    {% endfor %}
  </div>
</div>

</body>
</html>

🔹 الخطوة 3: تجربة البحث 🔍

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

flask run

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

http://127.0.0.1:5000

3- جرّب كتابة كلمات مثل:

جزء من العنوان.
أو كلمة داخل محتوى الملاحظة.

4- ستظهر النتائج فورًا، مع رسالة تخبرك بعدد النتائج المطابقة.

🎨 تحسين بصري إضافي:

يمكنك إضافة تأثير لطيف على شريط البحث في ملف CSS:

input[name="query"]:focus {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
  border-color: #007bff;
}

✅ نتيجة الدرس الثامن:

أصبح لديك الآن محرك بحث متكامل داخل تطبيق Flask، يعرض الملاحظات بشكل فوري ويُظهر عدد النتائج في واجهة أنيقة.

🧩 التمرين العملي – الدرس الثامن: إنشاء نظام بحث متقدم في تطبيق Flask للملاحظات

🎯 الهدف:

إضافة شريط بحث يسمح للمستخدم بالبحث عن الملاحظات عبر العنوان أو المحتوى، مع عرض النتائج بعددها في واجهة المستخدم.

🧱 الخطوة 1: تعديل كود Flask

افتح ملف app.py، واستبدل محتواه بالكود التالي (أو أضف الجزء الخاص بالبحث إذا كان موجودًا جزئيًا):

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

app = Flask(__name__)
app.secret_key = "secret"

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

# الصفحة الرئيسية مع البحث
@app.route('/', methods=['GET'])
def index():
    conn = get_db_connection()
    query = request.args.get('query')

    if query:
        # تنفيذ البحث في العنوان والمحتوى
        notes = conn.execute(
            "SELECT * FROM notes WHERE title LIKE ? OR content LIKE ? ORDER BY id DESC",
            ('%' + query + '%', '%' + query + '%')
        ).fetchall()

        flash(f"🔍 تم العثور على {len(notes)} نتيجة تحتوي على '{query}'")
    else:
        # عرض جميع الملاحظات في حالة عدم وجود بحث
        notes = conn.execute("SELECT * FROM notes ORDER BY id DESC").fetchall()

    conn.close()
    return render_template('index.html', notes=notes, query=query)

🧱 الخطوة 2: تعديل صفحة `index.html`

افتح ملف templates/index.html وضع الكود التالي بالكامل (منسق وجاهز):

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>📘 دفتر الملاحظات</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    input[name="query"]:focus {
      box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
      border-color: #007bff;
    }
    body {
      background: #f8f9fa;
    }
    .card:hover {
      transform: translateY(-3px);
      transition: 0.2s ease-in-out;
    }
  </style>
</head>
<body class="p-4">

<div class="container mt-4">
  <h1 class="text-center mb-4">📒 دفتر الملاحظات</h1>

  <!-- نموذج البحث -->
  <form method="get" action="/" class="mb-4 d-flex justify-content-center">
    <input type="text" name="query" value="{{ query or '' }}" class="form-control w-50 me-2" placeholder="ابحث عن ملاحظة...">
    <button class="btn btn-primary">بحث</button>
  </form>

  <!-- عرض الإشعارات -->
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      {% for msg in messages %}
        <div class="alert alert-info text-center">{{ msg }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <!-- عرض الملاحظات -->
  <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>
            <a href="/edit/{{ note['id'] }}" class="btn btn-sm btn-outline-secondary">✏️ تعديل</a>
          </div>
        </div>
      </div>
    {% else %}
      <p class="text-center text-muted">😕 لا توجد ملاحظات مطابقة للبحث.</p>
    {% endfor %}
  </div>
</div>

</body>
</html>

🧱 الخطوة 3: تجربة التمرين

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

flask run

2- افتح في المتصفح:

http://127.0.0.1:5000/

3- جرّب كتابة في شريط البحث:

كلمة موجودة في عنوان ملاحظة.
أو كلمة في المحتوى.

4- ستظهر النتائج فورًا، مع رسالة توضح عدد النتائج التي تم العثور عليها.

✅ النتيجة النهائية:

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

🧩 الدرس الثامن: إضافة شريط بحث متقدم عن الملاحظات (Search Notes)

🔹 الخطوة 1: تعديل ملف `app.py`

🔹 الخطوة 2: تعديل واجهة `index.html`

🔹 الخطوة 3: تجربة البحث 🔍

🎨 تحسين بصري إضافي:

✅ نتيجة الدرس الثامن:

🧩 التمرين العملي – الدرس الثامن: إنشاء نظام بحث متقدم في تطبيق Flask للملاحظات

🎯 الهدف:

🧱 الخطوة 1: تعديل كود Flask

🧱 الخطوة 2: تعديل صفحة `index.html`

🧱 الخطوة 3: تجربة التمرين

✅ النتيجة النهائية:

إرسال تعليق

وصف المدونة

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

Contact form

🧩 الدرس الثامن: إضافة شريط بحث متقدم عن الملاحظات (Search Notes)

🔹 الخطوة 1: تعديل ملف app.py

🔹 الخطوة 2: تعديل واجهة index.html

🔹 الخطوة 3: تجربة البحث 🔍

🎨 تحسين بصري إضافي:

✅ نتيجة الدرس الثامن:

🧩 التمرين العملي – الدرس الثامن: إنشاء نظام بحث متقدم في تطبيق Flask للملاحظات

🎯 الهدف:

🧱 الخطوة 1: تعديل كود Flask

🧱 الخطوة 2: تعديل صفحة index.html

🧱 الخطوة 3: تجربة التمرين

✅ النتيجة النهائية:

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

إرسال تعليق

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

Contact form

🔹 الخطوة 1: تعديل ملف `app.py`

🔹 الخطوة 2: تعديل واجهة `index.html`

🧱 الخطوة 2: تعديل صفحة `index.html`