Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Web de Bienes Raíces o Inmobiliarias - Parte 4, Reporte de Ciudades con PHP MySQL

Mini Curso Tutorial de PHP y MySQL

 

Tutorial por Jorge Oyhenard (elQuique)

En este punto, que es una de las partes más esperadas, veremos como realizar Reportes de Ciudades mediante PHP extrayendo datos desde la Base de Datos MySQL.

Hemos realizado la Introducción 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, Edición y Eliminación de Datos ayudándonos 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 rápidas, 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 información de manera fácil, a nuestros usuarios, para ello vamos a utilizar el lenguaje PHP, que accederá a la base de datos MySQL y mostrará la información en el navegador, en formato xHTML.

Si no tienen conocimientos de xHTML les recomiendo leer la Primera y Segunda parte de nuestro tutorial Conceptos Básicos de xHTML, ya que fue creado como soporte anexo a este Tutorial de Bienes Raíces.

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 página Web, vamos a utilizar lo que es hoy día la mejor forma de tabular datos, o sea una tabla.

Las tablas son estructuras xHTML que muestran varias filas de datos, con información en columnas, por ejemplo:

ID Ciudad Nombre
1 Madrid
2 Montevideo
3 México
4 Buenos Aires

El código xHTML de esta tabla sería:

<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>México</td>
</tr>
<tr>
<td>4 </td>
<td>Buenos Aires</td>
</tr>
</table>

Para repasar el trabajo con tablas xHTML ver nuestro tutorial de Conceptos Básicos de xHTML - Parte 2

Obviamente que en esa tabla las ciudades están puestas manualmente y si agregamos 1 o 2 en la tabla ciudades no aparecerán, esto es porque hasta ahora el ejemplo sigue siendo Estático.

Reporte Dinámico de Ciudades

A la tabla estática con datos fijos, vamos a realizarla ahora Dinámica, esto quierer decir que genere automáticamente 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. Conectarnos al MySQL
  2. Seleccionar la base de datos
  3. Seleccionar la tabla ciudades
  4. Mostrar un renglón cada cuidad de la tabla ciudades
  5. 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 función conectar con el MySQL

mysql_select_db su función 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 conexión 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 condición.

Todas estas funciones, su forma de trabajo y un ejemplo lo tienen en nuestro tutorial Listado de Registros PHP / MySQL, que también fue creado como apoyo e introducción a este curso.

