Gua realizada por: Walder Pontn Flrez

Gestin de bases de datos de mysql desde

Dreamweaver
Para realizar este tutorial debes tener instalado Adobe Dreamweaver CS6 y
Wampserver 2.2.
Contenido.
Instalar el servidor de prueba
Crear la base de datos
Alimentar la base de datos (insertar registros)
Consultar los datos (listar registros)
Modificar los datos
Eliminar los datos

1. Instalar el servidor de prueba (WAMPSERVER)

Descargar el Wampserver es una software gratuito descrgalo aqu
http://www.wampserver.es/ instalarlo, inicio de la instalacin

Aceptar los trminos del contrato

 Gua realizada por: Walder Pontn Flrez

En la siguiente ventana elegimos el directorio donde se instalar el

programa, yo lo voy a instalar en el disco D:, te recomiendo dejarlo por
defecto en cmo te aparece. C:

En la siguiente ventana activo las dos opciones para que me cree acceso
directo en el escritorio.
 Gua realizada por: Walder Pontn Flrez

En la siguiente ventana deja todo tal como esta.

 Gua realizada por: Walder Pontn Flrez

Finalizar la instalacin

Al finalizar la instalacin el debera iniciarse si no lo hace busca el acceso

directo en el escritorio y lo inicias, aparecer en la bandeja al lado del reloj.
Por defecto el se instala en ingles pero lo podemos pasar a espaol
Como pasarlo a espaol
En la barra de tareas, al lado del reloj debe aparecer el icono del
wampserver, dele clic derecho, seleccione en lenguaje el idioma
espaol.
 Gua realizada por: Walder Pontn Flrez

Debemos encender el servidor de prueba. Dele clic al icono y luego

encender

Y ya est el servidor de prueba listo para trabajar

Ahora vamos a crear la Base de datos

2. Crear la base de datos
Utilizando PhpMyAdmin, se instala con el Wampserver y lo inicias desde la
bandeja de entrada en el icono del wampserver .
 Gua realizada por: Walder Pontn Flrez

Paso1. Crear la base de datos:

Clic en el botn Base de datos
 Gua realizada por: Walder Pontn Flrez

Mi base de datos se llama agenda, al frente est la opcin cotejamiento

debemos seleccionar el formato de caracteres, seleccione utf8_bin.
Escribe el nombre de la base de datos y dele clic en crear.
Observe que a la izquierda del programa aparece la base de datos agenda.

Paso 2. Vamos a crear las tablas.

Para crear las tablas, seleccione la base de datos (dele clic sobra la base de
datos agenda)

Dele el nombre a la tabla y el nmero de columnas que va a utilizar

 Gua realizada por: Walder Pontn Flrez

El nombre de mi tabla es datos, los campos que voy a utilizar son cinco (5)
Seleccione cinco columnas porque voy a utilizar los siguientes campos
Id, nombre, correo, telfono, gnero.
Clic en continuar
As quedan las propiedades de mi tabla

Deja las propiedades tal como se muestran en pantalla, si quieres aprender

ms, investiga tipo de datos y tamao de campos.

Al campo id vamos agregarle dos nuevas propiedades. A la derecha puedes

observar mas propiedades de campos.
El campo id ser nuestra clave principal y ser auto incrementable
(autonumerico).

Estas propiedades es solo para el campo id.

Aclaracin:
En nuestra base de datos todos los campos sern obligatorios.
 Gua realizada por: Walder Pontn Flrez

Dele clic en guardar para crear la tabla.

Podemos observar que la base de datos agenda tiene una tabla llamada
datos.
Aqu queda lista la base de datos.

De aqu en adelante la gestin de la base de datos la

realizaremos desde Dreamweaver.
1. Abrir el Dreamweaver
2. Configuracin del sitio web, (si no est configurado) en el men sitio
seleccione nuevo sitio.
 Gua realizada por: Walder Pontn Flrez

Mi sitio se llama prueba, la carpeta del sitio local es la que crea el servidor
de prueba, que se llama www. Normalmente debe estar en c:\wamp\www
Observe la imagen.
Configuracin del servidor:
 Gua realizada por: Walder Pontn Flrez

Djalo como se muestra en la imagen

Observa que aqu aparece

d:\wamp\www

Esto porque yo lo instale en el disco

d:, usted debi instalarlo en c:,
entonces quedara c:\wamp\www,
es la carpeta del servidor de prueba,
lo mejor es hacer clic en la carpeta y
seleccionarla

Ahora en opciones avanzadas:

Djalo como aparece en la siguiente imagen

