{"id":5741,"date":"2025-05-21T19:33:44","date_gmt":"2025-05-21T19:33:44","guid":{"rendered":"https:\/\/disenodepagina.com\/disenoweb\/gestion-del-blog-mediante-base-de-datos\/"},"modified":"2025-05-21T19:33:44","modified_gmt":"2025-05-21T19:33:44","slug":"gestion-del-blog-mediante-base-de-datos","status":"publish","type":"post","link":"https:\/\/disenodepagina.com\/disenoweb\/gestion-del-blog-mediante-base-de-datos\/","title":{"rendered":"Gesti\u00f3n del blog mediante base de datos"},"content":{"rendered":"

\n<\/p>\n

\n

<\/h4>\n
\n

<\/p>\n

\n


\n alt=\u00bbImagen principal del art\u00edculo\u00bb><\/p><\/div>\n<\/p><\/div>\n

Y con el pie de p\u00e1gina tengo la p\u00e1gina de art\u00edculo del blog completa:<\/p>\n

\n\n\n\n
Urls amigables modificando .htaccess<\/span><\/h2>\n\n\n\n
Una url del tipo post.php?post_id= no es lo m\u00e1s adecuado para el SEO, aunque peor ser\u00eda si en vez la url que inclumos en la base de datos despu\u00e9s del id pusi\u00e9ramos un n\u00famero.  Para el SEO es mejor que las palabras clave est\u00e9n m\u00e1s cerca del nombre de dominio. Lo que buscamos es una url como \u00e9sta:<\/p>\n\n\n\n
https:\/\/aprendizajeprofundo.es\/aproximacion-verdadera-inteligencia-artificial<\/a><\/p>\n\n\n\n
La buena noticia es que contamos con el fichero .htaccess que permite configurar en un servidor Apache directivas de configuraci\u00f3n. En nuestro caso conseguimos escribiendo en dicho fichero:<\/p>\n\n\n\n
Options +FollowSymLinksRewriteEngine on
RewriteRule ^([0-9a-zA-Z-]+)$ post.php?post_id=$1RewriteRule ^([0-9a-zA-Z-]+).php $1.php<\/p><\/pre>\n
Es importante el orden de las dos regla RewriteRule, ya que la segunda sobreescribe la primera. Si el orden estuviera cambiado no podr\u00edamos ejecutar ficheros .php como contacto.php.<\/p>\n
P\u00e1gina de art\u00edculos<\/span><\/h2>\n
Vamos a crear una p\u00e1gina que lea la base de datos de posts y los presente con la foto, el t\u00edtulo, el autor, la fecha, la categor\u00eda y un resumen. Cada art\u00edculo tendr\u00e1 un bot\u00f3n que dar\u00e1 acceso al contenido completo. La gracia de esta p\u00e1gina est\u00e1 en que se actualizar\u00e1 sola cada vez que a\u00f1adamos un art\u00edculo a la base de datos.<\/p>\n
C\u00f3mo queremos obtener el nombre del autor que est\u00e1 en la tabla usuarios el SELECT lo vamos a realizar uniendo la tabla posts<\/em> con la de usuarios<\/em> a trav\u00e9s del campo usuario<\/em> en usuarios<\/em> y el campo author<\/em> en posts<\/em>. Los resultados los queremos en orden descendente para tener primero los art\u00edculos m\u00e1s recientes.<\/p>\n
session_start();
require_once 'conectar.php';<\/p>
$sql = \"SELECT * FROM usuarios INNER JOIN posts ON usuarios.usuario = posts.author ORDER BY posts.id DESC\";<\/p>
$statement = $db->prepare($sql);$statement->execute();<\/p>
while ($fila = $statement->fetch()) {<\/p>
$filas[] = array(\"author\" => $fila['author'],\"date\" => $fila['date'],\"url\" => $fila['url'],\"title\" => $fila['title'],\"excerpt\" => $fila['excerpt'],\"featured_img\" => $fila['featured_img'],\"category\" => $fila['category'],\"nombre\" => $fila['nombre']);}<\/p>
?><\/p><\/pre>\n
Para presentar los resultados utilizamos un bucle for<\/em> para recorrer el array $filas[] donde hemos almacenado el contenido de la base de datos.<\/p>\n
               $i < sizeof($filas);$i++) {$d = \"assets\/img\/blog\/\";$fichero_foto = $d . $filas[$i]['featured_img'];?><\/p>
            
                     alt=\"Foto del art\u00edculo\"><\/p>                
\", \"\", str_replace(\"\", \"\", $filas[$i]['title'])); ?><\/span><\/h3>                                                                                <\/div>        <\/div><\/div><\/pre>\n
\"P\u00e1gina<\/a><\/figure>\n
No termina de convencerme el dise\u00f1o por lo que voy a hacer uno alternativo. Cambio el orden de los elementos, pensando tambi\u00e9n en lo m\u00e1s adecuado para la versi\u00f3n m\u00f3vil. Pongo primero el t\u00edtulo y le pongo el color destacado. Luego el autor del art\u00edculo y la fecha, la foto  y para terminar la categor\u00eda con el resumen. Elimino el bot\u00f3n leer m\u00e1s y hago pulsables el t\u00edtulo, la foto y el resumen. Esto es importante en la versi\u00f3n m\u00f3vil, que hab\u00eda que bajar bastante por la pantalla para pulsar el bot\u00f3n y ponerlo m\u00e1s arriba no quedaba bien en el dise\u00f1o. Tambi\u00e9n pensando en la versi\u00f3n m\u00f3vil pongo un borde que rodea todo lo relacionado con el mismo art\u00edculo.<\/p>\n
\"\"<\/a>
En el m\u00f3vil no se ver\u00eda todo en una pantalla; pero se puede acceder al primer art\u00edculo pulsando sobre el mismo.<\/figcaption><\/figure>\n
\n
\"\"<\/a><\/figure>\n<\/div>\n
El c\u00f3digo ser\u00eda:<\/p>\n
\n\n\n\n
Secci\u00f3n de blog de la portada<\/span><\/h2>\n\n\n\n
En la portada mostr\u00e1bamos el primer art\u00edculo que tuvimos en el blog y adem\u00e1s esta puesto directamente. Lo suyo es que se lea desde la base de datos y vaya cambiando cuando se publica un art\u00edculo nuevo. Vamos aprovechar para mejorar el formato y a\u00f1adir un segundo art\u00edculo. Vamos a mostrar en la portada los dos \u00faltimos art\u00edculos que se han publicado en el blog.<\/p>\n\n\n\n
Al principio de index.php realizamos una consulta a la base de datos. Usamos LIMIT 2 para que solamente carguemos los dos \u00faltimos registros. Si tuvi\u00e9ramos muchos art\u00edculos no tendr\u00eda sentido cargar toda la base de datos para solamente usar dos art\u00edculos.<\/p>\n\n\n\n
require_once 'conectar.php';<\/p>
$sql = \"SELECT  *  FROM usuarios INNER JOIN posts ON usuarios.usuario = posts.author ORDER BY posts.id DESC LIMIT 2\";<\/p>
$statement = $db->prepare($sql);$statement->execute();<\/p>
while ($fila = $statement->fetch()) {<\/p>
$filas[] = array(\"author\" => $fila['author'],\"date\" => $fila['date'],\"url\" => $fila['url'],\"title\" => $fila['title'],\"excerpt\" => $fila['excerpt'],\"featured_img\" => $fila['featured_img'],\"category\" => $fila['category'],\"nombre\" => $fila['nombre']);}$d = \"assets\/img\/blog\/\";<\/p>
?><\/p><\/pre>\n
La secci\u00f3n de blog quedar\u00eda as\u00ed :<\/p>\n
\n
\n    \n\n<\/section>\n\n<\/pre>\n
Adem\u00e1s del bot\u00f3n leer m\u00e1s, se puede pulsar la foto y el resumen para acceder al art\u00edculo. Por accesibilidad<\/a> en el alt de las im\u00e1genes se pone autom\u00e1ticamente el t\u00edtulo del art\u00edculo.<\/p>\n
Para darle formato uso el siguiente css:<\/p>\n
\/*===========================05.BLOG css===========================*\/
.blog-section {background: #F5F5F5;}<\/p>
.blog-section .single-blog {position: relative;margin-bottom: 30px;}<\/p>
.blog-section .single-blog .image img {width: 100%;}<\/p>
.blog-section .single-blog .content {position: relative;width: calc(100% - 20px);margin: -60px auto auto;z-index: 2;background: #fff;padding: 30px;}<\/p>
@media only screen and (min-width: 768px) and (max-width: 991px) {.blog-section .single-blog .content {padding: 30px 20px;}.featured_img{width: 300px;}<\/p>
}<\/p>
.blog-section .single-blog .content h5 a {font-weight: 900;margin-bottom: 15px;color: #01012C;}<\/p>
.blog-section .single-blog .content h5 a:hover {color: #DB0EB7;}<\/p>
.blog-section .single-blog .content p {font-size: 16px;line-height: 26px;margin-bottom: 18px;}<\/p>
.blog-section .single-blog .content a {font-size: 18px;color: white;}<\/p>
.blog-section .single-blog .content a:hover {color: #DB0EB7;}<\/p><\/pre>\n
En la web quedar\u00eda as\u00ed:<\/p>\n
\"Blog<\/a><\/figure>\n
En el m\u00f3vil se ver\u00eda as\u00ed:<\/p>\n
\n
\"Blog<\/a><\/figure>\n<\/div>\n
PageSpeed Insights de Aprendizaje Profundo<\/span><\/h2>\n
Cuando empec\u00e9 el proyecto hice una an\u00e1lisis de rendimiento<\/a> que obtuvo una puntuaci\u00f3n alta. Tras a\u00f1adir c\u00f3digo PHP y acceder a la base de datos para el blog es previsible que el rendimiento haya empeorado, por lo que vamos a medirlo de nuevo.<\/p>\n
En el m\u00f3vil llegamos a tener 90 puntos y ahora hemos bajado a 82, hemos bajado 8 puntos; pero sigue siendo una buena puntuaci\u00f3n:<\/p>\n
\"\"<\/a><\/figure>\n
En escritorio part\u00edamos de 98 puntos, una cifra espectacular que pr\u00e1cticamente he conseguido mantener ya que la puntuaci\u00f3n actual es 97:<\/p>\n
\"\"<\/a><\/figure>\n
Tambi\u00e9n hemos ido realizando mejoras de usabilidad y accesibilidad que no se reflejan en esta herraminta.<\/p>\n
Resumen final<\/span><\/h2>\n
Desde que hicimos la web est\u00e1tica<\/a>, hemos ido realizando cambios en la web que resumo a continuaci\u00f3n.<\/p>\n
En el art\u00edculo Formulario PHP<\/a> realic\u00e9 las siguientes tareas:<\/p>\n