Taller Base de Datos Mysql Dreamweaver

COMPUTACION COMPUTACION E INFORMATICA INFORMATICA – VI SEMESTRE

Prof: Charles Flores Roque

Gestión 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 !odi"i#ar los datos $liminar los datos • • • • • •

%. Instalar el servidor de prueba (WA!PS$&'$& Des#argar el Wampserver es una so"tware gratuito des#rgalo a)u* +ttp,--www.wampserver.esinstalarlo ini#io de la instala#i/n

A#eptar los t0rminos del #ontrato



$n la siguien siguiente te ventana ventana elegimos elegimos el dire#tor dire#torio io donde donde se instalar el programa yo lo voy a instalar en el dis#o D, te re#omiendo de1arlo por de"e#to en #/mo te apare#e. C,

$n la siguiente ventana a#tivo las dos op#iones para )ue me #ree a##eso dire#to en el es#ritorio.



$n la siguiente ventana de1a todo tal #omo esta.



inalizar la instala#i/n

Al "inalizar la instala#i/n el deber*a ini#iarse si no lo +a#e bus#a el a##eso dire#to en el es#ritorio y lo ini#ias apare#er en la bande1a al lado del relo1. Por de"e#to el se instala en ingles pero lo podemos pasar a espa3ol Como pasarlo a español $n la barra de tareas al lado del relo1 debe apare#er el i#ono del wampserver dele #li# dere#+o sele##ione en lengua1e el idioma espa3ol.



Debemos en#ender el servidor de prueba. Dele #li# al i#ono y luego en#ender

4 ya est el servidor de prueba listo lis to para traba1ar

Ahora vamos a crear la Base de datos 2. Crear la base de datos 5tilizando P+p!yAdmin se instala #on el Wampserver y lo ini#ias desde la bande1a de entrada en el i#ono del wampserver .


Paso1. Crear la base de datos

Cli# en el bot/n ase de datos




!i base de datos se llama agenda al "rente est la op#i/n #ote1amiento debemos sele##ionar el "ormato de #ara#teres sele##ione ut"78bin. $s#ribe el nombre de la base de datos y dele #li# en #rear. 9bserve )ue a la iz)uierda del programa apare#e la base de datos agenda.

Paso 2. !amos a crear las tablas.

Para #rear las tablas sele##ione la base de datos (dele #li# sobra la base de datos agenda

Dele el nombre a la tabla y el n:mero de #olumnas )ue va a utilizar



$l nombre de mi tabla es datos los #ampos )ue voy a utilizar son #in#o (; Sele##ione #in#o #olumnas por)ue voy a utilizar los siguientes #ampos "d# nombre# correo# tel$%ono# &$nero. Cli# en #ontinuar As* )uedan las propiedades de mi tabla

De1a las propiedades tal #omo se muestran en pantalla si )uieres aprender ms investiga tipo de datos y tama3o de #ampos. Al #ampo id vamos agregarle dos nuevas propiedades. A la dere#+a puedes observar mas propiedades de #ampos. $l #ampo id ser nuestra #lave prin#ipal y ser auto in#rementable (autonumeri#o.

$stas propiedades es solo para el #ampo id. Aclaración $n nuestra base de datos todos los #ampos sern obligatorios.



Dele #li# en guardar para #rear la tabla.

Podemos observar )ue la base de datos agenda tiene una tabla llamada datos. Aq'( q'eda lista la base de datos.

De aq'( en adelante la &estión de la base de datos la reali)aremos desde Dreamweaver. %. Abrir el Dreamweaver 2. Con"igura#i/n del sitio web (si no est #on"igurado en el men: sitio sele##ione nuevo sitio.



!i sitio se llama prueba la #arpeta del sitio lo#al es la )ue #rea el servidor de prueba )ue se llama www.


D01alo #omo se muestra en la imagen

9bserva )ue a)u* apare#e d,=wamp=www $sto por)ue yo lo instale en el dis#o d, usted debi/ instalarlo en #, enton#es )uedar*a #,=wamp=www es la #arpeta del servidor de prueba lo me1or es +a#er #li# en la #arpeta y sele##ionarla

A+ora en op#iones avanzadas, D01alo #omo apare#e en la siguiente imagen

Dele #li# en guardar,



uardar. ?isto la #on"igura#i/n del sitio en Dreamweaver.

Crear la cone*ión con la Base de datos# desde Dreamwea ver. @. Crear un nuevo ar#+ivo p+p y lo guardan #on el nombre nuevoB. $n el men: ventana de Dreamweaver #li# en base de datos

$sta es la ventana de bases de datos de Dreamweaver

COMPUTACION E INFORMATICA – VI SEMESTRE SEMEST RE


