LECTORIO WEB (PROGRAMACIÓN)

-

 Hola gente bonita, en esta ocasión les mostraré el código de una aplicación WEB. La app se llama Lectorio WEB y sirve para el registro de los libros que uno va leyendo de forma sencilla y práctica.

Logo de la app:


Para su programación ocupé el editor de código Visual Studio Code y Python como lenguaje del proyecto.
Las librerías que usé  para desarrollar el proyecto son las siguientes:
  • mysql-connector (para la conexión con la base de datos MySQL)
  • Flask (Framewrok para facilitar el apartado web)
A continuación mostraré el código de la aplicación, archivo "lectorio-cli.py", el cual es el backend de la aplicación:

Archivo "install.bat" que se encarga de instalar las librerías necesarias para la ejecución correcta del proyecto:

pip install mysql.connector
pip install Flask

Archivo "index.html" que se encarga de estructurar el login de la página:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lectorio</title>
    <link rel="stylesheet" href="{{url_for('static', filename='css/style_index.css')}}">
    <link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">
</head>
<body>
    <div class="body"></div>
		<div class="grad"></div>
		<div class="header">
			<div class="logo"><img src="../static/img/logo-completo.png" alt=""></div>
		</div>
		<br>
		<div class="login">
            <form action="/login" method="POST">
                <div class="login__input">
                    <input name="usuario" type="text" placeholder="Usuario"><br> 
                </div>
                <div class="login__input">
                    <input name="contraseña" type="text" placeholder="Contraseña"><br>
                </div>

                <button type="sumbit">Ingresar</button>

                <div class="register">
                    <a href="">No tiene una cuenta? Hagase una!</a>
                </div>
            </form>
		</div>
    </div>
</body>
</html>

Archivo "home.html" que se encarga de estructurar la página pricipal:

{% extends "layout.html" %} {% block content %}

<!DOCTYPE html>
<html lang="es">
   
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
    </head>

    <body>

        {% with messages = get_flashed_messages() %} <!-- Permite ejecutar los mensajes flash -->
        {% if messages %}
        {% for message in messages %}
        <p>{{ message }}</p>
        {% endfor %}
        {% endif %}
        {% endwith %}
        
        <div class="header">
            <img class="header__img" src="../static/img/logo-completo.png" alt="logo.png">
        </div>

        <div class="form">
            <form action="/add_book" method="POST">
                <h2 class="form__h2">Nuevo libro:</h2>
                <input class="form__input" type="text" name="libro" placeholder="Libro">
                <input class="form__input" type="text" name="autor" placeholder="Autor">
                <input class="form__input" type="text" name="paginas" placeholder="Páginas">
                <input class="form__input" type="date" name="fecha" placeholder="Fecha">
                <input  class="form__switch" type="checkbox" name="releido"><label for="checkbox">Releído</label>
                <button class="form__button" type="sumbit">Guardar</button>
            </form>
        </div>

        <div class="tableConteiner">
            <table class="tableConteiner__table">
                <thead class="tableConteiner__table">
                    <td>Libro</td>
                    <td>Autor</td>
                    <td>Páginas</td>
                    <td>Fecha</td>
                    <td>Opciones</td>
                </thead>
                <tbody>
                {% for libro in libros %} <!-- Obtiene los datos almacenados en la variable data (app.py) -->
                    <tr>
                        <td> {{ libro.1 }} </td>
                        <td> {{ libro.2 }} </td>
                        <td> {{ libro.3 }} </td>
                        <td> {{ libro.4 }} </td>
                        <td>
                            <a style="text-decoration:none"  class="botoBorrar" href="/delete/{{libro.0}}">Borrar</a>
                            <a style="text-decoration:none" class="botonEditar" href="/edit/{{libro.0}}">Editar</a>
                        </td>
                    </tr>
                {% endfor %}   
                </tbody>
            </table>    
        </div>

        <div class="tablaestadisticas">
            <table class="tableConteiner__table">
                <thead class="tableConteiner__table">
                    <td>Estadísticas</td>
                    <td></td>
                </thead>
                <tbody>
            
                {% for lib in libros_lei %} <!-- Obtiene los datos almacenados en la variable libros_lei (app.py) -->
                <tr>
                    <td>Libros leídos:</td>
                    <td> {{ lib.0 }} </td>
                </tr>
                {% endfor %}

                {% for pag in pags %} <!-- Obtiene los datos almacenados en la variable pags (app.py) -->
                <tr>
                    <td>Total de páginas leídas:</td>
                    <td> {{ pag.0 }} </td>
                </tr>
                {% endfor %}   
                 
                {% for n in niv %} <!-- Obtiene los datos almacenados en la variable niv (app.py) -->
                <tr>
                    <td>Nivel:</td>
                    <td> {{ n.0 }} </td>
                </tr>
                {% endfor %}

                </tbody>
            </table>    
        </div>
    </body>
