encabezado y pie de p√°gina

Poner encabezado y pie de p√°gina en CodeIgniter 4 – Tercera Parte

Contin√ļamos con este tutorial para autodidactas de Codeigniter 4. Retomando nuestra p√°gina ¬ęmiapp.php¬Ľ, vamos darle m√°s estructura colocandole un encabezado y un pie de p√°gina en CodeIgniter 4.

Bueno, en este nivel vamos a adicionar algo de CSS, algo sencillo, sin complicarnos. Pero antes comprenadmos algo de la estructuración que le vamos a adicionar a nuestra página:

                                                   ENCABEZADO (head)                                                 
                                                                  ENCABEZAMIENTO (header)                         
                                                                               CUERPO (body)                                                    
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†¬† PIE DE P√ĀGINA (footer)¬†¬†¬†¬†¬†¬† ¬† ¬†¬†¬† ¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†

Generalmente las páginas web ubican en su encabezado información de formateo, como el tipo de caracteres a emplear en la página, así como meta-tags y también la integración de más funciones, tales como los estilos CSS.

El encabezado ordena el men√ļ de navegaci√≥n, un logo, un campo de b√ļsqueda o un mapa de sitio.

En el cuerpo, el contenido del tema que esté tratando.

En el pie de página casi siempre se ponen hipervínculos a otras plataformas relacionadas, tales como redes sociales, información de contacto, alguna dirección física, bueno, cualquier otra información general del sitio web o de la aplicación.

Poner un encabezado y pie en CodeIgniter


Dandole continuidad a nuestra p√°gina ¬ęmiapp.php¬ę, ella puede quedar parecida a la siguiente:

 

Entonces el archivo miapp.php viene siendo nuestro contenido.

El encabezado y el pie de página deben quedar en archivos por separados, así independizamos la edición del contenido, del resto de la estructura (si todo queda mezclado en un solo archivo, nos la pasaríamos modificando el header y el footer en todos los contenidos).

Esta estructura son las Vistas, entonces, comencemos por el encabezado. Lo podemos llamar ¬ęhead.php¬ę:

<html>
<head>
    <link rel="stylesheet" href="<?php echo base_url('public/estilos.css');?>" type="text/css">
</head>

El encabezamiento ¬ęencabezado.php¬ę:

<body>
<header>
<div class="encabezado">
</div>
</header>
<br><br><br><br><br>

El body ¬ęmiapp.php¬ę:

<b>NOMBRES</b>
<?php
echo "Hola Mundo ";
echo $nombre." ".$apellido;
?>

Y el footer ¬ępiedepagina.php¬ę:

<footer class="pie">
<ul>
    <li><a href="aviso-privacidad.html">Aviso de privacidad</a></li>
    <li><a href="contacto.html">Contacto</a></li>
</ul>
</footer>
</body>
</html>

Bien, hemos terminado las Vistas. Seguimos con el Controlador. Retomamos el archivo ¬ęMiapp.php¬ę, y este es su c√≥digo:

<?php
namespace App\Controllers;

class Miapp extends BaseController
{
    public function index()
    {
        $datos1['nombre'] = 'Erwin Andrés';
        $datos1['apellido'] = 'Espitia Torres';
        echo view('head');
        echo view('encabezado');
        echo view('miapp', $datos1);
        echo view('piedepagina');
   }

}

?>

Y finalmente el CSS (estilos.css) con el que le damos formar y color al encabezado y al pie de p√°gina:

.encabezado{
    height: 80px;
    width: 100%;
    background-color: #ffce53; 
    position: fixed;
    top: 0;
}

.pie{
    background-color: #177ef6;
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
}

El archivo estilos.css es el √ļnico que debemos poner en la carpeta public de CodeIgniter.

Y ya tenemos nuestra p√°gina de pruebas lista.

 

< Segunda Parte     Cuarta Parte >


Valora este artículo:

Poner encabezado y pie de p√°gina en CodeIgniter 4
5,0 rating based on 12.345 ratings
Overall rating: 5 out of 5 based on 1 reviews.

 

Name
Email
Review Title
Rating
Review Content

 

Genial

★★★★★
‚Äú Lo que buscaba‚ÄĚ
- Joshep Rojas

 

Comparte esto en
Publicado en Desarrollo Web.