11/2/2016Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL Like 8 Tweet Un sistema seguro de inicio de sesión y registro es uno de los requerimientos principales al crear un sistema. Es por esto, que en esta oportunidad daremos una breve guía de como crear un sistema de inicio de sesión y registro, usando MySQL y PHP. No haremos uso de algún Framework (6 FrameWorks PHP para el desarrollo ágil), solamente usaremos PHP desde cero para lograrlo No es tan difícil de hacerlo, solo tienes que tener conocimientos básicos de programación, HTML, y algo de CSS (por si deseas modificar la apariencia). Esperamos que nuestro anterior articulo, sobre 10 consejos para ser un mejor programador en PHP, sea de gran utilidad. Lo Que Se Necesita Xampp (PHP versión 5.3 ó posterior y la versión de MySQL 4.1.3 ó posterior) Conocimientos básicos sobre PHP, HTML y CSS Algo de tiempo y paciencia http://blog.hostdime.com.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 1/14 hostdime. http://blog.com.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 2/14 .11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Resultado Final En las siguientes imágenes podrás ver el resultado final del sistema de inicio de sesión y registro al usar PHP y MySQL. `full_name` varchar(32) collate utf8_unicode_ci NOT NULL default ''. Puedes hacer esto de forma manual utilizando la interfaz gráfica de usuario de PhpMyAdmin ó usar SQL para insertar esta información. luego vendrá el PHP. Si deseas usar SQL.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Te gusta como se ve el formulario? Puedes descargar el código de formulario de u sistema de inicio de sesión y registro.3 ó superior y MySQL 4.1. `email` varchar(32) collate utf8_unicode_ci NOT NULL default ''. se usó Xampp como servidor. Configuración Del Servidor Puedes usar cualquier servicio de alojamiento web que tenga PHP y MySQL ya instalados (sólo asegúrese de tener la versión PHP 5. Para esta guia. `username` varchar(20) collate utf8_unicode_ci NOT NULL default ''. incluso la contraseña que se convertirá más tarde en md5 para asegurar la contraseña del usuario. es necesario que cree la base de datos y la tabla que almacenara todos los registros. UNIQUE KEY `username` (`username`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci. lo que tienes que hacer es implementar la estructura con HTML y diseño con CSS. te invitamos a conocer nuestros planes en servidores compartidos.hostdime. /* Create Table */ CREATE TABLE `usertbl` ( `id` int(11) NOT NULL auto_increment. use un AUTO_INCREMENT para asignar automáticamente un ID ó un número de usuarios que se registrarían más tarde. Paso 2 – El HTML http://blog. PRIMARY KEY (`id`). Observe que todos ellos son de tipo varchar. `password` varchar(32) collate utf8_unicode_ci NOT NULL default ''. las siguientes lineas te crearan tanto la base de datos como la tabla: /* Create Database */ CREATE DATABASE userlitdb. Ahora que la tabla se ha creado.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 3/14 . Te gustaría tener tu propio servidor online.com. servidores VPS y servidores Dedicados Paso 1 – MySQL En primer lugar. Además.3 ó superior). /* Redirect browser */ header("Location: intropage. } if($username == $dbusername && $password == $dbpassword) { $_SESSION['session_username']=$username. if($numrows!=0) { while($row=mysql_fetch_assoc($query)) { $dbusername=$row['username']. ?> <?php require_once("includes/connection. En primer lugar.$username. usaremos tres archivos PHP en cual se cuenta con las funciones y la estructura con el HTML. Sientete libre de copiar el siguiente código: <?php session_start()."'").php.$password.com. $numrows=mysql_num_rows($query). ?> <?php include("includes/header.php"). se crea el archivo login. } } ?> <div class="container mlogin"> <div id="login"> <h1>Logueo</h1> <form name="loginform" id="loginform" action="" method="POST"> <p> <label for="user_login">Nombre De Usuario<br /> <input type="text" name="username" id="username" class="input" value="" size="20" /></label> </p> Inicio Web Hosting Servidores Dedicados Contacto <p> <label for="user_pass">Contraseña<br /> http://blog. } } else { $message = "Nombre de usuario ó contraseña invalida!"."' AND password='".php"). } if(isset($_POST["login"])){ if(!empty($_POST['username']) && !empty($_POST['password'])) { $username=$_POST['username'].hostdime.php").11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Ya que el proceso lo haremos del lado del servidor (por usar solo PHP). $password=$_POST['password']. // for testing purposes header("Location: intropage.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 4/14 . } } else { $message = "Todos los campos son requeridos!".php"). ?> <?php if(isset($_SESSION["session_username"])){ // echo "Session is set". $dbpassword=$row['password']. $query =mysql_query("SELECT * FROM usertbl WHERE username='". if($result){ $message = "Cuenta Correctamente Creada".com."'"). } } else { $message = "Todos los campos no deben de estar vacios!". "</p>".hostdime.php" >Registrate Aquí</a>!</p> </form> </div> </div> <?php include("includes/footer. $email=$_POST['email'].php. $numrows=mysql_num_rows($query). username. ?> <?php if (!empty($message)) {echo "<p class=\"error\">" . } } else { $message = "El nombre de usuario ya existe! Por favor.php"). ?> <?php if(isset($_POST["register"])){ if(!empty($_POST['full_name']) && !empty($_POST['email']) && !empty($_POST['username']) && !empty($_POST['password'])) { $full_name=$_POST['full_name']. $message . $message .'$email'. email.php" method="post"> <p> <label for="user_login">Nombre Completo<br /> http://blog. $query=mysql_query("SELECT * FROM usertbl WHERE username='". Copie y pegue el siguiente código: <?php require_once("includes/connection. '$password')". } } ?> <?php if (!empty($message)) {echo "<p class=\"error\">" . $password=$_POST['password']. "</p>". } else { $message = "Error al ingresar datos de la informacion!".11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia <label for="user_pass">Contraseña<br /> <input type="password" name="password" id="password" class="input" value="" size="20" /></label> </p> <p class="submit"> <input type="submit" name="login" class="button" value="Entrar" /> </p> <p class="regtext">No estas registrado? <a href="register. if($numrows==0) { $sql="INSERT INTO usertbl (full_name. $username=$_POST['username'].php").} ?> A continuación. '$username'. ?> <?php include("includes/header.} ?> <div class="container mregister"> <div id="login"> <h1>Registrar</h1> <form name="registerform" id="registerform" action="register.php"). "Mensaje: ". intenta con otro!". creamos el archivo register.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 5/14 . "MESSAGE: ". $result=mysql_query($sql).password) VALUES('$full_name'.$username. ?> <?php } ?> Si la estructura se maneja con HTML. es por esto que se ve bastante llamativo el formulario *= GENERAL STYLES http://blog.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 6/14 . le daremos un pequeño retoque con CSS. si prefieres y quieres probar a tu modo. que seria del HTML sin el CSS en estos días? Paso 3 – El CSS Para darle un aspecto bien interesante al ejercicio. <span><?php echo $_SESSION['session_username']. Esto servirá como la página principal una vez que un usuario inicia sesión exitosamente.php"). ?> A continuación.php">Finalice</a> sesión aquí!</p> </div> <?php include("includes/footer. ?> <div id="welcome"> <h2>Bienvenido. if(!isset($_SESSION["session_username"])) { header("location:login. se crea la pagina de bienvenida en el archivo intropage. <?php session_start().com.php.hostdime.php"). PHP es tan flexible que nos permite usar HTML incrustado.php" >Entra Aquí!</a>!</p> </form> </div> </div> <?php include("includes/footer.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia <label for="user_login">Nombre Completo<br /> <input type="text" name="full_name" id="full_name" class="input" size="32" value="" /></label> </p> <p> <label for="user_pass">E‐mail<br /> <input type="email" name="email" id="email" class="input" value="" size="32" /></label> </p> <p> <label for="user_pass">Nombre De Usuario<br /> <input type="text" name="username" id="username" class="input" value="" size="20" /></label> </p> <p> <label for="user_pass">Contraseña<br /> <input type="password" name="password" id="password" class="input" value="" size="32" /></label> </p> <p class="submit"> <input type="submit" name="register" id="register" class="button" value="Registrar" /> </p> <p class="regtext">Ya tienes una cuenta? <a href="login. } else { ?> <?php include("includes/header.?>! </span></h2> <p><a href="logout. puedes separar la estructura del HTML del código PHP Pero bueno. ¿por que usar PHP con HTML? Simple.php").php"). 13).com. overflow: hidden. box‐shadow: 0 1px 3px rgba(0.0.0.0. background: #fff.mlogin { margin: 170px auto 0.13).container h1 { color: #777. padding: 3px.. ‐webkit‐box‐shadow: 0 1px 3px rgba(0. background: #f58220. border: 1px solid #777. margin: 160px auto 0. } a { color: #f58220.0. ‐moz‐box‐shadow: 0 1px 3px rgba(0.. } /*= CONTAINERS ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/ .regtext { font‐size: 13px. margin‐top: 26px. padding: 30px.0. color: #fff.container { padding: 25px 16px 25px 10px. width: 350px. sans‐serif. height: auto.0. color: #777. font‐family: 'Open Sans'. } . } .. } .. color: #777. box‐shadow: 0 1px 3px rgba(0. } .0.mregister { margin: 80px auto 0. background: #fff.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 7/14 .0.hostdime. } span { font‐weight: 300.13). color: #f58220. } .error { margin: 40px auto 0..0. font‐weight: 400. font‐weight: 400.0.13). ‐webkit‐box‐shadow: 0 1px 3px rgba(0. text‐align: center.13). http://blog.. text‐align: center. } #welcome { width: 500px.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia *= GENERAL STYLES ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/ body { background: #efefef.0.13). ‐moz‐box‐shadow: 0 1px 3px rgba(0.0. width: 650px. box‐shadow: 0 0 3px 0 rgba(245. ‐moz‐box‐shadow: 0 0 3px 0 rgba(245. } .container form .container input[type=e] { background: #fbfbfb. background: ‐moz‐linear‐gradient(top. } /*= FOOTER ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/ footer { color: #777. from(#faa51a). #faa51a.container input[type=text].container input[type=password].32.32.button:hover{ background: #f47c20. } . padding‐bottom: 15px. left top. } . endColorstr='#f06015').0. line‐height: 1. http://blog.gradient(startColorstr='#faa51a'. border‐radius:4px. left bottom. #f88e11. background: ‐webkit‐gradient(linear.75). filter: progid:DXImageTransform. filter: progid:DXImageTransform.input.input:focus { border: 1px solid #f58220. color: #fff. margin: auto. to(#f06015)).Microsoft. #f47a20).hostdime. border: 1px dashed #777. to(#f47a20)).. padding: 3px. background: #f78d1d.container label { color: #777.0. } #login { width: 320px. left top. ‐moz‐border‐radius:4px. ‐webkit‐border‐radius:4px.button{ border: solid 1px #da7c0c.75).32.. margin: 0 6px 5px 0. cursor: pointer. background: ‐webkit‐gradient(linear. left bottom.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 8/14 . float: right. background: ‐moz‐linear‐gradient(top. margin‐top: 13px.container form . ‐webkit‐box‐shadow: 0 0 3px 0 rgba(245. } /*= BUTTONS ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/ .0.. #f06015).75). endColorstr='#f47a20'). width: 100%. from(#f88e11). font‐weight: 300.130. padding: 7px 12px. outline: none. } .com.Microsoft.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia text‐align: center.gradient(startColorstr='#f88e11'. border: 1px solid #d9d9d9. font‐size: 14px.130. font‐size: 24px.130. esto es un buen comienzo para aquellos principiantes.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia color: #777.hostdime. esto lo encontramos en el archivo connection. font‐size: 12px.com. donde elegir. Si tiene alguna idea para mejorar los códigos. y miras el código fuente dentro del navegador. por favor. deja un buen comentario con el código y explicando el por que desarrollador desarrolladores desarrollo html MySQL php Post Relacionados Cómo Mostrar Los Datos En La Consola Del Usar TogetherJS Para Implementar Entorno Colaborativo En Tiempo Real En Su Sitio Web ¿Qué Tipo De Cámara Fotográfica Comprar? Navegador Web Anteriormente habíamos No se puede negar que la colaboración en Cuando se trata de comprar una cámara hablado sobre las… tiempo real se ha convertido en una… fotográfica. La sesión de maneja con session_destroy. haremos uso de esta función. Aunque hay muchas cosas a considerar cuando se trata de seguridad. margin‐top: 20px.… Este post tiene 24 comentarios josue 3 June. en realidad tienes bastante de La Consola Del Navegador Web. no se vera el código PHP Finalmente Hoy has aprendido a crear un sencillo sistema de inicio de sesión utilizando PHP y MySQL. cuando el usuario desea finalizar la sesión. } Puntos A Tener En Cuenta Se uso la re utilización de código haciendo uso del include. 2015 at 8:13 hla un saludo me gusto el tutorial esta buenisimo desearia saber como puedo hacer para redireccionar a cada http://blog. Eres libre de modificar los anteriores códigos para tu proyecto. esto lo encontramos bastante en el header y el footer. Si eres curioso. text‐align: center.php. Variables constantes para la conexión a la base de datos.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 9/14 . php? jesus 6 May.com. 2015 at 10:43 Hola tengo problemas con header(“location:intropage. 2015 at 18:12 lo adapté y funcionó perfectamente Gracias por todo… German 30 April.hostdime.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia cliente a una pagina distinta gracias josue 2 June.php”); luego de hacer login no se redirecciona toca actualizar la pagina para que ver si esta conectado. una consulta y si quiero redireccionar a cada usuario a una pagina diferente Harold 1 June. 2015 at 12:45 me marca este error cuando pongo el login http://blog. 2015 at 14:37 y si este es un formulario en la web.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 10/14 . 2015 at 23:25 un saludo el tutorial es exelente es mi primera base de datos. 2015 at 0:39 amigo me gustaria saber con que nombre se guardaria el css Hugo 12 May. como le hago para ingresar por la puerta trasera? miguel. 2015 at 12:42 Una duda: ¿Donde puedo conseguir el conection.argentina 3 May. gracias anonymous 27 May. 2015 at 11:13 Muy buena guía.com.hostdime. 2015 at 8:52 como hago que para la parte que dice bienvenido (por ejemplo) tambien muestre otro dato como full_name Bienvenido.php que lo incluyes en los archivos y donde se define la base de datos y las demas constantes.php:5) in C:\xamppwin321.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Warning: Cannot modify header information – headers already sent by (output started at C:\xamppwin32 1.php donde implementaste ese archivo en el post? Gustavo 28 April. 2015 at 17:10 Buenas tardes. sigo este tutorial pero no encuentro donde realices el connection.7. me ayudo bastante solo mencionar sobre md5 que actualmente ya es bastante vulnerable y es aconsejable otro algoritmo(y si asiendo a lado tantas cosas de seguridad que faltarían por implementar y mencionar). tampoco la realización del header.3\xampp\htdocs\phpform\login.php. pero no le quita lo bueno a esto muchas gracias por la ayuda Alvaro Angulo 28 April.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 11/14 .php y del footer. 2015 at 11:21 En el post hay un archivo que dice header. 2015 at 10:07 Esta muy bueno tu codigo pero busco la coneccion con la bd y no la consigo y quiero saber de que manera hicistes la conecion http://blog.php on line 12 Ricardo 29 April. ! Finalice sesión aquí! jorge 27 April.7.3\xampp\htdocs\phpform\login. es que soy principiante y pues quisiera saber que es lo que se realiza en esos archivos? Mil gracias! Solis 24 April. estuve creando la base de datos por la parte gráfica de phpmyadmin y la parte auto_increment no la encuentro para configurarla.com. Mi consulta se debe a que no he visto que se haya aplicado la seguridad md5 que menciona al principio ¿Cómo se haría?.hostdime. es lo único que le falta al post. o si lo tiene por favor serias tan amable de mostrarmelo…!! gracias por todo amigo daniel 2 March. francisco 20 March. Un cordial saludo. 2015 at 8:04 MUCHAS GRACIAS ! ME SIRVIO PEROOOO OJO CON EL HEADER LOCATION Androidfastblog@gmail.. Agradezco su tiempo y empeño. Anonymous 5 April. soy novato agradezco su colaboración.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 12/14 .. me ha servido. 2015 at 13:38 Hola buenas estoy buscando quien tenga la gentileza para ayudarme a poner un longin en mi blog en wordpress. sinceramente lo que ando buscando es que al momento que haces el logueo y no este registrado el usuario. en ese momento te de la opción de registrar. 2015 at 11:22 Buen día Tengo una pregunta.com no soy premium solo puedo colocar widget y html pudieran ayudarme es que al menos en esto no poseo mucho conocimiento quien se Anima Derek http://blog.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Crist 7 April..com 2 January. 2015 at 1:41 esta muy bien tu post…. 2015 at 18:11 Excelente muchas gracias¡¡ Andrés 3 April. 2015 at 14:44 Felicidades por el post. Daniel armadillo 6 November. saludos Leave a Reply Your email address will not be published. después de las imágenes encuentras el enlace de descarga. se llama al archivo header. 2014 at 21:00 Me gusta es excelente. 2014 at 8:46 Como puedes ver en la linea del HTML.com. 2014 at 12:03 Excelente Guía.php"); ?>.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 13/14 . gracias por compartirlo ! Julian Gonzales 7 November. una vez se llame este archivo. 2014 at 17:40 Gracias por el excelente aporte a programar web c: Anonymous 5 November. 2014 at 19:13 como se asocia el css a los demas archivos? Anonymous 29 October.11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia 11 December. no es necesario añadir el CSS en cada archivo.hostdime. en él esta la linea que invoca el archivo CSS. Name Email Website CAPTCHA Code* Comment http://blog. exactamente en la linea de < ?php include("includes/header.php. por lo tanto. 11/2/2016 Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL | Blog Hostdime Colombia Post Comment ← Cómo Respaldar Y Migrar Archivos De Configuración De Linux 3 Métodos Psicologicos para Mejorar Entorno De Trabajo → HostDime Colombia Blog 2015 http://blog.com.co/guiaparacrearunsistemadeiniciodesesionyregistrousandophpymysql/ 14/14 .hostdime.
Report "Guia Para Crear Un Sistema de Inicio de Sesión Y Registro Usando PHP Y MySQL _ Blog Hostdime Colombia"