استفاده از جنگو برای طراحی وبسایت
جنگو (Django) یکی از فریم‌ورک‌های قدرتمند زبان پایتون (Python) است که توسعه وب‌سایت‌های ایمن با استفاده از این فریم‌ورک امکان‌پذیر است. برنامه‌نویسان و توسعه‌دهندگان با‌تجربه فریم‌ورک جنگو را طراحی کرده‌اند و با کمک آن می‌توان از بسیاری از مشکلات توسعه امن وب جلوگیری کرد. این فریم‌ورک رایگان و متنباز است. در این مقاله، قصد داریم نحوه طراحی وبسایت با استفاده از Django را به‌طورکامل آموزش دهیم. ناگفته نماند وبیناری به‌منظور آشنایی شما با طراحی وب‌سایت‌های فروشگاهی با استفاده از جنگو و ریاکت نیز ترتیب داده‌ایم که شرکت در آن می‌تواند به شما برای تبدیل‌شدن به وب دولوپر کمک کند.
جنگو و کاربرد آن در طراحی وبسایت
کتابخانه جنگو ازجمله پلتفرم‌هایی است که همانند بسیاری از زبان‌های برنامهنویسی و پلتفرم‌های نوین از معماری MVC، اما با کمی تغییر پشتیبانی میکند. معماری MVC از سه فاکتور اصلی تشکیل شده است:
- Model: مدل
- View: نمایش
- Controller: کنترلر
این نوع از معماری در وب‌سایت‌ها و نرم‌افزارهایی به‌کار برده می‌شود که به‌نوعی از واسط کاربری استفاده می‌کنند؛ اما تفاوت موجود در جنگو تغییر فاکتور Controller به Template است. در‌واقع باتوجهبه اینکه خودِ جنگو فاکتور کنترلر را در دست دارد، به‌جای آن از فاکتور Template استفاده می‌شود. دیاگرام نشان‌داده‌شده در شکل زیر دید مناسبی به شما در این زمینه می‌دهد:
قدرت جنگو زمانی بیش‌از‌پیش مشخص می‌شود که بدانیم با استفاده از این کتابخانه خواهید توانست وب‌سایتی کامل را از ابتدا راهاندازی کنید. همچنین، بد نیست بدانید که بسیاری از فریم‌ورک‌های محبوب و مدرن مانند Backbone ،Vuejs ،Angular و Bootstrap را با استفاده از این کتابخانه می‌توان پیاده‌سازی کرد.
آموزش نصب Django
برای اینکه بتوانید برنامهنویسی با جنگو را شروع کنید، باید ابتدا این کتابخانه و برخی از پکیج‌های اضافه آن را نصب کنید. پکیج‌های مذکور به شما امکان می‌دهند تا به توابع اضافی در این کتابخانه دسترسی داشته باشید. گفتنی است پایتون را نیز باید روی سیستم خود نصب کنید. برای کدنویسی پایتون، می‌توانید از نرم‌افزارهای مختلفی استفاده کنید. یکی از این نرم‌افزارهای برتر ANACONDA است. جنگو به‌صورت پیپ (PIP) مخفف Python Installer Package وجود دارد. بنابراین، برای اجرای آن کافی است تا از ترمینال خود استفاده کنید:
> pip install Django
> pip install django-imagekit
با استفاده از خط اول، کتابخانه Django روی سیستمتان نصب خواهد شد. خط دوم پکیج imagekit را نیز برای شما نصب خواهد کرد. استفاده از این پکیج برای کار با تصاویر کاربردی است. پکیج‌های مفید دیگری نیز برای جنگو پیش‌بینی شده است که براساس نیاز خود می‌توانید آن‌ها را نیز نصب کنید. برای دسترسی کامل به این پکیج‌ها، می‌توانید به وبسایت djangopackages مراجعه کنید. ازجمله این پکیج‌ها Django-CMS و Django-Bootstrap هستند.
شروع برنامهنویسی با جنگو با مثال عملی
قدم اول: ساخت پروژه جدید و راهاندازی پایگاه‌داده
برای شروع برنامهنویسی با Django، ابتدا باید پوشه‌ای جدید باز کنید. فرض کنید نام این پوشه را WEB گذاشته‌اید. سپس، باید ترمینال را باز و کدهای مدنظر را در خط فرمان وارد کنید:
> cd /Path/to/the/folder/WEB/
> django-admin startproject Web_Site
این دستور در شکل زیر نشان داده شده است:
در پوشه WEB، می‌توانید ساختارهای زیر را ببینید:
WEB
Web_Site
Web_Site
__init__.py
settings.py
urls.py
wsgi.py
manage.py
در اولین قدم، باید دیتابیس استاندارد SQLite را راهاندازی کنید. برای این منظور، باید به اولین پوشه Web_Site با فایل manage.py بروید و به‌صورت زیر کدنویسی کنید:
> cd /Path/to/the/folder/WEB/Web_Site
> python manage.py migrate
نحوه انجام این کار و نتیجه آن در شکل زیر نشان داده شده است:
قدم دوم: ایجاد Administrator و پر‌کردن اطلاعات
برای این کار، از خط کد زیر استفاده کنید:
> python manage.py createsuperuser
نتیجه را در شکل زیر مشاهده می‌کنید:
قدم سوم: ایجاد قالب برای صفحه مدیریت
حالا باید در اولین پوشه ایجاد‌شده (WEB_Site)، پوشه جدیدی با نام WEB_Site Temps و زیر‌پوشه‌ای با نام admin ایجاد کنید. سپس، فایل base_site.html را که در پکیج نصب‌شده Django قرار دارد، در پوشه admin کپی کنید. مسیر دسترسی به این سند HTML به‌صورت زیر است:
/Path/to/Anaconda/Lib/site-packages/django/contrib/admin/templates/admin/
محتویات فایل base_site.html به‌صورت زیر است. شما می‌توانید خصوصیات این فایل را شخصی‌سازی کنید یا درصورت لزوم، استایل جدیدی به آن بدهید:
{% extends “admin/base.html” %}
{% block title %}{{ title }} | {{ site_title|default:_(‘Web_Site Admin’) }}{% endblock %}
{% block branding %}
<h1 id=”site-name”><a href=”{% url ‘admin:index’ %}”>{{ site_header|default:_(‘Web_Site Administrator’) }}</a></h1>
{% endblock %}
{% block nav-global %}{% endblock %}
ساختار درختی پروژه جدید نیز به‌صورت زیر است:
WEB
Web_Site
Web_SiteTemps
admin
base_site.html
Web_Site
__init__.py
settings.py
urls.py
wsgi.py
manage.py
تا این مرحله، پروژه جدید ایجاد شده است. حالا باید برنامه جنگویی را بسازید که در این پروژه استفاده می‌شود و سپس آن را متصل کنید. برای ساخت برنامه terminal / command، می‌توانید از کدهای زیر استفاده کنید:
> cd /Path/to/the/folder/WEB/Web_Site
python manage.py startapp Web_App
قدم چهارم: پیکربندی ساختار درختی جدید
در این مرحله، باید ساختار درختی جدید را برای برنامه جدید جنگو پیکربندی و پوشه‌های موردنیاز برای سفارشی‌سازی آسان را نیز به این ساختار اضافه کنید. برای این منظور، باید پوشه‌های media و static و Web_AppTemps و نیز فایل URLs.py را به پوشه Web_App اضافه کنید. همچنین، پوشه جدید Web_App در پوشه‌های static و media و Web_AppTemps اضافه خواهد شد. ساخت این پوشه برای جست‌وجوی صحیح مسیر پروژه جنگو کاملاً ضروری است. پس از اینکه تمام کارها انجام شد، ساختار درختی پروژه به‌صورت زیر خواهد بود:
WEB
Web_site
Web_App
media
Web_App
migrations
static
Web_App
Web_AppTemps
Web_App
__init__.py
admin.py
apps.py
models.py
tests.py
urls.py
views.py
Web_SiteTemps
admin
base_site.html
Web_Site
__init__.py
settings.py
urls.py
wsgi.py
manage.py
قدم پنجم: ساخت فایل home.html و style.css
حالا باید فایل home.html و فایل CSS خود را بسازید و در مسیرهای زیر قرار دهید:
- مسیر قرارگیری فایل HTML :Web_AppTemps/Web_App
- مسیر قرارگیری فایل CSS :static/Web_App
همچنین، اگر در آینده می‌خواهید فایل‌ها و مدیاها را دانلود کنید، باید پوشه‌ای به نام files در مسیر media/Web_App بسازید. کدهای موردنیاز برای ایجاد فایل html ساده به‌صورت زیر است:
<!DOCTYPE html>
<html lang=”en”>
{% load staticfiles %}
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” media=”all” type=”text/css” href=”{% static ‘Web_App/style.css’ %}” />
<title>WEB SITE</title>
</head>
<body>
<div class=”element”>
<p>Text</p>
</div>
<div class=”element”>
<p>Images</p>
</div>
<div class=”element”>
<p>Video</p>
</div>
<div class=”element”>
<p>Apps</p>
</div>
</body>
</html>
همچنین، نمونه ساده کدهای CSS برای این فایل به‌صورت زیر است:
body { /* parent */
background-color: rgba(0, 41, 59, 1); margin: 0;
width: 100%; height: auto;
}
.element { /* body */
float: left;
width: 25%;
height: 65%;
padding-top: 5%; padding-right: 1%; padding-left: 1%;
padding-bottom: 5%;
margin-top: 2.5%; margin-right: 0%; margin-left: 15%;
margin-bottom: 2%;
background-color: rgba(1, 255, 217, 0.3);
border-style: solid; border-left-width: 2px;
border-right-width: 2px; border-top-width: 0px;
border-bottom-width: 0px;
border-radius: 1px; border-color: rgba(1, 255, 255, 1);
}
.element p { /* element */
width: 100%;
height: auto;
font: 5vw Open, sans-serif;
text-align: center;
color: rgba(0, 230, 255, 1);
}
ساختار درختی اصلاح‌شده برای پروژه تا این مرحله به‌صورت زیر است:
WEB
Web_site
Web_App
media
Web_App
Files
migrations
static
Web_App
style.css
Web_AppTemps
Web_App
home.html
__init__.py
admin.py
apps.py
models.py
tests.py
urls.py
views.py
Web_SiteTemps
admin
base_site.html
Web_Site
__init__.py
settings.py
urls.py
wsgi.py
manage.py
قدم ششم: استفاده از توابع برای فراخوانی وبسایت
در این مرحله، برای فراخوانی صفحه وبسایت باید از توابع جنگو استفاده کنید. برای این منظور، فایل views.py را از مسیر Web_App/views.py باز کنید و کدهای زیر را در آن بنویسید:
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request, ‘Web_App/home.html’)
قدم هفتم: پیکربندی URLها
برای پیکربندی URLها، در ابتدا باید فایل urls.py را با استفاده از مسیر Web_Site/urls.py باز و تغییرات زیر را در آن اعمال کنید:
“””Web_Site URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
- Add an import: from my_app import views
- Add a URL to urlpatterns: url(r’^$’, views.home, name=’home’)
Class-based views
- Add an import: from other_app.views import Home
- Add a URL to urlpatterns: url(r’^$’, Home.as_view(), name=’home’)
Including another URLconf
- Import the include() function: from django.conf.urls import url, include
- Add a URL to urlpatterns: url(r’^blog/’, include(‘blog.urls’))
“””
from django.conf.urls import include, url
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
url(r’^admin/’, admin.site.urls),
url(r’^’, include(‘Web_App.urls’, namespace=”Web_App”)),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()
قدم هشتم: راهاندازی وبسایت در حالت Development Mode
برای اتمام عملیات، وبسایت را در حالت Development Mode باید راهاندازی کنید. برای این منظور، ترمینال را باز کنید و فایل manager.py را درون پوشه وبسایت قرار دهید. برای انجام این کار، از کدهای زیر استفاده کنید:
> cd /Your/Path/to/the/WEB/Web_Site
> python manage.py migrate
سپس، این دستور را برای مقداردهی اولیه وارد کنید:
> python manage.py makemigrations Web_App
مراحلی که در قدم هشتم گفته شد، رویه‌های استاندارد برای فراخوانی پروژه هستند. حالا باید سرور پیش‌فرض جنگو را با شماره پورتی یکتا راهاندازی یا از مقادیر پیش‌فرض آن استفاده کنید. برای این منظور، می‌توانید به‌صورت زیر کدنویسی کنید:
> python manage.py run server 1414
بدین‌ترتیب، سرور شما روی پورت 127.0.0.1 (روی Local Host) و پورت 1441 اجرا شده است. برای مشاهده نتیجه، کافی است مرورگر خود را باز و آدرس http://127.0.0.1:1414/ را وارد کنید. در این صورت، وب‌سایتی مانند شکل زیر را مشاهده خواهید کرد:
همچنین، اگر در مرورگر خود آدرس http://127.0.0.1:1414/ADMIN را وارد کنید، صفحه مدیریت باز خواهد شد که پس از لاگین‌کردن، می‌توانید ابزارهای مدیریتی را نیز مشاهده کنید. نمونه این پنجره در شکل زیر نشان داده شده است:
جمع‌بندی
باتوجهبه مطالب گفته‌شده در این مقاله، متوجه شدید کدهایی که با استفاده از کتابخانه جنگو وارد می‌شوند، عموماً کدهایی ساده هستند و همین موضوع نیز باعث شده است تا Django به‌عنوان یکی از ابزارهای محبوب برای برنامهنویسی بک‌اند وب‌سایت‌ها شناخته شود. پکیج‌های کاربردی بسیاری نیز وجود دارند که به شما کمک می‌کنند تا هم درزمینه تولید و هم درزمینه توسعه وب‌سایت‌ها از این کتابخانه استفاده کنید.
همان‌طور‌که می‌بینید، مسیر تبدیل‌شدن به وب دولوپر روشن است، فقط کافی است تصمیم بگیرید و در این مسیر قدم بگذارید. ناگفته نماند وبینار طراحی وب‌سایت‌های فروشگاهی با استفاده از جنگو و ریاکت نیز به شما کمک میکند تا دید بهتری درباره مسیر پیش روی خود پیدا کنید.
سؤالات متداول
۱. آیا یادگیری جنگو به پیشنیاز نیاز دارد؟
بله، باتوجهبه اینکه جنگو یکی از کتابخانههای پایتون است، برای تسلط بر آن باید زبان پایتون را آموخته باشید.
۲. برای تسلط بر جنگو، باید بر چه مفاهیمی از برنامهنویسی مسلط باشیم؟
بهطورکلی تسلط بر برنامهنویسی شیءگرا و JSON و موارد دیگری ازجمله دیتابیس و SQL برای تسلط بر جنگو لازم است.
۳. آیا جنگو پروژهای متنباز است؟
بله، جنگو پروژهای متنباز است و همین موضوع نیز باعث شده که تیمهای مختلف برنامهنویسی در سرتاسر دنیا بهخوبی آن را توسعه دهند.
4. سمینار طراحی وبسایت با جنگو و ریاکت چه کمکی به ما میکند؟
این سمینار برای آشنایی اولیه با نحوه طراحی وبسایت با استفاده از جنگو و ریاکت و با تمرکز بر راهاندازی فروشگاههای اینترنتی برنامهریزی شده است. مدرس این سمینار علی کمیجانی، فولاستک دولوپر دیتاآرت، خواهد بود که در این سمینار، تجارب ارزندهاش را به شما منتقل خواهد کرد.
دیدگاهتان را بنویسید