Login PHP MySQL Desde Cero (Parte 1)

Parte 1 Login php mysql desde cero

Que tal mi gente de cómo crear mi web, que bueno que estés leyendo este pequeño mini-tutorial donde vamos a  empezar a explicar paso a paso como realizar un sistema de login php mysql desde cero, si has visto nuestro sistema de login con php y mysql y entendiste poco o te sirvió de algo leerlo estamos seguro que este te gustará y te será de mucha utilizada y de aprendizaje ya que lo crearemos desde cero paso a paso explicando cada trozo de código.

Sin mucho blablablá vamos a empezar a crear nuestra primera plantilla que será el archivo principal llamado index.php este archivo será el que tendrá el formulario donde pondremos nuestros datos como correo y contraseña, este archivo lo vamos a maquetar usando bootstrap para darle un aspecto mucho más elegante y profesional, luego de tener este archivo realizado entonces ya podemos seguir con el código php que se encargar de que nuestro login php mysql realice el funcionamiento esperado.

Preparando los archivos necesarios para nuestro login php mysql desde cero.

Como vamos a trabajar con boostrap lo primero que tenemos que hacer es dirigirnos al sitio web oficial y descargarnos la librería y colocarla en nuestro servidor local en mi caso yo uso xampp pero de igual manera puede funcionar en cualquier otro eso es de tu elección Descargar Bootstrap Aquí.

Otro archivo que te voy a pedir que descargues es la libreria de jquery ya que podremos llegar a utilizarla en nuestro proyecto para ello puedes ir al sitio oficil de Jquery y descargar el archivo clic aqui.

Si ya descargaste la libreria bootstrap y la ubicaste en el proyecto de trabajo dentro del servidor local o de tu hosting entonces podemos empezar a ver la estructura básica de este Framework en nuestro primer archivo llamado index.php.

Index.php

<!DOCTYPE html>
<html lang="ES">
 <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Login PHP MySQL Desde Cero Paso a Paso (Parte 1)</title>
 </head>
 <body>
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/jquery.js"></script>
 </body>
</html>

Si te fijas tenemos una estructura muy básica de un documento HTML, en este caso ya tenemos configurado nuestro documento para que pueda aplicar estilos de bootstrap y jquer dandole un aspecto profesional a nuestro proyecto, en esta parte no abundare mucho ya que no es la idea del mini-tutorial explicar como trabajar con boostrap.

Lo importante en este trozo de código es que coloques esos dos archivos CSS y los dos archivos JavaScript que por buenas practicas siempre se colocan al final del codigo HTML para que nuestra web cargue mucho mas rápido.

Ahora vamos a desarrollar un pequeño formulario con un titulo que diga Identificate como usuario, vamos a pedir el correo del usuario y una contraseña, también vamos a agregar un boton que diga Iniciar Sesión y que al pinchar en el mismo empieza el sistema a procesar los datos y a validar si el usuario existe en nuestra base de datos. El código de este formulario es el siguiente.

Formulario de login.

<!DOCTYPE html>
<html lang="ES">
 <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Login PHP MySQL Desde Cero Paso a Paso (Parte 1)</title>
 </head>

 <body>
    	<div class="container col-sm-6 col-md-offset-3">
    		<div class="panel panel-primary text-center ">
        		<div class="panel-heading ">
            	<h4>Sistema de Login PHP MySQL </h4>
            	</div>
            	<div class="panel-body">
                	<div class="panel col-sm-10 col-md-offset-1">
                       <div class="panel panel-success">
                        <div class="panel panel-heading">
                        	<b>Identificate como usuario</b>                        	
                        </div>
                        <div class="panel panel-body">
                        	<form class="" action="config.php" method="post">
                            <div class="col-sm-12">
                            <table>
                                    <tr>                        	
                                   <td class="col-sm-4"> E-Mail: </td>
                                   <td class="col-sm-8"><input type="text" name="clave"  /></td>
                                   </tr>
                                   <tr>
                                   <td class="col-sm-4"> Password:</td>
                                   <td class="col-sm-8"><input type="text" name="clave"  /></td>
                                   </tr>    
                             </table>           
                           </div>
                           <div class="col-sm-6 col-md-offset-4" style="padding:10px">
                             <button type="button" class="btn btn-primary">Iniciar Sesion</button>
                             </div>
                            </form>                            
                        </div>                        
                       </div>
                    </div>            
            	</div>        
             </div>  
        </div>  


	 <script src="js/bootstrap.min.js"></script> 
     <script src="js/jquery.js"></script>
 </body>
</html>

Pagina principal de nuestro login

Si has copiado todo bien entonces nuestro login de usuarios tendrás la siguiente apariencia.

Login php mysql paso a paso

Login php mysql paso a paso

También te ofrecemos la posibilidad de ir viendo este formulario online a traves de nuestra web para ello debes de acceder al siguiente link.

Ver el formulario online

Tambien te invitamos a visitar la siguiente parte de este mini-tutorial donde crearemos el area a donde llegara el usuario una vez este validado por el sistema.

Login con php y mysql parte 2

Deja un comentario

Tu dirección de correo electrónico no será publicada.