Sistema de acceso o Login, usando HTML, PHP y MySQL.

A continuación,  crearemos un sistema de acceso o login usando solamente los lenguajes, html, php, el cual se usa del lado del servidor, y MySQL, como gestor de bases de datos. También instalaremos un servidor remoto, el que escogimos fue XAMPP, este permitirá emular el servicio de acceso a través de un login, como si se estuviera ingresando a alguna página en la web.

 

Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.

En el código html, el cual se encuentra en su respectiva pestaña, se puede observar que solo es un formulario sencillo, sin estilos aplicados mediante Css, ni ningún tipo de eventos los cuales se pueden aplicar usando javascript o algún framework que halla nacido a través de este. El formulario cuenta con sus respectivos campos de texto, que son para escribir el usuario y su contraseña, que a su vez cuentan con su tipo, en este caso es solo texto y tipo password, también con sus nombres, ya que se usaran para hacer un enlace mediante el documento php a continuación.

En el código php, el cual cuenta con sentencias sql, las cuales usamos para comunicar el servidor remoto instalado en nuestro equipo y la base de datos. En este ejemplo se encuentra como conectar la base de datos, como referenciar los campos de texto tanto del usuario como de la contraseña, y como hacer el llamado de una siguiente pagina la cual se quiera mostrar.

Cabe recordar, que esta forma de conectar la base de datos es la forma simple, la recomiendo solo para realizar pruebas y algún tipo de presentaciones, ya que a la hora de implementar un proyecto web de alguna empresa que necesite de algún servicio que se pueda brindar, se recomienda siempre usar las formas mas seguras de conectar y comunicar, las cuales veremos en otra publicación. También se debe  habilitar la comunicación entre el servidor remoto y la base de datos, habilitando dicha comunicación mediante el panel de control, usando un servidor Apache previamente instalado con el paquete que ofrece XAMPPP.

Puedes descargar el código fuente de este tutorial 

  1. <!–
  2. Codigo del ejemplo en html
  3. –>
  4. <html>
  5.     <head>
  6.         <title>Login</title>
  7.         <meta charset=“UTF-8”>
  8.         <meta name=“viewport” content=“width=device-width”>
  9.     </head>
  10.     <body>
  11.         <form action=“ingresar.php” method=“POST”>
  12.             <input type=“text” placeholder=“usuario” name=“txtusuario” />
  13.             <input type=“password” placeholder=“contraseña” name=“txtpassword” />
  14.             <input type=“submit” value=“submit” name=“entrar” />
  15.         </form>
  16.     </body>
  17. </html>

 

  1.      echo ‘Conexion realizada’;
  2.     }
  3. catch (PDOException $ex) {
  4.        echo $ex->getMessage();
  5.        exit;
  6.     }
  7. /* @var $_POST type */
  8. $nombre= $_POST[“txtusuario”];
  9. $pass= $_POST[“txtusuario”];
  10. /*La busqueda en la base de datos se realiza de este modo para evitar las inyecciones sql*/
  11.  $query=(“SELECT UsuarioLog,PassLog FROM `Login` “
  12.          . “WHERE `UsuarioLog`='”.mysql_real_escape_string($nombre).“‘ and “
  13.          . “`PassLog`='”.mysql_real_escape_string($pass).“‘”);
  14. $rs= mysql_query($query);
  15. $nr = mysql_num_rows($rs);
  16. if($nr == 1){
  17. echo ‘No ingreso’;
  18. }
  19. else if($nr == 0) {
  20.      header(“Location:segundo.html”);
  21. }
  22. ?>

[/tab]
[/tabgroup]