Cách Thiết Kế Web Với Python Đơn Giản

Thiết kế Web với Python và lý do nên sử dụng ngôn ngữ python trong thiết kế web. 

Cùng với sự phát triển của nền kinh tế số, website đang trở thành một nền tảng bán hàng và marketing hiệu quả mà mọi doanh nghiệp đều có nhu cầu xây dựng và tối ưu. Chính vì vậy, rất nhiều ngôn ngữ lập trình và các thư viện, cộng đồng của nó đã được phát triển để đáp ứng nhu cầu phát triển các tính năng trên web, tiêu biểu có thể kể đến các ngôn ngữ lập trình như:

• Java / JavaScript
• C++
• Python
• PHP
• Ruby

Trong bài viết này chúng ta sẽ cùng tìm hiểu về Python và cách thiết kế web với python theo cách đơn giản và dễ tiếp cận nhất cho những bạn mới tìm hiểu.

Python là gì? Tại sao thiết kế web với python?

Python là một ngôn ngữ lập trình bậc cao và hướng đối tượng, được tạo ra bởi Guido van Rossum, lần đầu tiên xuất hiện vào tháng 2 năm 1991 và dần trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới.

Bài viết tham khảo: Lập trình Python là gì?

Ưu điểm của Python là logic đơn giản, dễ hiểu và dễ nhớ và tương thích với hầu hết các hệ điều hành hiện nay như Windows, Linux, MacOs, Unix. Ngoài việc được ứng dụng mạnh mẽ trong việc xử lý và phân tích dữ liệu lớn, machine learning, deep learning… Python còn được các nhà phát triển web ưu ái sử dụng bởi các đặc tính của nó như:

Tính tương thích cao

Python là một ngôn ngữ lập trình dễ học, thuộc dạng ngôn ngữ mã giả (pseudo-code). Pseudo-code là một mô tả dạng plain text của một đoạn code hoặc thuật toán. Pseudo-code không thực sự là lập trình, không có script, không có file và không có chương trình. Đúng như tên gọi, nó là “code giả”. Pseudocode không được viết bằng bất kỳ ngôn ngữ lập trình cụ thể nào. Nó viết bằng tiếng Anh và dễ hiểu. Đây là một tính năng tuyệt vời vì nó giúp ngôn ngữ Python tương tác tốt hơn bất cứ ngôn ngữ nào khác. Python cho phép người dùng có thể thử nghiệm tương tác để sửa lỗi của các đoạn mã. Nó giúp ta tập chung giải quyết các giải pháp cho vấn đề hơn là phải tập trung vào cú pháp của các câu lệnh.

Sự linh hoạt

Lập trình viên thiết kế web với python có thể kiểm tra một cách linh hoạt để đảm bảo an toàn cho program tại runtime. Nó giúp chúng ta giải quyết các vấn đề phức tạp bằng cách tách chúng ra thành các vấn đề nhỏ hơn và giải quyết gọn gàng từng cái một.

Gọn nhẹ & đơn giản

Python là ngôn ngữ lập trình với mã nguồn mở, có thể được port qua bất kì platform nào. Mọi chương trình code của bạn có thể chuyển qua lại với rất nhiều platform mà không làm thay đổi gì hoặc là các thay đổi rất rất nhỏ. Các platform bạn có thể chuyển mã code python mà không ảnh hưởng đến chương trình: Linux, Windows, Macintosh, Solaris, OS/2, Amiga, AROS, AS/400, BeOS, OS/390, z/OS, Palm OS, QNX, VMS, Psion, Acorn RISC OS, VxWorks, PlayStation, Sharp Zaurus, Windows CE và PocketPC. Python sở hữu cú pháp rất đơn giản giúp cho người lập trình dễ dàng đọc và tìm hiểu.

Ngôn ngữ bậc cao

Python là một ngôn ngữ lập trình bậc cao, chính vì vậy nó mang lại những lợi thế lớn cho nhà phát triển web khi bắt đầu với ngôn ngữ này:

