Está en la página 1de 38

Tutorial practico de bases de datos en phpmyadmin y dreamweaver

Tutoriales: www.profewalder.com

TUTORIAL PRCTICO COMPLETO DE BASE DE DATOS EN PHPMYADMIN Y


GESTIN DESDE DREAMWEAVER
1. Crear una nueva base de datos en phpMyadmin
Abrimos el wampserver y luego el phpMyadmin

Para seguir este tutorial, debes


tener instalado el wampserver

2. Ahora vemos la pantalla principal de PhpMyAdmin

3. Damos clic en el men bases de datos para crear una nueva base de datos
En la siguiente ventana colocamos el nombre de la base de datos y el formato de caracteres
que utilizaremos en nuestro caso nuestra base de datos se llama contacto y el cotejamiento es
utf8_bin

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Hacemos clic en el botn crear


Ahora ya podemos observar en el panel de la izquierda la nueva base de datos contacto

4. Seguidamente vamos a crear las tablas que utilizaremos para guardar la informacin, para eso
vamos hacer clic sobre el nombre de la base de datos contacto.

En esta ventana podemos observar que hay tablas y que debemos crear una nueva tabla en
nuestro caso se llamara datos y tendr 8 columnas o campos. Hacemos clic en continuar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En esta ventana vamos a colocar los campos o columnas que vamos a utilizar, sus atributos y al
finalizar hacemos clic en guardar.
COLUMNAS O CAMPOS QUE VAMOS A UTILIZAR POR SI NO OBSERVAS BIEN LA VENTANA DE
ARRIBA
NOMBRE
Identificacin
Nombre
Fecha de nacimiento
Correo
Telfono
Estado civil
Genero
Pas origen

TIPO
int
Varchar
date
Varchar
Varchar
Varchar
Varchar
varchar

LONGITUD - TAMAO
20
50
20
50
30
20
20
20

NULO

INDICE
PRIMARY

Ahora podemos observar la tabla datos

Si quieres ver la estructura de la tabla hacemos clic sobre el nombre de la tabla y observamos
los campos y sus atributos

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Si nos qued algo mal podemos modificarlo Aqu.

Hasta aqu llega nuestro tutorial en PhpMyAdmin, hemos creado la base de


datos y una tabla lo dems lo haremos desde dreamweaver.

5. Administrar una Base de Datos de PhpMyadmin desde


Dreamweaver.
6. Lo primero que debemos hacer es verificar que tengamos correctamente configurado el sitio y
el servidor en dreamweaver si esto est listo podemos continuar de lo contrario debemos
configurar el sitio y el servidor de prueba.
Si ya lo tienes listo no sigas el siguiente paso

Configuracin de un sitio web en dreamweaver

Abrir Dreamweaver, en nuestro caso estamos utilizando la versin CS6 de adobe


dreamweaver.
Clic en sitio, nuevo sitio.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En la siguiente ventana colocamos el nombre del sitio, y la carpeta del sitio, que debera ser la carpeta
www que crear el Wampserver cuando se instala.
El nombre de mi sitio es mi nombre walder y la carpeta es E:\wamp\www\ en mi caso yo instale
el wampserver en el disco E:

Ahora vamos a configurar el servidor de prueba. Haga clic en el botn servidor y veras la siguiente
ventana

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En esta venta aparecen configurados los servidores de prueba si no existe lo vamos a crear haciendo
clic en el boton del signo +

Djalo tal como se observa en la ventana anterior, ten en cuenta la carpeta del servidor que en tu
caso puede cambiar por C:\wamp\www si tu wampserver se instal en el disco C: como debera ser.
Ahora hagamos clic en la opcin Avanzadas

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Djalo tal como se muestra en la siguiente ventana

Solo modifique dos cosas, el modelo del servidor es PHP MYSQL, y active la casilla cargar archivos en
el servidor.
Haga clic en la opcin Guardar.

En esta ventana le vamos a decir a Dreamweaver que nuestro servidor es de prueba no remoto.

Listo eso era todo hasta aqu quedo configurado el sitio web y el servidor
de prueba en Dreamweaver. Haga clic en guardar.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Ojo: lo anterior era necesario si no tenas configurado el sitio web y el


servidor si ya estaba listo continua con el siguiente paso.
7. Gestin de la base de datos desde Dreamweaver.

Crear un formulario para ingresar registros a la base de datos.


o Iniciamos creando un nuevo archivo PHP en Dreamweaver.
En el men archivo, nuevo y luego selecciona PHP.

Nueva pgina web PHP

