ایجاد صفحه اصلی در Django

حالا ما آماده ایم تا کدی که اولین صفحه کامل ما را نشان می‌دهد اضافه کنیم – یعنی صفحه اصلی وب سایت LocalLibrary. صفحه اصلی تعداد رکوردهایی را نشان می‌دهد که ما برای هر نوع مدل داریم و لینک‌های مسیریابی سایدبار را به صفحات دیگر ما ارائه می‌کند. در طول مسیر، ما تجربه عملی در نوشتن نقشه‌ها و ویوهای URL پایه، دریافت رکوردها از پایگاه‌داده، و استفاده از تمپلت ها را به دست خواهیم آورد.

پیش نیاز آموزش ایجاد صفحه اصلی در جنگو

بخش معرفی Django

آموزش ساخت ادمین سایت با Django

هدف :

یادگیری ایجاد نقشه‌ها و ویوهای URL (که در آن هیچ داده‌ای در URL کدگذاری نمی‌ شود)، دریافت داده‌ها از مدل‌ها، و ایجاد تمپلت ها.

بررسی

بعد از اینکه مدل‌ها را تعریف کردیم و برخی رکوردهای اولیه کتابخانه را برای کار آماده کردیم، زمان آن رسیده کدی را بنویسیم که اطلاعاتی را به کاربران نشان دهد. اولین کاری که باید انجام دهیم این است که مشخص کنیم چه اطلاعاتی می‌خواهیم در صفحات خود نمایش داده، و URL هایی که برای ارائه این منابع استفاده می‌کنیم را تعریف کنیم. سپس باید یک مپر URL، ویوها، و تمپلت هایی را برای نمایش صفحات ایجاد کنیم.

نمودار زیر جریان داده اصلی و کامپوننت¬های مورد نیاز را هنگام رسیدگی به درخواست‌ها و پاسخ‌های HTTP توصیف می‌کند. همانطور که قبلا این مدل را اجرا کردیم، کامپوننت های اصلی که ایجاد خواهیم کرد عبارتند از:

• مپر URL برای فوروارد کردن URL های پشتیبانی شده (و هر گونه اطلاعات کدگذاری شده در URL ها) به توابع ویوی مناسب.

• توابع ویو برای بدست آوردن داده‌های درخواست‌شده از مدل‌ها، ایجاد صفحات HTML که داده‌ها را نمایش دهند، و صفحات را برای نمایش در مرورگر به کاربر باز می‌گرداند.

• تمپلت ها برای استفاده در هنگام ترسیم داده‌ها در ویوها.

همانطور که در بخش بعدی خواهید دید، ما پنج صفحه برای نمایش داریم، که اطلاعات بسیار زیادی برای مستند کردن در یک مقاله اند. بنابراین، این مقاله بر چگونگی پیاده سازی صفحه اصلی تمرکز خواهد داشت و ما صفحات دیگر را در مقاله بعدی پوشش خواهیم داد. این باید به شما درک کامل و خوبی از نحوه نمایش URL ها، ویوها، و کارکرد مدل‌ها در عمل بدهد.

تعریف URL های منبع

از آنجا که این نسخه از LocalLibrary اساسا برای کاربران نهایی به صورت فقط-خواندنی ارائه شده، ما فقط باید یک صفحه اول برای سایت ایجاد کنیم (هوم پیج)، و صفحاتی که ویوی لیست و جزئیات را برای کتاب‌ها و نویسندگان نمایش می‌دهند.

URL هایی که ما برای صفحات خود نیاز داریم به قرار زیر است:

• catalog/

هوم پیج (ایندکس).

• catalog/books/

لیستی از همه کتاب‌ها.

• catalog/authors/

لیستی از همه نویسندگان.

• catalog/book/< id>

ویوی جزئیات برای یک کتاب خاص با یک کلید پرایمری فیلد شامل < id> (پیش‌فرض). برای مثال، URL برای سومین کتاب اضافه‌شده به لیست به صورت catalog/book/3 خواهد بود.

