آموزش طراحی سایت با پایتون در ۵ مرحله + آموزش تصویری پایتون

مقدمه طراحی سایت با پایتون

در شروع بحث طراحی سایت با پایتون باید یادآوری کنم که طراحی وب به مهارت طراحی و ساخت صفحات وب گفته می‌شود. اولین بار در اوت ۱۹۹۱، تیم برنرز لی وب را اختراع نموده و اولین وب سایت دنیا که به پروژه World Wide Web یا همان W3 تعلق داشت را راه‌اندازی کرد. با وجود اینکه تقریباً ۳۰ سال از تولد این سایت می‌گذرد، هنوز هم در آدرس http://info.cern.ch/hypertext/WWW/TheProject.html در دسترس همگان است.

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

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

• مجموعه آموزش برنامه نویسی پایتون (Python) — کلیک کنید

دلیل استفاده از پایتون برای طراحی سایت

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

زبان برنامه‌نویسی پایتون (Python) اولین بار در سال ۱۹۹۱ توسط Guido van Rossum توسعه یافت. منظور از توسعه وب، توسعه نرم‌افزارهایی است که بتوانیم از راه اینترنت در یک مرورگر وب به آن‌ها دسترسی پیدا کنیم. این برنامه‌ها شامل دو جزء اصلی Frontend و Backend هستند. ساخت وب‌سایت‌ با پایتون بسیار آسان‌تر از آن چیزی است که بیشتر مردم فکرش را می‌کنند، زیرا که این زبان برای ساخت وب‌سایت از مفهومی به‌نام «فریم‌ورک» استفاده می‌کند.

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

تفاوت طراحی سایت با پایتون و PHP

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

به‌لحاظ قواعد نوشتاری و (سینتکس) هم PHP نسبت به پایتون پیچیده‌تر است و باید وقت و تلاش زیادی صرف شود اما یادگیری سینتکس پایتون بسیار آسان بوده و در مدت زمان کوتاهی می‌توان آن را یاد گرفت. و در نهایت باید گفت که طراحی سایت تخصصی از طریق پایتون گران‌تر و وقت‌گیرتر است.

در حالت کلی برخی از مزایای زبان برنامه‌نویسی پایتون نسبت به PHP که منجربه طراحی سایت با پایتون می‌شود، عبارتنداز:

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

سایت های ایجاد شده با پایتون

در این بخش چند مورد از وب‌سایت‌هایی را که با استفاده از زبان برنامه‌نویسی پایتون ساخته‌شده‌اند را معرفی می‌کنیم. این مثال‌ها نمونه‌هایی از تطبیق‌پذیری زبان برنامه‌نویسی پایتون را نشان می‌دهند:

• گوگل (Google): محبوبترین موتور جستجوی جهان یعنی گوگل از زبان برنامه‌نویسی پایتون استفاده می‌کند.
• اینستاگرام (Instagram): در اینستاگرام از زبان برنامه‌نویسی پایتون برای ساخت بک‌اند اینستاگرام استفاده شده است.
• اسپاتیفای (Spotify): یکی از دلایلی‌که Spotify می‌تواند فایل‌های صوتی را تقریباً بدون تاخیر ارائه دهد استفاده از زبان برنامه‌نویسی پایتون است.
• نتفلیکس (Netflix): بخش اعظمی از وب‌سایت نتفلیکس و همچنین خدمات کلی آن توسط پایتون کدگذاری شده‌اند.
• اوبر (Uber): اوبر صنعت حمل‌و‌نقل اشتراکی را متحول کرد و خدمات که در آن ارائه می‌شوند با زبان برنامه‌نویسی پایتون ساخته‌شده‌اند.

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

نحوه طراحی سایت با پایتون

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

تهیه فضای میزبانی(هاست) وب سایت

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

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

انتخاب فریم ورک طراحی سایت با پایتون

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

