images
05/01/2021 03:09 am

Hướng dẫn làm Website trong Python với Flask

Ở bài này, Techzone sẽ cùng các bạn xây một ứng dụng web sử dụng Flask. Chúng ta cùng tìm hiểu một ứng dụng WEB gồm các thành phần gì.

Web Application



Python Web với Flask


Ở bài này, Techzone sẽ cùng các bạn xây một ứng dụng web sử dụng Flask. Chúng ta cùng tìm hiểu một ứng dụng WEB gồm các thành phần gì.


Về cơ bản, bất kì một trang web nào cũng có cấu thành bởi 3 thành phần sau:



Html


HTML: Hyper Text Makeup Language. Đây là ngôn ngữ được sử dụng để tạo ra một website. HTML bao gồm tập hợp các thẻ (html tag) để biểu diễn dữ liệu trên một trang web. Các thẻ html này sẽ quy định cách mà trình duyệt hiển thị dữ liệu. Cấu trúc một trang web chứa các thẻ html sẽ có dạng như sau:


<!DOCTYPE html>

<html>

<head>

<title>Web Title</title>

</head>

<body>

<h1>Heading</h1>

<p>My first paragraph.</p>

<div>

</div>

</body>

</html>


Một số thẻ Html


Thẻ

Giải thích

html

Mỗi thẻ html đều có thẻ đóng tương ứng, ví dụ <html> thì thẻ đóng là </html>. Thẻ html chứa toàn bộ nội dung của trang web

head

Thẻ head chứa thông tin chung về trang web, ví dụ như: title của trang, các thông tin về metadata của trang. Đồng thời các khai báo về javascript, css cũng nằm trong thẻ này

body

Thẻ body chứa toàn bộ nội dung của trang, người dùng sẽ nhìn thấy thông tin được trình bày trong body

h1,h2...

Đây là các thẻ header, giống như phần đầu của mỗi đoạn trong một bài viết.

p

Thẻ p thường chứa nội dung của mỗi đoạn, nội dung của mỗi thẻ p tương đương với một paragraph

div

Thẻ div chứa từng block của trang. Ví dụ 1 trang có các block khác nhau thì mỗi block nằm trong thẻ div. Lưu ý thẻ div có thể chứa các thẻ khác bên trong: div, p, h1,h2….


CSS


CSS là Cascading Style Sheets. Đây là thông tin quy định về cách trình bày nội dung của trang bao gồm: màu sắc, cỡ chữ, font...


body {

  background-color: white;

}

h1 {

 color: blue;

}

p {

  color: black;

}


JS - Javascript


Javascript được sử dụng trong trang web nhằm mục đích điều khiển: Ví dụ: khi bạn nhấn vào một button Order, hoặc khi bạn nhấn button Login. Javascript sẽ giúp một trang web trở nên linh hoạt và có tính tương tác với người dùng.


Python Flask


Đầu tiên, chúng ta tạo cấu trúc Project như sau:



- Chúng ta đặt tên project là python-flask-tutorial


- Ta tạo ra folder con là /static /templates. Thư mục static chứa các file của css và javascript và một số ảnh. Ban đầu các file css và js chưa có nội dung.


- Thư mục /templates chứa file html


Đầu tiên chúng ta sẽ cài Flask bằng cách sử dụng lệnh quản lý thư viện pip trong Python:

pip install Flask Tạo file app.py như sau:


from flask import Flask

from flask import render_template

from flask import jsonify


app = Flask(__name__)

@app.route("/")

def get_hompage():

  user = {

     "name": "GẤU MÈO",

     "description": "Mọi người gọi mình là ANH CHÀNG NGHIỆN CODE"

  }

  return render_template('index.html', user_profile=user)

@app.route("/languages")

def get_languages():

  return jsonify(["Python","Golang","Java"])

if __name__ == "__main__":

   app.run()


Khi chúng ta tạo ra một ứng dụng Flask. Flask sẽ tự động add thêm route /static để cho phép trình duyệt có thể truy cập tới các nội dung của file css và javascript ở trong thư mục này.

Ví dụ chúng ta có 1 file css là style.css và file common.js.

Như vậy ta có thể truy cập vào 2 file này thông qua đường dẫn sau:


http://localhost:5000/static/style.css

http://localhost:5000/static/common.js


Tương tự các file ảnh có thể truy cập qua:

http://localhost:5000/static/images/logo.png


Một điểm tiện lợi nữa của Flask là cho phép chúng ta tạo ra nội dung html động thông qua template. Các template sẽ được đặt trong thư mục /templates. Để sử dụng template này, trong hàm ta sẽ gọi thông qua 2 tham số: tên template và data để render. Hãy xem hàm get_homepage:


return render_template('index.html', user_profile=user)

Câu lệnh trên sẽ tìm đến file index.html trong thư mục /templates và truyền vào dữ liệu là user để sinh ra nội dung html. Chúng ta hãy cùng xem file template index.html


Html template


Trong file index.html, ta sẽ tạo nội dung gồm các thông tin sau:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

   <head>

       <title>Flask web app</title>

       <script src="/static/common.js"></script>

      <link rel="stylesheet" type="text/css" href="/static/style.css"/>

       <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

   </head>

   <body>

       <img class="logo" src="/static/images/logo.png">  <!--Thẻ hiển thị ảnh-->

       <h1 class="title">XIN CHÀO, MÌNH LÀ <span id="name" class="red">{{user_profile.name}}</span></h1> <!--Thẻ tiêu đề-->

       <button class="btn" id="btn" onclick="javascript:change()"> Bấm vào đây để đổi màu chữ</button>

       <p>

           {{user_profile.description}}

       </p>

       <h2> Cùng xem thông tin các ngôn ngữ lập trình yêu thích của mình nhé</h2>

       <button class="btn" onclick="javascript:loadData()">Xem ngay</button>

       <h3 id="languages"></h3>

   </body>

