Download - Taller Base de Datos Mysql Dreamweaver
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
Gestión de bases de datos de mysql desdeDreamweaver
Para realizar este tutorial debes tener instalado Adobe Dreamweaver CS6 yWampserver 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 descárgalo aquí h tt p: //www.w a m p s e r v e r . e s / instalarlo, inicio de la instalación
Aceptar los términos 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 cómo 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 instalación
Al finalizar la instalación el debería 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 españolComo pasarlo a españolEn la barra de tareas, al lado del reloj debe aparecer el icono del
wampserver, dele clic derecho, seleccione en lenguaje el idioma español.
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 Prof: Charles Flores Roque
Paso1. Crear la base de datos:
Clic en el botón Base de datos
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
Mi base de datos se llama agenda, al frente está la opción 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 número 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, teléfono, género.Clic en continuarAsí quedan las propiedades de mi tabla
Deja las propiedades tal como se muestran en pantalla, si quieres aprender más, investiga tipo de datos y tamaño 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.Aclaración:En nuestra base de datos todos los campos serán 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 gestión de la base de datos la realizaremos desde Dreamweaver.
1. Abrir el Dreamweaver2. Configuración 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.
Configuración del servidor:
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
Déjalo 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 quedaría c:\wamp\www, es la carpeta del servidor de prueba, lo mejor es hacer clic en la carpeta y
seleccionarla
Ahora en opciones avanzadas:
Déjalo 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 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, desdeDreamweaver.
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 opción conexión SQL. Observe la imagen arriba
El nombre de la conexión, 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 contraseña la dejamos en blanco. En Base de datos clic en el botón 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 conexión 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 deberíamos 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
Déjalo como esta y dale clic en aceptar y guarde cambios.
Antes de continuar, cree un documento php, guárdelo 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 página 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 página web registró exitoso.php, como se muestra en la opción 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 página 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 phpmyadminSeleccionamos 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 archivonuevo.php
Creando el formulario para listar todos los registros. Abra Dreamweaver, si tiene alguna página abierta le recomiendo
cerrarla. Cree un nuevo archivo php, guárdelo con el nombre
registro_seleccionado.php, y ciérrelo. Cree otro 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
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
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 Le damos aceptar Ahora probémoslo 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
Explorar registros
Explorar las páginas
Bueno yo modifique el formato y coloque una imagen esto para mejorar la presentación, usted también puede hacerlo.
Si haces clic en el id de algún registro, te mostrara solo el registro seleccionado que aparecerá en la página que creaste llamada registro_seleccionado.php, pruébalo.
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
En el siguiente paso vamos a realizar un formulario que nospermita 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, y cierre este archivo
Cree un nuevo documento php, guárdelo con el nombre actualizar_registro.php
Ahora vamos a crear un juego de registros en la página 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 actualización 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 exploración que nos permita explorar los demás registros
Como colocar la barra de exploración: Primero que todo coloque el cursor dentro del formulario, en medio
del recuadro rojo, no dentro de la tabla, puede ser al lado de losbotones amarillos de php.
Ahora vamos al menú insertar, objeto de datos, paginación de juego de registro, barra de navegación 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 página web actualizar_restros.php, tendremos algo parecido a esto.
Bueno yo le modifique el diseño, le coloque una imagen y un título para una mejor presentación cosa que también puede hacer usted
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
Por último, vamos a realizar el formulario que nospermita 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.
Déjelo como se muestra en la imagen y le da Aceptar
COMPUTACION E INFORMATICA – VI SEMESTRE Prof: Charles Flores Roque
Colocar un botón de enviar formulario con las siguientes caracteristicas: menú insertar, formulario, botón.
No coloque nada en la opción etiqueta
Así queda la página web
Ahora vamos a aplicar la opción 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 guárdelo con el nombre
eliminado_con_exito.php, coloque un mensaje que diga el archivo seha eliminado de la base datos. Guárdelo y ciérrelo.
Realizar la operación que nos permita eliminar los registros: Estando en la página 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. También debemos elegir la página que vamos a mostrar después de realizar la operación. En nuestro caso eliminado_con_exito.php. obsérvelo y déjelo 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 pruébelo, ya usted sabe cómo hacerlo.
Como siempre yo he cambiado el diseño de la página web y le he colocado una imagen y un título.
Bueno esto ha sido todo, usted puede crear una página web desde donde puede administrar toda la gestión de la base de datos por medio de vínculos.
Este tutorial me tomo hacerlo varias horas, a usted solo le tomara unos minutos agradecer.
Realizado por:Walder Pontón Flórezw a ld e r p o n t o n@h o t m a il. c om Vivo en Arauca Colombia y hablo español.