LeeMiBlog

 


Web sobre Informática, Internet y Nuevas Tecnologias.

Un lugar en el que podrás encontrar articulos, noticias, tutoriales, trucos, ayudas, etc...

Inicio   Categorias   Contactar   Politica de Privacidad
Tu Primera Aplicación Web (1ª Parte)
Escrito por Manu   
Domingo, 02 de Septiembre de 2007 23:00

Empiezo con este una serie de 3 artículos, traducidos del blog de Paul Stamatiuo, sobre programación de aplicaciones web con PHP y MySQL. ¿Porqué éste y no otro? Pues por su claridad y porque desde un nivel muy asequible llega a desarrollar una verdadera aplicación web en PHP y MySQL. Espero que tenga aceptación y así me anime a seguir traduciendo artículos interesantes sobre este tema que hay muchos en la web, pero claro la mayoría en inglés. Y si queréis dejad vuestros comentarios sobre que os parece.

Y sin más prolegomenos paso al artículo en sí.

Enlace a 2ª Parte - Enlace a 3ª Parte

En su forma más básica, una aplicación web se compone normalmente de multiples ficheros en los que se utilizan las tecnología PHP y MySQL sobre un servidor LAMP (Linux, Apache, MySQL, PHP). PHP nos da un medio potente para llevar a cabo tus funciones de la aplicación web por medio de scripts que se ejecuten en el servidor mientras que MySQL se usa para almacenar la información en una base de datos. En esta serie de artículos, te mostraré lo fácil que es crear una sencilla framework para aplicaciones web, las cuales podrás adaptar para casi cualquier propósito . todo ello con solo un conocimiento básico de PHP y MySQL.


Planificación y Diseño de la Base de Datos

Antes de empezar a crear la aplicación web necesitar saber que es lo que tu web va a hacer y que necesitarás almacenar en la base de datos. Te mostraré como utilizar cuentas de usuario en este tutorial.

Tendrás una tabla dedicada a almacenar la información de los usuarios; tales como el nombre de usuario, el password, email, sesión e identificador del usuario. Dependiendo de lo que vaya a hacer tu aplicación web podrías tener más campos relacionados con el usuario. Mi aplicación web "buscador de fiestas" tiene campos adicionales como edad, ciudad y provincia. Además podrías tener otra base de datos para otros tipos de datos almacenados en tu aplicación web - si tu aplicación gestiona eventos, probablemente tendrás una tabla para los eventos que incluya campos como fecha, hora, calle, código postal, ciudad, provincia, etc.

Te dejaré el diseño de otras tablas a tí, así que continuaré con la base de datos y tabla para los usuarios. Si quieres aprender más sobre diseño de base de datos, echa un vistazo a este artículo (en inglés). Lo que quiero hacer por ahora: una base de datos con una tabla "usuarios" que contenga los campos "user", "password", "email", "session" e "id". El "id" de usuario se podrá usar luego para realizar búsquedas de MySQL sobre usuarios específicos ya que estableceré que el "id" se incremente automáticamente con cada nuevo usuario. Poner los indices con "auto-incremento" es además un buen hábito de programación.

Asumiendo que tienes phpMyAdmin instalado en tu servidor, ve a la página de inicio de phpMyAdmin y crea una nueva base de datos que se llame "webapp". Para aquellos que no se manejen bien con phpMyAdmin, puedes ejecutar el siguiente código un vez estés conectado a MySQL.

create database webapp;

Crea la tabla "users" seleccionando la recien creada base de datos "webapp" en phpMyAdmin y localizando el texto "Crear nueva tabla en base de datos webapp" al final de la página. Teclea "users" para el nombre de la tabla y 5 para el número de campos. Recomiendo usar phpMyAdmin para la siguiente parte - completar los detalles para cada uno de los 5 campos.

Crear nueva tabla

El próximo obstáculo a vencer se refiere a los tipos de datos y atributos en la creación de nuestra tabla de usuarios. El "ide" de cada usuario debería ser un entero de hasta 7 digitos [ int(7) ]. Al menos que esperes tener mas de un millón de usuario querrás mantener ese valor lo más bajo posible. Lo mismo sucede con la mayoría de los tipos de datos para el resto de campos . manténlos tan pequeños como sea posible para reducir la sobrecarga e incrementar la velocidad. Carl Henderson de Flickr explica este concepto con todo detalle en su libro "Building Scalable Web Sites" (Construyendo Sitios Web Escalables).

El resto de campos que tenemos - user, password, email y session, serán todos del tipo "varchar" pero podrían variar sus longitudes. Para direcciones de email y nombres de usuario, creo que con 32 es suficiente. Lo que sería varchar(32). El campo "sessions" será varchar(32) también debido a la forma en que estableceré las sesiones PHP. Finalmente, el campo password se fijará como varchar(32) ya que implementaré encriptación MD5 antes de almacenar o cambiar cada password.

CREATE TABLE `users` (
id` INT( 7 ) NOT NULL AUTO_INCREMENT ,
user` VARCHAR( 32 ) NULL ,
password` VARCHAR( 32 ) NULL ,
email` VARCHAR( 32 ) NULL ,
session` VARCHAR( 32 ) NULL ,

INDEX ( `id` )
} TYPE = MYISAM ;

Tabla
Como quedaría la tabla "users" en phpMyAdmin


Conectando a la Base de Datos

Antes de empezar con las funciones en PHP para la creación y acceso a la información del usuario, necesito escribir unas cuantas lineas de código PHP para conectar a la base de datos MySQL. En un fichero que se llame "util.php" pondré las siguientes lineas:

<?php

if( !defined(‘IN_PHP’) ) {
die(“Intento de Hacking”);
}

$mysql_host = “localhost”;
$mysql_user = “root”; // TU NOMBRE DE USUARIO PARA LA B.D.
$mysql_pass = “root”; // TU PASSWORD PARA LA B.D.
$mysql_db = webapp;

?>
El fichero se cargará con cada fichero en la aplicación web que necesite acceder a la base de datos. Las primeras lineas son como precaución para asegura que nadie pueda ver directamente este fichero y así "robar" la información de acceso a tu base de datos. En todo el resto de ficheros PHP de la aplicación web definiré "IN_PHP", permitiendo así que se acceda a "util.php".

Ahora para conectar a la base de datos, tengo un sencilla funcione en un nuevo fichero que se llama "functios.php" que se incluirá tmabién en cada fichero de la aplicación web que necesite conectar a la base de datos. Esta función se llama xmysql_connect() ya que ya existe una función mysql_connect() en PHP. Este fichero también tiene el código para el "IN_PHP" como seguridad básica.
<?php

if( !defined(‘IN_PHP’) ) {
die(“hacking attempt”);
}

function xmysql_connect() {

global $mysql_host, $mysql_user, $mysql_pass, $mysql_db;
@mysql_connect($msql_host, $mysql_user, $mysql_pass)
or die(‘Could not connect to database: ‘ . mysql_error());

mysql_select_db($mysql_db)
or die(‘Could not select database: ‘ . mysql_error());
}

?>
Cuando xmysql_connect() se ejecuta en otros ficheros de la aplicación web que incluyen util.php, functions.php y definen "IN_PHP", se realiza una conexión con éxito a la base de datos. Puedes ver como se accede a la infromación de la base de datos desde util.php. Una cosa que aprenderás rapidamente acerca de PHP es que debes declarar variables como "global" antes de poder usarlars dentro de una función.

Cuando veas "die()", dará como salida una frase cuando la acción con la que se compare falle. Por ejemplo, si olvido especificar el nombre de una base de datos, mysql_select_db() no podrá ejecutarse y dará como salida "No se puede seleccionar la B.D.:" y concatenado (eso es lo que hace el punto) el error mysql. Mostrar los errores de esta manera es una buena práctica y será de ayuda cuando estemos depurando.


¿ Que Hacemos con los Usuarios ?

Para gestionar cuentas de usuario, se necesitan varias funciones que he incluido en el fichero functions.php. La primera función que vemos a continuación, "create_user()", toma tres parámetros y se los pasa a la base de datos para crear un nuevo usuario. Si tu aplicación web controla otros campos además del nombre, password y email, tendrás que editar esta función para adecuarla con los parámetros extra.

La siguiente función, "user_exists()", como se puede adivinar chequea si un usuario ya existe con ese nombre ($user) en la base de datos. Esta se usará más tarde cuando se creen nuevos usuarios. Mientras tanto, get_user() chequea la base de datos para obtener la información del usuario actualmente conectado - basándose en la sesión. Finalmente, do_login() y do_logout() hacen exactamente lo que piensas mientras make_safe() es una función muy útil que me dió Josh Pigford que se usará mucho posteriormente para asegurar que el sitio no es vulnerable a entradas de dato dañinas (previene cosas como XSS en los formularios). Junto con la validación de formularios en la entrada de datos. Hay un artículo fantástico que toca en profundidad varios métodos de validación de datos ( validación de números de teléfono y cosas así) en el libro de O'Really Web Database Applications with PHP & MySQL (Aplicaciones Web de Base de Datos con PHP y MySQL).

function create_user($user, $password, $email) {   
$encpwd = md5($password);
$query = "insert into users set user=’$user’,".
"password=’$encpwd’, email=’$email’";

$result = mysql_query($query);
}

function user_exists($user) {

$query = “select user from users where user=’$user’”;
$result = mysql_query($query);
if($result == NULL)
return false;

$line = mysql_fetch_array($result, MYSQL_ASSOC);
mysql_free_result($result);

return $line !== FALSE;
}

function get_user() {
$query = "select user from users where session=’".
session_id()."‘";

   $result = mysql_query($query);
if($result == NULL)
return NULL;
$line = mysql_fetch_array($result, MYSQL_ASSOC);
mysql_free_result($result);
if($line === FALSE)
return NULL;

return $line[‘user’];
}

function do_login($user, $password) {
$encpwd = md5($password); //encrypt password with MD5!
$query = “select user, password from users where user=’$user’”;

$result = mysql_query($query);

if($result == NULL)
return false;

$line = mysql_fetch_array($result, MYSQL_ASSOC);
mysql_free_result($result);

if( $line[‘password’] !== $encpwd )
return false;

$query = "update users set session=’".session_id().
"‘ where user=’$user’";

$result = mysql_query($query);
return true;
}

function do_logout($user) {
$query = “update users set session=” where user=’$user’”;
//eso limpia la sesión
$result = mysql_query($query);
}

function make_safe($variable) {
$variable = htmlentities($variable, ENT_QUOTES);
if (get_magic_quotes_gpc()) {
$variable = stripslashes($variable);
}
$variable = mysql_real_escape_string(trim($variable));
$variable = strip_tags($variable);

return $variable;
}

Estas funciones terminan el fichero functions.php así que ahora puedo empezar a concentrarme en el fichero PHP principal y los forms.

 

El Framework Básico

Ahora que me he hecho cargo de la mayoría de las funciones vitales, es hora de empezar a codificar el fichero index.php. Cada nuevo fichero requerirán unos cuantos "includes" y comandos así que crear una fichero header.php que se incluya en cada fichero es una idea excelente. Mi fichero header.php se compone de las siguientes lineas:

<?php

define(‘IN_PHP’, true);

// Seguridad muy muy básica
include(‘util.php’);
include(‘functions.php’);

session_start();

xmysql_connect();
//Las próximas lineas son opcionales
//proveen con títulos de página únicos.
$url = $_SERVER[‘REQUEST_URI’];

$pages = Array(
“/about.php” => “» About”,
“/blah.php” => “» Blah”,
“/blah2.php” => “» Blah 2″
);

$title = $pages[$url];
?>

< !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”>
<link rel=“stylesheet” type=“text/css”
media=“screen” href=“style.css”/>

<head>
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8″/>

<title>Mi Primera Aplicación Web
<?php echo $title; ?>
</title>
</head>

Primero, definí mi seguridad básica como prevención con la frase del "IN_PHP" que util.php y functions.php buscarán, luego incluí esos dos ficheros. Y tras eso, se llama a session_start() para inicializar la sesión del usuario. Finalmente, se ejecuta la función xmysql_connect() de functions.php. Ahora tenermos un conexión activa con la base de datos.

Las próximas lineas de PHP son un método ingenioso para alterar dinámicamente los títulos de las páginas dependiendo de en que página esté el usuario. Tienes que introducir las páginas manualmente y su título correspondiente en el array $pages. El código toma la página actual solicitada opr el usuario con REQUEST_URI, mira en el array y muestra el título apropiado. Ya que el título de la página se declara luego como "Mi Primera Aplicación Web" y entonces se hace un "echo $title" de PHP, el título completo para una página hipotética "about.php" sería "Mi Primera Aplicación Web » About".

El fichero header también enlaza a un fichero CSS pero no cubriré nada sobre CSS o estilos en esta serie de posts. El fichero header es donde puedes cargar otros ficheros javascript que tu apliación web pueda usar o cosas como tu clave API de google si tu aplicación usa Google Maps.

Aquí acaba esta primera parte de una serie de tres. Espero no tardar mucho en traducir la segunda parte, así que si estais interesados volved pronto por aquí, o seguid mi RSS donde se publicarán cuando los publique.

Enlace a 2ª Parte - Enlace a 3ª Parte
Hits: 10373
Comentarios (6)add comment
Hola, muchas gracias por tu iniciativa. Aquí tienes un seguidor, ya que me ha parecido muy interesante y voy a seguir lo que vayas poniendo.
¡Lo dicho, muchas gracias y un saludo!
1

13-08-08
Markus: ...
Hola

Me parece interesante el artículo si es para un publico que está comenzando y que tiene avidez por saber de que va eso de la programación web ya que por este tipo de tutoriales empezamos todos. Pero me gustaría que el autor, al final de esta serie de artículos ponga al día a los lectores (yo no lo voy a hacer porque si no seria un troll como una casa) y como está hoy en día el tema de las aplicaciones web.

Saludos!
2

13-08-08
Cecilia Moran Castillo: ...
hola me gustaris saber los tipos de aplicaciones web y las matodologias de desarrollo para aplicaciones web.espero me envie un msje a mi bandeja de mi correo con lo q le estoy pidiendo.gracias y me parece una pagina interesante .
3

13-08-08
Alonso Gomez: ... http://www.aquiestodo.com
Muy chevere tu articulo, estoy siguiendolo para realizar un ejemplo de aplicativo web que funcionara en unos Smartphones.

Atentamente

Alonso Gómez M.
4

24-12-08
toni michel: ...
muy buenas,

antes de nada: muchisimas gracias por este tutorial, es justo lo que necesitaba para iniciarme smilies/cheesy.gif

después de haberlo leído, he querido probarla. tengo un hosting gratuito q soporta myphpadmin y he creado una tabla con el mismo nombre, users y mismos atributos.

he modificado en util.php el user y pass de la bbdd, y el nombre del host de la base de datos (imagino que no debo dejarlo en localhost si lo tengo en el servidor), bien, el problema es que al subir el webapp al servidor, en el index ya recibo un error.. ejeje

tal vez quieres hecharle un ojo? pues me dice q no ha podido acceder a mi servidor con mi contraseña; y he revisado muchas veces q esté correctamente escrito..

Could not connect to database: Access denied for user 'a9460074_toni005'@'localhost' (using password: YES)

alguna idea?

http://laspruebasdetoni.netau.net/

gracias
5

31-03-09
cristian: ...
Muy weno pero tengo isntalado wl wamp server en mi compu, esos archivos que dices donde los monto, en que los hago. te encargo que me aclares ya que esta muy enriquesedora tu guia
6

12-06-10

Escribir comentario
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
   
 

Sitios interesantes

LeeMiBlog recomienda:

Clicky Web Analytics

Clicky

 
Contenido liberado bajo licencia CC por LeeMiBlog.
Joomla!
es un software libre publicado bajo la licencia GNU/GPL.
Top