🧩 الدرس 10: الجلسات (Sessions) وتسجيل الدخول (Login System)

🎯 الهدف من الدرس:

سنتعلم اليوم كيف ننشئ نظامًا بسيطًا لتسجيل الدخول باستخدام Flask Sessions لتخزين حالة المستخدم بعد تسجيل الدخول، حتى نعرف ما إذا كان قد سجّل الدخول أم لا.

---

🧠 ما هي الجلسات (Sessions)؟

الجلسة في Flask هي طريقة لتخزين بيانات المستخدم مؤقتًا أثناء زيارته للموقع.
فعندما يسجّل المستخدم الدخول، نقوم بتخزين اسمه أو بريده داخل الجلسة، ليبقى مسجلاً حتى يغلق المتصفح أو يسجل الخروج.

Flask يوفر مكتبة جاهزة للتعامل مع الجلسات تُسمى session من flask.

---

⚙️ إعداد المشروع

أنشئ ملفًا جديدًا باسم app.py يحتوي على الكود التالي:

from flask import Flask, render_template, request, redirect, url_for, session

app = Flask(__name__)
app.secret_key = 'my_secret_key_123'  # مفتاح سري ضروري للجلسات

# مستخدم تجريبي لتسجيل الدخول
USER_DATA = {
    "username": "admin",
    "password": "1234"
}


@app.route('/')
def home():
    # التحقق إذا كان المستخدم داخل الجلسة
    if 'user' in session:
        return f"""
        <h2>مرحبًا {session['user']} 👋</h2>
        <a href="/logout">تسجيل الخروج</a>
        """
    return redirect(url_for('login'))


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']

        if username == USER_DATA['username'] and password == USER_DATA['password']:
            session['user'] = username  # حفظ اسم المستخدم في الجلسة
            return redirect(url_for('home'))
        else:
            return "<h3>❌ اسم المستخدم أو كلمة المرور غير صحيحة</h3>"

    return """
    <h2>تسجيل الدخول</h2>
    <form method="POST">
        اسم المستخدم: <input type="text" name="username" required><br><br>
        كلمة المرور: <input type="password" name="password" required><br><br>
        <button type="submit">دخول</button>
    </form>
    """


@app.route('/logout')
def logout():
    session.pop('user', None)  # حذف المستخدم من الجلسة
    return redirect(url_for('login'))


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

---

💡 شرح الكود:

• session تُستخدم لتخزين بيانات المستخدم مؤقتًا.
• app.secret_key ضروري لتشفير بيانات الجلسة (يجب أن يكون سريًا).
• بعد تسجيل الدخول، يتم حفظ اسم المستخدم داخل الجلسة (session['user'] = username).
• في الصفحة الرئيسية، يتم التحقق هل المستخدم داخل الجلسة أم لا.
• عند تسجيل الخروج، نحذف الجلسة (session.pop('user', None)).

---

🧩 تمرين الدرس العاشر:

طوّر هذا المشروع بحيث:

1- يضيف صفحة “الملف الشخصي (Profile)” تظهر فقط إذا كان المستخدم مسجل دخول.

2- في صفحة الملف الشخصي، اعرض:

• اسم المستخدم.
• وقت تسجيل الدخول (استخدم datetime.now()).

3- إذا حاول المستخدم الوصول إلى /profile بدون تسجيل دخول، أعد توجيهه تلقائيًا إلى صفحة الدخول.

---

✅ حل تمرين الدرس العاشر: نظام تسجيل الدخول مع صفحة الملف الشخصي

---

🗂️ هيكل المشروع

flask_login_app/
│
├── app.py
└── templates/
    ├── login.html
    ├── home.html
    └── profile.html

---

⚙️ 1. ملف app.py

from flask import Flask, render_template, request, redirect, url_for, session
from datetime import datetime

app = Flask(__name__)
app.secret_key = 'super_secret_key_123'

# بيانات مستخدم تجريبية
USER_DATA = {
    "username": "admin",
    "password": "1234"
}

@app.route('/')
def home():
    if 'user' in session:
        return render_template('home.html', user=session['user'])
    return redirect(url_for('login'))


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']

        if username == USER_DATA['username'] and password == USER_DATA['password']:
            session['user'] = username
            session['login_time'] = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
            return redirect(url_for('home'))
        else:
            return render_template('login.html', error="❌ اسم المستخدم أو كلمة المرور غير صحيحة")

    return render_template('login.html')


@app.route('/profile')
def profile():
    if 'user' not in session:
        return redirect(url_for('login'))

    return render_template('profile.html', user=session['user'], time=session['login_time'])


@app.route('/logout')
def logout():
    session.pop('user', None)
    session.pop('login_time', None)
    return redirect(url_for('login'))


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

---

🧩 2. ملف login.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>تسجيل الدخول</title>
  <style>
    body { font-family: "Cairo", sans-serif; text-align: center; margin-top: 80px; }
    form { display: inline-block; text-align: right; padding: 20px; border: 1px solid #ccc; border-radius: 10px; }
    input { margin: 8px; padding: 8px; border-radius: 6px; border: 1px solid #aaa; }
    button { background-color: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 6px; }
    button:hover { background-color: #0056b3; cursor: pointer; }
    .error { color: red; font-weight: bold; }
  </style>
</head>
<body>
  <h2>تسجيل الدخول</h2>
  {% if error %}
    <p class="error">{{ error }}</p>
  {% endif %}
  <form method="POST">
    <label>اسم المستخدم:</label><br>
    <input type="text" name="username" required><br>
    <label>كلمة المرور:</label><br>
    <input type="password" name="password" required><br><br>
    <button type="submit">دخول</button>
  </form>
</body>
</html>

---

🏠 3. ملف home.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الصفحة الرئيسية</title>
  <style>
    body { font-family: "Cairo", sans-serif; text-align: center; margin-top: 60px; }
    a { margin: 10px; color: #007bff; text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <h2>مرحبًا {{ user }} 👋</h2>
  <p>أنت الآن مسجل دخول.</p>
  <a href="{{ url_for('profile') }}">الملف الشخصي</a>
  <a href="{{ url_for('logout') }}">تسجيل الخروج</a>
</body>
</html>

---

👤 4. ملف profile.html

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الملف الشخصي</title>
  <style>
    body { font-family: "Cairo", sans-serif; text-align: center; margin-top: 60px; }
    a { color: #007bff; text-decoration: none; }
    a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <h2>الملف الشخصي</h2>
  <p><strong>اسم المستخدم:</strong> {{ user }}</p>
  <p><strong>وقت تسجيل الدخول:</strong> {{ time }}</p>
  <a href="{{ url_for('home') }}">الصفحة الرئيسية</a> |
  <a href="{{ url_for('logout') }}">تسجيل الخروج</a>
</body>
</html>

---

🎯 شرح الحل:

1- عند تسجيل الدخول يتم حفظ:

• session['user'] → اسم المستخدم.
• session['login_time'] → وقت الدخول.

2- عند الدخول إلى /profile يتم عرض البيانات فقط إذا كان المستخدم داخل الجلسة.
3- إذا حاول الدخول بدون تسجيل، يتم تحويله مباشرة إلى /login.

---

🌟 تمرين إضافي:

أضف في صفحة الملف الشخصي زرًّا لتحديث وقت الدخول (تحديث آخر نشاط) يقوم بتغيير الوقت في الجلسة دون إعادة تسجيل الدخول.