Pero vamos a un ejemplo concreto del Reporte de Ciudades, si recordamos el ejemplo de la Tabla Estática (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 Básica de un Documento HTML (pueden repasar este concepto en el tutorial Conceptos Básicos de xHTML).

<html>
<head>
<title>Reporte de Ciudades</title>
</head>
<body>
</body>
</html>

Ese código será la base de este reporte, <html> y </html> indican el comienzo y fin de la página xHTML respectivamente. <head> y </head> indican el comienzo y fin de la cabecera de la página, donde únicamente hemos definido el titulo, mediante la declaración <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 imágen.

Reporte de Ciudades

Por ultimo dentro de <body> y </body> escribiremos todas las órdenes xHTML para mostrar el Reporte de Ciudades, mediante una tabla xHTML, el código quedaría 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 también 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 tengámos en la Tabla ciudades de nuestra Base de Datos, sean 2, 50 o 20.

Agregando el Cádigo PHP

Hasta ahora nuestro código es solo xHTML, agregaremos el PHP que trabajara con la Base de Datos, vamos al código 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 código lo pegaremos en un archivo llamado listadociudades.php que en mi caso lo guarde en c:\AppServ\www\CursoWebBienesRaices, como ven el código PHP lo hemos metido dentro del xHTML (esta en rojo para que lo identifiquen), para saber donde comienza y termina cada trozo de código PHP, siempre debemos utilizar  <?php y ?> para comenzar y finalizar respectivamente. Puede haber tantos trozos de código como se necesiten.

Cuando un Usuario llama la página listadocuidades.php desde su Navegador, el navegador le pide la página al Servidor, el servidor ejecuta las ordenes y funciones PHP, las convierte en xHTML y las envía al navegador del usuario, y este navegador las  muestra. En nuestro navegador JAMAS veremos código PHP, ya que es un lenguaje de Servidor.

Analicemos nuestro código PHP línea por línea:

$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 contraseña también del MySQL, en ambos casos usuario y contraseña son los mismos que usaron al Instalar AppServ para la opción 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 habíamos 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 opción 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 condición, cual es la condición ?? pues en palabras la condicion es, obtener un registro nuevo, en código se hace mediante:

$registro = mysql_fetch_array($tabla)

Cuando llega al final de la Tabla, no se cumplirá mas la condición del while y dejara de repetirse esa porción de código, 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 sección 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 conexión.

Para visualizarlo vamos a escribir esto en nuestro navegador:

http://localhost/CursoWebBienesRaices/listadociudades.php

y veremos, como indica la imágen:

Tabla de Reportes

Queda poco claro sin bordes en la tabla, por tanto en la línea:

<table>

Vamos a escribir así:

<table border=”1”>

Grabamos, hacemos F5 (Refreh) en nuestro navegador y va a lucir como la imágen:

Tabla de Reportes con Borde

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

Si miramos el código 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 Estática y no Dinámica. 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 código 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 imágen:

Tabla de Reportes Dinamica

Analicemos esta ultima parte del código. Cuando hacemos el while en $registro queda guardada la información 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 identificación 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 código PHP y por último, la orden echo muestra en una página 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 están 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 próxima 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.

Comentarios de Web de Bienes Raíces o Inmobiliarias - Parte 4, Reporte de Ciudades con PHP MySQL

↑ Tutorial

  • lsalazar

    lsalazar

    2007-03-05 09:42

    Sencillamente muy explicito y completo...felicitaciones...solo espero que las proximas entregas no tarden mucho
  • rolo237

    rolo237

    2007-03-05 23:04

    hola que tal muy bueno ojala no se tarden mucho para la siguiente entrega
  • chandeo

    chandeo

    2007-03-07 13:44

    Excelente que no tarden mucho para la siguiente entrega
  • oscar

    oscar

    2007-03-09 11:43

    cuantas entregas son?, es estupendo el trabajo
  • medina.jorgeluis

    medina.jorgeluis

    2007-03-10 23:22

    Hola como estàn, exelente el tutorial las próximas estregas deben ser rápidas
  • elquique

    elquique

    2007-03-12 12:29

    Gracias por todos los comentarios, agradecemos mucho esto. En cuanto a la próxima entrega, sera publicada esta semana, cuantas son ? bueno ya tenemos preparadas 6 entregas mas pero de acuerdo a las dudas que se plantean en nuestro foro y a los comentarios del sitio vamos ajustando la próxima entrega y las que siguen, y seguro serían al menos 10 entregas ya que pretendemos abarcar el sitio completo sin que queden dudas (o al menos las mínimas).

    En cuanto a porque vamos lento y no todas juntas, bueno en primer lugar lleva tiempo realizar este mini curso, como dije lo vamos adaptando al feedback y lo ultimo e importante, esperamos a que la ultima entrega tenga cierta cantidad de visitas para ver el interes antes de publicar lo siguiente.
  • lsalazar

    lsalazar

    2007-03-13 06:10

    gracias...tengo una duda, cuando publico le php no me salen en el explorador los registros de deberia mostrar (id, nombre) pero cuando digo que lo muestre no como tabla sino registro por registro con la opcion echo si muestra todos los registros...por que no me muestra el ejemplo que hicimos? de antemano mil gracias
  • luisastudillo

    luisastudillo

    2007-03-13 17:32

    Estamos ansiosos por seguir con este tan interesante curso, la parte 5 ¿CUANDOOOOOOO? graciassssssss
  • Hades

    Hades

    2007-03-14 12:10

    ELQUIQUE espero que me ayude con un problema que tengo y es que cuando creé el formulario de contactos, al presionar el boton enviar, me aparece solo el para descargar o abrir el documento PHP. Espero que me ayude a resolver este problema.
  • luisastudillo

    luisastudillo

    2007-03-19 15:50

    Estoy siguiendo paso por poso todo el Manual, pero en la cuarta entrega cuando genero la tabla con la conexión a la BD, no me muestra los cuatro datos ingresados, pero tampoco me tira error de conexión, esta funciona porque la he probado, pero como dije antes, me muestra solo el dato de 1 y Madrid, ni siquiera me muestra cuatro veces Madrid, como antes de introducir el código PHP en.



    Agradecido por su atención y en espera de respuesta Atte.
    Luis
  • elquique

    elquique

    2007-03-20 21:48

    Recuerden que todos nuestros tutoriales tienen un link a nuestro foro (Foro Creativo) donde pueden consultar especificamente por cualquier problema o modificacion que quieran hacer, en el ambiente del foro es mas sencillo responder a sus preguntas:

    Ir al foro
  • luisastudillo

    luisastudillo

    2007-03-22 12:13

    Me he registrado en el foro pero no me hace el envio de la solicitud, he ingresado todos los datos necesarios, nose cual sea el motivo
  • msramirezg

    msramirezg

    2007-04-06 18:52

    cuando estara listo el capitulo en donde veamos lo del comentario de este curso:

    En la próxima entrega veremos como hacer el Reporte de Propiedades y Enlazar las dos Tablas al mismo, además de cambiar el orden de visualización.

  • dmpitu

    dmpitu

    2007-05-20 18:19

    Excelente. Para mi que anduve recorriendo tutoriales de mySQL y PHP por varios sitios, este me pareció perfecto. Rápido de entender, al punto directamente y efectivo.
    Gracias a elQuique!!! pude por fin empezar a entender esto. Yo de programación cero total.
    Una consulta breve. En mi caso tengo que ingresar valores numericos, que son tiempos medidos en: minutos,segundos,milisegundos; y se verían así:
    1'24''215 o parecido. Como los tiempos de las carreras. Y agruparlos de mayor a menor y cosas así.
    alguna pista de por donde van los tiros?
    Gracias, gracias, gracias!
  • frankcarrera

    frankcarrera

    2007-06-14 00:44

    simplemente exquisito
  • ishashakti

    ishashakti

    2007-07-02 17:35

    gracias por impartir estos tutoriales, tengo una pregunta al colocar el codigo php me sale el siguiente error, en las lineas Warning: mysql_free_result(): supplied argument is not a valid MySQL result resource in /home/pixelada/public_html/listadodepropiedades.php on line 28, si la borro no me sale mas el error, pero no es la idea; y al final no me realiza la búsqueda, ahora no entiendo si has creado dos documentos, uno xhtml, y uno php.
  • vicmexmex

    vicmexmex

    2007-07-26 20:29

    Realmente claro, realizado con ganas de comunicar los conocimientos que elQuique posee, BRRAAAVOOOO
  • gustavo_mex

    gustavo_mex

    2007-08-06 14:37

    Primero que nada agradecer todos tus tutoriales, están muy claros y son de gran utilidad!

    Tengo una consulta: El hosting que contraté ya cuenta con phpMyAdmin, de modo que no lo tengo instalado en mi PC, además no me pidieron ninguna clave extra ni usuario, supongo que son los de mi cuenta de el mismo Hosting... Así que mis preguntas son las siguientes: 1)¿En donde guardo el archivo "listadociudades.php"?
    2)En la linea "$conexion = mysql_connect(‘localhost’, ‘usuariobase’, ‘topsecret’);" de código php que debo de poner? (tomando en cuenta que no tengo el Apperv instalado en mi PC).

    Todo iba perfecto hasta que llegué a esta parte, será necesario que lo instale en mi PC?
  • jam

    jam

    2007-10-05 12:21

    Bravo, muy bien explicado.
    Excelente Docente.
    Lo no va más, sería para mi ver un pequeño ejemplo (con lectura y escritura), para manejar estas bases de datos desde FLASH o FLEX.
    Si tienen una referencia. Sería un lance al arte de vivir contento.
    Dense por Saludados.
  • mohode

    mohode

    2007-12-31 04:10


    felicitaciones
    realmente muy claro el tutorial
    lo entendi perfectamente y me aclaro varias dudas que tenia con MyAdmin
    muxas gracias :)
  • eyasno2007

    eyasno2007

    2008-05-10 15:53

    excelente material...lo felicito gente como usted es que vale la pena "TODO LO QUE NO SE ENSEÑA O SE COMPARTE, SE PIERDE...." muy facil de entender, practico y muy claro, Muchas gracias por su aporte.
  • kfetales

    kfetales

    2009-08-25 00:20

    que tal muy bueno el tema y hasta hoy lo echo todo tal como lo manejan pero a partir de aqui no entiendo yo quiero hacer por medio de dreamweaver, pero no se como hacer el archivo reporte de ciudades me gustaria alguin me explicara como lo hago por medio de dreamweaver.
  • ez3s

    ez3s

    2010-02-22 11:03

    Muy buen curso!
    Soy novato, pero un pequeño detalle en esta parte




    usaste ‘’ y no '', si uno lo copia de ahi no funciona. despues esta repetido pero bien.
  • ahezio

    ahezio

    2010-03-22 06:18

    hola, por que sera que a mi no me sale el cuadro con las ciudades? al parecer no hace conexion con la base de datos. Pensaba que my Mysql no estaba corriendo, pero que si lo esta. Cual seria el problema? si segui exactamente los pasos escritos en el tutorial. Gracias a todos de antemano

↑ Tutorial