Intphpmysql

Generated by Foxit PDF Creator Foxit Software
http://www.foxitsoftware.com For evaluation only.
Integracin HTML, MySQL y PHP.
Html:
Estructura bsica de un documento HTML: Cabecera y
cuerpo del documento
Tres son las tags que describen la estructura general de un documento y dan una
informacin sencilla sobre l. Estas tags no afectan a la apariencia del documento y solo
interpretan y filtran los archivos HTML.
1.
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
2.
<HEAD>: Especifica el prlogo del resto del archivo. Son pocas las tags que van
dentro de ella, destacando la del titulo <TITLE> que ser utilizado por los
marcadores del navegador e identificar el contenido de la pgina. Solo puede haber
un ttulo por documento, preferiblemente corto aunque significativo, y no caben otras
tags dentro de l. En head no hay que colocar nada del texto del documento.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Primeros pasos
<H1> <P> <BR>
Tres son la tags que describen la estructura general de un documento y dan una
informacin sencilla sobre l. Estas tags no afectan a la apariencia del documento y solo
interpretan y filtran los archivos HTML.
1.
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden
definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las
tags <H1> Titular </H1>. Se definen mediante las tags<H1>.....</H1> hasta<H6>.....</H6>
2.
<P>: Prrafos. En principio, sin entrar en detalles de alineacin u otras
caractersticas, digamos que se definen por las tags <P>.....<P>. Esta tag, en un
principio, se dise para saltar de prrafo por lo que puede ir sola "<P>" al final de
un texto indicando que a continuacin se quiere una lnea en blanco aunque le
recomendamos que se acostumbre a utilizarla abrindola y cerrndola.

3.
<BR>: Saltos de lnea. Esta tag sirve para realizar un salto de linea, puede
poner tantas como desee y realizar un salto de lnea por cada una de ellas.
4.
: Comentarios. Son directivas que nunca se mostrarn a travs del
navegador y que le servirn para recordatorios en futuras revisiones del documento.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Mi primera pgina</H1>

<P>Hola mundo, esta es un pgina con titular,
que tiene tambin un prrafo y unos cuantos
saltos de lnea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Tablas
<TABLE> <TR> <TD>
Las tablas surgieron con la versin HTML 3.0. Las tablas nos permiten representar y
ordenar cualquier elemento de nuestra presentacin en diferentes filas y columnas de modo
que podamos resumir grandes cantidades de informacin de una manera que puede
representarse rpida y fcilmente.
El contenido de una tabla lo debemos desarrollar entre las tags<table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior
izquierda. Las columnas se calcularn automticamente segn las celdas que hay en cada
fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las
tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas
individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que
sirven
como
encabezado de tabla
y suelen
visualizarse
en
negrita.
Las
tags <td>.....</td>indican que se trata de celdas comunes.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Formularios <FORM>
La Web se ha convertido en una poderosa arma para las empresas que se dedican a
realizar encuestas y, los formularios han sido una de las herramientas que han ayudado a
este auge.
Los formularios nos van a permitir, desde dentro de una presentacin web, solicitar
informacin al visitante. Estos formularios estarn compuestos por tantos campos como
informaciones queramos obtener. Una vez introducidos los valores en estos campos sern
enviados a una URL donde se procesar toda esta informacin.
Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas tags que lo
especifiquen. Ladeclaracin de formulario queda recogida por las tags<form>.....</form> y
dentro de ellas se recogern todas las variables de entrada.
A la tag de apertura <form> le acompaarn estos atributos:

1.
action="" Entre comillas se indica el programa que va a tratar las variables
enviadas con el formulario, un guin CGI o la URL mailto.

2.
Method="" Indica el mtodo de transferencia de las variables. Post, si se enva a

travs del STDIO. Get, si se enva a travs de la URL.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
Campos de entrada
<INPUT>
La tag <input> define la introduccin de variables. Junto a esta tag encontraremos los
siguientes atributos:
1.
type="" Indicar el tipo de variable a introducir.

o text Indica que el campo a introducir ser un texto. Sus atributos:
maxlenght=""Seguido de un valor que limitar el nmero mximo
de carcteres a introducir en ese campo.
size="" Seguido de un valor que limitar el numero de carcteres a

mostrar en pantalla.
value="" Indica que no hay valor inicial del campo.

