Hice un blog con PHP y te lo muestro

Tal como prometí en este post armé este artículo con el fin de explicar en forma bien técnica como está hecho este blog con php. Así que, si estás dando tus primeros pasos en desarrollo web o te gusta codear, seguramente te vas a entretener con lo que vas a encontrar a continuación. Antes que nada, disclaimer: está no es la mejor, tampoco la única manera y menos la forma más "moderna" de implementar un blog. Si ya estás inmerso en el desarrollo web o conoces frameworks como React o Angular, nada de lo que encuentres acá te va a aportar mucho. Dicho esto, podemos darle inicio a la explicación.

Organización de la información y diseño de la base de datos

Para iniciar hay que saber que utilicé PHP y MySQL como tecnologías base para armar este sitio. En el cual PHP se encarga de acceder a la base de datos, leer las tablas de posts y contenidos para imprimir todo en un template HTML. En lo que respecta a la base, la organización consiste en una tabla de Autores, otra de Categorías, una tercera tabla que lista los Artículos y tiene las referencias a las otras tablas. Por último, una última tabla de Contenidos, que almacena los textos e imágenes de cada artículo.

La tabla artículos (en referencia a los posts) es la que contiene la lista de todas las entradas del sitio. Se encuentra separada del contenido de cada artículo para que cada vez que se quiera listar, ordenar o buscar entre el histórico no haya que cargar todo el texto e imágenes asociado. Cuando se solicite acceder a un post en particular ahí se referencian las tablas Artículos y Contenidos, por medio del idPost, de forma que se traiga todo el contenido asociado a ese identificador. Las restantes dos tablas se consultan cuando es necesario acceder a detalles de categoría o autor por medio de las referencias a id_category y id_author. A continuación, se puede ver un diagrama de entidades que ayuda a entender mejor las relaciones.

Diagrama de entidades de la base de datos del blog.

Estructura del proyecto

Teniendo presentado el modelo de la base de datos vamos a ver un poco como recuperar y presentar los datos almacenados. Antes de meternos de lleno con la lectura de la base de datos repasemos la estructura del blog. Como cualquier página clásica, en su directorio raíz vamos a encontrar los archivos de las diferentes paginas o secciones. En este caso en vez de poseer archivos .html no encontraremos con archivos .php. Uno por cada vista, por ejemplo: una mainpage y otra para los artículos, la información a mostrarse en cada una se rellenará segun corresponda. Desde el directorio raíz encontraremos subdirectorios, los típicos /css, /images, /js y un /service que contiene más archivos php, pero que a diferencia de los archivos de vistas estos son los que hacen la operatoria de datos.

En el directorio servicios definí dos archivos, uno llamado blog.php que se encarga de generar de html "dinámicos" y un dao.php que se encarga del acceso a la base de datos. El archivo llamado blog es bastante tonto, básicamente se encarga de generar las partes más repetitivas de las vistas, es decir los tags head, header, footers, etc. De esta forma el html presente en los archivos de las vistas son más pequeños y fáciles de manejar. Como se puede ver en la imagen ilustrativa el archivo index no contiene el html directo, sino que importo el “servicio” que imprime bloques de html y hago una redirección. Esto es para no quedar atado a que el index sea el archivo de la pagina inicial, sino que este permita apuntar a diferentes paginas según la situación. Por ejemplo: un refactor de la mainpage o una página temporal.

Archivos y organización del proyecto.

Acceso a la base de datos y disposición de la información

El archivo dao.php tiene las funciones que permiten la lectura en base de datos y obtención de información. Por lo tanto, referenciaremos este archivo e invocaremos estas funciones para completar el html en las vistas con la información persistida. Para evitar tener un código gigante e insostenible, abstraemos cada tipo de consulta en diferentes funciones, de forma que invocaremos cada una según la página en la que quisieramos invocar.

Por ejemplo, en la página principal queremos listar todos los artículos disponibles pero sin mostrar su contenido. Es decir, obtener datos para mostrar una previsualizacion del contenido de cada uno. Para esto existe la función getAllBlogPost() la cual contendría una consulta a la base que trae los títulos de los artículos, la fecha para ordenarlos y la imagen de portada. También se hacen join con las tablas de autores y categorías para obtener el nombre del creador del articulo y la categoría o tema del que se habla en el.

