Escolar Documentos
Profissional Documentos
Cultura Documentos
Con este tutorial aprenderás sobre webs dinámicas lo suficiente como para
crear CMS propios y sistemas de usuarios.
Dreamweaver CS3
easyPHP
Un navegador web (recomendamos Firefox)
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:
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.
Sin embargo también es más difícil, así optamos por la segunda opción de
nuevo.
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”).
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.
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.
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”.
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”.
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:
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.
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 ;
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).
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.
Repetir región:
Mostrar región.
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.
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.
<label>
Autor:<br />
<br />
<br />
Fecha:<br />
</label>
<label>
</label>
<br />
Categoría:<br />
</label>
<br />
Texto:<br />
</label>
<p>
<label></label>
</p>
</form>
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.
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.
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”; } ?>
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
break;
case "date":
break;
case "defined":
break;
return $theValue;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
GetSQLValueString($_POST['text'], "text"),
GetSQLValueString($_POST['autor'], "text"),
GetSQLValueString($_POST['fecha'], "text"),
GetSQLValueString($_POST['categoria'], "text"));
mysql_select_db($database_Tutorial, $Tutorial);
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= $_SERVER['QUERY_STRING'];
mysql_select_db($database_Tutorial, $Tutorial);
$row_l_pages = mysql_fetch_assoc($l_pages);
$totalRows_l_pages = mysql_num_rows($l_pages);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tutorial</title>
</head>
<body>
<label>
Autor:<br />
<br />
<br />
Fecha:<br />
</label>
<label>
</label>
<br />
Categoría:<br />
</label>
<br />
Texto:<br />
</label>
<p>
<label></label>
</p>
</form>
</body>
</html>
<?php
mysql_free_result($l_pages);
?>
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
break;
return $theValue;
mysql_select_db($database_Tutorial, $Tutorial);
$row_l_pages = mysql_fetch_assoc($l_pages);
$totalRows_l_pages = mysql_num_rows($l_pages);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tutorial</title>
</head>
<body>
<tr>
<th scope="col">Autor</th>
<th scope="col">Fecha</th>
<th scope="col">Editar</th>
</tr>
<?php do { ?>
<tr>
</tr>
</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”.
<br />
<br />
Fecha:<br />
</label>
<label>
</label>
<br />
Categoría:<br />
<input type="text" name="categoria" id="categoria" />
</label>
<br />
Texto:<br />
</label>
<p>
<label></label>
</p>
</form>
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.
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”.
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
break;
return $theValue;
}
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
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);
$updateGoTo = "index.php";
if (isset($_SERVER['QUERY_STRING'])) {
$updateGoTo .= $_SERVER['QUERY_STRING'];
$colname_e_paginas = "-1";
if (isset($_GET['id'])) {
$colname_e_paginas = $_GET['id'];
}
mysql_select_db($database_Tutorial, $Tutorial);
$row_e_paginas = mysql_fetch_assoc($e_paginas);
$totalRows_e_paginas = mysql_num_rows($e_paginas);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<br />
<br />
Fecha:<br />
</label>
<label>
</label>
<br />
Categoría:<br />
<input name="categoria" type="text" id="categoria" value="<?php echo
$row_e_paginas['categoria']; ?>" />
</label>
<br />
Texto:<br />
</label>
<p>
<label></label>
</p>
</form>
</body>
</html>
<?php
mysql_free_result($e_paginas);
?>
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
break;
return $theValue;
}
mysql_select_db($database_Tutorial, $Tutorial);
$row_l_pages = mysql_fetch_assoc($l_pages);
$totalRows_l_pages = mysql_num_rows($l_pages);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tutorial</title>
</head>
<body>
<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>
</tr>
</body>
</html>
<?php
mysql_free_result($l_pages);
?>
Borramos todo el
contenido que
puede tener ahora
mismo
eliminar.php, y
añadimos un
comportamiento de eliminar registro.
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.
<?php
if (!function_exists("GetSQLValueString")) {
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
break;
return $theValue;
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 .= $_SERVER['QUERY_STRING'];
?>
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”.
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.
Es como una página normal de inserción, sólo que los datos corresponden en la
tabla de usuarios.
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
break;
case "defined":
break;
return $theValue;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
GetSQLValueString($_POST['nombre_usuario'], "text"),
GetSQLValueString($_POST['contraseña'], "text"));
mysql_select_db($database_Tutorial, $Tutorial);
$insertGoTo = "index.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registrarse</title>
</head>
<body>
<tr>
<td><label>
</label></td>
</tr>
<tr>
<th scope="row">Contraseña</th>
<td><label>
</label></td>
</tr>
<tr>
<th scope="row">Registrarse</th>
<td><label>
</tr>
</table>
</form>
</body>
</html>
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.
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
break;
return $theValue;
?>
<?php
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);
$loginFoundUser = mysql_num_rows($LoginRS);
if ($loginFoundUser) {
$loginStrGroup = mysql_result($LoginRS,0,'nivel');
$_SESSION['MM_Username'] = $loginUsername;
$_SESSION['MM_UserGroup'] = $loginStrGroup;
$MM_redirectLoginSuccess = $_SESSION['PrevUrl'];
else {
header("Location: ". $MM_redirectLoginFailed );
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Iniciar sesión</title>
</head>
<body>
<tr>
<td><label>
</label></td>
</tr>
<tr>
<th scope="row">Contraseña</th>
<td><label>
</label></td>
</tr>
<tr>
<td><label>
</tr>
</table>
</form>
</body>
</html>
O algo parecido.
Nos
mostrará
una
ventana
como la de la imagen.
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.
<?php
if (!isset($_SESSION)) {
session_start();
$MM_authorizedUsers = "3";
$MM_donotCheckaccess = "false";
$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.
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;
$isValid = true;
return $isValid;
$MM_restrictGoTo = "index.php";
$MM_qsChar = "?";
$MM_referrer = $_SERVER['PHP_SELF'];
exit;
?>
<?php
if (!function_exists("GetSQLValueString")) {
$theValue = function_exists("mysql_real_escape_string") ?
mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
break;
case "long":
case "int":
break;
case "double":
break;
case "date":
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
return $theValue;
GetSQLValueString($_GET['id'], "int"));
mysql_select_db($database_Tutorial, $Tutorial);
$deleteGoTo = "index.php";
if (isset($_SERVER['QUERY_STRING'])) {
$deleteGoTo .= $_SERVER['QUERY_STRING'];
?>
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…
Agradecimientos
Este tutorial ha sido posible gracias a Juaquinillo y a JaimePG.
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.