• catalog/author/< id>

ویوی جزئیات برای نویسنده خاص با یک کلید پرایمری فیلد شامل < id>. برای مثال، URL یازدهمین نویسنده که به لیست اضافه شده به صورت، catalog/author/11 خواهد بود.

سه URL اول، صفحه ایندکس، لیست کتاب‌ها و لیست نویسنده ها را باز خواهندگرداند. این URLها هیچ اطلاعات اضافی را کدگذاری نمی‌کنند، و کوئری هایی که اطلاعات را از پایگاه‌داده دریافت می‌کنند همیشه مشابه خواهند بود. با این حال، نتایجی که کوئری ها بازگشت می دهند به محتویات پایگاه‌داده بستگی خواهد داشت.

در عوض، دو URL پایانی، اطلاعات مفصلی در مورد یک کتاب یا نویسنده خاص را نمایش می دهند. این URL ها هویت آیتم نمایش داده شونده را کدگذاری می‌کنند (نشان‌داده‌شده با < id> در بالا). مپر URL اطلاعات کدگذاری شده را استخراج کرده و آن را به ویو ارسال می‌کند، و ویو به طور داینامیک تعیین می کند که چه اطلاعاتی از پایگاه‌داده دریافت شوند. با کدگذاری اطلاعات در URL ما یک مجموعه از مپر URL، یک ویو، و یک تمپلت برای بررسی همه کتاب‌ها (یا نویسندگان) استفاده خواهیم کرد.

همانطور که در بخش بررسی اشاره شد، بقیه این مقاله چگونگی ساخت صفحه ایندکس را شرح می‌دهد.

ایجاد صفحه ایندکس

اولین صفحه‌ای که ایجاد می‌کنیم صفحه ایندکس (catalog/) است. صفحه ایندکس شامل برخی HTML استاتیک، همراه با "counts" ایجاد شده از رکوردهای مختلف موجود در پایگاه‌داده است. برای انجام این کار، ما مپینگ URL، یک ویو و یک تمپلت را ایجاد خواهیم کرد.

مپینگ URL

هنگامی که وب سایت اسکلتون را ایجاد کردیم، فایل locallibrary/urls.py را به روز رسانی کردیم تا مطمئن شویم هر زمان یک URL که با catalog/ شروع می‌شود، دریافت شود، ماژول URLConf، catalog.urls، زیررشته¬های باقیمانده را پردازش خواهد کرد.

تکه کد زیر از locallibrary/urls.py حاوی ماژول catalog.urls است:

                    urlpatterns += [
                       path('catalog/', include('catalog.urls')),
                    ]
                

                        urlpatterns = [
                            path('', views.index, name='index'),
                        ]
                    

تابع path() موارد زیر را تعریف می‌کند:

• یک پترن URL که یک رشته خالی است: " ". ما پترن های URL را هنگام کار بر سایر ویوها، با جزئیات مورد بحث قرار خواهیم داد.

• یک تابع ویو که در صورت تشخیص پترن URL فراخوانده می‌شود: views.index، که تابع index() در فایل views.py است.

تابع path() همچنین یک پارامتر name را مشخص می‌کند، که یک شناسایی کننده منحصر به فرد برای این مپینگ URL خاص است. شما می‌توانید از name برای "معکوس" کردن مپر استفاده کنید، یعنی به طور داینامیک URLی ایجاد کنید که به منبع تحت رسیدگی مپر اشاره می کند. برای مثال، می‌توانیم از پارامتر name برای پیوند به هوم پیج خود از هر صفحه دیگری با افزودن لینک زیر در یک تمپلت استفاده کنیم:

                    Home.
                

ویو (بر پایه تابع)

