Cree su primera aplicación

Crear la primera aplicación – Visión general

 

Este tutorial tiene como objetivo presentarle el framework CodeIgniter4 y los principios básicos de la arquitectura MVC. Le mostrará cómo construir su primera aplicación básica de CodeIgniter paso a paso.

Si no está familiarizado con PHP, le recomendamos que consulte el Tutorial PHP de W3Schools antes de continuar.

En este tutorial, creará una aplicación básica de noticias. Comenzará escribiendo el código que puede cargar páginas estáticas. A continuación, creará una sección de noticias que lea las noticias de una base de datos. Finalmente, agregará un formulario para crear elementos de noticias en la base de datos.

Este tutorial se centrará principalmente en:

• Conceptos básicos del modelo-vista-controlador
• Conceptos básicos de enrutamiento
• Validación de formulario
• Realización de consultas básicas de bases de datos utilizando el modelo de CodeIgniter.

Todo el tutorial se divide en varias páginas, cada una de las cuales explica una pequeña parte de la funcionalidad del marco CodeIgniter. Pasarás por las siguientes páginas:

• Introducción: esta página le brinda una descripción general de lo que puede esperar y hace que su aplicación predeterminada se descargue y ejecute
• Páginas estáticas que le enseñarán los conceptos básicos de los controladores, las vistas y el enrutamiento
• Sección de noticias donde comenzarás a usar modelos y realizarás algunas operaciones básicas de base de datos
• Cree elementos de noticias que introducirán operaciones de base de datos más avanzadas y validación de formularios
• Conclusión: le dará algunos consejos sobre lecturas adicionales y otros recursos
• Disfrute de su exploración del marco CodeIgniter.

Instalación de CodeIgniter

Puede descargar una versión manualmente desde el sitio, pero para este tutorial usaremos la forma recomendada e instalaremos el paquete AppStarter a través de Composer. Desde su línea de comando escriba lo siguiente:


> composer create-project codeigniter4/appstarter ci-news


Esto crea una nueva carpeta, ci-news , que contiene el código de su aplicación, con CodeIgniter instalado en la carpeta del proveedor.

Configuración del modo de desarrollo

De forma predeterminada, CodeIgniter se inicia en modo de producción. Esta es una característica de seguridad para mantener su sitio un poco más seguro en caso de que la configuración se arruine una vez que esté en vivo. Así que primero arreglemos eso. Copie o cambie el nombre del envarchivo a .env. Abrelo.

Este archivo contiene configuraciones específicas del servidor. Esto significa que nunca necesitará enviar información confidencial a su sistema de control de versiones. Incluye algunos de los más comunes que ya desea ingresar, aunque todos están comentados. Así que elimine el comentario de la línea CI_ENVIRONMENT y cambie production a development:

CI_ENVIRONMENT = development

Servidor de desarrollo en ejecución

Con eso fuera del camino, es hora de ver su aplicación en un navegador. Puede servirlo a través de cualquier servidor de su elección, Apache, Nginx, etc., pero CodeIgniter viene con un comando simple que aprovecha el servidor incorporado de PHP para que pueda comenzar a trabajar rápidamente en sus máquinas de desarrollo. Escriba lo siguiente en la línea de comando desde la raíz de su proyecto:

> php spark serve

La página de bienvenida

Ahora apunte su navegador a la URL correcta, será recibido por una pantalla de bienvenida. Pruébelo ahora dirigiéndose a la siguiente URL:

http://localhost:8080

Esto significa que su aplicación funciona y puede comenzar a realizar cambios en ella.

Depuración

Ahora que está en modo de desarrollo, verá una barra de herramientas en la parte inferior de su aplicación. Esta barra de herramientas contiene varios elementos útiles a los que puede hacer referencia durante el desarrollo. Esto nunca se mostrará en entornos de producción.

Al hacer clic en cualquiera de las pestañas en la parte inferior, aparece información adicional. Al hacer clic en la X a la derecha de la barra de herramientas, se minimiza a un pequeño cuadrado con la llama CodeIgniter en él. Si hace clic en eso, la barra de herramientas se mostrará de nuevo.

