Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)
Sa seryeng ito, gagamit tayo ng Python, Flask at MySQL upang lumikha ng simpleng web application mula sa scratch. Ito ay magiging isang simpleng bucket list application kung saan ang mga gagamit ay maaaring magregister, sign in at gumawa ng kanilang bucket list.
Ang
pagtuturong ito ay umaasang mayroon na kayong payak na kaalaman sa Python
programming language. Gagamit
tayo ng Flask
, isang framework ng Python web application, upang gawin ang ating
application, kasama ang MySQL
sa back end.
Pagpapakilala sa Python Flask
Ang Flask ay isang Python framework para sa paggawa ng mga web applications. Mula sa opisyal na site,
Ang Flask ay isang microframework para sa Python batay sa Werkzeug, Jinja 2 at mabubuting layunin.
Kapag naiisip natin ang tungkol sa Python, ang kaagad na framework na pumapasok sa isip natin ay ang Django framework. Ngunit mula sa pananaw ng isang nagsisimula pa lamang sa Python, ang Flask ay mas madaling matutunan, kumpara sa Django.
Paghahanda ng Flask
Ang
paghahanda ng Flask ay madali at napakabilis lamang gawin. Gamit
ang pip
package manager, ang kailangan lang natin gawin ay:
pip install flask
Kapag
tapos na kayo mag-install ng Flask, gumawa ng isang folder na ang pangalan ay FlaskApp
. Tumungo
sa FlaskApp
folder at gumawa ng isang file na ang pangalan ay app.py
. I-import
ang flask
module at gumawa ng app gamit ito gaya ng sa sumusunod:
from flask import Flask app = Flask(__name__)
Ngayon,
i-takda ang pangunahing ruya bilang /
at ang katumbas na request handler:
@app.route("/") def main(): return "Welcome!"
Sunod, tignan kung ang executed file ay ang main program at paganahin ang app:
if __name__ == "__main__": app.run()
I-save
ang mga pagbabago at i-execute ang app.py
:
python app.py
Tumungo sa http://localhost:5000/ gamit ang browser at makikita mo dapat ang panbungad na mensahe.
Paglikha ng Home Page
Una, kapag ang application ay gumagana, dapat ay magpapakita ito ng isang home page na nakalagay ang pinakahuling mga bagay sa bucket list na nilagay ng mga users. Kaya idagdag natin ang ating home page sa ating application folder.
Ang
Flask ay naghahanap ng mga template files sa loob ng templates
folder. Kaya
tumungo tayo sa PythonApp
folder at gumawa ng isang folder na ang pangalan ay templates
. Sa
loob ng templates
, gumawa ng isang file na ang pangalan ay index.html
. Buksan
ang index.html
at idagdag ang sumusunod na HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Python Flask Bucket List App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/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">Python Flask App</h3> </div> <div class="jumbotron"> <h1>Bucket List 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>Bucket List</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Bucket List</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Bucket List</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> <div class="col-lg-6"> <h4>Bucket List</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Bucket List</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Bucket List</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> <footer class="footer"> <p>© Company 2015</p> </footer> </div> </body> </html>
Buksan
ang app.py
at i-import and render_template
, kung saan ito ang gagamitin
natin upang mag-render ng mga template files.
from flask import Flask, render_template
Baguhin ang main method para mai-return ang na-render na template file.
def main(): return render_template('index.html')
I-save ang mga pagbabago at i-restart ang server. Tumungo sa http://localhost:5000/ gamit ang browser at makikita mo dapat ang nasa ibaba:

