Las propiedades computadas en Vue.js son parecidas a las propiedades normales (o datos), pero con una diferencia importante: su valor depende de otras propiedades. Esto significa que si una de esas propiedades cambia, la propiedad computada se actualiza automáticamente. Son reactivas, así que no hace falta que tú las actualices manualmente, Vue lo hace por ti.
Ejemplo 1
Imagina que estás creando una pequeña calculadora para saber cuánto pagarás por un producto con IVA incluido. En lugar de hacer el cálculo manual o en una función cada vez que cambien los valores, puedes usar una propiedad computada que se actualice automáticamente cuando cambie el precio o el porcentaje del IVA. Así Vue se encarga de todo por ti, y tú solo te enfocas en mostrar el resultado.
<template>
<h1>Calcular IVA(Impuesto al Valor Agregado)</h1>
<label>Precio(sin IVA)</label>
<input type="number" placeholder="precio" v-model="precio">
<br>
<label>Porcentaje del IVA(Ingresar numero entero)</label>
<input type="number" placeholder="Porcentaje IVA" v-model="porcentajeIva">
<br>
<p><strong>Precio con IVA:</strong> {{ precioConIva }}</p>
</template>
<script setup>
import { ref, computed } from 'vue';
// Se define la propiedad `precio` como reactiva usando ref().
const precio = ref(0);
//Se define la propiedad `porcentajeIva` como reactiva usando ref().
const porcentajeIva = ref(0);
// La propiedad `precioConIva` es computed y recalcula su valor automáticamente
const precioConIva = computed(() => {
//Se calcula el impuesto multiplicando el precio por la division del `porcentajeIva` entre 100 para obtener el valor en decimal
const impuesto = precio.value*(porcentajeIva.value/100);
//El resultado del precio con el IVA incluido
const resultado = precio.value+impuesto;
return resultado; // Redondea a 2 decimales
});
</script>
Ejemplo 2
Supongamos que queremos calcular el promedio de tres notas: tareas, laboratorio y examen. Lo lógico sería sumar las tres y dividir entre 3, pero queremos que este promedio se actualice automáticamente cada vez que cambiemos alguna nota. Para eso, usamos una propiedad computada en Vue.js.
las propiedades computadas y los métodos se escriben de diferente manera pero ellos funcionan de diferente manera.
Métodos: Se ejecutan cuando son llamados, normalmente a través de un evento (como un clic o una acción del usuario). Esto significa que el cálculo o cambio de valor se hace de manera manual, ya que depende de que algo lo active.
En el ejemplo anterior, para obtener el promedio final, es necesario presionar el botón ‘Calcular Promedio’. Si no se ejecuta el método calcularPromedio(), no habrá ningún resultado. El promedio no se genera de forma automática, sino que requiere una acción del usuario para actualizarse.
Propiedades Computadas: Por otro lado, las propiedades computadas son dinámicas: se actualizan automáticamente cada vez que cambia alguna de las propiedades de las que dependen. Tomemos como ejemplo el cálculo del promedio: si cambiamos el valor de tareas, laboratorio o examen, el promedio se actualiza solo, sin necesidad de hacer clic en nada o llamar a una función. Vue se encarga de todo.
getters y setters en propiedades computadas
Normalmente, cuando usamos propiedades computadas en Vue, solo escribimos una función que devuelve un valor. Eso sería el getter. Pero también se puede agregar un setter, que nos permite actualizar datos cuando esa propiedad cambia.
En pocas palabras:
El getter sirve para mostrar un valor.
El setter sirve para cambiar otros valores cuando modificamos ese valor computado.
Ejemplo
Imagínate que tienes el nombre y el apellido por separado, pero quieres mostrar el nombre completo y, además, poder cambiarlo desde un solo campo. Con un get y un set, puedes hacer eso fácilmente: mostrar el nombre completo, y también actualizar el nombre y el apellido si alguien escribe un nuevo nombre completo.
<template>
<h1>App</h1>
</template>
<script setup>
import { ref, computed } from 'vue'
// Se definen dos propiedades reactivas usando ref()
const nombre = ref('Jose')
const apellido = ref('Ramirez')
// La propiedad `nombreCompleto` es un computed con getter y setter
const nombreCompleto = computed({
get() {
// El getter nos permite obtener el valor de la propiedad,
// en este caso, la concatenación de `nombre` y `apellido`
return nombre.value + ' ' + apellido.value
},
set(nuevoNombre) {
// Usamos la desestructuración de arrays para dividir `nuevoNombre`
// y asignarlo a `nombre` y `apellido`
[nombre.value, apellido.value] = nuevoNombre.split(' ')
}
})
// Mostramos el nombre completo usando los valores iniciales
console.log(nombreCompleto.value) // "Jose Ramirez"
// Se asigna un nuevo nombre completo
nombreCompleto.value = 'Maria Garcia'
// Se imprime el nuevo nombre completo después del cambio
console.log(nombreCompleto.value) // "Maria Garcia"
</script>
Conclusión
Las propiedades computadas con getters y setters nos permiten manejar de manera sencilla valores derivados y a la vez tener control sobre cómo modificarlos. Son una herramienta poderosa cuando necesitamos que los datos se sincronicen automáticamente sin tener que escribir lógica adicional. Además, facilitan la interacción con los usuarios, permitiendo actualizar y mostrar información sin perder la claridad y simplicidad en el código.
La reactividad en Vue.js es el mecanismo que permite que los datos y la interfaz de usuario se mantengan sincronizados automáticamente. Esto significa que cuando un valor cambia, todas las partes de la aplicación que dependen de él se actualizan sin necesidad de intervención manual.
En JavaScript puro, no hay una manera sencilla de detectar cambios en una variable a menos que se programe una función para monitorizar. Sin embargo, Vue.js nos facilita esto con ref() y reactive().
Declarando variables reactivas con ref()
Vue.js nos proporciona la función ref() para hacer que una variable simple (como un número, cadena o booleano) sea reactiva.
Ejemplo usando ref()
<template>
<h1>App</h1>
<input type="text" v-model="mensaje">
<p>{{mensaje}}</p>
</template>
<script setup>
import {ref} from 'vue';
const mensaje = ref('Aqui aparece el mensaje');
</script>
Explicacion
Enlazamos la variable mensaje usando v-model,esto nos permite que el valor que contenga el input sera el valor de la variable mensaje
<input type="text" v-model="mensaje">
en esta linea declaramos la variable mensaje y gracias a ref() es reactiva,
const mensaje = ref('Aqui aparece el mensaje');
Al ingresar texto en el input el valor de el mensaje cambia automáticamente,sin la necesidad de hacerlo manualmente a esto se le llama reactividad.
Ejemplo usando computed()
computed también es un tipo de reactividad,se usan para definir propiedades calculadas que dependen de otras propiedades reactivas,estas se actualizan automáticamente cuando los valores de las propiedades de las que dependen cambian por ejemplo
al declarar la variable resultado como computed() esta es reactiva y cambiara su valor cada vez que cambie el valor de numero1 o numero2,computed() memoriza el resultado y solo se vuelve a calcular cuando cambian sus dependencias.
como se puede observar, al calcular el resultado accedemos al valor de cada propiedad reactiva de la que este depende utilizando.value, esto se debe a que cuando declaramos numero1 y numero2 como ref(), vue.js crea un objeto con una sola propiedad,en este caso value, esta propiedad value es la que almacena el valor interna de la variable reactiva,por lo tanto para acceder o modificar el valor,se necesita usar .value.
Ejemplo usando watch()
watch() observa una variable reactiva y este ejecuta una función cuando su valor cambie,
<template>
<h1>App</h1>
<button @click="incrementarContador">Incrementar Contador</button>
<p>contador => {{contador}}</p>
</template>
<script setup>
import {ref,watch} from 'vue';
const contador = ref(0);
watch(contador,(nuevoValor,anteriorValor)=>{
console.log(`el valor del contador cambio de ${anteriorValor} a ${nuevoValor}`);
});
const incrementarContador = ()=>{
contador.value++;
};
</script>
Explicación
Se define contador como una variable reactiva:
const contador = ref(0);
Se usa watch(contador, (nuevoValor, anteriorValor) => {...}) para ejecutar una acción cada vez que contador cambie.
Dentro de watch(), nuevoValor almacena el valor actualizado y anteriorValor almacena el valor anterior. Estos valores solo existen dentro de watch().
Cada vez que se hace clic en el botón, el contador cambia y watch() se ejecuta.
Ejemplo 2 de watch()
<template>
<h1>App</h1>
<p>contador => {{contador}}</p>
</template>
<script setup>
import {ref,watch} from 'vue';
let contador = ref(0);
watch(contador,(nuevoValor,anteriorValor)=>{
console.log(`El valor del contador cambio de ${anteriorValor} a ${nuevoValor}`);
});
setInterval(() => {
contador.value++;
if(contador.value >= 10){
contador.value=0;
}
}, 1000);
</script>
Explicacion
con la función setInterval() se incrementa el valor del contador cada segundo y cuando el contador es igual o mayor que 10,se reinicia a 0,watch() registra los cambios en la consola.
watchEffect()
¿que es watchEffect()?
es similar a watch(),pero con la diferencia que no necesita especificar que variable reactiva quieres observar,se ejecuta inmediatamente y rastrea cualquier valor reactivo dentro de su función,entonces cada vez que una variable que hayamos declarado como reactiva dentro de su función este se ejecutara.
con las siguientes lineas, rastreamos el valor que ah cambiado sin especificarlo en el watch y cada vez que el valor del contador incremente,por ende este cambie disparar el watchEffect() y mostrara en consola un mensaje,describiendo el cambio.
watchEffect(() => { console.log(`El contador cambió de valor a: ${contador.value}`); });
con la funcion incrementar() incrementamos el valor del contador de a 1
No es mas que una modificación del anterior ejemplo,se crea un segundo contador que incrementa de a 2 y al igual que con el primer contador al cambiar de valor se ejecuta el watchEffect() automáticamente al cambiar los valores.
¿Cuándo usar watchEffect()?
Cuando quieres ejecutar código cada vez que cambie alguna dependencia sin declararlas manualmente.
Para operaciones como sincronizar datos, llamadas a APIs o manipular elementos del DOM.
Cuando necesitas que la función se ejecute inmediatamente al montarse el componente.
reactive()
reactive() es una función de Vue 3 que permite crear objetos reactivos. Es decir, convierte un objeto y todas sus propiedades en reactivas, de modo que cualquier cambio en ellas será detectado automáticamente por Vue. A diferencia de ref(), que se usa para valores únicos como números o cadenas, reactive() se usa cuando necesitamos manejar objetos completos con múltiples propiedades.
Vue.js simplifica la reactividad con ref(), computed(), watch()y reactive(), permitiendo que los datos y la interfaz de usuario se mantengan sincronizados automáticamente. Mientras que ref() convierte variables en reactivas, computed() permite crear valores derivados de manera eficiente, y watch() nos ayuda a reaccionar a cambios en los datos.
CodeIgniter 4 nos proporciona la posibilidad de definir las rutas de nuestra aplicación a nuestra conveniencia haciendo uso de marcadores a la hora de especificar una ruta. Esto permite enviar y recibir parámetros a través de la URL de manera controlada y segura.
Tipos de Rutas en CodeIgniter 4
CodeIgniter 4 cuenta con dos tipos principales de enrutamiento:
Enrutamiento de Ruta Definida: Permite definir rutas específicas que están enlazadas a métodos de controladores.
Enrutamiento Automático: Permite que el sistema determine la ruta basada en los segmentos de la URL automáticamente.
En este tutorial, nos enfocaremos en el Enrutamiento de Ruta Definida y el uso de marcadores.
Definir Rutas con Marcadores
Para definir una ruta en CodeIgniter 4, usamos el archivo Routes.php ubicado en el directorio app/Config. Aquí podemos crear una instancia de la clase RouteCollection ($routes) y definir nuestras rutas con marcadores.
Micontrolador::miMetodo/$1 define el controlador y método que manejará la solicitud, pasando el parámetro capturado.
miruta es la vista a la que queremos acceder.
(:num) es un marcador que indica que el parámetro es un número entero.
Ejemplo Práctico
Paso 1: Crear el Controlador
En el directorio app/Controllers, creamos un archivo Micontrolador.php:
<?php
//usamos el espacio de nombre Controllers
namespace App\Controllers;
class Micontrolador extends BaseController
{
//creamos un metodo que recibira un parametro en este caso $parametro.
public function miMetodo($parametro)
{
//creamos un array $data con el parametro recibido.
$data['parametro']=$aparametro;
//retornamos nuestra vista junto al array $data que creamos.
return view('miVista',$data);
}
}
Paso 2: Crear la Vista
En el directorio app/Views, creamos un archivo miVista.php:
<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter</title>
</head>
<body>
<h3>El parametro >
<?php
//imprimimos el parametro que recibimos desde nuestro controlador
echo $parametro;
?>
</h3>
</body>
</html>
public function miMetodo($p1,$p2)
{
//creamos un array $data con los dos parametros.
$data['p1']=$p1;
$data['p2']=$p2;
//retornamos nuestra vista junto al array $data que creamos.
return view('miVista',$data);
}
URL
http://localhost/ci/public/miruta/2/2
Tipos de Parámetros
Parámetros Alfabéticos
Pasar parámetro como cadena de caracteres alfabéticos seria de la siguiente forma
Es el marcador permite enviar múltiples parámetros y de distinto tipo a la vez, por ejemplo podríamos necesitar información de un producto por marca,color,tamaño de la siguiente forma
Podemos observar a la palabra producto como la ruta y lo que sigue después de la barra diagonal son los parámetros que recibirá el controlador abc/azul/mediano.
Por ejemplo crearemos una ruta que con el método :any procesaremos con nuestro controlador los parámetros recibidos para luego mostrarlos en la vista en el siguiente ejemplo.
Paso 1.
En nuestro controlador creamos el método showProducto()
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Micontrolador extends BaseController
{
public function showProducto($marca=false,$color=false,$tamano=false)
{
//Retornamos nuestra vista.
$data['marca']=$marca;
$data['color']=$color;
$data['tamano']=$tamano;
return view('miVista',$data);
}
}
?>
Obtendremos en nuestro navegador el siguiente resultado
Podríamos escribir la url de esta forma y igual funcionaria porque el marcador :any permite el envió de múltiples parámetros a la vez podrían ser 1,2 o 3 parámetros, permitiendo ademas que sean de diferente tipo, por ejemplo alfabéticos, alfanuméricos o enteros.
http://localhost/ci/public/producto/abc/123/456
Como podemos observar cuando escribimos las url en nuestro navegador luego de la palabra producto enviamos 3 parámetros separados por una barra diagonal “/” los cuales recibe nuestro controlador en el método showProducto() retornando la vista y los parámetro que le brindamos a través de la url
Pero y si solo le enviamos 2 parámetros de la siguiente manera?
http://localhost/ci/public/producto/abc/azul/
Obtendríamos el siguiente resultado en el navegador,porque al definir los parámetros como false en el método showProducto() podemos enviar 1,2 o 3 parámetros y nuestra aplicación seguirá funcionando
Prueba al enviar solo un parámetro
http://localhost/ci/public/producto/abc/
El resultado seria el siguiente
Como podemos observar funciona aunque solo enviemos un parámetro.
Lista de Argumentos de Longitud Variable
Se puede pasar una lista de argumentos dinámica, siendo que necesitemos pasar un numero indeterminado de parámetros a nuestra función.
modificando el método showProducto() de la forma
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Micontrolador extends BaseController
{
public function showProducto(...$parametros)
{
$data['parametros']=$parametros;
return view('miVista',$data);
}
}
?>
El enrutamiento es parte importante de una aplicación con CodeIgniter 4. ya que de esta manera el usuario tendrá acceso a las vistas con las vaya interactuar, donde envíe o obtenga información mediante una petición que se haya hecho usando la url en el navegador.
CodeIgniter 4 cuenta con dos tipos principales de enrutamiento:
Enrutamiento de Ruta Definida: Permite definir rutas que están enlazadas a un método específico de un controlador.
Enrutamiento Automático: Permite que el sistema determine la ruta automáticamente basado en los segmentos de la URL.
El enrutamiento de ruta definida es el que permite definir rutas que están enlazadas a un especifico método de un controlador,siendo este el tema principal de este tutorial sobre rutas en CodeIgniter 4.
Establecer reglas de enrutamiento
Un elemento crucial en el manejo de rutas en una aplicación con CodeIgniter es el archivo Routes.php, ubicado en el directorio app/Config. En este archivo se definen las rutas creando una instancia de la clase RouteCollection ($routes), permitiendo especificar criterios personalizados al crear una ruta. Podemos definir un nombre de ruta y parámetros que se pasen en la ruta utilizando marcadores de posición o expresiones regulares.
Al crear una ruta se debe especificar el método correspondiente de verbo HTTP por ejemplo GET o POST:
En la ruta definimos que el método a usar es ->get(GET) definiendo el nombre de la ruta como “inicio” que solicita al controlador Micontrolador y su método inicio definido como si se tratase de un método estático separando el nombre del controlador y el método por dos puntos dobles “::”.
Ejemplo practico
Paso 1. En el directorio app/Controllers de nuestra aplicación creamos un archivo Micontrolador.php, es importante recordar que la clase que contenga este archivo deberá ser llamada de la misma forma que el archivo .php y extendiendo de BaseController
<?php
namespace App\Controllers;
class Micontrolador extends BaseController
{
public function inicio()
{
return view('viewInicio');
}
}
?>
Paso 2. En el directorio app/Views creamos un archivo llamado viewInicio.php de la siguiente manera
Paso 3. Agregamos la siguiente linea a el archivo Routes.php ubicado en el directorio app\Config
$routes->get('inicio','Micontrolador::inicio');
Y listo nuestro primera ruta, solo colocamos en nuestro navegador la url de nuestra aplicación agregando la palabra “inicio” de manera que nos quede así http://localhost/ci/public/inicio obteniendo la vista que ah sido solicitada a través de la url.
Es muy importante al trabajar con CodeIgniter 4 comprender como se estructura de forma predeterminada nuestra aplicación en una instalación nueva.
Directorios predeterminados
luego de la Instalación de CodeIgniter 4 en la raíz de la aplicación nos encontraremos con 5 directorios, los cuales cuentan con un papel muy importante en nuestra aplicación que se estructuran de la siguiente forma.
App
El directorio App es donde reside todo el código necesario para la aplicación y cuenta con varios directorios en su interior, se estructura de la siguiente forma
Config/: directorio donde se almacenan todos los archivos de configuración esenciales para el correcto y optimo funcionamiento de la aplicación, por ejemplo los archivos App.php(archivo de configuración de la aplicación), Routes.php(archivo de configuración donde se establecen las rutas de la aplicación),Database.php(archivo de configuración donde se establece la base de datos o bases de datos a usar en la aplicación) se encuentran aquí.
Controllers/:Directorio donde se definen los controladores para la aplicación.
Database/:Almacena las migraciones de las bases de datos y los archivos semilla.
Filters/: Almacena las clases filtros que pueden ejecutarse antes y después del los controladores.
Helpers/:Almacena una colección de helpers dicho de otra forma colección de funciones independientes que pueden facilitar el trabajo del desarrollador.
Language/:Almacena el soporte para idiomas de la aplicación.
Libraries/:Una colección de clases que puede utilizar para agregar funcionalidad a su aplicación. La biblioteca en sí no es una parte central de CodeIgniter y puede eliminarse o actualizarse según sea necesario.
Models/:Almacena los modelos que funcionan con la base de datos de la aplicación.
ThirdParty/:Almacena bibliotecas de terceros que se pueden utilizar en la aplicación.
Views/: Almacena las vistas con las que interactúa el usuario.
System
Este directorio almacena los archivos que componen el propio marco del framework, si bien tiene mucha flexibilidad en cómo usa el directorio de la aplicación, los archivos en el directorio del sistema nunca deben modificarse. En su lugar tiene que ampliar las clases o crear nuevas clases para proporcionar la funcionalidad deseada.
Public
La carpeta pública contiene la parte de su aplicación web accesible al navegador, lo que impide el acceso directo a su código fuente. Contiene el archivo .htaccess principal, index.php , y cualquier recurso de aplicación que agregue, como CSS, JavaScript o imágenes.
Esta carpeta está destinada a ser la «raíz web» de su sitio y su servidor web estaría configurado para apuntar a ella.
Writable
Este directorio contiene todos los directorios necesarios para escribir durante la vida de una aplicación. Esto incluye directorios para almacenar archivos de caché, registros y cualquier carga que un usuario pueda enviar. Debe agregar aquí cualquier otro directorio en el que su aplicación deba escribir. Esto le permite mantener sus otros directorios principales sin escritura como medida de seguridad adicional.
Tests
Este directorio está configurado para contener sus archivos de prueba. el directorio _support contiene varias clases simuladas y otras utilidades que puede utilizar mientras escribe sus pruebas. No es necesario transferir este directorio a sus servidores de producción.
CodeIgniter 4 es framework MVC que sigue el patrón de arquitectura Modelo-Vista-Controlador (MVC), lo que significa que separa la lógica de la aplicación en tres componentes principales: el Modelo (la capa de acceso a datos), la Vista (la capa de presentación) y el Controlador (la capa de lógica de negocio). ademas a diferencia de otros frameworks MVC más robustos, Por lo tanto CodeIgniter es conocido por ser ligero y flexible, lo que lo hace ideal para proyectos pequeños y medianos donde la simplicidad y el rendimiento son prioritarios.
Principales características
Instalación y Configuración Sencillas: CodeIgniter es fácil de instalar y configurar. No requiere de una estructura de directorios complicada ni de una configuración tediosa. Simplemente descargas los archivos, configuras una vez tu archivo de configuración y estás listo para empezar a desarrollar.
Librerías y Helpers Incorporados: CodeIgniter proporciona una serie de librerías y helpers integrados que facilitan tareas comunes como el manejo de formularios, la validación de datos, el envío de correos electrónicos, el manejo de sesiones, la manipulación de imágenes, entre otros. Esto permite a los desarrolladores ser más productivos y escribir menos código repetitivo.
Seguridad Incorporada: La seguridad es una preocupación importante en cualquier aplicación web. CodeIgniter incluye características de seguridad integradas, como la protección contra ataques de tipo XSS (Cross-Site Scripting) y CSRF (Cross-Site Request Forgery), así como herramientas para la validación de formularios y la protección de datos sensibles.
Documentación Completa y Activa Comunidad: CodeIgniter cuenta con una documentación completa y bien estructurada que facilita el aprendizaje y la referencia para los desarrolladores. Además, tiene una comunidad activa que proporciona soporte, comparte recursos y contribuye con extensiones y mejoras al framework.
Flexibilidad y extensibilidad: Aunque CodeIgniter viene con muchas características útiles fuera de la caja, también es altamente extensible. Los desarrolladores pueden integrar fácilmente bibliotecas de terceros o crear sus propias extensiones para adaptarse a las necesidades específicas de sus proyectos.
Ejemplo Hola Mundo
Paso 1. Creamos nuestra vista, nos dirigimos a el directorio de nuestro proyecto hasta la el directorio app/Views que es donde se almacenan todas las vistas de nuestros proyectos como y creamos la un archivo holaMundo.php.
Paso 2. Creamos nuestro controlador, debemos recordar que el controlador es quien decide por así decirlo la acción que nuestra aplicación ejecutara según la petición del usuario, estos los crearemos en el directorio app/Controllers, creamos el archivo Micontrolador.php.
<?php
//usamos el espacio de nombre controllers.
namespace App\Controllers;
//
use CodeIgniter\Controller;
/**
Creamos nuestra clase con el mismo nombre del archivo Micontrolador.php y
extenderemos del BaseController.
**/
class Micontrolador extends BaseController
{
//Creamos un método publico llamado holaMundo donde retornamos la vista holaMundo.php.
public function holaMundo()
{
//Retornamos nuestra vista.
return view('holaMundo');
}
}
Paso 3. Definimos nuestra ruta y para eso editaremos nuestro archivo Routes.php que se encuentra en el directorio app/config añadiendo la siguiente línea
$routes->get('hola','Micontrolador::holaMundo');
Nuestro archivo de Routes.php nos quedara de la forma
Listo ya tenemos nuestro hola mundo con CodeIgniter 4 nos dirigimos al navegador y escribimos la url de nuestro proyecto
http://localhost/ci/public/hola
Siendo nuestro resultado final este.
Conclusion
En resumen, CodeIgniter es una opción popular para desarrolladores de PHP que buscan un framework ligero, fácil de usar y altamente funcional para construir aplicaciones web rápidas, seguras y escalables. Su enfoque en la simplicidad y la eficiencia lo hace especialmente adecuado para proyectos de tamaño mediano y pequeño.
Este tutorial es una breve introducción a lo que se puede hacer con bootstrap con respecto a los formularios,Los formularios son esenciales para recopilar datos de los usuarios, como nombres, correos electrónicos y mensajes. En este tutorial, se aprenderá a crear formularios utilizando Bootstrap
Configuración Inicial
Para comenzar, es necesario incluir Bootstrap en el proyecto. Esto se puede hacer descargando Bootstrap o utilizando un enlace CDN. A continuación, se muestra cómo agregar Bootstrap al archivo HTML.
Usando el CDN que son las siglas de Content Delivery Network o en español Red de Distribución de Contenido,que nos proporciona la misma web de bootstrap,incluyendo la siguiente linea dentro de nuestra etiqueta <head>.
El primer paso es crear un formulario básico. Esto se logra utilizando etiquetas HTML y clases de Bootstrap. A continuación, se presenta el código para un formulario simple con un campo de texto y un botón de envío.
Usando Bootstrap en formularios y sus elementos,ya sea cajas de texto,chekbox,radios y botones,solo basta con agregarlos dentro de la etiqueta <form> y asignarles la clase correspondiente que bootstrap tiene para cada uno,el siguiente es un ejemplo de un formulario básico con dos entradas y un botón.
Clase mb-3
<div class="mb-3">
La clase mb-3 en Bootstrap es como una regla mágica que le dice a un bloque (o elemento) que necesita un espacio extra debajo de él. Específicamente, le da un margen (espacio) de tamaño,esta clase en conjunto con los div nos permite estructurar los elementos en bloques,permitiendo que el formulario mantenga su aspecto.
Clase form-label
<label class="form-label">Usuario</label>
La clase form-label en Bootstrap se usa para estilizar las etiquetas de los formularios.Solo basta con colocarla dentro del atributo classde nuestra etiqueta <label>, la clase form-label aplica los estilos necesarios y predeterminados de bootstrap a una etiqueta en un formulario.
La clase form-control en Bootstrap se usa para estilizar los campos de entrada de texto de los formularios.Solo basta con colocarla dentro del atributo class de nuestra etiqueta <input>. La clase form-control aplica estilos específicos al campo de entrada para que el diseño se consistente en diferentes navegadores y dispositivos
esta línea de código crea un botón estilizado con Bootstrap,La clase btn es una clase base de Bootstrap que aplica estilos básicos de botón, como el tamaño y el borde. La clase btn-primary añade estilos adicionales, como el color de fondo azul y el color de texto blanco
Una de las ventajas de Bootstrap es que los formularios se adaptan a cualquier dispositivo, ya sea una computadora, tableta o teléfono móvil,solo basta con el hecho de utilizar las clases que se brindan en bootstrap para obtener resultados deseados.
Conclusión
En resumen, crear formularios con Bootstrap es un proceso sencillo y eficiente. Este tutorial ha sido una mera introducción a los formularios,Bootstrap permite crear diseños con una bonita apariencia y funcionales,teniendo como ventaja que nuestros elementos se verán de la misma forma sin importar el tamaño del dispositivo donde se muestran.
Uno de los primeros errores que puedes encontrar al trabajar con CodeIgniter en Linux es el mensaje: “Cache unable to write to «/var/www/html/ci/writable/cache/»”. Este problema es común para los nuevos usuarios de CodeIgniter en Linux, aunque no tanto en Windows.
¿Por qué ocurre este error?
La causa principal de este error son los permisos de directorios en Linux. Dependiendo de la distribución que uses (Ubuntu, Debian, Mint, Arch, Fedora), el servidor web puede tener diferentes nombres (por ejemplo, en Fedora se llama httpd en lugar de apache).
Como Solucionarlo?
La solución es otorgar permisos de escritura y lectura al usuario del servidor web para el directorio writable de el proyecto CodeIgniter.
pero que es el usuario del servidor web?
la respuesta es «una cuenta de usuario en el sistema operativo que se utiliza para ejecutar el servicio de apache. Este usuario tiene permisos específicos y limitados para garantizar la seguridad del servidor web».
necesitamos otorgarle permisos de escritura y lectura al usuario del servidor web, del el directorio writable de nuestro proyecto de CodeIgniter,para ello lo asignaremos como el propietario del directorio writable y le concederemos los permisos de escritura y lectura.
Asignar al www-data como propietario del directorio writable
Basta con ejecutar el siguiente comando en nuestra terminal de Linux.
El comando chmodsirve para cambiar los permisos de un archivo o carpeta. Para usarlo, solo tienes que decir qué permisos quieres y a qué archivo o archivos se los quieres cambiar.con el 755 como configuración de permisos El dueño de la carpeta puede hacer lo que quiera con ella. Los demás solo pueden ver lo que hay dentro, pero no pueden añadir ni borrar archivos. Este tipo de configuración es común para carpetas que quieres compartir con otros.
En este tutorial, aprenderás a configurar un VirtualHost en Apache para tu proyecto de CodeIgniter. Un VirtualHost te permite acceder a tu proyecto a través de un dominio personalizado en lugar de usar la dirección IP o una ruta larga. Sigue estos pasos:
Paso 1: Crear proyecto de CodeIgniter 4 usando composer
En este paso se debe tener en cuenta que se debe contar con los permisos necesarios para la creación de nuestro proyecto dentro del directorio /var/www/ en ubuntu,debian o en alguna de las distribuciones derivadas de estas.
le asignaremos los permisos necesarios de la siguiente forma
Asignar a nuestro usuario como propietario del directorio /var/www/
sudo chown grupodelusuario:usuario -R /var/www
con este comando se le asigna al usuario ser el propietario del directorio,hay que remplazar el grupodelusuario por el grupo al que pertenece el usuario con el que se esta trabajando y remplazar usuario por el nombre de nuestro usuario.
Asignar permisos de escritura y lectura a el directorio /var/www
sudo chmod 755 /var/www/
de esta manera le asignamos los permisos a el propietario de escritura y lectura,mientras que los demás usuarios solo puede ver los archivos nada mas.
Crear el proyecto de CodeIgniter 4 usando composer
para eso solo basta que nos dirijamos desde la terminal hasta el directorio /var/www y ejecutamos el siguiente comando.
de esta manera ya tenemos instalado y creado nuestro proyecto de CodeIgniter 4 en nuestro servidor.pero no podemos probar aun ya que debemos configurar nuestro virtual host.
Paso dos:Crear el archivo de configuración del VirtualHost
para este paso debemos crear un archivo de configuración en el directorio /etc/apache2/sites-available y lo llamaremos mi_proyecto.conf.
Nos dirigimos al directorio de configuración de apache
cd /etc/apache2/sites-available/
Creamos el archivo mi_proyecto.conf,podemos utilizar el editor de nuestra preferencia,podemos remplazar nano por vim,emacs,gedit,xed,featherpad o el editor de nuestra preferencia
sudo nano mi_proyecto.conf
Añade lo siguiente al archivo configuración que estamos creando :
Modificando el archivo host permitiremos que nuestro dominio personalizado apunte a nuestro servidor local,de esta manera cuando ingresemos mi_proyecto.local en nuestro navegador apuntara a nuestro proyecto.
nos dirigimos al el directorio /etc/
cd /etc/
abrimos el archivo hosts
sudo nano hosts
añadimos la siguiente linea a nuestro archivo hosts
127.0.0.1 mi_proyecto.local
Paso 4: Habilitar el nuevo VirtualHost:
Para habilitar nuestro nuevo virtualhost debemos ejecutar el siguiente comando .
sudo a2ensite mi_proyecto.conf
Ahora que ya habilitamos nuestro nuevo host solo basta con reiniciar nuestro servidor apache.
sudo systemctl restart apache2
Paso 5: Comprobar el correcto funcionamiento de nuestro VirtualHost
para ello hay que asignarle permisos de escritura y lectura a la carpeta /writable de nuestro proyecto,para ello ejecutamos los siguientes comandos
Asignamos a www-data como propietario del directorio writable de nuestro proyecto
Bootstrap es un framework de desarrollo web que facilita la creación de sitios y aplicaciones responsivas. Una de las características más útiles de Bootstrap es su capacidad para estilizar tablas de manera sencilla y efectiva. En este tutorial, aprenderás cómo utilizar las clases de Bootstrap para crear tablas atractivas y funcionales.
Las tablas son una herramienta esencial para organizar y presentar datos de manera clara y estructurada. Con Bootstrap, puedes mejorar la apariencia de tus tablas y hacerlas más interactivas y responsivas sin mucho esfuerzo. A continuación, te mostraremos cómo empezar a trabajar con tablas en Bootstrap.
Incluir Boostrap en nuestro proyecto
Usando el CDN que son las siglas de Content Delivery Network o en español Red de Distribución de Contenido,que nos proporciona la misma web de bootstrap,incluyendo la siguiente linea dentro de nuestra etiqueta <head>.
En un archivo .html que crearemos,le nombramos como se nos de mejor, en mi caso se llamara tabla.html,debemos incluir bootstrap dentro de la etiqueta <head></head> de nuestro archivo html de la siguiente forma
Ahora si abrimos el archivo tablas.html en nuestro navegador podremos observar el siguiente resultado.
Como se puede ver ya esta funcionando,nuestra tabla ya esta estilizada y se muy bien,donde esta la magia detrás de que funcione así?,pues solo basta que en la etiqueta <table> de nuestra tabla le coloquemos la clase table,nos quedaría de la siguiente manera <table class="table">.
Tablas Responsivas
para hacer que nuestra tabla sea responsiva o mejor dicho que se adapte a dispositivo donde se esta visualizando nuestro proyecto solo basta que agreguemos a la etiqueta <table> la clase table-responsive,siendo que nos quedara de la siguiente forma nuestra etiqueta.
La clase table-responsive
Esta clase hace que la tabla sea responsiva, permitiendo que se desplace horizontalmente según el dispositivo donde se muestre la tabla.
<table class="table table-responsive">
Bootstrap también nos permite definir break-points que no es mas que determinar por medio de una clase cuando nuestra tabla va a reaccionar y se va ajustar al tamaño del dispositivo.
Bootstrap ofrece varias clases para definir breakpoints, cada una correspondiente a un tamaño de pantalla específico:
table-responsive-sm: Se aplica a pantallas pequeñas y superiores (≥576px).
table-responsive-md: Se aplica a pantallas medianas y superiores (≥768px).
table-responsive-lg: Se aplica a pantallas grandes y superiores (≥992px).
table-responsive-xl: Se aplica a pantallas extra grandes y superiores (≥1200px).
table-responsive-xxl: Se aplica a pantallas extra extra grandes y superiores (≥1400px).
Ejemplo de Breakpoint
<!---->
<div class="table-responsive">
<table class="table">
</table>
</div>
<!--
Sera adaptable en dispositivos con pantallas pequeñas y superiores (≥576px).
-->
<div class="table-responsive-sm">
<table class="table">
</table>
</div>
<!--
Sera adaptable en dispositivos con pantallas medianas y superiores (≥768px).
-->
<div class="table-responsive-md">
<table class="table">
</table>
</div>
<!--
Sera adaptable en dispositivos con pantallas grandes y superiores (≥992px).
-->
<div class="table-responsive-lg">
<table class="table">
</table>
</div>
<!--
Sera adaptable en dispositivos con pantallas extra grandes y superiores (≥1200px).
-->
<div class="table-responsive-xl">
<table class="table">
</table>
</div>
<!--
Sera adaptable en dispositivos con pantallas extra extra grandes y superiores (≥1400px).
-->
<div class="table-responsive-xxl">
<table class="table">
</table>
</div>
Tablas tipo zebra con la clase table-striped
Bootstrap nos ofrece una clase que nos permite crear tablas tipo zebra de manera fácil,solo basta con colocar la clase table-striped en el atributo class de nuestra etiqueta <table>
Tablas tipo zebra en las columnas con la clase table-striped-columns
Bootstrap nos permite crear tablas tipo zebra pero esta vez en las columnas,para ello solo debemos agregar la clase table-striped-columns a el atributo class de nuestra etiqueta <table>
Bootstrap nos ofrece la posibilidad de crear el efecto hover en nuestras tablas usando la clase .table-hover, para ello solo basta con que agreguemos la clase .table-hovera la etiqueta <table> o <tbody> de nuestra tabla html,vale aclarar que si la clase .table-hover la agregamos en la etiqueta <table> tendremos el efecto hover incluso en el encabezado de nuestra tabla,ahora bien si lo hacemos en la etiqueta <tbody> de la tabla,el efecto hover sera solo en el cuerpo de la tabla,no se vera afectado el encabezado.
Ejemplo de efecto hover en una tabla
de la siguiente manera el efecto sera en toda la tabla
Ahora bien, si queremos que los bordes de la tabla tengan un color,bootstrap proporciona unas clase con colores de bordes por ejemplo border-primary o border-secondary,si agregamos una de estas clases a nuestra etiqueta <table> obtendremos una tabla con bordes de el color que elijamos.
Bootstrap nos permite rápidamente crear y estilizar elementos en nuestros proyectos de manera fácil y rápida ,esta es una pequeña introducción a lo que se puede lograr usando bootstrap para crear tablas adaptables y con estilos a mi parecer bonitos,esto no es todo lo que se puede hacer con bootstrap,podemos obtener resultados deseados con un poco de paciencia y lectura de la documentación oficial de bootstrap,cabe aclarar que no soy experto,solo soy un aficionado al que le gusta aprender un poco de todo.
