Título del proyecto: aplicación de perfil usando Python Flask y MySQL
Tipo de Aplicación (Categoría): Aplicación web.
Introducción: un marco es una biblioteca de código que facilita la vida de un desarrollador al crear aplicaciones web al proporcionar código reutilizable para operaciones comunes. Hay una serie de marcos para Python, incluidos Flask, Tornado, Pyramid y Django. Flask es un marco de aplicación web ligero. Se clasifica como un micro-marco porque no requiere herramientas o bibliotecas particulares. Las pestañas laterales se utilizan para aplicaciones web de una sola página o para mostrar diferentes contenidos.
Prerrequisito: conocimiento de Python, MySQL Workbench y conceptos básicos de Flask Framework. Python y MySQL Workbench deben estar instalados en el sistema. Código de Visual Studio o Spyder o cualquier editor de código para trabajar en la aplicación.
Tecnologías utilizadas en el proyecto: Flask framework, MySQL Workbench.
Implementación del proyecto:
(1) Creación de entorno
Paso 1: Crear un entorno. Cree una carpeta de proyecto y una carpeta venv dentro.
py -3 -m venv venv
Paso 2: Activar el entorno.
venv\Scripts\activar
Paso 3: Instale Flask.
pip instalar matraz
(2) Banco de trabajo MySQL
Paso 1: Instale el banco de trabajo MySQL.
Enlace para instalar: https://dev.mysql.com/downloads/workbench/
Conozca más al respecto: https://www.mysql.com/products/workbench/
Paso 2: Instale el módulo ‘mysqlbd’ en su venv.
pip instalar matraz-mysqldb
Paso 3: Abra el banco de trabajo de MySQL.
Paso 4: escribe el siguiente código. La instrucción SQL anterior creará nuestra base de datos geekprofile con las cuentas de la tabla .
Paso 5: Ejecute la consulta.
(3) Proyecto de creación
Paso 1: Cree una carpeta vacía ‘geeksprofile’ .
Paso 2: Ahora abra su editor de código y abra esta carpeta ‘geeksprofile’.
Paso 3: Cree la carpeta ‘app.py’ y escriba el código que se indica a continuación.
# Store this code in 'app.py' file
from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re
app = Flask(__name__)
app.secret_key = 'your secret key'
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'password'
app.config['MYSQL_DB'] = 'geekprofile'
mysql = MySQL(app)
@app.route('/')
@app.route('/login', methods =['GET', 'POST'])
def login():
msg = ''
if request.method == 'POST' and 'username' in request.form and 'password' in request.form:
username = request.form['username']
password = request.form['password']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM accounts WHERE username = % s AND password = % s', (username, password, ))
account = cursor.fetchone()
if account:
session['loggedin'] = True
session['id'] = account['id']
session['username'] = account['username']
msg = 'Logged in successfully !'
return render_template('index.html', msg = msg)
else:
msg = 'Incorrect username / password !'
return render_template('login.html', msg = msg)
@app.route('/logout')
def logout():
session.pop('loggedin', None)
session.pop('id', None)
session.pop('username', None)
return redirect(url_for('login'))
@app.route('/register', methods =['GET', 'POST'])
def register():
msg = ''
if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form and 'address' in request.form and 'city' in request.form and 'country' in request.form and 'postalcode' in request.form and 'organisation' in request.form:
username = request.form['username']
password = request.form['password']
email = request.form['email']
organisation = request.form['organisation']
address = request.form['address']
city = request.form['city']
state = request.form['state']
country = request.form['country']
postalcode = request.form['postalcode']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM accounts WHERE username = % s', (username, ))
account = cursor.fetchone()
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 = 'name must contain only characters and numbers !'
else:
cursor.execute('INSERT INTO accounts VALUES (NULL, % s, % s, % s, % s, % s, % s, % s, % s, % s)', (username, password, email, organisation, address, city, state, country, postalcode, ))
mysql.connection.commit()
msg = 'You have successfully registered !'
elif request.method == 'POST':
msg = 'Please fill out the form !'
return render_template('register.html', msg = msg)
@app.route("/index")
def index():
if 'loggedin' in session:
return render_template("index.html")
return redirect(url_for('login'))
@app.route("/display")
def display():
if 'loggedin' in session:
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM accounts WHERE id = % s', (session['id'], ))
account = cursor.fetchone()
return render_template("display.html", account = account)
return redirect(url_for('login'))
@app.route("/update", methods =['GET', 'POST'])
def update():
msg = ''
if 'loggedin' in session:
if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form and 'address' in request.form and 'city' in request.form and 'country' in request.form and 'postalcode' in request.form and 'organisation' in request.form:
username = request.form['username']
password = request.form['password']
email = request.form['email']
organisation = request.form['organisation']
address = request.form['address']
city = request.form['city']
state = request.form['state']
country = request.form['country']
postalcode = request.form['postalcode']
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute('SELECT * FROM accounts WHERE username = % s', (username, ))
account = cursor.fetchone()
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 = 'name must contain only characters and numbers !'
else:
cursor.execute('UPDATE accounts SET username =% s, password =% s, email =% s, organisation =% s, address =% s, city =% s, state =% s, country =% s, postalcode =% s WHERE id =% s', (username, password, email, organisation, address, city, state, country, postalcode, (session['id'], ), ))
mysql.connection.commit()
msg = 'You have successfully updated !'
elif request.method == 'POST':
msg = 'Please fill out the form !'
return render_template("update.html", msg = msg)
return redirect(url_for('login'))
if __name__ == "__main__":
app.run(host ="localhost", port = int("5000"))
Paso 4: Cree la carpeta ‘plantillas’ . cree los archivos ‘index.html’, ‘display.html’, ‘update.html’, ‘login.html’, ‘register.html’ dentro de la carpeta ‘templates’.
Paso 5: Abra el archivo ‘login.html’ y escriba el código que se indica a continuación. En ‘login.html’, tenemos dos campos, es decir, nombre de usuario y contraseña. Cuando el usuario ingresa el nombre de usuario y la contraseña correctos, lo redirigirá a la página de índice; de lo contrario, se mostrará ‘Nombre de usuario/contraseña incorrectos’.
<!--Store this code in 'login.html' file inside the 'templates' folder-->
<html>
<head>
<meta charset="UTF-8">
<title> Login </title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
<div class="logincontent" align="center">
<div class="logintop">
<h1>Login</h1>
</div></br></br></br></br>
<div class="loginbottom">
<form action="{{ url_for('login')}}" method="post" autocomplete="off">
<div class="msg">{{ msg }}</div>
<input type="text" name="username" placeholder="Enter Your Username" class="textbox" id="username" required></br></br>
<input type="password" name="password" placeholder="Enter Your Password" class="textbox" id="password" required></br></br></br>
<input type="submit" class="btn" value="Login">
</form></br></br>
<p class="worddark">New to this page? <a class="worddark" href="{{ url_for('register')}}">Register here</a></p>
</div>
</div>
</body>
</html>
Paso 6: Abra el archivo ‘register.html’ y escriba el código que se indica a continuación. En ‘registrar.html’, tenemos nueve campos, es decir, nombre de usuario, contraseña, correo electrónico, organización, dirección, ciudad, estado, país y código postal. Cuando el usuario ingresa toda la información, almacena los datos en la base de datos y se muestra «Registro exitoso».
<!--Store this code in 'register.html' file inside the 'templates' folder-->
<html>
<head>
<meta charset="UTF-8">
<title> register </title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
<div class="registercontent" align="center">
<div class="registertop">
<h1>Register</h1>
</div></br></br>
<div class="registerbottom">
<form action="{{ url_for('register')}}" method="post" autocomplete="off">
<div class="msg">{{ msg }}</div>
<input type="text" name="username" placeholder="Enter Your Username" class="textbox" id="username" required></br></br>
<input type="password" name="password" placeholder="Enter Your Password" class="textbox" id="password" required></br></br>
<input type="email" name="email" placeholder="Enter Your Email ID" class="textbox" id="email" required></br></br>
<input type="text" name="organisation" placeholder="Enter Your Organisation" class="textbox" id="organisation" required></br></br>
<input type="text" name="address" placeholder="Enter Your Address" class="textbox" id="address" required></br></br>
<input type="text" name="city" placeholder="Enter Your City" class="textbox" id="city" required></br></br>
<input type="text" name="state" placeholder="Enter Your State" class="textbox" id="state" required></br></br>
<input type="text" name="country" placeholder="Enter Your Country" class="textbox" id="country" required></br></br>
<input type="text" name="postalcode" placeholder="Enter Your Postal Code" class="textbox" id="postalcode" required></br></br>
<input type="submit" class="btn" value="Register">
</form>
<p class="worddark">Already have account? <a class="worddark" href="{{ url_for('login')}}">Login here</a></p>
</div>
</div>
</body>
</html>
Paso 7: Abra el archivo ‘index.html’ y escriba el código que se indica a continuación. Cuando el usuario inicia sesión con éxito, se muestra esta página y ‘¡Inicio de sesión exitoso!’ se visualiza.
<!--Store this code in 'index.html' file inside the 'templates' folder-->
<html lang="en">
<head>
<title>index</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body bgcolor="#e6ffee">
<div class="one">
<div class="two">
<h1>Side Bar</h1>
<ul>
<li class="active"><a href="{{url_for('index')}}">Index</a></li>
<li><a href="{{url_for('display')}}">Display</a></li>
<li><a href="{{url_for('update')}}">Update</a></li>
<li><a href="{{url_for('logout')}}">Log out</a></li>
</ul>
</div>
<div class="content" align="center">
<div class="topbar">
<h2>Welcome!! You are in Index Page!! </h2>
</div></br></br>
<div class="contentbar">
<div class="msg">{{ msg }}</div>
</div>
</div>
</div>
</body>
</html>
Paso 8: Abra el archivo ‘display.html’ y escriba el código que se indica a continuación. Aquí se muestra la información del usuario almacenada en la base de datos.
<!--Store this code in 'display.html' file inside the 'templates' folder-->
<html lang="en">
<head>
<title>display</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body bgcolor="#e6ffee">
<div class="one">
<div class="two">
<h1>Side Bar</h1>
<ul>
<li><a href="{{url_for('index')}}">Index</a></li>
<li class="active"><a href="{{url_for('display')}}">Display</a></li>
<li><a href="{{url_for('update')}}">Update</a></li>
<li><a href="{{url_for('logout')}}">Log out</a></li>
</ul>
</div>
<div class="content" align="center">
<div class="topbar">
<h2>Welcome!! You are in Display Page!! </h2>
</div> </br>
<div class="contentbar">
<h1>Your Details</h1> </br>
{% block content %}
<div class="border">
<table class="worddark"></br></br></br></br>
<tr>
<td>Username:</td>
<td>{{ account['username'] }}</td>
</tr>
<tr>
<td>Passworde:</td>
<td>{{ account['password'] }}</td>
</tr>
<tr>
<td>Email ID:</td>
<td>{{ account['email'] }}</td>
</tr>
<tr>
<td>Organisation:</td>
<td>{{ account['organisation'] }}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{ account['address'] }}</td>
</tr>
<tr>
<td>City:</td>
<td>{{ account['city'] }}</td>
</tr>
<tr>
<td>State:</td>
<td>{{ account['state'] }}</td>
</tr>
<tr>
<td>Country:</td>
<td>{{ account['country'] }}</td>
</tr>
<tr>
<td>Postal code:</td>
<td>{{ account['postalcode'] }}</td>
</tr>
</table>
</div>
{% endblock %}
</div>
</div>
</div>
</body>
</html>
Paso 9: Abra el archivo ‘update.html’ y escriba el código que se indica a continuación. El usuario puede actualizar sus datos, lo que también actualiza la base de datos.
<!--Store this code in 'update.html' file inside the 'templates' folder-->
<html lang="en">
<head>
<title>update</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body bgcolor="#e6ffee">
<div class="one">
<div class="two">
<h1>Side Bar</h1>
<ul>
<li><a href="{{url_for('index')}}">Index</a></li>
<li><a href="{{url_for('display')}}">Display</a></li>
<li class="active"><a href="{{url_for('update')}}">Update</a></li>
<li><a href="{{url_for('logout')}}">Log out</a></li>
</ul>
</div>
<div class="content" align="center">
<div class="topbar">
<h2>Welcome!! You are in Update Page!! </h2>
</div></br></br>
<div class="contentbar">
<h1>Fill Your Details to Update</h1></br>
<form action="{{ url_for('update') }}" method="post" autocomplete="off">
<div class="msg">{{ msg }}</div>
<input type="text" name="username" placeholder="Enter Your Username" class="textbox" id="username" required></br></br>
<input type="password" name="password" placeholder="Enter Your Password" class="textbox" id="password" required></br></br>
<input type="email" name="email" placeholder="Enter Your Email ID" class="textbox" id="email" required></br></br>
<input type="text" name="organisation" placeholder="Enter Your Organisation" class="textbox" id="organisation" required></br></br>
<input type="text" name="address" placeholder="Enter Your Address" class="textbox" id="address" required></br></br>
<input type="text" name="city" placeholder="Enter Your City" class="textbox" id="city" required></br></br>
<input type="text" name="state" placeholder="Enter Your State" class="textbox" id="state" required></br></br>
<input type="text" name="country" placeholder="Enter Your Country" class="textbox" id="country" required></br></br>
<input type="text" name="postalcode" placeholder="Enter Your Postal Code" class="textbox" id="postalcode" required></br></br>
<input type="submit" class="btn" value="Update">
</form>
</div>
</div>
</div>
</body>
</html>
Paso 10: Cree la carpeta ‘static’ . cree el archivo ‘style.css’ dentro de la carpeta ‘static’ y pegue el código CSS proporcionado.
/*Store this code in 'style.css' file inside the 'static' folder*/
.logincontent{
margin: 0 auto;
height: 500px;
width: 400px;
background-color: #e6ffee;
border-radius: 10px;
}
.registercontent{
margin: 0 auto;
height: 720px;
width: 400px;
background-color: #e6ffee;
border-radius: 10px;
}
.logintop{
height: 60px;
width: 400px;
background-color: #009933;
color: #ffffff;
}
.registertop{
height: 60px;
width: 400px;
background-color: #009933;
color: #ffffff;
}
.textbox{
padding: 10px 40px;
background-color: #009933;
border-radius: 10px;
}
::placeholder {
color: #FFFFFF;
opacity: 1;
font-style: oblique;
font-weight: bold;
}
.btn {
padding: 10px 40px;
background-color: #009933;
color: #FFFFFF;
font-style: oblique;
font-weight: bold;
border-radius: 10px;
}
.worddark{
color: #009933;
font-style: oblique;
font-weight: bold;
}
.wordlight{
color: #FFFFFF;
font-style: oblique;
font-weight: bold;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
.one{
display: flex;
position: relative;
}
.one .two{
width: 225px;
height: 100%;
background: #009933;
padding: 30px 0px;
position: fixed;
}
.one .two h1{
color: #fff;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
font-style: oblique;
font-weight: bold;
}
.one .two h2{
color: #fff;
text-align: center;
}
.one .two .active{
background: #0a8032;
}
.one .two ul li{
text-align: center;
padding: 15px;
border-bottom: 0.1px solid white;
border-top: 0.1px solid white;
}
.one .two ul li a{
color: #ffffff;
display: block;
}
.one .two ul li a .side{
width: 25px;
align:center;
}
.one .content{
width: 100%;
margin-left: 200px;
}
.one .content .topbar{
text-align: center;
padding: 20px;
background: #00b33c;
color: white;
}
.one .content .contentbar{
margin: auto;
}
.one .content .contentbar h1{
color: #11a844;
text-align: center;
font-style: oblique;
font-weight: bold;
}
Paso 11: La estructura del proyecto se verá así.
(4) Ejecutar el Proyecto
Paso 1: Ejecute el servidor.
Paso 2: Navegue por la URL ‘localhost:5000’.
Paso 3: Se mostrará la página web de salida.
(5) Prueba de la Aplicación
Paso 1: si es un usuario nuevo, vaya a la página de registro y complete los detalles.
Paso 2: después del registro, vaya a la página de inicio de sesión. Ingrese su nombre de usuario y contraseña e inicie sesión.
Paso 3: si su inicio de sesión es exitoso, se lo moverá a la página de índice y se mostrará su nombre.
Paso 4: puede ver los detalles de su perfil en la página de visualización y también puede actualizar sus detalles en la página de actualización.
Salida:
Página de inicio de sesión :
Página de registro:
Si el inicio de sesión es exitoso, Página de índice:
Página de actualización:
Antes de la actualización, Mostrar página:
Después de la actualización, Mostrar página:
Base de datos – Antes de la actualización:
Base de datos – Después de la actualización:
Publicación traducida automáticamente
Artículo escrito por venniladeenan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA