Creazione di una Web App da zero utilizzando Python Flask e MySQL

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

In questa serie, utilizzeremo Python, Flask e MySQL per realizzare una semplice applicazione web da zero. Sarà una semplice applicazione per una lista dei desideri, dove gli utenti potranno registrarsi, accedere e creare le proprie liste dei desideri.

Questo tutorial presume che abbiate una base di conoscenza del linguaggio di programmazione Python. Utilizzeremo Flask, un web application framework di Python, per realizzare la nostra applicazione con MySQL come back end.

Introduzione a Python Flask

Flask è un framework di Python per realizzare applicazioni web. Dal sito ufficiale,

Falsk è un microframework per Python basato su Werkzeug, Jinja 2 e buone intenzioni.

Quando pensiamo a Python , de facto il framework che viene alla mente e Django Ma dal punto di vista un principiante del linguaggio Python, incominciare con Flask è più facile, a confronto con Django

Configurazione di Flask

Configurare Flask è abbastanza semplice e veloce. Con il package manager pip, tutto quello che dobbiamo fare è :

1	pip install flask

Una volta completata l'installazione di Flask, create una cartella e chiamatela FlaskApp. All'interno della cartella FlaskApp create il file chiamato app.py Importate il modulo di flask e create una app utilizzando Flask come mostrato:

1	from flask import Flask
2	app = Flask(__name__)

Ora definire il percorso di base / e il suo gestore dell richiesta corrispondente:

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

Successivamente, verificare se il file eseguito è il programma principale ed eseguite l'app:

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

Salvate le modifiche ed eseguite app.py :

1	python app.py

Puntate il browser a http://localhost:5000/ e dovreste ricevere un messaggio di benvenuto.

Creazione di una Home Page

Quando l'applicazione viene eseguita in primo luogo, dobbiamo mostrare una home page con le ultime voci delle liste aggiunte dagli utenti. Quindi cerchiamo di aggiungere alla nostra cartella applicazione nostra home page.

Flask cerca i file del modello all'interno della cartella templates. Quindi all'interno della cartella PythonApp create una cartella chiamata templates dentro templates, create un file chiamato index.html Aprite il file index.html ed aggiungete il seguente codice 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>

Aprite app.py ed importate render_template, che utilizzeremo per visualizzare i file del modello.

1	from flask import Flask, render_template

Modificate il metodo principale affinchè restituisca il file template.

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

Salvate le modifiche e riavviate il server. Puntate il browser su http://localhost:5000/ e dovreste vedere la schermata sottostante :

Creazione di una pagina di registrazione

Step1: Impostazione del Database

Utilizzeremo MySQL come piattaforma di back end. Così accedete a MySQL da riga di comando, o se preferite potete utilizzare anche un'interfaccia grafica come MySQL Workbench. Innanzitutto, create un database chiamato BucketList. Dalla riga di comando:

1	mysql -u <username> -p

Inserite la password richiesta ed una volta entrati, eseguite il seguente comando per creare il database:

1	CREATE DATABASE BucketList;

Una volta creato il database, create una tabella chiamata tbl_user come mostrato

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

Per la nostra applicazione Python utilizzeremo una Stored Procedure per interfacciarci con il database MySQL. Cosi, una volta creata la tabella tbl_user, create una stored procedure chiamata sp_createUser per registrare un utente.

Quando avete creato una stored procedure per inserire un utente nella tabella tbl_user, prima dovete verificare se un utente con lo stesso username già esiste. Se esiste dobbiamo inviare un errore all'utente, altrimenti creeremo l'utente nella tabella utenti. Qui vi mostro come dovrebbe essere la stored procedure 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 ;

Step 2 : Creare un'interfaccia di registrazione

Navigate la directory PythonApp/template e create il file HTML chiamato signup.html Aggiungete il seguente codice HTML nel file 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>

Aggiungete anche il seguente CSS come signup.css nella cartella statica dentro 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;
}

Nellaapp.py aggiungete un'altro metodo chiamato showSignUp per visualizzare la pagina di registrazione una volta ricevuta la richiesta /showSignUp

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