$s posible )ue en tu p# la ventana aparez#a aparez#a en la parte dere#+a la mia est en el #entro yo la sa)ue +a#ia el #entro pero da igual donde se en#uentre aga #li# en la op#i/n #onei/n SE?. 9bserve la imagen arriba

$l nombre de la #onei/n #olo)ue el nombre del sitio en mi #aso es prueba. $l servidor por de"e#to es lo#al+ost el nombre de usuario por de"e#to es root por de"e#to no trae #ontrase3a la de1amos en blan#o. $n ase de datos #li# en el bot/n sele##ionar para bus#ar la base de datos. ?a de nosotros se llama agenda.



Sele##ionamos la base de datos #on la )ue vamos a traba1ar en nuestro #aso #on la base de datos agenda. A#eptar.

A#eptar

+asta aq'( lista la cone*ión con la base de datos. F. Crear el "ormulario para el ingreso de datos (nuevos registros Desde el ar#+ivo nuevo.p+p )ue ya #reamos y deber*amos tener abierto Crear un 1uego de registros #on el )ue vamos a traba1ar $n el men: insertar de dreamweaver ob1eto de datos 1uego •

de registro. 9bserva la imagen aba1o



D01alo #omo esta y dale #li# en a#eptar y guarde #ambios. •

Antes de #ontinuar #ree un do#umento p+p gurdelo #on el nombre ingreso8 itoso.p+p en este do#umento vamos a #olo#ar un mensa1e )ue apare#er #uando se ingrese el registro de "orma satis"a#toria. es#riba un teto en el #entro de la pgina )ue diga el registro se realiz/ de "orma eitosa guarde #ambios.

COMPUTACION COMPUTACION E INFORMATICA INFORMATICA – VI SEMESTRE •

•


Cierra la pagina ingreso8 itoso.p+p  y nos )uedamos en la pagina nuevo.p+p 'amos a #rear el "ormulario para el ingreso de registros. 'amos al men: insertar ob1eto de datos insertar registro asistente de "ormulario para insertar registros.

?o :ni#o )ue vamos a modi"i#ar a)u* es bus#ar la pgina web registr/ eitoso.p+p #omo se muestra en la op#i/n tras insertar ir a# dele en eaminar y bus)ue este ar#+ivo. 9bservemos el "ormulario )ue se #rea



;. >uardemos el "ormulario y vamos a probarlo 6. Desde el i#ono del servidor de pruebas abrir lo#al+ost

Pare#er en el eplorador todos los ar#+ivos realizados.

Abrir el ar#+ivo nuevo.p+p



?lenar ?lenar todos los #ampos #ampos menos el ID el id es autoin#rementable autoin#rementable y se #rea automati#amente automati#amente Al enviar el "ormulario debe mostrarme la pgina ingreso8eito.p+p

Para probar si el registro se #olo#/ de "orma eitosa vamos a observar la base de datos abrimos el p+pmyadmin desde el Wampserver  esta en la barra de tareas

Abriendo el p+pmyadmin Sele##ionamos la base de datos agenda

?uego #li# sobre la tabla datos ya podemos observar los registros.



&egistros insertados

,n mi caso yo he a&re&ado varios re&istros

Ahora vamos a reali)ar 'n %orm'lario q'e nos m'estre todos los re&istros de la base de datos. Antes debes in&resar al menos 1- re&istros# desde el archivo n'evo.p hp

Creando el "ormulario para listar todos los registros. Abra Dreamweaver si tiene alguna pgina abierta le re#omiendo #errarla. Cree un nuevo ar#+ivo p+p gurdelo #on el nombre registro8sele##ionado.p+p y #i0rrelo. Cree otro ar#+ivo p+p gurdelo #on el nombre listar8registros.p+p $n el ar#+ivo listar8registros.p+p Inserte un 1uego de registros men: insertar ob1eto de datos 1uego de registro. A+ora vamos a #rear el "ormulario para listar todos los registros. !en: insertar ob1eto de datos 'e&o de p/&inas maestro detalle. Apare#e la siguiente ventana •

•

•

•

•

•



Solo +e modi"i#ado dos #osas $n el n:mero de registros )ue se van a mostrar #olo)ue 7 $n nombre de la pgina detalle sele##ione el ar#+ivo registro8sele##ionado.p+p ?e damos a#eptar A+ora prob0moslo abriendo el lo#al +ost desde el Wampserver. •

•

• •

?uego #li# en el ar#+ivo listarregistros.p+p



Debe apare#er algo #omo a esto $plor ar registr os

$plora r las pginas

ueno yo modi"i)ue el "ormato y #olo)ue una imagen esto para me1orar la presenta#i/n usted tambi0n puede +a#erlo.

Si +a#es #li# en el id de alg:n registro te mostrara solo el registro sele##ionado )ue apare#er en la pgina )ue #reaste llamada registro8sele##ionado.p+p pru0balo.



,n el si&'iente paso vamos a reali)ar 'n %orm'lario q'e nos permita modi%icar los re&istros de la Base de datos. •

•

•

Cree un ar#+ivo p+p gurdelo #on el nombre registro8a#tualizado.p+p es#riba un teto )ue diga, $l registro se +a a#tualizado #orre#tamenteB guarde los #ambios y #ierre este ar#+ivo Cree un nuevo do#umento p+p gurdelo #on el nombre a#tualizar8registro.p+p A+ora vamos a #rear un 1uego de registros en la pgina a#tualizar8registro.p+p, !en: insertar ob1eto de datos 1uego de registro en este mismo ar#+ivo vamos a #rear el "ormulario )ue nos permita a#tualizar los registros, !en: insertar ob1eto de datos a#tualizar registro asistente de "ormulario de a#tualiza#i/n de registro.

$n la siguiente ventana solo vamos a sele##ionar el ar#+ivo registro8a#tualizado.p+p.



9bservemos #omo )ueda el "ormulario usted puede #ambiarle la aparien#ia a su gusto

A+ora debemos #olo#ar una barra de eplora#i/n )ue nos permita eplorar los dems registros • •

•

Como colocar la barra de e*ploración Primero )ue todo #olo)ue el #ursor dentro del "ormulario en medio del re#uadro ro1o no dentro de la tabla puede ser al lado de los botones amarillos de p+p. A+ora vamos al men: insertar ob1eto de datos pagina#i/n de 1uego de registro barra de navega#i/n por 1uego de registro.



A#eptar •

Para probar el "ormulario "ormulario abrimos el wampserver wampserver lo#al+ost lo#al+ost y luego desde el eplorador eplorador la pgina web a#tualizar8restros.p+p tendremos algo pare#ido a esto.

ueno yo le modi"i)ue el dise3o le #olo)ue una imagen y un t*tulo para una me1or presenta#i/n #osa )ue tambi0n puede +a#er usted



Por 0ltimo# vamos a reali)ar el %orm'lario q'e nos permita eliminar los re&istros de n'estra base de datos. •

•

•

Crear un nuevo ar#+ivo p+p llamarlo eliminar8registros.p+p inserte un 1uego de registros, men: insertar ob1eto de datos 1uego de registros. Insertar un "ormulario, men: insertar "ormulario "ormulario.

Dentro del "ormulario vamos a #rear un #ampo de teto, menu insertar "ormulario #ampo de teto.

D01elo #omo se muestra en la imagen y le da A#eptar

COMPUTACION E INFORMATICA – VI SEMESTRE SEMEST RE •


Colo#ar un bot/n de enviar "ormulario #on las siguientes #ara#teristi#as, men: insertar "ormulario bot/n.

A+ora vamos a apli#ar la op#i/n )ue nos permita elim elimin inar ar los los regis egisttros ros sele sele## ##io iona nado dos s pero pero ante antes s debemos #rear una pagina )ue nos muestre )ue el registro se +a eliminado de "orma eitosa. Cree un nuevo ar#+ivo gurdelo #on el nombre eliminado8#on8eito.p+p #olo)ue un mensa1e )ue diga el ar#+ivo se +a eliminado de la base datos. >urdelo y #i0rrelo. &ealizar la opera#i/n )ue nos permita eliminar los registros, $stando en la pgina eliminar8registros.p+p 'amos !en: insertar ob1eto de datos eliminar registro. $n la siguiente ventana espe#i"i#amos )ue vamos a veri"i#a veri"i#arr la variabl variable e del "ormula "ormulario rio llamada id )ue anteriormente anteriormente realizamos. realizamos. Gambi0n debemos debemos elegir la pgina )ue vamos a mostrar despu0s de realizar la opera#i opera#i/n. /n. $n nuestr nuestro o #aso eliminado eliminado8#on 8#on8e 8eito. ito.p+p. p+p. obs0 obs0rv rvelo elo y d01elo d01elo #omo #omo se muest muestra ra en la siguie siguiente nte ventana. •

•

•



De1e todo #omo apare#e en esta ventana. ?a pagina para eliminar registro se llama eliminar8registros.p+p abrala desde el lo#al+ost y pru0belo ya usted sabe #/mo +a#erlo. Como siempre yo +e #ambiado el dise3o de la pgina web y le +e #olo#ado una imagen y un t*tulo.

ueno esto +a sido todo usted puede #rear una pgina web desde donde puede administrar toda la gesti/n de la base de datos por medio de v*n#ulos. $ste tutorial me tomo +a#erlo varias +oras a usted solo le tomara unos minutos agrade#er. &ealizado por, alder Pontón lóre)


walderpontonH+otmail .#om .# om 'ivo en Arau#a Colombia y +ablo espa3ol.


Taller Base de Datos Mysql Dreamweaver

Recommend Documents