Dele clic en guardar:

 Gua realizada por: Walder Pontn Flrez

Nuestro servidor es de prueba as que djalo como se muestra en la

imagen. (Servidor de prueba)
Clic en Guardar.
Listo la configuracin del sitio en Dreamweaver.

Crear la conexin con la Base de datos, desde

Dreamweaver.
3. Crear un nuevo archivo php, y lo guardan con el nombre nuevo.
En el men ventana de Dreamweaver clic en base de datos

Esta es la ventana de bases de datos de Dreamweaver

 Gua realizada por: Walder Pontn Flrez

Es posible que en tu pc la ventana aparezca en la parte derecha, la mia

est en el centro yo la saque hacia el centro pero da igual donde se
encuentre, Haga clic en la opcin conexin SQL. Observe la imagen arriba

El nombre de la conexin, coloque el nombre del sitio, en mi caso es

prueba. El servidor por defecto es localhost, el nombre de usuario por
defecto es root, por defecto no trae contrasea la dejamos en blanco.
En Base de datos clic en el botn seleccionar para buscar la base de
datos. La de nosotros se llama agenda.
 Gua realizada por: Walder Pontn Flrez

Seleccionamos la base de datos con la que vamos a trabajar en nuestro

caso con la base de datos agenda. Aceptar.

Aceptar

Hasta aqu lista la conexin con la base de datos.

4. Crear el formulario para el ingreso de datos (nuevos registros)

Desde el archivo nuevo.php, que ya creamos y deberamos tener abierto
Crear un juego de registros con el que vamos a trabajar, En el men
insertar de dreamweaver, objeto de datos, juego de registro.

Observa la imagen abajo

 Gua realizada por: Walder Pontn Flrez

Djalo como esta y dale clic en aceptar y guarde cambios.

Antes de continuar, cree un documento php, gurdelo con el nombre
ingreso_ xitoso.php, en este documento vamos a colocar un mensaje
que aparecer cuando se ingrese el registro de forma satisfactoria.
escriba un texto en el centro de la pgina que diga el registro se realiz
de forma exitosa, guarde cambios.
 Gua realizada por: Walder Pontn Flrez

Cierra la pagina ingreso_ xitoso.php , y nos quedamos en la pagina

nuevo.php
Vamos a crear el formulario para el ingreso de registros.
Vamos al men insertar, objeto de datos, insertar registro, asistente
de formulario para insertar registros.

Lo nico que vamos a modificar aqu es buscar la pgina web registr

exitoso.php, como se muestra en la opcin tras insertar ir a, dele en
examinar y busque este archivo. Observemos el formulario que se crea
 Gua realizada por: Walder Pontn Flrez

5. Guardemos el formulario y vamos a probarlo

6. Desde el icono del servidor de pruebas abrir localhost

Parecer en el explorador todos los archivos realizados.

Abrir el archivo nuevo.php

 Gua realizada por: Walder Pontn Flrez

Llenar todos los campos menos el ID, el id es autoincrementable y se crea

automaticamente, Al enviar el formulario debe mostrarme la pgina
ingreso_exito.php

Para probar si el registro se coloc de forma exitosa vamos a observar la base

de datos, abrimos el phpmyadmin desde el Wampserver , esta en la barra
de tareas

Abriendo el phpmyadmin
Seleccionamos la base de datos agenda

Luego clic sobre la tabla datos, ya podemos observar los registros.

 Gua realizada por: Walder Pontn Flrez

Registros insertados

En mi caso yo he agregado varios registros

Ahora vamos a realizar un formulario que nos muestre

todos los registros de la base de datos.
Antes debes ingresar al menos 10 registros, desde el archivo
nuevo.php
Creando el formulario para listar todos los registros.
Abra Dreamweaver, si tiene alguna pgina abierta le recomiendo
cerrarla.
Cree un nuevo archivo php, gurdelo con el nombre
registro_seleccionado.php, y cirrelo.
Cree otro archivo php, gurdelo con el nombre listar_registros.php
En el archivo listar_registros.php, Inserte un juego de registros,
men insertar, objeto de datos, juego de registro.
Ahora vamos a crear el formulario para listar todos los registros.
Men insertar, objeto de datos, juego de pginas maestro detalle.
Aparece la siguiente ventana
 Gua realizada por: Walder Pontn Flrez

Solo he modificado dos cosas

En el nmero de registros que se van a mostrar coloque 8
En nombre de la pgina detalle, seleccione el archivo
registro_seleccionado.php
Le damos aceptar
Ahora probmoslo abriendo el local host desde el Wampserver.