Salvate le modifiche e riavviate il server. Cliccate sul bottone Sign Up nella home page e dovreste vedere la pagina di registrazione come mostrato:

Step 3: Implementare un metodo di registrazione

Successivamente, avremo bisogno di un metodo lato server per l'interfaccia utente per l'interazione con il database MySQL Andate su PythonApp e aprite app.py . Create un nuovo metodo e chiamatelo signUp ed aggiungete anche il percorso /signUp Qui potete vedere come appare:

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

Utilizzeremo jQuery AJAX per scrivere i dati di registrazione nel metodo signUp, e specificheremo il metodo nella definizione del percorso.

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

Per poter leggere i valori assegnati dobbiamo importare da Flask request

1	from flask import Flask, render_template, request

Utilizzando request possiamo leggere i valori assegnati come mostrato sotto:

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

Una volta letti i valori, dovremmo semplicemente verificarne la validità ed inviare un semplice messaggio:

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

Importeremo anche json da Flask, dato che lo stiamo usando nel codice precedente per restituire i dati json.

1	from flask import Flask, render_template, json, request

Step 4: Creare una richiesta di registrazione

Per inviare al metodo Python la richiesta di registrazione utilizzeremo jQuery AJAX . Scaricate ed mettete jQuery all'interno della directory PythonApp/static/js ed aggiungete il link nella pagina di registrazione. Una volta inserito il jQuery , aggiungeremo la richiesta POST jQuery quando l'utente clicca il tasto di registrazione.

Così, fissate l'evento al click del pulsante di registrazione come indicato:

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

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

Salvate tutte le modifiche e riavviate il server. Dalla pagina di registrazione, completate in dettaglio i form e cliaccate registrati Verificate il browser e vedrete il messaggio sottostante:

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

Step 5 : Chiamare la Store Procedure MySQL

Una volta ottenuti nome , indirizzo email e password, possiamo semplicemente chiamare la stored procedure MySQL per creare il nuovo utente.

Per connetterci con MySQL, utilizzeremo Flask-MySQL che è un'estensione di Flask Per iniziare con Flask-MySQL, installatelo usando il package manager pip

1	pip install flask-mysql

Importate MySQL dentro app.py:

1	from flask.ext.mysql import MySQL

All'inizio abbiamo definito la nostra app come mostrato:

1	app = Flask(__name__)

Oltre questo includete le seguenti configurazioni MySQL:

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)

Innanzitutto, create la connessione MySQL :

1	conn = mysql.connect()

Una volta creata la connessione, richiameremo un cursore per interrogare la nostra stored procedure. Cosi, utilizzando il comando conn connessione, create un cursore.

1	cursor = conn.cursor()

Prima di chiamare l'utente creato con la stored procedure, nascondiamo la nostra password utilizzando un helper fornito da Werkzeug. Importate il modulo in app.py:

1	from werkzeug import generate_password_hash, check_password_hash

Utilizzare il modulo di copertura per creare la password nascosta.

1	_hashed_password = generate_password_hash(_password)

Adesso , richiamiamo la procedura sp_createUser :

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

Se la procedura viene eseguita correttamente, allora sarà eseguito il commit delle modifiche e verrà restituito un messaggio dell'aggiornamento.

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

Salvate le modifiche e riavviate il server. Andate nella pagina di registrazione ed inserite il nome, indirizzo email e la password e cliccate il tasto registra. Creato utente con successo, sarete in grado di vedere un messaggio sul vostro browser.

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

Riassumendo

In questo tutorial, abbiamo visto come iniziare con la creazione di un'applicazione web utilizzando Python Flask, MySQL e l'estensione Flask-MySQL. Abbiamo creato e progettato le tabelle del database e la stored procedure e implementata la funzionalità di registrazione. Nel prossimo tutorial, ti portiamo questa serie al livello successivo implementando funzionalità di accesso e alcune altre caratteristiche.

Codice sorgente da questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri nei commenti qui sotto!