Manual de Php y MySql

ELABORACION DE UN SISTEMA DE NOTICIAS

En primer lugar, mostraremos como se visualizarn los datos en el navegador, al momento de
ejecutar la Pgina. Utilizar Tablas para realizar el diseo.

El cdigo fuente seria ms o menos as:

Ing. Yosip Urquizo Gmez

Pgina 1

Manual de Php y MySql

Como vemos anteriormente el cdigo es netamente HTML, si quisiramos mostrar otra noticia,
lo que tendramos que hacer es modificar el cdigo de nuestra pgina noticias.php y agregar la
nueva noticia para ser mostrada a continuacin.
IMPLEMENTANDO LA BASE DE DATOS CLASE
Crearemos una Base de Datos Llamada clase en la cual tendremos la tabla noticia con las
siguientes caractersticas:

Insertaremos 2 registros como se muestra a continuacin:

Verificamos que las 3 Imgenes que se necesitan estn dentro de la carpeta img, como se
muestra a continuacin:

Luego de colocar las imgenes correspondientes dentro de la carpeta img, creamos el archivo
conexin.php de la siguiente manera:

Tambin creamos el archivo noti01.php colocando donde corresponde el campo para mostrar
su contenido como muestra en la imagen:

Ing. Yosip Urquizo Gmez

Pgina 2

Manual de Php y MySql

Ejecutamos el archivo noti01.php desde la barra de direcciones mostrando lo siguiente si no

hubiera ningn problema:

Ing. Yosip Urquizo Gmez

Pgina 3

Manual de Php y MySql

MODIFICANDO EL DISEO DE NUESTRA NOTICIA
Como vemos en la imagen anterior, se est mostrando todo el contenido de nuestra noticia,
pero si solo quisiramos mostrar parte del cuerpo de noticia, tendramos que usar la funcin
substr() para lograr tal propsito.
Nuestra pgina en modo diseo se vera de la siguiente manera:

Cuando se ejecute se ver de la siguiente manera:

La codificacin para nuestra pgina noti02.php sera la siguiente:

Ing. Yosip Urquizo Gmez

Pgina 4

Manual de Php y MySql

Al hacer clic en el Icono Ver Detalle llamar a la funcin verdetallenot() que se encuentra en
el archivo funciones.js envindole como argumento el id de la noticia y el valor del contador
$i, necesario para extraer la noticia adecuada y ubicarlo en el div adecuado.

A continuacin se muestra el cdigo de la funcin verdetallenot(), que se encuentra en el

archivo funciones.js.

Ing. Yosip Urquizo Gmez

Pgina 5

Manual de Php y MySql

Como se visualiza en la imagen anterior, la funcin verdetallenot(id, i) recibe 2 argumentos las
cuales son:
Id -> que viene hacer el id(clave primaria) de la noticia en la cual el usuario hizo clic.
i -> es el contador con el valor recogido de la noticia en la cual se hizo clic.
Posteriormente el id es enviado a travs del mtodo post a la pgina detallenot.php y el
resultado es mostrado en el div cuyo id es #detalle+i, la cual al ser reemplazado por el valor de
i que dar por ejemplo detalle1, detalle2, etc.
El resultado de la pgina detallenot.php, se mostrar en la misma ventana sin haber hecho un
reload a la pgina gracias al uso de jquery, de la siguiente manera:

CODIGO DE LA PAGINA detallenot.php

Ing. Yosip Urquizo Gmez

Pgina 6

Manual de Php y MySql

MOSTRANDO UNA NOTICIA PRINCIPAL Y LAS OTRAS SECUNDARIAS
Ahora vamos hacer una variacin en la presentacin de las noticias. Mostraremos una noticia
como principal, en la cual se mostrar una imagen.
Las siguientes noticias se mostrarn como secundarias por lo tanto no se mostrar las
imgenes hasta que se desee ver el detalle de la noticia.
Iniciaremos verificando el campo principal de la tabla noticia que es el responsable de este
nuevo cambio en nuestra noticia final.

Cuando Principal = 1, se mostrar como la noticia principal, es decir se mostrar la imagen de

la noticia.
Cuando Principal = 0, la noticia ser secundaria, por lo tanto no se mostrar la imagen en la
pgina principal de la noticia hasta que lo seleccionen y se muestre el detalle de la noticia.

La Pgina ejecutada se mostrar de la siguiente manera:

La Pgina noti03.php en modo diseo se mostrar de la siguiente manera:

Ing. Yosip Urquizo Gmez

Pgina 7

Manual de Php y MySql

Para mostrar la pagina noti03.php, debemos crear 2 Record source:

1. Que mostrar la noticia principal(principal=1)
$rsnoti="select * from noticia where principal=1 limit 1";
$noti = mysql_query($rsnoti); ///ejecuto la consulta
$rsnoti=mysql_fetch_array($noti);
2. Que mostrar las dems noticias(no principales o sea principal=0)
$rsnoticia="select * from noticia where principal=0 order by id desc limit 2";
$noticia = mysql_query($rsnoticia); ///ejecuto la consulta
Limit nos sirve para delimitar la cantidad de registros que se mostraran en la
consulta SQL, por ejemplo limit 2 hace referencia a que solo se mostrara 2 registros.

La Noticia principal utilizar un cdigo parecido al anterior para mostrarse. Pero las noticias
secundarias se mostrarn dentro de un while (Estructura repetitiva), de la siguiente manera:

Ing. Yosip Urquizo Gmez

Pgina 8

Manual de Php y MySql

Por lo tanto el cdigo completo de la pgina noti03.php ser de la siguiente manera:

Al hacer clic en el Icono Ver Detalle llamar a la funcin verdetallenot1() que se encuentra
en el archivo funciones.js envindole como argumento el id de la noticia y el valor del
contador $i, necesario para extraer la noticia adecuada y ubicarlo en el div adecuado.
La diferencia con la noticia anterior es que si se selecciona ver detalle de la noticia principal, el
valor de $i=0; de lo contrario si se selecciona ver detalle de las noticias secundarias el valor de
$i depender de la noticia en la cual se hizo clic para ver el detalle.

A continuacin se muestra el cdigo de la funcin verdetallenot1(), que se encuentra en el

archivo funciones.js.

Ing. Yosip Urquizo Gmez

Pgina 9

Manual de Php y MySql

Como se visualiza en la imagen anterior, la funcin verdetallenot1(id, i) recibe 2 argumentos

las cuales son:
Id -> que viene hacer el id(clave primaria) de la noticia en la cual el usuario hizo clic.
i -> es el contador con el valor recogido de la noticia en la cual se hizo clic.
Posteriormente el id es enviado a travs del mtodo post a la pgina detallenot.php y el
resultado es mostrado en el div cuyo id es #detalle+i, la cual al ser reemplazado por el valor de
i que dar por ejemplo detalle1, detalle2, etc.
El resultado de la pgina detallenot1.php, se mostrar en la misma ventana sin haber hecho
un reload a la pgina gracias al uso de jquery, de la siguiente manera:

CODIGO DE LA PAGINA detallenot1.php

Ing. Yosip Urquizo Gmez

Pgina 10

Manual de Php y MySql

APLICACIN
Insertar ms registros a la Base de datos y cambiar el valor del campo principal hacia otras
noticias para verificar que verdaderamente cambia la noticia principal.

Ing. Yosip Urquizo Gmez

Pgina 11