ویو تابعی است که درخواست یک HTTP را پردازش می‌کند، داده‌های مورد نیاز را از پایگاه‌داده تهیه می‌کند، داده‌ها را در یک صفحه HTML با استفاده از یک تمپلت HTML قرار می‌دهد و سپس HTML تولید شده را به صورت HTTP به نمایش می‌گذارد تا صفحه را به کاربر نمایش دهد. ویوی ایندکس از این مدل پیروی می‌کند - اطلاعات تعداد book، BookInstance، BookInstance در دسترس و رکوردهای author که در پایگاه‌داده داریم را تطابق داده و این اطلاعات را به یک تمپلت برای نمایش انتقال می‌دهد.

catalog/views.py را باز کرده و توجه داشته باشید که این فایل برای تولید یک فایل HTML با استفاده از یک تمپلت و داده، تابع render() را وارد می‌کند:

                    from django.shortcuts import render

                    # Create your views here.
                

خطوط زیر را در پایین فایل قراردهید:

                    from catalog.models import Book, Author, BookInstance, Genre

                    def index(request):
                        """View function for home page of site."""

                        # Generate counts of some of the main objects
                        num_books = Book.objects.all().count()
                        num_instances = BookInstance.objects.all().count()

                        # Available books (status = 'a')
                        num_instances_available = BookInstance.objects.filter(status__exact='a').count()

                        # The 'all()' is implied by default.
                        num_authors = Author.objects.count()

                        context = {
                            'num_books': num_books,
                            'num_instances': num_instances,
                            'num_instances_available': num_instances_available,
                            'num_authors': num_authors,
                        }

                        # Render the HTML template index.html with the data in the context variable
                        return render(request, 'index.html', context=context)
                

خط اول، کلاس‌ های مدل را وارد می‌کند که ما برای دسترسی به داده‌ها در همه ویوهای خود استفاده خواهیم کرد.

بخش اول تابع ویو تعداد رکوردها را با استفاده از صفت objects.all() بر کلاس‌های مدل قرار می¬دهد. همچنین لیستی از آبجکت¬های BookInstance که دارای مقدار "a" (موجود) در فیلد وضعیت هستند را نیز دریافت می‌کند. شما می‌توانید اطلاعات بیشتری در مورد چگونگی دسترسی به داده‌های مدل را در بخش آموزشی قبلی ما پیدا کنید.

در پایان تابع ویو، ما تابع render() را برای ایجاد یک صفحه HTML و بازگردانی صفحه به عنوان پاسخ، فرامی خوانیم. این تابع میان‌بر تعداد توابع دیگری را برای ساده‌سازی یک استفاده مشترک در خود قرار می‌دهد. تابع render() پارامترهای زیر را می‌پذیرد:

• آبجکت request اصلی، که یک HttpRequest است.

• یک تمپلت HTML با placeholder هایی برای داده.

• یک متغیر context، که یک دیکشنری پایتون است، حاوی داده برای وارد کردن در placeholder است.

در بخش بعدی درباره تمپلت¬ها و متغیرهای context بحث خواهیم کرد. بیایید تمپلت خود را ایجاد کنیم تا بتوانیم چیزی را به کاربر نمایش دهیم!

تمپلت

تمپلت یک فایل متنی است که ساختار یا چیدمان یک فایل (مانند یک صفحه HTML) را تعریف می‌کند، از placeholder ها برای نشان دادن محتوای حقیقی استفاده می‌کند.

یک برنامه Django که با استفاده از startapp (مانند اسکلتون در این مثال) ایجاد شده، به دنبال تمپلت ها در زیرشاخه ای به نام "templates" خواهد گشت. به عنوان مثال، در ویوی ایندکس که به تازگی اضافه کردیم، تابع render() می بایست فایل index.html را در /locallibrary/catalog/templates/ پیدا کند، و اگر فایل موجود نباشد، پیغام خطایی صادر خواهد کرد.

شما می‌توانید این را با ذخیره کردن تغییرات قبلی و دسترسی به 127.0.0.1:8000 در مرورگر خود چک کنید - این یک پیغام خطای نسبتا مستقیم را برگشت خواهد داد: TemplateDoesNotExist at /catalog/ و کمی جزئیات دیگر.

