Select con link

Select con link

Hola amigos, a petición de uno de nuestros seguidores en el blog que pidió su entrada en la sesión de pide tu entrada, vamos a crear un select en el cual vamos a ir almacenando los titulares de un sistema de noticias con php y mysql, en este select cada vez que el usuario seleccione un tema solo con seleccionarlo el select lo va a enviar a la noticia correspondiente con su detalla.

Crear un select con link automático

Básicamente este pequeño mini-tutorial como nos lo pidió dicho usuario lo vamos hacer en base a nuestro sistema de noticias paso a paso con php y mysql que si no lo has visto le puedes dar un vistazo. Lo que vamos hacer es cambiar la parte de titulares y la vamos a sustituir por un select esto es algo simple pero si no entiendes muy bien tecnologías como php y JavaScript sete ara muy difícil realizar por tu propia cuenta.

Aquí te voy a explicar cómo hacerlo paso a paso para que lo puedas implementar en cualquier otro sitio web que desees.

A continuación voy a colocar el código del archivo titulares.php que si te has fijado en nuestro tutorial donde creamos un sistema de noticias paso a paso con php y mysql, este es el archivo que extrea los titulares de la base de datos y al hacer click nos envía al detalle de dicha noticia.
titulares.php

<script>
function abrirEnlace(){
var dato = document.form1.noticia.value;
if(dato =='Ultimas Noticias')
{}else{
window.open("detalle.php?noticia="+dato);
}
}
</script>
<style>
select,option{
width:230px;
list-style:none;
height:30px;
border:solid 1px #DADADA;
border-radius:5px;
}
</style>
<?php
session_start();
include('conexion.php');
mysql_select_db($bd,$conexion);
$query = "SELECT * FROM noticias ORDER BY id_noticia DESC LIMIT 5";
$consulta = mysql_query($query,$conexion);
echo '<form name="form1">
<select name="noticia" onchange="abrirEnlace()">
<option>Ultimas Noticias</option>
';
while($row=mysql_fetch_assoc($consulta))
{
$row['titulo'].'<br />';
{
?>
<div id="titulares">
<option><?php echo $row['titulo']; ?></option>
</div>
<?php }}mysql_free_result($consulta); ?>
</select>
</form>
<br /><br />

Lo primero que vemos en este archivo es un código javaScript este código es el que nos permitirá tomar una decisión dependiendo la opción que le pasemos por el select en caso de que sea un titulo que se encuentre en la base de datos entonces nos abrirá una nueva ventana con la pagina correspondiente al detalle de esa noticia.

Luego vemos un pequeño trozo de código CSS que es para darle un poco de estilo a nuestro select aunque este no es el tema, tu puedes darle el diseño que desees ya que aquí solo nos centramos en que funcione lo que queremos.

Luego del código CSS encontramos el código php que si te fijas es prácticamente el mismo que el del archivo original solo que le hemos agregado un forma para enviar dicho select. Tambien en un campo del select vemos como ponemos un trozo de código php dentro de 2 etiquetas option esto es para que se puedan visualizar los títulos en dicho select.

Ahora dirigete al archivo que mostrara los detalles de las noticias y cambiemos el código por el siguiente, es prácticamente lo mismo solo le hemos cambiado algunas cositas esenciales para que funciones.
Detalle.php

<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);
require_once('conexion.php');
$id=$_GET['noticia'];
mysql_select_db($bd,$conexion);
$query = "SELECT * FROM noticias WHERE titulo='$id'";
$consulta = mysql_query($query,$conexion);
if($row=mysql_fetch_assoc($consulta))
{
?>

Bueno si copiaste todo tal cual te lo he explicado aquí tendrás tu sistema funcionando con un select con link automáticos con los resultados extraídos desde una base de datos.

Vuelvo y te reitero, este mini-tutorial es basado en nuestro sistema no noticias con php y mysql que le puedes dar un vistazo antes de leer este tema y por supuesto si te fijas bien en lo que hicimos aquí puedes aplicarlo en otros sitios sin ningún problema.

Con esto terminamos nuestro tutorial de select con link automático como siempre si quieres que te expliquemos algo o que te creemos algo que no sabes hacer para tu web o tienes alguna duda de cómo se hace solo tienen que pedirlo en la sección pide tu entrada.

Gracias y hasta la próxima entrada que espero que sea la tulla…

Comments

  1. By olcam

Deja un comentario

Tu dirección de correo electrónico no será publicada.