</html>


Lưu ý, với dòng lệnh render_template, ta cần truyền vào tên template là tên file html - index.html trong thư mục /templates và một object chứa dữ liệu:

render_template('index.html', user_profile=user)


Lưu ý trong file index.html template này, chúng ta có giá trị 

{{user_profile.name}}, {{user_profile.description}}. Các giá trị này sẽ được thay thế bởi Flask khi template này được sử dụng để generate. Các giá trị này được lấy ra từ dữ liệu user được truyền vào dòng lệnh render_template sau:


Web Demo


Kết quả là khi bạn gọi vào trình duyệt với link: http://locahost:5000/



Html với CSS


Lưu ý là trong file html bạn có liên kết tới file css trong thư mục static thông qua khai báo sau:

       <link rel="stylesheet" type="text/css" href="/static/style.css"/>


Với khai báo này, file style.css sẽ được trình duyệt lấy về để áp dụng vào các thẻ html.

Ví dụ: 

<span id="name" class="red">{{user_profile.name}}</span>


Thì thuộc tính css = red của thẻ này được quy định trong file style.css:

.red {

   color: #FF7171   /* Biến font chữ thành màu đỏ*/

}


Kết quả là bạn nhìn thấy: chữ Gấu Mèo màu đỏ:


Html với Javascript


Trong phần này, ta sẽ tạo ra một button và sử dụng Javascript để thay đổi thuộc tính css của chính button đó. Ta khai báo button với sự kiện onclick như sau:


       <button id="btn" onclick="javascript:change()">Click Me!</button>


Tiếp theo, ta mở file common.js và thêm vào nội dung hàm change() sau:


function change() {

   var element = document.getElementById("name");

   var classCss = element.getAttribute("class");

   if(classCss=="blue"){

       element.setAttribute("class", "red");

   } else {

       element.setAttribute("class", "blue");

   }

}


Ở đây mỗi khi bạn gọi hàm change(), bạn sẽ thay đổi thuộc tính class CSS của thẻ span với id = name từ blue thành red


Với khai báo như trên, mỗi khi ta click vào button trên trình duyệt, sự kiện onclick sẽ xảy ra và hàm change() sẽ được gọi. Nội dung hàm change() như ta đã thấy trong file common.js. Nội dung của hàm là lấy ra thẻ html theo id, trong trường hợp này ta dùng hàm javascript sau: 


- document.getElementById, ta lấy ra một html element, trường hợp này chính là button.


- Thay đổi thuộc tính của css của button. Với một element, thuộc tính class sẽ trỏ đến thuộc tính css nằm trong file style.css


Màu sắc của dòng chữ sẽ thay đổi khi bạn click button:



Sử dụng Javascript để lấy dữ liệu


Trong phần này, ta tiếp tục sử dụng Javascript để lấy dữ liệu từ một API và hiển thị lên Website. Đây là kỹ thuật AJAX. Bằng cách này, ta có thể update nội dung 1 phần của trang HTML mà không phải reload toàn bộ trang. Điều này sẽ làm tăng tốc độ hiển thị thông tin trên trang do trang không phải thực hiện render lại toàn bộ nội dung.


Đầu tiên ta cần 1 API trả về thông tin. Do đó ta sẽ tạo ra 1 API đơn giản /languages như sau trong file app.py, API này trả về danh sách các ngôn ngữ lập trình.


@app.route("/languages")

def get_languages():

  return jsonify(["Python, Golang, Java"])


Bước tiếp theo, ta sẽ add thêm thư viện Javascript để có thể gọi API này, ta sử dụng thư viện axios như sau:


- Trong file html thêm vào khai báo thư viện axios:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

- Thêm button trên file html để kích hoạt sự kiện gọi API:
<button onclick="javascript:loadData()">Load data</button>


- Ta cần thẻ html chứa nội dung dữ liệu sau khi lấy từ API về:

<h3 id="languages"></h3>


Nội dung hàm loadData() sẽ cần được khai báo trong file common.js. Ta sẽ sử dụng thư viện axios để load dữ liệu languages như sau:


function loadData() {

   axios.get('/languages')

       .then(function (response) {

           document.getElementById("languages").innerHTML = response.data.join(",")

       })

       .catch(function (error) {

           console.log(error);

       })

}


Hàm này sử dụng axios để gọi API: /languages, dữ liệu json sẽ được trả về trong phần response.data. Ta sử dụng câu lệnh join(“,”) của javascript để biến các phần tử của mảng thành một xâu với các item phân cách nhau bằng dấu phẩy “,”.


["Python, Golang, Java"]   → .join(“,”) → "Python, Golang, Java"


Giờ đây bạn hãy thử click vào button Load Data. Kết quả như sau:



Các bạn có thể download Source code TẠI ĐÂY


Các bạn có thể làm quen với Flask trong bài: Python ứng dụng: Tạo Rest API bằng Flask


Nếu bạn muốn tìm hiểu thêm về việc quản lý gói thì tham khảo bài: Quản lý thư viện với PIP và sử dụng PIP để cài Flask làm Restful API



- Tech Zone -

Thư giãn chút nào!!!

Bài viết liên quan