Curso php-my sql-clase-1
0 recomendaciones485 vistas
Este documento presenta una introducción al desarrollo de aplicaciones web dinámicas con PHP y MySQL. Explica brevemente cómo funciona la web, incluyendo el modelo cliente-servidor y las tecnologías involucradas. Luego, introduce conceptos básicos de HTML como estructura, etiquetas, enlaces e imágenes. También cubre tablas, formularios y sus diferentes campos de entrada.
Curso php-my sql-clase-1
- 1. “Aplicaciones Web dinámicas con PHP y MySql” Sergio Gabriel Rodríguez http://www.3trex.com.ar Introducción • Cronograma del curso • Desarrollo de clases • Prácticos • Exámen final
- 2. ¿Cómo funciona la Web? • Físicamente, la Web está compuesta: - Computadora personal - Un Navegador Web (Software de navegación) - Computadoras llamadas servidores que albergan información. ¿Cómo funciona la Web? • Arquitectura Cliente-Servidor • El Cliente (navegador) solicita la url. • Se establece una conexión con el Servidor. • El Servidor envía los datos solicitados al Cliente. • Se pierde la conexión con el Cliente. • El Cliente (navegador) interpreta y muestra esos datos.
- 3. ¿Cómo funciona la Web? Software que intervienen en el proceso • Máquina Cliente Navegador web (Internet explorer, Firerox, Safari, etc.) • Máquina Servidor Servidor web (Apache, IIS, etc.) Lenguaje HTML • HTML es el metalenguaje utilizado como base para crear páginas web. • Está basado en etiquetas (tags) • Es el lenguaje interpretado por los navegadores para mostrar las páginas web. • Escrito en texto plano con extensión htm/html. • Se creó sin dar respuesta a todos los posibles usos que se le iba a dar. • El HTML 4.01 es el último estándar
- 4. Estructura HTML • Los documentos HTML se dividen en tres partes bien diferenciadas: 1. La Cabecera de tipo de documento La usa el software para saber la versión de HTML que se está usando (no visible). 2. La Cabecera del documento (document HEADer) Usada para dar información sobre el documento (no visible). 3. El Cuerpo del documento (document BODY) Es la parte principal del documento, la parte que el usuario ve. Estructura HTML • Estas tres partes pueden verse continuación. <HTML> <HEAD> </HEAD> <BODY> Hola Mundo! </BODY> </HTML>
- 5. Estructura HTML • El título del documento se almacena en la cabecera (HEAD) <HEAD> <TITLE>Curso de PHP</TITLE> <HEAD> • Mostrar imágenes en el documento <IMG SRC=“mi_imagen.jpg”> • Enlazar a otros documentos HTML <A HREF=“mi_pagina.html”>Ir a mi página</A> Ejercicio 1 • Generar dos documentos HTML, pagina1.html y pagina2.html. • pagina1.html debe contener un texto y un enlace (link) a pagina2.html • pagina2.html debe contener un texto y una imagen.
- 6. HTML: Tablas • Las tablas son componentes dedicados a mejorar la visualización de datos tabulado. • Los tags que se utilizan para delimitar una tabla son <TABLE>...</TABLE>. • Las tablas se especificarán siempre por filas; es decir, primero se escribirá la fila 1, despues la fila 2, etc • Cada fila se especifica con la directiva <TR>...</TR> y, dentro de ella, cada celda se especifica con la directiva <TD>...</TD> HTML: Tablas • Ej.: <TABLE> <TR><TD>Fila 1 Columna 1</TD> <TD> Fila 1 Columna 2 </TD></TR> <TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR> </TABLE> • El navegador mostrará: Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2
- 7. HTML: Tablas • Tablas Multicolumnas: En ocasiones es necesario que una celda se extienda sobre varias columnas, para ello utilizaremos el atributo colspan de la directiva <TD>: <TABLE BORDER=“1”> <TR><TD COLSPAN=“2”>Fila 1 ocupa 2 columnas</TD></TR> <TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR> </TABLE> • El navegador mostrará: HTML: Tablas • Tablas Multifilas: Si deseamos que una celda ocupe varias filas lo especificaremos con el atributo rowspan de la directiva <TD>. <TABLE BORDER="1"> <TR><TD ROWSPAN=2>Celda 1 Ocupa 2 Filas</TD><TD>Fila 1 Columna 2</TD></TR> <TR><TD>Fila 2 Columna 2</TD></TR> </TABLE> • El navegador mostrará:
- 8. HTML: Atributos de Tablas • Las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table> align Alinea horizontalmente la tabla con respecto a su entorno. bgcolor Da color de fondo a la tabla. border Define el número de pixels del borde principal. cellpadding Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma. cellspacing Define el espacio entre los bordes (en pixels). height Define la altura de la tabla en pixels o porcentaje. width Define la anchura de la tabla en pixels o porcentaje. HTML: Atributos de Tablas • Ej.: <TABLE border="1" width="100" height="50" bgcolor="#CCCCCC" cellpadding="10" cellspacing="6"> <TR><TD>Fila 1 Columna 1</TD> <TD> Fila 1 Columna 2 </TD></TR> <TR><TD>Fila 2 Columna 1</TD> <TD> Fila 2 Columna 2 </TD></TR> </TABLE> • El navegador mostrará:
- 9. Ejercicio 2 • Generar un documento HTML, tabla.html con la siguiente estructura: HTML: Formularios • Hasta el momento se han presentado características de HTML que permiten visualizar en el browser documentos y navegar por ellos, aunque el usuario no tenía posibilidad de interactuar con ellos. El siguiente paso consiste en definir dicha posibilidad: Los formularios. • El principio del formulario es bien sencillo: el usuario rellena una serie de campos y los envía a un programa de tratamiento. • Los campos pueden ser de diversa naturaleza, como campos de edición, menús desplegables, listas de opciones, texto, etc.
- 10. HTML: Formularios • Para iniciar un formulario en HTML se utilizará el tag <FORM> ... </FORM>. Dentro de ella especificaremos todos los campos que intervienen en el formulario. • Con <FORM > especificaremos el tratamiento que se realizará con los campos introducidos por el usuario. Para ello existen dos atributos: • El atributo METHOD: se especifica la forma de pasar los valores de los campos al programa de tratamiento. Admite los valores GET Y POST • El atributo ACTION: Indicara el nombre del programa de tratamiento. • Ej. <FORM METHOD= “POST” ACTION=“respuesta.php">... </FORM> HTML: Formularios • INPUT: Es una de las directivas que permite especificar algunas clases de campos de entrada, dependiendo de los atributos asociados: • El atributo NAME: Indicaremos el nombre asociado al campo de entrada, debe ser único dentro de un mismo formulario. •El atributo TYPE: Indicaremos el tipo o clase de campo. Pueden campos de texto, botones, checkbox, radio, etc. Ej.: <FORM> <INPUT NAME=nombre SIZE=30> </FORM>
- 11. HTML: Formularios • Atributo TYPE, los valores que puede tomar son: • TEXT: <INPUT TYPE=“TEXT” NAME=nombre SIZE=30> • SUBMIT: <INPUT TYPE=“SUBMIT” VALUE=nombre SIZE=30> • CHECKBOX: <INPUT TYPE=checkbox NAME="so" VALUE="msdos">MS-OS <INPUT TYPE=checkbox NAME="so" VALUE="os2">OS/2 <INPUT TYPE=checkbox NAME="so" VALUE="unix">UNIX HTML: Formularios •RADIO: <input type=radio name="sexo" value="hombre">Hombre <input type=radio name="sexo" value="mujer">Mujer • PASSWORD: <input type=password name="passwd"> • HIDDEN: <input type=“hidden” name=“oculto“ value=“1”> No se visualiza
- 12. HTML: Formularios • Directiva SELECT: Se utiliza para definir listas de opciones dentro de un formulario. El atributo NAME, comentado en la directiva INPUT, se utiliza de la misma forma. Para especificar cada elemento de la lista u opción se utiliza la directiva <OPTION> indicando a continuación el texto de la opción. •Ej.: <SELECT name="pueblo"> <OPTION>Berrueces</OPTION> <OPTION SELECTED>Ceinos de Campos</OPTION> <OPTION>Laguna de Duero</OPTION> <OPTION>Villalón</OPTION> </SELECT> Se visualizará: HTML: Formularios • Directiva TEXTAREA: Permite crear una zona de texto especificando el número de filas (atributo ROWS) y de columnas (atributo COLS) de la ventana. Si se desea especificar un texto, se hará entre la directiva de apertura y la de cierre. Ejemplo: <TEXTAREA NAME="opinion" ROWS=5 COLS=60> Introduzca la opinión de esta introducción a HTML: </TEXTAREA> Se visualizará:
- 13. Ejercicio 3 • Usando el documento HTML del Ejercicio 2, generar un documento HTML, llamado formulario.html con la siguiente estructura: FIN • ¿Preguntas?