gestión de bases de datos de mysql desde dreamweaver · gestión de bases de datos de mysql desde...

28
Guía realizada por: Walder Pontón Flórez Gestión de bases de datos de mysql desde Dreamweaver 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 e instalarlo Aceptar los términos del contrato

Upload: lamnhan

Post on 15-Oct-2018

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Gestión de bases de datos de mysql desde

Dreamweaver

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 e instalarlo

Aceptar los términos del contrato

Page 2: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Directorio donde se instalará el programa

Crear iconos en el escritorio

Page 3: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Se deja tal como esta

Page 4: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Finalizar la instalación

Como pasarlo a español

Page 5: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

En la barra de tareas, al lado del reloj debe aparecer el icono del

wampserver, dele clic derecho, seleccione en lenguaje el idioma español.

Ahora vamos a encender el wampserver

Y ya está el servidor de prueba listo para trabajar

Page 6: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

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 .

Paso. Crear la base de datos:

Clic en el botón Base de datos

Page 7: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Mi base de datos se llama agenda, al frente está la opción cotejamiento,

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)

Page 8: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Dele el nombre a la tabla y el número de columnas que va a utilizar

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, teléfono, género.

Clic en continuar

Así quedan las propiedades de mi tabla

Al campo id vamos agregarle dos nuevas propiedades.

Será nuestra clave principal y será auto incrementable (autonumerico).

Page 9: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Estas propiedades es solo para el campo id.

Aclaración:

En nuestra base de datos todos los campos serán obligatorios.

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.

Page 10: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

De aquí en adelante la gestión de la base de datos la

realizaremos desde Dreamweaver.

1. Abrir el Dreamweaver

2. Configuración del sitio web, (si no está configurado) en el menú sitio

seleccione nuevo sitio.

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.

Configuración del servidor:

Page 11: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Déjalo como se muestra en la imagen

En opciones avanzadas:

Déjalo como aparece en la imagen

Page 12: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Dele clic en guardar:

Déjalo como se muestra en la imagen. (Servidor de prueba)

Clic en Guardar.

Listo la configuración del sitio en Dreamweaver.

Crear la conexión 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

Page 13: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Esta es la ventana de bases de datos de Dreamweaver

Haga clic en la opción conexión SQL.

El nombre de la conexión, coloque el nombre del sitio, en micaso es

prueba. El servidor por defecto es localhost, el nombre de usuario por

defecto es root, nosotros no le hemos colocado contraseña.

Clic en el botón seleccionar para buscar la base de datos.

Page 14: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

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 conexión.

Page 15: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

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

Desde el archivo nuevo.php

Crear un juego de registros, En el menú insertar, objeto de datos,

juego de registro.

Clic en aceptar

Page 16: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Antes de continuar, cree un documento php, guárdelo con el

nombre ingreso_ xitoso.php, escriba un texto en el centro de la

página que diga el registro se realizó de forma exitosa, guarde

cambios.

Crear el formulario para el ingreso de registros.

Menú insertar, objeto de datos, insertar registro, asistende de

formulario para insertar registros.

Page 17: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Lo único que vamos a modificar aquí es buscar la pagina web registro

exitoso, como se muestra en la opción tras insertar ir a:

5. Desde el servidor de pruebas abrir localhost

Page 18: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Abrir el archivo nuevo.php

Llenar todos los campos menos el ID, el id es autoincrementable,

Al enviar el formulario debe mostrarme la página ingreso_exito.php

Para probar si el registro se colocó de forma exitosa observamos la

base de datos, abrimos el phpmyadmin.

Page 19: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Abriendo el phpmyadmin

Seleccionamos la base de datos agenda

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

En mi caso yo he agregado varios registros

Registros insertados

Page 20: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Ahora vamos a realizar un formulario que nos muestre todos los registros de la base de datos. Antes debes ingresar al menos 10 registros.

Creando el formulario para listar todos los registros.

Cree un nuevo archivo php, guárdelo con el nombre

registro_seleccionado.php.

Cree un nuevo archivo php, guárdelo 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 páginas maestro detalle.

Aparece la siguiente ventana

Solo he modificado dos cosas

En el número de registros que se van a mostrar coloque 8

En nombre de la página detalle, seleccione el archivo registro_seleccionado.php

Page 21: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Le damos aceptar, ahora probémoslo abriendo el local host desde el Wampserver.

Luego clic en el archivo listarregistros.php

Debe aparecer algo como a esto

Bueno yo modifique el formato y coloque una imagen

Explorar

las páginas

Explorar

registros

Page 22: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Y aquí se ve mejor:

En el siguiente paso vamos a realizar un formulario que nos permita modificar los registros de la Base de datos.

Cree un archivo php guárdelo con el nombre registro_actualizado.php, escriba un texto que diga: “El registro se ha actualizado correctamente”, guarde los cambios

Cree un nuevo documento php, guárdelo con el nombre actualizar_registro.php

Ahora vamos a crear un juego de registros en la pagina actualizar_registro: Menú insertar, objeto de datos, juego de registro.

Ahora vamos a crear el formulario que nos permita actualizar los registros: Menú insertar, objeto de datos, actualizar registro, asistente de formulario de actualización de registro.

Page 23: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

En la siguiente ventana solo vamos a seleccionar el archivo registro_actualizado.php.

Observemos el formulario

Page 24: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Vamos a colocar una barra de exploración que nos permita ver los demás registros

Insertando la barra de exploración: Menu insertar, objeto de datos, paginación de juego de registro, barra de navegación por juego de registro.

Aceptar

Page 25: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Para probar el formulario, abrimos el wampserver, localhost, y luego desde el explorador la página web actualizar_restros.php, tendremos algo parecido a esto.

Bueno yo le modifique el diseño, le coloque una imagen y un titulo para una mejor presentación

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.

Insertar un campo de texto con estas características

Page 26: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Coloque un cuadro de texto, menú insertar, formulario, campo de texto.

Aceptar

Colocar un botón de enviar formulario con las siguientes caracteristicas: menú insertar, formulario, botón.

Page 27: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Así queda la página web

Ahora vamos a aplicar la opción que nos permita eliminar los registros seleccionados.

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. También debemos elegir la página que vamos a mostrar después de realizar la operación.

Dejarlo como aparece en la ventana. Abrirlo desde el localhost y probarlo.

Page 28: Gestión de bases de datos de mysql desde Dreamweaver · Gestión de bases de datos de mysql desde Dreamweaver ... Bueno yo le modifique el diseño, le coloque una imagen y un titulo

Guía realizada por: Walder Pontón Flórez

Como siempre yo he cambiado el diseño de la página web y le he colocado una imagen y un título.