ظاهر برنامه جنگو خود را با ایجاد یک صفحه خطای شخصی سازی شده ۴۰۴ به جای تکیه بر صفحه پیش فرض ساده بهبود دهید.
صفحات خطا در برنامه های وب رایج هستند. مشارکت کنندگان جنگو صفحات پیش فرضی را برای برخی از این خطاها مانند خطای ۴۰۴ (یافت نشد) ارائه کرده اند. اما به عنوان یک توسعه دهنده، بهتر است یک صفحه خطا داشته باشید که از اصول طراحی بقیه برنامه های وب شما پیروی کند.
ایجاد یک صفحه سفارشی ۴۰۴ در جنگو
خطای ۴۰۴ بخشی از چندین کد وضعیت HTTP است که توسط مرورگر برای نشان دادن پاسخ سرور به درخواست‌های مرورگر توسط کاربر استفاده می‌شود. جنگو الگوهای پیش‌فرض را برای برخی از این کدهای وضعیت ارائه می‌کند و صفحه خطای پیش‌فرض ۴۰۴ در جنگو به شکل زیر است:
تصویر فوق زیبا به نظر نمی رسد و اکثر شرکت ها به راحتی آن را در وب سایت خود نمی پذیرند. برای تغییر این صفحه به یک صفحه سفارشی ۴۰۴ به انتخاب خود، باید مراحل ذکر شده در زیر را دنبال کنید.
مرحله ۱: یک View برای مدیریت خطای ۴۰۴ ایجاد کنید
فایل views.py خود را باز کنید و یک نمای برای صفحه خطای ۴۰۴ ایجاد کنید. این نما باید یک الگوی حاوی طرح صفحه خطای ۴۰۴ سفارشی شما را برگرداند. در اینجا یک نمای جنگو ساده است که می توانید در پروژه خود استفاده کنید:
from django.shortcuts import render
# custom 404 view
def custom_404(request, exception):
return render(request, '404.html', status=404)
قطعه کد بالا یک تابع پایتون است (در این مورد ترجیحاً نمای جنگو نامیده می شود) که دو آرگومان تابع را می گیرد. درخواست و استثنا آرگومان دوم-exception-به شما امکان می دهد به شی استثنایی که خطای ۴۰۴ را راه اندازی کرده است دسترسی داشته باشید.
باید «۴۰۴.html» در نمای بالا را با مسیر صحیح صفحه الگوی HTML خطای ۴۰۴ خود جایگزین کنید.
مرحله ۲: یک الگو برای خطای ۴۰۴ خود ایجاد کنید
یک فایل HTML جدید ایجاد کنید تا حاوی طرح سفارشی شما برای صفحه خطای ۴۰۴ باشد. طراحی باید با بقیه برنامه شما سازگار باشد. در اینجا یک قالب ساده HTML وجود دارد که می توانید در پروژه خود از آن استفاده کنید. شما باید این الگو را به دلخواه خود تغییر دهید:
<!-- 404.html template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Page Not Found</title>
<link
<!-- import Bootstrap -->
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<!-- custom css -->
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
max-width: 600px;
}
.emoji {
font-size: 8rem;
margin-bottom: 20px;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
margin-bottom: 20px;
}
.btn {
font-size: 1.25rem;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="emoji">😕</div>
<h1>Oops! Page Not Found</h1>
<p>We couldn't find the page you were looking for.</p>
<a class="btn btn-primary" href="/">Go back to Home</a>
</div>
</body>
</html>
مرحله ۳: فایل URL های پروژه خود را تغییر دهید
در سطح پروژه خود (جایی که فایل settings.py شما قرار دارد)، فایل urls.py خود را باز کنید و کنترل کننده خطای ۴۰۴ را به نمایی که برای رسیدگی به خطای ۴۰۴ ایجاد کرده اید، اشاره کنید. خطای ۴۰۴ handler handler404 نامیده می شود. برای اشاره handler404 به دیدگاه خود، باید این فرمت را دنبال کنید:
handler404 = 'app_name.views.custom_404_view_name'
اگر برنامه شما دستور پخت نام دارد و نمای آن custom_404 نام دارد، باید فرمت فوق را به این صورت تغییر دهید:
handler404 = 'recipe.views.custom_404'
اطمینان حاصل کنید که این کار را در سطح پروژه خود انجام می دهید و نه در سطح برنامه خود. بین یک پروژه و یک برنامه در جنگو تفاوت هایی وجود دارد.
مرحله ۴: صفحه خطای جدید ۴۰۴ خود را آزمایش کنید
برای آزمایش صفحه خطای جدید خود، سرور توسعه خود را راه اندازی کنید و به صفحه ای که در برنامه وجود ندارد بروید. می توانید با اجرای این دستور در ابزار خط فرمان (CLI) سرور خود را راه اندازی کنید:
python manage.py runserver
برای اینکه دستور بالا کار کند، باید در دایرکتوری ریشه پروژه خود باشید، یعنی پوشه ای که فایل manager.py شما در آن زندگی می کند.
هنگامی که سرور شما شروع به کار کرد، صفحه سفارشی ۴۰۴ خود را با پیمایش به صفحه ای که وجود ندارد مانند http://۱۲۷.۰.۰.۱:۸۰۰۰/hello تست کنید. اگر همه چیز را به درستی انجام داده اید، باید صفحه خطای سفارشی ۴۰۴ خود را ببینید.
اگر صفحه خطای سفارشی ۴۰۴ شما ظاهر نمی شود، باید نماهای خود را بررسی کنید تا مطمئن شوید که مسیر صحیح الگوی HTML خود را در تابع render() نوشته اید، زیرا این یک مشکل رایج است.
صفحات خطای سفارشی تجربه بهتری به کاربر می دهند
داشتن یک صفحه خطای سفارشی در برنامه شما باعث بهبود تجربه کاربران شما در هنگام مواجهه با خطا می شود. به جای دیدن یک پیام خطای عمومی، یک صفحه خطای سفارشی می تواند اطلاعات دقیق تری در مورد خطا ارائه دهد و راه حل های ممکن را پیشنهاد کند.
این می تواند به کاربران کمک کند تا بفهمند چه مشکلی رخ داده و چگونه آن را برطرف کنند، ناامیدی را کاهش می دهد و اعتماد آنها را به برنامه شما افزایش می دهد. همچنین می‌توانید با افزودن ویژگی‌های دسترسی، صفحه را فراگیر کنید.