Publicidad

Layouts en Codeigniter 4


Por Alex el 13/08/2021 , Comentar el artículo

Comparte este artículo:        




La creación de layouts en Codeigniter 4 al igual que en el 3 no viene muy trabajada y los tenemos que crear cada uno de la forma que más nos guste. Cómo hacerlo de forma sencilla y genérica …


Esto es lo que dice Codeigniter 4 oficialmente sobre las layouts, como crear marcos y no repetir código innecesario trabajando con extend y Sections.

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:

Estructura del directorio Views

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

Código 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; ?

Código entre las etiquetas main - content

Ahora vamos a crear un nuevo fichero en el directorio helpers llamado Layout_helper.php dentro ponemos el siguiente codigo

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 ultimo parametro 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 pagina 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 titulo y el css para que acepte los parámetros que le pasamos. Lo dejaremos de la siguiente forma:

Opciones en el fichero layout

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 esta entre las etiquestas footer y en su lugar ponemos

?php require_once  dirname( dirname( dirname(__FILE__))) . "/Views/includes/footer.php"; ?>

Codigo final de la pagina del layout

Todo el código lo teneis en el github
https://github.com/depruebas/layouts-codeigniter4

Y esto es todo, y feliz programming
Saludos
Alex.



Si te ha gustado el artículo compartelo en:      




Añadir un comentarios:

Nombre:
Email: (no se publica el email)




SIGUENOS EN

ARCHIVO

Publicidad

.