https://codeigniter4.github.io/userguide/outgoing/view_layouts.html
Pero nosotros vamos a realizarlo de otra forma. Utilizaremos un helper para cargar los layouts y asi poder ir separando nuestro código en diferentes páginas y poder ir reutilizandolo.
Partimos de una estructura de codeigniter 4 limpia donde dentro del directorio Views creamos un directorio layouts y dentro un fichero llamado ly_index.php y otro fichero en el directorio Views llamado index.php, la estructura quedará de la siguiente forma:
Dentro del fichero views/layouts/ly_index.php copiamos el contenido de este fichero https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/. Recordar que teneis que bajaros el framework de bootstrap o cambiar el css y js de bootstrap que tiene esta página por un CDN via jsDelivr
Os dejo el html completo en https://github.com/depruebas/CI4-Layouts/blob/master/public/index-maqueta.html para que lo podais copiar.
De este fichero que acabamos de crear extraemos código que va entre las etiquetas main
Y lo ponemos en el fichero index.php que acabamos de crear. En lugar del código main en el fichero ly_index.php escribimos el siguiente código
?php echo $content; ?
Ahora vamos a crear un nuevo fichero en el directorio helpers llamado Layout_helper.php dentro ponemos el siguiente código
function renderView(string $layout, string $view = '', array $options = [], array $data = [])
{
return view(
'layouts/' . $layout,
[
'content' => view($view, $data),
'options' => $options
],
);
}
La función renderView será la encargada de cargar las páginas solicitadas. Como parámetros le pasaremos el nombre del fichero de layout que queremos cargar, sin extensión php, la vista (también sin extensión php), las opciones que es un array que podremos ir poniendo cosas como por ejemplo el titulo de la página y como último parámetro un array con los datos a procesar de la página como un post, listados, etc. Esto lo vamos a ver ahora.
Una vez creado el helper vamos a modificar el controlador Home que es el que viene por defecto y tenemos lo siguiente
public function index()
{
return view('welcome_message');
}
Y cambiamos este código por el siguiente:
public function index()
{
$options = [
'title' => 'Soy el titulo de la página',
'css' => '/css/style.css',
];
return renderView('ly_index', 'index', $options);
}
Lo hace este cambio es llamar a la nueva función renderView pasandole el nombre del layout (ly_index) que queremos cargar, la página que se carga dentro del layout (index) y las opciones como el título de la página y un archivo css. En el archivo del layout tendremos que modificar el título y el css para que acepte los parámetros que le pasamos. Lo dejaremos de la siguiente forma:
Ahora solo nos queda incorporar el helper Layout en el fichero BaseController.php en el directorio Controllers para que se cargue a iniciar la aplicación y siempre este disponible.
protected $helpers = ['Layout'];
Y con esto hemos terminado la creación de layouts para codeigniter 4.
Por último y para darle un toque mas reutilizable vamos a sacar el codigo de la barra de navegación y del pie de página y los pondremos en dos archivos que vamos a crear dentro de un nuevo directorio.
Dentro del directorio Views creamos un nuevo directorio llamado includes y dentro dos paginas llamas nav-bar.php y footer.php. En el fichero nav-bar.php ponemos todo lo que esta entre las etiquetas nav y en su lugar poner el siguiente código
?php require_once dirname( dirname( dirname(__FILE__))) . "/Views/includes/nav-bar.php"; ?>
Y en el fichero footer.php ponemos todo lo que está entre las etiquetas footer y en su lugar ponemos
?php require_once dirname( dirname( dirname(__FILE__))) . "/Views/includes/footer.php"; ?>
Todo el código lo tenéis en el github
https://github.com/depruebas/CI4-Layouts
Y esto es todo, y feliz programming
Saludos
Alex.
Si te ha gustado el artículo compartelo en:
