Système de connexion avec Python Flask et MySQL

Dans ce didacticiel, nous allons créer un système complet de connexion et d'enregistrement avec Python Flask et MySQL .

Python prend actuellement d'assaut la scène du développement Web, en croissance constante chaque année. Il a une faible courbe d'apprentissage et donc beaucoup plus facile à adapter par rapport à d'autres langages connus (Node.js, PHP, etc.). De plus, Python est relativement nouveau, il serait donc avantageux de commencer à apprendre immédiatement.

Le package Advanced comprend des fonctionnalités supplémentaires et un lien de téléchargement vers le code source.

Contenu

Commencer
1. Ce que vous apprendrez dans ce tutoriel
2. Exigences
3. Structure et configuration des fichiers
Création de la base de données et configuration des tables
Création de la feuille de style (CSS3)
Création du système de connexion
1. Création du modèle de connexion
2. Authentification des utilisateurs avec Python
3. Création du script de déconnexion
Création du système d'enregistrement
1. Création du modèle d'inscription
2. Enregistrement d'utilisateurs avec Python
Création de la page d'accueil
Création de la page de profil

1. Mise en route

Nous devons suivre quelques étapes avant de créer notre système de connexion et d'enregistrement Python. Nous devons télécharger et configurer Python et installer les packages dont notre application dépendra.

1.1. Ce que vous apprendrez dans ce tutoriel

