🔍 الدرس 12: إضافة خاصية البحث المتقدم في الملاحظات (Advanced Search)

🎯 هدف الدرس

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

---

🧱 الملفات التي سنعدلها

• app.py → لإضافة منطق البحث.
• templates/index.html → لإضافة واجهة البحث.
• قاعدة البيانات (إن احتجنا عمود تصنيف أو تاريخ لاحقًا).

---

⚙️ الخطوة 1: تعديل صفحة عرض الملاحظات وإضافة مربع البحث

📄 templates/index.html

{% extends 'base.html' %}
{% block title %}قائمة الملاحظات{% endblock %}
{% block content %}

<h2 class="text-center mb-4">🔎 ملاحظاتك</h2>

<!-- نموذج البحث -->
<form method="GET" class="mb-4 text-center">
  <div class="input-group" style="max-width: 500px; margin: auto;">
    <input type="text" name="query" class="form-control" placeholder="ابحث في العناوين أو المحتوى..." value="{{ request.args.get('query', '') }}">
    <button class="btn btn-primary" type="submit">بحث</button>
  </div>
</form>

<!-- عرض النتائج -->
<div class="row mt-4">
  {% for note in notes %}
  <div class="col-md-4">
    <div class="card mb-4 shadow-sm border-0">
      <div class="card-body">
        <h5 class="card-title">{{ note.title }}</h5>
        <p class="card-text">{{ note.content }}</p>
        <small class="text-muted">📅 {{ note.date_created.strftime('%Y-%m-%d') }}</small>
        <div class="mt-3">
          <a href="{{ url_for('edit_note', note_id=note.id) }}" class="btn btn-sm btn-outline-primary">✏️ تعديل</a>
          <a href="{{ url_for('delete_note', note_id=note.id) }}" class="btn btn-sm btn-outline-danger">🗑️ حذف</a>
        </div>
      </div>
    </div>
  </div>
  {% else %}
  <p class="text-center">🚫 لم يتم العثور على ملاحظات مطابقة لبحثك.</p>
  {% endfor %}
</div>
{% endblock %}

---

🧩 الخطوة 2: إضافة منطق البحث في app.py

📄 app.py

from flask import Flask, render_template, request, redirect, url_for, flash, session
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.secret_key = "secret123"
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///notes.db'
db = SQLAlchemy(app)

class Note(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(200))
    content = db.Column(db.Text)
    date_created = db.Column(db.DateTime, default=datetime.utcnow)
    user_id = db.Column(db.Integer)

@app.route('/')
def index():
    if 'user_id' not in session:
        flash("يرجى تسجيل الدخول أولًا لعرض الملاحظات.")
        return redirect(url_for('login'))

    query = request.args.get('query', '')

    if query:
        notes = Note.query.filter(
            (Note.title.contains(query)) | (Note.content.contains(query)),
            Note.user_id == session['user_id']
        ).order_by(Note.date_created.desc()).all()
    else:
        notes = Note.query.filter_by(user_id=session['user_id']).order_by(Note.date_created.desc()).all()

    return render_template('index.html', notes=notes)

---

🧠 الشرح

• استخدمنا request.args.get('query') لجلب نص البحث من عنوان الصفحة (GET method).
• استخدمنا Note.title.contains(query) و Note.content.contains(query) للبحث داخل العنوان والمحتوى.
• النتائج تُرتّب من الأحدث إلى الأقدم باستخدام .order_by(Note.date_created.desc()).

---

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

1. افتح المتصفح وادخل إلى الصفحة الرئيسية.
2. اكتب أي كلمة موجودة داخل الملاحظات.
3. سيعرض التطبيق فقط الملاحظات المطابقة للكلمة التي كتبتها.
4. إذا لم يوجد تطابق، تظهر رسالة: “🚫 لم يتم العثور على ملاحظات مطابقة لبحثك.”

---

🌟 التمرين العملي

✳️ التمرين:

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

مثال:
إذا كتب المستخدم 2025-10-11، تظهر فقط الملاحظات التي تم إنشاؤها في ذلك اليوم.

---

💡 الحل المقترح:

أضف حقل إدخال جديد في نموذج البحث:

<input type="date" name="date" class="form-control" value="{{ request.args.get('date', '') }}">

ثم في app.py عدل منطق البحث:

search_date = request.args.get('date', '')

if query or search_date:
    notes = Note.query.filter(Note.user_id == session['user_id'])
    if query:
        notes = notes.filter((Note.title.contains(query)) | (Note.content.contains(query)))
    if search_date:
        try:
            date_obj = datetime.strptime(search_date, '%Y-%m-%d').date()
            notes = notes.filter(db.func.date(Note.date_created) == date_obj)
        except:
            flash("صيغة التاريخ غير صحيحة.")
    notes = notes.order_by(Note.date_created.desc()).all()
else:
    notes = Note.query.filter_by(user_id=session['user_id']).order_by(Note.date_created.desc()).all()

---

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

الآن أصبح لديك بحث متقدم وذكي في الملاحظات:

• بحث بالكلمات 🔤
• بحث حسب التاريخ 📅
• واجهة أنيقة وسهلة الاستخدام.