Luego clic en el archivo listarregistros.php

 Gua realizada por: Walder Pontn Flrez

Debe aparecer algo como a esto

Explorar
registros

Explorar
las pginas

Bueno yo modifique el formato y coloque una imagen esto para mejorar la

presentacin, usted tambin puede hacerlo.

Si haces clic en el id de algn registro, te mostrara solo el registro

seleccionado que aparecer en la pgina que creaste llamada
registro_seleccionado.php, prubalo.
 Gua realizada por: Walder Pontn Flrez

En el siguiente paso vamos a realizar un formulario que nos

permita modificar los registros de la Base de datos.

Cree un archivo php gurdelo con el nombre

registro_actualizado.php, escriba un texto que diga: El registro se ha
actualizado correctamente, guarde los cambios, y cierre este archivo
Cree un nuevo documento php, gurdelo con el nombre
actualizar_registro.php
Ahora vamos a crear un juego de registros en la pgina
actualizar_registro.php: Men insertar, objeto de datos, juego de
registro, en este mismo archivo vamos a crear el formulario que nos
permita actualizar los registros: Men insertar, objeto de datos,
actualizar registro, asistente de formulario de actualizacin de
registro.

En la siguiente ventana solo vamos a seleccionar el archivo

registro_actualizado.php.
 Gua realizada por: Walder Pontn Flrez

Observemos como queda el formulario, usted puede cambiarle la

apariencia a su gusto

Ahora debemos colocar una barra de exploracin que nos permita explorar
los dems registros

Como colocar la barra de exploracin:

Primero que todo coloque el cursor dentro del formulario, en medio
del recuadro rojo, no dentro de la tabla, puede ser al lado de los
botones amarillos de php.
Ahora vamos al men insertar, objeto de datos, paginacin de juego
de registro, barra de navegacin por juego de registro.
 Gua realizada por: Walder Pontn Flrez

Aceptar

Para probar el formulario, abrimos el wampserver, localhost, y luego

desde el explorador la pgina web actualizar_restros.php, tendremos
algo parecido a esto.

Bueno yo le modifique el diseo, le coloque una imagen y un ttulo

para una mejor presentacin cosa que tambin puede hacer usted
 Gua realizada por: Walder Pontn Flrez

Por ltimo, vamos a realizar el formulario que nos

permita eliminar los registros de nuestra base de datos.

Crear un nuevo archivo php, llamarlo eliminar_registros.php, inserte

un juego de registros: men insertar, objeto de datos, juego de
registros.
Insertar un formulario: men insertar, formulario, formulario.

Dentro del formulario vamos a crear un campo de texto: menu

insertar, formulario, campo de texto.

Djelo como se muestra en la imagen y le da Aceptar

 Gua realizada por: Walder Pontn Flrez

Colocar un botn de enviar formulario con las siguientes

caracteristicas: men insertar, formulario, botn.

No coloque nada en la opcin etiqueta

As queda la pgina web

Ahora vamos a aplicar la opcin que nos permita eliminar los registros
seleccionados, pero antes debemos crear una pagina que nos muestre
que el registro se ha eliminado de forma exitosa.
Cree un nuevo archivo gurdelo con el nombre
eliminado_con_exito.php, coloque un mensaje que diga el archivo se
ha eliminado de la base datos. Gurdelo y cirrelo.
Realizar la operacin que nos permita eliminar los registros:
Estando en la pgina eliminar_registros.php, Vamos Men insertar,
objeto de datos, eliminar registro.
En la siguiente ventana especificamos que vamos a verificar la variable del
formulario llamada id, que anteriormente realizamos. Tambin debemos
elegir la pgina que vamos a mostrar despus de realizar la operacin. En
nuestro caso eliminado_con_exito.php. obsrvelo y djelo como se
muestra en la siguiente ventana.
 Gua realizada por: Walder Pontn Flrez

Deje todo como aparece en esta ventana.

La pagina para eliminar registro se llama eliminar_registros.php abrala

desde el localhost y prubelo, ya usted sabe cmo hacerlo.

Como siempre yo he cambiado el diseo de la pgina web y le he

colocado una imagen y un ttulo.

Bueno esto ha sido todo, usted puede crear una pgina web desde donde
puede administrar toda la gestin de la base de datos por medio de
vnculos.

Este tutorial me tomo hacerlo varias horas, a usted solo le tomara unos
minutos agradecer.

Realizado por:
Walder Pontn Flrez
walderponton@hotmail.com
Vivo en Arauca Colombia y hablo espaol.