Pag-gawa ng Signup Page
Unang Hakbang: Paghahanda ng Database
Gagamit
tayo ng MySQL
bilang back end. Kaya
mag log in sa mySQL mula sa command line, o kung mas gusto ninyo ang may GUI
gaya ng MySQL work bench, maaari mo ring gamitin ito. Una,
gumawa ng isang database na ang tawag ay BucketList
. Mula
sa command line:
mysql -u <username> -p
I-enter ang kinakailangang password at kapag naka-log in na, isagawa ang sumusunod na command upang magawa ang database:
CREATE DATABASE BucketList;
Sa
oras na magawa na ang database, gumawa ang isang talaan na ang pangalan ay tbl_user
gaya ng ipinapakita:
CREATE TABLE `BucketList`.`tbl_user` ( `user_id` BIGINT NULL AUTO_INCREMENT, `user_name` VARCHAR(45) NULL, `user_username` VARCHAR(45) NULL, `user_password` VARCHAR(45) NULL, PRIMARY KEY (`user_id`));
Gagamit
tayo ng Stored procedures
para maiugnay ang ating Python application at ang
MySQL database. Kaya,
sa oras na ang table na tbl_user
ay nagawa na, lumikha ng isang stored
procedure na tinatawag na sp_createUSer
upang mai-sign up ang user.
Kapag
lumilikha ng stored procedure upang makagawa user sa tbl_user
na talaan, una
nating dapat i-check kung may kapareho ang username
ng user. Kung
ito ay mayroon na, kailangan nating magbato ng error sa user, kung hindi ay
gagawin natin ang user sa talaan ng mga user. Ganito
dapat ang magiging itsura ng stored procedure na sp_createUser
:
DELIMITER $$ CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`( IN p_name VARCHAR(20), IN p_username VARCHAR(20), IN p_password VARCHAR(20) ) 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 ;
Ikalawang Hakbang: Lumikha ng Signup Interface
Tumungo
sa PythonApp/templates
na directory at gumawa ng HTML file na signup.html
ang tawag. Idagdag
ang sumusunod na HTML code sa signup.html
:
<!DOCTYPE html> <html lang="en"> <head> <title>Python Flask Bucket List App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/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">Python Flask App</h3> </div> <div class="jumbotron"> <h1>Bucket List 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>© Company 2015</p> </footer> </div> </body> </html>
Idagdag
din ang sumusunod na CSS
bilang signup.css
sa static folder sa loob ng PythonApp
.
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; }
Sa app.py
, magdagdag ng isa pang method na ang tawag ay showSignUp
upang
i-render ang signup page sa oras na ang isang request ay pumasok sa /showSignUp
:
@app.route('/showSignUp') def showSignUp(): return render_template('signup.html')
I-save ang mga pagbabago at i-restart ang server. Magclick sa Sign Up button sa homepage at magkakaroon ka dapat ng signup page na gaya nito:

Ikatlong Hakbang: Ipatupad ang Signup Method
Sunod,
kailangan natin ng isang method sa panig ng server para makapagugnayan ang UI
sa MySQL database. Kaya
tutungo tayo sa PythonApp
at buksan ang app.py
. Lumikha
ng bagong method na tinatawag na signUp
at saka magdagdag ng ruta /signUp
. Ganito
ang magiging itsura niyan:
@app.route('/signUp') def signUp(): # create user code will be here !!
Gagamit
tayo ng jQuery AJAX upang ipaskil ang datos ng signup sa ating signUp
method,
kaya tutukuyin natin ang method na ito sa route definition.
@app.route('/signUp',methods=['POST']) def signUp(): # create user code will be here !!
Para
mabasa ang posted values, kailangan natin i-import ang request
mula sa Flask.
from flask import Flask, render_template, request
Gamit
ang request
maaari nating mabasa ang mga nakapaskil na values gaya ng nasa
ibaba:
@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']
Kapag nabasa na ang mga values, titignan lang natin kung ang mga ito ay katanggap-tanggap at pansamantala, i-return lang natin ang isang simpleng mensahe:
@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: return json.dumps({'html':'<span>All fields good !!</span>'}) else: return json.dumps({'html':'<span>Enter the required fields</span>'})
I-import
din natin ang json
mula sa Flask, sapagkat ginagamit natin ito sa code sa
itaas upang magbalik ng datos na json
.
from flask import Flask, render_template, json, request
Ika-apat na Hakbang: Gumawa ng request para sa Signup
Gagamit
tayo ng jQuery AJAX upang ipadala ang signup request sa signup method. I-download
at ilagay ang jQuery
sa loob ng PythonApp/static/js
at magdagdag ng link
dito mula sa signup page. Kapag
naisama na ang jQuery, magdadagdag tayo ng jQuery POST
request kapag ang user
ay pumindot sa SignUp
button.
Kaya naman, ikabit natin ang signup button click event gaya nito:
$(function() { $('#btnSignUp').click(function() { $.ajax({ url: '/signUp', data: $('form').serialize(), type: 'POST', success: function(response) { console.log(response); }, error: function(error) { console.log(error); } }); }); });
I-save ang mga pagbabago at i-restart ang server. Mula sa Sign Up page, punuan ang mga detalye at i-click ang Sign Up. Tumingin sa browser console at dapat ay makikita mo ang ganitong mensahe:
{"html": "<span>All fields good !!</span>"}
Ikalimang Hakbang: Tawagin ang MySQL Stored Procedure
Kapag
mayroon na tayong name
, email address
at password
, pwede na nating tawagin
ang MySQL stored procedure upang gumawa ng bagong user.
Para
kumonekta sa MySQL, gagamit tayo ng Flask-MySQL, na isang Flask extension. Upang
makapagsimula sa Flask-MySQL
, i-install ito gamit ang pip
package manager:
pip install flask-mysql
I-import
ang MySQL sa loob ng app.py
:
from flask.ext.mysql import MySQL
Kanina, itinakda natin ang ating app gaya nito:
app = Flask(__name__)
Isama din sa mga ito ang sumusunod na MySQL configurations:
mysql = MySQL() # MySQL configurations app.config['MYSQL_DATABASE_USER'] = 'jay' app.config['MYSQL_DATABASE_PASSWORD'] = 'jay' app.config['MYSQL_DATABASE_DB'] = 'BucketList' app.config['MYSQL_DATABASE_HOST'] = 'localhost' mysql.init_app(app)
Una, gumawa tayo ng MySQL connection:
conn = mysql.connect()
Sa
oras na magawa na ang connection, kakailanganin natin ng isang cursor
upang
i-query ang ating stored procedure. Kaya
naman, gamit ang conn
na connection, gumawa tayo ng cursor.
cursor = conn.cursor()
Bago
tawagin ang create user stored procedure, gawin nating salted ang ating
password gamit ang helper na binigay ng Werkzeug. I-import
ang module na ito sa app.py
:
from werkzeug import generate_password_hash, check_password_hash
Gamitin ang salting module upang makalikha ng hashed password.
_hashed_password = generate_password_hash(_password)
Ngayon,
tawagin natin ang procedure sp_createUser
:
cursor.callproc('sp_createUser',(_name,_email,_hashed_password))
Kung ang procedure ay naisagawa ng maayos, ilalagak natin ang mga pahbabaho at ibabalik ang mensahe sa pagtatagumpay.
data = cursor.fetchall() if len(data) is 0: conn.commit() return json.dumps({'message':'User created successfully !'}) else: return json.dumps({'error':str(data[0])})
I-save
ang mga pagbabago at i-restart ang server. Tumungo
sa signup page at i-enter ang name
, email address
at password
at pindutin
ang Sign Up button. Kung
matagumpay ang paggawa ng user, makakakita ka ng mensahe sa inyong browser
console.
{"message": "User created successfully !"}
Pagtatapos
Sa
pagtuturong ito, nakita natin kung papaano simulan ang paglikha ng isang web
application gamit ang Python Flask
, MySQL
at ang Flask-MySQL
extension. Ginawa
natin at hinubog ang mga talaan ng database at stored procedure, at ipinatupad
ang sign-up functionality. Sa
susunod na pagtuturo, dadalhin natin ang seryeng ito sa susunod na antas sa
pamamagitan ng pagpapatupad ng sign-in functionality at iba pang mga tampok.
Ang source code mula sa pagtuturong ito ay matatagpuan sa GitHub.
Ipaalam ninyo sa amin ang inyong mga saloobin sa comments sa ibaba!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post