بناء تطبيق جانغو لمكتبة رقمية: تصميم صفحة المكتبة وتحسين تجربة المستخدم

في هذا الجزء الرابع من سلسلة تعلم جانغو، سنستعرض مرحلة إنشاء صفحة المكتبة الرئيسية لتطبيقنا. سنقوم بالتركيز على تصميم وتنفيذ واجهة المستخدم الرئيسية للتطبيق، والتي ستكون نقطة الوصول الأساسية للمستخدمين إلى محتوى المكتبة.

أولاً وقبل البدء في الكود، يجب أن نحدد الهدف الرئيسي لهذه الصفحة. هل نريد عرض قائمة بالكتب المتاحة؟ أم نريد تصفحها حسب تصنيفات مختلفة؟ لنفترض أننا نريد تحقيق الاثنين.

سنقوم بإنشاء نموذج Django لتمثيل الكتب، حيث سيكون لدينا خصائص مثل “عنوان الكتاب” و”المؤلف” و”تصنيف” وما إلى ذلك. ثم سنقوم بإنشاء عرض لعرض هذه الكتب على صفحة المكتبة الرئيسية.

في الملف models.py:

python
from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=50)
    category = models.CharField(max_length=50)

    def __str__(self):
        return self.title

ثم سنقوم بعملية التهيئة لتضمين هذا النموذج في مشروعنا عبر الإشارة إليه في settings.py.

الخطوة التالية هي إنشاء عرض Django لعرض الكتب على صفحة المكتبة الرئيسية. سنقوم بإنشاء ملف views.py:

python
from django.shortcuts import render
from .models import Book

def library_home(request):
    books = Book.objects.all()
    return render(request, 'library/home.html', {'books': books})

ثم سنقوم بتكوين الرابط الخاص بنا في urls.py:

python
from django.urls import path
from .views import library_home

urlpatterns = [
    path('library/', library_home, name='library_home'),
    # أي روابط أخرى يمكن أن تضاف هنا للمستقبل
]

الآن، سنقوم بإنشاء قالب (template) Django لعرض الكتب. سنقوم بإنشاء مجلد templates في دليل التطبيق ونضع فيه ملف home.html:

html
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Hometitle>
head>
<body>
    <h1>Welcome to the Libraryh1>
    <ul>
        {% for book in books %}
            <li>{{ book.title }} by {{ book.author }} ({{ book.category }})li>
        {% endfor %}
    ul>
body>
html>

أخيرًا، نحتاج إلى تحديث ملف settings.py للإشارة إلى القالب الجديد:

python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / "templates"],
        # ...
    },
]

بهذا، قد قمنا بإنشاء صفحة المكتبة الرئيسية في تطبيق Django الخاص بنا. يمكنك الآن تشغيل الخادم ورؤية الصفحة الرئيسية للمكتبة عبر http://127.0.0.1:8000/library/.

هذا المشروع يمثل نموذجًا بسيطًا لبناء تطبيق Django. يمكنك استكشاف المزيد من التحسينات، مثل إضافة صفحات تفصيلية للكتب، أو تصفية الكتب حسب التصنيف، وما إلى ذلك. باستخدام هذه القاعدة، يمكنك بناء تطبيق مكتبة قوي ومتطور باستخدام Django.

المزيد من المعلومات

بالطبع، سنقدم المزيد من المعلومات لتعزيز فهمك حول بناء تطبيق جانغو لصفحة المكتبة الرئيسية.

تحسين تصفية الكتب حسب التصنيف:

لتحسين تجربة المستخدم، يمكننا إضافة إمكانية تصفية الكتب حسب التصنيف. سنقوم بتعديل views.py ليصبح كالتالي:

python
def library_home(request, category=None):
    if category:
        books = Book.objects.filter(category=category)
    else:
        books = Book.objects.all()
    return render(request, 'library/home.html', {'books': books, 'category': category})

ثم نقوم بتحديث urls.py لتضمين التصنيف كجزء من الرابط:

python
urlpatterns = [
    path('library/', library_home, name='library_home'),
    path('library//', library_home, name='library_category'),
    # أي روابط أخرى يمكن أن تضاف هنا للمستقبل
]

وسيتم استخدام هذا التصميم لعرض الكتب حسب التصنيف عبر الرابط http://127.0.0.1:8000/library//.

إضافة صفحات تفصيلية للكتب:

يمكننا أيضًا تحسين التطبيق بإضافة صفحات تفصيلية لكل كتاب. سنقوم بتحديث views.py وurls.py على النحو التالي:

python
# في views.py
from django.shortcuts import render, get_object_or_404

def book_detail(request, book_id):
    book = get_object_or_404(Book, pk=book_id)
    return render(request, 'library/book_detail.html', {'book': book})

# في urls.py
urlpatterns = [
    # ...
    path('library/book//', book_detail, name='book_detail'),
]

ونقوم بإنشاء قالب book_detail.html:

html
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ book.title }} Detailstitle>
head>
<body>
    <h1>{{ book.title }} Detailsh1>
    <p>Author: {{ book.author }}p>
    <p>Category: {{ book.category }}p>
    
body>
html>

ثم نقوم بتحديث library_home.html لإضافة روابط لكل كتاب:

html
<ul>
    {% for book in books %}
        <li>
            <a href="{% url 'book_detail' book.id %}">{{ book.title }}a> 
            by {{ book.author }} ({{ book.category }})
        li>
    {% endfor %}
ul>

استخدام Bootstrap لتحسين التصميم:

يمكن تحسين تصميم التطبيق باستخدام Bootstrap لتنسيق الصفحات بشكل أفضل. يمكنك تضمين Bootstrap في مشروعك عبر تحميله أو استخدام Content Delivery Network (CDN). ثم يمكنك استخدام فئات Bootstrap في قوالب HTML الخاصة بك.

الاستمرار في التطوير:

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

الوسوم

المزيد من المعلومات

تحسين تصفية الكتب حسب التصنيف:

إضافة صفحات تفصيلية للكتب:

استخدام Bootstrap لتحسين التصميم:

الاستمرار في التطوير:

أبرز مميزات لغة بايثون في التطوير البرمجي

تحسين أداء شيفرة بايثون: أسرار السرعة وفعالية التنفيذ

مقالات ذات صلة

إشراف مشاريع البرمجيات المفتوحة عبر GitHub: دليل شامل للمشرفين

فحص تنسيقات التاريخ والوقت في C#

استخراج القيم من مصفوفة الكائنات في برمجة تطبيقات الويب

مشغل صوتي بخلفية تلقائية

أنت تستخدم إضافة Adblock