Scribd Logo
Upload

Welcome to Scribd!

  • Curso Tutorial de XHTML

    Uploaded by

    William Veloz Diaz
    9 views30 pages

    Original Title

    Curso Tutorial de xHTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views30 pages

    Curso Tutorial de XHTML

    Uploaded by

    William Veloz Diaz

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 30

    Curso Tutorial de xHTML

    Conceptos Bsicos de xHTML - Parte 1


    Tutorial por Jorge Oyhenard (elQuique) de Developers Live Comenzamos en esta entrega a conocer el HTML, que es la base de toda pgina web y por tanto, debera ser conocido por todos los webmasters, diseadores y programadores web. La Web o WWW o World Wide Web, necesitaba desde sus inicios una forma de presentar informacin en los navegadores, para esto justamente nace xHTML, por las siglas de Hyper Text Markup Lenguage o en espaol Lenguaje de Marcas Hipertextuales. Este lenguaje fue diseado para la presentacin estructurada de textos en nuestros navegadores (FireFox, Internet Explorer, Opera, etc) y como tal es el Estndar de las paginas Web. Si alguna vez curioseamos en nuestro navegador en la opcin, Ver, Cdigo Fuente, quizs nos ahuyentamos con una serie de palabras raras y smbolos, la idea es desmitificar un poco esto a lo largo de este Tutorial.

    Formato del xHTML


    Como mencionamos hace un momento, el xHTML naci para dar forma a la presentacin de informacin en los navegadores, para esto fue necesario definir una serie de palabras, que llamaremos TAGs que son las que determinaran la forma, color, y tamao de la informacin presentada. Estos TAGs tendrn cada uno su formato, y nombre, de esta manera el navegador, que conoce previamente lo que debe hacer segn cada TAG, presentara la informacin. El formato bsico de un TAG es: <tag>informacin</tag> Por ejemplo: <letra negrita>Creacin de Paginas Web</letra negrita> Lo que hace este TAG es decirle a nuestro navegador que muestre el titulo Creacin de Paginas Web, pero en Negrita. Aclaremos que ese TAG no existe y fue solo para facilitar el ejemplo, ya que los TAGs estn en ingles, como la gran mayora de los lenguajes de programacin. Para hacer las cosas bien el TAG correcto para ese titulo en negrita es:

    <strong>Creacin de Paginas Web</strong > Como ven, este tipo de TAGs comienza y terminan iguales pero agregando el TAG de cierre la barra / antes de la palabra. De esta forma el navegador sabr hasta donde debe aplicar la Negrita, por si el texto es como el siguiente: Bienvenido a <strong>Taller Webmaster</strong > Como ven ah el bienvenido se presentara sin negrita, y Taller Webmaster en negrita ya que es lo que esta entre el TAG strong.

    Etiquetas Bsicas de xHTML


    Axial como una oracin o frase dentro el xHTML tiene una forma de presentacin (como vimos en la negrita), todo el documento o pagina Web, tiene tambin un formato general bsico, y es el que vemos a continuacin: <html> <head> </head> <body> </body> </html> Expliquemos estos TAGs, <html> indica que comienza un documento xHTML o pagina Web, por tanto el </html> indica que termina ah esta pagina. <head> indica que comienza la cabecera de la pagina, dentro de la cabecera van definiciones como el Titulo, y otras que veremos mas adelante. tambin termina con </head> <body> es la que indica que comienza ah el contenido, o cuerpo del documento, o sea la informacin que realmente se mostrara en el navegador. tambin termina con </body> Debe tenerse en cuenta que estos 3 TAGs estarn presente en todos los documentos Web, o Paginas Webs. Como vemos, los TAGs pueden estar anidados, esto quiere decir uno dentro de otro (para quienes no estn familiarizados con este trmino, usado por gente del mundo de la programacin). Esta animacin, es obvia ya que dentro de TODO el documento (<html>) vamos a tener dos partes internas, la Cabecera (<head>) y el Cuerpo (<body) mismo de la informacin.

    Axial mismo, y a su vez cada parte, puede contener otros elementos internos, como por ejemplo el Titulo de la pgina que debe ir dentro de la Cabecera, quedando algo as: . <head> <title>Nuestra primer pagina Web</title> </head> .. O por ejemplo los dos prrafos de texto que conforman esa pgina Web, que debe ir as: . <body> <p>Este es el primer prrafo de mi primer pagina Web</p> <p>Este es el segundo prrafo de mi primer pagina Web</p> </body> . Hemos utilizado 2 nuevos TAGs, cuya finalidad definimos a continuacin: <title> define en la cabecera (head) el titulo de nuestra pgina, ser el que se ve en la barra de titulo de nuestro navegador. <p> define un prrafo de texto dentro de nuestra pgina Web.

    Cdigo completo de nuestra primera pgina Web


    ><html> <head> <title>Nuestra primer pagina Web</title> </head> <body> <p>Este es el primer prrafo de mi primer pagina Web</p> <p>Este es el segundo prrafo de mi primer pagina Web</p> </body> </html> Click ac para ver nuestra primer pagina Web on line Como generamos el archivo en nuestro PC, bueno sencillo, para comenzar por ahora podemos usar el mismo Bloc de Notas, as: Inicio, Ejecutar Notepad

    En el escribiremos el cdigo completo de nuestra primera pagina Web, y luego haremos as: Archivo Guardar como primerpagina.html Guardndolo en alguna carpeta de nuestro disco, por ejemplo c:\CursoxHTML

    Para probarlo localmente en nuestro navegador, basta con hacer: Archivo Abrir Y buscar el archivo guardado, o sea c:\CursoxHTML\primerpagina.html

    Que se mostrara tal como indica la imagen en nuestro navegador. Hasta aqu llegamos con esta primera entrega del Curso Tutorial de xHTML, Conceptos Basicos

    Conceptos Bsicos de xHTML - Parte 2


    Tutorial por Jorge Oyhenard (elQuique) de Developers Live Luego de la Primer Parte, donde comenzamos a introducirnos en el xHTML, abordamos ahora la continuacin con etiquetas como encabezados, vnculos y tablas. En la Primer Entrega, vimos algunas etiquetas bsicas de nuestras pginas xHTML, seguiremos ahora profundizando con algunas otras.

    Etiquetas de Encabezados
    Las etiquetas para Encabezados (Headings) hoy da han recuperado importancia debido al Posicionamiento en Buscadores, si bien estuvieron desde el comienzo la mayora no encontraba diferencia entre usar un Parrafo con fuente grande o usar las H1, H2, ..etc. Hoy da, tal como comentamos en nuestros Tutoriales de Posicionamiento Web, las etiquetas Heading, se utilizan para dar mayor o menor importancia a los titulos de nuestras textos y temas expuestos en nuestras pginas web, por otra parte los buscadores como Google, Yahoo, etc, leen estas etiquetas para dar o no prioridad al texto que ellas encierran, y posicionar nuestras web de mejor manera cuando alguien busca esas palabras.

    H1, h2, h3 al h6
    Son 6 niveles donde nicamente cambia la importancia del texto que enmarcan. Ejemplo: <h1>Curso Tutorial de xHTML</h2> \\ este seria el titulo <h2>Conceptos Bsicos de xHTML</h2> \\ este seria el subtitulo

    Saltos de Lnea
    Esta Etiqueta <br /> permite establecer un Salto de Lnea (bajar de renglon), a diferencia de las anteriores no es necesario abrir y cerrar, solamente es necesario incluirla donde queremos saltar la lnea Ejemplo: <p>Este texto si bien es un parrafo, tendr un salto de lnea, justo ac<br /> y este otro texto se ve en a lnea inferior</p>

    Creando Enlaces o Vnculos


    Una de las etiquetas ms importantes de xHTML es <A>, que permite vincular (Link) una pgina con otra, o subir o bajar dentro de una misma pgina.

    Su formato bsico es: <a href.=pgina>texto</a> href permite indicar una pgina a la cual queremos ir texto es el texto que quedara subrayado y donde se debe dar click para ir a link Ejemplo: <a href=http://www.tallerwebmaster.com>Para visitar la web de Taller Webmaster, click ac</a> Todas las etiquetas que hemos mencionado, tienen otros Parmetros o Atributos que aun no hemos mencionado, pero en esta etiqueta <a> especialmente veremos algunos que son ms que importante. target permite definir si al dar click se abre ese link en la misma ventana, en una nueva o en un marco especifico. En el ejemplo anterior, si damos click, la pgina se abre en la misma ventana, en el siguiente ejemplo: <a href=http://www.tallerwebmaster.com target=_blank>Para visitar la web de Taller Webmaster, click ac</a> Solo cambia el target, indicandosele _blank, lo que hace que al dar click se abrir el link en una nueva pgina. title permite definir un titulo para ese link, ejemplo: <a href=http://www.tallerwebmaster.com target=_blank title=Visitar Taller Webmaster>Para visitar la web de Taller Webmaster, click ac</a> Este texto es el que aparece cuando posicionamos el Mouse sobre el link, sin dar click, es el llamado Tooltip.

    Insertando Imgenes
    Otra de las etiquetas ms utilizadas es la de insercin de imgenes, se llama <img>, su formato bsico es: <img src=archivo_imagen> Ejemplo: <img src=logotipo.gif>

    Esta etiqueta tambin tiene parmetros o atributos adicionales que se le pueden aplicar, algunos son: width indica el ancho de la imgen, si no lo especificamos tomara la cantidad de pixeles que tiene ese archivo. height indica el alto de la imgen, si no se especifica toma el del archivo. En ambos casos tanto para width, como para height siempre es mejor reducir, o ampliar imgenes con un programa como Photoshop, ya que obligar el tamao mediante xHTML con estos parmetros causa mayor perdida de calidad. alt es el texto alternativo, es el que aparece si la imgen no esta disponible por alguna razn, o si en nuestro navegador tenemos configurado para no mostrar imgenes. Hoy da es un atributo importante para el Posicionamiento Web, ya que los buscadores como no pueden reconocer la figura que esta en la imgen utilizan el texto de esta etiqueta alt. title al igual que en el link, es un texto que aparece cuando ubicamos el Mouse sobre la imgen. border indica el grosor del borde de la imgen vspace indica el margen vertical, entre la imgen y los textos u otras imgenes que lo rodean hspace indica el margen horizontal. align indica la alineacin de esa imgen dentro de la pgina o parrafo. Puede ser por ejemplo left (izquierda), rigth (derecha) Un ejemplo ms completo con todos los parmetros seria: <img src=logotipo.gif width=250 height=200 title=Logotipo de la empresa, presione sobre la imgen para ampliar alt=Logotipo de la Empresa align=right vspace=5 hspace=10> Este ejemplo mostrara el logotipo con un ancho de 250 y alto de 200, al pasar el Mouse sobre la imgen aparecera el texto Logotipo de la empresa, presione sobre la imgen para ampliar y si la imgen no se ve aparecera en su lugar el texto Logotipo de la Empresa, la imgen se alineara a la derecha y tendr un margen vertical de 5 pixeles y horizontal de 10 pixeles.

    Usando Tablas
    Las tablas son el mejor recurso para tabular datos, por ejemplo un Reporte de usuarios, un listado de productos, etc, cualquier lista con varias columnas. Lamentablemente las tablas

    tambin son usadas para maquetar sitios, o sea disponer imgenes, textos etc, esta no es la finalidad de las tablas y es un uso incorrecto de las misms que no debera realizarse, para esos casos es mejor utilizar CSS, como explicamos en nuestros Tutoriales de CSS. Su formato bsico es: <table> <tr> <td>datos columna 1 en la fila 1</td> <td>datos columna 2 en la fila 1</td> </tr> <tr> <td>datos columna 1 en la fila 2</td> <td>datos columna 2 en la fila 2</td> </tr> </table> Las tablas estan formadas por varias etiquetas, como ven en el ejemplo anterior. <table> comienza una tabla y </table> la finaliza. Las tablas estan formadas por una o ms filas. <tr> comienza una fila y </tr> finaliza la fila. La fila puede estar formada por una o ms columnas. <td> comienza una columna y </td> finaliza una columna. La tabla del ejemplo luce as: Datos columna 1 en la fila 1 Datos columna 1 en la fila 2 Datos columna 2 en la fila 1 Datos columna 2 en la fila 2

    Como ven los tags xHTML del ejemplo en texto ahora se presentan grficamente de izquierda a derecha, fila por fila. Al igual que los Tags anteiores, las etiquetas de las tablas pueden tener atributos o parmetros para cambiar su forma de presentacin. border indica el grosor del borde de la tabla. Ejemplo <table border=2> cellpadding indica el margen que hay entre el borde de la celda y su contenido cellspacing indica el margen que hay entre celda y celda

    Tambin se puede aplicar la etiqueta align para alinear la tabla a la derecha, as <table align=right>, o alinear al centro el contenido de una celda aplicandolo as <td align=center> En la prxima entrega seguimos profundizando en el tema.

    Web de Bienes Races o Inmobiliarias Parte 3, Base de Datos phpMyAdmin, Ingreso y Edicin de Datos
    Mini Curso Tutorial de PHP y MySQL
    Tutorial por Jorge Oyhenard (elQuique) de Developers Live Veamos ahora la forma de Insertar, Eliminar y Editar Registros en nuestras Tablas de Ciudades y Propiedades, utilizando phpMyAdmin.

    Web de Bienes Races o Inmobiliarias phpMyAdmin Ingreso y Edicin de Datos


    Mini Curso de PHP y MySQL
    Luego del Concepto Terico de la Primer Entrega y de Crear la Base de Datos y Tablas de la Segunda Entrega, veremos en esta la forma en que podemos Ingresar, Modificar y Eliminar Registros en las Tablas, utilizando el mismo phpMyAdmin, como Gestor de Base de Datos. Ms adelante realizaremos nuestro propio sistema de ingreso, modificacin y eliminacin de Ciudades y Propiedades, pero es importante conocer esta herramienta ya que es de mucha ayuda para Webmasters y Desarrolladores Web. En nuestro navegador Internet Explorer, o mejor aun FireFox, vamos a cargar la siguiente direccin: http://localhost

    Vamos a seleccionar phpMyAdmin Database Manager, para ir a Gestor de Base de Datos, donde veremos nuevamente esta imgen:

    En la parte izquierda, donde dice Base de Datos, vamos a seleccionar la que se llama inmobiliaria, y ah veremos una pantalla similar a esta:

    Ah podemos ver nuestras dos tablas, ciudades y propiedades, que son las que componen nuestra Base de Datos Inmobiliaria.

    Insertar Registros en una Tabla


    Insertar Registros, significa agregar datos a la Tabla, en este caso lo haremos en ciudades. Para esto a la izquierda vamos a dar click, en ciudades

    En la parte derecha veremos la siguiente imagen, con la Estructura de nuestra Tabla ciudades, la cual recordemos que tiene dos campos (I) id y nombre. Tambin podemos ver que nuestra Tabla, tiene cero filas o registros (II). Pero a nosotros nos interesa la opcin de Insertar Registros, que la realizamos presionando en el link Insertar (III) en la parte superior.

    Esta opcin nos permite, agregar Registros en nuestra Tabla Actual, que es ciudades, ah veremos la siguiente imagen, donde podremos escribir 1 o 2 registros. No es necesario llenar los 2, bastara con ingresar una sola ciudad. Pero en este caso escrib Madrid y Montevideo as llenamos 2 de 1 vez.

    Vean que no ingrese el numero de id, ya que como recordamos, al crear la tabla, este fue definido como un AutoNumerico, o sea que Incrementa Automtico cada vez que

    ingresamos algo. Bien, luego de ingresado vamos a presionar Continuar (I). Al presionar Continuar (I), volveremos a la lista de datos de la Tabla, o quedara listo para Insertar mas datos, esto depende del cuadro desplegable que dice Volver (I). Si damos click en la lista desplegable de Volver veremos las opciones que indica la imagen:

    Las dos opciones, son: Volver, que regresa a la lista de registros e Insertar un nuevo registro, que vuelve a esta pgina de Ingreso para seguir agregando ms registros. De esta forma podemos ingresar tantas ciudades como queremos.

    Ver la Lista de Registros o Ver la Estructura de la Tabla


    En la parte superior, veremos dos opciones que son Examinar o Estructura, como indica la imagen:

    Estructura, muestra como vimos hace unos momentos, los campos de la Tabla, los ndices y el Numero de Filas ingresadas. Examinar, mostrara la lista de registros ingresados, en nuestro caso, sern las ciudades, como muestra la imagen:

    Editando y Eliminando Registros


    En la imagen anterior vemos como se muestran las ciudades ingresadas, cada una con el nombre que le dimos, y vern tambin que fueron numeradas automticamente en el id, ya que como recordamos este es AutoNumerico. Veamos tambin que en cada Registro, hay dos iconos, un lpiz y una cruz (I). El lpiz, permite Modificar o Editar ese Registro, por ejemplo para cambiar a maysculas de la primera letra de cada ciudad ;) que a propsito la deje en minsculas para que ahora ustedes prueben Editar una por una. La cruz (I) permite Eliminar la ciudad que quieran, basta con dar un click en el icono X y luego Confirmar.

    En algunos casos, puede ser necesario Editar o Eliminar, ms de un Registro, para esto tenemos los Cuadros de Seleccin (II), donde podrn elegir cuales Registros vamos a Eliminar o Editar. Luego de seleccionados los 1, 3, 20 o 10 registros con un simple click, para Editar o Eliminarlos, vamos a los iconos de la parte derecha (III), que nos permiten justamente, Editar o Eliminar los Registros Seleccionados. Si queremos Seleccionar todos los Registros damos click en Marcar todos/as. Si queremos Deseleccionar todos los Registros damos click en Desmarcar todos

    Insertar Nuevas Propiedades


    Como estamos en la Tabla ciudades, debemos cambiarnos, para esto vamos a dar click a la derecha en propiedades, donde indica la imgen .

    Al dar click, veremos la Estructura de la Tabla propiedades, y tal como hicimos con ciudades, daremos click en Insertar.

    Web de Bienes Races o Inmobiliarias - Parte 4, Reporte de Ciudades con PHP MySQL Mini Curso Tutorial de PHP y MySQL
    Tutorial por Jorge Oyhenard (elQuique) de Developers Live En este punto, que es una de las partes ms esperadas, veremos como realizar Reportes de Ciudades mediante PHP extrayendo datos desde la Base de Datos MySQL. Hemos realizado la Introduccin a nuestro Tutorial en la Primer Entrega, hemos visto como Crear las Tablas y Bases de Datos en nuestra Segunda Entrega y vimos en la Tercer Entrega, y como realizar el Ingreso, Edicin y Eliminacin de Datos ayudndonos con phpMyAdmin. Si bien el phpMyAdmin, puede ser una forma habitual por la cual Webmasters y Programadores, ingresamos a las bases de datos a realizar modificaciones rpidas, esta no

    es una forma que pueda utilizar un simple usuario, o visitante, debido a su complejidad y lo peligroso que puede ser para nuestros datos. Es por ello que debemos desarrollar en nuestro sitio, herramientas que permitan trabajar con la informacin de manera fcil, a nuestros usuarios, para ello vamos a utilizar el lenguaje PHP, que acceder a la base de datos MySQL y mostrar la informacin en el navegador, en formato xHTML. Si no tienen conocimientos de xHTML les recomiendo leer la Primera y Segunda parte de nuestro tutorial Conceptos Bsicos de xHTML, ya que fue creado como soporte anexo a este Tutorial de Bienes Races.

    Listando las Ciudades


    Lo primero que realizaremos ser un Reporte de Ciudades, o sea mostrar una Lista de las Ciudades ingresadas en nuestra Base de Datos. Para este reporte que se mostrara en una pgina Web, vamos a utilizar lo que es hoy da la mejor forma de tabular datos, o sea una tabla. Las tablas son estructuras xHTML que muestran varias filas de datos, con informacin en columnas, por ejemplo: ID Ciudad Nombre 1 Madrid 2 Montevideo 3 Mxico 4 Buenos Aires El cdigo xHTML de esta tabla sera: <table> <tr> <td>ID Ciudad</td> <td>Nombre</td> </tr> <tr> <td>1 </td> <td>Madrid</td> </tr> <tr> <td>2 </td> <td>Montevideo</td> </tr> <tr> <td>3</td> <td>Mxico</td>

    </tr> <tr> <td>4 </td> <td>Buenos Aires</td> </tr> </table> Para repasar el trabajo con tablas xHTML ver nuestro tutorial de Conceptos Bsicos de xHTML - Parte 2 Obviamente que en esa tabla las ciudades estn puestas manualmente y si agregamos 1 o 2 en la tabla ciudades no aparecern, esto es porque hasta ahora el ejemplo sigue siendo Esttico.

    Reporte Dinmico de Ciudades


    A la tabla esttica con datos fijos, vamos a realizarla ahora Dinmica, esto quierer decir que genere automticamente una fila de la tabla por cada ciudad de la tabla ciudades. Para realizar esto, vamos a utilizar PHP, mediante el vamos a hacer lo siguiente: 1. 2. 3. 4. 5. Conectarnos al MySQL Seleccionar la base de datos Seleccionar la tabla ciudades Mostrar un rengln cada cuidad de la tabla ciudades Cerrar la base de datos

    PHP, tiene una orden para cada uno de estas 5 necesidades, estas rdenes o funciones son: mysql_connect que tiene como funcin conectar con el MySQL mysql_select_db su funcin es seleccionar una Base de Datos del Servidor MySQL mysql_query ejecuta una consulta SQL, como por ejemplo seleccionar una tabla (en este caso ciudades) mysql_fetch_array obtiene de la tabla los datos de un registro mysql_free_result libera la memoria de los registros mysql_close cierra la conexin con la base de datos Y nos esta faltando la manera de repetir esa lectura de registros para cada uno de los elementos de la tabla ciudad.

    Para esto utilizaremos while, que justamente lo que hace es repetir un bloque de ordenes mientras se cumple una determinada condicin. Todas estas funciones, su forma de trabajo y un ejemplo lo tienen en nuestro tutorial Listado de Registros PHP / MySQL, que tambin fue creado como apoyo e introduccin a este curso. Pero vamos a un ejemplo concreto del Reporte de Ciudades, si recordamos el ejemplo de la Tabla Esttica (de arriba), tenemos una filas por cada ciudad, esto es lo que debemos repetir para cada registro de la Tabla ciudades. PHP es un lenguaje, que nuestro navegador (Firefox, Internet Explorer u otro) no comprenden, recordemos que solo comprenden el lenguaje HTML, por tanto comencemos por esa parte, o sea la Estructura Bsica de un Documento HTML (pueden repasar este concepto en el tutorial Conceptos Bsicos de xHTML). <html> <head> <title>Reporte de Ciudades</title> </head> <body> </body> </html> Ese cdigo ser la base de este reporte, <html> y </html> indican el comienzo y fin de la pgina xHTML respectivamente. <head> y </head> indican el comienzo y fin de la cabecera de la pgina, donde nicamente hemos definido el titulo, mediante la declaracin <title>Reporte de Ciudades</title> que har que en nuestro navegador arriba en la barra azul, diga Reporte de Ciudades, como se ve en la imgen.

    Por ultimo dentro de <body> y </body> escribiremos todas las rdenes xHTML para mostrar el Reporte de Ciudades, mediante una tabla xHTML, el cdigo quedara as: <html> <head> <title>Reporte de Ciudades</title> </head> <body> <h1>Reporte de Ciudades</h1> <table> <tr>

    <td>ID Ciudad</td> <td>Nombre</td> </tr> <tr> <td>1 </td> <td>Madrid</td> </tr> </table> </body> </html> Observen que tambin he agregado un titulo que ser visible en el navegador utilizando las etiquetas de encabezado principal <h1>Reporte de Ciudades</h1> Como ven, luego de titulo ID Ciudad y Nombre, se muestra solamente una ciudad que es Madrid, esto es porque hemos creado solo una fila, aparte del titulo, la fila esa esta en rojo para identificarla. Esa fila es la que vamos a repetir tantas veces como ciudades tengmos en la Tabla ciudades de nuestra Base de Datos, sean 2, 50 o 20.

    Agregando el Cdigo PHP


    Hasta ahora nuestro cdigo es solo xHTML, agregaremos el PHP que trabajara con la Base de Datos, vamos al cdigo completo ya con el PHP (el PHP agregado se ve en rojo), que seria as: <html> <head> <title>Reporte de Ciudades</title> </head> <body> <h1>Reporte de Ciudades</h1> <table> <tr> <td>ID Ciudad</td> <td>Nombre</td> </tr> <?php $conexion = mysql_connect('localhost', 'usuariobase', 'topsecret'); mysql_select_db('inmobiliaria'); $tabla = mysql_query('SELECT * FROM ciudades'); while ($registro = mysql_fetch_array($tabla)) { ?>

    <tr> <td>1</td> <td>Madrid</td> </tr> <?php } mysql_free_result($tabla); mysql_close($conexion); ?> </table> </body> </html> Este cdigo lo pegaremos en un archivo llamado listadociudades.php que en mi caso lo guarde en c:\AppServ\www\CursoWebBienesRaices, como ven el cdigo PHP lo hemos metido dentro del xHTML (esta en rojo para que lo identifiquen), para saber donde comienza y termina cada trozo de cdigo PHP, siempre debemos utilizar <?php y ?> para comenzar y finalizar respectivamente. Puede haber tantos trozos de cdigo como se necesiten. Cuando un Usuario llama la pgina listadocuidades.php desde su Navegador, el navegador le pide la pgina al Servidor, el servidor ejecuta las ordenes y funciones PHP, las convierte en xHTML y las enva al navegador del usuario, y este navegador las muestra. En nuestro navegador JAMAS veremos cdigo PHP, ya que es un lenguaje de Servidor.

    Analicemos nuestro cdigo PHP lnea por lnea:


    $conexion = mysql_connect(localhost, usuariobase, topsecret); Se conecta con el servidor MySQL, para esto le indicamos el Nombre del Servidor, localhost significa el Servidor local o sea nuestro PC (o si estamos e Internet, nuestro hosting), usuariobase es el nombre de usuario de mysql (recuerden que al instalar AppServ le dejamos root), y topsecret es la contrasea tambin del MySQL, en ambos casos usuario y contrasea son los mismos que usaron al Instalar AppServ para la opcin MySQL y son los mismos que usan para entrar al phpMyAdmin. mysql_select_db(inmobiliaria); Luego de Conectarse con el Servidor, tenemos que elegir cual de todas las Bases de Datos queremos usar, en este caso usaremos inmobiliaria (capaz es la nica que tienen) que es la que habamos creado en la Segunda Parte de este tutorial. $tabla = mysql_query(SELECT * FROM ciudades); Luego de elegir la Base de Datos, tenemos que Seleccionar la Tabla y Registros con que vamos a trabajar. La opcin SELECT * FROM ciudades, seleccionar todos los Campos

    (por eso asterisco *) de la Tabla ciudades. Con esto entonces vamos a poder trabajar con las 10, 20, 3, o 100 ciudades ingresadas. Pero a estas ciudades, las vamos a ir tomando una por una, por eso tenemos la siguiente orden: while ($registro = mysql_fetch_array($tabla)) Hasta cuando lo repite ?? hasta que se deje de cumplir la condicin, cual es la condicin ?? pues en palabras la condicion es, obtener un registro nuevo, en cdigo se hace mediante: $registro = mysql_fetch_array($tabla) Cuando llega al final de la Tabla, no se cumplir mas la condicin del while y dejara de repetirse esa porcin de cdigo, por tanto si hay 3 ciudades obtiene 3 y muestra tres veces el bloque, y si hay 10 lo repetir 10 veces, Cual bloque de ordenes repite pues este, que es el que esta entre llaves {}: <tr> <td>1 </td> <td>Madrid</td> </tr> Vean que ese codigo es hasta ahora solo xHTML, no PHP porque vimos que antes del <tr> cerramos la seccin de PHP con ?> y la comenzamos luego del </tr> con <?php. Por ultimo: mysql_free_result($tabla); Libera de la memoria los Registros Seleccionados de la Tabla (esto es para no recargar el servidor ya que como hemos dicho puede estar recordando 2, 3, 50 o 100 ciudades) mysql_close($conexion); Cierra la base de datos, dejando libre esa conexin. Para visualizarlo vamos a escribir esto en nuestro navegador: http://localhost/CursoWebBienesRaices/listadociudades.php y veremos, como indica la imgen:

    Queda poco claro sin bordes en la tabla, por tanto en la lnea: <table> Vamos a escribir as: <table border=1> Grabamos, hacemos F5 (Refreh) en nuestro navegador y va a lucir como la imgen:

    No queda arto bonito pero al menos vemos cada fila, que corresponde a cada ciudad. En este punto, otra cosa que llama la atencin es que yo tengo 4 ciudades y ah se repite 4 veces Madrid, porque sucede esto ?

    Si miramos el cdigo del while,

    ...
    <?php $conexion = mysql_connect('localhost', 'usuariobase', 'topsecret'); mysql_select_db('inmobiliaria'); $tabla = mysql_query('SELECT * FROM ciudades'); while ($registro = mysql_fetch_array($tabla)) { ?> <tr> <td>1</td> <td>Madrid</td> </tr> <?php } mysql_free_result($tabla); mysql_close($conexion); ?>

    ...
    Vemos que repite lo que hay en rojo, y justamente ah solo dice 1 y Madrid. O sea que si bien el numero de filas (ahora el mio son 4) corresponde a las 4 ciudades ingresadas, no esta mostrando los cuatro ID y nombre de cada ciudad, esto pasa porque aun esa parte es Esttica y no Dinmica. Por eso, vamos a modificarla as: Donde dice 1 vamos a sustituir por <?php echo $registro[id]; ?> y donde dice Madrid, vamos a sustituirlo por <?php echo $registro[nombre]; ?>, el cdigo de nuestra pagina en ese punto quedara as:

    ...
    <?php $conexion = mysql_connect('localhost', 'usuariobase', 'topsecret'); mysql_select_db('inmobiliaria'); $tabla = mysql_query('SELECT * FROM ciudades'); while ($registro = mysql_fetch_array($tabla)) { ?>

    <tr> <td><?php echo $registro[id]; ?></td> <td><?php echo $registro[nombre]; ?></td> </tr> <?php } mysql_free_result($tabla); mysql_close($conexion); ?>

    ...
    En rojo esta la modificacion, y ahora si vamos las ciudades como corresponde, tal como se muestra en la imgen:

    Analicemos esta ultima parte del cdigo. Cuando hacemos el while en $registro queda guardada la informacin de 1 registro de la tabla (por ejemplo el primero Madrid), cada registro de ciudades tiene 2 campos id y nombre, que guardan el numero de identificacin de la ciudad y su nombre, respectivamente. Es por eso que luego usamos as: $registro[id] para obtener de ese registro solo el numero de ciudad o $registro[nombre] para obtener solo el nombre de esa ciudad. Completamos la orden con un <?php y ?> para indicar que ah no es xHTML si no cdigo PHP y por ltimo, la orden echo muestra en una pgina un valor, en el ejemplo vimos que primero muestra el id as: <?php echo $registro['id']; ?>

    Y el nombre as: <?php echo $registro['nombre']; ?> Ambos valores estn dentro de las correspondientes <td> </td> para que salgan en cada columna de la tabla, y esto se repite por cada ciudad, logrando de esa forma nuestro Reporte de Ciudades. En la prxima entrega veremos como hacer el Reporte de Propiedades y Enlazar las dos Tablas al mismo, de manera que se muestre la ciudad a la cual corresponde.

    En Insertar, aparecer la Ficha de Edicin, donde Ingresaremos la Informacin, como por ejemplo la de la imagen:

    Ac debemos tener en cuenta, que en idciudad, va el numero identificatorio de la ciudad, en mi caso he puesto el 2, por tanto corresponde a Montevideo (ver imgen anterior). Esto puede sonar ilgico pero en la prxima entrega cuando creemos nuestro propio formulario de ingreso veremos como enlaza. En tiponimueble veremos un 3 que significa que la casa esta tanto para venta como para renta (recuerden que 1 es venta, y 2 es renta). Esto lo convenimos as para facilitar el sistema. Por ultimo la fecha debe ser escrita en ese formato ao-mes-dia, cuatro dgitos del ao, guin, 2 dgitos del mes, guin 2 dgitos del da, o damos click en el incono calendario y seleccionamos con otro click, la fecha correspondiente. Terminamos el ingreso con el botn Continuar, recordando que podemos volver a Ingresar otras propiedades cuando queramos, o Eliminar, Editar como explicamos en la seccin de ciudades anteriormente. En la prxima entrega veremos como visualizar esta informacin ingresada por medio de PHP accediendo al MySQL.

    You might also like