شروع مقدماتی برای Python Flask با کاپیتان کد (2)

سلام

جلسه ی قبل رفتیم و یک سایت خیلی خیلی ساده ساختیم و خلاصه راه افتادیم؛ ولی این قسمت قراره یکم پیشرفته تر کار کنیم و به طور اساسی یک قالب HTML رو به کاربر نمایش بدیم. بریم که شروع کنیم ...

ما توی کد جلسه ی قبل اومدیم و مستقیم یک کد HTML رو برگردوندیم. ولی این کار، اصلا کار درستی نیست! ما باید بریم و توی یک فایل جداگانه (Template) این ها رو بگذاریم و توی اون هر چی متغیر داریم رو جایگذاری کنیم. چون اگر این کار رو نکنیم، هم از یک سری امکانات محروم می شیم و هم کدمون کثیف میشه. در ادامه منظورم رو می فهمید.

اول باید یک پوشه با نام templates بسازیم. این جا قراره قالب ها یا همون Template ها رو ایجاد کنیم. برای هر صفحه، ما یک قالب ایجاد می کنیم. حالا می خوایم یک قالب برای صفحه ی اصلی درست کنیم پس می ریم یک فایل توی پوشه قالب ها با نام home.html می سازیم و توش یک قالب ساده برای صفحه ی اصلی می سازیم.

<body>

<header>
  <h1>Captain Code</h1>
</header>
<main>
    <p>
        <a href=&quothttp://localhost&quot>Home</a>
        <a href=&quothttp://localhost/about&quot>About</a>
        <a href=&quothttp://localhost/login&quot>Login</a>
        <a href=&quothttp://localhost&quot>SignUp</a>
    </p>
</main>
<footer>
    <p>
        Open Source!
    </p>
</footer>
</body>

حالا توی فایل app.py از این با استفاده از فانکشن render_template اون رو فراخونی می کنیم. ورودی اول نام فایل قالب رو می دیم و بعد Context ها رو می دیم. در ادامه ی مطلب با Context هم آشنا می شیم.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template(&quothome.html&quot)

app.run('localhost', 80, debug=True)

الان با اجرا کردن سایت خروجی رو می بینیم ?

خروجی!
خروجی!

خوب الان اگر بخوایم مثلا متن فوتر رو از توی یک متغیر پایتون بخونیم باید چه کار کنیم؟ بگذارید اصلا یک صفحه ی جدید برای همین کار بسازیم. دیگه این جا رو توضیح نمی دم چون خودتون یاد دارید.

کد قالب (about.html)

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <title>Home Page</title>
</head>
<body>

Hello Mohammad

</body>
</html>


کد اصلی (app.py) ^

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template(&quothome.html&quot)

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

app.run('localhost', 80, debug=True)

خوب ما می خوایم بجای متن اینکه بگه سلام محمد، به هر اسمی که ما بهش بدیم سلام کنه. برای این کار اول باید یک Context توی render_template بگذاریم:

render_template('about.html', name='ali')
اگر بخواهیم چند تا context بدیم میتونیم کاما (,) بگذاریم و context بعدی ...

حالا می خواهیم از قابلیت های Template استفاده کنیم.
به جای محمد این رو قرار بدید (توی قالب):

{{ name }}
به همین سادگی
به همین سادگی

ماجرا به این ختم نمیشه. یک عالمه قابلیت های دیگه Template ها دارن که من نمی تونم الان توی این مطلب بگمشون. مطلب بعدی میریم و با این قابلیت ها بیشتر آشنا می شیم.

همچنان مطلب ادامه دارد ...

خوب از این مبحث بگذریم به این می رسیم که ما چجوری باید فایل های css و جاوااسکریپت رو قرار بدیم؟

برای این کار ما یک پوشه با نام static می سازیم. محتویات این پوشه به سادگی از طرف کاربر قابل استفاده هستند. یعنی اگر شما یک پوشه با نام Styles داخل پوشه ی static داشته باشید، می تونید از فایل mainstyle.css توش این شکلی استفاده کنید: http://localhost/static/styles/mainstyles.css

* نکته: localhost در واقع همان ادرس اصلی سایت شما هست

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

خروجی با استایل
خروجی با استایل



برای این جلسه کافیه. در صورتی که می خواهید این آموزش رو پیگیری کنید کاپیتان کد رو دنبال کنید.
در صورتی که خوشتون اومده از این سری ❤️ کنید.

..._.._.__ کاپیتان کد __._.._...