Tema: Interacción PHP+Javascript+MySQL
Pregunta : ¿Cómo hacer una marquesina rotaria con resultados de una BD?
Respuesta:
Marquesina Rotaria de Noticias (o de lo que sea) (PHP+javascript+MySQL)
La idea de esta marquesina es hacer un include( ) en donde queramos de un archivo que llamaremos marquesina.php
Utiliza javascript para efectos de hacer la rotación de los titulares de las noticias (o lo que sea) y PHP para hacer que dicha marquesina algo dinámico facilmente actualizable.
Para efectos del ejemplo usaremos una tabla que contenga lo siguiente:
Tabla: noticias
Campos: idnot fecha titulo contenido
idnot (Tipo: tinyint / Atributos: UNSIGNED / Extra: Autoincrement)
fecha (Tipo: DATE)
titulo (Tipo: VARCHAR(50))
contenido (Tipo: longtext)
Luego definimos el javascript que genera la rotación de los titulares (este lo conseguí en la red, no manejo javascript)
Código:
<script language="JavaScript1.2">
var ancho=50
var alto=50
var velocidad=3
var contenido=' Aqui va el código html que queramos y es el que rotará para ello utilizamos PHP que está más adelante'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+velocidad+' style="width:'+ancho+';height:'+alto+'">'+contenido+'</marquee>')
function regenerar(){
window.location.reload()
}
function regenerar2(){
if (document.layers){
setTimeout("window.onresize=regenerar",450)
inimarquee()
}
}
function inimarquee(){
document.cmarquee01.document.cmarquee02.document.write(contenido)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=velocidad
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=alto
scrollit()
}
}
window.onload=regenerar2
</script>
En la parte del “var contenido” del javascript insertaremos el siguiente código de PHP que genera el html desde la base de datos.
Código PHP:
<?php
//Definimos el select de la consulta, además definimos el formato de la fecha como mi_fecha
//Recogemos los datos de la tabla de noticias los ordenamo por fecha desde la más reciente
//a la más antigua y las últimas 5
$ssql=("SELECT *,DATE_FORMAT(fecha,'%d-%m-%Y') AS mi_fecha FROM noticias ORDER BY fecha desc limit 5");
//consulta la base de datos, defino las variables y genero los resultados.
$result=mysql_query($ssql,$conn);
while ($row=mysql_fetch_array($result))
{
echo"<a href=noticias/vernoticia.php?idnot=".$row['idnot'].">".substr($row[titulo],0,25)."...<br>(".$row[mi_fecha].")</a><br><br>";} ?>'
con esto se genera el html de los titulos de las noticias.
Por ejemplo si fuera la noticia idnot=1 , fecha=2004-01-01 , titulo=’Comienza el 2004’, contenido=’Comienza el 2004 y en la Alameda quedó la…..etc’
Se corta el título en 25 caractreres y le agrego puntos suspensivos. (substr($row[titulo],0,25)
El html generado sería:
<a href=noticias.php?idnot=1>Comienza el 2004…<br>01-01-2044</a><br>
y así hasta los 5 últimos titulares.
El código final quedaría así:
Código PHP:
<script language="JavaScript1.2">
var ancho=300
var alto=150
var velocidad=3
var contenido='<?
$ssql=("SELECT *,DATE_FORMAT(fecha,'%d-%m-%Y') AS mi_fecha FROM noticias ORDER BY fecha desc limit 5");
$result=mysql_query($ssql,$conn);
while ($row=mysql_fetch_array($result)){
echo "<a href=vernoticia.php?idnot=".$row['idnot'].">".substr($row[titulo],0,20)."...<br>(".$row[mi_fecha].")</a><br><br>";} ?>'
if (document.all)
document.write('<marquee direction="up" scrollAmount='+velocidad+' style="width:'+ancho+';height:'+alto+'">'+contenido+'</marquee>')
function regenerar(){
window.location.reload()
}
function regenerar2(){
if (document.layers){
setTimeout("window.onresize=regenerar",450)
inimarquee()
}
}
function inimarquee(){
document.cmarquee01.document.cmarquee02.document.write(contenido)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=velocidad
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=alto
scrollit()
}
}
window.onload=regenerar2
</script>
Este código lo guardamos en un archivo marquesina.php y le hacemos un include(“marquesina.php”); dentro del index.php de nuestro sitio o donde sea. Otra opción es poner todo el código directamente en la página.
Luego para que funcione por completo debemos crear una página que reciba el idnot y muestre el contenido de la noticia.
Con el siguiente php (archivo “vernoticia.php”)
Código PHP:
<?php
include("conectar.php");
//defino la variable que viene por get
$idnot=$_GET['idnot'];
//defino el Select de la consulta y luego hago la consulta
$ssql=("SELECT *,DATE_FORMAT(fecha,'%d-%m-%Y') AS mi_fecha FROM noticias WHERE idnot=$idnot");
$result=mysql_query($ssql,$conn);
while ($row=mysql_fetch_array($result))
{
echo $fecha=$row[mi_fecha]." - ";
echo "<b>".$row[titulo]."</b><br><br>";
$variable=$row['contenido'];
// Convertir links (URLs) usé este código que saque del foro para revisar el contenido y ver si hay //vínculos y linkear.
$variable = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)', '<a href="\\1" target="_blank">\\1</a>', $variable);
$variable = eregi_replace('([[:space:]()[{}])([url]www.[/url][-a-zA-Z0-9@:%_\+.~#?&//=]+)', '\\1<a href="http://\\2" target="_blank">;\\2</a>;', $variable);
echo "<br>". $variable ."<br>";
}
?>
<hr size="1" noshade>
<a href="javascript:history.back()">Volver a Marquesina</a>
Finalemente puedo incluir esto en un archivo “notimivil.php”
Código PHP:
<?
include("conectar.php");
include("marquesina.php");
?>
Pueden ver el resultado aquí
http://usuarios.lycos.es/bonsaichile.../notimovil.php
La página tiene un poco de propaganda pero nada tan terrible.
Saludos Darkoi