Ahora debemos crear una conexin entre Dreamweaver y PhpMyadmin

Crear la conexin entre Dreamweaver y PhpMyAdmin

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

o Activar la ventana Bases de datos, Clic en el menu ventana de Dreamweaver y Luego


Bases de datos

Ahora podemos observar la ventana Base de datos:

Haga clic en el signo ms y luego en conexin


En la siguiente ventana colocamos los datos del servidor y la base de datos.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Dele clic en el botn seleccionar para seleccionar la base de datos

Seleccione la base de datos contacto y dele aceptar

La contrasea no es necesaria ya que nuestra base de datos tiene como usuario el el usuario
general root de phpmyadmin que no tiene contrasea.
Dele clic en aceptar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Nuevamente aceptar

Siguiendo con nuestro tutorial, ahora vamos a crear un juego de registros, necesarios para
continuar y crear el formulario de insercin de registro.

Antes de continuar guarde el archivo con el nombre nuevo_contacto.php


Por defecto el se guarda en la carpeta www

Ahora si vamos a crear el juego de registro


Haga clic en el men insertar, Objetos de Bases de datos, juego de registro

La siguiente ventana la dejamos tal como aparece ya que vamos a utilizar todos los campos

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Hacemos clic en el men aceptar.

Nuevamente aceptar
Ahora vamos a crear otra pgina web que se mostrara cuando el registro se coloque de forma exitosa
en la base de datos.
En el men archivo, nuevo, php, crear.
Gurdelo con el nombre registro_ok.php
En la pgina registro_ok.php, coloca un ttulo que diga: Tus datos fueron enviado con xito

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Guarda los cambios y psate a la pgina nuevo_contacto.php

Ahora vamos a crear el formulario de insercin de registro.


Clic en el menu insertar, Objetos de bases de datos, insertar registro, asistente de formulario de
insercin de registros.

En la siguiente ventana, en la opcin examinar selecciona el archivo registro_ok.php que creamos


anteriormente.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


NombreTutoriales:
de la
www.profewalder.com
conexion

Nombre de la tabla

Campos de la base
de datos

Dele clic en aceptar.

Vamos a probar el formulario:


En el icono wampserver dele clic en localhost

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Dele clic en el archivo nuevo_contacto.php

Las fechas se escriben en el siguiente formato ao/mes/da ejemplo 1982/10/25


Haga clic en aceptar, y debe salir el siguiente mensaje:

Si quieres probar que los datos si se colocaron en la base de datos, psate a phpmyadmin y dale
clic en la tabla datos.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Para continuar y hacer consultas, vamos a insertar 12 registros.

8. Listar los registros de la base de datos


Para listar los registros de una base de datos, vamos a utilizar dos archivos; uno que
vamos a llamar listado.php y otro que vamos a llamar detalle.php, antes de continuar
debes crear estos dos archivos y guardar los cambios.
- Ubcate en el archivo listado.php
- Crear un juego de registros: Men insertar, objetos de datos, Juego de registros

- Damos aceptar y listo

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

- Ahora vamos a crear el juego de paginas que nos muestre la lista de registros de
la base de datos.
- Clic en el men insertar, objetos de datos, juego de paginas Maestro/detalle.

Y aparecer la siguiente ventana:


En la opcin campos de
pgina maestro deja solo
los cinco primeros
campos, los dems
puedes quitarlos
seleccionndolos y
haciendo clic en el signo
menos, Observa la
imagen
En la opcin nombre de
la pgina detalle, en
examinar selecciona la
pgina detalle.php que
creaste anteriormente,
en la opcin campos de
la pgina detalle, deja
todos los campos.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Lo dems lo entenders por ti solo como buen alumno.


Si ya seleccionaste la pgina detalle dale clic en Aceptar.
Ahora observa la pgina que aparece.

A esta pgina se le puede dar una mejor presentacin.


Si abres el archivo detalle.php, podrs observar que aparecen otros campos esto son
los datos que se mostraran cuando selecciones un registro en la pgina listado.
Guarda todos los cambios, men archivo, guardar todo.
Para probarla, abre local host

Observa la ventana del servidor local

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Dale clic en el archivo listado.php

Aqu deben aparecer todos los registros.


Para ver solo los datos de un registro, haga clic en el nmero de identificacin de ese
registro.
Ahora observa la siguiente ventana

Esta es la pgina que creaste


con el nombre detalle y que
seleccionaste cuando estabas
creando el juego de pginas
maestro/detalle.
Usted puede mejorar la
presentacin de todas estas
pginas, ya que el formato
con que las crea
dreamweaver es bastante simple.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Hasta ahora hemos aprendido:


-

Como crear la base de datos


Como crear las tablas
Como crear un sitio en Dreamweaver
Como crear la conexin entre dreamweaver y phpmyadmin
Como crear un formulario para la insersion de registros
Como mostrar los registros de la base de datos.

El siguiente paso es como modificar los registros que se


encuentran en la base de datos.
-

Crea una nueva pgina llammosla actualizar.php

Inserta un juego de registros:


Men insertar, objeto de datos, juego de registros

Dele clic en Aceptar

- Antes de continuar debes crear otra pgina, que se mostrara cuando el registro
se actualice de forma correcta. Crea otro documento con el nombre
registro_actualizado.php

- Escribe un texto que diga el registro se actualizo correctamente

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Ojo: Ahora debes ubicarte en la pgina actualizar.php

Seguidamente, haga clic en el men insertar, objeto de datos, actualizar registro,


asistente de formulario de actualizacin de registro

En la siguiente ventana,

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En esta ventana solo debes seleccionar el archivo que se va a mostrar si el registro se


actualiza correctamente. Selecciona el archivo registro_actualizado.php que habas
creado anteriormente. Si ya lo hiciste dale clic en Aceptar.
As quedara nuestra pgina

Aqu solo falta agregar una barra de navegacin para desplazarnos por todos los
registros de la base de datos.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Ubique el cursor debajo de la tabla, pero en medio del formulario, el formulario es el


recuadro rojo que observas en la ventana, tu eres inteligente y sabrs como hacerlo.

Ahora haga clic en el men insertar, objetos de datos, paginacin de juego de registro,
barra de navegacin por juego de registro. Observa la imagen de muestra

Deje todo tal como se


muestra en la ventana y
da clic en aceptar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Podemos observar en la siguiente ventana que nos indica que para poder ver los
registros debemos aadir un comportamiento llamado repetir regin.

Dele aceptar y observemos la siguiente ventana.

Observe la barra de desplazamiento que se acaba de insertar


- Como deca anteriormente debemos aadir un comportamiento para que se
muestre.
- Antes de aadir el comportamiento debes seleccionar todo el formulario, de la
siguiente forma:
- Haga clic en la lnea inferior del recuadro rojo ese recuadro rojo es el
formulario y quedara como la siguiente ventana

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

- Ahora vamos a aadir el comportamiento faltante


- Clic en el men insertar, objeto de datos, repetir regin

Aparecer la siguiente ventana:

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En esta ventana, borra


el numero 10 que
aparece y escribe 1
(uno) y dele clic en
aceptar.
Guarde cambios, y
pruebe el formulario
actualizar registro.

No paso a creer que a estas alturas tenga que explicarte como probarlo.
Pero creo que me toco hacerlo.
Abre local host y dele clic a la pagina actualizar.php

Aqu la pgina de actualizacin

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Puedes utilizar la barra de navegacin para desplazarte por todos los registros,
modifica cualquier registro y luego dale clic en actualizar, de seguro aparecer la
siguiente ventana.

Si apareci esta pgina es porque todo sali bien.


Hasta aqu listo nuestro proceso de actualizacin de registros.

Siguiente paso
ELIMINAR REGISTROS DE LA BASE DE DATOS
Para eliminar un registro de nuestra base de datos, debemos crear dos archivos, uno lo
llamaremos eliminar.php y el otro registro_eliminado.php a este ltimo agrguele un
ttulo que diga El registro fue eliminado de nuestra base de datos

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Guarda todos los cambios y pasate al archivo eliminar.php


Inserta un formulario: men insertar, Formulario, formulario.

Observa la lnea roja de la ventana, ese es el formulario.

Ahora dentro del formulario agreguemos un campo de texto:


Men insertar, formulario, campo de texto.

En la siguiente ventana djalo como se muestra en la siguiente ventana:

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

En ID: eliminar
En Etiqueta: Digite el documento de identidad
Dele clic en aceptar

Al frente del campo de texto inserte otro control tipo botn: men insertar, formulario,
botn

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Deja las propiedades de la siguiente forma:


En ID: borrar
En Etiqueta: no coloques nada

Dele aceptar
Quedara as

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

- Para insertar el
comportamiento de eliminacin
de registro, vamos hacer lo
siguiente:
- Clic en el men insertar, objeto
de datos, eliminar registro.

En esta venta vamos hacer lo siguiente:

- En la opcin valor de clave principal selecciona Variable de formulario y al