Password Indica que el campo a introducir ser una palabra de paso.
Mostrar asteriscos en lugar de letras escritas. Sus atributos sern los
mismos que paratext.
Checkbox El campo se elegir marcando de entre varias opciones una casilla
cuadrada.
value="" Entre comillas se indicar el valor de la casilla.
checked La casilla aparecer marcada por defecto.
Radio El campo se elegir marcando de entre varias opciones una casilla
circular.
value="" Entre comillas se indicar el valor de la casilla.

Image El campo contendr el valor en coordenadas del punto de la imagen
que haya pinchado. Atributo obligatorio:

src="" Entre comillas escribiremos el nombre del archivo de
imagen.
o hidden El visitante no puede modificar su valor ya que no est visible. Se
manda siempre junto al atributo value= seguido de su valor entre comillas.
2. Name="" Indicar el nombre que se asigna a un determinado campo.
<HTML>
<HEAD>
</HEAD>
<BODY>
Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche
<BR><BR>
</FORM>
</BODY>
</HTML>
Campos de seleccin
<SELECT>
Las tags<select>.....</select> encierran los valores que podremos elegir a partir de
una lista. Los atributos que acompaan a la tag de apertura son:
1.
name="" Indicar el nombre del campo de seleccin.

2. Size="" Indicar el nmero de opciones visibles. Si le asignamos 1, la seleccin se
presentar como un men desplegable. Si le asignamos un valor mayor se
presentar como una lista con barra de desplazamiento.
3. multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarn mediante la tag<option> que puede

acompaarse del atributo selected para indicar cual es la opcin que aparecer por defecto.
Si no lo especificamos, siempre ser la primera de la lista.
<HTML>
<HEAD>
</HEAD>
<BODY>
<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>

<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
</FORM>
</BODY>
</HTML>

Pasos previos para utilizar los algoritmos que se muestran en

las siguientes pginas.
En el menu Inicio se busca lo siguiente, Start WampServer.
Una vez seleccionado, se presenta la siguiente pantalla:
Pasos para utilizar los algoritmos que se muestran en las

siguientes pginas.
Primer paso:
Crear una base de datos.
Para nuestro ejemplo Ejemplo: poemav1

El nombre: poemav1
Se ingresa en el campo: crear nueva base de datos.
Luego se da un click en el botn: Crear
.
Segundo Paso:
Se debe importar la base de datos, para ello:
Debe hacer click en el boton Importar, que se muestra a
continuacin.
Una vez hecho clicik sobre el boron Importar se despliega la siguiente

panatalla.
Solo debe seleccionar el archivo poema.sql.
y.

Luego hacer click sobre el botn continuar que se encuentra en el

extremo inferior derecho de la ventana en cuestin.
Hecho esto esta todo preparado para ejecutar los cdigos que se
muestran a continuacin.

Mtodo para insertar.

Insertar datos en la tabla Libro, de la base de datos.
Para realizar la integracin entre el manejador de bases de datos mySQL y php html,
se requiere utilizar un editor de texto, y guardar el cdigo que se muestra en la fig. 1.
Fig. 1: Formulario captura de datos a travs de una interfaz grfica.
Ejecucin del cdigo escrito en el archivo de la fig.1.

Para la ejecucin del archivo, de la fig.1 se debe ejecutar el navegador de su preferencia,
tipeando en el Browser lo siguiente:
http://localhost:85/bd/bd/add/FORMADD12.HTML
Luego al hacer click, se debe poder visualizar la fig. 2.-

Fig. 2: Ejecucin del archivo de la fig 1. en el navegador de su preferencia.
Una vez, ejecutado, y llenado los valores de los campos solicitados de debe hacer click,
sobre el boton Enviar. Este evento arroja como resultado la figura 3.-
Fig. 3. Mensaje para verificar insercin de datos exitoso.

Existe un archivo que, aparece en la fig. 1 y hace referencia a: insert12.php, el cual
permite ingresar datos en la tabla libro, el cdigo se muestra a continuacin. Fig. 4.

Fig. 4 . Algoritmo para insertar datos en una tabla de la bases de datos.
Visualizacin de resultados a travs del navegador y su correspondiente valor agregado

en la tablas LIBRO. Ver fig. 5.

Figura 5.- Visualizacin de la insercin de datos en la tabla libro.

Insertar datos en la tabla Escritor:

A travs de la interfaz grfica de la fig. 6, se puede insertar datos en la tabla escritor. La
interfaz se construye con el cdigo de la figura 6.
Fig. 6: Formulario captura de datos a travs de una interfaz grfica.
Ejecucin del cdigo escrito en el archivo de la fig.6.

