JQuery UI: Como usar el control Tab con MySql

JQuery UI Logo

En esta ocasión quiero presentar a la librería JQuery UI y para esto he diseñado un sencillo ejemplo que básicamente despliega dos tablas de MySql; al dar click en una pestaña (tab) se muestra una tabla, al elegir la otra se muestra el contenido de otra segunda tabla.

¿Que es JQuery UI?

En resumen, JQuery UI es un subconjunto del FrameWork JQuery y fue creado para añadir nuevas y complejas funcionalidades a ésta. Este conjunto de nuevas funcionalidades pueden ser plug-ins, widgets, y efectos visuales (arrastrar, FadeIn, FadeOut, etc.), todos diseñados con la misma filosofía que JQuery; fácil de usar y compatible con los navegadores más populares.

Lo que necesitas para realizar este ejemplo

Para la realizacion de este ejemplo necesitas la siguiente lista de herramientas de desarrollo instaladas en tu computadora. Así que si alguna no la tienes, este el momento ideal para hacerlo:

  • PHP 5 (o superior).
  • Un servidor web (ej. IIS o Apache) que tenga soporte para PHP 5.
  • El FrameWork JQuery.
  • JQuery UI.
  • MySql 5 (o superior).
  • Gusto por aprender.

    • Como puedes ver he puesto un enlace a la página de descarga de cada herramienta. El servidor web puede ser el que tú gustes pero cuida que tenga soporte para reconocer y ejecutar código PHP, en mi caso uso el servidor Apache.

Diseñar la Base de datos en MySql

Para el ejemplo voy a suponer que tenemos una lista de productos organizados en categorías. Es por esto que utilizare una tabla de productos y otra tabla de categorías. Los datos que me interesan guardar sobre los productos son:

  • El nombre del producto.
  • Una breve descripción acerca del producto.
  • La fecha en que caduca el producto.
  • El precio al que se compra con el proveedor.
  • El precio al que se vende al público.
  • La categoría en la que se ha clasificado el producto.

    • Los productos estarán organizados en varias categorías, ejemplos de categorías pueden ser; Carnes frías, Perfumería, Abarrotes, Frituras, etc.
      Para que el ejemplo siga siendo muy sencillo y fácil de entender solo he considerado dos categorías y solamente tendré una lista de 3 productos.

Scripts para crear la base de Datos en MySql

A continuación pongo los scripts que debes usar para crear la base de datos del ejemplo, así como algunas inserciones que he realizado en las dos tablas:

/*Crear la base de datos*/
CREATE DATABASE jquerytabs_mysql;
USE jquerytabs_mysql;

/*Crear la tabla Productos*/
CREATE TABLE tbl_productos(id_producto INT NOT NULL AUTO_INCREMENT,
tx_NombreProducto VARCHAR(50),
tx_Descripcion VARCHAR(500),
dt_FechaCaducidad DATETIME DEFAULT NULL,
mn_PrecioCompra DECIMAL(5,2),
mn_PrecioPublico DECIMAL(5,2),
id_Categoria INT,
primary key(id_producto),
foreign key (id_Categoria) references cta_CategoriasProductos(id_CategoriaProducto)  );
  
/*Crear la tabla de Categorias*/
CREATE TABLE cta_CategoriasProductos(id_CategoriaProducto INT NOT NULL AUTO_INCREMENT,
tx_Nombre VARCHAR(50),
tx_Descripcion VARCHAR(500),
primary key(id_CategoriaProducto) );


/*Insertar 3 Productos de ejemplo*/
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria) 
VALUES('Shampoo Ultra humectante','Shampoo caja/2 pzas marca patito','2013-07-04',245.50,315.00,1);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Papas refritas','Papas fritas bolsa 150 gr. superpapas','2012-11-22 10:45',3.50,6.50,2);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Jabon anti alopecia','Jabon higienico 1 pza 145 gr.','2013-04-16 07:57',8.50,10.50,1);

//Insertar 2 categorias para los productos
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Perfumeria','Todo tipo de productos de limpieza y productos de tocador');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Frituras','Productos de frituras; palomitas, totopos, etc.');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Abarrotes','Todo tipo de Productos de abarrotes; enlatados, veladoras, refrescos, etc .');

Con ayuda de algun cliente para MySql como Workbench o el PhpMyAdmin ejecuta los scripts anteriores para recrear la base de datos e insertar los datos de ejemplo. En mi caso he utilizado el Workbench.

Diseño de la pagina web

El diseño es muy sencillo y únicamente consiste de un solo documento HTML en el que se insertara el Widget Tab de JQuery, es muy similar al diseño que muestro a continuación:
Esbozo de la GUI del ejemplo.

Cuando el usuario elija la primera Pestaña se mostrara el contenido de la tabla de productos. En la Pestaña dos se mostrara la tabla de categorías. Existen varias formas de decirle a JQuery de donde debe tomar los datos que mostrara en cada Pestaña, tema que por ahora no tocare para no confundirte. En este caso el contenido de cada pestaña será cargado con ayuda de Ajax.

Vista de la estructura de carpetas y archivos del ejemplo

Para que entiendas mejor los archivos de código fuente que mostrare más adelante, a continuación pongo una imagen donde se observa claramente como he organizado en carpetas los archivos de este ejemplo:
Estructura de carpetas del ejemplo JQuery Tabs

Si observas la imagen te darás cuenta que dentro de la carpeta css hay una carpeta llamada cupertino; este es el nombre del tema que me descargue de JQuery UI, es el que más me gusto (azul claro tipo agua).

El código fuente de estos archivos los iré mostrando uno a uno junto con una breve explicación de la función que tiene cada uno. El orden en que los mostrare es el orden en el que teóricamente el navegador los íra cargando.

El código Fuente de los archivos

Para ver el ejemplo funcionando en el navegador debemos escribir la ruta a la carpeta ejemplo5 que a su vez está dentro de la carpeta jquery, la cual (como se observa en la imagen) es la raíz donde está guardado todo el ejemplo, cuando escribimos dicha URL (http://localhost/jquery/ejemplo5/) en el navegador se desplegara el documento HTML index.html. El código de este archivo lo muestro a continuación:
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ejemplo5 con JQuery :: UI Tabs y MySql</title>
	<!--Hoja de estilo-->
	<link rel="StyleSheet" type="text/css" href="../css/cupertino/jquery-ui-1.8.23.custom.css" />
	<link rel="StyleSheet" type="text/css" href="../css/css_ejemplo5.css" />
	
	<!--Archivos de script de JQuery-->
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<!--Archivo de script del ejemplo-->
	<script type="text/javascript" src="../js/func_ejemplo5.js"></script>

   </head>
   <body>
	 <br/>
	 
		<TABLE WIDTH="95%" BORDER="0">
			<TR>
				<TD >
				<!-- Widget Tab -->
					<div id="fichass">
						<ul>
							<li><a href="ajax/listarProductos.php">Productos</a></li>
							<li><a href="ajax/listarCategorias.php">Categorias</a></li>
						</ul>
					</div>				
				</TD>
			</TR>
		</TABLE>		

   </body>
</html>

Espero que con la imagen de las carpetas que te mostré anteriormente puedas deducir el porqué de las rutas en las etiquetas para importar las hojas de estilo (LINK), y el porqué de las rutas en las etiquetas para importar los archivos de código JavaScript (SCRIPT). Como se observa el archivo está muy, muy corto, a continuación una breve explicación de las líneas más importantes de este archivo:

En la línea 7 y 8 se están importando dos hojas de estilos; el primer archivo .css (jquery-ui-1.8.23.custom.css) corresponde a la hoja de estilos de JQuery UI, el segundo archivo .css (css_ejemplo5.css) corresponde a una hoja que he creado para darle un poco de presentación a las tablas que mostraran el contenido de las tablas de MySql.

En la línea 11 se importa el Framework JQuery.
En la línea 12 se importa la librería JQuery UI.
En la línea 14 se importa un archivo que he creado para inicializar JQuery y el Widget Tab.

En el cuerpo del documento HTML (BODY) se observa cómo he creado una tabla con una sola fila y una sola columna y dentro de dicha columna e insertado el Widget Tab. El objetivo de la tabla es limitar el ancho que ocupa el Widget dentro del documento HTML.

css_ejemplo5.css
Este archivo es una hoja de estilos que he creado para hacer un RESET del CSS del documento HTML y crear unas cuantas clases para dar presentación a las tablas HTML que muestran los datos de las tablas Productos y Categorías (las tablas se crean en los archivos que se cargan con Ajax). Los archivos listarProductos.php y listarCategorias.php son los que hacen uso de las clases que se crean en este archivo.

@CHARSET "UTF-8";
/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
  border:0pt none;
  font-family:inherit;
  font-size: 100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0pt;
  padding:0pt;
  vertical-align:baseline;
}

