Cómo Reutilizar Código HTML Con PHP: Modulariza tu Sitio Web con Includes

¿que es la modularicacion?

La modularización es un concepto clave en desarrollo de software que se refiere a la práctica de dividir un sistema o una aplicación en partes más pequeñas, llamadas módulos, que son independientes y reutilizables. Cada módulo suele tener una responsabilidad específica o cumplir una función particular, lo que facilita el desarrollo, el mantenimiento y la escalabilidad del software.

Características de la Modularización:

1. Independencia: Cada módulo opera de manera independiente y tiene un propósito claro. Esto significa que un cambio en un módulo no debería afectar directamente a otros módulos, siempre y cuando se mantengan las interfaces entre ellos.

2. Reutilización: Los módulos pueden ser reutilizados en diferentes partes de una aplicación o incluso en diferentes proyectos. Por ejemplo, un módulo que maneja la autenticación de usuarios puede ser utilizado tanto en un sitio web como en una aplicación móvil.

3. Mantenimiento: La modularización facilita la localización y corrección de errores, así como la actualización o mejora de partes específicas del sistema sin afectar a todo el sistema.

4. Escalabilidad: Al dividir una aplicación en módulos, es más fácil escalar y extender el sistema agregando nuevos módulos o mejorando los existentes.

Ejemplo:

index.php

                    
<!DOCTYPE html>
<html lang="es">

<head>
    <meta name="google-site-verification" content="DsOjq9_jjPV9TUCVRa_rRLW6Zx68lmSZm0PhbG-Hz7Q" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MemoCode</title>
</head>

<body>
    <header class="cabecera">
        <div>
            <img class="imagen-logo" src="/memocode/img/memocode.png" alt="">
        </div>
        <div>
            <h1 class="titulo"> <span class="titulo-span">Memo</span><span class="titulo-guion"></span>Code</h1>
            <h2 class="titulo2">MemoCode</h2>
        </div>
    </header>

    <nav class="menu">
        <?php include "include/menu.php"; ?>
    </nav>

    <br>
    <br>

    <footer class="footer">
        <?php include "include/footer.php"; ?>
    </footer>

</body>

</html>

Detalles del codigo

Dentro de la etiqueta <nav class="menu"> se agrega el codigo php:

                    
<nav class="menu">
    <?php include "include/menu.php"; ?>
</nav>

Dentro de la etiqueta <footer class="footer"> se agrega el codigo php:

                    
<footer class="footer">
    <?php include "include/footer.php"; ?>
</footer>

Estos codigos php se enlazan con el archivo destino el cual muestran el codigo html que contienen.

footer.php

                    
<div class="pie-superior">
    <div class="pie1">
        <div class="pie1-marca">
            <div><img class="pie1-img" src="/img/memocode.png" alt=""></div>
            <div><span class="pie1-span1">MemoCode</span></div>
        </div>
        <div class="pie1-botones">
            <div><a href="https://www.youtube.com/@MemoCode" target="_blank"><img class="pie1-boton"
                        src="/img/youtube.png" alt=""></a></div>
            <div><a href="" target=""><img
                        class="pie1-boton" src="/img/instagram.png" alt=""></a></div>
            <div><a href="https://web.facebook.com/memocode.soft/?_rdc=1&_rdr" target="_blank"><img
                        class="pie1-boton" src="/img/facebook.png" alt=""></a></div>
        </div>
    </div>
    <div class="pie2">
        <div><span class="pie2-span2">MemoCode</span></div>
        <div><a href="/recursos/"><span class="info-span">recursos utilizados</span></a></div>
        <div><a href="/contacto/"><span class="info-span">contacto</span></a></div>
        <div><a href="/"><span class="info-span">MemoCode</span></a></div>
    </div>
</div>
<div class="pie-inferior">
    <small class="autor">© 2030 - MemoCode - Todos los derechos reservados</small>
</div>

menu.php

                    
<div><a class="boton" href="/">Inicio</a></div>
<div><a class="boton" href="/secciones/html">HTML</a></div>
<div><a class="boton" href="/secciones/css">CSS</a></div>

Al visualizarlo en la pagina lo que veras es en el index.php incrustados los codigos html obtenidos de las rutas incrustadas en el include dando asi reciclaje al codigo o modularizando este mismo.

Descargar proyecto Tutorial youtube