</html>

{% endblock %}

Archivo "register.html" que se encarga de estructurar el register de la página:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lectorio</title>
    <link rel="stylesheet" href="{{url_for('static', filename='css/style_login.css')}}">
    <link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">
</head>
<body>
    <div class="body"></div>
		<div class="grad"></div>
		<div class="header">
			<div class="logo"><img src="../static/img/logo-completo.png" alt=""></div>
		</div>
		<br>
		<div class="register">
            <form action="/register" method="POST">
                <input type="text" name="nombre_apellido" placeholder="Nombre y Apellido">
                <div class="register__input">
                    <input name="usuario" type="text" placeholder="Usuario"><br> 
                </div>
                <input type="text" name="email" placeholder="E-mail">
                <div class="register__input">
                    <input name="contraseña" type="text" placeholder="Contraseña"><br>
                </div>


                <button type="sumbit">Ingresar</button>
            </form>
		</div>
    </div>
</body>
</html>


Archivo "layout.html" que se encarga de establecer una plantilla determinada para el restos de
los html:


<!--Carga de styles.css y normalize.css-->
<link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">

<!--Utf 8-->
<meta charset="UTF-8">

<!--Carga del favicon-->
<link rel="shortcut icon" href="/static/img/favicon.ico">

<title>Lectorio</title>

{% block content %}
{% endblock %}


No mostraré los archivos css porque si no se hace muy larga la entrada.

También hice una versión CLI de este proyecto (click aquí para ver la entrada)

Dankon por legu ĉi eniri. Ĝis la revido :3.

Comentarios

Publicar un comentario

Entradas populares de este blog

CÓMO INTERCALAR GIF EN VISUAL STUDIO MEDIANTE BOTONES (TUTORIAL)

-
Imagen
Hola gente bonita, en esta ocasión les enseñaré a como intercalar gif (o varios) en sus proyectos de vb en Visual Studio mediante botones. Este tutorial es la continuación del tutorial anterior. Que tengan un bonito día. uwu PASOS: Crear un nuevo "PictureBox" Importar otro GIF. Ingresar el codigo correspondiente (este depende del nombre de los PictureBox). Compilar el programa. ~~~~~~~~~~~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~~~~~~~~~CÓDIGO~~~~~~~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~~~~~~~~~~~~~~ Para el botón "OCULTAR": PictureBox1.Visible = False PictureBox2.Visible = True Para el botón "MOSTRAR": PictureBox1.Visible = True PictureBox2.Visible = False ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ~ ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~ Los programas y elementos a utilizar en este tutorial serán: ■   Visual Studio. Video Tutorial:
Leer más

CAMBIO DE PILA A NETBOOK (PRÁCTICA)

-
Imagen
   Hola g ente bonita, en esta ocasión les mostraré el proceso de cambio de pila de una netbook del gobierno, ya que la pila anterior del mismo PC estaba muerta. A continuación mostraré las fotos del proceso con sus respectivos comentarios: Lo primero que hice fue retirar la carcasa inferior de la netbook, para esto también fue necesario remover el teclado de la netbook: Una vez desarmada la netbook, medí el voltaje de la pila, como se verá esta estaba completamente muerta: Luego de esto simplemente reemplacé la pila y posteriormente volví a montar la netbook: Y con esto terminé el cambio de pila de la netbook. Dankon por legu ĉi eniri. Ĝis la revido :3
Leer más

INSTALACIÓN DE PAQUETE COREL DRAW (PRÁCTICA)

-
Imagen
Hola gente bonita, en esta ocasión les mostraré la instalación del paquete Corel Draw Graphics Suite 2020 en mi computadora.  Esta entrada del Blog no tiene como objetivo ser un tutorial , si no solo mostrar que realicé la instalación del software ya mencionado, para que así se me acrediten horas de práctica por ello. A continuación, proporcionaré capturas del proceso y sus comentarios correspondientes.  Comencé la instalación descomprimiendo el instalador (que ya tenía), y posteriormente ingresé al Setup: Una vez dentro del Setup copié el serial correspondiente: Luego le di click al botón instalación típica y comenzó la instalación del programa:  Luego de la instalación procedí a creackear el programa (cerré el asistente de instalación, copié y pegué el archivo "PASMULITY.dll" en la carpeta raíz del programa, y por último ejecuté el archivo "ShowEula"): Como se ve en esta captura, el paquete ya está activado: Y con eso termina la instalación y activación del paquet...
Leer más