Letras del abecedario con PHP

En este artículo vas a descubrir como recorrer y mostrar dinámicamente las letras del abecedario utilizando PHP.

¿Alguna vez has tenido que desarrollar un buscador con letras del abecedario y que al pulsar en una letra te retorne los registros que empiezan por esa letra?

Existen varias formas para mostrar este abecedario en tu página web.

La idea del ejemplo en funcionamiento es muy simple. Quiero mostrar las letras del abecedario en mayúsculas y que al pulsar en una letra, me muestre información sobre esa letra.

La ilustración que quiero dejar con este artículo es la facilidad con la que se puede un abecedario con PHP de forma dinámica.

Para conseguir mostrar las letras del abecedario en pantalla, lo primero que se nos puede ocurrir es escribir las letras a mano. Debido a que son pocas, no será mucho trabajo pero, no parece el camino más correcto.

Visualización de las letras del abecedario con PHP

Con PHP podemos hacer un bucle desde el número 65 al 90 (ambos incluidos) para obtener un carácter específico y mostrarlo en pantalla.

Obtener un carácter específico con PHP es muy sencillo. La función chr() devuelve un carácter específico.

Sabiendo esto, puedo hacer lo siguiente:

Source code

<ul class="abc">
    <?php
    for($i=65; $i<=90; $i++) {  
        $letter = chr($i);  
        echo '<li><a href="https://www.jose-aguilar.com/scripts/php/abc/?letter='.$letter.'">'.$letter.'</a></li>';
    }
    ?>
</ul>

En un archivo PHP creo una lista desordenada y dentro hago un bucle utilizando for para iterar números desde el 65 al 90.

Dentro del bucle, convierto cada número a un carácter específico para mostrarlo en pantalla.

Si convertimos el intervalo de números del 65 al 90 a un carácter específico conseguimos tener las letras del abecedario en mayúsculas y en el orden correcto.

En los elementos de la lista desordenada tan solo estoy agregando un enlace que permite filtrar o mostrar contenido relacionado con la letra en concreto.

Control del clic de las letras del abecedario

Cuando se pulsa en una letra cualquiera, el ejemplo en funcionamiento, tan solo muestra una alerta o mensaje. Esto lo consigo agregando la siguiente condición en el mismo archivo PHP:

Source code

<?php if (isset($_GET['letter'])) { ?>
    <div class="alert alert-info">
        Has seleccionado la letra <?php echo $_GET['letter']; ?>
    </div>
<?php } ?>

Si se ha pulsado en una letra del abecedario que hemos creado, muestra un mensaje relacionado con la letra pulsada.

Este código es muy simple pero se podría utilizar para otros propósitos más serios como, por ejemplo, mostrar un listado de películas, un listado de alumnos, un listado de productos que empiezan por una letra concreta.

Con la letra escogida se puede hacer una consulta a una tabla de una base de datos para retornar los registros que empiezan por esa letra.

Mejora la parte visual con CSS

Para mostrarlo de forma más bonita puedes usar unos estilos simples como base:

Source code

ul.abc {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
 
.abc li {
    border: 1px solid #CCCCCC;
    display: inline;
    padding: 4px 0;
}
 
.abc li a {
    color: #555555;
    padding: 4px 6px;
    text-decoration: none;
}

Después de esto, puedes desarrollar tu imaginación para mejorarlo.

Ver demo Descargar