{"id":7449,"date":"2019-09-12T09:45:15","date_gmt":"2019-09-12T09:45:15","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7449"},"modified":"2019-09-12T10:26:54","modified_gmt":"2019-09-12T10:26:54","slug":"letras-del-abecedario-con-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/","title":{"rendered":"Letras del abecedario con PHP"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como recorrer y mostrar din\u00e1micamente las letras del abecedario utilizando PHP<\/strong>.<\/p>\n

\u00bfAlguna 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?<\/p>\n

Existen varias formas para mostrar este abecedario en tu p\u00e1gina web.<\/p>\n

La idea del ejemplo en funcionamiento es muy simple. Quiero mostrar las letras del abecedario en may\u00fasculas y que al pulsar en una letra, me muestre informaci\u00f3n sobre esa letra.<\/p>\n

La ilustraci\u00f3n que quiero dejar con este art\u00edculo es la facilidad con la que se puede un abecedario con PHP<\/strong> de forma din\u00e1mica.<\/p>\n

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\u00e1 mucho trabajo pero, no parece el camino m\u00e1s correcto.<\/p>\n

Visualizaci\u00f3n de las letras del abecedario con PHP<\/h3>\n

Con PHP<\/strong> podemos hacer un bucle desde el n\u00famero 65 al 90 (ambos incluidos) para obtener un car\u00e1cter espec\u00edfico y mostrarlo en pantalla.<\/p>\n

Obtener un car\u00e1cter espec\u00edfico con PHP<\/strong> es muy sencillo. La funci\u00f3n chr()<\/a> devuelve un car\u00e1cter espec\u00edfico.<\/p>\n

Sabiendo esto, puedo hacer lo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<ul class="abc">\n    <?php<\/span>\n    for<\/span>(<\/span>$i<\/span>=<\/span>65<\/span>;<\/span> $i<\/span><=<\/span>90<\/span>;<\/span> $i<\/span>++<\/span>)<\/span> {<\/span>  \n        $letter<\/span> =<\/span> chr<\/span><\/a>(<\/span>$i<\/span>)<\/span>;<\/span>  \n        echo<\/span> '<li><a href="https:\/\/www.jose-aguilar.com\/scripts\/php\/abc\/?letter='<\/span>.<\/span>$letter<\/span>.<\/span>'">'<\/span>.<\/span>$letter<\/span>.<\/span>'<\/a><\/li>'<\/span>;<\/span>\n    }<\/span>\n    ?><\/span>\n<\/ul><\/pre><\/div><\/div>\n
En un archivo PHP<\/strong> creo una lista desordenada y dentro hago un bucle utilizando for para iterar n\u00fameros desde el 65 al 90.<\/p>\n
Dentro del bucle, convierto cada n\u00famero a un car\u00e1cter espec\u00edfico para mostrarlo en pantalla.<\/p>\n
Si convertimos el intervalo de n\u00fameros del 65 al 90 a un car\u00e1cter espec\u00edfico conseguimos tener las letras del abecedario en may\u00fasculas y en el orden correcto.<\/p>\n
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.<\/p>\n
Control del clic de las letras del abecedario<\/h3>\n
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\u00f3n en el mismo archivo PHP:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span> if<\/span> (<\/span>isset<\/span><\/a>(<\/span>$_GET<\/span>[<\/span>'letter'<\/span>]<\/span>)<\/span>)<\/span> {<\/span> ?><\/span>\n    <div class="alert alert-info">\n        Has seleccionado la letra <?php<\/span> echo<\/span> $_GET<\/span>[<\/span>'letter'<\/span>]<\/span>;<\/span> ?><\/span>\n    <\/div>\n<?php<\/span> }<\/span> ?><\/span><\/pre><\/div><\/div>\n
Si se ha pulsado en una letra del abecedario que hemos creado, muestra un mensaje relacionado con la letra pulsada.<\/p>\n
Este c\u00f3digo es muy simple pero se podr\u00eda utilizar para otros prop\u00f3sitos m\u00e1s serios como, por ejemplo, mostrar un listado de pel\u00edculas, un listado de alumnos, un listado de productos que empiezan por una letra concreta.<\/p>\n
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.<\/p>\n
Mejora la parte visual con CSS<\/h3>\n
Para mostrarlo de forma m\u00e1s bonita puedes usar unos estilos simples como base:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
ul.abc<\/span> {<\/span>\n    margin<\/span>:<\/span> 0px<\/span>;<\/span>\n    padding<\/span>:<\/span> 0px<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span>\n \n.abc<\/span> li {<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #CCCCCC<\/span>;<\/span>\n    display<\/span>:<\/span> inline<\/span>;<\/span>\n    padding<\/span>:<\/span> 4px<\/span> 0<\/span>;<\/span>\n}<\/span>\n \n.abc<\/span> li a {<\/span>\n    color<\/span>:<\/span> #555555<\/span>;<\/span>\n    padding<\/span>:<\/span> 4px<\/span> 6px<\/span>;<\/span>\n    text-decoration<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Despu\u00e9s de esto, puedes desarrollar tu imaginaci\u00f3n para mejorarlo.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Averigua como mostrar las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.<\/p>\n","protected":false},"author":1,"featured_media":7452,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-7449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php"],"yoast_head":"\nLetras del abecedario con PHP - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Letras del abecedario con PHP - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-12T09:45:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-12T10:26:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/\",\"name\":\"Letras del abecedario con PHP - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png\",\"datePublished\":\"2019-09-12T09:45:15+00:00\",\"dateModified\":\"2019-09-12T10:26:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Letras del abecedario con PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Letras del abecedario con PHP - Jose Aguilar Blog","description":"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Letras del abecedario con PHP - Jose Aguilar Blog","og_description":"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-09-12T09:45:15+00:00","article_modified_time":"2019-09-12T10:26:54+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/","url":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/","name":"Letras del abecedario con PHP - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png","datePublished":"2019-09-12T09:45:15+00:00","dateModified":"2019-09-12T10:26:54+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Averigua como mostrar din\u00e1micamente las letras del abecedario en tu p\u00e1gina web utilizando PHP. Ideal para mostrar una lista de enlaces para filtrar contenidos.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/09\/abc-php.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/letras-del-abecedario-con-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Letras del abecedario con PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7449"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7449\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7452"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}