COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

En la siguiente ventana deja todo tal como esta.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Paso1. Crear la base de datos:

Clic en el botn Base de datos

Prof: Charles Flores Roque

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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:

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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:

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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
Dreamwea
ver.
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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.p
hp
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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

Debe aparecer algo como a esto

Explor
ar
registr
os

Explora
r 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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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.

COMPUTACION E INFORMATICA VI SEMESTRE

Prof: Charles Flores Roque

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

COMPUTACION E INFORMATICA VI SEMESTRE

walderponton@hotmail
.com
Vivo en Arauca Colombia y hablo
espaol.

Prof: Charles Flores Roque