Welcome To Sherry Forex Group: Flask 3: Template!!!

Bài ngày hôm nay mình sẽ viết về template tức là làm sao để bạn có 1 cái ứng dụng tuyệt vời với sự kết hợp của Flask.

Templates nó là 1 extensions hộ trợ cho việc show dữ liệu từ app ra file html. Và ở đây mình sẽ sử dụng 1 extensions có tên là Jinja2. Jinja2hỗ trợ cho Flask rất tốt và nó cũng dc đính kèm với Flask nên bạn không cần phải cài đặt chúng.

- OK, bây giờ áp dụng luôn vào ví dụ hôm trước nhé. Bài trước có đoạn code như thế này:

Code:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return '<h1>Hello World!</h1>'

@app.route('/user/<name>')
def user(name):
    return '<h1>Hello, %s!</h1>' % name

if __name__ == '__main__':
app.run(debug=True)

- Để sử dụng được templates thì trước tiên bạn cần tạo 1 folder templates, thư mục này sẽ chứa các file html. Sau đó mình sẽ tạo 1 file templates/index.html chứa nội dung là "<h1>Hello world!!</h1>" và 1 file templates/user.html với nội dung: "<h1>Hello, {{ name }}!</h1>". Và file hello.py mình sẽ sửa lại 1 chút để ứng dụng nó sẽ render đến mấy file html.

Code:

from flask import Flask, render_template
app = Flask(__name__)

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

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

- Ở đây hàm render_template được cung cấp bởi Flask và nó được tích hợp với Jinja2 template chính vì vậy mà chúng ta không cần phải cài đặt Jinja2 :v

- Rồi bạn chạy thử xem có khác biệt gì với kết quả bài 2 không, không khác gì đúng không

Vậy qua cái ví dụ trên chắc các bạn cũng đã hiểu ra nhiều về cái template rồi đấy. Tiếp đến mới là phần quan trọng đây

Cấu trúc điều khiển
Jinja2 cũng giống các ngôn ngữ khác, nó cũng cung cấp các câu trúc điều khiển cụ thể như sau:

Cấu trúc câu điều kiện

Code:

{% if user %}
Hello, {{ user }}!
{% else %}
Hello, Stranger!
{% endif %}

Cấu trúc vong lặp for

Code:

<ul>
{% for comment in comments %}
<li>{{ comment }}</li>
{% endfor %}
</ul>

Jinja cũng cung cấp các mã macros, nó cũng giống như chức năng của đoạn code python

Code:

 <li>{{ comment }}</li>
{% endmacro %}
<ul>
{% for comment in comments %}
{{ render_comment(comment) }}
{% endfor %}
</ul>

Để có thể sử dụng macros nhiều lần thì chúng ta có thể lưu trữ chúng vào các tập tin riêng, và nếu muốn dùng chúng thì có thể import chúng vào các template cần dùng:
Code:
```
{% import 'macros.html' as macros %}
<ul>
{% for comment in comments %}
  {{ macros.render_comment(comment) }}
{% endfor %}
</ul>
```

- Trong quá trình code chắc chắn rằng bạn sẽ sử dụng các templates rất nhiều lần nên bạn có thể tạo 1 cái templates cơ sở ở đây mình gọi là base.html

Code:

<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - My Application</title>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

- Các thẻ block sẽ xác định các yếu tố khác nhau, như block title sẽ xác định title của website, block head sẽ gọi phần head của site, ..... Và để sử dụng template cơ sở này cho các template khác thì chỉ cần gọi template này.

Code:

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style>
</style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

- Để hiểu hơn về phần này mình có 1 demo như sau: mình sẽ sử dụng Twitter Bootstrap áp dụng cho ứng dụng của mình.

- Đầu tiên để sử dụng được bootstrap mình sẽ cài đặt nó đã:

Code:

 pip install flask-bootstrap

- Trong file hello.py các bạn import thêm bootstrap vào:

Code:

from flask import Flask, render_template
from flask.ext.bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)

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

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

if __name__ == '__main__':
    app.run(debug=True)

- Vì file base.html đã có sẵn trong bootstrap/base.html nên ở file user.html mình chỉ cần extends vào thôi.

Code:

{% extends "bootstrap/base.html" %}
{% block title %}Kevin Kien{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle"
      data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Ksec</a>
      </div>
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li><a href="/">Home</a></li>
        </ul>
      </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div class="container">
  <div class="page-header">
      <h1>Hello, {{ name }}!</h1>
  </div>
</div>
{% endblock %}

- Và các bạn chạy thử code xem có giống mình không nhé:

Vậy là hôm nay mình chia sẻ xong bài templates nhé, ngày mai mình sẽ chia sẻ bài thứ 4 đó là web form

Welcome To Sherry Forex Group

Trang

Wednesday, June 3, 2015

Flask 3: Template!!!

No comments:

Post a Comment