• Django (جنگو): یکی از شناخته‌شده‌ترین گزینه‌ها برای فریم‌ورک جنگو است زیرا از اصل «تکرار نکن» استفاده می‌کند و به شما این امکان را می‌دهد که مجدداً از کد استفاده کنید، همچنین چندین کتابخانه عالی دارد که آماده استفاده هستند.
• Flask :Flask یک میکروفریم‌ورک است که OpenSource (منبع باز) نیست و این قابلیت استفاده از آن را برای برخی افراد عالی می‌کند. این فریم‌ورک همچنین با Google App Engine سازگار است که برای برخی افراد کلیدی است.
• Web2Py: این یک چارچوب متن باز تمام پشته است که می‌تواند تقریباً بر روی هر پلتفرم میزبان وب اجرا شود. همچنین دارای اقدامات امنیتی داخلی برای آسیب‌پذیری های رایج وب است.
• AIOHTTP :AIOHTTP یک فریم‌ورک ناهم‌زمان است که هم در سمت سرور و هم سمت سرویس‌گیرنده عملکرد دارد و برای انواع سایت‌ها بسیار مفید است.

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

وب سایت خود را کد کنید

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

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

• آموزش برنامه نویسی پی اچ پی PHP — کلیک کنید

مراحل قدم به قدم طراحی سایت با پایتون

تا اینجای مبحث طراحی سایت با پایتون مراحل ساخت آن را به‌صورت تئوری بیان کردیم. در این بخش، می‌خواهیم یک پروژه را با هم کار کنیم. در ابتدا یک چارچوب و فریم‌ورک قوی و رایج مانند جنگو (Django) را انتخاب می‌کنیم. حالا نوبت نصب برنامه‌های مورد نیازمان است که عبارتنداز:

• پایتون
• جنگو (Django)
• جعبه ابزار Anaconda

بعد از نصب ملزومات در مرحله اول در ترمینال دستورات زیر را وارد می‌کنیم.

> pip install Django
> pip install django-imagekit

سپس یک پوشه با دستورات زیر ایجاد می‌کنیم:

> 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 Database می‌رسد که با دستورات زیر صورت می‌گیرد. یعنی با manage.py وارد پوشه Web_Site می‌شویم.

> cd /Path/to/the/folder/WEB/Web_Site
> python manage.py migrate

بعد یک ادمین می‌سازیم تا اطلاعات را وارد کنیم:

> python manage.py createsuperuser

در پوشه اول “Web_Site” یک پوشه بنام “Web_SiteTemps” ایجاد می‌کنیم. سپس در این پوشه، یک پوشه جدید بنام “admin” درست می‌کنیم. فایل base_site.html را از پک جنگویی که نصب‌ کرده‌ایم کپی می‌کنیم و در پوشه جدید “admin” قرار می‌دهیم.

/Path/to/Anaconda/Lib/sitepackages/django/contrib/admin/templates/admin/

directory tree پروژه ما به شکل زیر ایجاد شد.

WEB
    Web_Site
        Web_SiteTemps
            admin
                base_site.html
        Web_Site
            __init__.py
            settings.py
            urls.py
            wsgi.py
        manage.py

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

> cd /Path/to/the/folder/WEB/Web_Site

حالا باید directory tree را برای اپلیکیشن جدید جنگو پیکربندی کنیم و چند پوشه را برای سفارشی‌سازی راحت‌تر به آن بیفزاییم. پوشه‌های جدید را در دایرکتوری Web_App به نام “media”, “”static”, “Web_AppTemps” و فایل جدید URLs.py می‌سازیم. در پوشه‌های static ،media و Web_AppTemps پوشه‌های جدید “Web_App” ساخته شده‌اند. در نهایت ساختار پروژه ما به‌صورت زیر خواهد بود.

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 را برای برگه وب بسازیم و این فایل‌ها را در پوشه Web_AppTemps/Web_App و فایل style.css را داخل پوشه static/Web_App قرار دهیم. سپس پوشه فایل‌ها را در مسیر media/Web_App ایجاد می‌کنیم، که در کل یک فایل ساده home.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>

اکنون پروژه ساخته شده را به فایل style.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

سخن پایانی درمورد طراحی سایت با پایتون

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

اگر هنوز مفاهیم طراحی سایت را یاد نگرفته‌اید نگران نباشید! در این بخش می‌خواهیم مجموعه آموزش‌های طراحی سایت فرادرس را به شما عزیزان معرفی کنیم که با استفاده از این آموزش‌ها به راحتی می‌‎توانید مباحث مربوط به طراحی سایت را یاد بگیرید. تمامی این آموزش‌ها از طریق لینک زیر قابل دریافت می‌باشد. برای مشاهده سرفصل‌ها بر روی لینک زیر کلیک کنید.

• مجموعه آموزش طراحی سایت — کلیک کنید

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