Kreiranje Web Aplikacije Iz Temelja Koristeći Python Flask I MySQL

Kreiranje Web Aplikacije iz Temelja Koristeći
Python Flask i MySQL
code.tutsplus.com/hr/tutorials/creating-a-web-app-from-scratch-using-python-flask-
and-mysql--cms-22972
Jay
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:
1pip 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:
1from flask import Flask
2app = Flask(__name__)
Sada definirajte osnovnu putanju / i njezin odgovarajući zahtjev:
1@app.route("/")
2def main():
3return "Welcome!"
Zatim, provjerite je li izvršena datoteka glavni program i pokrenite aplikaciju:
1if __name__ == "__main__":

1/15
2app.run()
Pohranite promjene i izvršite app.py:
1python app.py
Usmjerite pretraživač na http://localhost:5000/ i trebali biste dobiti poruku dobrodošlice.
Advertisement
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:
01
02
03
04
05
06
07
08
09
10<!DOCTYPE html>
11<html lang="en">
12<head>
13<title>Python Flask Bucket List App</ title>
14<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-
15narrow.css" rel="stylesheet">
16</head>
17<body>
18<div class="container">
<div class="header">
19
2/15
19
<nav>
20
<ul class="nav nav-pills pull-right">
21
<li role="presentation" class="active"><a href="#">Home</a>
22</li>
23<li role="presentation"><a href="#">Sign In</a>
24</li>
25<li role="presentation"><a href="showSignUp">Sign Up</a>
26</li>
27</ul>
28</nav>
29<h3 class="text-muted">Python Flask App</h3>

</div>
30
<div class="jumbotron">
31
<h1>Bucket List App</h1>
32
<p class="lead"></p>
33
<p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up
34today</a>
35</p>
36</div>
37<div class="row marketing">
38<div class="col-lg-6">
39<h4>Bucket List</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis
40interdum.</p>
42<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis
consectetur purus sit amet fermentum.</p>
43
<h4>Bucket List</h4>
44
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</ p>
45</div>
46<div class="col-lg-6">
48
3/15
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis
49interdum.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis
51consectetur purus sit amet fermentum.</p>
53<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</ p>
54</div>
55</div>
56<footer class="footer">
<p>© Company 2015</ p>
57
</footer>
58
</div>
59
</body>
60
</html>
61
62
63
64
65
66
67
68
69
70
Otvorite app.py i importirajte render_template, koji ćemo upotrijebiti za renderiranje datoteka
predloška.
1from flask import Flask, render_template
Modificirajte glavnu metodu da vratite renderiranu datoteku predloška.
1def main():
2return render_template('index.html')
Spremite promjene i restartajte server. Usmjerite pretraživač na http://localhost:5000/ i trebali biste

