Ahora comenzare con la pantalla Log In y Registro de Usuarios
Primero que es un Log In??
El Log In es el momento de autentificación al ingresar a un servicio o sistema.
En el momento que se inicia el Log In, el usuario entra en una sesión, empleando usualmente un nombre de usuario y contraseña.
Bueno dare una breve explicacion de toda las pantallas
Ya que sabemos que es un Log In Comenzemos
Primero que todo tenemos que crear una base en MYSQL(Solo tiene que hacer un copy paste) y sino sabes aqui les dejo el link donde explica esto perfectamente LiLiXX
user
CREATE TABLE IF NOT EXISTS `user` (
`id` int(4) NOT NULL AUTO_INCREMENT,
`username` varchar(32) NOT NULL,
`password` varchar(32) CHARACTER SET latin1 COLLATE latin1_spanish_ci NOT NULL,
`level` int(4) DEFAULT ’1′,
PRIMARY KEY (`id`),
KEY `level` (`level`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=39 ;
Porque uso o que es id, username, password y level??
id: Para identificar un usuario con un valor numérico la base de datos de MYSQL.
username: Nombre de Usuario(puede usar cualquier nombre)
Por ejemplo: el mio es Edgar Rafael y eso es mi nombre de usuario
Password: Es la Contraseña o clave lo caul debe ser unico para cada usuario para poder acceder al sistema
level: Es el nivel de usuario que vamos a usar para manejar o hacer cambios en el sistema.
Ahora aqui vamos con un poco de codigos.
database.php
<?
$con = mysql_connect(“localhost”,”root”,”");
if (!$con)
{
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db(‘user’);
?>
index.php
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=”iso-UTF-8″><!–Puse esto para poder usar caracteres especiales como la ñ–>
<head>
<title>ALSW LogIn</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”><!–Esto es el estilo de la pagina lo cual ya van a ver–>
<body ><center><b><H1><font face=”BranchingMouse Becker”><font color=Purple”">ALSW</font><font color=”blue”> Login</font></font></H1></b></center><!–BranchingMouse Beckers un font muy util para hacer la el tipo de letra mas creativo o divertido–>
<?php
session_start();
require_once ‘database.php’;
if (isset($_SESSION['user'])){//Aqui es donde comienza toda la magia. Aqui es cuando un usuario se ingresa y por medio del “level” en la base de datos vaz a poder ver un mensaje que declare si sos o no el adminstrador.
echo “No sos Bienvenidos Usuario Desconocido “.$_SESSION['user'];
?>
<form name=”Salir” method=”post” action=”logout.php”>
<input type=”submit” name=”Salir” id=”Salir” value=”Salir”>
<br><?php }
elseif(isset($_SESSION['admin'])){
echo”<top>Bienvenidos</top> “.$_SESSION['admin'];
echo”<left><br><br> Usted esta Registrado como Administrador</left>”;
?>
<form name=”Salir” method=”post” action=”logout.php”>
<br>
<input type=”submit” name=”Salir” id=”Salir” value=”Salir”>
</form>
<form name=”Pantalla Principal” method=”post” action=”principal.php”>
<input type=”submit” name=”enter” id=”enter” value=”Pantalla Principal”>
</form>
<br>
<br>
<form name=”inventario” method=”post” action=”bus_producto.php”>
<input type=”submit” name=”enter” id=”enter” value=”inventario”>
</form><?php
}else
{
?>
<form name=”login” method=”post” action=”login.php”>
<div id=”wrapper”>
<div id=”menu”><div id=”userbar”>
<a href=”Registrar.php”>Registrar</a> </div></div>
<div id=”content”><h3><font color=”purple”>Acceder al Sistema ALSW</h3><br /><form method=”post” action=”"></font><dl>
<dt><label>Usuario:</label></dt>
<dd><input name=”user” type=”text” id=”user” ></dd>
</dl><dl>
<dt><label>Contraseña:</label></dt>
<dd><input name=”pass” type=”password” id=”pass”></dd>
</dl><br>
<input type=”submit” value=”Entrar” ></form> </div><!– content –>
</div><!– wrapper –><div id=”footer”><font face=”Bleeding Cowboys”>Edgar Rafael Chicas Villalta</div></font><!–Bleeding Cowboys es otro font muy util para hacer la el tipo de letra –>
</body>
</html>
<?php
}
?>
Resultado:
veri_reg.php
<?php
if(
isset( $_POST['user'] ) &&
isset( $_POST['pass'] )
)
{
if( strlen( $_POST['user'] ) < 4 )
{
echo “Nombre del Usuario debe de tener mas de 4 caracters.”;
}
elseif( strlen( $_POST['pass'] ) < 4 )
{
echo “Contraseña debe de tener mas de 4 caracters.”;
}
elseif( $_POST['pass'] == $_POST['user'] )
{
echo”Nombre de Usuario y Contraseña no puede ser lo mismo.”;
}if($_POST['pass'] != $_POST['pass2'])
{
echo ‘Las Contraseñas no coinciden.’;
}else
{
include( ‘database.php’ );$username = mysql_real_escape_string( $_POST['user'] );
$password = md5( $_POST['pass'] );$sqlCheckForDuplicate = “SELECT username FROM user WHERE username = ‘”. $username .”‘”;
if( mysql_num_rows( mysql_query( $sqlCheckForDuplicate ) ) == 0 )
{
$sqlRegUser = “INSERT INTO
user( username, password )
VALUES(
‘”. $username .”‘,
‘”. $password .”‘
)”;if( !mysql_query( $sqlRegUser ) )
{
echo “Usted no se pudo registrar debido a un error inesperado.”;
}
else
{
echo “Que está registrado y se puede iniciar sesión ahora”;
$formUsername = $username;header (‘location: index.php’);
}
}
else
{
echo “El nombre de usuario que ha elegido ya está siendo utilizado por otro usuario. Por favor, probar con la otra.”;
$formUsername = $username;
}
}
}
else
{
echo “Usted no puede registrarse debido a la falta de datos.”;
}
?>
Registrar.php
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=”iso-UTF-8″>
<title>Login /ALSW </title>
</head>
<center><H1><font face=”Arial”>Registración de Usuarios</H1></center></font>
<body bgcolor=”#616D7E”>
<?php
require_once ‘database.php’;
?>
<strong><fieldset><legend><font face=”Arial”>Registrar</legend></font></strong>
<form name=”Registrar” method=”post” action=”veri_reg.php”><dl>
<dt><label>Usuario: </label></dt>
<dd><input type=”text” name=”user” id=”user”></dd>
</dl><dl>
<DT><label>Contraseña: </label></DT>
<dd><input type=”password” name=”pass” id=”pass”></dd>
</dl><dl>
<DT><label>Repite la contraseña: </label></DT>
<dd><input type=”password” name=”pass2″ id=”pass2″></dd>
</dl><dl>
<DT><input type=”submit” name=”reg” id=”reg” value=”Registrar”></DT>
</dl></form>
<form name=”Back” method=”post” action=”index.php”>
<br>
<tr>
<dl>
<DT><input type=”submit” name=”back” id=”back” value=”Regresar a la Pagina Principal”></DT>
</dl></fieldset>
</form>
Resultado:
login.php
<body >
<center><img src=”nothing-found.png” ></center><!– Clic nothing-found.png–>
<?php
session_start();
require_once ‘database.php’;# usuario
$username = $_POST['user'];
#
$escaped_username = mysql_real_escape_string($username);
# contrasena
$md5_password = md5($_POST['pass']);//md5 seguridad para el pass$queryN = mysql_query(“select * from user where username = ‘”.$username.”‘ and password = ‘”.$md5_password.”‘ AND
level=’1′”);# (User Normal)
$queryA = mysql_query(“select * from user where username = ‘”.$username.”‘ and password = ‘”.$md5_password.”‘ AND
level=’9′”);# (Admin User)if(mysql_num_rows($queryN) == 1)
{
$resultN = mysql_fetch_assoc($queryN);
$_SESSION['user'] = $_POST['user'];
header(“location:index.php”);}
elseif(mysql_num_rows($queryA) == 1)
{
$resultA = mysql_fetch_assoc($queryA);
$_SESSION['admin'] = $_POST['user'];
header(“location:index.php”);
}else{
echo “<center>Nombre de usuario o contraseña incorrecta</center>”;
}
?>
<br>
<form name=”back” method=”post” action=”index.php”>
<br><center><input type=”submit” name=”back” id=”back” value=”Regreso a Pantalla Principal”></center>
Resultado: 
logout.php
<?php
include ‘footer.php’;
?>
<?php
session_start();#This will start the session
session_unset(); #Session_unset and Session_destroy
session_destroy();#Will remove all sessions.header(“location:index.php”);#This code will send you back to the index page
?>
Y de ultimo le damos un toque de style.
style.css
body {
background-color: ;
text-align: center;
}#wrapper {
width: 500px;
margin: 0 auto; /* Esto centra la pagina */
}#content {
background-color: #fff;
border: 1px solid #000;
float: left;
font-family: Arial;
padding: 20px 30px;
text-align: left;
width: 100%; /* llena el div */
}#menu {
float: left;
border: 1px solid #000;
border-bottom: none;
clear: both;
width:100%;
height:20px;
padding: 0 30px;
background-color: #FFF;
text-align: left;
font-size: 85%;
}#menu a:hover {
background-color: #009FC1;
}#userbar {
background-color: #fff;
float: left;
width: 250px;
}#footer {
clear: both;
}/* begin table styles */
table {
border-collapse: collapse;
width: 100%;
}table a {
color: #000;
}table a:hover {
color:#373737;
text-decoration: none;
}th {
background-color: #B40E1F;
color: #F0F0F0;
}td {
padding: 5px;
}/* Begin font styles */
h1, #footer {
font-family: Arial;
color: #373737;
}h3 {margin: 0; padding: 0;}
/* Menu styles */
.item {
background-color: #00728B;
border: 1px solid #032472;
color: #FFF;
font-family: Arial;
padding: 3px;
text-decoration: none;
}.leftpart {
width: 70%;
}.rightpart {
width: 30%;
}.small {
font-size: 75%;
color: #373737;
}
#footer {
font-size: 65%;
padding: 3px 0 0 0;
}.topic-post {
height: 100px;
overflow: auto;
}.post-content {
padding: 30px;
}textarea {
width: 500px;
height: 200px;
}
Resultado Final:
Antes que se me olvida como se puede entrar al sistema ALSW como Adminstrador
Bueno es facil solo vaz a registrar y cuando termines con eso vaz a tu base de datos “user” y cambias tu level de 1 a 9 como asi:
Yyyyyyy aqui termina el Lesson 1
Ahora solo faltan las preguntas.?!
Espero sus comentarios, preguntas, amenazas de muerte(por si en caso hay errores), sugerencias, opiniones, etc…
Lesson 2 Pantalla Principal(Menu) coming soon…..
Hola Edgar:
Felicitaciones por el tuto.
Dime como diablos haces para que tu código no de el error “…session_start(): Cannot send session cookie…” o el “…Cannot modify header information – headers already sent by… “; ya que la misma pagina de php dice no enviar nada al browser antes de usar las funciones session_start() o header(). Pero no sólo tu lo haces he visto cientos de páginas y cientos de ejemplos que hacen lo mismo, envían código html antes de estas funciones. ¿Cómo, sin que de error?
…
hacer la el tipo de letra mas creativo o divertido–>
<?php
session_start();
require_once ‘database.php’;
…
Un abrazo.
Hola Esteban:
Gracias! puse tiempo para crear este tuto.
xD en realidad nose.! Lo probe con la maquina de mi hermano lo instale el lucid Lynx y el XAMPP y todito me funcionoo! No me dio ningun problema.
Pero cuando trate de ponerlo en Win7 me dio un montonzao de errores que no quize corregir porque no quiero morir joven =D
Bueno con el session_start(); creo que vaz a tener que subirlo antes del html *eso fue el unico error que Corrige en Win7* y con el heading solo puedo pensar que no hay un enlace con el index.php
Pero de todos modos al final de los Lessons voy a subir el programa completo para que tod@s pueden entenderlo mejor y practicar PHP
Sayonara.
Gracias. al menos una luz al final del tunel, voy a trabajar en linux a ver que tal me va.
Un abrazo y suerte
chao
Hola.
Los errores de session generalmente se deben a dos posibles causas:
1.- No lo inicias desde la primera línea de código php.
2.- Inicias la variable de session más de una vez.
Explicando, por lo general uno diseña el sitio para manejar varios módulos, uno que se encargue de la conexión a bd, otro sobre sesiones, otro para el contenido en si del sitio, y uno ultimo para cerrar sesión. Si en cada archivo php haces un session_start(), es lógico que si lo tenias iniciado anteriormente te lance un error, pues ya está iniciado.
El otro, sobre iniciar sesión antes que cualquier código, es para llevar una buena práctica de programación, por lo general, echas código html en el modulo que es necesario y no en todos y cada uno de tus archivos, por decir, tener un “encabezado.html” con la apertura de html, header, inclusión de estilo, archivos js recurrentes, etc.
Espero haber sido un poco claro, sino intentaré dar algún ejemplo al respecto.
Saludos.
Esta muy interesante cuenta tenga una nueva hija lo probare
Pingback: Lesson 2 Pantalla Principal(Menu) « ANIME LINUX STYLE IN THE WORLD·
Muy bien por el tutorial, sin embargo sería bueno que desde ya fueras separando las tres capas de un documento web (Contenido, Presentación y Comportamiento). Al separar las tres capas, la administración de un documento web es mucho más fácil. Para que comprendas un poco mejor de lo que te hablo puedes ver el siguiente post:
http://ronald.blog.com/2010/08/16/las-tres-capas-de-un-documento-web/
Saludos y continua con tu buen trabajo.
Mmmm… Interesante.
Gracias Ronald.
Hola Esteban, felicitaciones por el tutorial probare een casa, antes hice algo y me salio un mensaje que no entiendo:
ERROR
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in c:\appserv\www\insertar.php on line 24
este es el codigo:
// MOSTRAMOS EL CONTENIDO DE LA TABLA ALUMNOS
while ($row = mysql_fetch_array ($result)) {
echo ‘Nombre: ‘.$row ['nombre'].”;
echo ‘Apellido: ‘.$row ['apellido'].”;
echo ‘DNI: ‘.$row ['DNI'].”;
}
c:\appserv\www\insertar.php on line 24 ????
Si estas usando Windows not va a funcionar compadre
Eso lo explique en el inicio. Proba con linux brother!
Pero cambiandoles las comillas por las del windows no anda?
Hola amigo oye tengo un problema desde que quiero crear la base de datos me aparece este error, <<>> , espero me puedas ayudar, de ante mano gracias que estes bien
#1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘’1′, PRIMARY KEY (`id`), KEY `level` (`level`) ) ENGINE=InnoDB DEFAULT C’ at line 5
Que version usas amigo?
Ni idea amigo en vez de copy & paste escribelo tu mismo pueda que sea por el tipo de fuente?
por favor me puiedes mandar un comprimido .RAR para ejecutarlo directamente?
me hace falta esto para mi proyecto de taller
gracias
Gracias por la informacion pero sabes como hacer para que los usuarios puedan agregarle un avatar al registro? gracias
Buena pregunta #Cuerpo_Humano
Quizas este fin o la otra semana hago tutorial sobre eso.
Hola amigo estaba buscando este tipo de ayudas pero me ha marcado errores, podrias subir tu proyecto o mandarmelo a vans.punk@gmail.com seria de mucha ayuda gracias.
Estupendo el tutorial , ahora me gustaria saber como pongo este login y pass en mi web.
gracias. barrientos.stc@gmail.com
Hagamos esto Miguel primero Dios esta semana que viene subire todo el proyecto una sola vez porque me siento culpable por no seguir con el tutorial =(
Pingback: El regreso de los tutoriales de *COMO CREAR UN LOG IN Y REGISTRO DE USUARIOS EN PHP* | ANIME LINUX STYLE IN THE WORLD·