CodeControladores de Igniter, enrutamiento de vistas: aprenda con ejemplos

En este tutorial, aprenderás los siguientes temas:

• enrutamiento – el enrutamiento es responsable de responder a URL solicitudes. El enrutamiento coincide con el URL a 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. Solicitan datos y lógica de negocio al modelo y devuelven los resultados en la presentación de la vista. Una vez que URL Una vez que se ha asociado una ruta, se envía a una función pública del controlador. Esta función interactúa con la fuente de datos y la lógica de negocio, 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 parte se encarga de mostrar la página web al usuario. Normalmente, los datos que se muestran se obtienen de la base de datos o de otra fuente de datos disponible.

Cómo crear un nuevo CodeProyecto Igniter

Usaremos Composer para crear un nuevo proyecto. Usaremos el servidor integrado de PHP, por lo que no es necesario tener software adicional como APACHEEn este tutorial, utilizamos el Windows sistema operativo, por lo que hemos creado una carpeta Sites en la unidad C. Puede usar cualquier directorio que le resulte conveniente.

Abre la línea de comandos o la terminal y ejecuta el siguiente comando:

cd C:\Sites

Ahora crearemos un CodeProyecto Igniter usando Composer. Ejecute el siguiente comando:

composer create-project CodeIgniter/framework ci-app

Aquí:

• El comando anterior crea un nuevo CodeProyecto Igniter versión 3, utilizando la última versión estable (3.1.9 en el momento de escribir esto), en un directorio llamado ci-app.

Cuando el comando haya terminado de ejecutarse, debería ver resultados similares a los siguientes en la terminal:

Ejecute el siguiente comando para navegar al directorio del proyecto recién creado ci-app:

cd ci-app

Ahora inicia el servidor web integrado de PHP:

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 navegue a lo siguiente URL: http://localhost:3000/Obtendrás la siguiente página:

Si puede ver la página de arriba, enhorabuena, ha instalado correctamente. CodeEncendedorLa página se genera mediante la vista ubicada en application/views/welcome_message.php, y el controlador responsable se encuentra en application/controllers/Welcome.php.

CodeEnrutamiento del encendedor

Por ahora, nuestra aplicación solo tiene una URL, que es la página de inicio. En esta sección, personalizaremos la sección de inicio y crearemos algunas nuevas URLque responden a diferentes solicitudes.

Comencemos con la ruta de la página de inicio. Abra el archivo de rutas en la siguiente ruta:

application/config/routes.php

Debería ver el siguiente contenido:

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Aquí:

• $route['default_controller'] = 'welcome'; define el controlador predeterminado que responde a las solicitudes URI.
• $route['404_override'] = ”; permite definir una ruta personalizada para errores 404. Un error 404 ocurre cuando no se encuentra una página. CodeIgniter tiene un manejador de errores predeterminado, pero puedes definir el tuyo propio si lo deseas.
• $route['translate_uri_dashes'] = FALSE; permite traducir guiones a guiones bajos. Analizaremos esta opción cuando veamos cómo funcionan las rutas en CodeEncendedor.

Veamos ahora el método del controlador responsable de mostrar la página de inicio que vimos cuando abrimos http://localhost:3000/Abra el siguiente archivo:

application/controllers/Welcome.php

Deberías 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í:

• defined('BASEPATH') OR exit('No direct script access allowed'); protege contra el acceso directo a la clase del controlador sin pasar por el archivo index.php. En el paradigma MVC, todas las solicitudes tienen un único punto de entrada, que para CodeIgniter es index.php. Este código bloquea todas las solicitudes que no provengan de index.php.
• La clase Welcome extiende CI_Controller {…} define una clase Welcome que extiende la clase padre CI_Controller.
• La función pública index() define una función pública que se llama por defecto cuando se abre la página de inicio.
• $this->load->view('welcome_message'); carga la vista welcome_message, ubicada en application/views/welcome_message.php.

Hasta ahora solo hemos explorado lo que viene de fábrica con CodeIgniter. Ahora vamos a hacer algunos cambios. Crearemos nuestra propia página de inicio y reemplazaremos la página predeterminada. Crea un nuevo archivo en application/views/home.php y agrega el siguiente código:

<!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 framework CSS Bulma y Font Awesome desde una CDN y crea un documento HTML muy básico. Aplica una regla CSS sencilla del framework Bulma.

Abra lo siguiente URL en tu navegador: http://localhost:3000/Deberías ver lo siguiente:

¡Genial! Hemos modificado la página de inicio correctamente. Ahora, definamos nuestra ruta. Supongamos que nuestra aplicación también necesita mostrar una página "Acerca de nosotros".

Crear una ruta

Abra el archivo de rutas application/config/routes.php y agregue la siguiente ruta:

$route['about-us'] = 'welcome/about_us';

Aquí:

• Cuando un visitante visita el URL /sobre nosotros, nosotros le damos instrucciones CodeIgniter buscará un controlador Welcome y ejecutará el método about_us.

Crear un controlador

Ahora vamos a definir el método del controlador about_us. Abra application/controllers/Welcome.php y añada el siguiente método:

public function about_us(){
$this->load->view('about_us');
}

Aquí:

• El código anterior define una función llamada about_us y carga una vista llamada about_us.

Crear una vista

Ahora vamos a crear la vista a la que acabamos de hacer referencia. Crea un nuevo archivo llamado about_us.php en application/views/about_us.php y 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. Abra lo siguiente URL en su navegador web: http://localhost:3000/index.php/about-usVerás la siguiente página:

Si puede ver la página anterior, enhorabuena, ha creado con éxito una aplicación sencilla en CodeEncendedor.

Preguntas Frecuentes