چگونه برای توسعه وب Django نما ایجاد کنیم

مقدمه

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

در این آموزش، نماهای جنگو را ایجاد می کنیم که برنامه وب ما را قادر می سازد تا به درستی درخواست های وب را مدیریت کند و پاسخ های وب مورد نیاز را برگرداند. همانطور که در اسناد جنگو تعریف شده است، یک پاسخ وب می تواند محتوای HTML یک صفحه وب، تغییر مسیر یا یک خطای HTTP (مثلاً 404) باشد. کد برای توابع view از نظر فنی می تواند در هر نقطه از پروژه شما وجود داشته باشد، تا زمانی که در مسیر پایتون شما باشد. با این حال، برخی از قراردادهای رایج برای نامگذاری و قرار دادن فایلی که این توابع view در آن وجود دارد، وجود دارد، و ما این اقدامات را دنبال خواهیم کرد.

هنگامی که مراحل این آموزش را تمام کردید، سایت وبلاگ جنگو شما یک پست اخیر را به آدرس اینترنتی IP-or-domain/post شما می کشد.

پیش نیازها

این آموزش بخشی از سری توسعه جنگو است و ادامه آن مجموعه است.

اگر این مجموعه را دنبال نکرده اید، فرضیات زیر را مطرح می کنیم:

• شما نسخه 4 یا بالاتر جنگو را نصب کرده اید.
• شما برنامه جنگو خود را به یک پایگاه داده متصل کرده اید.
• شما با یک سیستم عامل مبتنی بر یونیکس کار می کنید، ترجیحاً یک سرور ابری اوبونتو 22.04 زیرا این سیستمی است که ما روی آن آزمایش کرده ایم.
• شما رابط مدیریت جنگو خود را تنظیم کرده اید.

از آنجایی که این راهنما عمدتاً با نمایش های جنگو سروکار دارد، حتی اگر تنظیمات متفاوتی دارید، ممکن است بتوانید آن را دنبال کنید.

مرحله 1 – ایجاد توابع نمایش

در ترمینال خود، ابتدا باید به دایرکتوری مربوطه بروید و محیط مجازی پایتون خود را فعال کنید. اگر همراه با این سری دنبال کرده اید، می توانید دستورات زیر را وارد کنید. مهم است که همیشه از محیط برنامه نویسی پایتون هنگام توسعه برنامه خود استفاده کنید تا مطمئن شوید که کد شما حاوی است و با تنظیمات مناسب کار می کنید.

cd ~/my_blog_app
. env/bin/activate

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

cd ~/my_blog_app/blog/blogsite

فایل views.py را برای ویرایش با استفاده از nano یا ویرایشگر متن انتخابی خود باز کنید.

nano views.py

پس از باز کردن فایل، باید با کدی مشابه این پر شود:

from django.shortcuts import render
# Create your views here.

ما عبارت import را که تابع render() را از کتابخانه django.shortcuts وارد می کند، نگه می داریم. تابع render() به ما این امکان را می دهد که هم یک الگو و هم یک متن را ترکیب کنیم تا بتوانیم شی HttpResponse مناسب را برگردانیم. این را در نظر داشته باشید زیرا با هر دیدگاهی که می نویسیم، ما مسئول نمونه سازی، پر کردن و برگرداندن HttpResponse هستیم.

در مرحله بعد، اولین نمای خود را اضافه می کنیم که کاربران را به صفحه فهرست خوش آمد می گوید. ما تابع HttpResponse() را از کتابخانه http جنگو وارد می کنیم. با استفاده از آن تابع، متنی را ارسال می کنیم تا در زمان درخواست صفحه وب نمایش داده شود.

from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return HttpResponse('Hello, welcome to the index page.')

پس از آن، ما یک تابع دیگر اضافه می کنیم که پست های جداگانه ای را که قرار است بعداً در آموزش ایجاد کنیم را نمایش می دهد.

...
def individual_post(request):
return HttpResponse('Hi, this is where an individual post will be.')

فایل views.py نهایی ما اکنون به صورت زیر خواهد بود.

from django.http import HttpResponse
from django.shortcuts import render
def index(request):
return HttpResponse('Hello, welcome to the index page.')
def individual_post(request):
return HttpResponse('Hi, this is where an individual post will be.')

پس از اتمام ویرایش فایل، حتما ذخیره کنید و از آن خارج شوید. در نانو می توانید CTRL و X و سپس Y و سپس ENTER را فشار دهید.

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

مرحله 2 – نشانی‌های وب را به Views نشان دهید

با Django، ما می توانیم URL های خود را برای استفاده در برنامه خود طراحی کنیم. این کار در پایتون خالص با استفاده از فایلی که معمولاً به عنوان فایل URLconf یا «پیکربندی URL» نامیده می‌شود، انجام می‌شود.