Además de esto, CodeIgniter tiene algunas páginas de error útiles cuando encuentra excepciones u otros errores en su programa. Abra app/Controllers/Home.php y cambie alguna línea para generar un error (¡eliminar un punto y coma o una llave debería ser suficiente!).

Hay un par de cosas a tener en cuenta aquí:

1. Al pasar el cursor sobre el encabezado rojo en la parte superior, se muestra un enlace que abrirá DuckDuckGo.com en una nueva pestaña y buscará la excepción
2. Al hacer clic en el enlace en cualquier línea en Backtrace, se expandirá una lista de los argumentos que se pasaron a esa llamada de función.

Todo lo demás debe quedar claro cuando lo veas. Ahora que sabemos cómo comenzar y cómo depurar un poco, comencemos a construir esta pequeña aplicación de noticias.

Páginas estáticas

Lo primero que vas a hacer es configurar un controlador para manejar páginas estáticas. Un controlador es simplemente una clase que ayuda a delegar el trabajo. Es el pegamento de su aplicación web.

Para hacer nuestra primera aplicación, hagamos nuestro primer controlador

Crea un archivo en app/Controllers/Pages.php con el siguiente código.


<?php
namespace App\Controllers;
class Pages extends BaseController
{
public function index()
{
return view('welcome_message');
}
public function view($page = 'home')
{
// ...
}
}


Se ha creado una clase llamada Pages, con un método que acepta un argumento llamado $page. Este también tiene un método, el mismo que el controlador predeterminado que se encuentra en app/Controllers/Home.php. Ese método muestra la página de bienvenida de CodeIgniter.

Nota: Hay dos funciones a las que se hace referencia en este tutorial. Uno es el método de clase creado con y para mostrar una vista. Ambos son técnicamente una función. Pero cuando creas una función en una clase, se llama método. public function view($page = ‘home’) return view(‘welcome_message’)

Sobre la clase Pages

La clase Pages es la extensión de la clase BaseController que extiende la clase CodeIgniter\Controller. Esto significa que la nueva clase Pages puede acceder a los métodos y propiedades definidos en la CodeIgniter\Controllerclase ( system/Controller.php).

El controlador es lo que se convertirá en el centro de cada solicitud a su aplicación web. Como cualquier clase de PHP, se refiere a ella dentro de sus controladores como $this.

Ahora que ha creado su primer método, es hora de crear algunas plantillas de página básicas. Vamos a crear dos “vistas” (plantillas de página) que actúan como pie de página y encabezado de nuestra página.

Cree el encabezado en app/Views/templates/header.php y agregue el siguiente código:


<!doctype html>
<html>
<head>
<title>CodeIgniter Tutorial</title>
</head>
<body>


<h1><?= esc($title) ?></h1>

El encabezado contiene el código HTML básico que querrá mostrar antes de cargar la vista principal, junto con un encabezado. También generará la $titlevariable, que definiremos más adelante en el controlador. Ahora, crea un pie de página en app/Views/templates/footer.php que incluya el siguiente código:


<em>&copy; 2021</em>
</body>
</html>


Nota: Si observa detenidamente la plantilla header.php , estamos usando una esc() función. Es una función global proporcionada por CodeIgniter para ayudar a prevenir ataques XSS.

Adición de lógica al controlador

Anteriormente configuró un controlador con un view()método. El método acepta un parámetro, que es el nombre de la página que se va a cargar. Los cuerpos de las páginas estáticas se ubicarán en el directorio app/Views/pages/.

En ese directorio, cree dos archivos llamados home.php y about.php . Dentro de esos archivos, escriba algún texto, lo que quiera, y guárdelo. Si te gusta ser particularmente poco original, prueba “¡Hola mundo!”.

Para cargar esas páginas, deberá verificar si la página solicitada realmente existe. Este será el cuerpo del view() método en el Pages controlador creado anteriormente:

<?php
namespace App\Controllers;
class Pages extends BaseController
{
public function view($page = 'home')
{
if (! is_file(APPPATH . 'Views/pages/' . $page . '.php')) {
// Whoops, we don't have a page for that!
throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
}

$data[‘title’] = ucfirst($page); // Capitalize the first letter

return view(‘templates/header’, $data)
. view(‘pages/’ . $page)
. view(‘templates/footer’);
}

Carga de la página

Ahora, cuando la página solicitada existe, se carga, incluidos el encabezado y el pie de página, y se muestra al usuario. Si la página solicitada no existe, se muestra el error “404 Página no encontrada”.

La primera línea de este método comprueba si la página realmente existe. La función nativa de PHP is_file() se usa para verificar si el archivo está donde se espera que esté. Es PageNotFoundExceptionuna excepción de CodeIgniter que hace que se muestre la página de error predeterminada.

En la plantilla de encabezado, la $titlevariable se usó para personalizar el título de la página. El valor de título se define en este método, pero en lugar de asignar el valor a una variable, se asigna al elemento de título en la $datamatriz.

Lo último que debe hacerse es cargar las vistas en el orden en que deben mostrarse. La función integrada en CodeIgniter se utilizará para hacer esto. El segundo parámetro de la función se usa para pasar valores a la vista. Cada valor de la $datamatriz se asigna a una variable con el nombre de su clave. Entonces el valor de $data[‘title’] en el controlador es equivalente a la vista.

Enrutamiento

Hemos hecho el controlador. Lo siguiente es establecer reglas de enrutamiento. El enrutamiento asocia un URI con el método de un controlador.

Vamos a hacer eso. Abra el archivo de enrutamiento ubicado en app/Config/Routes.php y busque la sección “Definiciones de ruta” del archivo de configuración.

La única línea sin comentarios para comenzar debería ser:


<?php
// ...
// We get a performance increase by specifying the default
// route since we don't have to scan directories.
$routes->get('/', 'Home::index');
// ...


Esta directiva dice que cualquier solicitud entrante sin ningún contenido especificado debe ser manejada por el método dentro del controlador.

Agregue las siguientes líneas, después de la directiva de ruta para ‘/’.

$routes->get('pages', 'Pages::index');
$routes->get('(:any)', 'Pages::view/$1');

CodeIgniter lee sus reglas de enrutamiento de arriba a abajo y enruta la solicitud a la primera regla coincidente. Cada regla es una expresión regular (lado izquierdo) asignada a un controlador y un nombre de método separados por barras (lado derecho). Cuando llega una solicitud, CodeIgniter busca la primera coincidencia y llama al controlador y al método adecuados, posiblemente con argumentos.

Puede encontrar más información sobre el enrutamiento en la documentación de enrutamiento URI .

Aquí, la segunda regla en el $routesobjeto hace coincidir la solicitud GET con la ruta URI y /pagesasigna el index()método de la Pagesclase.

La tercera regla en el $routesobjeto hace coincidir la solicitud GET con cualquier ruta URI usando la cadena comodín (:any)y pasa el parámetro al view()método de la Pagesclase.

Ejecutar la aplicación

¿Listo para probar? No puede ejecutar la aplicación utilizando el servidor integrado de PHP, ya que no procesará correctamente las .htaccessreglas que se proporcionan en publicy que eliminan la necesidad de especificar “index.php/” como parte de una URL. Sin embargo, CodeIgniter tiene su propio comando que puedes usar.

Desde la línea de comando, en la raíz de su proyecto:

> php spark serve

iniciará un servidor web, accesible en el puerto 8080. Si configura el campo de ubicación en su navegador en localhost:8080, debería ver la página de bienvenida de CodeIgniter.

Ahora visita localhost:8080/home. ¿Se enrutó correctamente al view() método en el Pagescontrolador? ¡Impresionante!

Deberías ver algo como lo siguiente:

Ahora puede probar varias URL en el campo de ubicación del navegador, para ver qué Pages produce el controlador que creó anteriormente…

aplicación

Sección de Noticias

En la última sección, repasamos algunos conceptos básicos del marco escribiendo una clase que hace referencia a páginas estáticas. Limpiamos el URI agregando reglas de enrutamiento personalizadas. Ahora es el momento de introducir contenido dinámico y comenzar a usar una base de datos.

Crear una base de datos para trabajar

La instalación de CodeIgniter asume que ha configurado una base de datos adecuada, como se describe en los requisitos . En este tutorial, proporcionamos código SQL para una base de datos MySQL y también asumimos que tiene un cliente adecuado para emitir comandos de base de datos (mysql, MySQL Workbench o phpMyAdmin).

Debe crear una base de datos que pueda usarse para este tutorial y luego configurar CodeIgniter para usarla.

Usando su cliente de base de datos, conéctese a su base de datos y ejecute el siguiente comando SQL (MySQL):

CREATE TABLE news (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
title VARCHAR(128) NOT NULL,
slug VARCHAR(128) NOT NULL,
body TEXT NOT NULL,
PRIMARY KEY (id),
KEY slug (slug)
);

Además, agregue algunos registros semilla. Por ahora, solo le mostraremos las declaraciones SQL necesarias para crear la tabla, pero debe tener en cuenta que esto se puede hacer mediante programación una vez que esté más familiarizado con CodeIgniter; puede leer sobre Migraciones y Semillas para crear configuraciones de bases de datos más útiles más adelante.

Una nota de interés: un “slug”, en el contexto de la publicación web, es un texto corto fácil de usar y SEO que se usa en una URL para identificar y describir un recurso.

Los registros semilla podrían ser algo como:

INSERT INTO news VALUES
(1,'Elvis sighted','elvis-sighted','Elvis was sighted at the Podunk internet cafe. It looked like he was writing a CodeIgniter app.'),
(2,'Say it isn\'t so!','say-it-isnt-so','Scientists conclude that some programmers have a sense of humor.'),
(3,'Caffeination, Yes!','caffeination-yes','World\'s largest coffee shop open onsite nested coffee shop for staff only.');

Conéctese a su base de datos

El archivo de configuración local .env, que creó cuando instaló CodeIgniter, debe tener la configuración de propiedad de la base de datos sin comentarios y configurada de manera adecuada para la base de datos que desea usar. Asegúrese de haber configurado su base de datos correctamente como se describe aquí:

database.default.hostname = localhost
database.default.database = ci4tutorial
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi

Configuración de su modelo

En lugar de escribir operaciones de base de datos directamente en el controlador, las consultas deben colocarse en un modelo, para que puedan reutilizarse fácilmente más adelante. Los modelos son el lugar donde recupera, inserta y actualiza información en su base de datos u otros almacenes de datos. Proporcionan acceso a sus datos. Puedes leer más sobre esto aquí .

Abra el directorio app/Models/ y cree un nuevo archivo llamado NewsModel.php y agregue el siguiente código.

<?php

namespace App\Models;

use CodeIgniter\Model;

class NewsModel extends Model
{
protected $table = ‘news’;
}

Este código se parece al código del controlador que se usó anteriormente. Crea un nuevo modelo al extender CodeIgniter\Modely cargar la biblioteca de la base de datos. Esto hará que la clase de la base de datos esté disponible a través del $this->dbobjeto.

Ahora que se han configurado la base de datos y el modelo, necesitará un método para obtener todas nuestras publicaciones de nuestra base de datos. Para hacer esto, la capa de abstracción de la base de datos que se incluye con CodeIgniter – Query Builder – se usa en el CodeIgnite\Model. Esto hace posible escribir sus ‘consultas’ una vez y hacer que funcionen en todos los sistemas de bases de datos compatibles.

La clase Modelo también le permite trabajar fácilmente con Query Builder y proporciona algunas herramientas adicionales para simplificar el trabajo con datos. Agregue el siguiente código a su modelo.

<?php
class NewsModel extends Model
{
public function getNews($slug = false)
{
if ($slug === false) {
return $this->findAll();
}

return $this->where([‘slug’ => $slug])->first();
}
}

Conclusión

Con este código, puede realizar dos consultas diferentes para crear su primera aplicación. Puede obtener todos los registros de noticias u obtener una noticia por su slug. Es posible que haya notado que la $slugvariable no se escapó antes de ejecutar la consulta; Query Builder hace esto por usted.

Los dos métodos usados ​​aquí, findAll() y first(), son proporcionados por la clase CodeIgniter\Model. Ya conocen la tabla que se debe usar en función de la propiedad que establecimos anteriormente en la clase NewsModel.

Son métodos auxiliares que utilizan Query Builder para ejecutar sus comandos en la tabla actual y devolver una matriz de resultados en el formato de su elección. En este ejemplo, findAll()devuelve una matriz de matriz.