Aplicar estilos a un menú dinámico en PHP con bootstrap

Uno de los problemas en el mundo de la programación con PHP, es aplicar estilos al nuestro código.

Para solucionar este tipo de problemas existen biblioteca multiplataforma que contienen plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales.

Una de las mas usadas y la que voy a utilizar en el ejemplo es boostrap.

Vamos a utilizar un listado de elementos que obtenemos en json, como ya vimos en este post.

Lo primero que vamos hacer es crear el código para la cabecera dinámica lo vamos a llamar head.php y vamos a incluir la carga del json y crearemos una lista donde mostrar cada uno de los elementos.

El codigo utilizado seria el siguiente:

<?php
// index.php
// ubicacion JSON  y local
define('JSONlocal', 'playas.json');
// leer JSON  local
    $data = file_get_contents(JSONlocal);
    $items = json_decode($data, true);
 
//lista de items a recorrer
$listaItems = $items["directorios"]["directorio"];
?>
 
<html>
 
<header>
  <h1><a href="index.php">Playas de Gijón</a></h1>
</header>
 
  <div>
    <ul>
      <?php
      //bucle para recorrer los elementos del array
      for ($i = 0; $i<count($listaItems); $i++) {
          ?>
      <li>
        <?php echo '<a href="playa.php?id=' . $i . '">' . substr($listaItems[$i]["nombre"]["content"] , 9) . '</a>'; ?>
      </li>
      <?php
      } //cerramos bucle
      ?>
    </ul>
  </div>

Y el resultado seria asi:

Listado dinámico

Para aplicar a estilos al menú vamos a utilizar bootstrap y utilizaremos las librearías CDN disponibles en https://www.bootstrapcdn.com/

Incluiremos las libreas en la etiqueta head y vemos como se aplican los estilos.

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>
Listado con estilos

Ahora lo que queremos es darle estilos al menú y hacerlo responsivo, para ello vamos a la documentación de bootstrap y reutilizamos el código de ejemplo que tienen para los menús https://getbootstrap.com/docs/4.3/components/navbar/

Incluimos el siguiente codigo y ya vemos el menu dinamico y responsivo.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <?php
      //bucle para recorrer los elementos del array
      for ($i = 0; $i<count($listaItems); $i++) {
          ?>
      <li class="nav-item">
        <?php echo '<a class="nav-link" href="playa.php?id=' . $i . '">' . substr($listaItems[$i]["nombre"]["content"] , 9) . '</a>'; ?>
      </li>
      <?php
      } //cerramos bucle
      ?>
    </ul>
  </div>
</nav>
Menú de navegación con estilos
Menú de navegación responsivo

El siguiente paso que vamos a seguir es crear el index.php y añadir el menú creado anteriormente a la vez que creamos una lista para mostrar todos los elementos mediante un bucle.

<?php
include 'head2.php';
?>
 
<ul class="list-group">
<?php
    //bucle para recorrer los elementos del array
    for ($i = 0; $i<count($listaItems); $i++) {
        ?>
<li class="list-group-item">
  <?php echo '<a class="link" href="playa.php?id=' . $i . '">' . $listaItems[$i]["nombre"]["content"]. '</a>'; ?>
</li>
<?php
    } //cerramos bucle
?>
</ul>
</html>

El resultado se veria asi:

Lista de elementos en index.php

Y lo ultimo que haremos es crear la pagina playas.php donde mostraremos la ficha del elemento mediante tablas.

<?php
include 'head.php';
 
$id=$_GET['id'];
?>
 
 <table border="1">
  <tr>
   <td>Nombre: </td>
   <td>
    <?php echo $listaItems[$id]["nombre"]["content"]; ?>
   </td>
  </tr>
  <tr>
   <td>URL: </td>
   <td>
    <?php echo $listaItems[$id]["url"]; ?>
   </td>
  </tr>
  <tr>
   <td>Descripcion: </td>
   <td>
    <?php echo $listaItems[$id]["descripcion"]["content"]; ?>
   </td>
  </tr>
  <tr>
   <td>Direccion: </td>
   <td>
    <?php echo $listaItems[$id]["direccion"][0]; ?>
   </td>
  </tr>
  <tr>
   <td>Foto: </td>
   <td>
    <?php echo '<img src=' . $items['directorios']['directorio'][$id]['foto']['content'] . '/>'; ?>
   </td>
  </tr>
  <tr>
   <td>Localizacion: </td>
   <td>
    <?php echo '<a href="https://www.google.com/maps/place/' .
                    $items['directorios']['directorio'][$id]['localizacion']['content'] . '">' .
                    $items['directorios']['directorio'][$id]['localizacion']['content'] . '</a>'; ?>
   </td>
  </tr>
 </table><br />
 
</html>

Con el siguiente resultado:

Ficha del elemento

Podéis ver aquí el elemento en funcionamiento: http://programacionconphp.com/dev/basicBOOTSTRAP
Y descargar el ejemplo en este enlace: http://programacionconphp.com/dev/basicBOOTSTRAP/basicBOOTSTRAP.zip

Deja un comentario