Para la ejecucin del archivo, de la fig.6 se debe ejecutar el navegador de su preferencia,
tipeando en el Browser lo siguiente:
http://localhost:85/add/FORMADDW.HTML
Luego al hacer click, se debe poder visualizar la fig. 7.-
Fig. 7: Ejecucin del archivo de la fig 6. en el navegador de su preferencia.

Una vez, ejecutado, y llenado los valores de los campos solicitados de debe hacer click,
sobre el boton Insertar. Este evento arroja como resultado la figura 8.-
Fig. 8. Mensaje para verificar insercin de datos exitoso.
Existe un archivo que, aparece en la fig. 6 y hace referencia a: insertw.php, el cual

permite ingresar datos en la tabla escritor, el cdigo se muestra a continuacin. Fig. 9.
Fig. 9 . Algoritmo para insertar datos en la tabla escritor de la bases de datos poema.
Visualizacin de resultados a travs del navegador y su correspondiente valor agregado

en la tabla escritor. Ver fig. 10.

Figura 10.- Visualizacin de la insercin de datos en la tabla libro.
Insertar datos en la tabla poema.

Mtodo 1:
Los datos se ingresan por teclado, en forma de transcripcin.
Los formularios involucrados en la insercin de datos en la tabla Poema, se encuentan
los archivos de la fig. 11 y la la fig.12.
Fig. 11.: Formulario captura de datos para la tabla poema de la base de datos poema, a travs de una
interfaz grfica.

Fig. 12 . Algoritmo para insertar datos en la tabla poema de la bases de datos poema.
Insertar datos en la tabla poema.

Mtodo 2:
Los datos se ingresan por teclado, en forma de seleccin de un cuadro
desplegable (conexin a una base de datos).
Fig. 13.- Interfaz en forma de seleccin de un cuadro desplegable.

Para la construccin de la interfaz grfica de la fig,1 13, se debe hacer una conexin con
la base de datos poemav1, para extraer los datos correspondientes a Id. Escritor, de la
tabla escritor. Ver Fig. 14.
Fig.- 14 Algoritmo para la interfaz grfica para insertar datos en la tabla poema de la bases de datos
poema.
Para completar el proceso de insercin se realiza el segundo formulario Fig. 15, el cual
realiza la insercin de datos correspondientes.

Fig. 15. Algoritmo para insertar datos en la tabla poema de la bases de datos poema.

Insertar datos en la tabla poema_libro.

Hay que tener en cuenta la definicin del modelo relacional, ya que la tabla en estudio
depende de dos tablas, por tanto se levanta la data de las tablas involucradas.
Fig.16 extracto del codigo.

Codigo del archivo: formaddpoelib.php.
<html>
<body>
<form action="insertpoelib.php" method="post">
Id Poema <select name="id_poema">
<option value="" >Seleccionar</option>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("poemav1", $con);
$sql="select id_poema, titulo from poema";
$result=mysql_query($sql);
while ($fila=mysql_fetch_row($result))
{
echo "<option value='".$fila['0']."'>".$fila['1']."</option>";

}
mysql_close($con);
?>
</select><BR>
Id libro <select name="id_libro">

<option value="" >Seleccionar</option>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("poemav1", $con);
$sql="select id_libro, titulo from libro";
$result=mysql_query($sql);
while ($fila=mysql_fetch_row($result))
{
echo "<option value='".$fila['0']."'>".$fila['1']."</option>";
}
mysql_close($con);
?>
</select><BR>
<input type="submit" value="Agregar" />
</form>
</body>
</html>
Una vez tipeado y ejecutado el cdigo se procede a ejecutar el cdigo en el browser de

su navegador preferido. http://localhost:85/bd/bd/add/formaddpoelib.php, como se
muestra en la fig.-

Fig.-17 Corrida del programa en localhost.
El codigo necesario para obtener la insercin de datos en la base de datos poemav1., se

muestra a continuacin en la fig. -

Fig.- 18. Ejecucin de insertar o agregar un dato nuevo.
Fig-. 19 Ejemplos varios de la ejecucin.

Eliminar.
Eliminar datos en la tabla escritor de la base de datos poemav1.
Fig.- 20 Interfaz grafica.

Fig.- 21 Algoritmo para ejecutar la eliminacin de un registro de la tabla escritor.

Eliminar .
Eliminar Libro.
Fig. 22 Interfaz grfica para eliminar un libro.

