Sistema de Login con PHP (Parte 1)

Buenos días a todos.

Desde hoy iniciamos nuestro ejemplo practico del sistema de Login el cual contara con 2 formularios, el primero será el sitio donde nos daremos de alta en la aplicación, es decir, donde nos registraremos para ser usuarios validos del sistema y el otro pues nuestra cotidiana pantalla de usuario y contraseña.

Vamos a usar encriptación MD5 para nuestra contraseña logrando que nuestra tabla de usuarios este un poco mas protegida contra ataques a nuestra Base de Datos. Así que espero que les guste.


Para empezar iremos a MySql a crear la tabla que llamare usuarios con la siguiente informacion:

Nuestra llave primaria será el campo usuario el cual no permite valores duplicados, por lo cual realizaremos una validación para eso.

Paso siguiente creamos nuestro archivo index.php inicialmente de esta forma:

Lo que visualmente quedaría de esta forma

Si vemos en el index.php tenemos un elemento <a> que nos lleva a nuestro otro archivo llamado registro.php que como su nombre lo indica nos permite registrarnos en el sitio. Para lo que creamos nuestro formulario de la siguiente forma:

Logrando que se vea de esta forma:

Lo que vamos a hacer ahora es crear una carpeta llamada js y dentro vamos a ubicar el archivo md5.js el cual pueden descargar desde aqui, y luego agregamos la referencia dentro dentro de nuestro HTML de registro.php, y de paso el script usuarios.js que contendrá las funciones para la creacion del usuario.

Procedemos a crear usuarios.js como lo hemos venido haciendo desde los post anteriores:

1. Agregamos la función nuevoAjax()

2. Debajo de esto agregamos la función crear_usuario() voy a ir agregandola por parte por que no cabe en una sola imagen, esta es la parte de la validacion de los campos, que los datos ingresados no sean vacios, que las claves coincidan, etc y todo lo que se les ocurra

Agregamos esto debajo de la ultima validación, asignamos los valores a variables y encriptamos la clave mediante una funcion que trae MD5 que es calcMD5 cuyo parametro es campo con id pass

y por ultimo

Dejemos hasta aquí, para que vayan procesando y analizando todo el código. En el siguiente Post arrancamos con el archivo interno que recoge las variables que estamos pasando vía GET y las procesamos para realizar la inserción. Hasta Pronto.