Kreiranje Web Aplikacije iz Temelja Koristeći Python Flask i MySQL

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

U ovoj seriji ćemo koristiti Python, Flask i MySQL kako bismo iz temelja kreirali jednostavnu web aplikaciju. To će biti jednostavna aplikacija za listu želja gdje se korisnici mogu registrirati, prijaviti i kreirati svoje liste želja.

Ovaj tutorial zahtijeva neko osnovno znanje Python programskog jezika. Koristiti ćemo Flask, Python framework za web aplikaciju kako bismo izradili našu aplikaciju sa MySQL back endom.

Uvod u Python Flask

Flask je Python framework za izradu web aplikacija. Prema službenoj stranici,

Flask je mikro framework za Python baziran na Werkzeug, Jinja 2 i dobrim namjerama.

Kada se sjetimo Pythona, ono što nam najčešće padne na um je Django framework. Ali iz perspektive Python početnika, u usporedbi s Djangom, Flask je laganiji za početak.

Podešavanje Flaska

Podešavanje Flaska je brzo i jednostavno. Sa pip manager paketom, sve što trebamo učiniti jest:

pip install flask

Kada završite sa instalacijom Flaska, kreirajte mapu pod imenom FlaskApp. Idite na FlaskApp mapu i kreirajte datoteku naziva app.py. Uvezite flask modul i kreirajte aplikaciju koristeći Flask kao što je prikazano:

from flask import Flask
app = Flask(__name__)

Sada definirajte osnovnu putanju / i njezin odgovarajući zahtjev:

@app.route("/")
def main():
    return "Welcome!"

Zatim, provjerite je li izvršena datoteka glavni program i pokrenite aplikaciju:

if __name__ == "__main__":
    app.run()

Pohranite promjene i izvršite app.py:

python app.py

Usmjerite pretraživač na http://localhost:5000/ i trebali biste dobiti poruku dobrodošlice.

Izrada Početne Stranice

Prvo, kada se aplikacija pokrene trebali bismo prikazati početnu stranicu sa posljednjim stavkama u popisu želja dodanim od strane korisnika. Pa dodajmo našu početnu stranicu u mapu aplikacije.

Flask traži datoteke predloška unutar templates mape. Stoga idite na PythonApp mapu i kreirajte mapu sa templates nazivom. Unutar templates mape izradite datoteku nazvanu index.html. Otvorite index.html i dodajte sljedeći 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>

Otvorite app.py i importirajte render_template, koji ćemo upotrijebiti za renderiranje datoteka predloška.

from flask import Flask, render_template

Modificirajte glavnu metodu da vratite renderiranu datoteku predloška.

def main():
    return render_template('index.html')

Spremite promjene i restartajte server. Usmjerite pretraživač na http://localhost:5000/ i trebali biste imati prikazano sljedeće:

Izrada Stranice za Prijavu

1. korak: Podešavanje Baze Podataka

Kao back end ćemo koristiti MySQL. Ulogirajte se u MySQL iz komandne linije, ili ako više preferirate GUI alate poput MySQL work bench, možete upotrijebiti i tu opciju također. Prvo, kreirajte bazu podataka nazvanu BucketList. Iz komandne linije:

mysql -u <username> -p

Unesite potrebnu lozinku i nakon što se ulogirate, primijenite sljedeću naredbu da kreirate bazu podataka:

CREATE DATABASE BucketList;