imati prikazano sljedeće:
4/15
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:
1mysql -u <username> -p
Unesite potrebnu lozinku i nakon što se ulogirate, primijenite sljedeću naredbu da kreirate bazu
podataka:
1CREATE DATABASE BucketList;
Nakon što ste kreirali bazu podataka, kreirajte tablicu imena tbl_user kao što je prikazano:
1CREATE TABLE `BucketList`.`tbl_user` (
2ùser_id` BIGINT NULL AUTO_INCREMENT,
3ùser_name` VARCHAR(45) NULL,

5/15
4ùser_username` VARCHAR(45) NULL,
5ùser_password` VARCHAR(45) NULL,
6PRIMARY KEY (ùser_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 :
01
02
03
DELIMITER $$
04
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
05
IN p_name VARCHAR(20),
06
IN p_username VARCHAR(20),
07
IN p_password VARCHAR(20)
08
)
09BEGIN
10if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
11select 'Username Exists !!';
12ELSE
13insert into tbl_user
14(
15user_name,
16user_username,
17user_password
)
18
values
19
(
20
p_name,
21
p_username,
22
6/15
23p_password
24);
25END IF;
END$$
26
DELIMITER ;
27
28
29
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:
01
02
03
04
05
06
07<!DOCTYPE html>
08<html lang="en">
<head>
09
<title>Python Flask Bucket List App</ title>
10
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
11<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-
narrow.css" rel="stylesheet">
12
<link href="../static/signup.css" rel="stylesheet">
13
</head>
14
<body>
15
<div class="container">
16
<div class="header">
17
<nav>
18
<ul class="nav nav-pills pull-right">
19
<li role="presentation" ><a href="main">Home</a></li>
7/15
20<li role="presentation"><a href="#">Sign In</a></li>
21<li role="presentation" class="active"><a href="#">Sign Up</a></li>
22</ul>
23</nav>
24<h3 class="text-muted">Python Flask App</h3>

</div>
25
<div class="jumbotron">
26
<h1>Bucket List App</h1>
27
<form class="form-signin">
28
<label for="inputName" class="sr-only">Name</label>
29
<input type="name" name="inputName" id="inputName" class="form-control"
30placeholder="Name" required autofocus>
31<label for="inputEmail" class="sr-only">Email address</label>
32<input type="email" name="inputEmail" id="inputEmail" class="form-control"

placeholder="Email address" required autofocus>
33
<label for="inputPassword" class="sr-only">Password</label>
34
<input type="password" name="inputPassword" id="inputPassword" class="form-control"
35placeholder="Password" required>
36
<button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign
up</button>
37
</form>
38
</div>
39
<footer class="footer">
40
<p>© Company 2015</ p>
41
</footer>
42</div>
43</body>
44</html>
45
46
47
48
8/15
49
50
Također dodajte sljedeći CSS kao signup.css statičnoj mapi unutar PythonApp.
01
02
03body {
04padding-top: 40px;
05padding-bottom: 40px;
}
06
.form-signin {
07
max-width: 330px;
08
padding: 15px;
09
margin: 0 auto;
10
}
11
.form-signin .form-signin-heading,
12
.form-signin .checkbox {
13margin-bottom: 10px;
14}
15.form-signin .checkbox {
16font-weight: normal;
17}
.form-signin .form-control {
18
position: relative;
19
height: auto;
20
-webkit-box-sizing: border-box;
21
-moz-box-sizing: border-box;
22
box-sizing: border-box;
23padding: 10px;
24font-size: 16px;
25}
26.form-signin .form-control:focus {
9/15
27z-index: 2;
28}
.form-signin input[type="email"] {
29
margin-bottom: -1px;
30
border-bottom-right-radius: 0;
31
border-bottom-left-radius: 0;
32
}
33
.form-signin input[type="password"] {
34margin-bottom: 10px;
35border-top-left-radius: 0;
36border-top-right-radius: 0;
37}
38
39
U app.py dodajte još jednu metodu nazvanu showSignUp da renderira stranicu za prijavu kada
zahtjev dođe u /showSignUp:
1@app.route('/showSignUp')
2def showSignUp():
3return 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:
10/15
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:
1
@app.route('/signUp')
2
def signUp():
3
Koristiti ćemo jQuery AJAX da objavimo 'signup' podatke signUp metodi, pa ćemo specificirati
metodu u putanji.
1
@app.route('/signUp',methods=['POST'])
2
def signUp():
3
Kako bismo pročitali objavljene vrijednosti moramo importirati request iz Flaska.
1from flask import Flask, render_template, request 11/15

1from flask import Flask, render_template, request
Koristeći request možemo čitati objavljene vrijednosti kao što je prikazano ispod:
2@app.route('/signUp',methods=['POST'])
3def signUp():
4_name = request.form['inputName']
5_email = request.form['inputEmail']
6_password = request.form['inputPassword']
Kada su vrijednosti pročitane, jednostavno ćemo provjeriti jesu li valjane i vratimo jednostavnu
poruku:
01
02
03@app.route('/signUp',methods=['POST'])
04def signUp():
05_name = request.form['inputName']
06_email = request.form['inputEmail']
07_password = request.form['inputPassword']
08if _name and _email and _password:
09return json.dumps({'html':'<span>All fields good !!</span>'})
10else:
11return json.dumps({'html':'<span>Enter the required fields</span>'})
12
13
Također importirajte json iz Flaska, pošto ga koristimo u kodu iznad da vratimo json podatke.
1from 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.
12/15
Stoga, pridružimo klik gumba za prijavu event kao što je prikazano:
01
02$(function() {
03$('#btnSignUp').click(function() {
04$.ajax({
05url: '/signUp',
data: $('form').serialize(),
06
type: 'POST',
07
success: function(response) {
08
console.log(response);
09
},
10
error: function(error) {
11console.log(error);
12}
13});
14});
15});
16
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:
1{"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:
1pip install flask-mysql
Importirajte MySQL unutar app.py:
1from flask.ext.mysql import MySQL
Ranije smo definirali našu aplikaciju kao što je prikazano:
1app = Flask(__name__)
13/15
Zajedno s time uključite sljedeće MySQL konfiguracije:
2mysql = MySQL()
3app.config['MYSQL_DATABASE_USER'] = 'jay'
4app.config['MYSQL_DATABASE_PASSWORD'] = 'jay'
5app.config['MYSQL_DATABASE_DB'] = 'BucketList'
6app.config['MYSQL_DATABASE_HOST'] = 'localhost'
7mysql.init_app(app)
Kreirajmo prvo MySQL vezu:
1conn = mysql.connect()
Nakon što je konekcija kreirana, tražiti ćemo cursor da istraži naš pohranjeni postupak. Stoga,
koristeći conn vezu, kreirajte kurzor.
1cursor = 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:
1from werkzeug import generate_password_hash, check_password_hash
Upotrijebite modul za soljenje da kreirate hash lozinku.
1_hashed_password = generate_password_hash(_password)
Pozovimo sada postupak sp_createUser:
1cursor.callproc('sp_createUser',(_name,_email,_hashed_password))
Ako je postupak uspješno izveden, primijeniti ćemo promjene i vratiti poruku o uspjehu.
1
data = cursor.fetchall()
2
if len(data) is 0:
3
conn.commit()
4
return json.dumps({'message':'User created successfully !' })
5
else:
6
return json.dumps({'error':str(data[0])})
7
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
14/15
u konzoli svojeg pretraživača.
1{"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!
15/15

Kreiranje Web Aplikacije Iz Temelja Koristeći Python Flask I MySQL

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kreiranje Web Aplikacije Iz Temelja Koristeći Python Flask I MySQL

Uploaded by

Copyright:

Available Formats

Kreiranje Web Aplikacije iz Temelja Koristeći

Python Flask i MySQL

Uvod u Python Flask

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

1pip install flask

1from flask import Flask

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

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

1if __name__ == "__main__":

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

Izrada Početne Stranice

13<title>Python Flask Bucket List App</ title>

14<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

23<li role="presentation"><a href="#">Sign In</a>

25<li role="presentation"><a href="showSignUp">Sign Up</a>

29<h3 class="text-muted">Python Flask App</h3>

37<div class="row marketing">

1from flask import Flask, render_template

Modificirajte glavnu metodu da vratite renderiranu datoteku predloška.

Spremite promjene i restartajte server. Usmjerite pretraživač na http://localhost:5000/ i trebali biste

1CREATE DATABASE BucketList;

1CREATE TABLE `BucketList`.`tbl_user` (

2`user_id` BIGINT NULL AUTO_INCREMENT,

3`user_name` VARCHAR(45) NULL,

5`user_password` VARCHAR(45) NULL,

6PRIMARY KEY (`user_id`));

11select 'Username Exists !!';

13insert into tbl_user

2. korak: Kreirajte 'Signup' sučelje

21<li role="presentation" class="active"><a href="#">Sign Up</a></li>

24<h3 class="text-muted">Python Flask App</h3>

31<label for="inputEmail" class="sr-only">Email address</label>

32<input type="email" name="inputEmail" id="inputEmail" class="form-control"

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

1from flask import Flask, render_template, request 11/15

08if _name and _email and _password:

09return json.dumps({'html':'<span>All fields good !!</span>'})

11return json.dumps({'html':'<span>Enter the required fields</span>'})

1from flask import Flask, render_template, json, request

4. korak: Kreirajte Signup zahtjev

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

5. korak: Pozovite MySQL Pohranjeni Postupak

1pip install flask-mysql

Importirajte MySQL unutar app.py:

1from flask.ext.mysql import MySQL

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

Kreirajmo prvo MySQL vezu:

1from werkzeug import generate_password_hash, check_password_hash

Upotrijebite modul za soljenje da kreirate hash lozinku.

Pozovimo sada postupak sp_createUser:

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

Izvorni kod iz ovog tutoriala dostupan je na GitHub stranici.

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

You might also like

1if name == "main":