<?php

    /* Metodo para listar todos los articulos de la base */
    function getAllBlogPost(){
        $con = openConnection();
        $con->query("SET NAMES 'utf8'");
        $result = $con->query("SELECT
            post.id_post,
            post.title,
            post.date,
            aut.name_author AS author,
            cat.name_category AS category,
            post.extract,
            post.image
        FROM blog_posts AS post, blog_categories AS cat, blog_authors AS aut
        WHERE cat.id_category = post.id_category
        AND aut.id_author = post.id_author
        ORDER BY post.id_post DESC;");
        mysqli_close($con);
        return $result;
    }
  
    /* Metodo para obtener todo el contenido asociado a un articulo */
    function getContentBy($idPost){
        $con = openConnection();
        $con->query("SET NAMES 'utf8'");
        $result = $con->query("SELECT
            content,
            tag
        FROM blog_post_content
        WHERE idPost = " . $idPost . "
        ORDER BY idPost DESC;");
        mysqli_close($con);
        return $result;
    }
  
?>

Restaría en la mainpage invocar este método, el cual nos va a devolver una colección de resultados en forma de array. En la vista simplemente hay que iterar esta colección y extraer cada uno de los datos para imprimirlos en el HTML, de forma similar a como esta:

<!-- CONTAINER -->
<div class="container">
    <section class="articles">
    <?php
        require_once('./service/dao.php');
        $posts = getAllBlogPost();
        foreach($posts as $post):
    ?>
        <div class="article">
            <div class="article-image">
                <img src="<?php echo $post['image'] ?>">
            </div>

            <div class="preview">
                <p><?php echo $post['title'] ?></p>
                <p><?php echo $post['date'] ?></p>
                <p><?php echo $post['extract'] ?></p>
                <a href="article?post=<?php echo $post['id_post'] ?>"><p>Seguir leyendo...</p></a>
            </div>
        </div>
    <?php endforeach; ?>
    </section>

</div>
<!-- END CONTAINER -->

Uso del método GET para capturar parámetros y armar la visualización de artículos

Para cargar la vista de un post específico con su correspondiente contenido lo importante es obtener el numero identificador de su registro para poder filtrar la información contenida en la tabla Contenidos. En este caso desde la mainpage se navega a la pagina del post apuntando al recurso "article" agregándole como parámetro de la url el id. Es decir, se genera la siguiente solicitud al servidor [GET] http://url-del-blog.com/articulo?post=1234, de la cual vamos a obtener el parámetro "post" y guardarlo en una variable de la siguiente forma: $idPost = $_GET['post']

Con el id 1234 capturado en el ejemplo se invoca, en dao.php, la funcióngetContentBy($idPost) el cual va a listar de la tabla Contenidos todos los elementos que estén relacionados al idPost. Como resultado obtendremos un array de registros que contendrán el texto o ubicación de archivos. En la vista del artículo iteraremos estos resultados y los imprimiremos en el html, validando el campo "tag", ya que este no indica si es un texto, un título, una imagen, etc.

<?php
require_once('./service/blog.php');
require_once('./service/dao.php');

$idPost = $_GET['post'];
?>

<!DOCTYPE html>
<html lang="en">
<head>
<?php echo generateMetadataWith('Simple Blog') ?>
</head>
<body>
<?php echo generateNavbar() ?>

    <div class="container">
        
        <article>

            <section class="content">
                <?php
                $content = getContentBy($idPost);
                while($row = mysqli_fetch_array($content)) {
                    if($row['tag'] == 'p') {
                        echo  "<p>" . $row["content"] . "</p>";
                    } else if($row['tag'] == 'h2') {
                        echo  "<h2>" . $row["content"] . "</h2>";
                    } else if($row['tag'] == 'img') {
                        echo  "<img src='" . $row["content"] . "'/>";
                    }
                }
                ?>
            </section>

        </article>

    </div>
    
    <?php echo generateFooter() ?>
</body>
</html>

Como se puede ver en el ejemplo de código, una vez obtenido el "idPost" y obtenida la información de la base de datos, la mecánica es la misma utilizada para la portada de la página. Basta con iterar los resultados, extraer los diferentes campos de datos, con la diferencia que se valida el campo tag que viene en el registro de la tabla Contenidos el cual nos permite saber si hay que imprimir un texto, un título o una imagen.

Conclusión y recursos

Realmente no hay mucho más para comentar, esto es un vistazo rápido pero abarcando lo más importante de la implementación que hice para generar el blog. El resto es jugar agregando e imprimiendo más datos, como por ejemplo los tags y agregarle estilos personalizados. Como dije, seguramente hay mejores formas de implementarlo (siempre las hay) incluso dentro del mundo de php, pero es la forma que encontré para hacerlo gratis. Si te interesa chusmear un poco más, empaparte, aprender e incluso aportar, dejé el código fuente en este repositorio de Github. Solamente restaría generar una vista tipo administrador para postear de forma sencilla, pero cuando eso lo avance estaré actualizando.

Espero que la información te haya servido si es que estás metiéndote en este mundo del desarrollo web. En caso contrario, espero al menos resultarte interesante y si tenés propuestas de mejora pueden contactarme por correo electrónico o hablarme directamente desde Telegram. Sino también abriendo una rama en el repositorio público que dejé más arriba. Sin más que agregar, les dejo saludos y nos leemos en otra publicación.