frente escribe eliminar
- En la opcin despus de borrar, ir a: aqu selecciona la pgina
registro_eliminado.php.
- Dale clic en aceptar.
- Guarda todos los cambios: men archivo, guardar todo.
Para probarlo, abre localhost y luego el archivo eliminar.php

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Digita un documento de identidad y dele clic en enviar.


Aparecer el siguiente mensaje:

HASTA ESTE PUNTO YA HEMOS REALIZADO TODA LA GESTIN


POSIBLE PARA UNA BASE DE DATOS
-

Insertar
Listar
Actualizar
Eliminar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Opcin avanzada de gestin de bases de Bases de datos


desde Dreamweaver
AUTENTICACIN DE USUARIOS
Esta opcin permite administrar las pginas de nuestro sitio web, si el usuario se identifica
correctamente tendr acceso a los sitios que nosotros autoricemos.
Para hacerlo debemos tener en cuenta uno o dos campos de nuestra base de datos que cumplan con
esta funcin para probarlo vamos hacerlo con los campos identificacin y el campo correo.
-

Primero que todo debemos crear una pgina que se mostrara si el usuario inicia sesin
correctamente y otra pgina si los datos de inicio de sesin son incorrectos, y luego la pgina
de autenticacin.
Cree un nuevo documento php llamado admin.php djelo como se muestra a continuacin

Esta es la pgina web que se mostrara si el usuario se identifica correctamente, Los puntos que
observas tienen vnculos de las pginas que ya hemos creado, debes hacer estos vnculos. No
necesariamente el diseo debe quedar como se muestra, desde esta pgina se administra toda
nuestra base de datos por eso es importante restringirle el acceso.
Guarda este documento con el nombre admin.php.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Crea otro documento con el nombre error.php


Esta ser la pgina que se mostrara si el
usuario no se identifica correctamente.
Guarda los cambios recuerda que el
nombre es error.php.
No necesariamente el diseo tiene que
quedar como se muestra en la imagen
-

Ahora si vamos a crear la pgina web de autenticacin de usuarios.


Crea un nuevo documento, llmalo autenticacin.php,
Ahora debemos crear un formulario y tres campos especiales.
Creemos el formulario, men insertar, formulario, formulario.

Observe la lnea roja identifica un formulario, dentro de ella vamos agregar tres objetos de
formulario, dos campos de texto y un botn.

Creemos el primer cuadro de texto, men insertar, formulario, campo de texto

Djalo tal como se muestra en pantalla y dele aceptar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Observe que el
id esta en
minscula, la
etiqueta no
importa como
quede.

Al frente del campo anterior, vamos a crear el otro campo: men insertar, formulario, campo
de texto.
Djalo tal como se muestra en la siguiente ventana

Ojo el id es password en
minscula
La etiqueta si puedes colocar
Contrasea. Dele aceptar

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Nos falta el ltimo elemento y es el botn vamos a colocarlo frente del anterior
- Men insertar, formulario, Botn

En id escribe entrar y no le
escribas nada en etiqueta.

Guardemos los cambios.


Ahora vamos a crear el evento de autenticacin.
-

Men insertar, objeto de datos, autenticacin de usuario, conectar usuario.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Observemos la siguiente ventana:

Este es el
grupo del
formulario

Este es el
grupo de
la base de
datos
Pgina que se
mostrar si la
conexin es
correcta
Pgina que se
mostrar si la
conexin no
es correcta

Debes dejar todo tal como est en la imagen, si te fijas nuestro usuario va ser el correo y la
contrasea el nmero de identificacin.
Dale aceptar y guarde los cambios.

Seleccione la
conexin para
nosotros es
contacto.

Tutorial practico de bases de datos en phpmyadmin y dreamweaver


Tutoriales: www.profewalder.com

Vamos a agregar una caracterstica particular al campo contrasea, cuando escribamos dentro del
campo en vez de los caracteres, se muestren asteriscos.

Selecciona el campo contrasea el cuadrito, y observa las propiedades


Activa la opcin contrasea

Nuevamente guardemos los cambios.


Para probarlo, abra el localhost, y luego el archivo autenticacin.php

Coloca el correo y observa que en la contrasea apareces asteriscos, recuerda que la contrasea es la
identificacin.
Si todo est correcto, debe salir esta pgina.

Puedes probar colocando datos errneos y observaras lo que sucede.


Bueno hasta aqu todo lo que es gestin de una base de datos de PhpMyAdmin, desde dreamweaver.

También podría gustarte