Conception de formulaire — Concevez un formulaire de connexion et d'inscription avec HTML5 et CSS3.
Modèles — Créez des modèles Flask avec HTML et Python.
Validation de base — Validation des données de formulaire envoyées au serveur (nom d'utilisateur, mot de passe et e-mail).
Gestion des sessions — Initialisez les sessions et stockez les résultats de la base de données récupérés.
Requêtes MySQL — Sélectionnez et insérez des enregistrements depuis/dans notre table de base de données.
Routes — Le routage va nous permettre d'associer les URLs aux fonctions que nous allons créer.

1.2. Exigences

Téléchargez et installez Python , pour ce tutoriel, j'utiliserai Python 3.7.2. Assurez-vous de cocher l' option Ajouter Python à PATH sur l'écran de configuration de l'installation.
Téléchargez et installez MySQL Community Server et MySQL Workbench . Vous pouvez ignorer cette étape si vous avez déjà installé un serveur MySQL.
Ouvrez la ligne de commande et installez Python Flask avec la commande :pip install flask
Installez Flask-MySQLdb avec la commande :pip install flask-mysqldb

1.3. Structure et configuration des fichiers

Nous devons créer notre répertoire de projet et nos fichiers. Vous pouvez créer le répertoire n'importe où sur votre ordinateur, tant que Python peut y accéder. Créez les répertoires et les fichiers ci-dessous.

Structure du fichier

Chaque fichier contiendra les éléments suivants :

main.py — Ce sera notre fichier de projet principal, tout notre code Python sera dans ce fichier (Routes, connexion MySQL, validation, etc.).
index.html — Le modèle de formulaire de connexion créé avec HTML5 et CSS3.
register.html — Le modèle de formulaire d'inscription créé avec HTML5 et CSS3.
home.html — Le modèle d'accueil qui est limité aux utilisateurs connectés.
profile.html — Le modèle de profil qui est limité aux utilisateurs connectés. Les détails de l'utilisateur seront renseignés sur cette page.
layout.html — Le modèle de mise en page pour les modèles d'accueil et de profil.
style.css — La feuille de style CSS3 pour notre système de connexion et d'inscription.

L'instruction ci-dessous démarrera votre serveur Web (Windows):

Assurez-vous que votre serveur MySQL est opérationnel . Il devrait avoir démarré automatiquement si vous l'avez installé via le programme d'installation. De plus, assurez-vous que MySQL s'exécute sur le port 3306, sinon vous rencontrerez des erreurs de connexion.
Ouvrez l'invite de commande et accédez au répertoire de votre projet. Vous pouvez le faire avec la commandecd c:\votre_projet_dossier_destination sur Windows.
Exécutez la commande : set FLASK_APP=main.py
Exécutez la commande : set FLASK_DEBUG=1
Exécutez la commande : flask run

Le mode débogage nous permettra de modifier nos fichiers sans redémarrer constamment le serveur Web.

2. Création de la base de données et configuration des tables

MySQL Workbench est une interface graphique pour gérer nos bases de données. Suivez les instructions ci-dessous pour commencer.

Ouvrir MySQL Workbench
Entrez vos détails MySQL
Cliquez sur Tester la connexion . En cas de succès, vous pouvez cliquer sur OK
Ouvrez votre connexion
Exécutez l'instruction SQL suivante :

SQLCopie

CREATE DATABASE IF NOT EXISTS `pythonlogin` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `pythonlogin`;

CREATE TABLE IF NOT EXISTS `accounts` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
  	`username` varchar(50) NOT NULL,
  	`password` varchar(255) NOT NULL,
  	`email` varchar(100) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', 'test', 'test@test.com');

MySQL Workbench Exécuter la connexion SQL du système

L'instruction SQL ci-dessus créera notre base de données pythonlogin avec la table accounts , ainsi qu'un compte de test que nous pourrons utiliser à des fins de test.

3. Création de la feuille de style (CSS3)

Modifiez le fichier style.css et ajoutez ce qui suit :

CSSCopie

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.login, .register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1, .register h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
  	display: flex;
  	padding: 0 15px;
}
.login .links a, .register .links a {
  	color: #adb2ba;
  	text-decoration: none;
  	display: inline-flex;
  	padding: 0 10px 10px 10px;
  	font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
  	color: #9da3ac;
}
.login .links a.active, .register .links a.active {
  	border-bottom: 3px solid #3274d6;
  	color: #3274d6;
}
.login form, .register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label, .register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  	background-color: #2868c7;
  	transition: background-color 0.2s;
}
.navtop {
  	background-color: #2f3947;
  	height: 60px;
  	width: 100%;
  	border: 0;
}
.navtop div {
  	display: flex;
  	margin: 0 auto;
  	width: 1000px;
  	height: 100%;
}
.navtop div h1, .navtop div a {
  	display: inline-flex;
  	align-items: center;
}
.navtop div h1 {
  	flex: 1;
  	font-size: 24px;
  	padding: 0;
 	margin: 0;
  	color: #eaebed;
  	font-weight: normal;
}
.navtop div a {
  	padding: 0 20px;
  	text-decoration: none;
  	color: #c1c4c8;
  	font-weight: bold;
}
.navtop div a i {
  	padding: 2px 8px 0 0;
}
.navtop div a:hover {
  	color: #eaebed;
}
body.loggedin {
  	background-color: #f3f4f7;
}
.content {
  	width: 1000px;
  	margin: 0 auto;
}
.content h2 {
  	margin: 0;
  	padding: 25px 0;
  	font-size: 22px;
  	border-bottom: 1px solid #e0e0e3;
  	color: #4a536e;
}
.content > p, .content > div {
  	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  	margin: 25px 0;
  	padding: 25px;
	background-color: #fff;
}
.content > p table td, .content > div table td {
	padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
	font-weight: bold;
	color: #4a536e;
	padding-right: 15px;
}
.content > div p {
	padding: 5px;
	margin: 0 0 10px 0;
}

La feuille de style ci-dessus structurera nos pages et offrira une expérience innovante à nos utilisateurs. N'hésitez pas à personnaliser la feuille de style (changer la couleur du texte, la taille des polices, la largeur du contenu, etc.).

4. Création du système de connexion

Nous pouvons enfin commencer à coder avec Python ! Dans cette section, nous allons créer le modèle de connexion, nous connecter à notre base de données MySQL, implémenter l'authentification de connexion et définir les variables de session.

La première chose que nous devons faire est d'importer les packages que nous allons utiliser, de modifier le fichier main.py et d'ajouter ce qui suit :

PythonCopie

from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

Maintenant que nous avons importé tous les packages que nous allons utiliser, nous devons créer les variables liées à MySQL et à l'application et configurer les détails de connexion MySQL.