Nakon što ste kreirali bazu podataka, kreirajte tablicu imena tbl_user kao što je prikazano:

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`));

Za interakciju s MySQL bazom podataka koristiti ćemo Stored procedures za našu Python aplikaciju. Stoga, nakon što je kreirana tbl_user tablica, kreirajte pohranjenu proceduru nazvanu sp_createUser da prijavite korisnika.

Kada kreiramo pohranjeni postupak za izradu korisnika u tbl_user tablici, prvo moramo provjeriti postoji li već korisnik koji ima isti username. Ako postoji, moramo korisniku ubaciti error, jer ćemo u suprotnom kreirati korisnika u tablici korisnika. Evo kako bi izgledala pohranjeni postupak 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 ;

2. korak: Kreirajte 'Signup' sučelje

Idite na PythonApp/templates direktorij i kreirajte HTML datoteku nazvanu signup-html. Dodajte sljedeći HTML kod za 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>

Također dodajte sljedeći CSS kao signup.css statičnoj mapi unutar 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;
}

U app.py dodajte još jednu metodu nazvanu showSignUp da renderira stranicu za prijavu kada zahtjev dođe u /showSignUp:

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

Spremite promjene i restartajte server. Kliknite na Sign Up gumb na početnoj stranici i trebali biste imati stranicu za prijavu kao što je prikazano:

3. korak: Implementirajte Signup metodu

Sada trebamo 'server-side' metodu (metoda na strani servera) za interakciju s MySQL bazom podataka. Stoga idite na PythonApp i otvorite app.py. Kreirajte novu metodu nazvanu signUp i također dodajte putanju /signUp. Evo kako izgleda:

@app.route('/signUp')
def signUp():
    # create user code will be here !!

Koristiti ćemo jQuery AJAX da objavimo 'signup' podatke signUp metodi, pa ćemo specificirati metodu u putanji.

@app.route('/signUp',methods=['POST'])
def signUp():
    # create user code will be here !!

Kako bismo pročitali objavljene vrijednosti moramo importirati request iz Flaska.

from flask import Flask, render_template, request

Koristeći request možemo čitati objavljene vrijednosti kao što je prikazano ispod:

@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']

Kada su vrijednosti pročitane, jednostavno ćemo provjeriti jesu li valjane i vratimo jednostavnu poruku:

@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>'})

Također importirajte json iz Flaska, pošto ga koristimo u kodu iznad da vratimo json podatke.

from flask import Flask, render_template, json, request

4. korak: Kreirajte Signup zahtjev

Koristiti ćemo jQuery AJAX da Python metodi pošaljemo zahtjev za prijavu. Preuzmite i smjestite jQuery unutar Python/static/js i dodajte poveznicu iz stranice za prijavu. Nakon što je dodan jQuery, dodati ćemo jQuery POST zahtjev kada korisnik klikne Sign Up gumb.

Stoga, pridružimo klik gumba za prijavu event kao što je prikazano:

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

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

Pohranite sve promjene i restartajte server. Iz Sign Up stranice, ispunite detalje i kliknite Sign Up. Provjerite konzolu pretraživača i trebali biste dobiti sljedeću poruku:

{"html": "<span>All fields good !!</span>"}

5. korak: Pozovite MySQL Pohranjeni Postupak

Kada imamo name, email address i password, možemo jednostavno pozvati MySQL pohranjeni postupak da kreiramo novog korisnika.

Kako bismo spojili MySQL, koristiti ćemo Flask-MySQL Flask ekstenziju. Kako bi započeli sa Flask-MySQL, instalirajte ga koristeći pip upravitelj paketa:

pip install flask-mysql

Importirajte MySQL unutar app.py:

from flask.ext.mysql import MySQL

Ranije smo definirali našu aplikaciju kao što je prikazano:

app = Flask(__name__)

Zajedno s time uključite sljedeće MySQL konfiguracije:

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)

Kreirajmo prvo MySQL vezu:

conn = mysql.connect()

Nakon što je konekcija kreirana, tražiti ćemo cursor da istraži naš pohranjeni postupak. Stoga, koristeći conn vezu, kreirajte kurzor.

cursor = conn.cursor()

Prije pozivanja kreiranja pohranjenog korisničkog postupka, zasolimo lozinku koristeći pomoćnik koji nam omogućuje Werkzeug. Importirajte modul u app.py:

from werkzeug import generate_password_hash, check_password_hash

Upotrijebite modul za soljenje da kreirate hash lozinku.

_hashed_password = generate_password_hash(_password)

Pozovimo sada postupak sp_createUser:

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

Ako je postupak uspješno izveden, primijeniti ćemo promjene i vratiti poruku o uspjehu.

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])})

Spremite promjene i restartajte server. Idite na stranicu za prijavu i unesite name, email address i password te kliknite na Sign Up gumb. Kod uspješnog kreiranja korisnika moći ćete vidjeti poruku u konzoli svojeg pretraživača.

{"message": "User created successfully !"}

Sažetak

U ovom tutorialu vidjeli smo kako započeti s kreiranjem web aplikacije koristeći Python Flask, MySQL i Flask-MySQL ekstenziju. Kreirali smo i dizajnirali tablice baze podataka i pohranili postupak te implementirali funkcionalnost prijave. U sljedećem tutorialu podići ćemo ove serije na sljedeću razinu implementirajući 'sign in' funkcionalnost i neke druge značajke.

Izvorni kod iz ovog tutoriala dostupan je na GitHub stranici.

Pišite nam svoja mišljenja ispod u komentarima!