Controladores CodeIgniter, enrutamiento de vistas: aprenda con una aplicación de ejemplo
fiona marrón
En este tutorial aprenderás los siguientes temas.
- enrutamiento – el enrutamiento es responsable de responder a las solicitudes de URL. El enrutamiento hace coincidir la URL con las rutas predefinidas. Si no se encuentra ninguna coincidencia de ruta, CodeIgniter genera una excepción de página no encontrada.
- Control – las rutas están vinculadas a los controladores. Los controladores unen los modelos y las vistas. La solicitud de datos/lógica empresarial del modelo y devolver los resultados en la presentación de la vista. Una vez que una URL coincide con una ruta, se reenvía a la función pública de un controlador. Esta función interactúa con la fuente de datos, la lógica empresarial y devuelve la vista que muestra los resultados.
- Vistas – las vistas son responsables de la presentación. Una vista suele ser una combinación de HTML, CSS y JavaScript. Esta es la parte encargada de mostrar la página web al usuario. Normalmente, los datos que se muestran se obtienen de la base de datos o de cualquier otra fuente de datos disponible.
Cómo crear un nuevo proyecto CodeIgniter
Usaremos Composer para crear un nuevo proyecto. Usaré el servidor PHP integrado, por lo que no es necesario tener software adicional como APACHE. En este tutorial, estamos usando el Windows Sistema operativo. Por lo tanto, hemos creado una carpeta Sitios en la unidad C. Puede utilizar cualquier directorio que le resulte conveniente.
Abra la línea de comandos/terminal y ejecute el siguiente comando
cd C:\Sites
Ahora crearemos un proyecto de CodeIgniter con Composer. Ejecute el siguiente comando
composer create-project CodeIgniter/framework ci-app
AQUÍ,
- El comando anterior crea un nuevo proyecto CodeIgniter versión 3 utilizando la última versión estable, es decir, 3.1.9 en un directorio ci-app.
Cuando el comando anterior haya terminado de ejecutarse, debería poder obtener resultados similares a los siguientes en la terminal
Ejecute el siguiente comando para buscar el directorio del proyecto recién creado ci-app
cd ci-app
Ahora iniciemos el servidor web PHP integrado.
php -S localhost:3000
AQUÍ,
- El comando anterior inicia el servidor PHP integrado que se ejecuta en el puerto 3000.
Abra el navegador web y busque la siguiente URL: http://localhost:3000/
Obtendrás la siguiente página
Si puede ver la página anterior, felicidades, ha instalado correctamente CodeIgniter.
Como puede leer en la página web anterior, la página que se muestra arriba se representa mediante la vista ubicada en application/views/welcome_message.php y el controlador responsable se encuentra en application/controllers/Welcome.php
Enrutamiento CodeIgniter
Por ahora, nuestra aplicación tiene una sola URL que es la página de inicio. En esta sección, personalizaremos la sección de inicio. Crearemos algunas URL nuevas que responderán a las diferentes solicitudes.
Empecemos por la ruta de la página de inicio.
Abra el archivo de rutas como lo indica la ruta a continuación
application/config/routes.php
Deberías poder ver el siguiente contenido
$route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE;
AQUÍ,
- $ruta['default_controller'] = 'bienvenido'; define el controlador predeterminado que responde a las solicitudes de URI
- $ruta['404_override'] = ”; esta ruta le permite definir una ruta personalizada para errores 404. Se produce un error 404 cuando no se encuentra una página. CodeIgniter tiene un controlador predeterminado para el error, pero puedes definir el tuyo propio si así lo deseas.
- $ruta['translate_uri_dashes'] = FALSO; esta opción le permite convertir guiones en guiones bajos. Hablaremos de esta opción cuando veamos cómo funcionan las rutas en CodeIgniter.
Veamos ahora el método del controlador responsable de mostrar la página de inicio que vimos cuando abrimos la URL. http://localhost:3000/ en el navegador web.
Abra el siguiente archivo
application/controllers/Welcome.php
Deberías poder ver el siguiente código
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('welcome_message');
}
}
AQUÍ,
- Definido ("BASEPATH") O salir ("No se permite acceso directo al script"); protege contra el acceso directo a la clase de controlador sin pasar por el archivo index.php. Recuerde, en el paradigma MVC todas las solicitudes tienen un único punto de entrada, y para CodeIgniter, su index.php. Este código bloquea todas las solicitudes que no llegan a través de index.php
- class Welcome extiende CI_Controller {…} define una clase Welcome que extiende la clase principal CI_Controller
- La función pública index() define una función pública que se llama de forma predeterminada cuando abres la página de inicio.
- $this->cargar->view('mensaje_de bienvenida'); esta línea carga la vista mensaje_bienvenida. El archivo mensaje_de_bienvenida se encuentra en el directorio aplicación/vistas/mensaje_de_bienvenida.php
Hasta ahora, solo hemos explorado lo que viene de fábrica con CodeIgniter, ahora intentemos hacer algunos cambios. Crearemos nuestra página de inicio y reemplazaremos la página predeterminada.
Cree un nuevo archivo en application/views/home.php
Añade el siguiente código a home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello CodeIgniter!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
CodeIgniter Hello World
</h1>
</div>
</section>
</body>
</html>
AQUÍ,
El código HTML anterior carga el marco SSS de Birmania y la fuente de la red CDN crea un documento HTML muy básico. Aplica una regla CSS muy simple del marco CSS de Birmania.
Abra la siguiente URL en su navegador: http://localhost:3000/
Deberías poder ver lo siguiente
Genial, acabamos de modificar con éxito la página de inicio. Continuando, definamos nuestra ruta. Supongamos que nuestra aplicación también debe poder mostrar la página Acerca de nosotros.
Crear una ruta
Abra el archivo de rutas application/config.routes.php
Añade la siguiente ruta
$route['about-us'] = 'welcome/about_us';
AQUÍ,
- Cuando un visitante visita la URL /about-us, le indicamos a CodeIgniter que busque un controlador Bienvenido y ejecute el método about_us.
Crear un controlador
Ahora definamos el método del controlador sobre nosotros.
Abra la aplicación/controladores/Welcome.php
Agregue el siguiente método
public function about_us(){
$this->load->view('about_us');
}
AQUÍ,
- El código anterior define una función about_us y carga una vista about_us.
Crear una vista
Ahora creemos la vista a la que acabamos de hacer referencia en la sección anterior.
Cree un nuevo archivo about_us.php en application/views/about_us.php
Añade el siguiente código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About CodeIgniter!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
About us yap...
</h1>
</div>
</section>
</body>
</html>
Estamos listos para comenzar, abra la siguiente URL en su navegador web: http://localhost:3000/index.php/about-us
Verás la siguiente página
Si puede ver la página anterior, felicidades, ha creado con éxito una aplicación sencilla en CodeIgniter.
Resum
En este tutorial, cubrimos tres (3) componentes principales que componen una aplicación CodeIgniter. Analizamos las rutas y cómo definirlas, los controladores y cómo crear métodos que respondan a las solicitudes de ruta y creamos vistas simples que se devuelven a los usuarios cuando solicitan un recurso.