Ajouter après :

PythonCopie

app = Flask(__name__)

# Change this to your secret key (can be anything, it's for extra protection)
app.secret_key = 'your secret key'

# Enter your database connection details below
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'pythonlogin'

# Intialize MySQL
mysql = MySQL(app)

Assurez-vous de configurer les variables MySQL pour refléter vos détails MySQL.

Nous pouvons maintenant procéder à la création de la page de connexion. Pour ce faire, nous devons créer une nouvelle route. Les routes vont nous permettre d'associer nos fonctions à une URL particulière.

Ajouter après :

PythonCopie

# http://localhost:5000/pythonlogin/ - the following will be our login page, which will use both GET and POST requests
@app.route('/pythonlogin/', methods=['GET', 'POST'])
def login():
    # Output message if something goes wrong...
    msg = ''
    return render_template('index.html', msg='')

4.1 Création du modèle de connexion

Modifiez le fichier index.html et ajoutez :

HTMLCopie

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Login</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<div class="links">
				<a href="{{ url_for('login') }}" class="active">Login</a>
				<a href="#">Register</a>
			</div>
			<form action="{{ url_for('login') }}" method="post">
				<label for="username">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<div class="msg">{{ msg }}</div>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

Comme vous pouvez le voir avec le modèle de connexion, nous créons le formulaire avec les champs de saisie : Nom d'utilisateur et le mot de passe. La méthode du formulaire est définie surPublierqui détermine le type de requête que nous voulons envoyer à notre serveur. Nous utiliserons une requête POST pour envoyer les données du formulaire.

Si nous accédons à http://localhost:5000/pythonlogin/ dans notre navigateur Web, cela ressemblera à ceci :

http://localhost:5000/pythonlogin/

Si vous cliquez sur le bouton Connexion , rien ne se passera ou renverra une erreur, c'est parce que nous n'avons pas implémenté le code qui gère la requête POST.

4.2 Authentification des utilisateurs avec Python

Nous devons maintenant revenir à notre fichier main.py et ajouter le code d'authentification à notre fonction de routage que nous avons créée.

Après:

def login():
    # Output message if something goes wrong...
    msg = ''

Ajouter:

PythonCopie

    # Check if "username" and "password" POST requests exist (user submitted form)
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']

Avec le code ci-dessus, nous utilisons une instruction if pour vérifier si la méthode demandée estPUBLIERet vérifiez si leNom d'utilisateur et le mot de passevariables existent dans la demande de formulaire. S'ils existent tous les deux, les variables de nom d'utilisateur et de mot de passe seront créées, qui seront associées aux variables de formulaire.

Ajouter après :

PythonCopie

        # Check if account exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE username = %s AND password = %s', (username, password,))
        # Fetch one record and return result
        account = cursor.fetchone()

Le code ci-dessus exécutera une requête SQL qui récupérera les détails du compte à partir de notre table de comptes dans notre base de données MySQL. leNom d'utilisateur et le mot de passedes variables sont associées à cette requête car c'est ce que nous allons utiliser pour trouver le compte.

Ajouter après :

PythonCopie

        # If account exists in accounts table in out database
        if account:
            # Create session data, we can access this data in other routes
            session['loggedin'] = True
            session['id'] = account['id']
            session['username'] = account['username']
            # Redirect to home page
            return 'Logged in successfully!'
        else:
            # Account doesnt exist or username/password incorrect
            msg = 'Incorrect username/password!'

Le code ci-dessus déterminera si le compte existe. Si c'est le cas, les variables de session sont déclarées. Ces variables de session seront mémorisées pour l'utilisateur car elles seront utilisées pour déterminer si l'utilisateur est connecté ou non.

Les variables de session agissent essentiellement comme des cookies de navigateur. Ils sont stockés sur le serveur et non sur le navigateur de l'utilisateur.

Si le compte n'existe pas, nous pouvons simplement afficher l'erreur sur le formulaire de connexion.

Votre route de connexion devrait ressembler à ceci :

PythonCopie

@app.route('/pythonlogin/', methods=['GET', 'POST'])
def login():
    # Output message if something goes wrong...
    msg = ''
    # Check if "username" and "password" POST requests exist (user submitted form)
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']
        # Check if account exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE username = %s AND password = %s', (username, password,))
        # Fetch one record and return result
        account = cursor.fetchone()
        # If account exists in accounts table in out database
        if account:
            # Create session data, we can access this data in other routes
            session['loggedin'] = True
            session['id'] = account['id']
            session['username'] = account['username']
            # Redirect to home page
            return 'Logged in successfully!'
        else:
            # Account doesnt exist or username/password incorrect
            msg = 'Incorrect username/password!'
    # Show the login form with message (if any)
    return render_template('index.html', msg=msg)

Pour vous assurer que tout fonctionne correctement, accédez à http://localhost:5000/pythonlogin/ et saisissez « test » dans les champs de nom d'utilisateur et de mot de passe, puis cliquez sur le bouton Connexion . Vous devriez recevoir un message indiquant "Connecté avec succès !".

4.3 Création du script de déconnexion

Pour qu'un utilisateur se déconnecte, il suffit de supprimer les variables de session créées lors de la connexion de l'utilisateur.

Ajoutez le code suivant au fichier main.py :

PythonCopie

# http://localhost:5000/python/logout - this will be the logout page
@app.route('/pythonlogin/logout')
def logout():
    # Remove session data, this will log the user out
   session.pop('loggedin', None)
   session.pop('id', None)
   session.pop('username', None)
   # Redirect to login page
   return redirect(url_for('login'))

Le code ci-dessus supprimera chaque variable de session associée à l'utilisateur. Sans ces variables de session, l'utilisateur ne peut pas être connecté. Par la suite, l'utilisateur est redirigé vers la page de connexion.

Nous pouvons nous déconnecter en accédant à l'URL suivante : http://localhost:5000/pythonlogin/logout

5. Création du système d'enregistrement

Nous avons besoin d'un système d'inscription que les utilisateurs peuvent utiliser pour s'inscrire sur notre application. Ce que nous allons faire dans cette section est de créer un nouvel itinéraire d'inscription et de créer le modèle d'inscription, ainsi que le formulaire d'inscription, qui comprendra des champs de saisie, un bouton d'envoi, etc.

5.1 Création du modèle d'inscription

Modifiez le fichier register.html et ajoutez :

HTMLCopie

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Register</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="register">
			<h1>Register</h1>
			<div class="links">
				<a href="{{ url_for('login') }}">Login</a>
				<a href="{{ url_for('register') }}" class="active">Register</a>
			</div>
			<form action="{{ url_for('register') }}" method="post" autocomplete="off">
				<label for="username">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<label for="email">
					<i class="fas fa-envelope"></i>
				</label>
				<input type="email" name="email" placeholder="Email" id="email" required>
				<div class="msg">{{ msg }}</div>
				<input type="submit" value="Register">
			</form>
		</div>
	</body>
</html>

Le modèle HTML ci-dessus que nous utiliserons pour enregistrer les utilisateurs. Il est identique au modèle de connexion mais inclut également le champ de saisie E- mail .

L'attribut action du formulaire est associé à la route " register ", car nous utiliserons cette route pour gérer la requête POST.

5.2 Enregistrement d'utilisateurs avec Python

Maintenant que notre modèle est créé, nous pouvons procéder à la création de la route " registre ", qui gérera la requête POST et insérera un nouveau compte dans notre table de comptes , mais uniquement si les champs soumis sont valides.

Revenez au fichier main.py et ajoutez ce qui suit :

PythonCopie

# http://localhost:5000/pythinlogin/register - this will be the registration page, we need to use both GET and POST requests
@app.route('/pythonlogin/register', methods=['GET', 'POST'])
def register():
    # Output message if something goes wrong...
    msg = ''
    # Check if "username", "password" and "email" POST requests exist (user submitted form)
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']
        email = request.form['email']
    elif request.method == 'POST':
        # Form is empty... (no POST data)
        msg = 'Please fill out the form!'
    # Show registration form with message (if any)
    return render_template('register.html', msg=msg)