توسعه تمپلت ها

تمپلت ایندکس به نشانه گذاری HTML استاندارد برای هد و بادی نیاز دارد، همراه با بخش‌های انتقال دهنده برای لینک شدن به صفحات دیگر سایت (که هنوز ایجاد نکرده ایم)، و به بخش‌ هایی که متن مقدماتی و داده‌های کتاب را نمایش می‌دهند.

بیشتر ساختار HTML و پیمایش در هر صفحه سایت ما یکسان خواهد بود. بجای کپی‌برداری از کد boilerplate در هر صفحه، شما می‌توانید از زبان تمپلت Django برای اعلام یک تمپلت پایه استفاده کنید، و سپس آن را بسط دهید تا تنها بیت هایی که برای هر صفحه خاص متفاوت هستند را جایگزین کنید.

تکه کد زیر یک تمپلت پایه نمونه از فایل base_generic.html است. ما به زودی تمپلت را برای LocalLibrary ایجاد خواهیم کرد. نمونه زیر شامل HTML مشترک با چند بخش برای عنوان، ساید بار، و محتوای اصلی مشخص‌ شده با تگ‌های تمپلت block و endblock به صورت بولد ‌است. شما می ‌توانید blocks را خالی رها کرده، یا از محتوای برای استفاده در هنگام رندر کردن صفحات برگرفته شده از تمپلت استفاده کنید.

                    
                    
                    
                      {% block title %}{% endblock %}
                    
                    
                      {% block sidebar %}{% endblock %}
                      {% block content %}{% endblock %}
                    
                    
                

هنگامی که یک تمپلت را برای یک ویوی خاص تعریف می‌کنیم، ابتدا تمپلت پایه را با استفاده از تگ تمپلت extends مشخص می‌کنیم - نمونه کد زیر را ببینید. سپس اعلام می ‌کنیم که کدام بخش‌ های تمپلت را می‌ خواهیم جایگزین کنیم (در صورت وجود)، با استفاده از بخش‌های block/endblock، مانند آنچه در تمپلت پایه انجام شد.

برای مثال، تکه کد زیر نشان می‌دهد که چگونه می توان از تگ تمپلت extends استفاده کرد و بلوک content را نادیده گرفت. HTML تولید شده شامل کد و ساختار تعریف‌ شده در تمپلت پایه است، از جمله محتوای پیش‌ فرضی که شما در بلوک title تعریف کرده‌اید، اما بلوک content جدید به جای پیش ‌فرض قرار می‌گیرد.

               {% extends "base_generic.html" %}

               {% block content %}
                 
Local Library Home
                 
Welcome to LocalLibrary, a website developed by Mozilla Developer Network!
               {% endblock %}
                

تمپلت پایه LocalLibrary

ما از تکه کد زیر به عنوان تمپلت پایه وب سایت LocalLibrary استفاده خواهیم کرد. همانطور که می‌ توانید ببینید، آن شامل یک کد HTML است و بلوک‌های title، sidebar و content را تعریف می ‌کند. ما یک عنوان پیش ‌فرض و یک ساید بار پیش‌ فرض با لینک‌هایی به لیست تمام کتاب‌ها و نویسندگان داریم که هر دو بین بلوک ها محصور شده‌اند تا به راحتی در آینده تغییر کنند.

یک فایل جدید base_generic.html در /locallibrary/catalog/templates/ ایجاد کرده و متن زیر را به انتهای فایل بچسبانید:

                                    
                
                
                  {% block title %}{% endblock %}
                  
                  
                  
                    
                  {% load static %}
                  
                
                
                  

                    

                      

                      {% block sidebar %}
                        

                          
Home
                          
All books
                          
All authors
                        
                     {% endblock %}
                      
                      
{% block content %}{% endblock %}
                    
                  
                
                
                

