Website ngày càng trở thành một nền tảng quan trọng trong việc tiếp cận khách hàng và quảng cáo sản phẩm. Do đó, việc xây dựng và tối ưu hóa website là một nhu cầu thiết yếu của mọi doanh nghiệp. Để đáp ứng nhu cầu này, rất nhiều ngôn ngữ lập trình và framework đã được phát triển. Trong số đó, Python là một ngôn ngữ lập trình phổ biến và cung cấp nhiều lợi ích khi thiết kế web.
Contents
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 từ tháng 2 năm 1991. Với tính đơn giản, dễ hiểu và tương thích với các hệ điều hành phổ biến như Windows, Linux, MacOS, Unix, Python đã 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.
Python được ứng dụng rộng rãi trong việc xử lý dữ liệu lớn, machine learning, deep learning và còn được sử dụng nhiều trong lĩnh vực thiết kế web vì các đặc tính sau đây:
Tính tương thích cao
Python là một ngôn ngữ lập trình dễ học và gần gũi với ngôn ngữ tự nhiên của con người. Điều này giúp người dùng dễ dàng nắm bắt và hiểu code. Python cũng cho phép người dùng thử nghiệm và tương tác với code để sửa lỗi một cách dễ dàng.
Sự linh hoạt
Python cho phép lập trình viên giải quyết các vấn đề phức tạp bằng cách chia nhỏ chúng thành các vấn đề nhỏ hơn. Điều này giúp cho quá trình phát triển và bảo trì website trở nên dễ dàng và hiệu quả.
Gọn nhẹ & đơn giản
Python là ngôn ngữ mã nguồn mở và có thể chạy trên nhiều nền tảng khác nhau mà không cần thay đổi code gốc. Điều này giúp cho công việc phát triển và triển khai website trở nên thuận tiện và linh hoạt. Python cũng có cú pháp đơn giản, dễ đọc và dễ hiểu.
Ngôn ngữ bậc cao
Python là một ngôn ngữ lập trình bậc cao, giúp nhà phát triển web dễ dàng viết và hiểu code hơn. Ngôn ngữ này cung cấp nhiều process sẵn có để giúp việc thiết lập các xử lý mới trở nên thuận tiện hơn. Bên cạnh đó, Python không yêu cầu người dùng chú ý đến những tác vụ bậc thấp như kiểm soát bộ nhớ.
Nhiều thư viện mở rộng
Python có nhiều thư viện và cộng đồng lớn phát triển framework để hỗ trợ việc thiết kế web. Các framework như Django và Flask cung cấp các công cụ và tính năng mạnh mẽ, giúp người lập trình xây dựng và phát triển web một cách dễ dàng và nhanh chóng.
Hướng dẫn thiết kế một web đơn giản với Python
Khi bắt đầu thiết kế web với Python, điều quan trọng là chọn framework phù hợp cho dự án của bạn. Hiện nay, có nhiều framework Python hỗ trợ phát triển web như Django, Flask và Pyramid. Trong bài viết này, chúng ta sẽ tìm hiểu cách thiết kế web với framework Flask, đơn giản và dễ tiếp cận cho những người mới học.
Thiết lập môi trường
-
Đầu tiên, chúng ta cần cài đặt môi trường Flask để làm việc với Python. Bạn có thể thiết lập Python và PIP bằng cách làm theo hướng dẫn tại địa chỉ: https://docs.python-guide.org/starting/install3/osx/
-
Tiếp theo, cài đặt Flask bằng lệnh sau:
pip install flask
- Tạo một thư mục mới cho dự án của bạn:
mkdir hoctiengnhatonline
- Trong thư mục “hoctiengnhatonline”, tạo một file khởi tạo
app.py
và cấu hình sử dụng module Flask:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def main():
return "Welcome"
if __name__ == "__main__":
app.run()
- Thực thi
app.py
:
python app.py
- Truy cập trình duyệt và vào đường dẫn sau: http://localhost:5000/
Tạo trang chủ
- Trong thư mục “hoctiengnhatonline”, tạo một thư mục “templates”. Trong thư mục “templates”, tạo một file HTML có tên là
index.html
và thêm đoạn mã HTML sau vào file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hoc Tieng Nhat online App</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://hroy.eu/bootstrap/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Sign In</a></li>
<li role="presentation"><a href="showSignUp">Sign Up</a></li>
</ul>
</nav>
<h3 class="text-muted">Hoc tieng Nhat online App</h3>
</div>
<div class="jumbotron">
<h1>Japanese Lesson App</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
</div>
<div class="col-lg-6">
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
<h4>Lesson List</h4>
<p>Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List Lesson List</p>
</div>
</div>
<footer class="footer">
<p>© Copyright 2019
</p>
</footer>
</div>
</body>
</html>
- Chỉnh sửa
app.py
và importrender_template
, một công cụ mà chúng ta sẽ sử dụng để kết xuất file template:
from flask import Flask, render_template
@app.route('/')
def main():
return render_template('index.html')
- Mở trình duyệt và truy cập vào địa chỉ: http://localhost:5000/. Bạn sẽ thấy trang chủ được thiết kế đã hoàn thành.
Tạo một trang đăng ký
-
Tạo cơ sở dữ liệu cho trang web:
- Tạo cơ sở dữ liệu
hoctiengnhatonline
bằng cách chạy lệnh sau:
CREATE DATABASE hoctiengnhatonline;
- Tiếp theo, tạo bảng
tbl_user
để lưu trữ thông tin người dùng:
CREATE TABLE `hoctiengnhatonline`.`tbl_user` ( `user_id` BIGINT AUTO_INCREMENT, `user_name` VARCHAR(255) NULL, `user_username` VARCHAR(255) NULL, `user_password` VARCHAR(255) NULL, PRIMARY KEY (`user_id`) );
- Tạo thủ tục lưu trữ để thêm người dùng mới:
DELIMITER $ CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`( IN p_name VARCHAR(255), IN p_username VARCHAR(255), IN p_password VARCHAR(255) ) BEGIN IF (SELECT EXISTS(SELECT 1 FROM tbl_user WHERE user_username = p_username)) THEN SELECT 'Username Exists !!'; ELSE INSERT INTO tbl_user (user_name, user_username, user_password) VALUES (p_name, p_username, p_password); END IF; END$ DELIMITER ;
- Tạo cơ sở dữ liệu
-
Tạo giao diện đăng ký cho web:
- Trong thư mục “hoctiengnhatonline/templates”, tạo một file HTML có tên là
signup.html
và thêm đoạn mã HTML sau vào file:
<!DOCTYPE html> <html lang="en"> <head> <title>Hoc Tieng Nhat online App</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <link href="https://hroy.eu/bootstrap/docs/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> <link href="../static/signup.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation"><a href="main">Home</a></li> <li role="presentation"><a href="#">Sign In</a></li> <li role="presentation" class="active"><a href="#">Sign Up</a></li> </ul> </nav> <h3 class="text-muted">Hoc tieng Nhat Trực tuyến App</h3> </div> <div class="jumbotron"> <h1>Học tiếng Nhật Trực tuyến App</h1> <form class="form-signin"> <label for="inputName" class="sr-only">Name</label> <input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required> <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button> </form> </div> <footer class="footer"> <p>© Copyright 2019 </p> </footer> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function() { $('#btnSignUp').click(function() { $.ajax({ url: '/signUp', data: $('form').serialize(), type: 'POST', success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); }); }); </script> </body> </html>
- Trong thư mục “hoctiengnhatonline/templates”, tạo một file HTML có tên là
-
Chỉnh sửa
app.py
, import thư việnjson
và thêm đoạn mã giải quyết đăng ký thông tin người dùng vào file:
from flask import Flask, render_template, json, request
from flaskext.mysql import MySQL
from werkzeug import generate_password_hash, check_password_hash
mysql = MySQL()
app = Flask(__name__)
# MySQL configurations
app.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)
@app.route('/showSignUp')
def showSignUp():
return render_template('signup.html')
@app.route('/signUp', methods=['POST'])
def signUp():
# Read the posted values from the UI
_name = request.form['inputName']
_email = request.form['inputEmail']
_password = request.form['inputPassword']
# Validate the received values
if _name and _email and _password:
try:
# All good, let's call MySQL
conn = 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) == 0:
conn.commit()
return json.dumps({'message': 'User created successfully!'})
else:
return json.dumps({'error': str(data[0])})
except Exception as e:
return json.dumps({'error': str(e)})
finally:
cursor.close()
conn.close()
else:
return json.dumps({'error': 'Enter the required fields'})
if __name__ == "__main__":
app.run()
- Tạo file CSS trong thư mục “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-heading,
.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-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
- Lưu lại các thay đổi và khởi động lại server. Vào trang đăng ký, nhập tên, email và mật khẩu, nhấp vào nút “Sign up” và bạn sẽ nhận được thông báo “User created successfully!”.
Kết luận
Trên đây chỉ là một ví dụ cơ bản về cách thiết kế và phát triển một web đơn giản với Python. Bạn có thể tìm kiếm nhiều ví dụ khác trên các diễn đàn và cộng đồng Python để xây dựng các tính năng phức tạp hơn cho trang web của bạn. Python là một ngôn ngữ lập trình mạnh mẽ và đa dụng, và việc sử dụng nó cho việc thiết kế web sẽ mang lại nhiều lợi ích cho bạn.
Nếu bạn quan tâm đến việc học thiết kế web với Python, hãy tiếp tục tìm hiểu và áp dụng ngôn ngữ này. Chúc bạn thành công!