.celdaWhite {	background-color: #FFFFFF; }
.celdaGreen {	background-color: #E5FFE9; }

.filaEncabezado  { 
	background-color: #B5B5B5; 
	font-size: 9pt; 
	font-weight: bold; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
}

td { 
	color: #333333; 
	font-family: 'Comic Sans MS',Verdana, Arial, Helvetica, sans-serif; 
	font-size: 7.5pt; 
	vertical-align:middle;
	padding:3px;
}

En el archivo se observa lo siguiente:
Únicamente he creado 3 clases: celdaWhite, celdaGreen y filaEncabezado.
Asigne estilos para todas las celdas de una tabla HTML (línea 27 a línea 33).

func_ejemplo5.js
Este archivo se encarga de Inicializar el Framework JQuery y de especificar que la capa (DIV) que están dentro del cuerpo del archivo index.php debe convertirse en un Widget Tab:

/*
	Descripcion: 	Inicializacion de JQuery y el Widget Tab.
*/

	var miPagina;
	miPagina=$(document);
	miPagina.ready(inicializarEventos);

	function inicializarEventos()
	{
		var capaFichas = $("#fichass");
		capaFichas.tabs({ collapsible: true });
	}

Si has revisado mis anteriores ejemplos de JQuery te darás cuenta que estoy utilizando la misma sintaxis de siempre para inicializar JQuery. El parámetro collapsible del método tabs() es un valor booleano que indica si el contenido de la pestaña debe ocultarse al dar click en el nombre de la pestaña, en este caso he especificado que sí.

Te explicare un poco que pasa detrás del telón…
Recordemos que el método ready() solo se hace disponible después de que todo el contenido del documento HTML ha sido recibido del servidor, es por eso que dentro de este método he creado un objeto asociado a la capa "fichass" (línea 11) y a través de este objeto le indico a jQuery que a esta capa la convierta en un Widget del tipo Tab (linea 12).

Cuando el método tabs() se ejecuta y detecta que en el parámetro href de los nombres de las pestañas (líneas 26 y 27 de index.html) hay una URL a un archivo, entonces, automáticamente carga el archivo asociado a la primera pestaña a través de Ajax. Léase la documentación del Widget Tab, opción selected aquí.

Si deseáramos que al cargarse el Widget Tab se mostrara por defecto la pestaña 2 entonces deberíamos ejecutar este método con la opción selected: 1. Las fichas se numeran de 0 a n-1, donde n es el numero de pestañas del Widget Tab.

conectar_bd.php
Este archivo se encarga de hacer la conexión al DBMS MySql, o en caso de error, mostrar una descripción del porque no se pudo conectar (función mysql_error de MySql). Este archivo es insertado con la función include de PHP dentro de los archivos listarProductos.php y listarCategorias.php.

<?php
	
$conexio = null;
function conectar_bd() {
	global $conexio;
	//Definir datos de conexion con el servidor MySQL (local)	
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "jquerytabs_mysql";
	
	//Obtener link de conexion
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}
	
?>

Este script PHP en resumen; declara una variable global ($conexio, guardara el link de conexión a la bd) y define una función llamada conectar_bd() la cual al ser invocada hará la conexión a MySql y dejara esa conexión abierta en la variable global anteriormente mencionada.

listarProductos.php
Este archivo es solicitado al servidor a través de Ajax cada vez que se da click en la primera pestaña. Tiene la función de hacer una consulta a la base de datos para obtener los registros de la tabla productos y a través de un ciclo desplegarlos:

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla productos a la base de datos
	$queryProductos = "SELECT tbl_productos.*,cta_CategoriasProductos.tx_Nombre AS categoria 
						FROM tbl_productos
						INNER JOIN cta_CategoriasProductos
						ON tbl_productos.id_Categoria = cta_CategoriasProductos.id_CategoriaProducto;";
	$resProductos = mysql_query($queryProductos);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
			<TD align="left">FECHA CADUCIDAD</TD>
			<TD align="left">PRECIO LISTA</TD>
			<TD align="left">PRECIO PUBLICO</TD>
			<TD align="left">CATEGORIA</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla productos
	while( $filaProducto = mysql_fetch_array($resProductos) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaProducto['id_producto']; ?></TD>
			<TD><?=$filaProducto['tx_NombreProducto']; ?></TD>
			<TD><?=$filaProducto['tx_Descripcion']; ?></TD>
			<TD><?=$filaProducto['dt_FechaCaducidad']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioCompra']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioPublico']; ?></TD>
			<TD><?=$filaProducto['categoria']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin de ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Observa como he realizado un match entre la tabla Productos y la tabla de Categorías a través del campo id_Categoria. Este match lo hago para desplegar el nombre de la categoría en vez de su ID; pues al usuario no le interesa el Id, sino el nombre de la categoría en la que se ha clasificado el producto. Si no entiendes muy bien mi consulta de SQL te recomiendo leer acerca de la instrucción INNER JOIN.

En la línea 44 se cierra conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

listarCategorias.php
Este archivo al igual que el archivo listarProductos.php es solicitado al servidor a través de Ajax, pero ahora cuando se da click en la segunda pestaña (Categorias):

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla categorias a la base de datos	
	$queryCategorias = "SELECT * FROM cta_CategoriasProductos; ";
	$resCategorias = mysql_query($queryCategorias);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla categorias
	while( $filaCategoria = mysql_fetch_array($resCategorias) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaCategoria['id_CategoriaProducto']; ?></TD>
			<TD><?=$filaCategoria['tx_Nombre']; ?></TD>
			<TD><?=$filaCategoria['tx_Descripcion']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin del ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Como puedes observar en el código, se hace un barrido completo de la tabla Categorías y a través de un ciclo while se mandan al navegador cada uno de los registros.

En la línea 33 se cierra la conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

Screenshots del ejemplo

A continuación muestro pantallazos del ejemplo en el navegador Chrome de Google.
Ficha Productos:
Ejemplo JQuery Tabs en ejecucion; Pestaña productos.
Ficha Categorias;
Ejemplo JQuery Tabs en ejecucion: Pestaña Categorias.

Demo

Si gustas ver el ejemplo en ejecución da Click en este enlace.

 

Eso es todoo, espero que te haya gustado y principalmente que ojalá te sirva. Si deseas el código basta con que dejes tu email y en cuanto vea tu mensaje te hago llegar el ejemplo en un archivo comprimido. Si te gusto el articulo, te invito a que me dejes un comentario, así me motivas a escribir más.

Saludos cordiales.

 
 

Enlaces relacionados:

 
 
Anuncios

Autenticacion de usuarios en PHP y MySql

Hola, mi cuenta de gmail ha sido vulnerada, por lo que las imágenes no se ven, pero esta entrada ya la he replicado en http://www.notas-programacion.com/2014/10/autenticacion-de-usuarios-en-php-y-mysql/, el contenido de este blog se estará migrando progresivamente allá, disculpa las molestias.

Como he visto que es muy solicitado el codigo que publique sobre como autenticar usuarios en java y MySql, decidi publicar esta nueva entrada que esta muy relacionada con dicho tema, pero ahora en PHP y un poquito mas completo; encriptacion del password en MD5.

Como decía anteriormente, en algunos sistemas a veces un requerimiento es que se manejen privilegios y por lo tanto usuarios, esto con el fin de controlar lo que cada usuario puede hacer/ver una vez dentro del sistema. En esta entrada únicamente se muestra como autenticar a los usuarios para entrar al sistema, es decir, cada usuario tendrá los mismos privilegios; aunque la tabla de usuarios de MySql (que mostrare mas adelante) ya incluye un campo que determina el tipo de usuario este campo no sera utilizado por ahora. Sin mas preámbulos muestro el ejemplo…

La base de datos

Como siempre que voi a hacer uso de una BD, empezare mostrando el script para recrear las tablas que usare en el ejemplo:

/* Crear la base de datos */
create database prueba;

/*Crear Catalogo de tipos de usuario */
create table ctg_tiposusuario
(
id_TipoUsuario	int not null auto_increment,
tx_TipoUsuario	varchar(100),
primary key(id_TipoUsuario)
);


/* Catalogo de usuarios */
create table tbl_users(
id_usuario int not null auto_increment,
tx_nombre varchar(50) not null,
tx_apellidoPaterno varchar(50),
tx_apellidoMaterno varchar(50),
tx_correo varchar(100),
tx_username varchar(50),
tx_password varchar(250),
id_TipoUsuario int,
dt_registro datetime,
primary key(id_usuario),
foreign key(id_TipoUsuario) references ctg_TiposUsuario(id_TipoUsuario)
);

/*Insertar tipos de usuarios de prueba*/
INSERT INTO `ctg_tiposusuario`( `tx_TipoUsuario`) VALUES ('Administrador');
INSERT INTO `ctg_tiposusuario`( `tx_TipoUsuario`) VALUES ('Usuario Normal');

/*passwrd: 12345*/
/*Insertar usuario de prueba*/
INSERT INTO tbl_users (tx_Nombre,tx_apellidoPaterno,tx_apellidoMaterno,tx_correo,
tx_username,tx_password,id_TipoUsuario,dt_registro) 
VALUES('Gonzalo','Silverio','Silverio','gonzasilve@gmail.com',
'gonzasilve','827ccb0eea8a706c4c34a16891f84e7b',1,'2012-11-09 17:35:40');

La base de datos que usare se llama prueba. Como se observa unicamente son dos tablas, ademas, he creado un catalogo con los diferentes tipos de usuario que pudiera haber, solo he añadido dos tipos de usuario (Administrador y Usuario normal) a modo de ejemplo, pero se pueden añadir mas. Si observas, inserto un usuario de prueba. Si quieres asignar otro password al usuario de prueba puedes utilizar esta sencilla herramienta que te permite generar un MD5 a partir de una cadena cualquiera: http://shalo.site50.net/obtener_md5.php

Herramientas necesarias

Supongo que para el momento de estar leyendo este articulo ya tienes el software necesario (ho al menos piensas instalarlo). Como he visto que los visitantes muchas veces son estudiantes de carrera ho aficionados a la programacion; pero con poca experiencia (me incluyo), voi a listar las herramientas de sw necesarias que debes tener yá en tu maquina si quieres probar este exquisito codigo :), puedes usar otro servidor y otro dbms, pero yo use estas:
Como ves son pocos requisitos, si no tienes alguno este es el momento para que lo instales. El servidor de correo de hecho es opcional, solo lo instale para hacer pruebas en mi computadora local (una laptop), si tienes dudas sobre hMailServer en la misma pagina viene mucha documentación acerca de como instalarlo y configurarlo. Si tienes más dudas puedes preguntarle al oraculo (google) escribiendo esto ‘hmailserver y php’.

Bueno vamos a lo interesante…

El código fuente

index.php

Este archivo permite mostrar la ventana de Login, en esta como es de suponerse el usuario introduce su nombre de usuario, su password y le da click al boton enviar, bueno muestro el codigo:
<!--     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Archivo para mostrar una pantalla de login con los campos;
				de usuario y password, los 2 datos se envian al archivo validarUsuario.php 
				por el metodo POST. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    index.php 
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Login ::. Ejemplo autenticar usuarios</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="estilos.css" type="text/css">
	<script src="jquery171.js" type="text/javascript"></script> 
	<script src="jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.alerts.js"></script>
	<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
	<!--
		$().ready(function() {
			$("#frmlogin").validate();
			$("#usuario").focus();
		});
	// -->
	</script>
	
</head>
<body>
<br /><br />
<form id="frmlogin" name="frmlogin"  method="POST" action="validarUsuario.php">
<table align="center" width="200px">
<tr>
	<td colspan="2" align="center"><h3>Iniciar sesi&oacute;n</h3></td>
</tr>
<tr>
	<td>Usuario</td>
	<td>
		<input type="text" name="usuario" id="usuario" class="required" maxlength="50">
	</td>
</tr>

<tr>
	<td>Password</td>
	<td>
		<input type="password" name="password" id="password" class="required"  maxlength="50">
	</td>
</tr>
<tr >
	<td colspan="2" >
		<a href="recuperarPassword.php">
			Olvide mi contrase&ntilde;a
		</a>
	</td>
</tr>

<tr>
	<td colspan="2" align="right">
		<input type="submit" name="enviar" value="Enviar" >
	</td>

</tr>
	
<tr>
	<td colspan="2" align="right" >
		<br/><a href="registro.php">Deseo registrarme</a>
	</td>
</tr>	
	<?php
	
	//Mostrar errores de validacion de usuario, en caso de que lleguen
	
		if( isset( $_POST['msg_error'] ) )
		{
			switch( $_POST['msg_error'] )
			{
				case 1:
			?>
			<script type="text/javascript"> 
				jAlert("El usuario o password son incorrectos.", "Seguridad");
				$("#password").focus();
			</script>
			<?php
				break;			
				case 2:
			?>
			<script type="text/javascript"> 
				jAlert("La seccion a la que intentaste entrar esta restringida.\n Solo permitida para usuarios registrados.", "Seguridad");
			</script>
			<?php		
				break;
			}		//Fin switch
		}

		//Mostrar mensajes del estado del registro
		
		if( isset( $_POST['status_registro'] ) )
		{
			switch( $_POST['status_registro'] )
			{
				case 1:
				if( $_POST['i_EmailEnviado'] ==1) {
				?>
					<script type="text/javascript"> 
						jAlert("Gracias, ha sido registrado exitosamente.\n Se le ha enviado un correo electronico de bienvenida, \npor favor, NO LO CONTESTE pues solo es informativo.", 'Registro');
					</script>
					<?php
				} else {
					?>
					<script type="text/javascript"> 
						jAlert("Gracias, ha sido registrado exitosamente.\n No se le ha podido enviar correo electronico de bienvenida, \nsin embargo, ya puede utilizar sus datos de acceso para iniciar sesion..", 'Registro');
					</script>
				<?php
				}

					break;			
				
				default:
			?>
				<script type="text/javascript"> 
					jAlert("Temporalmente NO se ha podido registrar, intente de nuevo mas tarde.", "Registro");
				</script>
			<?php		
			}		//Fin switch
		}
	?>
	
</table>
</form>
</body>
</html>

Como se puede ver para mostrar los mensajes de error utilizo la libreria JQuery, ya que me parecio que usar un alert() de javascript es algo feito, jajajaj. Como se ve el archivo en si solamente crea un formulario en el cual se dibujan dos cajas de texto; una para el usuario y otra para el password, un link para ir a la pantalla de recuperacion del password en caso de que al usuario se le haya olvidado y por ultimo se crea un boton tipo submit para enviar la informacion. Para validar campos vacios tambien utilizo JQuery. Ademas se puede ver que envio los dos datos de las cajitas a un archivo llamado validarUsuario.php por el metodo POST; el cual se encargara de accesar a la BD y verificar que los datos sean correctos.

Otra cosa interesante que se puede observar es que este archivo verifica si le llega un parametro llamado msg_error (con la funcion isset() de php) y en base a ese parametro (en realidad es un codigo de error) muestra un mensaje de error. A continuacion muestro un pantallazo como se ve el formulario en el navegador Chrome:

Pantalla de Login
En caso de que el usuario introduzca un nombre de usuario incorrecto se mostrara esta pantalla:
Pantalla Login, error usuario

Como se observa se ven mas atractivas las alertas con JQuery y ademas es sumamente facil utilizarlas.

validarUsuario.php

Este archivo es el que se encarga de recibir los datos del archivo index.php y los compara contra los que estan en la BD. Si el usuario y el password son correctos (existen en la BD) guarda el id del usuario en un formulario (el dato se envia oculto, hidden), inicializa una sesion , guarda algunas variables en dicha sesión y redirecciona hacia el archivo principal.php el cual es la pagina web que se supone debe mostrarse para usuarios registrados. En caso de que el usuario y/o password sean incorrectos entonces este archivo guarda igualmente un codigo de error en un formulario y redirecciona a la pagina de login, es decir, al archivo index.php. A continuacion se muestra su codigo fuente:
<?php
	/*
		Instituto Tecnologico de Zacatepec, Morelos 
	Descripcion:   Archivo que recibe los valores de 2 campos;
			un usuario y un password, los 2 datos se buscan si estan en la
			base de datos y redicciona al login o la pagina principal. 
	Author:     Gonzalo Silverio  gonzasilve@gmail.com 
	Archivo:    validarUsuario.php 
	*/ 

	//conectar BD
	include("conectar_bd.php");  
	conectar_bd();
	
	$usr = $_POST['usuario'];
	$pw = $_POST['password'];
	//Obtengo la version encriptada del password
	$pw_enc = md5($pw);
	
	$sql = "SELECT id_usuario FROM tbl_users
			INNER JOIN ctg_tiposusuario
			ON tbl_users.id_TipoUsuario = ctg_tiposusuario.id_TipoUsuario
			WHERE tx_username = '".$usr."'
			AND tx_password = '".$pw_enc."'	";	
	$result		=mysql_query($sql,$conexio); 

	$uid = "";
	
	//Si existe al menos una fila
	if( $fila=mysql_fetch_array($result) )
	{		
		//Obtener el Id del usuario en la BD 		
		$uid = $fila['id_usuario'];
		//Iniciar una sesion de PHP
		session_start();
		//Crear una variable para indicar que se ha autenticado
		$_SESSION['autenticado']    = 'SI';
		//Crear una variable para guardar el ID del usuario para tenerlo siempre disponible
		$_SESSION['uid']       		= $uid;
		//CODIGO DE SESION
		
		//Crear un formulario para redireccionar al usuario y enviar oculto su Id 
?>
		<form name="formulario" method="post" action="principal.php">
			<input type="hidden" name="idUsr" value='<?php echo $uid ?>' />
		</form>
<?php
	}
	else {
		//En caso de que no exista una fila...
		//..Crear un formulario para redireccionar al usuario a la pagina de login 
		//enviandole un codigo de error
?>
		<form name="formulario" method="post" action="index.php">
			<input type="hidden" name="msg_error" value="1">
		</form>
<?php
	}
?>
					
<script type="text/javascript"> 
	//Redireccionar con el formulario creado
	document.formulario.submit();
</script>
Como se observa; la mayoria del codigo esta comentado por lo que me ahorrare volver a explicar: Lo que si quiero mencionar es que en la linea 40 he dejado un comentario (CODIGO DE SESION), en esa linea si usted quiere puede generar un identificador de sesion, debido a que el ID de sesion de PHP a veces se pierde; usted puede crear un ID mas seguro; por ejemplo con base a la fecha y hr actual. la funcion session_id () permite leer o asignar el ID de la sesion.

La funcion session_start() permite iniciar una sesion o continuar una ya iniciada. Es por eso que en todas las paginas web que requieran que el usuario este autenticado se llama a esta funcion de PHP, esto lo podras ver en los demas archivos que mostrare mas adelante.

En la linea 37 y 39 se observa que es muy facil crear una variable de sesion con ayuda del array global $_SESSION[], basta con agregar un nuevo item y asignarle un valor, asi de facil. Posteriormente se pueden utilizar en cualquier pagina php por ejemplo para mostrar el Id del usuario y su Status en el navegador:
	echo "Id del usuario:".$_SESSION['uid'];
	echo "Ha iniciado sesion:".$_SESSION['autenticado'];

Facil ¿No?. Continuemos…

En la linea 12 del archivo validarUsuario.php se inserta un archivo llamado conectar_bd.php el cual se encarga de conectar con el DBMS, este archivo es el que muestro a continuacion…

conectar_bd.php

<?php
/*     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Conecta con el Manejador de Base de Datos (DBMS) y deja disponible una variable global (conexio)
		para ser utilizada posteriormente. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    conectar_bd.php 
*/

$conexio;
function conectar_bd()
{
	global $conexio;
	//Definir datos de conexion con el servidor MySQL
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "prueba";
	
	//Conectar
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	//Seleccionar la BD a utilizar
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}	
?>
Como se observa primero se definen los datos de conexion en variables locales a la funcion conectar_bd(). y posteriormente estas variables se usan como parametros para llamar a la funcion mysql_connect(), la cual es la que hace la peticion al dbms para conectarse. la funcion mysql_connect() devuelve un link que representa la conexion establecida al dbms, con este link guardado en la variable $conexio se selecciona la BD a utilizar (linea 24).

principal.php

Este archivo es la pantalla que el usuario ve si se logueo correctamente, nada mas como ejemplo he creado una muy sencilla. Cuando el usuario accede a esta pagina web se supone que ya paso por la pantalla de login y sus datos fueron verificados en la BD. Pero por seguridad antes de mostrarla verifico que efectivamente este logueado a travez de las variables de sesion que fueron creadas en el archivo validarUsuario.php. A continuacion muestro el codigo fuente:
<?php
/*     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Pantalla inicial que se muestra al usuario una vez que ha sido logueado correctamente. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    principal.php 
*/

//Inicializar una sesion de PHP
session_start();

//Validar que el usuario este logueado y exista un UID
if ( ! ($_SESSION['autenticado'] == 'SI' && isset($_SESSION['uid'])) )
{
	//En caso de que el usuario no este autenticado, crear un formulario y redireccionar a la 
	//pantalla de login, enviando un codigo de error
?>
		<form name="formulario" method="post" action="index.php">
			<input type="hidden" name="msg_error" value="2">
		</form>
		<script type="text/javascript"> 
			document.formulario.submit();
		</script>
<?php
}

	//Conectar BD
	include("conectar_bd.php");  
	conectar_bd();

	//Sacar datos del usuario que ha iniciado sesion
	$sql = "SELECT  tx_nombre,tx_apellidoPaterno,tx_TipoUsuario,id_usuario
			FROM tbl_users
			LEFT JOIN ctg_tiposusuario
			ON tbl_users.id_TipoUsuario = ctg_tiposusuario.id_TipoUsuario
			WHERE id_usuario = '".$_SESSION['uid']."'";			
	$result		=mysql_query($sql); 

	$nombreUsuario = "";

	//Formar el nombre completo del usuario
	if( $fila = mysql_fetch_array($result) )
		$nombreUsuario = $fila['tx_nombre']." ".$fila['tx_apellidoPaterno'];
	
//Cerrrar conexion a la BD
mysql_close($conexio);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Inicio ::. Ejemplo autenticar usuarios</title>
	<link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body topmargin="0" >
<table align="right" width="350px" border="0">
<tr>												<!-- Dar Bienvenida al usuario -->
	<td  width="100px" align="right">Bienvenido <b><?php echo $nombreUsuario ?></b></td>
	<td  width="15px" align="center">
		<!-- Proporcionar Link para cerrar sesion -->
		<a href="cerrarSesion.php">Cerrar sesi&oacute;n</a>	
	</td>
</tr>
</table>
<br /><br />
<h2 align="center">Pantalla Principal</h2>

		<!-- Contenido inicial del sitio web -->
		
<body>
</html>
Como decia en la lineas anteriores, cuando una pagina esta restringida lo primero que se debe hacer es verificar que el usuario esta logueado y tiene permisos para ver dicha pagina. Como dije que no mostraria como dar permisos a los usuarios, en este ejemplo solo se comprueba que haya una sesion iniciada y que exista entre las variables de sesion un UID (User Id); Id del usuario en la Base de datos.

Si se verifica que esas condiciones se cumplen entonces se obtienen los datos del usuario, tal como su nombre , correo electronico, etc. Yo solo saque su nombre completo y lo mostre en la esquina superior derecha para que el usuario tenga la sensacion (jajajajj “sienta”) que a entrado al portal. A continuacion muestro un pantallazo de este archivo en el navegador:

Pantalla de inicio del usuario logueado

Como se observa tambien se ha puesto al usuario un link para que cierre su sesion.

Seguridad

Imaginemos que un usuario malintencionado escribe directamente la URL de este archivo en su navegador (escribe http://localhost/autenticar_usuarios/principal.php) pensando que con esto puede entrar y ver el contenido del sitio. Perdera su tiempo pues para eso presisamente se hace la validacion al inicio y solamente vera un mensaje de error como el que se ve a continuacion:

Mensaje de error al entrar a pagina principal sin login

cerrarSesion.php

Este archivo es al que apunta el enlace “Cerrar sesión ” que esta a un lado del nombre de usuario (una vez que ha iniciado su sesión). Este archivo se encarga de destruir todas las variables de sesión y terminar la sesion; todo esto se hace con las funciones que PHP ya trae incluidas.
<?php
/*     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Archivo para destruir las variables de sesion de un usuario logueado y terminar la sesion,
				 	ademas redirecciona nuevamente a la pagina de login. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    cerrarSesion.php 
*/

session_start();
// Destruye todas las variables de la sesion
session_unset();
// Finalmente, destruye la sesion
session_destroy();

//Redireccionar a la pagina de login
header ("Location: index.php");

?>
Como se ve es muy corto el archivo. No doy mas explicacion ya que cada instruccion esta comentada.

recuperarPassword.php

En la pagina de login, si observas hay un link que dice Olvide mi contraseña, este link nos manda al archivo recuperarPassword.php. Este archivo permite enviar un nuevo password al usuario, el usuario solo debe escribir su correo electronico y automaticamente se generara un nuevo password de nueve caracteres y se le enviara a dicho email. Obviamente que el correo proporcionado se valida que exista en la BD; Como se observa en la BD el password esta encriptado en MD5 por lo que es necesario proporcionarle otro; no hay forma descifrar el password anterior.
<?php
	/*
		Instituto Tecnologico de Zacatepec, Morelos 
	Descripcion:   Este archivo permite preguntar al usuario su correo electronico para enviarle un nuevo
						password. 
	Author:     Gonzalo Silverio  gonzasilve@gmail.com 
	Archivo:    recuperarPassword.php 
	*/ 
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Recuperar Password ::. </title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="estilos.css" type="text/css">
	<script src="jquery171.js" type="text/javascript"></script> 
	<script src="jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.alerts.js"></script>
	<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
	<!--
		$().ready(function() {
		$("#recPassword").validate({
		rules: {
		/*A continuacion los nombres de los campos y sus reglas a cumplir */
			correo2: {
			required: true,
			email: true,
			equalTo: "#correo"
			},
			correo: {
			required: true,
			email: true
			}


		}
		});
		$("#correo").focus();
		});
	// -->
	</script>
	
</head>
<body>
<br /><br />


<form id="recPassword" name="recPassword"  method="POST" action="recuperarPassword.php">

<table align="center" width="400px">

<tr>
	<td colspan="2" align="center"><h3><b>Recuperar Password</b></h3></td>
</tr>

<?php
//Si llega el parametro correo y no viene vacio
if( isset( $_POST['correo'] ) && $_POST['correo'] != '' )
{
	//Conectar la BD
	include("conectar_bd.php");  
	conectar_bd();

	//Recuperar la direccion de email que llega
	$elcorreo   = $_POST['correo'];
	
	//Verificar si existe el correo en la BD
	$sql = "SELECT  id_usuario,tx_username,tx_nombre,tx_apellidoPaterno
			FROM tbl_users
			WHERE tx_correo = '".$elcorreo."'";			
	$rs_sql	= mysql_query($sql);

	//Si no existe el correo... 
	if ( !( $fila 	= mysql_fetch_object($rs_sql) )  )
	{
	//Mostrar msg de error al usuario (en esta misma pagina)
?>
	<input type="hidden" id="error" value="1">			
	<script type="text/javascript"> 
	location.href="recuperarPassword.php?error="+document.getElementById('error').value;
	</script>
<?php
	}
	
	//En caso de que si exista un email como el k llega, leer de la BD los datos del usuario
	$idusr 	= $fila->id_usuario;		//Servira para actualizar el pw
	$nombre = $fila->tx_nombre." ".$fila->tx_apellidoPaterno;
	$nick 	= $fila->tx_username;
	
	// Generacion de un nuevo Password
	$pasw = "";
	$abecedario = array("A","B","C","D","E","F","G","H","J","K","L","M","N","O","P","Q","R","S","T",
"U","V","W","a","b","c","d","e","f","g","h","j","k","l","m","n","o","p","q","r","s","t","u","v","w");
	$simbolos 	= array(",","}","{","-","|","!","#","$","%","&","/","(",")","=","?","¡",
"*","]","[","_",":",";","+");
	for($i=0;$i<3; $i++)
	{
		$md 	= rand(1,2);
		$pasw 	.=  (($md%2)==0) ? $abecedario[rand(0,43)] : rand(0,9);  
		$md 	= rand(1,2);
		$pasw 	.=  (($md%2)==0) ? rand(0,9) :  $simbolos[rand(0,23)];  
		$md 	= rand(1,2);
		$pasw 	.=  (($md%2)==0) ?   $simbolos[rand(0,23)] : $abecedario[rand(0,43)] ;		
	}		
	
	// Le  Envio  por correo electronico  su nuevo password 
     $seEnvio;			//Para determinar si se envio o no el correo
     $destinatario = $elcorreo;				//A quien se envia
     $nomAdmin 			= 'Gonzalo Silverio';		//Quien envia
	 $mailAdmin 		= 'gonzasilve@gmail.com';	//Mail de quien envia
	 $urlAccessLogin = 'http://localhost/autenticar_usuarios/';	//Url de la pantalla de login

     $elmensaje = "";     
     $asunto = "Nueva contraseña para ".$nick;

     $cuerpomsg ='
		<h3>.::Recuperar Password::.</h3>
		<p>A peticion de usted; se le ha asignado un nuevo password, utilice los siguientes datos para acceder al sistema</p>
		  <table border="0" >
			<tr>
			  <td colspan="2" align="center" ><br> Nuevos datos de acceso para <a href="'.$urlAccessLogin.'">'.$urlAccessLogin.'</a><br></td>
			</tr>
			<tr>
			  <td> Nombre </td>
			  <td> '.$nombre.' </td>
			</tr>
			<tr>
			  <td> Username </td>
			  <td> '.$nick.' </td>
			</tr>
			<tr>
			  <td> Password </td>
			  <td> '.$pasw.' </td>
			</tr>
		  </table> ';
		  
	date_default_timezone_set('America/Mexico_City');
		  
	//Establecer cabeceras para la funcion mail()
	//version MIME
	$cabeceras = "MIME-Version: 1.0\r\n";
	//Tipo de info
	$cabeceras .= "Content-type: text/html; charset=iso-8859-1\r\n";
	//direccion del remitente
	$cabeceras .= "From: ".$nomAdmin." <".$mailAdmin.">";
	$resEnvio = 0;
	//Si se envio el email
	if(mail($destinatario,$asunto,$cuerpomsg,$cabeceras))
	{
		//Actualizar el pwd en la BD
		$sql_updt = "UPDATE tbl_users SET tx_password = '".md5($pasw)."' 
		WHERE (id_usuario = ".$idusr.")
		AND (tx_correo = '".$elcorreo."')";
		$res_updt = mysql_query($sql_updt);
		$resEnvio = 1;
	}

	//Cerrrar conexion a la BD
	mysql_close($conexio);
		
	// Mostrar resultado de envio (en esta misma pagina)
	?>
		<input type="hidden" id="enviado" value="<?php echo $resEnvio ?>">
		<input type="hidden" id="elcorreo" value="<?php echo $elcorreo ?>">
		<script type="text/javascript">
			location.href="recuperarPassword.php?enviado="+document.getElementById('enviado').value+"&elcorreo="+document.getElementById('elcorreo').value;
		</script>
	<?php	
}
else
{
?>

<tr>
	<td colspan="2">Escriba su correo electronico con el que se ha registrado, 
		se le enviara un nuevo password a su correo electronico:<br /><br /> 
	</td>
</tr>

<tr>
	<td>Correo electronico:</td>
	<td>
		<input type="text" name="correo" id="correo"  maxlength="50" />
	</td>
</tr>
<tr>
	<td>Confirme Correo electronico:</td>
	<td>
		<input type="text" name="correo2" id="correo2" maxlength="50" />
	</td>
</tr>

<?php
	//Si llega un codigo de error
	if( isset($_GET['error']) && $_GET['error']==1 )
	{
		echo "<tr><td colspan='2'><br><font color='red'>El correo electronico no pertenece a ningun usuario registrado.</font><br></td></tr>";
	}
	else if( isset($_GET['enviado']) && isset($_GET['elcorreo'])  )
	{
		//Si se envio correctamente el nuevo password
		if( $_GET['enviado']==1 ) 
			echo "<tr><td colspan='2'><br><font color='green'>Su nueva contrase&ntilde;a ha sido enviada a <strong>".$_GET['elcorreo']."</strong>.</font><br></td></tr>";
		else if( $_GET['enviado']==0 ) 
			echo "<tr><td colspan='2'><br><font color='red'>Por el momento la nueva contrase&ntilde;a no pudo ser enviada a <strong>".$_GET['elcorreo']."</strong>.<br>
			Intente de nuevo mas tarde.</font></td></tr>";
	}
?>

<tr>
	<td align="center" colspan="2">
		<br /><br /> 
		<input type="button" onClick="javascript: location.href='index.php'" name="cancelar" value="Cancelar" >
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" name="enviar" value="Enviar" >
	</td>
</tr>

<?php
}
?>

</table>
</form>
</body>
</html>

Para mas seguridad el password nunca se muestra al usuario, por el contrario; se le asigna otro (formado aleatoriamente) y se le envia por correo electronico. Como se observa en la linea 60 se comienza comprobando si llega un parametro llamado ‘correo’; si llega esto quiere decir que el formulario de recuperacion de password ya fue enviado y el correo que esta llegando es de un usuario al que se le debe asignar un nuevo password. Por el contrario; sino llega, se dibujan dos cajas de texto para permitir al usuario escribir su correo electronico y se le pueda enviar su password.

Bueno, supongamos que a este archivo le llega un el parametro correo, entonces de la linea 62 a la linea 85 se comprueba si ese email existe en la BD. sino existe, entonces se redirecciona al usuario a este mismo archivo pero con un codigo de error, el cual servira para mostrar un texto al usuario avisando que su correo electronico no existe. En caso de que si exista el email en la BD (no se cumple la condicion de la linea 76) entonces se recuperan los datos del usuario (linea 88 a la 90) y posteriormente se le genera un nuevo password (linea 93 a la 104), observe la forma como he generado el nuevo password del usuario; cada ciclo agrega 3 caracteres: el primero puede ser una letra ho un numero, el segundo puede ser un numero o un simbolo del array con el mismo nombre, el tercero puede ser un simbolo o una letra (Como son tres ciclos entonces el password tendra nueve caracteres).

Y ya por ultimo se le envia el password a su correo electronico del usuario (linea 106 a la linea 165). Algo que me gustaria resaltar es que el nuevo password debe ser actualizado en la BD para que la proxima vez el usuario intente iniciar sesion pues este password sea valido, ademas, solo se debe de actualizar despues de notificar al usuario (envio de email correcto), tal como se hace en este ejemplo.

A continuacion pongo una imagen del error que aparece en caso de que el email escrito no exista:

El email no existe en la Base de datos

Mensaje en caso de que el email haya sido enviado correctamente:

Nuevo password asignado correctamente

Ya no pongo el mensaje del error en caso de que NO se envie el email (falle la funcion mail() de php), porque es muy obvia, pero, a continuación dejo una imagen del eMail que le llega al usuario, con sus nuevos datos de acceso:

Email con nuevo password del usuario

registro.php

A peticion de muchos de los visitantes que preguntan (ya sea en privado o en comentarios de esta entrada) como registrar usuarios en php decidi exponer un ejemplo. En la pantalla de Login si observas aparece un enlace (hipervinculo) con la leyenda Deseo registrarme; el codigo que muestro a continuacion es del archivo que se muestra en el navegador al dar click en dicho enlace. Este archivo, en resumen, muestra un formulario creado con HTML para que el usuario capture sus datos personales y datos de acceso (username y password) envie dichos datos al script guardarRegistro.php que guarda los datos en la base de datos. El codigo es este…
<?php
	/*
		Instituto Tecnologico de Zacatepec, Morelos
	Descripcion:   Este archivo muestra un formulario que permite al usuario
		capturar sus datos y personales y de acceso.
	Author:     Gonzalo Silverio  gonzasilve@gmail.com
	Archivo:    registro.php
	*/

$str_nombre 		= "";
$str_apPaterno 	= "";
$str_apMaterno 	= "";
$str_correo 		= "";
$str_username 	= "";
$str_password 	= "";
$str_password2 	= "";

if( isset($_POST['str_nombre']) ) 		
	$str_nombre 		= trim($_POST['str_nombre']);
if( isset($_POST['str_apPaterno']) ) 
	$str_apPaterno 	= trim($_POST['str_apPaterno']);
if( isset($_POST['str_apMaterno']) ) 
	$str_apMaterno 		= trim($_POST['str_apMaterno']);
if( isset($_POST['str_correo']) ) 
	$str_correo 	= trim($_POST['str_correo']);
if( isset($_POST['str_username']) ) 
	$str_username 	= trim($_POST['str_username']);
if( isset($_POST['str_password']) ) 
	$str_password 	= trim($_POST['str_password']);
if( isset($_POST['str_password2']) ) 
	$str_password2 	= trim($_POST['str_password2']);


?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Registrar Usuario ::. </title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="estilos.css" type="text/css">
	<script src="jquery171.js" type="text/javascript"></script>
	<script src="jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.alerts.js"></script>
	<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
	<!--
		$().ready(function() {
		$("#registrar_usuario").validate({
		rules: {
		/*A continuacion los nombres de los campos y sus reglas a cumplir */
			tx_nombre: {
				required: true,	minlength: 3
			},
			tx_apPaterno: {
				required: true, minlength: 3
			},
			tx_apMaterno: {
				required: true,	minlength: 3
			},
			tx_correo: {
				required: true,	minlength: 5, email: true
			},
			tx_username: {
				required: true,	minlength: 5
			},
			tx_password: {
				required: true,	minlength: 5
			},
			tx_password2: {
				required: true,	minlength: 5,	equalTo: "#tx_password"
			}

		},
		/*A continuacion los campos y los mensajes en caso de que no se cumplan las reglas */
		messages: {
			tx_nombre: {
				required: "Por favor, escriba su Nombre.",
				minlength: jQuery.format("Su Nombre como minimo debe tener {0} caracteres.")
			},
			tx_apPaterno: {
				required: "Por favor, escriba su Apellido Paterno.",
				minlength: jQuery.format("Su Apellido Paterno como minimo debe tener {0} caracteres.")
			},
			tx_apMaterno: {
				required: "Por favor, escriba su Apellido Materno.",
				minlength: jQuery.format("Su Apellido Materno como minimo debe tener {0} caracteres.")
			},
			tx_correo: {
				required: "Por favor, escriba una direccion de correo electronico valida.",
				minlength: jQuery.format("Por favor, escriba una direccion de correo electronico valida.")
			},
			tx_username: {
				required: "Por favor, escriba un nombre de usuario. Este dato le servira para iniciar sesion y ver el contenido.",
				minlength: jQuery.format("Su nombre de usuario como minimo debe tener {0} caracteres.")
			},
			tx_password: {
				required: "Por favor, escriba una contraseña.",
				minlength: jQuery.format("Su contraseña como minimo debe tener {0} caracteres.")
			},
			tx_password2: {
				required: "Por favor, repita la contraseña anterior.",
				minlength: jQuery.format("Su contraseña como minimo debe tener {0} caracteres."),
				equalTo: "Por favor, repita la contraseña anterior.",
			}

		}

		});
		$("#tx_nombre").focus();
		});
	// -->
	</script>

</head>
<body>
<br />


<form id="registrar_usuario" name="registrar_usuario"  method="POST" action="guardarRegistro.php">

<table align="center" width="600px">

<tr>
	<td colspan="2" align="center"><h3><b>Registrar usuario</b></h3></td>
</tr>

<tr>
	<td colspan="2">Gracias por tu interes en registrarte. Para hacerlo, solo debes llenar
	los siguientes campos y pulsar el boton <b>Registrarme</b>. Para hacer mas rapido el registro y
	asi tu puedas acceder al contenido, tu cuenta se activa inmediatamente.<br /><br />
	</td>
</tr>
	
	<?php
		//Si llega el parametro error y no viene vacio
		if( isset( $_POST['error'] ) && $_POST['error'] != '' ) {
	?>
		<tr>
			<td colspan="2" >
				<font color="red">
				<ul>
					<?php
						echo $_POST['msgs_error'];
					?>
				</ul>
				</font>
			</td>
		</tr>
	<?php
		}
	?>

	
	<tr>
		<td><label for="tx_nombre">Nombre(s)</label></td>
		<td>
			<input type="text" name="tx_nombre" id="tx_nombre" value='<?php echo $str_nombre ?>' size="30"  maxlength="30" />
		</td>
	</tr>
	<tr>
		<td><label for="tx_apPaterno">Apellido paterno</label></td>
		<td>
			<input type="text" name="tx_apPaterno" id="tx_apPaterno" value='<?php echo $str_apPaterno ?>' size="30"  maxlength="30" />
		</td>
	</tr>
	<tr>
		<td><label for="tx_apMaterno">Apellido materno</label></td>
		<td>
			<input type="text" name="tx_apMaterno" id="tx_apMaterno"  value='<?php echo $str_apMaterno ?>' size="30"  maxlength="30" />
		</td>
	</tr>
	<tr>
		<td><label for="tx_correo">Correo electronico</label></td>
		<td>
			<input type="text" name="tx_correo" id="tx_correo"  value='<?php echo $str_correo ?>' size="30"  maxlength="30" />
		</td>
	</tr>
	<tr>
		<td><label for="tx_username">Nombre de usuario</label></td>
		<td>
			<input type="text" name="tx_username" id="tx_username"  value='<?php echo $str_username ?>' size="25"  maxlength="25"  />
		</td>
	</tr>
	<tr>
		<td><label for="tx_password">Contrase&ntilde;a</label></td>
		<td>
			<input type="password" name="tx_password" id="tx_password"  value='<?php echo $str_password ?>'  size="25"  maxlength="25" />
		</td>
	</tr>
	<tr>
		<td><label for="tx_password2">Confirme la contrase&ntilde;a</label></td>
		<td>
			<input type="password" name="tx_password2" id="tx_password2"  value='<?php echo $str_password2 ?>'  size="25"  maxlength="25" />
		</td>
	</tr>
	<tr>
		<td>Tipo de usuario</td>
		<td>
			<input type="hidden" name="i_tipoUsuario" id="i_tipoUsuario" value="2"   />
			<input type="radio" name="rad_TipoUsuario" id="rad_TipoUsuario" disabled value="2" checked="checked"  /> Usuario normal &nbsp;&nbsp;&nbsp;
			<input type="radio" name="rad_TipoUsuario" id="rad_TipoUsuario" disabled value="1"  /> Administrador
		</td>
	</tr>

<tr>

	<td align="center" colspan="2">
		<br /><br />
		<input type="button" onClick="javascript: location.href='index.php'" name="cancelar" value="Cancelar" >
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" name="registrarme" value="Registrarme" >
	</td>
</tr>

</table>
</form>
</body>
</html>
Como puedes observar esta un poco extenso (como 200 lineas sin lineas en blanco); ese es el precio de validar de una manera rigurosa los datos que el usuario introduce en los cuadros de texto. Tratare de explicar un poco este archivo, pero antes te muestro una imagen de la pagina web que se genera a partir del codigo fuente anterior:

Pagina web para registrar usuarios

De la linea 10 a 16 se declaran y limpian variables, una para cada dato del usuario que se va a registrar, enseguida en la linea 18 se verifica si esta llegando (si exite, con isset()) la variable de str_nombre, si se cumple que si existe dicha variable; hay una variable con el mismo nombre que se declaro antes (linea 10), entonces se le asigna el valor que llega. Cuando llegan datos significa que ya se habian enviado los datos al archivo guardarRegistro.php y éste los esta regresando si no los pudo guardar. Esta operacion la realiza para cada dato del usuario.

Si continuamos viendo el codigo se observa que de la linea 50 a la 100 es codigo javascript donde ajustamos parametros del plugin de validacion de JQuery. A este tipo de validacion se le conoce como validacion del lado cliente, en este caso el cliente es el navegador.

En la linea 121 se observa que esta escrito el encabezado del formulario y en su parametro action estamos diciendole que envie los datos de dicho formulario al archivo guardarRegistro.php el cual se encargara de guardarlos en la base de datos (no sin antes validarlos en el lado servidor).

En la linea 138 estamos verificando si existe/llega una variable llamada error y en caso de que si, mostramos la lista de errores que ocurrieron al guardar. La lista de errores vienen en otra variables llamada msg_error. Observa como en la linea 143 y 147 se abre y cierra, respectivamente una lista desordenada de HTML, la variable msg_error trae los <li> </li> correspondientes, cada <li> es un error que ocurrio al intentar guardar en el archivo guardarRegistro.php. En caso de que hayan ocurrido errores se mostrara una pantalla similar a esta:

Horrores al registrar un usuario

guardarRegistro.php

Este archivo recibe los datos del archivo registro.php y los guarda en la base de datos. Antes de guardar realiza varias validaciones, mas abajo esta la explicacion pero, veamos el codigo…
<?php
	/*
		Instituto Tecnologico de Zacatepec, Morelos
	Descripcion:   Este archivo permite guardar un nuevo usuario.
	Author:     Gonzalo Silverio  gonzasilve@gmail.com
	Archivo:    guardarRegistro.php
	*/
	//Recuperar los datos del formulario de registro
	$str_nombre			=trim($_POST['tx_nombre']);
	$str_apPaterno	=trim($_POST['tx_apPaterno']);
	$str_apMaterno	=trim($_POST['tx_apMaterno']);
	$str_correo			=trim($_POST['tx_correo']);
	$str_username		=trim($_POST['tx_username']);
	$str_password		=trim($_POST['tx_password']);
	$str_password2	=trim($_POST['tx_password2']);
	$i_TipoUsuario	=trim($_POST['i_tipoUsuario']);

	//Devuelve true si la cadena que llega esta VACIA
	function estaEnBlanco($cadena) {
		if(strlen( trim($cadena) ) == 0 )
			return true;
		return false;
	}

	//Devuelve true si la longitud de la cadena (primer parametro)
	// que llega  es menor que el numero (segundo parametro)
	function validaTamanio($cadena,$longitud) {
		if(strlen( trim($cadena) ) < $longitud )
			return true;
		return false;
	}

	// devuelve true SI ha escrito, un email NO VALIDO
	function esCorreoInvalido($str_email) {
		if(!filter_var(trim($str_email), FILTER_SANITIZE_EMAIL))
			return true;
		return false;
	}

	// devuelve una cadena escapada de algunos caracteres que
	// pudieran servir para un ataque de sql injection
	function escaparQuery($cadena) {
		$str_KeywordsSQL 			= array("select ","insert ","delete ","update ","union ");
		$str_OperadoresSQL 		= array("like ","and ","or ","not ","<",">","<>","=","<");
		$str_DelimitadoresSQL = array(";","(",")","'");

		//Quitar palabras reservadas y operadores
		for($i=0; $i<count($str_KeywordsSQL); $i++) {
			$cadena = str_replace($str_KeywordsSQL[$i], "",strtolower($cadena) );
		}
		for($i=0; $i<count($str_OperadoresSQL); $i++) {
			$cadena = str_replace($str_OperadoresSQL[$i], "",strtolower($cadena) );
		}
		for($i=0; $i<count($str_DelimitadoresSQL); $i++) {
			$cadena = str_replace($str_DelimitadoresSQL[$i], "",strtolower($cadena) );
		}

		return $cadena;
	}


	$mensajesAll= "";

	//Mensajes para el nombre
	if( estaEnBlanco($str_nombre) )
		$mensajesAll = "<li>Por favor, escriba su Nombre.</li>";
	if( validaTamanio($str_nombre,3) )
		$mensajesAll .= "<li>Su Nombre como minimo debe tener 3 caracteres.</li>";
	//Mensajes para el Apellido Paterno
	if( estaEnBlanco($str_apPaterno) )
		$mensajesAll .= "<li>Por favor, escriba su Apellido Paterno.</li>";
	if( validaTamanio($str_apPaterno,3) )
		$mensajesAll .= "<li>Su Apellido Paterno como minimo debe tener 3 caracteres.</li>";
	//Mensajes para el Apellido Materno
	if( estaEnBlanco($str_apMaterno) )
		$mensajesAll .= "<li>Por favor, escriba su Apellido Materno.</li>";
	if( validaTamanio($str_apMaterno,3) )
		$mensajesAll .= "<li>Su Apellido Materno como minimo debe tener 3 caracteres.</li>";
	//Mensajes para el Correo electronico
	if( estaEnBlanco($str_correo) || validaTamanio($str_correo,5) || esCorreoInvalido($str_correo) )
		$mensajesAll .= "<li>Por favor, escriba una direccion de correo electronico valida.</li>";
	//Mensajes para el nombre de usuario
	if( estaEnBlanco($str_username) )
		$mensajesAll .= "<li>Por favor, escriba un nombre de usuario. Este dato le servira para iniciar sesion y ver el contenido.</li>";
	if( validaTamanio($str_username,5) )
		$mensajesAll .= "<li>Su nombre de usuario como minimo debe tener 5 caracteres.</li>";
	//Mensajes para el password
	if( estaEnBlanco($str_password) )
		$mensajesAll .= "<li>Por favor, escriba una contrase&ntilde;a.</li>";
	if( validaTamanio($str_password,5) )
		$mensajesAll .= "<li>Su contrase&ntilde;a como minimo debe tener 5 caracteres.</li>";
	//Mensajes para la confirmacion del password
	if( estaEnBlanco($str_password2) || validaTamanio($str_password2,5) )
		$mensajesAll .= "<li>Por favor, confirme la contrase&ntilde;a anterior.</li>";
	if( trim($str_password) != trim($str_password2) )
		$mensajesAll .= "<li>Por favor, repita la contrase&ntilde;a anterior.</li>";	
	//Mensajes para el tipo de usuario
	if( estaEnBlanco($i_TipoUsuario) )
		$mensajesAll .= "<li>Por favor, indique el tipo de usuaurio.</li>";

	$log = $mensajesAll."<br>";

	//Si se generaron mensajes de error al validar...
	if ( trim($mensajesAll) != "" )	{
		//..Redireccion a la pagina de registro para mostrar msg de error al usuario
		//Enviar los datos que habia escrito antes de enviar
	?>
	<form id="frm_error"   name="frm_error" method="post" action="registro.php">
		<input type="hidden" name="error" value="1" />
		<input type="hidden" name="msgs_error" value='<?php echo $mensajesAll ?>' />
		<input type="hidden" name="str_nombre" value='<?php echo $str_nombre ?>' />
		<input type="hidden" name="str_apPaterno" value='<?php echo $str_apPaterno ?>' />
		<input type="hidden" name="str_apMaterno" value='<?php echo $str_apMaterno ?>' />
		<input type="hidden" name="str_correo" value='<?php echo $str_correo ?>' />
		<input type="hidden" name="str_username" value='<?php echo $str_username ?>' />
		<input type="hidden" name="str_password" value='<?php echo $str_password ?>' />
		<input type="hidden" name="str_password2" value='<?php echo $str_password2 ?>' />
	</form>
	<script type="text/javascript">
		//Redireccionar con el formulario creado
		document.frm_error.submit();
	</script>
<?php
		exit;
	}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Registrar Usuario ::. </title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="estilos.css" type="text/css">
	<script src="jquery171.js" type="text/javascript"></script>
	<script src="jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.alerts.js"></script>
	<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
	<!--
		$().ready(function() {

		});
	// -->
	</script>

</head>
<body>

<?php
	$mensajesAll				= "";
	$username_duplicado = false;
	$email_duplicado 		= false;
	//Escapar las cadenas para avitar SQL Injection
	$str_username = escaparQuery($str_username);
	$str_correo 	= escaparQuery($str_correo);

	//Conectar la BD
	include("conectar_bd.php");
	conectar_bd();

	
	//Validar que el nombre de usuario no exista en la BD
	$sql = "SELECT  id_usuario	FROM tbl_users
	WHERE tx_username = '".trim($str_username)."';";
	$rs_sql	= mysql_query($sql);
	$log .=  $sql."<br>";
		
	//Si ya existe el usuario en la BD...
	if ( $fila 	= mysql_fetch_object($rs_sql) )	{
		$mensajesAll = "<li>El nombre de usuario <b>".$str_username."</b> ya fue registrado 
		por otra persona. Por favor, escriba otro.</li>";
		$username_duplicado = true;
	}

	//Validar que el email no exista en la BD
	$sql = "SELECT  id_usuario	FROM tbl_users
	WHERE tx_correo='".$str_correo."';";
	$rs_sql	= mysql_query($sql);
	$log .=  $sql."<br>";

	
	//Si ya existe el email en la BD...
	if ( $fila 	= mysql_fetch_object($rs_sql) )	{
		$mensajesAll = "<li>El correo electronico <b>".$str_correo."</b> ya fue registrado 
		por otra persona. Por favor, escriba otro.</li>";
		$email_duplicado 		= true;
	}
	//Si ambos datos ya estan en la Base de datos mostrar un solo msg
	if( $username_duplicado && $email_duplicado)
		$mensajesAll = "<li>Ambos, nombre de usuario <b>".$str_username."</b> 
		y correo electronico <b>".$str_correo."</b> ya fueron registrados por otra persona.
		Por favor, cambie esos datos.</li>";
	//..Redireccion a la pagina de registro para mostrar msg de error al usuario
	//Enviar los datos que habia escrito antes de enviar
	
	$log .=  $mensajesAll."<br>";

	
	if ( trim($mensajesAll) != "" )	{
		//..Redireccion a la pagina de registro para mostrar msg de error al usuario
		//Enviar los datos que habia escrito antes de enviar
		?>
		<form id="frm_error"   name="frm_error" method="post" action="registro.php">
			<input type="hidden" name="error" value="2" />
			<input type="hidden" name="msgs_error" value='<?php echo $mensajesAll ?>' />
			<input type="hidden" name="str_nombre" value='<?php echo $str_nombre ?>' />
			<input type="hidden" name="str_apPaterno" value='<?php echo $str_apPaterno ?>' />
			<input type="hidden" name="str_apMaterno" value='<?php echo $str_apMaterno ?>' />
			<input type="hidden" name="str_correo" value='<?php echo $str_correo ?>' />
			<input type="hidden" name="str_username" value='<?php echo $str_username ?>' />
			<input type="hidden" name="str_password" value='<?php echo $str_password ?>' />
			<input type="hidden" name="str_password2" value='<?php echo $str_password2 ?>' />
		</form>
		<script type="text/javascript">
			//Redireccionar con el formulario creado
			document.frm_error.submit();
		</script>
			<?php
		exit;
	}
	
	
	//..Si llega asta aqui es que todos los datos son validos, procedemos a darlo de alta en BD
	$str_elNombre 				= $str_nombre." ".$str_apPaterno;
	$str_elNombreCompleto = $str_nombre." ".$str_apPaterno." ".$str_apMaterno;

	
	//Formar el query para el insert del nuevo usuario
	$queryInsert="INSERT INTO tbl_users (
	tx_nombre,
	tx_apellidoPaterno,
	tx_apellidoMaterno,
	tx_correo,
	tx_username,
	tx_password,
	id_TipoUsuario,
	dt_registro	) 
	VALUES(
	'".$str_nombre."',
	'".$str_apPaterno."',
	'".$str_apMaterno."',
	'".$str_correo."',
	'".$str_username."',
	'".md5($str_password)."',
	".$i_TipoUsuario.",
'".date("Y-m-d H:i:s")."');";
	
	$log .=  $queryInsert."<br>";

	//echo $log;
	//exit;
	
	mysql_query($queryInsert);

	// Le  Envio  un correo electronico  de bienvenida
	$destinatario = $str_correo;					//A quien se envia
	$nomAdmin 			= 'Gonzalo Silverio';			//Quien envia
	$mailAdmin 		= 'gonzasilve@gmail.com';		//Mail de quien envia
	$urlAccessLogin = 'http://localhost/autenticar_usuarios';		//Url de la pantalla de login

	$elmensaje = "";
	$asunto = $str_elNombre.", Gracias por registrarte!";

	$cuerpomsg ='
	<h2>.::Registrar usuarios::.</h2>
	<p>Le damos la mas cordial bienvenida, desde ahora usted podra gozar de los beneficios de 
	haberse identificado y acceder a contenido exclusivo de esta comunidad.</p>
		<table border="0" >
		<tr>
			<td colspan="2" align="center" >Sus datos de acceso para <a href="'.$urlAccessLogin.'">'.$urlAccessLogin.'</a><br></td>
		</tr>
		<tr>
			<td> Nombre </td>
			<td> <b>'.$str_elNombreCompleto.'</b> </td>
		</tr>
		<tr>
			<td> Nombre de usuario </td>
			<td> <b>'.$str_username.'</b> </td>
		</tr>
		<tr>
			<td> Password </td>
			<td> <b>'.$str_password.'</b> </td>
		</tr>
		</table> <br/><br/>
	<p><b>Gracias por su preferencia, hasta pronto.</b></p> <br><br>';

	date_default_timezone_set('America/Mexico_City');

	//Establecer cabeceras para la funcion mail()
	//version MIME
	$cabeceras = "MIME-Version: 1.0\r\n";
	//Tipo de info
	$cabeceras .= "Content-type: text/html; charset=iso-8859-1\r\n";
	//direccion del remitente
	$cabeceras .= "From: ".$nomAdmin." <".$mailAdmin.">";
	$i_EmailEnviado = 0;
	
	//Si se envio el email
	if( mail($destinatario,$asunto,$cuerpomsg,$cabeceras) )	
		$i_EmailEnviado = 1;
	
	//Cerrrar conexion a la BD
	mysql_close($conexio);

	// Mostrar resultado del registro
	?>
	<form id="frm_registro_status"   name="frm_registro_status" method="post" action="index.php">
		<input type="hidden" name="status_registro" value="1" />
		<input type="hidden" name="i_EmailEnviado" value='<?php echo $i_EmailEnviado ?>' />
	</form>
	<script type="text/javascript">
		//Redireccionar con el formulario creado
		document.frm_registro_status.submit();
	</script>
</body>
</html>

Empezamos recogiendo en varibles locales a este archivo los datos que nos llegan del archivo registro.php, esto se hace de la linea 8 a l6. Despues definimos 4 funciones, las cuales mas adelante nos serviran para hacer validaciones con los datos que acabamos de recibir. Cada una tiene un breve explicación asi que me ahorrare volver a hacerlo.

De la linea 64 a 99 validamos que los datos que llegan no vengan vacios (en blanco), ademas para algunos campos como el username y password validamos su tamaño. Observa como para cada campo que pudiera venir vacio o no cumplir el tamaño se siguen revisando los demas pero se agrega un item <li> con la descripcion del error. En la linea 104 se revisa si la lista NO esta vacia, sino esta vacia entonces regresamos todos los datos al archivo registro.php, para que el usuario no tenga que volver a escribirlos y solo corrija los que tienen error, y ademas mandamos una variable llamada error y la lista de errores que ocurrieron (con su descripcion). Ademas de mandar los errores debemos detener la ejecucion de este archivo, esto se hace en la linea 124.

Supongamos que no hubo errores de campos en blanco ni tamaños, entonces no se cumplira la condicion de la linea 104, entonces, el interprete de PHP se saltara hasta la linea 126 y continuara su ejecucion…

Lo que haremos ahora sera validar que el nombre de usuario e email escrito no existan en la BD, si algunos de los dos ya fue registrado volveremos a direccionar la ejecucion al archivo registro.php para que escriba otro username/pasword. Esto se hace de la linea 151 a 231, el codigo esta comentado por lo tanto evitare redundar en la explicacion.

Tal y como dice la linea 224, si la ejecucion llega asta dicha linea es que todos los datos son validos (han pasado las validaciones), entonces procedemos a darlo de alta en la base de datos. Despues de formar la sentencia SQL (insert) de la linea 230 a 247, se ejecuta (linea 254) y con lo cual el usuario ha sido dado de alta. Observa como en varios puntos del script voi guardando un log de la ejecucion (errores, querys, etc) en una variable llamada $log puedes imprimirla y detener la ejecucion en cualquier momento para ver que pasa detras del telon, observa como lo hago yo en la linea 251 y 252.

Como un plus e puesto el codigo como se le pueden enviar sus datos de acceso en un email, si recuerdas ya vimos como enviar un email en PHP en otra entrada de blog. A continuación un pantallazo del email que le llega al usuario que se acaba de registrar:
Email con sus datos de acceso
 
 
Despues de enviarle el email con sus datos direccionamos al usuario al archivo index.php (recuerda que ahi dio click en el enlace Deseo registrarme) junto con una bandera; $status_registro si esta bandera llega con valor 1 significa que el registro fue exitoso. el archivo index.php ya esta preparado para revisar si le llega esta bandera (fijate en linea 99). Pantalla de aviso que ha sido registrado:

Aviso de registro exitoso

Por ultimo no hay que olvidarse de cerrar la conexion a la base de datos, esto lo hago en la linea 304 del archivo guardarRegistro.php.

Demo

Si deseas ver el ejemplo funcionando Da click aqui. usa estos datos para probar el ejemplo, Usuario: visitante_wp, Contraseña: 12345. Si te registras no olvides revisar el SPAM!.
 
 
Bueno, eso es todo. Como siempre, si quieres el codigo deja tu email y te lo envio a la brevedad.  Si te gusto el articulo ¿me regalas un like?. Saludos.

 
 

Como enviar un correo en PHP (funcion mail)

Como enviar un correo electronico con la funcion mail() de PHP. A continuacion muestro un ejemplo muy basico pero que se podria adaptar a algo mas completo. La funcion mail() de PHP tiene el objetivo de enviar un correo electronico, la sintaxis es

mail($destinatario, $asunto, $mensaje, $encabezados);

donde:
destinatario: Es el correo electronico (puedes poner varios separados con coma) a quien se envia el mensaje,
asunto: O subject es el motivo por el cual envias el correol al destinatario.
mensaje: Es el mensaje en si, es decir la informacion que le deseas hacer llegar/informar al destinatario. Puedes escribir HTML si asi lo especificas en la cabecera. Las lienas como maximo pueden tener 70 letras (caracteres).
encabezados: En esta parte se agrega informacion sobre quien envía el mensaje (remitente), si el mensaje va ir con copia, con copia oculta (From, Cc y Bcc) , si tendrá formato html o solo texto, etc. Si se incluyen varias cabeceras se deben separar con retorno de carro y salto de linea (\r\n). Ejemplo de dos cabeceras:

/* 
Cabeceras donde se especifica a quien va dirigido (To), 
el remitente (From), 
A quien responder (Reply to), 
se envia copia a algunamigo@gmail.com (CC), 
una copia oculta a otroamigo@gmail.com (Bcc).
*/

$cabeceras = 'To: Pepito suemailchafa@mipaginaweb.com, Juanito <juanito@mipaginaweb.com>' . "\r\n" .
'From: webmaster@mipaginaweb.com' . "\r\n" .
'Reply-To: gonzasilve@gmail.com' . "\r\n".
'Cc: algunamigo@gmail.com' . "\r\n".
'Bcc: otroamigo@gmail.com' . "\r\n";

Bueno, basta de teoria, si tienes dudas puedes ver la documentacion oficial de la funcion mail(), esta muy completa y hay mas ejemplos. a continuacion muestro un ejemplo muy sencillo; basicamente consta de 3 archivos como se aprecia en la siguiente imagen:

Logica de funcionamiento del ejemplo de envio de correo con PHP

Logica de funcionamiento del ejemplo de envio de correo con PHP

Como se puede observar el archivo principal e inicial es el index.php y cada vez que se carga puede mostrar o el formulario para enviar un nuevo correo o un mensaje (informando que hubo fallo/exito en el envio del correo).  Los archivos se describen brevemente a continuacion y se muestra su codigo y una imagen.

index.php
Este archivo es el punto de entrada del ejemplo, es la pagina principal y es el que muestra la informacion al usuario. Al abrirlo se comprueba si existe la variable estado (con ayuda de la funcion isset() ) y si no existe dentro de este archivo se “incrusta” o “inserta” otro archivo llamado cajamsg.html (con la funcion require); el cual es un formulario donde el usuario puede capturar los datos para enviar el correo, por el contrario si si existe se inserta un mensaje de exito/fracaso del envio del correo. Desde este archivo se envian los datos del formulario al archivo enviar_correo.php a travez del metodo POST.

<!--
    Instituto Tecnologico de Zacatepec, Morelos
		Descripcion:   Archivo principal que muestra un formulario (incrustado)
		para enviar un correo o muestra un mensaje avisando
		del exito/fracaso de un envio de correo.
Author:     Gonzalo Silverio  gonzasilve@gmail.com
Archivo:    index.php
-->

<HTML>
<HEAD>
     <TITLE>Pagina principal</TITLE>
	<link type="text/css" href="css/jquery.alerts.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.alerts.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>	
	<script type="text/javascript">
<!--
	$().ready(function() {
			//$("#comentarios").validate();
			
		$("#comentarios").validate({
			rules: {
			/*A continuacion los nombres de los campos y sus reglas a cumplir */
				nombr: {
				required: true
				},
				elcorreo: {
				required: true,
				email: true
				},
				asunt: {
				required: true
				},
				elmsg: {
				required: true
				}
			}
		});
		
			
	});
 //  -->
	</script>
	
</HEAD>
	<BODY >
	<TABLE WIDTH="95%" align="center" cellspacing="0" cellpadding="0" border=1>
	<TR>
		<TD bgcolor="#F2F9FB" align="center">
     <?php
     echo '<br><h2 align=center>Contacto</h2>';
		//Si la variable de estado existe entrar y ver que valor tiene
     if( isset( $_GET['estado'] ) )
     {
	if( $_GET['estado']=='enviado' )
	{
 		echo "<br><br>Su mensaje fue enviado correctamente";
 		echo "<br><br><a href='index.php'>VOLVER</a>";
	}
	else if( $_GET['estado']=='no_enviado' )
	{
 		echo "<br><br><b>Upss!!,</b> Ocurrio un error. SU MENSAJE NO PUEDE SER ENVIADO EN ESTE MOMENTO.";
	}
      }
      else
      {
	  echo 'Si lo deseas desde esta seccion puedes enviar un mensaje al administrador del sitio, algun comentario o sugerencia. <br>Cualquier critica constructiva sera bien recibida. <br><br>';
		//muestra el formulario para capturar los datos del correo
          require("cajamsg.html");
      }
          echo '   <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>';
     ?>
		</TD>
	</TR>
	</TABLE>
</BODY>
</HTML>

Como se puede observar la forma de insertar el archivo cajamsg.html es por medio de la funcion require() de php. Con esta se puede incluir incluso otros scripts php. La funcion isset() comprueba o verifica si una variable dada existe y devuelve true en caso de que si. La variable estado unicamente existe (se crea, llega) despues de enviar un correo. A continuacion una imagen de este archivo en el navegador cuando se esta a punto de enviar un correo (abajo ahi un boton que dice Enviar Comentario):

Formulario de envio de correo.

Formulario de envio de correo.

Ahora se muestra este mismo archivo despues de que se ha enviado el mensaje anterior (se dio click en el boton):

Mensaje para el usuario avisandole que se a enviado su correo.

Mensaje para el usuario avisandole que se a enviado su correo.

Por el contrario, si el correo no se pudo enviar; se muestra igualmente un mensaje avisando.

cajamsg.html
Este archivo unicamente contiene un formulario para capturar los datos para el envio del correo. Este archivo se inserta en el archivo index.php con ayuda de la funcion require() de PHP. El codigo de este archivo es:

<!--
                   Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Formulario HTML para el envio de un correo en PHP.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Archivo:        cajamsg.html
-->

<FORM id="comentarios" name="comentarios" method="POST" action="enviar_correo.php" >
<table bgcolor="#C2E5FF" border="1">
<tr><td>
	<table bgcolor="#C2E5FF">	
		<tr>
		<td>Su nombre:</td><td><input type="text" id="nombr" name="nombr" value="" maxlength="90" size="30"><br></td>
		</tr>
		<tr>
		<td>Su correo electronico:</td><td><input type="text" id="elcorreo" name="elcorreo" value="" maxlength="50"  size="30"><br></td>
		</tr>
		<tr>
		<td>Asunto:</td><td><input type="text" id="asunt" name="asunt" maxlength="50"  size="30"><br></td>
		</tr>
		<tr>
		<td>Su mensaje:<br><br> (Puede usar HTML) </td><td><textarea  rows="10" cols= "23" id="elmsg" name="elmsg" >Su comentario...</textarea><br></td>
		</tr>
		<tr>
		<td colspan="2" align="right"><input type="submit" value="Enviar Comentario" name="enviar"><br></td>
		</tr>
	
	</table>
</td></tr>
</table>
</FORM>

Note en el codigo como se ha especificado que los datos se envian a traves del metodo POST al archivo enviar_correo.php. A continuacion una imagen de esta pagina web antes de insertarse en el ejemplo:

Formulario para enviar un comentario al webmaster

Formulario para enviar un comentario al webmaster

enviar_correo.php
Este archivo es el que manda a llamar a la funcion mail() de PHP y es el que envia realmente el correo a su destinatario. A este archivo le llegan los datos del formulario que se ha insertado en index.html. Como se puede ver a traves de la funcion header() se redirije el navegador al archivo index.php y se envia por el metodo GET el estado del exito/fracaso del la funcion mail(). He puesto algunos comentarios en el codigo:

<?php
/*
           Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Archivo que usa la funcion mail() de php para enviar
		un correo electronico con datos que le llegan por el metodo
		POST.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Archivo:        enviar_correo.php
*/

	//Recuperar los datos que serviran para enviar el correo
     $seEnvio;		//Para determinar si se envio o no el correo
     $destinatario = 'gonzasilve@gmail.com';		//A quien se envia
     $elmensaje = str_replace("\n.", "\n..", $_POST['elmsg']);     //por si el mensaje empieza con un punto ponerle 2
     $elmensaje = wordwrap($elmensaje, 70);                       //dividir el mensaje en trozos de 70 cols
     //Recupear el asunto
     $asunto = $_POST['asunt'];
     //Formatear un poco el texto que escribio el usuario (asunto) en la caja
     //de comentario con ayuda de HTML
     $cuerpomsg ='
<html>
<head>
  <title>Tienes un mensaje!!</title>
</head>
<body>
<p>Holaa Gonza, alguien te mando un mensaje de tu pagina web http://gonzaslive.aegislinux.com.mx</p>
  <table>
    <tr>
      <td><b>Tu mensaje es:</b><br></td>
    </tr>
    <tr>
      <td>'.$elmensaje.'</td>
    </tr>
    <tr>
      <td><br><a href="http://gonzaslive.aegislinux.com.mx/ejemplos/enviar_correo/responder.php?correo='.$_POST['elcorreo'].'&asunto=FW: '.$asunto.'&nombre='.$_POST['nombr'].'">Responder</a></td>
    </tr>
  </table>
</body>
</html>
 ';
//Establecer cabeceras para la funcion mail()
	//version MIME
	$cabeceras = "MIME-Version: 1.0\r\n";
	//Tipo de info
	$cabeceras .= "Content-type: text/html; charset=iso-8859-1\r\n";
	//direccion del remitente
	$cabeceras .= "From: ".$_POST['nombr']." <".$_POST['elcorreo'].">";
	if(mail($destinatario,$asunto,$cuerpomsg,$cabeceras))
		$seEnvio = true;
	else
 		$seEnvio = false;

//Enviar el estado del envio (por metodo GET ) y redirigir navegador al archivo index.php
        if($seEnvio == true)
	{
		header('Location: index.php?estado=enviado');
	}
	else
	{
		header('Location: index.php?estado=no_enviado');
	}
?>

Se puede ver claramente como le di formato al cuerpo del mensaje y como e guardado en una variable TODO el cuerpo de ese mensaje (una pagina web completa) para que se vea mas bonito al destinatario cuando lo abra. A continuacion muestro una imagen del mensaje en mi bandeja de entrada de gmail de que efectivamente me ha llegado el correo.

Mensaje bandeja de entrada

Mensaje bandeja de entrada de Gmail

Ojo por que muchas veces estos mensajes llegan a la carpeta de spam (correo no deseado), en ese caso ahi que configurar la cuenta de correo ho avisar a los usuarios que revisen su carpeta de spam dependiendo de cual sea la situacion.

NUEVO
Como peticion del amigo Lucas que comento el 30 marzo 2012 a las 12:20 PM coloco un nuevo archivo PHP que permite responder un email. Este archivo se muestra al dar click en el enlace Responder que aparece al final del correo electronico, y rellena los campos del correo electronico, asunto y parte del comentario de respuesta.

responder.php

<?php
/*
    Instituto Tecnologico de Zacatepec, Morelos
Descripcion:   permite responder un correo, le llega el email destino y el asunto
Author:     Gonzalo Silverio  gonzasilve@gmail.com
Archivo:    responder.php
*/
 $destinatario = '';
 $nombreDestinatario = '';
 $asunto = '';
 
if( isset($_GET['correo']) && $_GET['correo']!=''  )
{
	//Recuperar los datos que serviran para responder el correo
     $destinatario 			= $_GET['correo'];		//A quien se envia
	 $nombreDestinatario 	= $_GET['nombre'];     
     //Recupear el asunto
     $asunto = $_GET['asunto'];
}

	 


?>
<HTML>
<HEAD>
     <TITLE>Responder Correo eletronico</TITLE>
</HEAD>
<BODY >

	<TABLE WIDTH="95%" align="center" cellspacing="0" cellpadding="0" border=1>
	<TR>
		<TD bgcolor="#F2F9FB" align="center"  >
			<br />
			<table bgcolor="#C2E5FF" border="1">
			<tr><td>
				<table bgcolor="#C2E5FF">
				<FORM name="comentarios" method="POST" action="enviar_correo.php">
					<tr>
					<td>Su nombre:</td><td><input type="text" name="nombr" value="" maxlength="90" size="30"><br></td>
					</tr>
					<tr>
					<td>Correo eletronico:</td><td><input type="text" name="elcorreo" value='<?=$destinatario ?>' maxlength="50" size="30"><br></td>
					</tr>
					<tr>
					<td>Asunto:</td><td><input type="text" name="asunt" value='<?=$asunto ?>' maxlength="50" size="30"><br></td>
					</tr>
					<tr>
					<td>Su mensaje:<br><br> (Puede usar HTML) </td><td><textarea rows="10" cols= "23" name="elmsg">Estimado <?=$nombreDestinatario; ?>, recibi su comentario y...</textarea><br></td>
					</tr>
					<tr>
					<td colspan="2" align="right"><input type="submit" value="Enviar Comentario" name="enviar"><br></td>
					</tr>
				</FORM>
				</table>
			</td></tr>
			</table>

		<br /><br /><br /><br /><br /><br /><br /><br />
		</TD>
	</TR>
	</TABLE>
</BODY>
</HTML>

 

Aca una imagen de este archivo:

Archivo para responder un correo

Archivo para responder un correo

 

En resumen, como vez es un ejemplo muuy basico de como enviar correos, pero al menos sirve para darte una idea. Bueno eso es todo y espero comentarios o dudas acerca del ejemplo. Aca dejo un enlace del ejemplo en funcionamiento http://gonzaslive.aegislinux.com.mx/ejemplos/enviar_correo/.

Por fa!, si vas a probar el ejemplo, al menos escribe algo coherente y no envies campos vacios, pues de verdad que funciona (y me saturas el correo).

Si quieres el codigo ya sabes solo deja tu e-mail en este blog (no lo solicites por el formulario de prueba, ya que me llega a un email que no reviso a diario) y cuando abra mi bandeja te lo mando lo antes posible.

Gracias por visitar mi blog, see you.

Como resaltar la sintaxis de codigo fuente usando la libreria GeSHi y PHP

Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

En este articulo voi a describir que hice para resaltar la sintaxis del codigo fuente de arriba (HolaMundo.c) con ayuda de GeSHi; una libreria creada para este proposito. Con resaltar la sintaxis me refiero a que las palabras reservadas del lenguaje de programacion en cuestion son coloreadas, igualmente las cadenas con otro color, los comentarios, etc. Resaltar la sintaxis de cada palabra en forma manual seria tedioso y frustante es por eso que se a creado GeSHi.

Esta libreria esta escrita en PHP y puede resaltar la sintaxis del codigo fuente de muchos lenguajes de programacion como PHP, HTML, C, C++, Java, ASM (si, la del codigo ensamblador tambien!), etc. hasta la fecha son mas de 100 lenguajes soportados y siguen en aumento. Muchos sitios web (foros, blogs, hostings, etc) usan Geshi para resaltar el codigo porque esta libreria es gratuita y facil de usar (aunque algunos digan lo contrario). En lo personal yo la conoci cuando tenia mi pagina web personal en el host gratuito http://www.000webhost.com pues ahi al momento de abrir un archivo (html ho php por ejemplo) para verlo el sistema me lo mostraba muy bonito y eso me llamo la atencion y empece a investigar sobre como se hacia eso ya que mi idea era publicar algunos de mis programas y codigo fuente en mi pagina web personal (todavia no conocia a wordpress.com).

Actualmente e migrado mi pagina web personal a otro servidor gratuito llamado http://www.260mb.com, pero sinceramente le doy muuy poco mantenimiento a dicha pagina: pues ahora que he conocido wordpress.com me ha fascinado y definitivamente me gusta mas porque me hace las cosas mas faciles. Esa pagina todavia la mantengo por que ahi aprendi muucho sobre HTML (las etiquetas basicas, csss, frames, etc) y de PHP+MySQL (sesiones, enviar correos, paso de informacion de una pagina a otra, etc); de lo cual poco a poco ire subiendo a este blog.
Y digo poco a poco porque que feo es crecer!, ahora tengo muchas actividades que realizar durante el dia y aunque soy soltero las materias de la carrera me consumen todo el tiempo. pero a veces (como ahora mismo ) me doy mis escapadas de la realidad y me meto a este cyber espacio a publicar cosillas que me parecen super interesantes. Bueno pongo un pantallazo de mi pagina, nada mas para que se den una idea de que sencilla era y si quieren visitarla pues aqui esta www.gonzasilve.260mb, a lo mejor algo les gusta, solo pidanlo .:

Mi pagina web Personal

Mi pagina web Personal

Creo que ya me estoy saliendo demasiado del tema, vamos a continuar pues con lo de la libreria GeSHi…

Origenes de GeSHi

GeSHi (Generic Syntax Highlighter) inicialmente nacio como una idea de tener un resaltador de sintaxis generico para el sistema de foros phpBB.
Comunidad oficial de PHPBB en español
Pero ha evolucionado y ahora es totalmente independiente de éste. La razon por la que el resaltador GeSHi es tan popular es que es extremadamente personalizable para todos los gustos, incluso los mismos usuarios le podemos añadir nuevos lenguajes para resaltar ya que es muy facil añadir uno, tambien se puede indicar a GeSHi que numere las lineas de codigo, o personalizar el color de las palabras clave, etc.

Requisitos de instalacion de GeSHi

  • Tener un interprete PHP (4.3.0 o superior)
  • Aproximadamente 5 MB de espacio en disco.

Como se puede ver, los requisitos son solamente dos y muy faciles de cumplir con ellos.

¿Donde puedo obtener Geshi?

Geshi se puede obtener desde su pagina oficial http://qbnz.com/highlighter/, en la seccion de descargas. Desde este sitio tambien se puede acceder a la documentacion en linea de GeSHi (desafortunadamente solo en ingles), yo personalmente ya me pase por ahi y lei un poco, no toda por que es mucha informacion y yo solo necesitaba resaltar la sintaxis de algunos codigos de mi pagina web para mostrarlos en la seccion de articulos.

Instalacion de GeSHi

Creo que ya es suficiente de tanta teoria, ahora paso a explicar como usar la libreria. Voi a ir describiendo por pasos para que sea mas facil:

  1. Descargar GeSHi. Obviamente, primero que nada nos dirigimos a la pagina oficial de GeSHi y damos clicken la seccion Downloads, la cual nos va a redireccionar a sourceforge.net donde podremos elegir la version de GeSHi que queremos. A la fecha actual en que estoy escribiendo esta entrada, la version mas reciente de GeSHi es la 1.0.8.10.
  2. Al dar click en el link de descarga (download) se abre un cuadro de dialogo para indicar donde queremos realizar la descarga (depende de la configuracion de tu navegador). En esta ventana lo hubicamos en algun lugar dentro de nuestro disco duro y daremos click al boton Guardar . Yo por ejemplo en Linux Ubuntu tengo instalado a PHP como modulo de Apache (es decir mi maquina es un servidor) y la pagina donde se alojan las paginas web de mis servidor Apache es /usr/local/php/servidor_web/htdocs. Asi que descargue GeSHi en /usr/local/php/servidor_web/htdocs (entonces GeSHi quedo en /usr/local/php/servidor_web/htdocs/geshi-1.0.8.10.tar.gz). Si tu no tienes a tu computadora como servidor pero ya te creaste una cuenta en algun hosting gratuito por ejemplo http://www.tuwebhostgratis.algo/miusuario puedes descargar GeSHi en cualquier lugar de tu PC (en tu escritorio por ejemplo, sigue leyendo). El archivo pesa como 880 Kb.
  3. Descomprimir/Desempaquetar GeSHi En mi caso yo en ubuntu solo doy click derecho al archivo y elegir Extraer aqui. Entonces ahora la libreria GeSHi esta en /usr/local/php/servidor_web/htdocs.

    Si tu usas algun otro software y no te permite hacer esto ten cuidado y no vayas a crear una carpeta para geshi ya que GeSHi ya viene comprimido en una carpeta (lo digo nada mas que nada para que no te vayas a confundir en los siguientes pasos de este articulo). En tu caso si tienes hosting gratuito (ej. http://www.tuwebhostgratis.algo/miusuario) descomprime el archivo ahi mismo en tu escritorio ( o donde lo hayas descargado) y sube la carpeta geshi completa a tu hosting gratuito con algun programa FTP (como FileZilla o SmartFTP), entonces tu libreria GeSHi quedaria en http://www.tuwebhostgratis.algo/miusuario/geshi). En mi caso de Ubuntu GeSHi quedo en /usr/local/php/servidor_web/htdocs/geshi. Esto es todo, ahora la libreria esta lista para ser usada. El archivo ya descomprimido ocupa como 5 Mb.

Resaltar tu primer codigo usando GeSHi.

Ahora vamos a hacer dos ejemplos muy sencillos para ver como se usa esta libreria, para esto voi a suponer que usas Linux Ubuntu y tienes el interprete PHP como modulo de apache ejecutandose en tu maquina. Empecemos

EJEMPLO #1; RESALTAR UN TROZO DE CODIGO
En este primer ejemplo voi a resaltar un trozo de codigo de java y en especifico voi a resaltar el metodo java que calcula el factorial de un numero.

  1. El siguiente archivo pruebaGeshi1.php debes colocarlo en la carpeta raiz de tu servidor web (en el mismo nivel donde tienes la carpeta geshi), es decir, en mi caso en /usr/local/php/servidor_web/htdocs/pruebaGeshi1.php:
    <!--
               Instituto Tecnologico de Zacatepec, Morelos
    Descripcion:    Genera un Documento HTML que resalta la sintaxis de un trozo  
    				de codigo con ayuda de la libreria GeSHi.
    Author:         Gonzalo Silverio  gonzasilve@gmail.com
    Archivo:        pruebaGeshi1.php
    -->
    <HTML>
       <HEAD>
            <TITLE>Usando la libreria GeSHi I </TITLE>
       </HEAD>
    <!--Poner Fondo negro a la pagina web -->
       <BODY bgcolor="black">
       <br><br>
    	<?php
    	 require('geshi/geshi.php');            /* Incluir la libreria del resaltador de sintaxis Geshi*/
    	// Asignamos a una variable el codigo al cual queremos resaltar su sintaxis
      $trozo_codigo = "public static int factorial (int n)
    {
      int result=1;
      while(n>1)
      {
        result=result*n;
        n=n-1;
      }
      return result;
    }";
    	//Indicar el lenguaje de programacion a resaltar  
      $lenguaje="java";
    //Instanciar clase GeSHi y le pasamos el codigo a resaltar y el lenguaje
      $migeshi= & new GeSHi($trozo_codigo,$lenguaje);
    	// Activar la numeracion de lineas
      $migeshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, true); 
     	// cambiar estilo de numeros de lines   y el fondo
      $migeshi->set_line_style('background: yellow', 'background: #DFEEF3', true);   
    	?>
    <!-- A continuacion metemos dentro de una tabla HTML el codigo ya resaltado
    		la funcion parse_code() se la clase GeSHi permite mostrar en el navegador
    		el codigo fuente ya resaltado.
     -->
       <table width = "90%"  align="center" cellpadding="0" cellspacing="0" bgcolor="white" border=0 bordercolor="#000000">
         <tr><td><?php echo $migeshi->parse_code(); ?></td></tr>
       </table>
    <br>
       </BODY>
    </HTML>
    

    Como vez en los comentarios e puesto lo que hace cada cosa. Una linea que me parece muy importante y que me gustaria mencionar es la linea donde se incluye a la libreria GeSHi, es decir en la linea:

     require('geshi/geshi.php');
    

    Es en esta linea donde indicamos que la libreria GeSHi esta ubicada dentro dentro de una carpeta llamada geshi. Menciono esto porque un error muy comun es trata de incluir a la libreria erroneamente asi:

     require('geshi.php');
    

    ho colocar el archivo .php dentro de la carpeta de geshi e intentar incluir la libreria con require(‘geshi/geshi.php’), siendo que la libreria esta ai mismo donde esta el archivo .php (espero que me hayas entendido).

  2. Probar el ejemplo. A continuacion abre un navegador y en la barra de direcciones escribes http://localhost/pruebaGeshi1.php y presionas la tecla ENTER, te debe aparecer algo como esto:
    Trozo de codigo java al que GeSHi le a resaltado la sintaxis

    Trozo de codigo java al que GeSHi le a resaltado la sintaxis

Como ves yo e indicado el puerto en la barra de direcciones porque con ese puerto configure a mi apache cuando lo instale, pero a ti te deberia funcionar sin especificar el puerto si hiciste una instalacion tipica (por defecto el navegador usa el puerto 80, y no es necesario indicarlo). Bueno ahora vamos con el 2do ejemplo:

EJEMPLO #2; RESALTAR UN ARCHIVO DE CODIGO FUENTE
En este 2do ejemplo voi a mostrar como resaltar un todo un archivo de codigo fuente y en especifico voi a resaltar un archivo de codigo fuente de C; el clasico Hola Mundo.

  1. El siguiente archivo HolaMundo.c colocalo en la raiz de tu servidor web (en mi caso en /usr/local/servidor_web/htdocs). Este archivo es el que GeSHi va a leer y le va a resaltar su sintaxis:
    /* 
      Descripcion:	El programa clasico del "Hola mundo"; muestra un mensaje en pantalla 
      Author:		Gonzalo Silverio   gonzasilve@gmail.com
      Archivo:		HolaMundo.c
    */
    
    /* Inclusion de librerias estandar */
    #include<stdio.h>
    #include<conio.h>
    
    int main(void)			/* Rutina principal */
    {
     clrscr();				/* Limpiar la pantalla */
     printf("Hola mundo!\n");	/* Muestra mensaje y salta de linea*/
     getch();				/*Espera a que el usuario presiona 1 tecla*/
     return 0;				/* Termina el programa normalmente*/
    }
    
  2. El siguiente archivo PruebaGeshi2.php colocalo en la raiz de tu servidor web (en mi caso en /usr/local/servidor_web/htdocs). Este es el que leera el archivo anterior (HolaMundo.c), le resaltara la sintaxis y lo mostrara en el navegador. En los comentarios explico cada cosa:
    <!--
               Instituto Tecnologico de Zacatepec, Morelos
    Descripcion:    Genera un Documento HTML que resalta la sintaxis del codigo fuente 
    				de un archivo con ayuda de la libreria GeSHi y lo muestra en el navegador.
    Author:         Gonzalo Silverio  gonzasilve@gmail.com
    Archivo:        pruebaGeshi2.php
    -->
    <HTML>
       <HEAD>
            <TITLE>Usando la libreria GeSHi II </TITLE>
       </HEAD>
       <!-- Fondo de pagina negro -->
       <BODY bgcolor="black">
       <br><br>
    	<?php
    	 require('geshi/geshi.php');            /* Incluir la libreria del resaltador de sintaxis Geshi*/
    	$archivo = "HolaMundo.c";               /*Indicar cual archivo abrir*/
    	/*abrimos el archivo en modo lectura*/  
      $punteroArch = fopen($archivo,'r');         
    	/* leemos el archivo */
      $codigo = fread($punteroArch, filesize($archivo));       
    	/*Indicar el lenguaje de programacion a resaltar*/  
      $lenguaje="c";	
    	/*Instanciamos la clase, le pasamos el codigo a resaltar y el lenguaje*/
      $migeshi= & new GeSHi($codigo,$lenguaje);
    	/* Activar la numeracion de lineas */
      $migeshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS, true);    
     	/* cambiar estilo de numeros de lineas*/  
      $migeshi->set_line_style('background: yellow', 'background: #DFEEF3', true);
    	?>
    <!-- A continuacion metemos dentro de una tabla HTML el codigo ya resaltado
    		la funcion parse_code() se la clase GeSHi permite mostrar en el navegador
    		el codigo fuente ya resaltado. -->
       <table width = "90%"  align="center" cellpadding="0" cellspacing="0" bgcolor="white" border=0 bordercolor="#000000">
         <tr><td><?php echo $migeshi->parse_code(); ?></td></tr>
       </table>
    	<?php
      fclose($punteroArch);   /* Cerrar el archivo abierto */
    	?>
    <br><br>
       </table>
       </BODY>
    </HTML>
    

    Nuevamente vuelve a abrir un navegador y en la barra de direcciones escribe la direccion http://localhost/pruebaGeshi2.php y presionas la tecla ENTER, te debe aparecer algo como la imagen que esta al principio de esta entrada de blog, bueno la pongo otra vez:

    Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

    Archivo de codigo HolaMundo.c al que GeSHi le ha resaltado la sintaxis

    Hasta aqui le voi a dejar y espero que me hayas entendido la mayoria. Si tienes dudas o quieres los fuentes puedes dejar tu comentario con tu e-mail y con gusto si puedo te ayudo a hacer funcionar esto. hasta pronto.

Hola Mundo en un PDF con la libreria FPDF y PHP

Este es el ejemplo clasico del mensaje Hola mundo en un documento PDF con ayuda de la libreria FPDF y PHP. Antes de mostrar el codigo quiero decirte que FPDF es una libreria (una especie de API) para crear documentos PDF en PHP. Esta libreria es muy sencilla de instalar, usar y lo mejor de todo es que es FREE. Para usar esta libreria y crear tu primer PDF, realiza los siguientes pasos:
[INSTALACION]

  1. Visitar la pagina http://www.fpdf.org/ y en la seccion de Descargas te descargas (valga la redundancia) la libreria en su version mas reciente en formato ZIP. La guardas en la carpeta de tu servidor web, por ejemplo en mi caso la carpeta de mi servidor apache es c:\servidor\php\webs\ y ahi es donde coloque mi copia, entonces quedo algo asi c:\servidor\php\webs\fpdf16.zip.
  2. Descomprime el archivo en una carpeta con el mismo nombre (en winrar esto se hace con click derecho–>Extraer en fpdf16); en mi caso entonces me quedo instalada en c:\servidor\php\webs\fpdf16\. Dentro de esta carpeta hay 3 carpetas (doc, font, tutorial) y varios archivos; de los cuales nos interesa el archivo fpdf.php que es la libreria FPDF, si lo abres podras ver que no es mas que una clase PHP y es la que nos permite crear los PDFs.

Bueno ahora si muestro el codigo fuente del Hola Mundo el cual es un ejemplo muy sencillo.
[EJEMPLO]

<!--
                   Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Muestra el Clasico programa Hola mundo dentro dentro de un documento PDF
					con ayuda de la libreria FPDF y PHP.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Archivo:        FPDF_HolaMundo.php
-->

<?php
   require('fpdf16/fpdf.php');

   $pdf=new FPDF();	
   $pdf->AddPage();	//Agregar una pagina
   $pdf->SetFont('Arial','B',20);	//Letra Arial, negrita (Bold), tam. 20
   $pdf->Cell(80,40,'¡Hola, Mundo de PDFs en PHP!');
	//Nombre del archivo de salida
   $pdf->Output('FPDF_HolaMundo.pdf');
	echo "<br>Se ha generado el pdf";
?>

Este ejemplo en mi caso esta almacenado en c:\servidor\php\webs\ (no dentro de la carpeta FPDF, error muy comun), porque como ves dentro del codigo se incluye la libreria con una ruta relativa. Aca una imagen de donde debes guardar:

Carpeta de mi servidor web Apache

Carpeta de mi servidor web Apache



Suponiendo que tu servidor web cuenta con soporte para PHP y se esta ejecutando, entonces para abrir ver el ejemplo abres tu navegador preferido y en la barra de direcciones escribes http://localhost/FPDF_HolaMundo.php. Se va a mostrar un simple msg avisando que el PDF se ha generado; ahora revisa la carpeta de tu servidor web (en mi caso c:\servidor\php\webs\) y veras un nuevo archivo PDF llamado FPDF_HolaMundo.pdf abrelo y veras este clasico hola mundo:
Clasico Hola mundo en una PDF con PHP.

Clasico Hola mundo en una PDF con PHP.



Y bueno pues creo que ya hay mucha documentacion acerca de esta libreria en la red; incluso en la misma pagina de FPDF hay un tutorial excelente y es por eso que no me desgasto en poner mas y te lo dejo de tarea preguntarle a papa Google para que sirve cada funcion de esta clase. Posteriormente expondre algo sobre como crear PDFs con datos provenientes de una Base de datos, creo que es algo mas interesante. Bueno hasta pronto.

Como hacer un INSERT y un SELECT en una BD de MySQL usando PHP

Desde hace ya tiempo tenia ganas de exponer algo sobre PHP pero hasta hoy me di a la tarea de invertir algo de tiempo en hacerlo. Y es que muchos dicen que ya PHP esta cayendo en desuso y otros que esta todavia muy fuerte, que esto y que el otro, la verdad es que no e investigado estadisticas para dar mi propia opinion. Pero creo que es un buen lenguaje web y cualquier estudiante de sistemas deberia tener a la mano algun apunte aunque sea algo basico, por eso me decidi a exponer algo.

En este ejemplo doy por hecho que ya tienes un servidor Apache correctamente instalado y configurado para cargar como modulo al PHP, sino sabes que es eso o todavia no lo tienes pues seria bueno irte ahora mismo a otro sitio y leer algo previo, por que sino no vas a entender mucho.

El ejemplo es muy sencillo; simplemente se realiza una insercion (INSERT) en una tabla que se llama usuarios, la tabla usuarios solamente tiene 3 campos y esta dentro de una Base de datos (BD) que lleva por nombre prueba.

Aca el comando SQL para crear la BD prueba y la tabla usuarios:

create database prueba;
create table usuarios(nick char(60) not null, pw char(40), correo char(255), primary key(nick));

Aca una imagen muestra en forma grafica el aspecto de la tabla ( creada con el workbench ):

Tabla usuarios

El ejemplo consta de tres archivos de codigo fuente; los cuales se describen a continuacion:

formularioAlta.html

Este archivo genera un formulario con tres campos de texto donde el usuario ingresara los datos que desea insertar en la tabla usuarios, una vez que el usuario a escrito los datos debe dar click en el boton Dar de alta! el cual es un boton submit que manda a llamar al archivo guardarAlta.php , dicho archivo es el que realmente guarda los datos en la tabla. Aca el codigo fuente:

<!--
                   Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Archivo fuente HTML que crea un formulario para capturar datos que seran
                enviados a un archivo .php para insertarlos en una BD de MySQL.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Fecha:          02/09/2010
Archivo:        formularioAlta.html
-->
<HTML>
   <HEAD>
        <TITLE>PHP y MySQL -Capturar datos alta</TITLE>
   </HEAD>

   <BODY>
      <FORM method="POST" action = "guardarAlta.php">
        Su nombre de usuario: <INPUT TYPE="text" name="nick" id="nick"><BR>
        Su Contraseña: <INPUT TYPE="password" name="password" id="password"><BR>
        Su correo electronico: <INPUT type="text" name="correo" id="correo"><BR><BR>
        <INPUT type="submit" NAME="enviar" VALUE="Dar de alta!" id="enviar">
      </FORM>
   </BODY>
</HTML>

guardarAlta.php
Este archivo abre una conexion con el servidor MySQL, captura los datos que llegan por el metodo POST, realiza dos comprobaciones para validar los datos a insertar, si los datos logran pasar satisfactoriamente las dos validaciones se hace la insercion y se avisa al usuario del exito de la operacion. A continuacion el codigo fuente, los comentarios indican donde se realiza cada cosa:

<!--
                   Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Archivo fuente de PHP que muestra como realizar una operacion INSERT
                en una BD de MySQL, con datos que llegan de un formulario HTML.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Fecha:          02/09/2010
Archivo:        guardarAlta.php
-->

<HTML>
<HEAD>
     <TITLE>PHP y MySQL -Resultados de alta</TITLE>
</HEAD>

<BODY>

<?php
   //Abrir una conexion con el servidor MySQL
   $conexio = mysql_connect("localhost","root","12345");
   mysql_select_db ("prueba", $conexio) OR die ("No se puede conectar");

   //Recoger datos que llegan
   $nik=$_POST['nick'];
   $pas=$_POST['password'];
   $cor=$_POST['correo'];

   //1.- Comprobar que no haya otro usuario con el mismo nick
   $sql="SELECT nick FROM usuarios WHERE nick='".$nik."'";
   $result=mysql_query($sql,$conexio);
   if($row=mysql_fetch_array($result))
   {
     echo "El nick <b>".$nik."</b> ya fue elegido por otro usuario.";
     exit();   /*cancelar la ejecucion del script y por tanto de la pagina web*/
   }
   //2.- Comprobar que no haya otro usuario registrado con el mismo correo
   $sql="SELECT correo FROM usuarios WHERE correo='".$cor."'";
   $result=mysql_query($sql,$conexio);
   if($row=mysql_fetch_array($result))
   {
     echo "El correo electronico <b>".$cor."</b> ya fue registrado por otro usuario.";
     exit();  /*cancelar la ejecucion del script y por tanto de la pagina web*/
   }
   //Si se ha logrado pasar las dos validaciones anteriores, entonces...
   //Realizar el INSERT en la tabla
   mysql_query("INSERT INTO usuarios(nick,pw,correo) VALUE ('$nik', '$pas', '$cor')",$conexio);
   echo "Registro Exitoso! <br><br> Usuario: <b>".$nik."</b> <br>Mail: <b>".$cor."</b>";

   //Cerrar la conexion
   mysql_close($conexio);
?>
 <BR><BR>
 <form method="POST" action="mostrarRegistros.php">
       <input type="submit" name="enviar" id="enviar" value="Ver registros de tabla">
 </form>
</BODY>
</HTML>

mostrarRegistros.php
Este archivo de codigo fuente abre una conexion con el servidor MySQL, realiza una seleccion (SELECT) de todos los registros de la tabla usuarios y los muestra en una tabla de tres columnas (3 campos tiene la tabla). A continuacion el codigo, otra vez los comentarios indican donde se realiza cada cosa:

<!--
                   Instituto Tecnologico de Zacatepec, Morelos
Descripcion:    Archivo fuente de PHP que muestra como realizar una operacion SELECT
                en una BD de MySQL.
Author:         Gonzalo Silverio  gonzasilve@gmail.com
Fecha:          02/09/2010
Archivo:        mostrarRegistros.php
-->
<HTML>
<HEAD>
     <TITLE>PHP y MySQL -Mostrar datos</TITLE>
</HEAD>

<BODY>

<?php
   //Abrir una conexion con el servidor MySQL
   $conexio = mysql_connect("localhost","root","12345");
   mysql_select_db ("prueba", $conexio) OR die ("No se puede conectar");

   //Seleccionar todos los registros
   $sql="SELECT * FROM usuarios";
   $result=mysql_query($sql,$conexio);

   //Mostrar los registros en una tabla en el navegador
   echo "<TABLE BORDER='1' width=50% align=center>";
   echo "<TR align=center><TD><b>Nick</b></TD><TD><b>Password</bd></TD><td><b>correo</b></td></TR>";
   while ($row=mysql_fetch_array($result))
   {
     echo "<TR><TD>".$row["nick"]."</TD><TD>".$row["pw"]."</TD><td>".$row["correo"]."</td></TR>";
   }
   echo "</TABLE>";

   //Cerrar la conexion
    mysql_close($conexio);

?>
<center>
   <br>
    <form method="POST" action="formularioAlta.html">
          <input type="submit" name="nuevo" id="enviar" value="Nuevo contacto">
    </form>
</center>
</BODY>
</HTML>

En resumen la logica del ejemplo es: El usuario abre el archivo formularioAltas.html en un navegador –> el usuario ingresa los datos y da clic en el boton submit –> Los datos son enviados al archivo guardarAlta.php –> Una vez que llegan los datos, se insertan en la BD (ho se muestra un msg de error de validacion) –> El usuario da clic en el boton Ver registros el cual es un boton submit y manda a llamar al archivo mostrarRegistros.php–> El archivo mostrarRegistros.php muestra los datos en el navegador.

A continuacion unos pantallazos de la ejecucion del ejemplo:

El usuario captura los datos y da clic en el boton Dar de alta!

formularioAltas.html

Se muestran al usuario resultados de la insercion, el usuario debe dar clic en el boton Ver registros de tabla

guardarAltas.php

Se muestran los datos en el navegador

mostrarRegistros.php Hasta pronto, comenta en caso de cualquier duda.

A %d blogueros les gusta esto: