Você está na página 1de 49

Tutorial “cómo crear webs dinámicas”

Lo que empezó por “fascículos” ya está acabado, y recopilado; y presentado


como regalo de Navidad.

Con este tutorial aprenderás sobre webs dinámicas lo suficiente como para
crear CMS propios y sistemas de usuarios.

Para empezar necesitas varias cosas, entre ellas:

 Dreamweaver CS3
 easyPHP
 Un navegador web (recomendamos Firefox)

Este tutorial asume que:

 Tienes email
 Tienes Windows instalado o conocimientos para emular Windows y
poder usar programas programados para él en otro sistema operativo
 Tienes Internet (al menos para descargar los programas necesarios)
 Tienes conocimientos mínimos sobre Internet y esto quiere decir que:
o Sabes lo que es un link
o Sabes navegar por Internet
 Tienes conocimientos mínimos sobre informática general, lo que quiere
decir que:
o Sabes instalar un programa (y ejecutarlo)
o Sabes los conceptos “clic botón derecho”, “barra de herramientas”
 Tienes derechos de administrador en tu ordenador (para instalar los
programas)
 Tienes espacio en el disco duro libre (más o menos 500 MB)

Introducción
Dreamweaver
Ves a http://www.adobe.com/es/. Verás la web de Adobe en
castellano. Se parecerá a la imagen 1.1. Allí
debes acceder a la sección de Descargas, ten
en cuenta que se desplegará un menú,
déjalo y ves directamente a Descargas.

Verás una página con una lista bastante larga. La lista contiene productos de
Adobe, la mayoría son para el sector informático o para diseño gráfico. En esa
lista verás el Dreamweaver CS3 (actualmente la versión más moderna). Verás
dos links a su derecha: “Comprar” y “Probar”. Si piensas usar el Dreameaver
más de 1 mes te recomiendo que lo compres, pero si únicamente lo vas a usar
para seguir este tutorial basta con que hagas clic en “Probar”.

Te llevará a una página de error. Básicamente te dice que te tienes que registrar
o iniciar sesión. No intentes pelear. Regístrate y obtén la demo en pocos
minutos.

easyPHP (descarga)
Necesitarás un servidor donde probar todo lo que programes (o lo que
Dreamweaver programe). Para eso tienes dos opciones:

 Contratar un servicio de hosting que tengan servidores que soporten PHP


y MySQL (los hay gratuitos)
 O instalarte un servidor local

En este tutorial optamos por la segunda opción, por varios motivos, entre ellos
que es más fácil de comprobar que hay mal configurado en tu ordenador que en
un servidor de otro proveedor, además, no dependes de ningún proveedor y no
necesitas Internet para probar las cosas que programes.

Claro, ahora tenemos dos opciones diferentes:

 Instalar Apache, PHP y MySQL por separado


 O instalarlo todo junto con algún programa

La opción más profesional es la primera, porque configuras a tu gusto cada


“componente” y es más seguro, entre otras cosas.

Sin embargo también es más difícil, así optamos por la segunda opción de
nuevo.

¿Dónde podemos obtener estos fantásticos programas que te arreglan la vida?


Hay varios, pero en este tutorial probaremos easyPHP.

Abrimos nuestro navegador y vamos a http://www.easyphp.org .


Veremos algo parecido a la imagen 1.3. Este programa es gratis,
así que hacemos clic en el link que dice “descargas” y nos llevará a una página
con la lista de versiones. Ahora tenemos un pequeño problema: la versión. En
este tutorial vamos a usar a 2.0 beta 1.

Hacemos clic en el link correspondiente y descargamos el archivo.

Con esto ya tenemos lo necesario para poder empezar.

Por cierto, instalar el Dreamweaver es pan comido y no hace falta ningún


conocimiento especial.

easyPHP (instalación)
Ejecutamos el archivo que hemos descargado de easyphp.org (el nombre por
defecto ha sido en mi caso “EasyPHP-2.0b1-setup”).

Cuando lo iniciemos veremos una pantalla que “nos pide” un idioma. Yo he


elegido “Español” porque lo entiendo mejor que los
otros, pero si vuestro bilingüismo llega a tanto,
cambiad el idioma. Dejando “chistes” de lado, le
damos a “Aceptar”.

Nos aparecerá en la pantalla una ventana con información


sobre la instalación, más o menos dice que estás instalando
easyPHP 2.0 beta 1 y hagas clic en “Siguiente” para seguir
con la instalación o en “Cancelar” para salir.

En fin, le damos a “Siguiente” (¿o te lo has pensado


mejor y ya no quieres seguir el tutorial?).

Lo siguiente que nos aparecerá será una licencia. La


licencia de este programa es GNU, pero si quieres
usar este programa también aceptas la licencia de
Apache, PHP, MySQL, PhpMyAdmin y SQLiteManager. Creo recordar que todos
son GNU, pero no estoy seguro. De todas formas se incluye una copia de la
licencia de cada uno en ésta ventanita.

Atención: No incito a aceptar la licencia de ningún producto, sea Dreamweaver


o easyPHP, yo las he aceptado, pero se puede hacer lo que se desee.
Si queremos aceptar basta con marcar el primer círculo y darle a “Siguiente”
(opción bloqueada en caso de que no esté seleccionada la opción de “Aceptar el
acuerdo”).

Nos aparecerá una ventana con un mensaje un


tanto desconcertante. Para los que no saben
mucho inglés, el texto advierte que es una
herramienta de desarrollo y no de producción, y
que Windows no es lo suficientemente seguro
como para servir de servidor (Linux 1 Windows
0…). También advierte que si estamos
actualizando hagamos una copia de nuestros scripts, desinstalemos los servicios
del servidor si estamos usando el servidor como servicio, cerremos easyPHP (el
anterior) en caso de estar en marcha y por último desinstalemos la vieja versión.

En fin, a mí también me ha dejado desconcertado: ¿si estamos actualizado


como es que tenemos que desinstalar la versión vieja?

Dejando de lado esto, y suponiendo que no queda resto de la versión anterior


(si no habíais instalado antes easyPHP no es necesario hacer nada de nada), le
damos a siguiente.

La nueva ventana nos preguntará por la


carpeta donde se instalará easyPHP.

En realidad no importa demasiado desde un


punto de vista teórico. Ahora, en la práctica sí.
Cuanto más complicada sea la dirección de la
carpeta más nos costará guardar nuestros
scripts (más bien encontrar la carpeta dónde
guardarlos) y más difícil será acceder.

Generalmente uso direcciones como “C:\servidor” o “C:\easyPHP”, de forma


que sea más sencillo acceder que “C:\Archivos de Programa\El tuto de la
web\Uno dinámico\Programas\easy-no-sé-que\easyPHP2.0Beta\archivos”.

Claramente se ve aquí la diferencia. Para esta ocasión voy a poner de carpeta


“C:\tuto1”. Elegid la que queráis, pero tened en cuenta que de aquí en adelante
me referiré a esta dirección como “La ruta a la carpeta raíz de easyPHP”.
Cuando tengáis lista la dirección haced clic en “Siguiente”.
La ventana que aparecerá ahora es sobre el “Menú Inicio”. Es para saber que
carpeta ha de crear dentro del “Menú Inicio” para mostrar los accesos directos.

Yo lo dejaría tal cual está, no es muy importante


en realidad, porque no va a influir en nuestro
trabajo, además siempre puedes añadir easyPHP
a tus programas de inicio mediante el comando
“msconfig” o crear un acceso directo.

Ahora pasamos a la siguiente ventana (clic en


“Siguiente”).

En esta ventana nos mostrará un recopilatorio de


información sobre la instalación. Verás la carpeta
raíz de easyPHP y la carpeta dentro del “Menú
Inicio”. Para continuar haz clic en “Instalar”.

La próxima ventana
mostrará el proceso
de instalación, con una barra que muestra un
porcentaje de lo instalado. Es un buen método
para saber si la instalación está empezando o está
acabando.

El proceso de instalación es rápido. A mí me ha


durado no llega a 1 minuto, eso teniendo en cuenta que tengo abierto el editor
de fotos (para las capturas de pantalla), el procesador de textos y el Firefox.

En fin, cuando acabe nos mostrará una pantalla con una


mensaje que nos dice que se ha completado la
instalación con éxito.

Le damos a “Finalizar” y se cerrará el instalador. “A


cambio” se ejecutará el servidor en sí y podremos ver un
iconito con forma de e en la barra de tareas.

Si hacemos clic se nos abrirá una ventana con el estado del


servidor: iniciado, pendiente o detenido. Si están los
semáforos en verde es que está todo correctamente.

¿Os ha parecido complicada la instalación?


Y con esto ya tenemos los requisitos mínimos para comenzar a programar. Pero
antes a configurar el Dreamweaver para que nos ayude a programar…

Configuración
Dreamweaver
Ahora tienes que configurar Dreamweaver para que te permita utilizar bases de
datos (sin necesidad de toquetear código).

En primer lugar abrimos el Dreamweaver, y luego vamos a Sitio -> Nuevo Sitio.

Entonces se abrirá una ventana que nos


pide varios datos.

Tenéis que fijaros en las pestañas de la parte


superior derecha de la ventana, sí, esas que
ponen “Básicas” y “Avanzadas”. Tenéis que
abrir la de avanzadas haciendo clic en su
pestaña correspondiente.

Puede que ya estéis en esa pestaña por


defecto, pero mejor explico cómo cambiar por si las moscas…

Volviendo a Dreamweaver, ahora veremos una pantalla mucho más complicada,


pero en el fondo no lo es tanto. Voy a explicar un poco:

Donde nos pide “Nombre del Sitio” nos pide el nombre con el que se referirá al
sitio a partir de ahora. Hay que tener en cuenta que si tenemos más de un sitio
esto nos será muy útil, mejor pongamos un nombre descriptivo, en mi caso
“Tutorial”.

En “Carpeta raíz local” nos pide la ruita a la carpeta donde se almacenarán los
archivos. Si nos hemos
fijado durante la
instalación de easyPHP,
habremos visto que ha
creado una carpeta: la
ruta a la carpeta raíz de
easyPHP. Si abrimos esa
carpeta veremos unas
cuantas más, en este
caso nos interesa la carpeta “www”.

Explico un poco: cuando instalas un servidor lo que haces es que puedes


ejecutar scripts en códigos del lado del servidor, y también usarlo para tener tu
web. En este caso lo vamos a usar para tener la web de forma interna, es decir,
sin que nadie pueda verla. Nosotros podemos verla accediendo a 127.0.0.1 o
localhost.

Pero ¿qué archivos muestra el servidor? Pues en este caso los que están en la
carpeta “www”, la carpeta raíz del servidor es “www”.

Bien, volvamos, yo no he puesto la raíz del servidor, sino una carpeta que creará
Dreamweaver dentro de la raíz “www\tutorial”.

Aclaro, no es necesario poner “www\tutorial”, puedes poner sólo “www” o


“www\nombre_que_tu_quieras”.

En “Carpeta predeterminada de imágenes” puedes dejarlo vacío o poner una


ruta que esté dentro de la carpeta raíz. Ahí es donde Dreamweaver guardará
las imágenes, pero en este tutorial no usaremos imágenes, así que puedes
dejarlo en blanco.

En “Dirección HTTP” tenemos que escribir la dirección URL para acceder a la


web, la carpeta “www” sería 127.0.0.1 o localhost, así que “www\tutorial” será
“127.0.0.1/tutorial” o “localhost/tutorial”.
Ahora hacemos clic en la siguiente opción de la lista de la izquierda (Datos
remotos).

En esta ventana veremos un menú desplegable, lo desplegamos y elegimos


“Local/Red”, ahora aparecerán varias opciones en la parte inmediata inferior. En
“Carpeta remota” ponemos lo mismo que pusimos antes en “Carpeta raíz local”.

Y le damos a la siguiente opción de la lista de la parte izquierda.

Ahora veremos dos menús desplegables. Elegimos en el primero la opción “PHP

MySQL” y en la segunda elegimos “Local/Red”. Aparecerán varias opción


debajo. El primer cuadro ya debería estar relleno, pero si no es así es lo mismo
que pusiste en “Carpeta remota” o en “Carpeta raíz local”. En el segundo la URL
de la web.

Acuérdate que es “localhost/tu_carpeta” o “127.0.0.1/tu_carpeta” y eso sí,


añádele “http://” al principio.

Ahora puedes darle a “Aceptar” y ya tendrás el Dreamweaver configurado.

¿No era tan difícil verdad?

MySQL
Antes de empezar tengo que explicar un poco cómo funciona una base de
datos. Las bases de datos tienen columnas y filas. Las columnas son los campos
que tiene nuestra base de datos. Por ejemplo, si queremos que nuestra base de
datos tenga un campo de “Nombre” y otro de “Apellidos” eso serán columnas.
Cada conjunto de datos que tiene nuestra base de datos es una fila. Por
ejemplo, usando la base del anterior, Pepe Pérez y Paco Piedra serán filas, cada
dato correspondiendo con su columna. Esto se puede ver muy bien en una
tabla:

Nombre Apellidos (Columnas)


Pepe Pérez (Fila)
Paco Piedra (Fila)

Puede parecer un poco raro, pero no lo es. También hay que tener en cuenta
otra cosa: una base de datos tiene tablas, y las tablas contienen los datos. ¿Qué
significa esto? Pues significa que en una tabla estarán todo el “royo” este de la
columnas y las filas, mientras que en la base de datos estarán todas las tablas.
¿Qué utilidad tiene esto?
Es sencillo: imagínate una web que permite el registro de usuarios y que
comenten las noticias que escriban. Una tabla será para los usuarios, y la otra
para los comentarios.
Ahora imagínate que las noticias de la web se almacenan también en la base de
datos, entonces serán ya 3 tablas (usuario, comentarios y noticias), pero si la
web tiene categorías, serán ya 4 tablas, así pueden llegar a ser un montón.

Dejando de lado la teoría vamos con “La práctica”. Abrimos nuestro navegador
(también tenemos abierto easyPHP, hay que tenerlo abierto siempre que
vayamos a trabajar con el servidor), y visitamos 127.0.0.1/home/mysql .
Accederás al panel de control de phpMyAdmin, un gestor para bases de datos
visual. Tengo que recodar que esto también se puede hacer mediante código
PHP sin problemas, pero es más
fácil y visual hacerlo mediante
este script prefabricado.

La página tiene un aspecto


similar al de la imagen de la
derecha.
Veremos en la parte central un cuadro de texto bajo el título “Crear nueva base
de datos”. Le ponemos un nombre corto y sin acentos, c cedillas o eñes (para
evitar errores).

Luego le damos a “Crear”. Yo para este ejemplo le he dado de nombre a mi base


de datos tuto1.

Nos llevará a una página como la de


la izquierda.

En esta página se listan las tablas de


nuestra base de datos, y nos ofrecen
un formulario para crear una tabla
nueva. El formulario es muy sencillo:
en “Nombre” ponemos el nombre
de la tabla (como antes sin
caracteres no ingleses) y en “Número de campos” la cantidad de columnas que
queremos que tenga la tabla. El número de columnas puede ser cambiado más
adelante.

Yo he elegido de nombre “paginas” y de


número de campos 5.

Le damos a “Continuar” y nos llevará a una


página con un mogollón de campos para
rellenar, como la de la derecha.

Ahora paso a explicar por qué he elegido 5


campos para mi tabla: la tabla es una prueba, para esta prueba mostraremos
texto, autor, fecha, id y categoría.

El campo texto será el primero que rellenemos en la página. En “campo”


ponemos “text”, en “Longitud/Valores”, 100000. Pasamos a la siguiente fila, en
“Campo” ponemos “autor” y en “Longitud/Valores” ponemos 50.
En la siguiente fila en “Campo” ponemos “fecha”, y en “Longitud/Valores”
ponemos 10. En la siguiente fila ponemos en “Campo” “categoría” y en
“Longitud/Valores” 500.
Y por último ponemos en “Campo” “id”, en “Tipo” “Bigint”, en
“Longitud/Valores” 20, en “Atributos” “unsigned”, en “Extra” “auto_increment”
y por último marcamos el botón circular que hay en la columna de la llave
dorada.
Le damos al botón “Grabar”.

Nos devolverá a la página que lista los registros de la tabla “paginas”, y en la

parte superior aparecerá un código que debe ser igual que este:
CREATE TABLE `paginas` (
`text` VARCHAR( 100000 ) NOT NULL ,
`autor` VARCHAR( 50 ) NOT NULL ,
`fecha` VARCHAR( 10 ) NOT NULL ,
`categoria` VARCHAR( 500 ) NOT NULL ,
`id` BIGINT( 20 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY
) ENGINE = MYISAM ;

Ahora deberías poner algo de contenido para probar un poco. En el menú


superior haz clic en “Insertar” y rellena el formulario de arriba. El campo id
debes dejarlo vacío, y el campo fecha con formato DD-MM-AAAA.

Cuando rellenes los campos de las a “Continuar”.

Mete registros (filas) hasta que tengas 3 o 4, el contenido da igual, es sólo de


prueba.

Creación
Dreamweaver
Ya ha llegado el momento de crear la web con Dreamweaver. Para comenzar
abrimos el Dreamweaver y creamos un archivo PHP (Archivo -> Nuevo… ->
Página en blanco -> PHP).
Lo guardamos como index.php en la carpeta de nuestro sitio.
Hay que tener en cuenta que debemos estar en el Sitio que hemos
configurado (Ventana -> Archivos o F8) y en el menú desplegable que
encontraremos elegimos nuestro Sitio.
Ahora abrimos el panel de Vinculaciones (Ventana -> Vinculaciones o
Control + F10) y le damos al signo de sumar (+). Nos desplegará un menú,
elegimos “Juego de registros (consulta)” y nos mostrará una ventana
donde debemos especificar las columnas que se cargarán, de qué tabla se
cargarán y cómo queremos llamar a esa consulta (query).

Le damos al botón “Definir…” de esa ventana. Nos abrirá una nueva,


donde debemos darle a “Nueva” y nos abrirá una última ventana.

En la imagen se puede ver perfectamente como he rellenado los campos.

En la imagen se ven unos numeritos, paso a explicar qué son:

1. Nombre con el que Dreamweaver se referirá mediante PHP (y


mediante sus menús y opciones) a esa consulta, en este caso
“l_pages”.
2. Conjunto de datos usados para conectar a la base de datos donde
se quiere hacer la consulta.
3. Tabla que contiene los datos (en este caso “paginas”)
4. Columnas que nos interesan, en este caso todas.
5. Para crear filtros, lo veremos más adelantes, ahora lo dejamos tal
cual.
6. Para completar los filtros, pero como antes, más adelante…
7. Para ordenar las filas, no lo vamos a ver en este tutorial.
8. La conexión que vamos a editar o a borrar
9. Nombre de la conexión que vamos a crear
10.El servidor al que se va a conectar
11.El nombre de usuario para el login
12.La contraseña para el login
13.La base de datos a la que se conecta (el nombre)

Bien, una vez rellenado aceptamos


haciendo clic en el botón correspondiente
cada vez. Cuando tengáis el juego de
registros listo le dais al botón “Aceptar”.

Dreamweaver mostrará
en el panel de
Vinculaciones una lista con las Vinculaciones que hay
creadas para la página. Ahora el panel se parecerá al
de la imagen de la derecha.

Basta con seleccionas el rayo (el texto de al lado del rayo) y arrastrarlo
hasta un punto de la página para que se muestre el contenido dinámico en
ese lugar.

Por ejemplo, arrastremos el rayo de


“text” hasta cualquier sitio de la página
(archivo index.php). Veremos algo
como en la imagen de la izquierda.

Para comprobar el resultado tenemos


dos opciones: el Live Data o la comprobación manual. El Live Data consiste
en que Dreamweaver procesará los datos dinámicos él solo sin necesidad
de abrir un navegador para ver la página resultante. Para ponerlo en
práctica basta con pulsar Control + Mayus + R.

El otro método consiste en abrir el navegador para ver el resultado. Se


puede hacer pulsando F12
Repetición de datos y funciónes de mostrar región y
paginación
Dreamweaver incluye un par de funciones muy interesantes a la hora de
mostrar datos. Analizaremos una a una todas las que incorpora.

Repetir región:

Se encuentra en el panel de “Comportamientos


del Servidor”. Al hacer clic en el botón nos
mostrará una ventana con un menú
desplegable y dos botones circulares.

El menú te permite elegir los datos de qué


consulta quieres que se repitan. De forma que
no repita datos de sólo una consulta.

Los botones te permiten elegir entre mostrar N


registros (el botón de arriba) y mostrar todos
los registros (obviamente el de abajo).

Mostrar región.

Este comportamiento del servidor permite que una zona de la


página no se muestre en caso de:

 Si hay / no hay registros en la consulta


 Es / no es la primera página (se verá más adelante con la
paginación)
 Es / no es la última página (lo mismo: se verá más adelante en
la paginación)

¿Qué utilidades tiene esto? Pues


para dar avisos de que no se han
localizado datos. Por ejemplo, en
un buscador, si no se encuentra
lo buscado nos muestra un
mensaje de advertencia. Ese
mensaje sería “Mostrar región” ->
“Mostrar región si el juego de
registros está vacío”. Al contrario, los datos estarían en una zona
donde hay un comportamiento de mostrar en caso de que si haya
registros.

La zona que se mostrará / no se mostrará se selecciona en la vista


diseño, por el método estándar (marcarlo de forma que se vea azul).

Paginación de juego de registros.

Antes de nada: ¿qué es la


paginación? Es el típico texto que
te dice: “Estás en la página 1 de 2.
Páginas: 1 – 2 – 3 – 4 – 5 - … -
Última”.

Se ha de combinar con la
repetición de los datos (para
mostrar X valores por página, por
ejemplo 15 valores o registros) con un comportamiento de mostrar
región, para quitar la opción de ir a la última en la última página o
de ir a la primera en la primera página.

Cuando aceptemos el tipo de paginación nos creará un link para


llevarnos a esa página. En realidad no crea página, tú no debes
hacer nada, PHP y Dreamweaver se encargan de eso.

Insertar, editar y eliminar registros


Ya sabemos mostrar datos y repetirlos, ¡¡hasta sabemos paginarlos!!
Ahora aprenderemos a añadir datos a nuestra base de datos desde un “panel de
control” y a editarlos y eliminarlos desde el mismo.

Primero he de aclarar que tenemos que crear un formulario con tantos campos
como columnas hay en nuestra tabla. En cada campo del formulario se escribirá
el dato que se quiere poner en la base de datos.

Mi formulario tiene este código:


<form id="insertar" name="insertar" method="post" action="">

<label>
Autor:<br />

<input type="text" name="autor" id="autor" />

<br />

<br />

Fecha:<br />

</label>

<label>

<input name="fecha" type="text" id="fecha" value="DD-MM-AAAA" />

</label>

<label> <br />

<br />

Categoría:<br />

<input type="text" name="categoria" id="categoria" />

</label>

<label> <br />

<br />

Texto:<br />

<textarea name="text" id="text" cols="45" rows="5"></textarea>

</label>

<p>

<label></label>

<input type="submit" name="button" id="button" value="Insertar" />

</p>

</form>

Ahora podrás comprobar que me falta un campo:


ID. No lo he puesto porque ese campo no cuenta
a la hora de insertar. ¿Por qué? Porque ese
campo se rellena sólo cada vez que añades una
fila.
Ahora vamos al panel de Comportamientos del Servidor y elegimos “Insertar
registro”. Nos abrirá una ventanita un poco complicada.

Nos mostrará tres menús desplegables, una lista, un par de menús desplegables
más abajo, un cuadro de texto y un botón examinar.

Vayamos por partes:

En menú “Enviar valores de:” te permite elegir el formulario desde el que se


enviarán los valores a la base de datos.
El menú de “Conexión:” de termite elegir la conexión que anteriormente
definiste, para elegir la base de datos en la que quieres depositar los datos.
El menú “Insertar tabla:” te muestra la lista de tablas que hay en la base de
datos que has elegido en “Conexión”.

Y ahora lo más complejo (aunque no es tan complicado como parece):


“Columnas”, “Valor” y “Enviar como”.

Cada valor que escribes en el formulario es enviado a la base de datos, pero es


necesario saber qué valor es de cada columna, para evitar problemas tipo:
meter el nombre en el campo de apellidos, meter el título en el campo de autor,
etc.

Esto se hace a través de esos campos. Primero elegimos el campo de la tabla


que queremos rellenar, en la imagen es “text”.
Luego vamos a lo menús que hay más abajo, y elegimos el campo del formulario
que se rellenará con el valor que queremos insertar en ese columna de nuestra
tabla; en este caso el campo elegido es uno llamado “text”.
Para asignarle un campo de un formulario a otra columna se repite el proceso
pero eligiendo otra columna de la lista que se muestra.

Lo más fácil para evitar el tener que usar la opción de columnas es asignarle de
nombre a cada campo del formulario el nombre de la columna que deben
rellenar, así Dreamweaver los colocará automáticamente, pero tú podrás
editarlos por si hay algún error.

Por último el menú desplegable de abajo no lo tocaremos en este tutorial.

La última cosa a configurar es el cuadro de abajo del todo. Este cuadro sirve
para poner la URL de la página que se cargará una vez insertados los datos.
Puedes poner por ejemplo “?action=complete” para que envíe una variable de
URL que un pequeño script de PHP interpretará. Para que muestre un cartel de
Completado Correctamente basta con poner ese campo como ya he puesto
arriba y en la página del formulario poner antes de este el siguiente código:
<?php If (isset($_GET[„action‟])) { echo “Completado con éxito”; } ?>

El código que habrá generado Dreamweaver se parecerá muchísimo a esto:


<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "insertar")) {

$insertSQL = sprintf("INSERT INTO paginas (text, autor, fecha, categoria) VALUES


(%s, %s, %s, %s)",

GetSQLValueString($_POST['text'], "text"),

GetSQLValueString($_POST['autor'], "text"),

GetSQLValueString($_POST['fecha'], "text"),

GetSQLValueString($_POST['categoria'], "text"));

mysql_select_db($database_Tutorial, $Tutorial);

$Result1 = mysql_query($insertSQL, $Tutorial) or die(mysql_error());


$insertGoTo = "?action=complete";

if (isset($_SERVER['QUERY_STRING'])) {

$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];

header(sprintf("Location: %s", $insertGoTo));

mysql_select_db($database_Tutorial, $Tutorial);

$query_l_pages = "SELECT * FROM paginas";

$l_pages = mysql_query($query_l_pages, $Tutorial) or die(mysql_error());

$row_l_pages = mysql_fetch_assoc($l_pages);

$totalRows_l_pages = mysql_num_rows($l_pages);

?><!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=utf-8" />

<title>Tutorial</title>

</head>

<body>

<form id="insertar" name="insertar" method="POST" action="<?php echo


$editFormAction; ?>">

<label>

Autor:<br />

<input type="text" name="autor" id="autor" />

<br />

<br />

Fecha:<br />
</label>

<label>

<input name="fecha" type="text" id="fecha" value="DD-MM-AAAA" />

</label>

<label> <br />

<br />

Categoría:<br />

<input type="text" name="categoria" id="categoria" />

</label>

<label> <br />

<br />

Texto:<br />

<textarea name="text" id="text" cols="45" rows="5"></textarea>

</label>

<p>

<label></label>

<input type="submit" name="button" id="button" value="Insertar" />

</p>

<input type="hidden" name="MM_insert" value="insertar" />

</form>

</body>

</html>

<?php

mysql_free_result($l_pages);

?>

Ahora toca editar registros.


Para editar un registro debemos crear una página que nos muestre una lista de
todas las filas que hay en nuestra base de datos. Te dejo a ti para hacer esto,
con lo que he explicado antes de repetir región, y crear consultas no te costará
mucho.
La lista debe mostrar el autor de la página (recordemos que estamos trabajando
con una lista de páginas en nuestra tabla) y la fecha. Ambos valores se
encuentran en las columnas “autor” y “fecha”.
Después de poner esos valores debe haber un link hacia “editar.php?id=N”
donde N es el valor de la columna “ID”.

Tras esto se le aplica un comportamiento de repetir región y eliges mostrar


todos los registros para que nos muestre la lista entera.

Este es el código que he creado yo para este caso:


<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

mysql_select_db($database_Tutorial, $Tutorial);

$query_l_pages = "SELECT * FROM paginas";

$l_pages = mysql_query($query_l_pages, $Tutorial) or die(mysql_error());

$row_l_pages = mysql_fetch_assoc($l_pages);

$totalRows_l_pages = mysql_num_rows($l_pages);

?><!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=utf-8" />

<title>Tutorial</title>

</head>

<body>

<table width="80%" border="0" cellspacing="1" cellpadding="1">

<tr>

<th scope="col">Autor</th>

<th scope="col">Fecha</th>

<th scope="col">Editar</th>

</tr>

<?php do { ?>
<tr>

<td><?php echo $row_l_pages['autor']; ?></td>

<td><?php echo $row_l_pages['fecha']; ?></td>

<td><div align="center"><a href="editar.php?id=<?php echo $row_l_pages['id'];


?>">&raquo;</a></div></td>

</tr>

<?php } while ($row_l_pages = mysql_fetch_assoc($l_pages)); ?>

</table>

</body>

</html>

<?php

mysql_free_result($l_pages);

?>

Bien, ahora crearemos un nuevo archivo PHP, que guardaremos como “editar.php” en la
misma carpeta que está “index.php”.

En este archivo creamos un formulario como el anterior, sólo añadiendo un campo oculto antes
del botón enviar, con nombre “id”.

El código del formulario, en mi caso este:

<form id="insertar" name="insertar" method="post" action="">

<label> Autor:<br />

<input type="text" name="autor" id="autor" />

<br />

<br />

Fecha:<br />

</label>

<label>

<input name="fecha" type="text" id="fecha" value="DD-MM-AAAA" />

</label>

<label> <br />

<br />

Categoría:<br />
<input type="text" name="categoria" id="categoria" />

</label>

<label> <br />

<br />

Texto:<br />

<textarea name="text" id="text" cols="45" rows="5"></textarea>

</label>

<p>

<label></label>

<input type="hidden" name="id" id="id" />

<input type="submit" name="button" id="button" value="Insertar" />

</p>

</form>

Ahora creamos un nuevo Juego de Registros. Le ponemos de nombre


“e_paginas”, que se conecte a la tabla de páginas que tenemos en la base
de datos y que use un filtro.

Los filtros tienen tres menús desplegables y un campo de texto.

El menú 1 (véase la
imagen) te permite elegir
los datos de qué columna
son, si quisiésemos crear
un buscador que nos
busque autores sería autor,
pero en este caso es para
diferenciar entre todas las
páginas sólo una, y el único
método perfecto para esta
tarea es diferenciarla por el
ID.

El segundo menú (2) nos permite elegir cómo diferenciarlo: si es igual,


mayor, menor, empieza por, acaba en o contiene.
En esta caso el ID tiene que ser igual que el que enviamos en el link.

El tercer menú (3) es el tipo de variable: cookie, de sesión, de servidor, de


formulario, de URL o valor introducido. En este caso como lo enviamos por
un link será “Variable de URL”.

Por último el campo de texto (4) nos pregunta cómo se llama la variable
que contiene el valor que buscamos. Si te has fijado, el link es
“editar.php?id=N”, así que en este caso será “id”.

Ahora le damos a aceptar.

Tendremos un juego de registros,


que usaremos para poner su
contenido como contenido por
defecto del formulario, ¿cómo?
Fácil, arrastra el rayo hasta el
campo correspondiente.

Veremos algo parecido a lo que se


ve en la imagen.

¿Qué nos queda? El


comportamiento del servidor de
actualizar registros.

En el mismo menú donde está Juego de Registros encontraremos


Actualizar Registro. Veremos una pantalla como la de la imagen ¿te
suena? Si, es exactamente igual que la de insertar registro, excepto por el
cuadradito de “Clave principal”, que para este tutorial no te servirá de
nada, así que déjalo como esta.

En el cuadro de texto pon que


te redirija a index.php y dale a
aceptar.

Fíjate que con las prisas se nos


ha olvidado cambiar el nombre
del formulario (se puede ver en la imagen).
Una vez le des a aceptar la página tendrá un código similar a este:
<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;
}

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "insertar")) {

$updateSQL = sprintf("UPDATE paginas SET text=%s, autor=%s, fecha=%s, categoria=%s


WHERE id=%s",

GetSQLValueString($_POST['text'], "text"),

GetSQLValueString($_POST['autor'], "text"),

GetSQLValueString($_POST['fecha'], "text"),

GetSQLValueString($_POST['categoria'], "text"),

GetSQLValueString($_POST['id'], "int"));

mysql_select_db($database_Tutorial, $Tutorial);

$Result1 = mysql_query($updateSQL, $Tutorial) or die(mysql_error());

$updateGoTo = "index.php";

if (isset($_SERVER['QUERY_STRING'])) {

$updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";

$updateGoTo .= $_SERVER['QUERY_STRING'];

header(sprintf("Location: %s", $updateGoTo));

$colname_e_paginas = "-1";

if (isset($_GET['id'])) {

$colname_e_paginas = $_GET['id'];
}

mysql_select_db($database_Tutorial, $Tutorial);

$query_e_paginas = sprintf("SELECT * FROM paginas WHERE id = %s",


GetSQLValueString($colname_e_paginas, "int"));

$e_paginas = mysql_query($query_e_paginas, $Tutorial) or die(mysql_error());

$row_e_paginas = mysql_fetch_assoc($e_paginas);

$totalRows_e_paginas = mysql_num_rows($e_paginas);

?><!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=utf-8" />

<title>Documento sin t&iacute;tulo</title>

</head>

<body>

<form id="insertar" name="insertar" method="POST" action="<?php echo $editFormAction;


?>">

<label> Autor:<br />

<input name="autor" type="text" id="autor" value="<?php echo $row_e_paginas['autor']; ?>" />

<br />

<br />

Fecha:<br />

</label>

<label>

<input name="fecha" type="text" id="fecha" value="<?php echo $row_e_paginas['fecha']; ?>"


/>

</label>

<label> <br />

<br />

Categoría:<br />
<input name="categoria" type="text" id="categoria" value="<?php echo
$row_e_paginas['categoria']; ?>" />

</label>

<label> <br />

<br />

Texto:<br />

<textarea name="text" id="text" cols="45" rows="5"><?php echo $row_e_paginas['text'];


?></textarea>

</label>

<p>

<label></label>

<input name="id" type="hidden" id="id" value="<?php echo $row_e_paginas['id']; ?>" />

<input type="submit" name="button" id="button" value="Insertar" />

</p>

<input type="hidden" name="MM_update" value="insertar" />

</form>

</body>

</html>

<?php

mysql_free_result($e_paginas);

?>

Y ahora nos queda eliminar registros.

Abrimos index.php, vamos a prepararlo para que nos lleve a la página de


eliminar registros…

En la tabla, a la derecha de editar añadimos una columna que tenga un


link hacia “eliminar.php?id=N”. ¿Te suena? Igual que en editar sólo que
cambiando editar.php por eliminar.php.

¿El código? En mi caso este:


<?php require_once('Connections/Tutorial.php'); ?>

<?php
if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

}
mysql_select_db($database_Tutorial, $Tutorial);

$query_l_pages = "SELECT * FROM paginas";

$l_pages = mysql_query($query_l_pages, $Tutorial) or die(mysql_error());

$row_l_pages = mysql_fetch_assoc($l_pages);

$totalRows_l_pages = mysql_num_rows($l_pages);

?><!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=utf-8" />

<title>Tutorial</title>

</head>

<body>

<table width="80%" border="0" cellspacing="1" cellpadding="1">

<tr>

<th scope="col">Autor</th>

<th scope="col">Fecha</th>

<th scope="col">Editar</th>

<th scope="col">Eliminar</th>

</tr>

<?php do { ?>

<tr>

<td><?php echo $row_l_pages['autor']; ?></td>

<td><?php echo $row_l_pages['fecha']; ?></td>

<td><div align="center"><a href="editar.php?id=<?php echo $row_l_pages['id'];


?>">&raquo;</a></div></td>

<td><div align="center"><a href="eliminar.php?id=<?php echo $row_l_pages['id'];


?>">&raquo;</a></div></td>

</tr>

<?php } while ($row_l_pages = mysql_fetch_assoc($l_pages)); ?>


</table>

</body>

</html>

<?php

mysql_free_result($l_pages);

?>

Ahora creamos otro archivo PHP… eliminar.php.

Borramos todo el
contenido que
puede tener ahora
mismo
eliminar.php, y
añadimos un
comportamiento de eliminar registro.

La ventana que nos mostrará será como la de la imagen.

El primer menú desplegable nos deja igual.

El segundo sirve para elegir la base de datos, el tercero para elegir la tabla,
y el cuarto para elegir la columna que se usará para encontrar el registro
que queremos eliminar.

El quinto menú desplegable nos deja elegir el tipo de variable que


contiene el valor que eliminaremos. El cuadro de texto nos permite elegir
el nombre de la variable que contiene el valor a eliminar y el último
cuadro de texto nos permite elegir dónde nos reenviará cuando elimine el
registro. Le damos a aceptar y el código resultante será algo como:
<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;


$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

if ((isset($_GET['id'])) && ($_GET['id'] != "")) {

$deleteSQL = sprintf("DELETE FROM paginas WHERE id=%s",

GetSQLValueString($_GET['id'], "int"));

mysql_select_db($database_Tutorial, $Tutorial);
$Result1 = mysql_query($deleteSQL, $Tutorial) or die(mysql_error());

$deleteGoTo = "index.php";

if (isset($_SERVER['QUERY_STRING'])) {

$deleteGoTo .= (strpos($deleteGoTo, '?')) ? "&" : "?";

$deleteGoTo .= $_SERVER['QUERY_STRING'];

header(sprintf("Location: %s", $deleteGoTo));

?>

Ahora volvemos a index.php y añadimos un link a insertar.php para poder


insertar datos.

Como verás tenemos algo muy parecido a un panel de control, pero sin
seguridad.

Control de usuarios
Voy a explicar a controlar usuarios con Dreamweaver, de forma que la gente
pueda iniciar sesión, registrarse y limitar los accesos dependiendo del tipo de
usuario.

Tenemos que crear una tabla nueva, llamada “usuarios”. Tendrá 4 columnas,
una columna “id”, como la anterior: Bigint 20, unsigned, autoincrement y
“llavecita dorada”.

Otra columna llamada “nombre_usuario”, VARCHAR 30. Y una tercera llamada


“nivel”: VARCHAR 2, predeterminado “1”. Por último, la cuarta se llamará
“contraseña” y será VARCHAR 10.

Haces clic en “Grabar”. El código que debe mostrarte en la parte superior debe
ser igual que este:
CREATE TABLE `usuarios` (
`id` BIGINT( 20 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nombre_usuario` VARCHAR( 30 ) NOT NULL ,
`nivel` VARCHAR( 2 ) NOT NULL DEFAULT '1'
`contraseña` VARCHAR( 10 ) NOT NULL ,
) ENGINE = MYISAM ;
Ahora vayamos a
Dreamweaver.

Creamos un archivo llamado


“registro.php”. Con los
conocimientos que has
aprendido en este tutorial no
te será difícil crear una página
que permita registrarse a los
usuarios.

Es como una página normal de inserción, sólo que los datos corresponden en la
tabla de usuarios.

En fin, el código que uso yo es este:


<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "registro")) {

$insertSQL = sprintf("INSERT INTO usuarios (nombre_usuario, contraseña) VALUES (%s,


%s)",

GetSQLValueString($_POST['nombre_usuario'], "text"),

GetSQLValueString($_POST['contraseña'], "text"));

mysql_select_db($database_Tutorial, $Tutorial);

$Result1 = mysql_query($insertSQL, $Tutorial) or die(mysql_error());

$insertGoTo = "index.php";

if (isset($_SERVER['QUERY_STRING'])) {

$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";

$insertGoTo .= $_SERVER['QUERY_STRING'];
}

header(sprintf("Location: %s", $insertGoTo));

?><!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=utf-8" />

<title>Registrarse</title>

</head>

<body>

<form id="registro" name="registro" method="POST" action="<?php echo $editFormAction;


?>">

<table width="80%" border="0" cellspacing="1" cellpadding="1">

<tr>

<th scope="row">Nombre de usuario</th>

<td><label>

<input type="text" name="nombre_usuario" id="nombre_usuario" />

</label></td>

</tr>

<tr>

<th scope="row">Contraseña</th>

<td><label>

<input type="password" name="contraseña" id="contraseña" />

</label></td>

</tr>

<tr>

<th scope="row">Registrarse</th>

<td><label>

<input type="submit" name="button" id="button" value="Quiero registrarme" />


</label></td>

</tr>

</table>

<input type="hidden" name="MM_insert" value="registro" />

</form>

</body>

</html>

Perfecto, ¿no? Ahora nos falta que puedan iniciar sesión.

Creamos una nueva página: iniciar_sesion.php.

Creamos una tabla con un


formulario para iniciar sesión y
creamos un comportamiento del
servidor de “Conectar usuario”.

Nos mostrará una ventana como la de la imagen.

Esta ventana está dividida en 4 partes.

La primera parte sirve


para el formulario. En
ella definiremos datos
como qué formulario
es el que se rellenará
con los datos (primer
menú desplegable),
qué campo
corresponde al
nombre de usuario
(segundo menú
desplegable) y qué
campo corresponde a
la contraseña (último menú desplegable de este grupo).

En el siguiente grupo veremos cuatro menús desplegables.


El primero corresponde a la conexión que utilizaremos (la base de datos).
El segundo a la tabla (usuarios).
El tercero nos pide que le digamos cuál es la columna que contiene los
nombres de usuario, en este caso “nombre_usuario” y el último menú
desplegable nos pregunta por la columna de la contraseña, en este caso
“contraseña”.

El tercer grupo nos pregunta por las direcciones a las que nos llevará en
caso de error al iniciar sesión o al iniciar sesión correctamente.

El cuarto grupo nos pregunta por si usamos alguna columna para los
privilegios. Es importante marcar el segundo botón circular, ya que sino no
podremos usar más tarde un sistema de bloqueo de usuarios no
administradores.

El menú desplegable nos pedirá la columna que contiene los niveles de los
usuarios (administrador, editor, escritor, etc). En este caso “nivel”.

Aviso: Los niveles de usuarios los has de crear tú, es decir, Dreamweaver
no los crea por ti, más adelante verás que 0 es no registrados, 1 son
registrados y 3 son Administradores, pero también verás que eso es una
convención que he creado yo para este tutorial.

Le damos a aceptar. El código de la página ahora será este:


<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

?>

<?php

// *** Validate request to login to this site.

if (!isset($_SESSION)) {

session_start();

$loginFormAction = $_SERVER['PHP_SELF'];

if (isset($_GET['accesscheck'])) {

$_SESSION['PrevUrl'] = $_GET['accesscheck'];
}

if (isset($_POST['nombre_usuario'])) {

$loginUsername=$_POST['nombre_usuario'];

$password=$_POST['contraseña'];

$MM_fldUserAuthorization = "nivel";

$MM_redirectLoginSuccess = "index.php";

$MM_redirectLoginFailed = "?status=error";

$MM_redirecttoReferrer = false;

mysql_select_db($database_Tutorial, $Tutorial);

$LoginRS__query=sprintf("SELECT nombre_usuario, contraseña, nivel FROM usuarios


WHERE nombre_usuario=%s AND contraseña=%s",

GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text"));

$LoginRS = mysql_query($LoginRS__query, $Tutorial) or die(mysql_error());

$loginFoundUser = mysql_num_rows($LoginRS);

if ($loginFoundUser) {

$loginStrGroup = mysql_result($LoginRS,0,'nivel');

//declare two session variables and assign them

$_SESSION['MM_Username'] = $loginUsername;

$_SESSION['MM_UserGroup'] = $loginStrGroup;

if (isset($_SESSION['PrevUrl']) && false) {

$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];

header("Location: " . $MM_redirectLoginSuccess );

else {
header("Location: ". $MM_redirectLoginFailed );

?>

<!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=utf-8" />

<title>Iniciar sesión</title>

</head>

<body>

<form id="login" name="login" method="POST" action="<?php echo $loginFormAction; ?>">

<table width="80%" border="0" cellspacing="1" cellpadding="1">

<tr>

<th scope="row">Nombre de usuario</th>

<td><label>

<input type="text" name="nombre_usuario" id="nombre_usuario" />

</label></td>

</tr>

<tr>

<th scope="row">Contraseña</th>

<td><label>

<input type="text" name="contraseña" id="contraseña" />

</label></td>

</tr>

<tr>

<th scope="row">Iniciar sesión</th>

<td><label>

<input type="submit" name="button" id="button" value="Iniciar sesión" />


</label></td>

</tr>

</table>

</form>

</body>

</html>

O algo parecido.

Ya tenemos una página de registro, de inicio de sesión… ¿qué nos falta?

Necesitamos un método para bloquear a los usuarios que no sean del


equipo de administración. Así que abrimos eliminar.php.

Añadimos un comportamiento del servidor de Restringir Acceso a Página.

Nos
mostrará
una
ventana

como la de la imagen.

Tenemos que elegir entre dos opciones:

 Filtrar usuarios registrados / no registrados


 Filtrar usuarios administradores / no administradores

Para el primer caso basta con dejar el botón circular de arriba


seleccionado y darle a “Aceptar”, pero para el panel de control, o mejor
dicho, para eliminar las páginas, tienes que ser Administrador, así que
seleccionas el segundo botón (como en la imagen) y haces clic en definir.

En la nueva ventana pones en


“Nombre” el valor que tiene que
haber en la columna “nivel” para
ser considerado administrador. En
la convención que uso yo es 3, así
que pon 3 y le das a +.

Luego dale a “Aceptar”.

La ventana se
cerrará y
volverás a la
anterior.
Ahora sólo te
queda elegir
el 3 y darle a
“Aceptar”, como en la imagen.

El código de la página habrá quedado así:


<?php require_once('Connections/Tutorial.php'); ?>

<?php

if (!isset($_SESSION)) {

session_start();

$MM_authorizedUsers = "3";

$MM_donotCheckaccess = "false";

// *** Restrict Access To Page: Grant or deny access to this page

function isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) {

// For security, start by assuming the visitor is NOT authorized.

$isValid = False;
// When a visitor has logged into this site, the Session variable MM_Username set equal to
their username.

// Therefore, we know that a user is NOT logged in if that Session variable is blank.

if (!empty($UserName)) {

// Besides being logged in, you may restrict access to only certain users based on an ID
established when they login.

// Parse the strings into arrays.

$arrUsers = Explode(",", $strUsers);

$arrGroups = Explode(",", $strGroups);

if (in_array($UserName, $arrUsers)) {

$isValid = true;

// Or, you may restrict access to only certain users based on their username.

if (in_array($UserGroup, $arrGroups)) {

$isValid = true;

if (($strUsers == "") && false) {

$isValid = true;

return $isValid;

$MM_restrictGoTo = "index.php";

if (!((isset($_SESSION['MM_Username'])) && (isAuthorized("",$MM_authorizedUsers,


$_SESSION['MM_Username'], $_SESSION['MM_UserGroup'])))) {

$MM_qsChar = "?";

$MM_referrer = $_SERVER['PHP_SELF'];

if (strpos($MM_restrictGoTo, "?")) $MM_qsChar = "&";

if (isset($QUERY_STRING) && strlen($QUERY_STRING) > 0)

$MM_referrer .= "?" . $QUERY_STRING;


$MM_restrictGoTo = $MM_restrictGoTo. $MM_qsChar . "accesscheck=" .
urlencode($MM_referrer);

header("Location: ". $MM_restrictGoTo);

exit;

?>

<?php

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "",


$theNotDefinedValue = "")

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {

case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "long":

case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL";

break;

case "double":

$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";

break;

case "date":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

break;

case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

break;

return $theValue;

if ((isset($_GET['id'])) && ($_GET['id'] != "")) {

$deleteSQL = sprintf("DELETE FROM paginas WHERE id=%s",

GetSQLValueString($_GET['id'], "int"));

mysql_select_db($database_Tutorial, $Tutorial);

$Result1 = mysql_query($deleteSQL, $Tutorial) or die(mysql_error());

$deleteGoTo = "index.php";

if (isset($_SERVER['QUERY_STRING'])) {

$deleteGoTo .= (strpos($deleteGoTo, '?')) ? "&" : "?";

$deleteGoTo .= $_SERVER['QUERY_STRING'];

header(sprintf("Location: %s", $deleteGoTo));

?>

Y con esto ya sabes lo suficiente como para crear un pequeño CMS.

Ante todo, tienes que tener mucha imaginación, es la base para poder
crear grandes cosas sin tocar mucho código.

Despedida
Saludos finales
Muchas gracias por haber leído todo el tutorial (que es un tocho) hasta el final.
Si te surge cualquier duda no lo dudes: pregunta en el foro
(http://foro.sumolari.com).

Inicialmente pensaba publicar esto en la web, pero por el tamaño del texto no
he podido…

Así que he creado este PDF para sustituir al artículo inicial.

Agradecimientos
Este tutorial ha sido posible gracias a Juaquinillo y a JaimePG.

También hay que agradecerle a la gente de Adobe que permite la prueba


gratuita de 30 días y a la gente de easyPHP por crear un software tan fácil de
usar.

Copyright
El tutorial puede ser copiado y distribuido, tal como reza la licencia Creative
Commons que tenemos en la web.

Pero debes citar el autor (Lluís Ulzurrun de Asanza Sàez - Sumolari) y poner un
link hacia http://sumolari.com en un lugar visible (ambas cosas).

Si te ha sido útil este tutorial mejor pon un link hacia él en lugar de copiarlo, al
menos por respetar el trabajo que he hecho.

Y por último, si aún así piensas ponerlo en tu web, lo antes dicho de los link y si
es posible envíame un email por medio del formulario que se puede ver en la
sección de Equipo.

2007 – Escrito por Lluís Ulzurrun de Asanza Sàez (Sumolari).

Você também pode gostar