• Dễ hiểu đối với con người do được viết gần hơn với ngôn ngữ tự nhiên của con người. Thực tế khi nhìn vào một đoạn code viết bằng ngôn ngữ lập trình bậc cao, không phải ai cũng hiểu được, tuy nhiên, khi so sánh với hợp ngữ và ngôn ngữ máy, chắc hẳn ai cũng phải đồng tình rằng ngôn ngữ bậc cao dễ hiểu hơn nhiều.
• Có thể dựa vào những process sẵn có để thiết lập các xử lý mới
• Không cần phải chú ý các thao tác bậc thấp như khống chế bộ nhớ

Biên dịch

Python chuyển source thành các bytecodes và chuyển đổi thành ngôn ngữ của bạn mà máy tính của bạn đang sử dụng. Nó khá giống với các ngôn ngữ lập trình kịch bản khác như Php…

Hướng đối tượng

Lập trình hướng đối tượng là một đặc tính quan trọng của Python, nó tạo ra sự đơn giản và thuận tiên hơn cho người dùng khi sử dụng. 03 nguyên lý của Python trong lập trình hướng đối tượng:

• Tính kế thừa (Inheritance): cho phép một class sử dụng các thuộc tính và phương thức từ các class khác đã được định nghĩa mà không cần định nghĩa lại.
• Tính đóng gói (Encapsulation): là nguyên lý chỉ các dòng lệnh thực thi bên trong một đối tượng không thể bị thay đổi hoặc can thiệp trực tiếp từ bên ngoài
• Tính đa hình (Polymorphism): là nguyên lý chỉ việc nhiều class có những cách thức hoạt động tương tự nhau nhưng có thể thực thi theo cách thức khác nhau.

Tìm hiểu nhiều hơn về Lập trình hướng đối tượng Python

Nhiều thư viện mở rộng

Python có nhiều thư viện và cộng đồng đa dạng cho thiết kế web với python. Có thể kể đến như Django, Flask… Tuỳ vào mục đích và quy mô của web, các nhà phát triển có thể lựa chọn các thư viện phù hợp cho dự án của mình.

Bài viết tham khảo: Thư viện Django Python, Thư viện Flask Python, Top20 thư viện Python tốt nhất cho từng ngành

Hướng dẫn thiết kế một web đơn giản với python

Bước đầu tiên khi bắt đầu thiết kế web với python, chúng ta cần chọn framework phù hợp với dự án của mình. Hiện tại python có rất nhiều framework hỗ trợ tốt cho việc phát triển web như Django, Flask và Pyramid. Tuy nhiên trong bài viết này, đối với việc thiết kế một web đơn giản với python, chúng tôi sẽ hướng dẫn bạn cách thiết kế web với framework Flask. 

Thiết lập môi trường

Bước 1: chúng ta cần thiết lập môi trường flask để làm việc với python. Chúng ta sẽ thiết lập python và pid như link dưới đây: https://docs.python-guide.org/starting/install3/osx/ Bước 2: tiến hành cài Flask:

pip install flask

Bước 3: Tạo thêm thư mục cho dự án:

mkdir hoctiengnhatonline

Bước 4: Tạo một tệp khởi tạo app.py trong thư mục “hoctiengnhatonline”, sau đó cấu hình để sử dụng module Flask tại tệp app.py

from flask import Flask

app = Flask(__name__)@app.route("/")defmain():return"Welcome"if __name__ == "__main__":

  app.run()

Sau đó thực thi app.py

python app.py

Bước 5: Vào trình duyệt và truy xuất đường link dưới đây http://localhost:5000/

Tạo trang chủ

Tại folder hoctiengnhatonline tạo folder templates, tại thư mục templates xây dựng một tệp đặt tên là index.html, mở tệp index.html thêm đoạn code HTML sau đây vào:

<htmllang="en">
<head>
    <title>Hoc Tieng Nhat online Apptitle>
    <đường linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet">
    <linkhref="https://hroy.eu/bootstrap/docs/examples/jumbotron-narrow/jumbotron-narrow.css"rel="stylesheet">