Nous créons la route " register " et implémentons la validation qui vérifiera si tous les champs du formulaire existent. Si ce n'est pas le cas, affichez une simple erreur.

Après:

email = request.form['email']

Ajouter:

PythonCopie

        # Check if account exists using MySQL
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE username = %s', (username,))
        account = cursor.fetchone()
        # If account exists show error and validation checks
        if account:
            msg = 'Account already exists!'
        elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
            msg = 'Invalid email address!'
        elif not re.match(r'[A-Za-z0-9]+', username):
            msg = 'Username must contain only characters and numbers!'
        elif not username or not password or not email:
            msg = 'Please fill out the form!'
        else:
            # Account doesnt exists and the form data is valid, now insert new account into accounts table
            cursor.execute('INSERT INTO accounts VALUES (NULL, %s, %s, %s)', (username, password, email,))
            mysql.connection.commit()
            msg = 'You have successfully registered!'

Le code ci-dessus sélectionnera un compte avec les champs de nom d' utilisateur et de mot de passe soumis. Si le compte n'existe pas, nous pouvons procéder à la validation des données d'entrée. La validation vérifiera si l' e- mail soumis est valide et vérifiera si le nom d' utilisateur ne contient que des lettres et des chiffres.

Par la suite, le code insérera un nouveau compte dans nos tables de comptes .

Pour tester son bon fonctionnement, accédez à http://localhost:5000/pythonlogin/register , remplissez le formulaire et cliquez sur le bouton Register . Vous devriez recevoir la réponse suivante :

http://localhost:5000/pythonlogin/register

Nous pouvons maintenant revenir à notre fichier index.html et modifier cette ligne :

<a href="#">Register</a>

À:

HTMLCopie

<a href="{{ url_for('register') }}">Register</a>

Les utilisateurs peuvent désormais s'inscrire et se connecter à notre application. Ensuite, nous allons créer une page d'accueil de base pour les utilisateurs connectés.

6. Création de la page d'accueil

La page d'accueil sera réservée aux utilisateurs connectés uniquement. Les utilisateurs non enregistrés ne peuvent pas accéder à cette page. Vous pouvez adapter cette page et créer plus de pages.

Modifiez le fichier main.py et ajoutez ce qui suit :

PythonCopie

# http://localhost:5000/pythinlogin/home - this will be the home page, only accessible for loggedin users
@app.route('/pythonlogin/home')
def home():
    # Check if user is loggedin
    if 'loggedin' in session:
        # User is loggedin show them the home page
        return render_template('home.html', username=session['username'])
    # User is not loggedin redirect to login page
    return redirect(url_for('login'))

Le code ci-dessus créera la fonction d'itinéraire d'origine. Si l'utilisateur est connecté, il aura accès à la page d'accueil. Sinon, ils seront redirigés vers la page de connexion.

Modifiez le fichier home.html et ajoutez ce qui suit :

HTMLCopie

{% extends 'layout.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<h2>Home Page</h2>
<p>Welcome back, {{ username }}!</p>
{% endblock %}

Nous devons également créer la mise en page de nos pages connectées. Modifiez le fichier layout.html et ajoutez :

HTMLCopie

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{% block title %}{% endblock %}</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body class="loggedin">
		<nav class="navtop">
			<div>
				<h1>Website Title</h1>
                <a href="{{ url_for('home') }}"><i class="fas fa-home"></i>Home</a>
				<a href="{{ url_for('profile') }}"><i class="fas fa-user-circle"></i>Profile</a>
				<a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i>Logout</a>
			</div>
		</nav>
		<div class="content">
			{% block content %}{% endblock %}
		</div>
	</body>
</html>

Maintenant, nous pouvons facilement étendre la même mise en page pour les pages d'accueil et de profil.

Actuellement, lorsqu'un utilisateur se connecte, il y aura un message de sortie de base, nous pouvons maintenant le changer pour rediriger l'utilisateur vers notre nouvelle page d'accueil à la place. Recherchez le code suivant dans la fonction de route de connexion :

return 'Logged in successfully!'

Remplacer par:

PythonCopie

return redirect(url_for('home'))

L'utilisateur sera désormais redirigé vers la page d'accueil lorsqu'il se connectera. Si nous entrons les détails du test dans le formulaire de connexion et cliquons sur le bouton Connexion , nous verrons ce qui suit :

http://localhost:5000/pythonlogin/home

C'est juste une simple page d'accueil qui affichera le nom d'utilisateur. Vous pouvez implémenter votre propre code plus tard.

Ensuite, nous allons créer la page de profil et remplir les détails de l'utilisateur.

7. Création de la page de profil

La page de profil remplira tous les détails associés au compte (nom d'utilisateur, mot de passe et e-mail).

Ajoutez la route suivante au fichier main.py :

PythonCopie

# http://localhost:5000/pythinlogin/profile - this will be the profile page, only accessible for loggedin users
@app.route('/pythonlogin/profile')
def profile():
    # Check if user is loggedin
    if 'loggedin' in session:
        # We need all the account info for the user so we can display it on the profile page
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        cursor.execute('SELECT * FROM accounts WHERE id = %s', (session['id'],))
        account = cursor.fetchone()
        # Show the profile page with account info
        return render_template('profile.html', account=account)
    # User is not loggedin redirect to login page
    return redirect(url_for('login'))

Le code ci-dessus créera la route du profil et récupérera tous les détails du compte dans la base de données, mais uniquement si l'utilisateur est connecté.

Modifiez le fichier profile.html et ajoutez :

HTMLCopie

{% extends 'layout.html' %}

{% block title %}Profile{% endblock %}

{% block content %}
<h2>Profile Page</h2>
<div>
    <p>Your account details are below:</p>
    <table>
        <tr>
            <td>Username:</td>
            <td>{{ account['username'] }}</td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>{{ account['password'] }}</td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>{{ account['email'] }}</td>
        </tr>
    </table>
</div>
{% endblock %}

Le code ci-dessus étendra le fichier de mise en page ( layout.html ) que nous avons créé précédemment. Si vous accédez à la page de profil, cela ressemblera à ceci :

http://localhost:5000/pythonlogin/profile

Conclusion

Toutes nos félicitations! Vous avez créé avec succès votre propre système de connexion et d'enregistrement avec Python Flask et MySQL. Vous êtes libre d'utiliser le code source de ce didacticiel dans vos applications.

Si vous avez apprécié ce didacticiel, n'oubliez pas d'appuyer sur le bouton de partage et de laisser un commentaire car cela nous aidera à créer plus de contenu futur.

Système de connexion avec Python Flask et MySQL

Contenu

1. Mise en route

1.1. Ce que vous apprendrez dans ce tutoriel

1.2. Exigences

1.3. Structure et configuration des fichiers

Structure du fichier

2. Création de la base de données et configuration des tables

3. Création de la feuille de style (CSS3)

4. Création du système de connexion

4.1 Création du modèle de connexion

4.2 Authentification des utilisateurs avec Python

4.3 Création du script de déconnexion

5. Création du système d'enregistrement

5.1 Création du modèle d'inscription

5.2 Enregistrement d'utilisateurs avec Python

6. Création de la page d'accueil

7. Création de la page de profil

Conclusion

Post a Comment

Système de rendez-vous médical en ligne en PHP MY SQL avec code source

Contact form

Système de connexion avec Python Flask et MySQL

Contenu

1. Mise en route

1.1. Ce que vous apprendrez dans ce tutoriel

1.2. Exigences

1.3. Structure et configuration des fichiers

Structure du fichier

2. Création de la base de données et configuration des tables

3. Création de la feuille de style (CSS3)

4. Création du système de connexion

4.1 Création du modèle de connexion

4.2 Authentification des utilisateurs avec Python

4.3 Création du script de déconnexion

5. Création du système d'enregistrement

5.1 Création du modèle d'inscription

5.2 Enregistrement d'utilisateurs avec Python

6. Création de la page d'accueil

7. Création de la page de profil

Conclusion

You may like these posts

Post a Comment

Contact form