Un Login sencillo con PHP, MYSQL Y HTML.
Autor: Michel Muñoz.
Competencias : Desarrollo de software, ingeniería en tecnologías de la innovacion.
Palabras clave: php, mysql, phpmyadmin, html, login.
Contextualización y descripción de la actividad
Dentro del ramo taller de integración tengo que agregar otra entrada acerca de trabajos realizados y de como estos fueron abordados, de las dificultades y de lo que aprendí, a modo de repositorio. Si se quiere saber más acerca de del porque las entradas del blog visite la primera entrada.
El trabajo que escogí fue un control realizado el segundo semestre en el ramo "Desarrrollo de aplicaciones cliente-servidor". Luego de la semana de aprendizaje de PHP y MYSQL se nos fue asignado un control del ramo donde debíamos hacer un ejercicio que constaba de 2 paginas que serán explicadas más adelante.
--------------------------------------------------------------------------------------------------------
Universidad católica de Temuco.
Descripción del trabajo:
Competencias a desarrollar:
- Desarrollo de software.- Ciencia de la ingeniería.
- Programación en lenguajes de internet.
Habilidades blandas (genéricas):
- Gestión del conocimiento.
Otros:
Curso: Desarrollo de aplicaciones cliente-servidor.
Profesor: Víctor Valenzuela
Año: 2015.
Actividad
Ejercicio entregado:
"a. A través de un login en html de nombre "index.html" permita ingresar al usuario al
sistema. Si el usuario está registrado en la base de datos, debe ingresar al
documento en php "muro.php" el cual indicará en un div un mensaje del tipo
"hola test", donde test será el nombre de usuario correspondiente al login, sino,
también ingresará a "muro.php", pero creará un nuevo registro en la tabla
"usuario" con los datos ingresados (se entiende que, en este último caso, el div
tendrá un mensaje del tipo "hola nuevo usuario victor", donde victor sería el
nombre del nuevo usuario)(...)."
Según podemos ver se me pide que haga un login donde se pueda confirmar en la base de datos que exista un registro y que si coincide mande a muro.html donde diga "Hola usuario x" y que en caso de no estarlo también se cree un registro en la base de datos y luego mande a la página muro.html diciendo "Hola nuevo usuario x".
Esto es sólo la primera parte pero la que yo considero la más difícil, ya que la parte "b." que no aparece era solo mostrar una tabla e ingresar datos en ella (como tipo chat global). También el profe nos dio un script de creación de base de datos, yo usare PHPMYADMIN desde XAMPP para ejecutar este script y correrlo en mi base de datos local ( de prueba). Ahora se muestra el script que también será agregado como descarga. Copiar y pegar lo que está en otra tipografía si se quiere hacer sin descargar el script (también será explicado más adelante).
CREATE SCHEMA base ;
DROP TABLE IF EXISTS base.chat ;
CREATE TABLE IF NOT EXISTS base.chat (
id int(111) NOT NULL auto_increment,
nombre text NOT NULL,
mensaje longtext NOT NULL,
PRIMARY KEY (id)
) PACK_KEYS=0 AUTO_INCREMENT=0 ;
DROP TABLE IF EXISTS base.usuario ;
CREATE TABLE IF NOT EXISTS base.usuario (
id int(111) NOT NULL auto_increment,
nombre text NOT NULL,
pass text NOT NULL,
PRIMARY KEY (id)
) PACK_KEYS=0 AUTO_INCREMENT=0 ;
Paso 1) Para empezar instalaremos el xampp desde este enlace:Descargar XAMPP (totalmente gratuito)
XAMPP para quien no lo conce es un servidor independiente de plataforma, software libre, que consiste principalmente en el sistema de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script: PHP y Perl (fuente wikipedia).
Paso 2)Luego de ser instalado lo abrirán XAMPP Control Panel y harán click en START en Apache y START en MYSQL, después de que inicien y se pongan en verde (significa que están listos para correr) click en ADMIN en la linea de MYSQL. Luego se abrirá el navegador por defecto de su computador en la pagina "http://localhost/phpmyadmin/" que será su manager de base de datos.
Paso 3) Ingresar la pestaña SQL e ingresar el script anterior, luego se generará nuestra base de datos y vamos a abrila, si no se entiende mire la siguiente imágen.
Paso 4) Examine la tabla usuarios y entienda como funciona, cuales son los valores de las tablas y columnas (se necesita conocimiento basico acerca de funcionamiento SQL) Entre en la tabla usuarios y genere 1 o más registros con la herramienta insertar.
Paso 5) creación de la página HTML. Para empezar lo más sencillo, la vista, dejare un script luego para una rápida utilización. Hay que recalcar y entender que TODO SE PONE EN CARPETA C:/XAMPP/HTDOCS sino el PHP no correrá en conjunto con el HTML y nuestro MySQL. También use su editor de texto preferido, yo ocupe el Notepad++ que pueden encontrar aquí: Descargar Notepad++ (totalmente gratuito)
Creando el html hay que hacer un formulario que nos permita ingresar en ella, para hcer un formulario en html, para empezar el formulario usará metodo POST porque será más seguro y es el indicado en cuestiones con mayor seguridad. Primero creemos el formulario y luego el PHP.
Html de formulario de login de nuestra llamada página index.html:
"# es un comentario pero en sólo en esta página, no funciona como comentario en la sintaxis de html"
<form method='post' action='login.php'>#método post, que sera enviada a login.php que será nuestro motor de interacción con este foormulario
<table align='center' border='1'> $lo alineamos en centro y damos borde 1
<caption>Acceso al sistema</caption>
<tr>
<td colspan='2'>
<span> Usuario: </span><br/>
<input type='text' name='usuario'> #nuestro primer dato el nombre
</td> #estos datos los
</tr> comprobaremos en la base
<tr> de datos
<td colspan='2'>
<span> Clave: </span><br/>
<input type='password' name='clave'>#2do dato, la clave, donde el input type es password por medidas de seguridad.
</td>
</tr>
<tr>
<td><br/>
<input type='submit' value='Ingresar' name='boton'>
</td>
<td><br/>
<input type='reset' value='Limpiar'>#un enviar y limpiar
</td>
</tr>
</table>
</form>
se verá algo así:
Paso 6) Desarrollar el PHP para que trabaje bien con los datos datos, cabe recalcar que si existe un usuario te envía a muro.html sino existe también envía a muro.html y te crea un registro (ojo con las consultas sql), pero con diferentes mensajes dentro del muro. También hay que mencionar que si existe el nombre en la base de datos pero está incorrecta la contraseña no se puede generar un nuevo usuario. "$_SESSION['x']" es una variable global generada, osea si usamos "$_SESSION['x']" en PHP distintos por con el mismo "session_start();" y carpeta se ejecutara correctamente.
El código PHP:
<?php
$db=mysql_connect("localhost","root","");
if(!$db) echo "Error de conexión"; //conectar a la bd
mysql_select_db("base", $db);//seleccionar bd
session_start();
$usu=$_POST['usuario'];
$pwd=$_POST['clave'];
$_SESSION['usuario']=$usu;
$_SESSION['registrado']=false;
$querylog= mysql_query("select nombre,pass from usuario where nombre like '$usu' and pass like '$pwd'",$db);
$querypwd= mysql_query ("select pass from usuario where nombre like '$pwd'",$db);
$queryname=mysql_query("select nombre from usuario where nombre like '$usu'",$db);
$filasname=mysql_num_rows($queryname);
$filaspwd=mysql_num_rows($querypwd);
$totalfilas=mysql_num_rows($querylog);
if($totalfilas == 0){ //primer caso, no coincide ni nombre ni contraseña
if($filasname==0) //tampoco existe el nombre, por lo tanto
{
mysql_query("INSERT INTO usuario(id,nombre,pass) VALUES ('','$usu','$pwd')",$db); #ingresamos al usuario a la base de datos
header('location:./muro.php');
}
}
if($totalfilas == 0 ){
if($filasname != 0){
if($filaspwd==0){
echo "<h3> CONTRASEÑA INCORRECTA</h3>";
header('location:/error.html'); #error.html sera una pagina
} que mostrara un mensaje, que
} diga:<<ustedes se equivoco>> y
} que tenga un link para volver
if($totalfilas != 0){ //tercer caso, si existe el nombre y la contraseña
$_SESSION['registrado']=true;
header('location:./muro.php');
}
PASO 7) Ahora sólo nos queda personalizar nuestro muro.php, para simplificar trabajo escribiremos el html y php juntos, hay que separarlos por los comandos "<html></html>" para el HTML y "<?php ?> "para el PHP. Para saber si el usuario estaba conectado ocupé "session_start();" que genera una especie de cookie que sabe si el usuario está registrado o no, es la utilidad necesaria para saber que monasje mostrar y tambien "session_start();" aplicado en otro script PHP sigue corriendo el anterior ya que es una variable global.
<?php
$db=mysql_connect("localhost","root","");
if(!$db) echo "Error de conexión"; //conectar a la bd
mysql_select_db("base", $db);//seleccionar bd
session_start(); #uso de sesion
?>
<html>
<head>
<title>Muro</title>
</head>
<body style='background:#36465D'>
<span style='color:#FFFFFF'>
<?php #si no esta registrado hacemos echo "Bienvenido nuevo usuario.."
if($_SESSION['registrado']==false){
echo "<div><h2 align='center'>Hola nuevo usuario ".$_SESSION['usuario'].", bienvenido al muro.</h2></div>";
} #si ya esta regsitrado: echo"Bienvenido..."
if($_SESSION['registrado']==true){
echo "<div><h2 align='center'>Hola ".$_SESSION['usuario']." bienvenido al muro.</h2></div>";
}
?>
Ahora unas imagen del resultado:
Descarga (incluye un chat global basico): https://mega.nz/#!l1kQWC6b
<?php
$db=mysql_connect("localhost","root","");
if(!$db) echo "Error de conexión"; //conectar a la bd
mysql_select_db("base", $db);//seleccionar bd
session_start(); #uso de sesion
?>
<html>
<head>
<title>Muro</title>
</head>
<body style='background:#36465D'>
<span style='color:#FFFFFF'>
<?php #si no esta registrado hacemos echo "Bienvenido nuevo usuario.."
if($_SESSION['registrado']==false){
echo "<div><h2 align='center'>Hola nuevo usuario ".$_SESSION['usuario'].", bienvenido al muro.</h2></div>";
} #si ya esta regsitrado: echo"Bienvenido..."
if($_SESSION['registrado']==true){
echo "<div><h2 align='center'>Hola ".$_SESSION['usuario']." bienvenido al muro.</h2></div>";
}
?>
Ahora unas imagen del resultado:
Conclución y reflexión de la actividad
Finalmente tienen un login basico pero que funciona correctamente con PHP, MYSQL Y HTML, como ven es muy sencillo,pero para empezar a aprender en programación está súper bueno. Pude aprender de HTML, PHP Y MYSQL de manera práctica y con ello desarrollar las habilidades necesarias para hacer un login. Los códigospueden probarlos, dejare los códigos limpios de comentarios más abajo, gracias por leer y ojalá les sirva, cualquier duda escriban un comentario. SaludosDescarga (incluye un chat global basico): https://mega.nz/#!l1kQWC6b
No hay comentarios:
Publicar un comentario