ایجاد Web Application با استفاده از Flask در پایتون 3

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

وب‌ اپلیکیشن چیست؟

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

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

فلسک (Flask) چیست؟

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

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

فراهم‌کردن پیش‌نیازهای ساخت وب‌ اپلیکیشن

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

• محیط برنامه‌نویسی پایتون 3
• آشنایی با زبان برنامه‌نویسی پایتون 3

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

مراحل ایجاد Web Application با استفاده از Flask در پایتون 3

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

مرحله اول: نصب فلاسک

برای نصب فلاسک در ابتدا باید محیط پایتون خود را فعال کنید. مهم‌ترین اقدام برای نصب فلاسک، وارد‌کردن Pip Install Flask در محیط کامند لاین یا ترمینال است. البته اگر سیستم‌عامل شما لینوکس یا مک است، باید Pip3 را وارد کنید تا فلاسک روی پایتون ۳ با موفقیت نصب شود.

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

source env/bin/activate

با اجرای کد بالا

( env ) sammy@localhost : $

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

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

pip install flask

اجرای دستور تأیید نصب

وقتی همه این مراحل را با دقت طی کردید، باید کد دستوری زیر را به‌منظور تأیید نصب اجرا کنید:

python -c "import flask; print(flask.__version__)"

دراین‌میان، این نکته مهم را به‌خاطر بسپارید که برای اجرای کد پایتون، از Command Line Interface پایتون با گزینه -C استفاده می‌کنید. به‌همین‌دلیل، نیاز است که برای ساخت برنامه‌های فلاسک، در ابتدا فلاسک را در فایل پایتون خود Import کنید.

وقتی نسخه فلسک ازطریق متغیر flask.__version__ ارائه می‌شود، باید آن را Print کنید. آن چیزی که به‌عنوان خروجی به‌دست می‌آورید، چیزی شبیه به کد دستوری زیر است:

Output

1.1.2

مرحله دوم: ساخت برنامه پایه

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

این کار اصلاً سخت نیست. در ابتدا باید وارد پوشه flask_blog شوید. در این پوشه، فایلی با عنوان hello.py وجود دارد که باید آن را برای انجام ویرایش‌های مدنظرتان باز کنید. از ویرایشگر نانو (Nano) می‌توانید استفاده کنید. این ویرایشگر کمک می‌کند که فرایند ویرایش به‌سادگی و با سرعت بیشتری انجام شود. همچنین، از ویرایشگر دیگری که کار با آن برایتان راحت است، می‌توانید استفاده کنید. به کد دستوری زیر توجه کنید:

nano hello.py

وارد‌کردن کد در hello.py

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

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

مفاهیم کدهای hello.py 

چند نکته مهم در این زمینه وجود دارد که باید به آن‌ها توجه کنید. کار شما با ایمپورت‌کردن کلاس Flask آغاز می‌شود. با ایجاد متغیر فلاسک می‌توانید اپلیکیشن فلاسک خودتان را در آن ذخیره کنید. به پارامتر name توجه کنید. این پارامتر برای قرار‌دادن یک نام در اپلیکیشن شما استفاده می‌شود.

@app.route نیز به‌عنوان دکوراتور شناخته می‌شود. @app.route می‌تواند تابع معمولی در پایتون را به تابع نمای فلاسک تبدیل کند. این فرایند می‌تواند مقدار بازگشتی تابع را به پاسخ HTTP تبدیل کند. بدین‌ترتیب، ازطریق گیرنده HTTP شبیه به مرورگر وب نشان داده می‌شود. همچنین، با قرار‌دادن مقدار ‘/’ به @app.route() نشان می‌دهید که این تابع به درخواست‌های وب برای URL/ که URL اصلی است، پاسخ می‌دهد.

در‌ادامه نیز باید یک تابع بنویسید. این تابع باید همه کارهایی را تعریف کند که صفحه وب‌سایت ما قرار است آن‌ها را انجام دهد. در این‌جا عبارت Hello World را می‌نویسیم. این را به‌عنوان پاسخ ذخیره کنید و بعد فایل را ببندید.

کدهای مهم برای اجرای وب‌ اپلیکیشن خود

برای اجرای وب‌ اپلیکیشن خود باید به فلسک بگویید که کجا اپلیکیشن را پیدا کند. این مورد برای شما فایل hello.py است. با متغیر محیطی FLASK_APP کد زیر را اجرا کنید:

export FLASK_APP=hello

سپس باید آن را در حالت توسعه با متغیر محیطی FLASK_ENV اجرا کنید. برای این موضوع کد دستوری زیر را درج کنید:

export FLASK_ENV=development

برای اجرای اپلیکیشن می‌توانید از دستور flask run استفاده کنید. طبق کد دستوری زیر پیش بروید:

flask run

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

Output

 * Serving Flask app "hello" (lazy loading)

 * Environment: development

 * Debug mode: on

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

 * Restarting with stat

 * Debugger is active!

 * Debugger PIN: 813-894-335

اطلاعات کدهای اجرای اپلیکیشن در خروجی بالا

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

• کدها نام اپلیکیشن در حال اجرا را نشان می‌دهند.
• محیطی که اپلیکیشن در آن اجرا می‌شود، می‌توانید شناسایی کنید.
• Debug mode: on نشان‌دهنده روشن‌بودن حالت اشکال‌زدایی یا باگ‌گیری است. در این صورت، اگر مشکلی به‌وجود آید، با دادن اخطارهای دقیق از آن مطلع خواهید شد.
• 127.0.0.1 نشان‌دهنده لوکال هاست دستگاه شما و :5000 نیز نشان‌دهنده شماره پورت است.

برای اطمینان از دقیق‌بودن همه مراحل طی‌شده، می‌توانید آزمایش جالبی انجام دهید. مرورگری را باز کنید و URL http://127.0.0.1:5000/ را در آن تایپ کنید. وقتی همه مراحل را درست طی کرده باشید، عبارت Hello, World! را به‌عنوان پاسخ جست‌جوی خود دریافت می‌کنید. این یعنی همه‌چیز رو‌به‌راه است و اپلیکیشن با موفقیت اجرا می‌شود.

نکات مهم درباره ساخت اپلیکیشن تحت‌ وب با فلسک

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

• برای ایجاد ترمینالی جدید باید اقداماتی برای فعال‌کردن محیط مجازی انجام دهید.
• فعال‌کردن متغیرهای محیط مانند FLASK_ENV و FLASK_APP در ایجاد ترمینال مجازی اهمیت دارند.
• زمانی‌که سرور توسعه اپلیکیشن فلسک در حال اجراست، نمی‌توانید برنامه فلسک دیگری را با همان دستور flask run اجرا کنید.

مرحله سوم: استفاده از قالب‌های HTML

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

Flask می‌تواند تابعی کمکی با نام render_template() را ارائه دهد. این ویژگی امکان استفاده از موتور قالب Jinja را فراهم می‌کند. Jinja موتور قالب وبی است که در زبان برنامه‌نویسی پایتون به‌کار برده می‌شود. این کار استفاده از فایل‌های HTML را با نوشتن کد HTML بسیار آسان می‌کند.

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

nano app.py

وارد‌کردن آبجکت Flask جدید

در این فایل جدید، آبجکت جدید را برای به‌وجود‌آوردن نمونه برنامه کاربردی Flask درست همان‌طور‌که کمی قبل‌تر انجام داده‌اید، باید ایمپورت کنید. همچنین با وارد‌کردن رابطی کمکی به نام render_template()، می‌توانید فایل‌های قالب HTML را در پوشه‌ قالب‌هایی رندر کنید که قصد دارید وارد‌شان کنید.

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

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

به‌خاطر بسپارید که تابع index() نتیجه فراخوانی render_template() را با index.html به‌عنوان ارگونومی برمی‌گرداند. این فرایند پیامی به render_template() می‌دهد؛ بدین‌ترتیب که باید در پوشه templates به‌دنبال فایلی به نام index.html بگردد.

در این مرحله، پوشه و فایل وجود ندارند؛ به‌همین‌دلیل، با اجرای این برنامه با خطا روبه‌رو خواهید شد. بااین‌حال، وقتی پوشه و فایل مدنظر خود را اجرا کنید، دیگر با خطایی روبه‌رو نمی‌شوید.

ذخیره فایل و خروج از آن

حالا باید سرور توسعه را در ترمینال دیگر خود متوقف کنید که برنامه hello را با CTRL+C اجرا می‌کند. قبل از اجرای برنامه، باید از یک موضوع مطمئن شوید: مقدار متغیر محیطی FLASK_APP را درست وارد کرده‌اید یا خیر؛ چراکه دیگر از برنامه hello استفاده نمی‌کنید. طبق کد زیر پیش بروید:

export FLASK_APP=app
flask run

حالا وقتی URL http://127.0.0.1:5000/ را در مرورگر خود وارد کنید، صفحه دیباگر به شما می‌گوید که الگوی index.html پیدا نشده است. بدین‌ترتیب، خط اصلی کد که عامل اصلی این خطاست، هایلات می‌شود. در این مورد، خط بازگشتی به‌صورت render_template(‘index.html’) است. با کلیک روی این خط، دیباگر کدهای بیشتری را به شما نشان می‌دهد. بدین‌ترتیب، زمینه‌های بیشتر و مناسب‌تری برای حل مشکل دراختیار خواهید داشت.

رفع خطا

به‌طورکلی برای برطرف‌کردن خطا، باید دایرکتوری‌ای به نام templates را در پوشه flask_blog خود ایجاد کنید. سپس در آن، فایلی به نام index.html را برای ویرایش باز کنید. برای این کار، می‌توانید طبق کد زیر پیش بروید:

mkdir templates
nano templates/index.html

درادامه، باید کد HTML زیر را در index.html اضافه کنید. طبق دستور زیر عمل کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskBlog</title>
</head>
<body>
   <h1>Welcome to FlaskBlog</h1>
</body>
</html>

حالا باید فایل را ذخیره کنید. دوباره http://127.0.0.1:5000/ را در مرورگر خود قرار دهید؛ چیزی که مرورگر باید به شما نشان دهد، Welcome to FlaskBlog در تگ <h1> است.

دراین‌بین، نکته مهمی وجود دارد: علاوه‌بر پوشه قالب‌ها، وب‌ اپلیکیشن‌های Flask معمولاً پوشه‌ای ثابت برای میزبانی‌کردن از فایل‌های استاتیک مانند فایل‌های CSS و جاوا‌اسکریپت و تصاویری دارند که اپلیکیشن از آن‌ها استفاده می‌کند.

ایجاد فایل شیوه‌نامه style.css

فراموش نکنید که شما محدود نیستید و فایل شیوه‌نامه style.css را می‌توانید به‌وجود آورید. این کار امکان اضافه‌کردن CSS به اپلیکیشن را برای شما فراهم می‌کند. برای این کار باید دایرکتوری‌ای به نام static را در دایرکتوری اصلی flask_blog خود ایجاد کنید و طبق دستور زیر پیش بروید:

mkdir static

بعد‌از‌آن، باید دایرکتوری دیگری به نام css را در داخل دایرکتوری استاتیک ایجاد کنید. معمولاً این کار برای سازمان‌دهی فایل‌های استاتیک در پوشه‌های اختصاصی صورت می‌گیرد. بدین‌ترتیب، فایل‌های جاوااسکریپت معمولاً در فهرستی به نام js زندگی می‌کنند. تصاویر نیز باید در فهرستی به نام images (or img) قرار بگیرند:

mkdir static/css

ویرایش فایل

در مرحله بعد، برای ویرایش‌کردن باید فایل style.css را در داخل دایرکتوری css باز کنید:

nano static/css/style.css

درادامه باید قاعده CSS زیر را به فایل style.css خود اضافه کنید:

h1 {
    border: 2px #eee solid;
    color: brown;
    text-align: center;
    padding: 10px;
}

کاربرد کد CSS این است که حاشیه‌ای برای شما ایجاد می‌کند که می‌تواند رنگ را به رنگ قهوه‌ای تغییر دهید. در این صورت، متن شما را منظم می‌کند و در مرکز قرار می‌دهد. همچنین، این کد می‌تواند padding را به تگ‌های <h1> اضافه کند.

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

nano templates/index.html

حالا باید پیوندی به فایل style.css خود اضافه کنید و برای این موضوع طبق دستور زیر پیش بروید:

. . .
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    <title>FlaskBlog</title>
</head>
. . .

آرماگون‌ها و تغییر رنگ متن Welcome to FlaskBlog

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

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

استایل‌دادن به اپلیکیشن

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

ایجاد الگوی پایه

حتماً حین کدنویسی با پدیده جالبی برخورد کرده‌اید. ساخت قالب HTML به‌معنای تکرار بیشتر کدهای HTML است که قبلاً آن‌ها را در قالب index.html نوشته‌اید. شما می‌توانید از فایل الگوی پایه استفاده کنید و از تکرار کدهای غیرضروری مانع شوید.

برای ایجاد الگوی پایه، می‌توانید فایلی به نام base.html را در فهرست قالب‌های خود به‌وجود آورید. برای این کار از کد زیر استفاده کنید:

nano templates/base.html

در‌ادامه، کد زیر را در قالب base.html بنویسید. کد زیر کمی طولانی است. از طولانی‌بودن آن نترسید؛ چراکه نتیجه جالبی به شما می‌دهد:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="{{ url_for('index')}}">FlaskBlog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">About</a>
            </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

بعد از اینکه ویرایش فایل تمام شد، آن را ذخیره کنید و ببندید.

نوار پیمایش و عنوان سبک

به‌خاطر بسپارید اکثر کدهای موجود در بلوک قبلی HTML استاندارد و کد مورد‌نیاز برای Bootstrap است. حالا شما الگویی پایه دارید که با استفاده از وراثت می‌توانید از آن استفاده کنید. فایل index.html را باز کنید و کد زیر را بنویسید:

nano templates/index.html

حالا وقت جایگزین‌کردن محتواهای زیر است. طبق دستور زیر پیش بروید:

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
{% endblock %}

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

مرحله چهارم: راه‌اندازی پایگاه داده

در این مرحله، می‌توانید برای ذخیره داده‌های خود که همان پست‌های بلاگ هستند، پایگاه داده ایجاد کنید. برای ذخیره داده‌های خود از فایل پایگاه داده‌ای به نام SQLite استفاده خواهید کرد. برای شروع باید فایلی به نام schema.sql را در دایرکتوری flask_blog باز کنید و طبق دستور زیر پیش بروید:

nano schema.sql

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

DROP TABLE IF EXISTS posts;

CREATE TABLE posts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    title TEXT NOT NULL,
    content TEXT NOT NULL
);

نکات مهم کد دستوری بالا

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

• دستور DROP TABLE IF EXISTS posts هر جدولی که ازقبل به نام پست‌ها نامیده می‌شود، حذف می‌کند.
• زمانی‌که از دستورهای SQL استفاده می‌کنید، تمام محتواهای شما در پایگاه داده حذف می‌شوند.
• از دستور CREATE TABLE posts برای ایجاد جدول‌ها با ستون‌ها استفاده می‌شود.
• id عدد صحیحی است که یک کلید اصلی را نشان می‌دهد.
• Created وقتی پست وبلاگی ایجاد می‌شود، نشان می‌دهد.
• NOT NULL نشان می‌دهد که ستون را نباید خالی بگذارید.
• DEFAULT نشان‌دهنده CURRENT_TIMESTAMP است و به زمانی اشاره می‌کند که پست به پایگاه داده اضافه می‌شود.
• title عنوان پست را نشان می‌دهد.
• content به محتوای پست اشاره می‌کند.

حالا شما یک طرح SQL در فایل schema.sql دارید. از این گزینه می‌توانید برای ایجاد پایگاه داده با کمک فایل پایتون استفاده کنید. برای این کار، باید فایلی به اسم init_db.py را در دایرکتوری flask_blog با کمک ویرایشگر دلخواهتان باز کنید. کد دستوری زیر را درج کنید:

nano init_db.py

در‌ادامه کدهای زیر را نیز اضافه کنید:

import sqlite3

connection = sqlite3.connect('database.db')


with open('schema.sql') as f:
    connection.executescript(f.read())

cur = connection.cursor()

cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
            ('First Post', 'Content for the first post')
            )

cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
            ('Second Post', 'Content for the second post')
            )

connection.commit()
connection.close()

موفقیت در راه‌اندازی پایگاه داده

وقتی این کدها و تغییرات را اِعمال کردید، باید اتصال را ببندید. بعد از ذخیره‌کردن و بستن فایل، با استفاده از دستور پایتون آن را در ترمینال اجرا کنید. طبق دستور زیر پیش بروید:

python init_db.py

وقتی این مرحله را تکمیل کردید، در دایرکتوری flask_blog فایل جدیدی با نام database.db ظاهر می‌شود. وقتی این پیام را می‌بینید، یعنی شما با موفقیت پایگاه داده خود را راه‌اندازی کرده‌اید. بدین‌ترتیب، می‌توانید وارد مرحله بعدی شوید.

مرحله پنجم: نمایش همه پست‌ها

پس از راه‌اندازی موفقیت‌آمیز پایگاه داده، تابع index() view را برای نمایش‌دادن همه پست‌هایی که در پایگاه داده خود دارید، می‌توانید به‌راحتی و با اجرای چند کد تغییر دهید. برای اِعمال این تغییرات باید فایل app.py را باز کنید. طبق دستور زیر پیش بروید:

nano app.py

برای اجرای اولین تغییر باید ماژول sqlite3 را در بالای فایل وارد کنید و مطابق دستور زیر پیش بروید:

import sqlite3
from flask import Flask, render_template

. . .

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

. . .
from flask import Flask, render_template

def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn

. . .

بعد از تعریف تابع get_db_connection()، حالا باید تابع index() را طبق کد دستوری زیر تغییر دهید:

. . .

@app.route('/')
def index():
    conn = get_db_connection()
    posts = conn.execute('SELECT * FROM posts').fetchall()
    conn.close()
    return render_template('index.html', posts=posts)

بررسی کدهای تابع index()

کدهایی که در بالا آورده شدند، هر‌کدام کارکرد خاص خود را دارند:

• در نسخه جدید تابع index() با کمک get_db_connection() اتصال پایگاه داده را برقرار می‌کنید.

• پرس‌و‌جوی SQL برای انتخاب‌کردن همه ورودی‌ها از جدول پست‌ها را انتخاب می‌کنید.
• متد  fetchall() برای واکشی همه ردیف‌های نتیجه پرس‌و‌جو به‌کار می‌رود.
• با کمک متد fetchall() اتصال پایگاه داده را می‌بندید.
• Posts باعث می‌شود که شما به پست‌های وبلاگ در قالب index.html به‌خوبی دسترسی داشته باشید.

یادتان باشد وقتی تغییرات این سری از کدها را اِعمال کردید، حتماً آن‌ها را ذخیره کنید و ببندید. پست‌هایی که از پایگاه داده واکشی کردید، باید به قالب index.html منتقل کنید. برای این کار می‌توانید از حلقه for برای نمایش هر پست در صفحه فهرست خود استفاده کنید. فایل index.html را باز کنید و طبق دستورالعمل زیر پیش بروید:

nano templates/index.html

در‌ادامه، باید آن را به‌شکل زیر تغییر دهید:

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
    {% for post in posts %}
        <a href="#">
            <h2>{{ post['title'] }}</h2>
        </a>
        <span class="badge badge-primary">{{ post['created'] }}</span>
        <hr>
    {% endfor %}
{% endblock %}

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

مرحله ششم: نمایش پست واحد

مرحله آخر همیشه جذاب است؛ چراکه نشان می‌دهد تا این‌جای کار را درست پیش رفته‌اید. درواقع با دنبال‌کردن جزئیاتی که در‌ادامه می‌آید، به بهترین وب‌ اپلیکیشنی که به‌دنبالش هستید، می‌توانید دست یابید. در این مرحله، مسیر Flask و تابع view و الگوی HTML جدیدی را برای نمایش‌ جداگانه پست وبلاگی به‌همراه شناسه آن ایجاد خواهید کرد. برای شروع و ویرایش، باید app.py را باز کنید و طبق کد زیر پیش بروید:

nano app.py

شما قرار است پست وبلاگی را به‌همراه شناسه آن از پایگاه داده و در چند مکان مختلف دریافت کنید. به‌همین‌دلیل، باید تابع مستقلی با نام get_post() را ایجاد کنید. شما می‌توانید با ارسال‌کردن یک شناسه آن‌ها را بنویسید یا به‌اصطلاح «صدا بزنید» تا پست وبلاگ مرتبط با شناسه ارائه‌شده را دریافت کنید. در‌صورتی‌که متوجه نبودن پست وبلاگ شدید، می‌توانید Flask را با پیام 404 Not Found پاسخ دهید.

برای اینکه به صفحه 404 پاسخ دهید، باید تابع abort() را از کتابخانه Werkzeug که به‌همراه Flask در بالای فایل نصب شده‌، وارد کنید. طبق دستور زیر پیش بروید:

import sqlite3
from flask import Flask, render_template
from werkzeug.exceptions import abort

. . .

حالا باید تابع get_post() را که در مرحله قبل ایجاد کرده‌اید، بعد از تابع get_db_connection() اضافه کنید. درست طبق کد زیر پیش بروید:

. . .

def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn


def get_post(post_id):
    conn = get_db_connection()
    post = conn.execute('SELECT * FROM posts WHERE id = ?',
                        (post_id,)).fetchone()
    conn.close()
    if post is None:
        abort(404)
    return post

. . .

توضیحات تابع جدید

این تابع جدید یک آرماگون post_id دارد که تعیین می‌کند چه پست وبلاگی را باید برگرداند. همچنین، می‌توانید تابع get_db_connection() را ببینید. کاربرد این تابع در باز‌کردن اتصال پایگاه داده و اجرای کوئری SQL برای دریافت‌ پست وبلاگ مرتبط با مقدار post_id است.

برای اضافه‌کردن نتیجه نیز، از متد fetchone() استفاده و آن را در متغیر post ذخیره کنید. بعد از انجام این اقدامات، حالا باید اتصال را ببندید.

دراین‌میان، فراموش نکنید که اگر متوجه شدید متغیر post مقدار None را نشان می‌دهد، یعنی هیچ نتیجه‌ای در پایگاه داده پیدا نشده است. برای این موضوع باید از تابع abort() استفاده کنید تا با کد خطای 404 پاسخ دهید. در این صورت، عملکرد اجرا به‌پایان می‌رسد. درصورتی‌که پستی پیدا شد، آن وقت باید مقدار متغیر پست را برگردانید.

حالا باید تابع view را در انتهای فایل app.py اضافه کنید. برای این کار، طبق دستور زیر عمل کنید:

. . .

@app.route('/<int:post_id>')
def post(post_id):
    post = get_post(post_id)
    return render_template('post.html', post=post)

اکنون باید فایل app.py را ذخیره و قالب جدید post.html را برای ویرایش باز کنید:

nano templates/post.html

کدی که در‌ادامه قرار می‌دهیم، باید در فایل post.html تایپ کنید. این کد شباهت زیادی به فایل index.html دارد، با این تفاوت که علاوه‌بر نمایش‌دادن محتوای پست، فقط یک پست را نمایش می‌دهد. طبق دستور زیر عمل کنید:

{% extends 'base.html' %}

{% block content %}
    <h2>{% block title %} {{ post['title'] }} {% endblock %}</h2>
    <span class="badge badge-primary">{{ post['created'] }}</span>
    <p>{{ post['content'] }}</p>
{% endblock %}

مشاهده دو پست وبلاگ

با اِعمال این تغییرات، فایل را ذخیره کنید و ببندید. حالا دوباره به آدرس اینترنتی خود بروید تا بتوانید دو پستی که در پایگاه داده خود دارید، به‌همراه صفحه‌ای که به کاربر می‌گوید «پست وبلاگ درخواستی پیدا نشد»، مشاهده کنید. طبق کد زیر پیش بروید:

http://127.0.0.1:5000/1
http://127.0.0.1:5000/2
http://127.0.0.1:5000/3

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

nano templates/index.html

در‌ادامه باید مقدار مشخص href را از # به {{ url_for(‘post’, post_id=post[‘id’]) }} تغییر دهید. بدین‌ترتیب، حلقه for باید دقیقاً به‌شکل زیر تبدیل شود:

{% for post in posts %}
    <a href="{{ url_for('post', post_id=post['id']) }}">
        <h2>{{ post['title'] }}</h2>
    </a>
    <span class="badge badge-primary">{{ post['created'] }}</span>
    <hr>
{% endfor %}

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

مرحله هفتم: اصلاح پست‌ها

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

nano app.py

در ابتدا باید موارد زیر از چهارچوب Flask را ایمپورت کنید:

• ازطریق فرم HTML شیء درخواست جهانی برای دسترسی پیدا‌کردن به داده‌های درخواست ورودی ارسال می‌شود.
• از تابع url_for() برای تولید URL استفاده می‌شود.
• از تابع flash() برای فلش‌کردن پیام در هنگام پردازش استفاده می‌شود.
• تابع redirect() برای هدایت مشتری به مکان دیگری به‌کار می‌رود.

ایمپورت را طبق کد دستوری زیر به فایل خود اضافه کنید:

import sqlite3
from flask import Flask, render_template, request, url_for, flash, redirect
from werkzeug.exceptions import abort

. . .

ویژگی‌های کد دستوری بالا

این کد دستوری ویژگی‌هایی دارد که آشنایی با آن‌ها درکشان را برایتان ساده‌تر می‌کند. به این نکات توجه کنید:

• تابع flash() پیام‌های فلش‌شده را در جلسه مرورگر مشتری ذخیره می‌کند. این موضوع نیاز به کلید مخفی را ایجاد می‌کند.
• کلید مخفی برای ایمن‌کردن جلسه‌ها استفاده می‌شود و به Flask اجازه می‌دهد تا اطلاعات را از درخواستی به درخواست دیگر به‌خاطر بسپارد.
• کاربر می‌تواند به اطلاعات ذخیره‌شده دسترسی داشته باشد؛ اما نمی‌تواند آن‌ها را تغییر دهد، به‌جز اینکه به کلید مخفی دسترسی داشته باشد.

برای تنظیم‌کردن کلید مخفی باید پیکربندی SECRET_KEY را با استفاده از app.config به برنامه خودتان اضافه کنید. برای این موضوع طبق دستور زیر پیش بروید:

. . .
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your secret key'


@app.route('/')
def index():
    conn = get_db_connection()
    posts = conn.execute('SELECT * FROM posts').fetchall()
    conn.close()
    return render_template('index.html', posts=posts)

. . .

ایجاد تابع جدید

به‌خاطر بسپارید که کلید مخفی باید رشته‌ای تصادفی و طولانی باشد. بعد از اینکه کلید مخفی را تنظیم کردید، باید تابع view جدیدی به‌وجود آورید:

. . .

@app.route('/create', methods=('GET', 'POST'))
def create():
    return render_template('create.html')

با اجرای این کد، فایل را ذخیره کنید و ببندید. برای ایجاد الگو، باید فایلی به نام create.html را در پوشه‌ای به نام templates باز کنید و طبق دستور زیر پیش بروید:

nano templates/create.html

حالا باید کد زیر را داخل این فایل جدید وارد کنید:

{% extends 'base.html' %}

{% block content %}
<h1>{% block title %} Create a New Post {% endblock %}</h1>

<form method="post">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title"
               placeholder="Post title" class="form-control"
               value="{{ request.form['title'] }}"></input>
    </div>

    <div class="form-group">
        <label for="content">Content</label>
        <textarea name="content" placeholder="Post content"
                  class="form-control">{{ request.form['content'] }}</textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
{% endblock %}

پیمایش به مسیر /create

بیشترِ این کدها HTML استاندارد هستند. حالا با اجرای سرور توسعه، می‌توانید از مرورگر خودتان برای پیمایش به مسیر /create استفاده کنید:

http://127.0.0.1:5000/create

بدین‌ترتیب، می‌توانید صفحه‌ای با توضیح Create a New Post را برای عنوان و محتوا ببینید. فرمی که می‌بینید، درخواست POST را به تابع create() view شما ارسال می‌کند. باوجوداین، هنوز کدی برای رسیدگی به درخواست POST در تابع وجود ندارد. به‌همین‌دلیل، وقتی فرم را پر و ارسال کنید، اتفاقی رخ نخواهد داد. در این صورت، برای ویرایش می‌توانید فایل app.py را باز کنید و طبق کد زیر پیش بروید:

nano app.py

در‌ادامه، باید تابع create() view را به‌گونه‌ای تغییر دهید که دقیقاً مطابق کدهای زیر باشد:

. . .

@app.route('/create', methods=('GET', 'POST'))
def create():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title:
            flash('Title is required!')
        else:
            conn = get_db_connection()
            conn.execute('INSERT INTO posts (title, content) VALUES (?, ?)',
                         (title, content))
            conn.commit()
            conn.close()
            return redirect(url_for('index'))

    return render_template('create.html')

وقتی پست وبلاگ را به پایگاه داده اضافه می‌کنید، با کمک تابع redirect() مشتری را به صفحه فهرست هدایت می‌کنید. بدین‌ترتیب، URL که تابع url_for() تولید کرده است، با مقدار index به‌عنوان آرگومان ارسال می‌کنید. بعد از اجرای دقیق این کدها، باید آن‌ها را ذخیره کنید و فایل را ببندید. حالا با استفاده از مرورگر خود، طبق دستور زیر به مسیر /create بروید:

http://127.0.0.1:5000/create

پر‌کردن فرم

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

nano templates/base.html

حالا باید فایل را ویرایش کنید. برای این کار از کد زیر استفاده کنید:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="{{ url_for('index')}}">FlaskBlog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{url_for('create')}}">New Post</a>
        </li>
        </ul>
    </div>
</nav>
<div class="container">
    {% for message in get_flashed_messages() %}
        <div class="alert alert-danger">{{ message }}</div>
    {% endfor %}
    {% block content %} {% endblock %}
</div>

این کدها را ذخیره کنید و فایل را ببندید. در‌حال‌حاضر، نوار پیمایش یک آیتم New Post دارد که به مسیر /create پیوند می‌دهد.

ویرایش‌کردن پست

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

nano app.py

بعد باید تابع edit() view زیر را به انتهای فایل اضافه کنید. برای این کار، از کدهای زیر استفاده کنید:

. . .

@app.route('/<int:id>/edit', methods=('GET', 'POST'))
def edit(id):
    post = get_post(id)

    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title:
            flash('Title is required!')
        else:
            conn = get_db_connection()
            conn.execute('UPDATE posts SET title = ?, content = ?'
                         ' WHERE id = ?',
                         (title, content, id))
            conn.commit()
            conn.close()
            return redirect(url_for('index'))

    return render_template('edit.html', post=post)

حالا باید فایل را ذخیره کنید و ببندید. در‌ادامه، باید قالب جدید edit.html را طبق کدهای زیر ایجاد کنید:

nano templates/edit.html