این تمپلت شامل CSS از Bootstrap برای بهبود چیدمان و نمایش صفحه HTML است. استفاده از Bootstrap (یا یک فریمورک وب مبتنی بر مشتری دیگر) یک راه سریع برای ایجاد یک صفحه جذاب است که در اندازه‌های مختلف صفحه به خوبی نمایش داده می‌شود.

تمپلت پایه همچنین یک فایل css محلی (styles.css) را ارجاع می‌دهد که استایلینگ اضافی را فراهم می‌کند. یک فایل styles.css در locallibrary/catalog/static/css/ ایجاد کرده و کد زیر را در انتهای فایل اضافه کنید:

                 .sidebar-nav {
                     margin-top: 20px;
                     padding: 0;
                     list-style: none;
                 }
                

تمپلت ایندکس

یک فایل HTML جدید index.html در locallibrary/catalog/templates/ ایجاد کرده کد زیر را در انتهای فایل اضافه کنید. این کد تمپلت پایه ما را در خط اول گسترش می‌دهد، و سپس بلوک content پیش‌ فرض را برای تمپلت جایگزین می کند.

                    {% extends "base_generic.html" %}

                    {% block content %}
                      
Local Library Home
                      
Welcome to LocalLibrary, a website developed by Mozilla Developer Network!
                      
Dynamic content
                      
The library has the following record counts:
                      

                        
Books: {{ num_books }}
                        
Copies: {{ num_instances }}
                        
Copies available: {{ num_instances_available }}
                        
Authors: {{ num_authors }}
                      
                    {% endblock %}
                

در بخش محتوای داینامیک، ما placeholder هایی (متغیرهای تمپلت) را برای آن دسته از اطلاعات ویو که می‌خواهیم ذکر کنیم، اعلام خواهیم کرد. این متغیرها با دو کروشه محصور شده‌اند، همان طور که در نمونه کد به صورت بولد نشان‌داده شده‌است.

نکته مهمی که باید در اینجا ذکر کنیم این است که متغیرها با کلیدهایی که ما در دیکشنری context در تابع render() از ویوی خود ما وارد کردیم نام گذاری می‌شوند (نمونه زیر را ببینید). زمانی که این تمپلت ارائه می‌شود، متغیرها با مقادیر متناظر خود جایگزین خواهند شد.

                    context = {
                        'num_books': num_books,
                        'num_instances': num_instances,
                        'num_instances_available': num_instances_available,
                        'num_authors': num_authors,
                    }

                    return render(request, 'index.html', context=context)
                

ارجاع به فایلهای استاتیک در تمپلت ها

پروژه شما به احتمال زیاد از منابع استاتیک، از جمله جاوا اسکریپت، CSS و تصاویر استفاده می‌کند. از آنجا که محل قرارگیری این فایل ها ممکن است شناخته‌شده نباشد (یا ممکن است تغییر کند)، Django به شما اجازه می‌دهد تا مکان تمپلت های خود را نسبت به تنظیمات جهانی STATIC_URL مشخص کنید. وب سایت اسکلتون پیش ‌فرض مقدار STATIC_URL را به '/static/' تعیین می‌کرد، اما شما ممکن است میزبانی این ها را در یک شبکه تحویل محتوا یا جایی دیگر انتخاب کنید.

در این تمپلت شما ابتدا باید تگ تمپلت load را با مشخص کردن "استاتیک" برای اضافه کردن کتابخانه تمپلت، همانطور که در نمونه کد زیر نشان‌ داده شده‌است، نامگذاری کنید. سپس می‌ توانید تگ تمپلت static را استفاده کنید و URL نسبی فایل مورد نیاز را مشخص کنید.

                    
                    {% load static %}
                    
                

می‌توانید یک تصویر را به شکل مشابه به صفحه اضافه کنید:

                    {% load static %}
                    
                

برای اطلاعات بیشتر در مورد کار کردن با فایل‌های استاتیک، مدیریت فایل‌های استاتیک در مستندات Django را ببینید.