El cdigo que permite completar la interfaz grfica para realizar el proceso de
eliminacin se muestra en la fig siguiente. El archvo lleva por nombre: deleteL1.php.

Fig 23. Algoritmo para ejecutar la eliminacin de unregistro de la tabla libro.

Actualizar.
Actualiza las tablas de la base de datos. Para ello, se procede a crear los archivos, de
forma similar a los algoritmo de insertar..
Fig 24 . Algoritmo para la interfaz grfica de actualizacin.
Fig 25.- Algoritmo para ejecutar la actualizacion.

La interfaz grfica que se muestra a continuacin proviene del archivo de la fig,.26
Fig 26.- Interfaz grfica para actualizar un registro de la tabla escritor.

Intphpmysql

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Intphpmysql

Cargado por

Copyright:

Formatos disponibles

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Integracin HTML, MySQL y PHP.

<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

Generated by Foxit PDF Creator Foxit Software

Generated by Foxit PDF Creator Foxit Software

A la tag de apertura <form> le acompaarn estos atributos:

Generated by Foxit PDF Creator Foxit Software

Method="" Indica el mtodo de transferencia de las variables. Post, si se enva a

type="" Indicar el tipo de variable a introducir.

size="" Seguido de un valor que limitar el numero de carcteres a

value="" Indica que no hay valor inicial del campo.

Generated by Foxit PDF Creator Foxit Software

Image El campo contendr el valor en coordenadas del punto de la imagen

que haya pinchado. Atributo obligatorio:

name="" Indicar el nombre del campo de seleccin.

Las diferentes opciones de la lista se indicarn mediante la tag<option> que puede

Generated by Foxit PDF Creator Foxit Software

Generated by Foxit PDF Creator Foxit Software

Pasos previos para utilizar los algoritmos que se muestran en

Una vez seleccionado, se presenta la siguiente pantalla:

Pasos para utilizar los algoritmos que se muestran en las

Generated by Foxit PDF Creator Foxit Software

Una vez hecho clicik sobre el boron Importar se despliega la siguiente

Generated by Foxit PDF Creator Foxit Software

Luego hacer click sobre el botn continuar que se encuentra en el

Generated by Foxit PDF Creator Foxit Software

Mtodo para insertar.

Fig. 1: Formulario captura de datos a travs de una interfaz grfica.

Ejecucin del cdigo escrito en el archivo de la fig.1.

Generated by Foxit PDF Creator Foxit Software

Fig. 2: Ejecucin del archivo de la fig 1. en el navegador de su preferencia.

Fig. 3. Mensaje para verificar insercin de datos exitoso.

Generated by Foxit PDF Creator Foxit Software

Fig. 4 . Algoritmo para insertar datos en una tabla de la bases de datos.

Visualizacin de resultados a travs del navegador y su correspondiente valor agregado

Generated by Foxit PDF Creator Foxit Software

Figura 5.- Visualizacin de la insercin de datos en la tabla libro.

Generated by Foxit PDF Creator Foxit Software

Insertar datos en la tabla Escritor:

Fig. 6: Formulario captura de datos a travs de una interfaz grfica.

Ejecucin del cdigo escrito en el archivo de la fig.6.

Fig. 7: Ejecucin del archivo de la fig 6. en el navegador de su preferencia.

Generated by Foxit PDF Creator Foxit Software

Fig. 8. Mensaje para verificar insercin de datos exitoso.

Existe un archivo que, aparece en la fig. 6 y hace referencia a: insertw.php, el cual

Visualizacin de resultados a travs del navegador y su correspondiente valor agregado

Generated by Foxit PDF Creator Foxit Software

Figura 10.- Visualizacin de la insercin de datos en la tabla libro.

Insertar datos en la tabla poema.

Generated by Foxit PDF Creator Foxit Software

Insertar datos en la tabla poema.

Fig. 13.- Interfaz en forma de seleccin de un cuadro desplegable.

Generated by Foxit PDF Creator Foxit Software

Generated by Foxit PDF Creator Foxit Software

Generated by Foxit PDF Creator Foxit Software

Insertar datos en la tabla poema_libro.

Fig.16 extracto del codigo.

Generated by Foxit PDF Creator Foxit Software

Id libro <select name="id_libro">

Una vez tipeado y ejecutado el cdigo se procede a ejecutar el cdigo en el browser de

Generated by Foxit PDF Creator Foxit Software

Fig.-17 Corrida del programa en localhost.