head>
<body>
    <divclass="container">
        <divclass="header">
            <nav>
                <ulclass="nav nav-pills pull-right">
                    <lirole="presentation"class="active"><ahref="#">Homea>
                    li>
                    <lirole="presentation"><ahref="#">Sign Ina>
                    li>
                    <lirole="presentation"><ahref="showSignUp">Sign Upa>
                    li>
                ul>
            nav>
            <heading 3class="text-muted">Hoc tieng Nhat online AppH3>
        div>
        <divclass="jumbotron">
            <heading 1>Japanese Lesson Appheading 1>
            <pclass="lead">p>
            <p><aclass="btn btn-lg btn-success"href="showSignUp"role="button">Sign up todaya>
            p>
        div>
        <divclass="row marketing">
            <divclass="col-lg-6">

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>
            div>
            <divclass="col-lg-6">

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>

                <h4>Lesson Listh4>

                <p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson Listp>
            div>
        div>
        <footerclass="footer">

            <p>© Copyright 2019p>
        footer>
    div>

body>
html>

Mở app.py , import render_template, cái mà chúng ta sẽ sử dụng để kết xuất những tập tin template.

from flask import Flask, render_template

Sửa phương thức chủ đạo để trả về tập tin template đã được kết xuất.

defmain():return render_template('index.html')

Mở trình duyệt , truy cập http://localhost:5000/ và bạn sẽ thấy một trang chủ đã được thiết lập xong.

Tạo một trang đăng ký

Bước 1: Thiết lập cơ sở dữ liệu cho trang web

Chúng ta sẽ thiết lập một database có tên là hoctiengnhatonline với đoạn mã dưới đây:

CREATEDATABASE hoctiengnhatonline;

Sau đó tiếp tục xây dựng bảng lưu dữ liệu người sử dụng tbl_user:

CREATETABLE`hoctiengnhatonline`.`tbl_user` (`user_id`BIGINT AUTO_INCREMENT,`user_name`VARCHAR(4.) NULLvà`user_username`VARCHAR(4) NULLvà`user_password`VARCHAR(4) NULL,

  PRIMARY KEY (`user_id`));

Tạo thêm thủ tục để lưu nội dung người dùng và gọi tên là sp_createUser

DELIMITER $CREATE DEFINER=`root`@`localhost`PROCEDURE`sp_createUser`(IN p_name VARCHAR(2),IN p_username VARCHAR(2.),IN p_password VARCHAR(2)

)BEGINif ( selectexists (select1from tbl_user where user_username = p_username) ) THENselect'Username Exists !!';

    ELSEinsertinto tbl_user

        (

            user_name,

            user_username,

            user_password

        )values(

            p_name,

            p_username,

            p_password

        );ENDIF;END$

DELIMITER ;

Bước 2: Tạo giao diện đăng ký cho web

Trong folder hoctiengnhatonline/templates xây dựng một tệp HTML đặt tên là signup.html, sau đó chèn đoạn code dưới đây vào tập tin signup.html:

<htmllang="en">

<head>

   <title>Hoc Tieng Nhat online Apptitle>

   <linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet">

   <linkhref="https://hroy.eu/bootstrap/docs/examples/jumbotron-narrow/jumbotron-narrow.css"rel="stylesheet">

   <linkhref="../static/signup.css"rel="stylesheet">

head>

<body>

<divclass="container">

   <divclass="header">

       <nav>

           <ulclass="nav nav-pills pull-right">

               <lirole="presentation" ><ahref="main">Homea>li>

               <lirole="presentation"><ahref="#">Sign Ina>li>

               <lirole="presentation"class="active"><ahref="#">Sign Upa>li>

           ul>

       nav>

       <H3class="text-muted">Hoc tieng Nhat Trực tuyến AppH3>

   div>

   <divclass="jumbotron">

       <heading 1>Học tiếng Nhật Trực tuyến AppH1>

       <formclass="form-signin">

           <labelfor="inputName"class="sr-only">Namelabel>

           <inputtype="name"name="inputName"id="inputName"class="form-control"placeholder="Name"requiredautofocus>

           <labelfor="inputEmail"class="sr-only">Email addresslabel>

           <inputtype="email"name="inputEmail"id="inputEmail"class="form-control"placeholder="Email address"requiredautofocus>

           <labelfor="inputPassword"class="sr-only">Passwordlabel>

           <inputtype="password"name="inputPassword"id="inputPassword"class="form-control"placeholder="Password"required>

           <buttonid="btnSignUp"class="btn btn-lg btn-primary btn-block"type="button">Sign upbutton>

       form>

   div>


   <footerclass="footer">

       <p>© Copyright 2019p>

   footer>