لینک کردن به URL ها

تمپلت پایه بالا تگ تمپلت url را معرفی می‌کند.

                    
Home
                

این تگ نام یک تابع path() که در urls.py خود فراخوانده اید و مقادیر هر آرگومان که ویو مربوطه از آن تابع دریافت می‌ کند را پذیرفته، و یک URL را باز می ‌گرداند که شما می ‌توانید از آن برای لینک دهی به منبع استفاده کنید.

پیکربندی مکان یافتن تمپلت ها

مکانی که در آن Django برای یافتن تمپلت ها جستجو می کند در آبجکت TEMPLATES در فایل settings.py مشخص شده‌است. setting.py پیش‌ فرض (که برای این آموزش ایجاد شده‌است) چیزی شبیه به شکل زیر است:

                TEMPLATES = [
                    {
                        'BACKEND': 'django.template.backends.django.DjangoTemplates',
                        'DIRS': [],
                        'APP_DIRS': True,
                        'OPTIONS': {
                            'context_processors': [
                                'django.template.context_processors.debug',
                                'django.template.context_processors.request',
                                'django.contrib.auth.context_processors.auth',
                                'django.contrib.messages.context_processors.messages',
                            ],
                        },
                    },
                ]
                

تنظیمات 'APP_DIRS': True بسیار مهم است، چرا که به Django می‌گوید به دنبال تمپلت ها در یک زیرشاخه از هر برنامه در پروژه، به نام "تمپلت ها" بگردد (این کار دسته بندی تمپلت ها را با برنامه مرتبط با آنها برای استفاده مجدد آسان، ساده تر می کند).

همچنین می‌توانیم موقعیت‌های خاصی را برای Django جهت جستجو با استفاده از 'DIRS':[] مشخص کنیم (اما هنوز مورد نیاز نیست).

چه شکلی است؟

در این مرحله ما همه منابع لازم برای نمایش صفحه ایندکس را ایجاد کردیم. سرور را اجرا کرده (python3 manage.py runserver) و http://127.0.0.1:8000/ را در مرورگر خود وارد کنید. اگر همه چیز به درستی پیکربندی شده باشد، سایت شما باید شبیه صفحه زیر باشد.

خود را به چالش بکشید

در اینجا چند وظیفه برای تست آشنایی شما با کوئری های مدل، ویو‌ها، و تمپلت ها آمده است.

1. تمپلت پایه LocalLibrary شامل یک بلوک title است. این بلوک را در تمپلت ایندکس نادیده گرفته و یک عنوان جدید برای صفحه ایجاد کنید.

   
   

   راهنمایی:

   
   

   بخش توسعه تمپلت ها توضیح می‌دهد که چگونه بلوک‌ها را ایجاد کرده و یک بلوک را در تمپلت دیگری گسترش داد.

2. ویو را جهت ایجاد شمارنده برای genres و books که شامل یک کلمه خاص هستند (بدون حساسیت به حروف بزرگ) تغییر داده، و نتایج را به context منتقل کنید. شما این کار را به روش مشابهی برای ایجاد و استفاده از num_books و num_instances_available انجام داده اید. سپس تمپلت ایندکس را برای شامل شدن این متغیرها به روز رسانی کنید.

خلاصه

ما هوم پیج سایت مان را ایجاد کردیم – یک صفحه HTML که تعدادی رکورد را از پایگاه‌داده نشان داده و به صفحات دیگری که هنوز ایجاد نشده اند لینک می شود. در طول مسیر، ما اطلاعاتی بنیادی در مورد مپرهای URL، ویو، کوئری کردن در پایگاه‌داده با مدل‌ها، انتقال اطلاعات به یک تمپلت از یک ویو، و ایجاد و گسترش تمپلت ها به دست آوردیم.

در مقاله بعدی ما از این دانش برای ایجاد چهار صفحه باقیمانده وب سایت خود استفاده خواهیم کرد.