برای اینکه صفحه وب نمایش داده شود، جنگو ابتدا باید ماژول URLconf ریشه را برای استفاده تعیین کند، سپس به دنبال الگوهای url، یک ساختار داده فهرستی حاوی تمام الگوهای URL است. جنگو سپس از طریق هر الگوی URL می گذرد تا زمانی که اولین مورد مطابقت را پیدا کند. هنگامی که یک تطابق پیدا شد، جنگو نمای مرتبط را پیدا می‌کند و آن تابع view داده‌های مربوط به الگوی URL و یک شی HttpRequest را دریافت می‌کند. اگر در هر نقطه از این فرآیند شکستی وجود داشته باشد، به جای آن یک نمای رسیدگی به خطا نشان داده می شود.

در این بخش، ما با دو فایل مختلف urls.py در دو دایرکتوری مختلف برنامه خود کار خواهیم کرد.

زمانی که در دایرکتوری ~/my_blog_app/blog/blogsite هستید، فایل urls.py – همچنین به عنوان فایل URLconf شما شناخته می شود – را برای ویرایش باز کنید. در اینجا از nano برای ویرایش فایل استفاده می کنیم.

nano urls.py

فایل را طوری تغییر دهید که با لیست urlpatterns مانند فایل زیر باشد.

from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('post/', views.individual_post, name='individual_post')
]

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

هنگامی که فایل URLconf فهرست راهنما وبلاگ را به‌روزرسانی کردیم، آن را در URLconf فهرست راهنمای وبلاگ قرار می‌دهیم وگرنه شناسایی نمی‌شود. ما باید این کار را انجام دهیم زیرا در فایل تنظیمات ما به عنوان ROOT_URLCONF تنظیم شده است. این بدان معنی است که جنگو به URLconf دایرکتوری وبلاگ برای الگوهای url نگاه می کند.

برای گنجاندن URLconf وبلاگ خود در URLconf وبلاگ خود، باید به آن دایرکتوری بروید.

cd ~/my_blog_app/blog/blog

هنگامی که آنجا هستید، می توانید فایل URLconf را با nano یا ویرایشگر متن دیگری که انتخاب می کنید باز کنید.

nano urls.py

در این فایل، خطوط زیر را اضافه می‌کنیم تا فایل /blogsite/urls.py را که به تازگی با آن کار کرده‌ایم، که در خط دوم نشان داده شده است، قرار دهیم.

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blogsite.urls'))
]

ذخیره کنید و فایل را ببندید.

حالا بیایید یک مرورگر وب باز کنیم تا به URL هایی که ایجاد کرده ایم پیمایش کنیم و تأیید کنیم که متنی را که ما به نماها اضافه کرده ایم نشان می دهند. برای دسترسی به فایل manager.py که برنامه جنگو را ارائه می‌کند، باید به فهرست والد برویم.

cd ..

دستور زیر را صادر کنید. می توانید 0.0.0.0 را با آدرس IP خود در زیر جایگزین کنید.

python manage.py runserver 0.0.0.0:8000

در مرورگر وب خود، به آدرس IP خود، پورت 8000 بروید:

your-server-ip:8000

شما یک صفحه وب مشابه زیر دریافت خواهید کرد:

سپس به آدرس زیر بروید:

your-server-ip:8000/post/

از اینجا باید صفحه وب زیر نمایش داده شود:

اکنون تأیید کرده‌ایم که دو فایل urls.py کار می‌کنند و داده‌ها دقیقاً آنچه را که انتظار داریم به ما نشان می‌دهند. با این کار، بیایید برخی از داده های واقعی را به وبلاگ خود اضافه کنیم.

مرحله 3 – یک وبلاگ پست ایجاد کنید

اکنون که اصول نحوه کار الگوهای URL و نماها را درک کردید، بیایید یک پست وبلاگ اضافه کنیم و به جای متنی که در فایل های پایتون کدگذاری کرده ایم، در صفحه وب نمایش داده شود.

ما یک پست از طریق صفحه مدیریتی که قبلاً تنظیم کرده ایم ایجاد می کنیم. در حالی که سرور شما برنامه جنگو را ارائه می دهد، از یک مرورگر وب برای رفتن به صفحه مدیریت وبلاگ در آدرس زیر استفاده کنید:

your-server-ip:8000/admin/blogsite/

در رابط، روی پیوند + افزودن واقع در ردیف Posts کلیک کنید تا پایگاه داده با یک پست وبلاگ نمونه پر شود.

با کلیک بر روی پیوند، یک فرم ورودی مانند زیر دریافت خواهید کرد:

هر زمان که می خواهید پستی اضافه کنید، برای انجام این کار به این صفحه می روید. از طرف دیگر، می توانید پست ها را با پیوند تغییر ویرایش کنید.

در فرم، می توانید فیلدهای زیر را ویرایش کنید:

• Title: عنوان پست وبلاگ مورد نظر خود را در اینجا اضافه کنید، برای مثال اولین پست وبلاگ من.
• SLUG: این به بخشی از URL اشاره دارد که یک عنصر آدرس وب معتبر را با کلمات کلیدی قابل خواندن توسط انسان شناسایی می کند. این به طور کلی از عنوان صفحه گرفته شده است، بنابراین در این مورد می توانیم از my-first-blog-post استفاده کنیم.
• CONTENT: این متن پست وبلاگ شماست. ما فقط Hello, World را اضافه خواهیم کرد! برای مثال اهداف، اما اینجا جایی است که می توانید پرحرف باشید.
• AUTHOR: در این قسمت نام یا نام کاربری مربوطه خود را اضافه کنید. ما از سامی استفاده خواهیم کرد.

فرم پست وبلاگ را همانطور که برای اهداف آزمایشی خود مناسب می دانید پر کنید.

هنگامی که داده های نمونه را به صفحه اضافه کردید، روی دکمه SAVE کلیک کنید. صفحه تایید زیر را دریافت خواهید کرد:

تبریک می گویم! شما اولین پست وبلاگ خود را ایجاد کرده اید!

در مرحله بعد، اجازه دهید بررسی کنیم که ردیفی به پایگاه داده MySQL اضافه کرده است که حاوی داده‌هایی است که ما به تازگی وارد رابط مدیریت کرده‌ایم.

مرحله 4 – نمایش داده های پایگاه داده

در این مرحله، ما باید به MySQL برویم، بنابراین فرآیند سرور فعلی را از طریق ترمینال با تایپ CTRL + C متوقف کنید، سپس مفسر MySQL خود را باز کنید. کاربر ما برای پایگاه داده برنامه جنگو ما djangouser است، اما مطمئن شوید که از کاربر مناسب برای پروژه خود استفاده می کنید.

mysql -u djangouser

هنگامی که در اعلان MySQL قرار گرفتید، به پایگاه داده blog_data (یا پایگاه داده ای که برای پروژه شما مناسب است) بروید:

use blog_data;

سپس محتویات جدول blogsite_post را نمایش دهید.

select * from blogsite_post;

خروجی مشابه زیر دریافت خواهید کرد که باید اطلاعاتی را که به رابط کاربری ادمین اضافه کرده اید نمایش دهد.

Output
+----+--------------------+--------------------+---------------+----------------------------+--------+
| id | title | slug | content | created_on | author |
+----+--------------------+--------------------+---------------+----------------------------+--------+
| 1 | My First Blog Post | my-first-blog-post | Hello, World! | 2020-05-14 00:30:03.186564 | Sammy |
+----+--------------------+--------------------+---------------+----------------------------+--------+
1 row in set (0.00 sec)

همانطور که در خروجی نشان داده شده است، یک ردیف با داده های پستی که اضافه کرده ایم وجود دارد. اکنون اجازه دهید این داده ها را به تابع view برای پست ها ارجاع دهیم. برای خروج از مفسر MySQL از CTRL + D استفاده کنید.

به محل فایل views.py در داخل برنامه وبلاگ سایت خود بروید.

cd ~/my_blog_app/blog/blogsite

حالا فایل را باز کنید تا بتوانیم اطلاعات جدید خود را اضافه کنیم.

nano views.py

فایل را مانند فایل زیر ویرایش کنید.

from django.shortcuts import render
from django.http import HttpResponse
from .models import Post
def index(request):
return HttpResponse('Hello, welcome to the index page.')
def individual_post(request):
recent_post = Post.objects.get(id__exact=1)
return HttpResponse(recent_post.title + ': ' + recent_post.content)

در کد بالا، یک عبارت import اضافی برای Post اضافه کردیم. ما همچنین رشته نقل قول را از HttpResponse حذف کردیم و آن را با داده های پست وبلاگ خود جایگزین کردیم. برای ارجاع داده‌ها برای یک شی خاص، از شناسه پست وبلاگ مرتبط با شیئی که می‌خواهیم نشان دهیم استفاده می‌کنیم، و آن شناسه را در متغیری به نام last_post ذخیره می‌کنیم. سپس می‌توانیم فیلدهای خاصی از آن شی را با اضافه کردن فیلد با جداکننده نقطه بدست آوریم.

پس از ذخیره و بسته شدن فایل، به محل فایل manager.py بروید تا برنامه جنگو را اجرا کنید.

cd ~/my_blog_app/blog
python manage.py runserver 0.0.0.0:8000

از یک مرورگر وب، به آدرس زیر بروید:

your-server-ip:8000/post/

در اینجا، تغییراتی را که ایجاد کرده‌ایم مشاهده خواهیم کرد. صفحه مشابه این خواهد بود و متنی را که به پست اضافه کرده اید نمایش می دهد.

وقتی بازرسی صفحه را تمام کردید، CTRL + C را در ترمینال فشار دهید تا روند اجرای آن متوقف شود.

برای غیرفعال کردن محیط برنامه نویسی خود می توانید دستور غیرفعال کردن را تایپ کرده و سپس از سرور خارج شوید.

نتیجه

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

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