Ticker

6/recent/ticker-posts

Integrando Bootstrap 5 a nuestro proyecto base Front End en CodeIgniter 4

Hadsonpar septiembre 30, 2024

Continuando con la serie de tutoriales prácticos acerca del desarrollo de proyectos web haciendo uso del Framework de CodeIgniter en su versión 4, en este tutorial integraremos Bootstrap 5 a nuestro proyecto base FrontEnd.

Requisitos:

  1. Apache 2.4.58 (Win64)
  2. OpenSSL 3.1.3 
  3. PHP 8.1.25
  4. phpMyAdmin 5.2.1
  5. CodeIgniter 4
  6. XAMPP Control Panel v3.3.0
  7. Visual Studio Code
  8. HTML y CSS


Lo que veremos en este tutorial:

  1. Crear las funciones en el Controller.
  2. Configurar el enrutador y ruta base del proyecto.
  3. Crear directorios para los archivos Bootstrap.
  4. Descargar Bootstrap v5.1 y Bootstrap Icons v1.11
  5. Personalizar los archivos Front End.
  6. Crear los archivos y desarrollar las Views.
  7. Conclusiones y referencias.


1. Crear las funciones en el Controller.

Para este proyecto te sugiero descargar o clonar de GitHub la fuente ci4_base_project_front_end con relación al proyecto realizado en el tutorial base o patron de para sitios web Front-End "Desarrollando nuestro proyecto base Front End en CodeIgniter 4", esté proyecto cuenta con todas las configuraciones básicas y listas para inciar con la programación de un sitio web Front-End. Seguidamente, asumiento la descarga o clonación del reposotirio, remplazamos con el siguientes nombre al proyecto para iniciar el desarrollo de este tutorial ..ci4_bootstrap5_base_project_front_end

Desde el Controller (controlador) Home de nuestro proyecto ..ci4_bootstrap5_base_project_front_end agregamos las funciones (en caso no decidiste descargar o clonar el código de GitHub) como index, about, services, projects y contact, que (retornan las return view('pages\public\VIEWs', $this->data);) se encargarán de enviar los datos (se envian los datos page_title y page_description) a las Views del Front-End.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        $this->data['page_title'] = "Home";
        $this->data['page_description'] = "Page home";
        return view('pages\public\home', $this->data);
    }

    public function about()
    {
        $this->data['page_title'] = "About";
        $this->data['page_description'] = "Page about";
        return view('pages\public\about', $this->data);
    }

    public function services()
    {
        $this->data['page_title'] = "Services";
        $this->data['page_description'] = "Page Services";
        return view('pages\public\services', $this->data);
    }

    public function projects()
    {
        $this->data['page_title'] = "Projects";
        $this->data['page_description'] = "Page projects";
        return view('pages\public\projects', $this->data);
    }

    public function contact()
    {
        $this->data['page_title'] = "Contact";
        $this->data['page_description'] = "Page contact";
        return view('pages\public\contact', $this->data);
    }
}


2. Configurar el enrutador y ruta base del proyecto.

Desde el archivo Routes.phpp bicado en la ruta ..\ci4_bootstrap5_base_project_front_end\app\Config se debe agregar la siguiente ruta: $routes->get('/', 'Home::index'); para referenciar a las vistas. Además, se debe agregar la URL para el proyecto, ubicar el archivo App.php en la ruta ..\ci4_b5_base_project_front_end\app\Config y gregar la ruta base public string $baseURL = 'http://localhost/ci4_bootstrap5_base_project_front_end/';

Para publicar el sitio web em un dominio se de cambiar la ruta local ('http://localhost/ci4_bootstrap5_base_project_front_end/') por la url del dominio.


3. Crear directorios para los archivos personalizados y Bootstrap.

En el directorio principal de nombre public que por defecto trae el Framework CodeIgniter 4, se crea el directorio assets, seguidamente se crean los sub directorios css, images, js y vendor:

..\ci4_b5_base_project_front_end\app\Views\assets
..\ci4_b5_base_project_front_end\app\Views\assets\css
..\ci4_b5_base_project_front_end\app\Views\assets\img
..\ci4_b5_base_project_front_end\app\Views\assets\js
..\ci4_b5_base_project_front_end\app\Views\assets\vendors

Los directorios ..\assets\css, \assets\img y ssets\js corresponde a directorios que contendrán los achivos propiamente del sitio web teniendo en cuenta el modelo de negocio o estilo del sitio web, por ejemplo, para este tutorial aplicaremos nuestra plantilla DEV Hadsonpar Theme - Bootstrap 5 que esta orientado al nicho o modelo de negocio para programadores con IA.

Recuerda que para este tutorial debe existir los directorios layouts, pages, y el sub directorio pages\public creados en el tutorial acerca de Desarrollando nuestro proyecto base FrontEnd en CodeIgniter 4

..\ci4_b5_base_project_front_end\app\Views\layouts
..\ci4_b5_base_project_front_end\app\Views\pages\
..ci4_b5_base_project_front_end\app\Views\pages\public


4. Descargar Bootstrap v5.1 y Bootstrap Icons v1.11

Descargar el CSS y JS compilados de Bootstrap v5.1 desde la página oficial, también encontrará otras versiones  fuentes no compiladas o el tipos CDN via jsDelivr o simplemente podrás realizar la instalación haciendo uso de npm en base a los gestores de paquetes que obrece bootstrap.

Bootstrap Icons se puedes descargar del proyecto GitHub de Bootstrap twbs. Bootstrap Icons no ofrece más de 2000 iconos gratuita, de alta calidad y de código abierto inclúyendo formato SVG, sprites SVG o fuentes web y puede ser usado en cualquier proyecto.

Los archivos descargados CSS y JS de Bootstrap v5.1 deben ser copiados al sub directorio ..\assets\vendors

5. Personalizar los arvhivos Front End.

Para este tutorial sugiero descargar la plantilla DEV Hadsonpar Theme - Bootstrap 5 para programadores con IA, los archivos debe ser distribuidos o copiados  ..\assets\css, ..\assets\img y
..\assets\js. Revisemos la estructura y contenido de la plantilla dscargada:

La plantilla descargada depende de bootstrap, bootstrap-icons y aos


El directorio o carpeta vendor normalmente están creadas para contener los Frameworks, liberias o dependencias de terceros que el sitio web requiere.

6. Crear los archivos y desarrollar las Views.


En el directorio ..ci4_bootstrap_base_project_front_end\app\Views\pages\public creamos los ARCHIVOS PHP para generar las vistas del Front-End:

..ci4_base_project_front_end\app\Views\pages\public\home.php
..ci4_base_project_front_end\app\Views\pages\public\about.php
..ci4_base_project_front_end\app\Views\pages\public\services.php
..ci4_base_project_front_end\app\Views\pages\public\projects.php
..ci4_base_project_front_end\app\Views\pages\public\contact.php




Seguidamente agregamos (desarrollo) el siguiente bloque de código en la sección renderSection para mostrar el contenido de cada vista (página) del Front-End:

7. Conclusiones y Referencias.

Conclusiones.

En este tutorial descargamos Bootstrap 5 que es el Framework que ofrece nuevas características y actualizaciones para crear sitios web más personalizados que incluye Bootstrap Icons. Bootstrap permite crear páginas web responsives que se adaptan a diferentes tipos de pantallas, mejorando la experiencia de usuario. Asimos, en este tutorial integramos manualmente Bootstrap 5 a nuestro proyecto base Front End en CodeIgniter 4.


Referencias.


 Disponible para descargar o clonar desde: 


¡Que la innovación sea tu próximo aliado!

Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios