یادگیری فلاسک؛ نمایش فایل‌های HTML - بخش سوم

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

در بخش دوم ساختار برنامه فلاسک را سازماندهی کردیم؛ حال با استفاده از کُدهای قبل این کار را ادامه میدهیم. 

برای اینکه فلاسک بتواند فایلهای HTML ما را شناسایی کند نیاز به ساخت چند دایرکتوری و فایل داریم. ابتدا دایرکتوری templates را در ریشه برنامه فلاسک ایجاد و داخل آن دو دایرکتوری دیگر با نامهای dashboard و todo ایجاد میکنیم.

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

از آنجایی که dashboard و todo مجزا از هم تعریف کرده‌ایم هر یک به اصطلاح میتواند UI خود را داشته باشد. این کار را با ایجاد کردن فایل index.html برای هر یک ادامه میدهیم:

.
├── app
│   ├── __init__.py
│   ├── templates
│   │   ├── dashboard
│   │   │   └── index.html
│   │   └── todo
│   │       └── index.html
│   └── views.py
├── app.py
├── requirements.txt

فایل index.html از دایرکتوری todo میتواند HTML زیر را داشته باشد:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  </head>
  <body>

    <section class="hero">
      <div class="hero-body">
        <p class="title">
          My Todo List
        </p>
      </div>
    </section>

  </body>
</html>

فایل index.html از دایرکتوری dashboard میتواند HTML زیر را داشته باشد:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  </head>
  <body>

    <section class="hero">
      <div class="hero-body">
        <p class="title">
          Welcome to Dashboard
        </p>
      </div>
    </section>

  </body>
</html>

حال صفحات dashboard و todo را ایجاد کردیم، بیایید آدرس آنها را به فایل views.py اضافه کنیم تا فلاسک فایل‌های index.html هر یک را نمایش دهد.

پیش از همه لازم است که تابع render_template را به بالای فایل views.py اضافه کنیم؛ این تابع وظیفه بارگذاری فایل‌های HTML ما را بر عهده دارد.

from flask import render_template

در بخش اول یاد گرفتیم که چطور با استفاده از دکوراتور app.route@ مسیر دلخواه خود را تعریف کنیم. در فایل views.py نیز برای هر یک از dashboard و todo یک view تعریف میکنیم:

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


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


حال با مراجعه به آدرس http://127.0.0.1:5000/dashboard و http://127.0.0.1:5000/todo خروجی ‌HTML خود را مشاهده خواهید کرد. بدین ترتیب توانستید اولین صفحه HTML خود را با استفاده از Flask نمایش دهید.

نکته قابل توجه در یک برنامه فلاسک این است که؛ یک برنامه فلاسک در عین سادگی میتواند پیچیده هم باشید این کاملا به شما بستگی دارد. به عنوان مثال مسیر‌های برنامه شما میتواند هم در یک فایل یا اینکه در چندید فایل جداگانه تعریف شود.