div>

body>

html>

Tạo thêm tệp CSS trong folder static bên trong hoctiengnhatonline

body  padding-top: 40px; padding-bottom: 40px;

.form-signin  max-width: 330px; padding: 15px; margin: 0 auto;

.form-signin.form-signin-headingvà.form-signin.checkbox  margin-bottom: 10px;

.form-signin.checkbox  font-weight: normal;

.form-signin.form-control  position: relative; height: auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; padding: 10px; font-size: 16px;

.form-signin.form-control:focus  z-index: 2;

.form-signininput[type="email"]  margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0;

.form-signininput[type="password"]  margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0;

Tiếp theo, thêm đoạn code dưới đây vào file app.py

@app.route('/showSignUp')defshowSignUp():return render_template('signup.html')

Nhập chuột vào nút SignUp và bạn có hoàn thành tạo cho mình một trang đăng ký cơ bản rồi đó.

Bước 3: Cài đặt phương thức đăng ký cho web

Chèn thêm một đoạn code giải quyết đăng ký signUp và import thêm thư viện vào tệp app.py

@app.route('/signUp',methods=['POST'])defsignUp():# read the posted values from the UI_name = request.form['inputName']

    _email = request.form['inputEmail']

    _password = request.form['inputPassword']# validate the received valuesif _name and _email and_password:return json.dumps('html':'All fields good !!')else:return json.dumps('html':'Enter the required fields')

,

from flask import Flask, render_template, json, request

Bước 4: Tạo yêu cầu đăng ký cho web

$(function() 

    $('#btnSignUp').click(function() 

        $.ajax(url: '/signUp',data: $('form').serialize(),type: 'POST'vàsuccess: function(response) console.log(response);

            ,error: function(error) console.log(error);

        );

    );

);

Bước 5: Gọi thủ tục lưu trữ của My-SQL

Để lưu trữ trên mySQL, đầu tiên chúng ta cần cài đặt thư viện mysql cho flask bằng lệnh sau:

pip install flask-mysql

trong file app.py import thêm thư viện , thêm các đoạn code giải quyết sau vào

from flask import Flask, render_template, json, requestfrom flaskext.mysql import MySQLfrom werkzeug import generate_password_hash, check_password_hash

mysql = MySQL()

app = Flask(__name__)# MySQL configurationsapp.config['MYSQL_DATABASE_USER'] = 'root'app.config['MYSQL_DATABASE_PASSWORD'] = '12345678'app.config['MYSQL_DATABASE_DB'] = 'hoctiengnhatonline'app.config['MYSQL_DATABASE_HOST'] = 'localhost'mysql.init_app(app)

Tiếp theo đó, tại function giải quyết đăng ký thông tin người dùng thêm đoạn code sau:

# validate the received valuesif _name and _email and _password:# All Good, let's call MySQLconn = mysql.connect()

    cursor = conn.cursor()

    _hashed_password = generate_password_hash(_password)

    cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

    data = cursor.fetchall()if len(data) is0:

        conn.commit()return json.dumps('message':'User created successfully !')else:return json.dumps('error':str(data[0]))else:return json.dumps('html':'Enter the required fields')except Exception as e:return json.dumps('error':str(e))finally:

    cursor.close() 

    conn.close()

Sau đó, bạn lưu lại các thay đổi và reset lại máy chủ. Bạn đến trang đăng ký, nhập name, email và mật khẩu, nhấp vào nút Sign Up và sẽ nhận được thông tin hiển thị như dưới đây.

"message": "User created successfully !"

KẾT LUẬN: Trên đây chỉ là một ví dụ cơ bản về các đoạn mã để xây dựng và phát triển các tính năng cơ bản cho một trong web với python. Bạn có thể tìm kiếm rất nhiều đoạn mã tương tự có sẵn để tự xây dựng các tính năng cần thiết cho trang web của mình trên các diễn đàn và cộng đồng python lớn như Github, Stack Overflow, Dev.to, Quora…  

Với bài đọc Trên Học Viện MCI hi vọng bạn sẽ ứng dụng ứng dụng ngôn ngữ python một ngôn ngữ mạnh mẽ trong thiết kế web với python