Paglikha ng Web App Form Mula sa Scratch Gamit Lamang ang Python, Flask at MySQL

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>&copy; 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>&copy; 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!