Pantalla negra que muestra código css

Crear un login con php y mysql y dejar que los usuarios guarden información y la puedan ver solo ellos. Metodo PDO

PHP y MYSQL, login de usuarios básico en español.
Hacer tu propio sistema de login basico con mysql y PDO->query.
Les traigo el código completo de un sistema de login en php y mysql con coneccion PDO ya que mysql_connect ya no es recomendado por problemas de seguridad.

A tomar en cuenta:

      • Este sistema no trae un sistema de registros pero se puede hacer, para insertar registros puedes usar la consola o un administrador con phpmyadmin.

      • Utilizo PDO para las querys

      • El diseño no me interesa tanto ya que este pequeño sistema es básico.

      • Estoy utilizando Xampp como mi servidor local puedes entrar con 127.0.0.1 o localhost

      • El codigo esta completo para hacer lo básico de un registro y hacer que el usuario pueda iniciar sesion y pueda ver su información personal.

    Lo que hay que tener:

        • Una base de datos en este caso la base de datos se llamara «usu» y su única tabla se llamara «datos».

        • Necesitaremos 3 hojas en php.
              • 1ra: index.php

              • 2da: pagina2.php

              • 3ra: cerrar.php

          • Recuerda ingresar registros a tu base de datos y las contraseñas utilizan el metodo de encriptacion sha1 así que usaremos esta herramienta Sha1 Online ya que por ahora no esta el sistema de registros.

          • En nuestra tabla datos de nuestra base de datos usu agregaremos:

        Iniciemos con index.php

        				
        					<?php 
        $error = '';
        $pass = '';
        session_start();
        if (isset($_POST['submit'])) {
         $usuario = $_POST['usuario'];
         $password = $_POST['contrasena'];
         if (!empty($usuario)) {
          $usuario = trim($usuario);
          $usuario = htmlspecialchars($usuario);
          $usuario = stripcslashes($usuario);
         }
         else{
          $error .= 'Error, por favor verifica tus datos.' . '<br />';
         }
         if (!empty($password)) {
          $password = trim($password);
          $password = htmlspecialchars($password);
          $password = stripcslashes($password);
          $password = sha1($password);
         }
         else{
          $error .= 'Error, por favor verifica tus datos.' . '<br />';
         }
         if (!$error) {
          try {
           $con = new PDO('mysql:host=localhost;dbname=usu;', "root", "");
           $contra = $con->query("SELECT password FROM datos WHERE usuario = '$usuario' ");
           $name   = $con->query("SELECT nombre FROM datos WHERE usuario = '$usuario'");
           foreach ($name as $dnombre) {
            $nombre = $dnombre['nombre'];
           }
            foreach ($contra as $usu) {
            $pass .= $usu['password'];
           }
           if ($pass == $password) {
            $pregunta = 1;
            $_SESSION['nombre'] = $nombre;
           }
           else{
            $pregunta = 0;
           }
          } catch (PDOException $e) {
           echo "Error: " . $e->getMessage();
          }
         }
        }
         ?>
         <!DOCTYPE html>
         <html>
         <head>
          <title>Inciar Sesion</title>
         </head>
         <body>
         <br>
         <h2>Bienvenidos</h2>
         <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
          <input type="text" name="usuario" placeholder="Usuario:"><br />
          <input type="password" name="contrasena" placeholder="Contraseña:"><br />
          <input type="submit" name="submit" value="Iniciar"><br />
         </form>
         <br>
         <br>
         <?php 
         if (!empty($error)) {
          echo $error;
         }
         if (isset($pregunta)) {
          if ($pregunta === 1) {
           header('Location: pagina2.php');
          }
          elseif ($pregunta === 0) {
           echo "Usuario o contraseña inválidos.";
          }
         } 
         ?>
         </body>
         </html>
        				
        			

        Explicación

        Tenemos aquí el inicio con session_start(); este tiene que estar en todas las paginas donde queremos trabajar con sesiones.

        Utilizo dos variables iniciales que son: $error y $pass.

        Podemos ver que cuando el usuario ingresa una contraseña esta aparecera asi **** ya que utilizamos

        <input type=»password»> en ves de <input type=»text»> esto hace como ya lo dije que oculte nuestra contraseña y aparezca como ***** ademas de que cuando la contraseña es ingresada antes de preguntar si es igual o no a la ingresada en la base de datos la transformamos con sha1 para que luego de eso haga la pregunta a la base de datos si es igual a la contraseña dentro de la base de datos ya que en la base de datos la contraseña tiene que estar encriptada, esto se hace por seguridad.

        Veremos ademas: $name = $con->query(«SELECT nombre FROM datos WHERE usuario = ‘$usuario'»); esto con el fin de que mande a buscar el nombre del usuario ingresado para guardarlo en $_SESSION[‘nombre’] = $nombre; para mostrar el nombre en la siguiente hoja.

        Entonces al ingresar la contraseña y el usuario correctos nos dejara avanzar automáticamente a la siguiente pagina de lo contrario nos mandara un error.

        muestra el login y el registro, en HTML

        Pagina2.php

        				
        					<?php 
        session_start();
        $nombre = $_SESSION['nombre'];
        try {
         $con = new PDO('mysql:host=localhost;dbname=usu;', "root", "");
         $data = $con->query("SELECT * FROM datos WHERE nombre = '$nombre'");
         foreach ($data as $datap) {
          $estado = $datap['datos'];
          $mostrar_estados = $datap['estado'];
         }
        } catch (PDOException $e) {
           echo "Error: " . $e->getMessage();
        }
         ?>
         <!DOCTYPE html>
         <html lang="es">
         <head>
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
          <title><?php echo $nombre; ?></title>
          <style type="text/css">
           hr{
            border: 1px solid #000;
           }
          </style>
         </head>
         <body>
         <br>
         <?php 
         echo "Hola, " . $nombre . ' esperamos que tengas un buen dia. Tu nota de hoy es: ' . '<br />';
         echo '<p>' . $estado .'</p>';
          ?>
          <div class="col-md-12">
           <div class="col-md-10">
            <div class="col-md-9">
               <a href="cerrar.php"><button class="btn btn-success btn_lg">Cerrar Sesion</button></a>
            </div>
           </div>
          </div>
          <br /> 
          <hr>
          <?php 
          echo $mostrar_estados;
           ?>
          <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">
           <textarea name="publicacion" class="col-md-3 form-control"></textarea><br />
           <input type="submit" name="publicar" class="btn btn-primary">
          </form>
          <br />
         </body>
         </html>
         <?php 
        if (isset($_POST['publicar'])) {
         $dpublicar = $_POST['publicacion'];
         $dpublicar = trim($dpublicar);
         $dpublicar = htmlspecialchars($dpublicar);
         $dpublicar´= stripcslashes($dpublicar);
         $publicacion =  $mostrar_estados . $dpublicar. '<hr>';
         if (!empty($publicacion)) {
          try {
           $con = new PDO('mysql:host=localhost;dbname=usu;', "root", "");
           $add = $con->query("UPDATE datos SET estado = '$publicacion' WHERE nombre = '$nombre'");
           header('Location: pagina2.php');
          } catch (PDOException $e) {
           echo "Error: " . $e->getMessage();
          }
        
        
        
         }
        }
          ?>
        				
        			

        Explicación:

        En esta pagina dos veremos que mandamos a llamar la informacion de la sesión ademas de que como dije anteriormente la session_start(); debe de estar siempre agregada en todas las hojas donde se manejen las sesiones.

        Veremos $nombre = $_SESSION[‘nombre’]; esto llama al nombre guardado en $_SESSION[‘nombre’] esto para que le muestre un mensaje personalizado al usuario.

         
        inicio de session viendo en html

        Como vemos manda a traer su nombre de la base de datos, manda a traer sus datos y sus «estados» publicados y veremos un textarea en donde puede ingresar datos y mandarlos como un nuevo «estado».

        Puedes probar y veras que toda las nuevas «publicaciones se agregaran automáticamente».

        En este caso se esta usando un método que considero que no es recomendado ya que uso UPDATE para agregar un nuevo «estado» pero con el fin de hacerlo básico y que se pueda entender fácilmente lo hago así. (recuerda que esto es básico)

        Cerrar.php

        <?php 

        session_start();

        session_destroy();

        header(‘Location: index.php’);

         ?>

        Explicación:

        Iniciamos la sesión como siempre, y como queremos destruir la sesion ponemos session_destroy();

        y un header para redireccionar nuevamente a la pagina de inicio.

        Y listo ya tenemos el login basico.

        Share the Post:

        Related Posts