Universidad Politécnica de Chiapas

Introducción
El presente proyecto consiste en la elaboración de una página web, la cual cuenta
con una conexión a una base de datos, en la cual se registran los usuarios y
contraseñas, para acceder a la misma. La pagina web cuenta con un sistema
login, el cual restringe el acceso a los usuarios, permitiendo la entrada a la página
principal, únicamente cuando el usuario y contraseña son correctas, de lo contrario
el acceso es denegada, al acceder con un usuario registrado, te direccionara a la
parte de bienvenida e información sobre la empresa.
Para la elaboración de este proyecto se hizo uso de Xampp, visual studio y una
plantilla editable.
Análisis

Uno de los objetivos del proyecto fue establecer un sistema de login, para que
nuestra página web estuviera delimitada en cuanto el acceso de los usuarios, es
decir cuando un usuario tratara de ingresar con usuario y contraseña, estos datos
se logean y solo si ambos son correctos se permite el acceso a la página web.
Para que esto fuera posible, fue necesario hacer una validación de datos, lo cual
consiste en los siguientes pasos:
1.- Nos dirigimos a la carpeta en donde está alojado XAMPP, el cual es nuestro
servidor.

2.- Una vez que nos encontramos en dicha carpeta, accedemos y buscamos la
subcarpeta llamada “htdocs” y en esta carpeta, creamos una nueva con cualquier
nombre, en este caso se llama “TELESALUD” y la colocamos en el espacio de
trabajo de nuestro editor de código (visual studio code).
3.- Una vez cargada la carpeta, dentro de visual studio, creamos una serie de
archivos que nos serán útiles posteriormente, los cuales se enuncian a
continuación y se ilustran en la Fig. 3 (recuadro azul carpeta TELESALUD y
recuadro rojo archivos creados):
● Archivo “index.html”
● Archivo “db.php” el cual nos servirá para crear la base de datos
● Archivo “validar.php”, el cual tiene como función validar los datos que
estamos ingresados
● Archivo “home.html” una vez validado nuestros datos, se redireccionará a
un archivo o página principal.

4.- Posteriormente nos situamos sobre el archivo “db.php”, en este archivo se

realizará la conexión a la base de datos, se crea una variable llamada conexión y
con el comando mysqli_connect, se conecta a la base de datos. Dentro del
paréntesis van datos como la ubicación, usuario, contraseña y el nombre de la
base de datos.
El localhost es la ubicación, el usuario es el root y en este caso XAMPP no tiene
contraseña, por esta razón se deja vacío y por último el nombre de la base de
datos, tal y como se ve en la Fig.3
5.- creación de la base de datos:
Primero accedemos desde el navegador, a nuestro localhost, nos dirigimos al
apartado de phpmyAdmin y damos clic en nueva, y asignamos el nombre de
nuestra base de datos en este caso llamada “telesalud”

Posteriormente, dentro de la base de datos telesalud, creamos una tabla en la cual

se almacenarán los usuarios y las contraseñas, el nombre de la tabla es
“proyecto”. Registramos los usuarios y las contraseñas para cada usuario. En la
Fig. 5, en el recuadro rojo podemos observar, la base de datos “telesalud” y la
tabla “proyecto”.

Algunas de las especificaciones consideradas en la creación de la base de datos

son las siguientes.
 ● El ID es autoincreméntable y nuestra llave primaria.
● El usuario y password son datos de tipo varchar.
● La longitud de los datos es de 50 caracteres.
5.- Posteriormente vamos a nuestro archivo index.html y vamos a empezar a
generar nuestro código html, con el comando html:5 se genera un segmento de
código predeterminado, editamos el nombre y el cuerpo del código.
En este apartado creamos el formulario, llamamos un from action y empezamos a
crear nuestras filas, H1 es una etiqueta para nombre del sistema, en la etiqueta p
se vamos a empezar a poner las filas con campos, vamos a poner un input que es
como su nombre lo dice entrada de texto porque allí vamos a poner al usuario,
hacemos uso de la variable “name” la cual es importante porque name se encarga
de hacer la comparación de los datos, si son verídicos de acuerdo con la base de
datos.

Iniciamos el método post qué es un método de envío, todos los datos enviados por
teclado van a estar siendo enviados al archivo que hace la validación y esto
permitirá la comparación, es como por capa se pone una capa que se va a llamar
usuario y allí irán los datos y también una capa que se llama la contraseña estas
capas van a ser comparadas.
En el archivo validar.php vamos a abrir nuestra secuencia php vamos a incluir con
el comando include db.php, que es la base de datos, en este archivo tiene que
estar la base de datos para que se pueda mostrar, vamos a poner una variable
“usuario” la cual es una variable de recibimiento y hacemos lo mismo para la
variable password , vamos a crear una variable que se va a llamar consulta y esta
consulta que va a ser igual a qué select from de la base de datos.
Posteriormente se realiza un ciclo if donde se establecen las condiciones y
mensajes necesarios, para que se permita el acceso a los usuarios, siempre y
cuando el usuario y la contraseña sean correctas, cuando uno de estos datos sea
incorrecto el acceso será denegado.
A continuación se muestran las imágenes en donde ya se encuentra configurado
nuestro login, en la Fig. 10 se puede observar que el acceso es denegado cuando
alguno de los datos es incorrecto.

Una vez que se configuró el login, procedimos a descargar una plantilla de página
web, para editarla. A continuación, se muestra el enlace de descarga de las
plantillas.
https://plantillashtmlgratis.com/
Una vez descargada la plantilla se edita en visual studio code, colocando la
información e imágenes necesarias, desde el código. A continuación, se muestran
imágenes de las modificaciones en código realizadas, recordando que estos
cambios se realizaron en home, que es la página que está redireccionada cuando
se ingresa al sistema.
A continuación se muestra el resultado final de nuestra página web.
Conclusión
Mediante este proyecto pudimos cimentar los conocimientos adquiridos en la parte
teórica a la parte práctica, combinando los conocimientos de materias como base
de datos y programación aterrizadas a la telesalud.
Alcanzamos el objetivo del proyecto el cual era implementar un sistema login para
acceder a la página web e hicimos interconexiones a la base de datos donde
almacenamos la información de los usuarios, así como su contraseña, algo que en
particular fue nuevo para nuestro equipo.
Sin duda el proyecto fue de provecho ya que logramos entender la importancia de
la telesalud y las múltiples aplicaciones que tiene.
Bibliografías:
Como Hacer Sistema De Login Con PHP , MYSQL Y CSS (Validación De Datos) XAMPP

(2022) #PHP #LOGIN. (2022, 8 enero). YouTube. Recuperado 28 de marzo de

2022, de https://www.youtube.com/watch?v=NMRjV01ry1A

PHP y MySQLi Inicio de sesión seguro a base de datos MySQL. (2022, 25 marzo).

Tecnociencia Perú. Recuperado 30 de marzo de 2022, de

 https://www.tecnocienciaperu.com/blog/php-y-mysqli-inicio-de-sesion-seguro-a-bas

e-de-datos-mysql/

Plantillas HTML Gratuita para Descargar: Arizona. (2020, 19 diciembre). Plantillas

HTML Gratuitas. Recuperado 28 de marzo de 2022, de

https://plantillashtmlgratis.com/