باید کد جدید را در فایل تازه بنویسید. طبق دستور زیر پیش بروید:

{% extends 'base.html' %}

{% block content %}
<h1>{% block title %} Edit "{{ post['title'] }}" {% endblock %}</h1>

<form method="post">
    <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title" placeholder="Post title"
               class="form-control"
               value="{{ request.form['title'] or post['title'] }}">
        </input>
    </div>

    <div class="form-group">
        <label for="content">Content</label>
        <textarea name="content" placeholder="Post content"
                  class="form-control">{{ request.form['content'] or post['content'] }}</textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
<hr>
{% endblock %}

ویرایش پست اول

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

http://127.0.0.1:5000/1/edit

با کلیک روی این صفحه، می‌توانید صفحه ویرایش اولین پست (First Post) را ببینید. وقتی پست را ویرایش کردید، می‌توانید فرم خود را ارسال کنید. حتماً از به‌روز‌شدن پست خود مطمئن شوید. حالا وقت اضافه‌کردن پیوند است. این پیوند به صفحه ویرایش برای هر پست در صفحه فهرست اشاره می‌کند. طبق کد زیر پیش بروید:

nano templates/index.html

می‌توانید مطابق کدهای زیر فایل خود را ویرایش کنید. در آخر باید آن را ذخیره کنید و ببندید:

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
    {% for post in posts %}
        <a href="{{ url_for('post', post_id=post['id']) }}">
            <h2>{{ post['title'] }}</h2>
        </a>
        <span class="badge badge-primary">{{ post['created'] }}</span>
        <a href="{{ url_for('edit', id=post['id']) }}">
            <span class="badge badge-warning">Edit</span>
        </a>
        <hr>
    {% endfor %}
{% endblock %}

حذف‌کردن پست

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

nano app.py

حالا برای اضافه‌کردن تابع view، باید طبق کدهای زیر اقدام کنید:

# ....

@app.route('/<int:id>/delete', methods=('POST',))
def delete(id):
    post = get_post(id)
    conn = get_db_connection()
    conn.execute('DELETE FROM posts WHERE id = ?', (id,))
    conn.commit()
    conn.close()
    flash('"{}" was successfully deleted!'.format(post['title']))
    return redirect(url_for('index'))

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

باز‌کردن فایل قالب

در‌ادامه، باید فایل قالب edit.html را باز کنید و طبق دستور زیر پیش بروید:

nano templates/edit.html

سپس، طبق دستور زیر عمل کنید:

<hr>

<form action="{{ url_for('delete', id=post['id']) }}" method="POST">
    <input type="submit" value="Delete Post"
            class="btn btn-danger btn-sm"
            onclick="return confirm('Are you sure you want to delete this post?')">
</form>

{% endblock %}

شما از متد confirm() برای نمایش پیام تأیید قبل از ارسال درخواست استفاده می‌کنید. حالا دوباره به صفحه ویرایش پست وبلاگ بروید و برای حذف آن تلاش کنید:

http://127.0.0.1:5000/1/edit

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

جمع‌بندی

در این مقاله از آموزش پایتون بلاگ پارس پک، نحوه ایجاد Web Application با استفاده از Flask در پایتون 3 را به‌طورکامل توضیح دادیم. با دنبال‌کردن کدهایی که در این مطلب آموزش داده شدند، یاد گرفتید که چگونه وب‌ اپلیکیشن کوچک و کاربردی بسازید و به کاربر اجازه دهید داده‌های سفارشی را ازطریق پارامترهای URL و فرم‌های وب ارائه دهند.

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

سؤالات متداول

۱. دسترسی کاربران به وب‌ اپلیکیشن‌ها چگونه است؟

کاربران می‌توانند بدون نیاز به نصب اپ ازطریق وب از مزایای آن بهره‌مند شوند؛ البته برخی از وب‌ اپلیکیشن‌ها از قابلیت نصب نیز برخوردارند.

۲. Jinja چیست؟

جینجا به‌عنوان موتور ویژه نشانه‌گذاری شناخته می‌شود که ویژه زبان برنامه‌نویسی پایتون است.

۳. چطور متوجه شویم که در راه‌اندازی پایگاه داده موفق عمل کرده‌ایم؟

وقتی با پیام database.db روبه‌رو شوید، یعنی همه مراحل را درست طی کرده‌اید.

۴. بهترین زبان برای استایل‌دادن به اپلیکیشن چیست؟

برای استایل‌دادن به اپلیکیشن، می‌توانید از زبان CSS استفاده کنید که بین برنامه‌نویسان معروف محبوبیت زیادی دارد.