Scribd
Cargar
69 vistas9 páginas

Tutorial Noticias CodeIgniter

Este documento presenta un tutorial para crear una aplicación básica de noticias usando el framework CodeIgniter. Explica cómo construir páginas estáticas y dinámicas, configurar modelos y bases de datos, y agregar funcionalidad para crear y mostrar artículos de noticias. Se enfoca en conceptos como MVC, ruteo, consultas a bases de datos y validación de formularios.

Cargado por

userjcor
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
69 vistas9 páginas

Tutorial Noticias CodeIgniter

Este documento presenta un tutorial para crear una aplicación básica de noticias usando el framework CodeIgniter. Explica cómo construir páginas estáticas y dinámicas, configurar modelos y bases de datos, y agregar funcionalidad para crear y mostrar artículos de noticias. Se enfoca en conceptos como MVC, ruteo, consultas a bases de datos y validación de formularios.

Cargado por

userjcor
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

CIS UCV Especialista en PHP, MYSQL y CodeIgniter

Tutorial Aplicación Básica de Noticias

Introducción
Este tutorial está pensado para presentarle el framework CodeIgniter y los principios básicos de la
arquitectura MVC. Le mostrará cómo se construye paso a paso una aplicación CodeIgniter básica.

En este tutorial Ud creará una aplicación básica de noticias. Comenzará escribiendo el código que carga
páginas estáticas. Luego creará una sección de noticias que lee ítems de noticias desde una base de datos.
Finalmente, agregará un formulario para crear ítems de noticias a la base de datos.

Este tutorial se enfocará principalmente en:


 Fundamentos de Modelo-Vista-Controlador
 Fundamentos del Ruteo
 Validación de formularios
 Ejecución de consultas básica de base de datos usando el "Active Record"

Tutorial − Páginas Estáticas


Nota: Este tutorial asume que ya descargó e instaló el framework CodeIgniter en su entorno de desarrollo.

La primera cosa que hará es configurar un controlador para manejar páginas estáticas. Un controlador es
simplemente una clase que ayuda a delegar trabajo. Es el núcleo de su aplicación web.

Por ejemplo, cuando se hace una llamada a:

http://ejemplo.com/noticias/ultimas/10

Podemos imaginar que hay un controlador llamado noticias. El método que se llama en noticias sería
ultimas. El trabajo del método de noticias podría ser tomar 10 ítems de noticias y mostrarlos en la página.
Muy a menudo en MVC, verá patrones de URL que con coincidan con:

http://ejemplo.com/[clase-controlador]/[método-controlador]/[argumentos]

Cuando el esquema de URL se hace más complejo, esto puede cambiar. Pero por ahora, esto es todo lo que
necesitamos saber.

Crear un archivo en application/controllers/pages.php con el siguiente código:

<?php
class Pages extends CI_Controller {
public function view($page = 'home')
{

}
}

Se creó una clase llamada "Pages", con un método view que acepta un solo argumento llamado $page. La
clase pages se extiende de la clase CI_Controller. Esto significa que la nueva clase pages puede acceder a los
métodos y variables definidos en la clase CI_Controller (system/core/Controller.php).

Ing. Alejandro Torres Farfán 1


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

El controlador es lo que se convertirá en el centro de cada solicitud de su aplicación web. En discusiones


muy técnicas de CodeIgniter, esto puede referirse como el super objeto. Como cualquier otra clase de PHP,
se referirá a ella dentro de sus controladores como $this. Referirse a $this es como cargará bibliotecas,
vistas y como generalmente utilizará el framework.

Ahora que ha creado su primer método, es momento de hacer alguna plantilla básica de página. Crearemos
dos “vistas” (plantillas de páginas) que actúan como su encabezado y pie de página.

Cree el encabezado en application/views/templates/header.php y agregarle este código:

<html>
<head>
<title><?php echo $title ?> - CodeIgniter 3.0 Tutorial</title>
</head>
<body>
<h1>CodeIgniter 3.0 Tutorial</h1>

El encabezado contiene código HTML básico que mostrará antes de cargar la vista principal, junto al
encabezado. También mostrará la variable $title, que definiremos luego en el controlador. Ahora, cree el
pie de página en application/views/templates/footer.php e incluir este código:

<strong>&copy; 2015</strong>
</body>
</html>

Agregar lógica al controlador


Con anterioridad, establecimos un controlador con el método view(). El método acepta un parámetro, que
es el nombre de la página a cargar. Las plantillas de páginas estáticas se localizarán en el directorio
application/views/pages/.

En ese directorio, cree dos archivos llamados home.php y about.php. Dentro de ellos escriba algún texto –
lo que quiera – y guárdelos. Si no quiere ser particularmente original, escriba "Hola Mundo!".

Para cargar esas páginas, tiene que verificar si la página solicitada realmente existe:

public function view($page = 'home')


{
if ( ! file_exists('application/views/pages/'.$page.'.php'))
{
// vaya, no tenemos una pagina para eso!
show_404();
}

$data['title'] = ucfirst($page); // Capitaliza la primera letra


$this->load->view('templates/header', $data);
$this->load->view('pages/'.$page, $data);
$this->load->view('templates/footer', $data);
}

Ing. Alejandro Torres Farfán 2


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

Ahora, cuando la página exista, se la cargará incluyendo el encabezado y el pie y se la mostrará al usuario.
Si la página no existe, se mostrará el error "404 Page not found" (página no encontrada).

La primera línea de este método verifica si la página existe realmente. Se usa la función nativa de PHP
file_exists() para verificar si el archivo está donde se espera que esté. show_404() es una función interna de
CodeIgniter que presenta la página de error por defecto.

En la plantilla del encabezado, la variable $title se usa para personalizar el título de la página. El valor de
$title se define en el método, pero en lugar de asignarle el valor a una variable, se asigna al elemento title
en el array $data.

La última cosa que tiene que hacer es cargar las vistas en el orden en que se mostrarán. El segundo
parámetro en el método view() se usa para pasar valores a la vista. Cada valor en el array $data se asigna a
una variable con el nombre de su clave. Por lo tanto, el valor de $data['title'] en el controlador es
equivalente a $title en la vista.

Ruteo
¡El controlador ahora está funcionando! Apunte su navegador a [url-de-su-sitio]/index.php/pages/view
para ver la página. Al visitar index.php/pages/view/about verá la página acerca, incluyendo el encabezado y
el pie de página.

Al usar reglas de ruteo personalizadas, ud tiene el poder de mapear cualquier URI a cualquier controlador y
método, liberándose de la convención normal:

http://ejemplo.com/[clase-controlador]/[método-controlador]/[argumentos]

Hagamos eso. Abra el archivo de ruteo localizado en application/config/routes.php y agregue las siguientes
dos líneas. Quite el resto del código y establezca cualquier elemento en el array $route.

$route['default_controller'] = 'pages/view';
$route['(:any)'] = 'pages/view/$1';

CodeIgniter lee sus reglas de ruteo de arriba hacia abajo y rutea las solicitudes a la primer regla que
coincide. Cada regla es una expresión regular (lado izquierdo) mapeada al nombre de controlador y método
separados por barras (lado derecho). Cuando ingresa una solicitud, CodeIgniter busca la primer
coincidencia, y llama al controlador y métodos adecuados, posiblemente con argumentos.

Puede encontrar más información acerca del ruteo en la documentación del Ruteo URI.

Aquí, la segunda regla en el array $routes coincide con cualquier solicitud que use el comodín (:any) y pasa
el parámetro al método view() de la clase Pages.

Ahora visite index.php/about. ¿Se ruteó correctamente al método view() en el controlador de páginas?
¡Maravilloso!

Ing. Alejandro Torres Farfán 3


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

Tutorial − Sección de Noticias


En la última sección, vimos algunos conceptos básicos del framework para escribir una clase que incluía
páginas estáticas. También reformamos la URI al agregar reglas de ruteo personalizadas. Ahora es
momento de introducir contenido dinámico y comenzar a usar la base de datos.

Configurar su modelo
En lugar de escribir operaciones de base de datos directamente en el controlador, las consultas deberían
ubicarse en un modelo, para que se puedan reusar más tarde con facilidad. Los modelos son el lugar donde
se devuelve, inserta y actualiza la información de la base de datos u otros almacenamientos. Ellos
representan sus datos.

Abra el directorio application/models, cree un archivo nuevo llamado news_model.php y agregue el


siguiente código. Asegúrese de haber configurado adecuadamente su base de datos como se describe en la
sección Configuración de la Base de Datos.

<?php
class News_model extends CI_Model {

public function __construct()


{
$this->load->database();
}
}

Este código se ve similar al código del controlador que usamos antes. Crea un nuevo modelo al extender
CI_Model y carga la biblioteca database. Esto hace que la clase Database esté disponible mediante el objeto
$this->db.

Antes de consultar la base de datos, se tiene que crear un esquema de base de datos. Conecte a su base de
datos y ejecute los comandos SQL siguientes. Agregue también algunos registros.

CREATE TABLE news (


id int(11) NOT NULL AUTO_INCREMENT,
title varchar(128) NOT NULL,
slug varchar(128) NOT NULL,
text text NOT NULL,
PRIMARY KEY (id),
KEY slug (slug)
);

Ahora que se configuraron la base de datos y el modelo, necesitará un método para obtener todos los
mensajes desde la base de datos. Para hacer esto se usa la capa de abstracción de base de datos que se
incluye con CodeIgniter — el Active Record. Éste hace posible escribir sus “consultas” una vez y usarlas
luego en todos los sistemas soportados de bases de datos. Agregue este código a su modelo.

public function get_news($slug = FALSE)


{
if ($slug === FALSE)
{

Ing. Alejandro Torres Farfán 4


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

$query = $this->db->get('news');
return $query->result_array();
}
$query = $this->db->get_where('news', array('slug' => $slug));
return $query->row_array();
}

Con este código puede realizar dos consultas diferentes. Puede obtener todos los registros de noticias, o
bien obtener un ítem de noticias mediante su slug. Tiene que advertir que la variable $slug no se
descontaminó antes de ejecutar la consulta; el Active Record hace esto por Ud.

Mostrar las noticias


Ahora que se escribieron las consultas, el modelo debería vincularse a las vistas que van a mostrar los ítems
de noticias al usuario. Esto se puede hacer en su controlador de páginas creado anteriormente, pero en
aras de la claridad, definimos un nuevo controlador news. Cree el nuevo controlador en
application/controllers/news.php.

<?php
class News extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('news_model');
}

public function index()


{
$data['news'] = $this->news_model->get_news();
}

public function view($slug)


{
$data['news'] = $this->news_model->get_news($slug);
}
}

Mirando el código, puede verse alguna similitud con los archivos que creamos anteriormente. Primero, el
método "__construct": llama al constructor de su clase padre (CI_Controller) y carga el modelo, por lo que
se lo puede usar en todos los demás métodos de este controlador.

Lo siguiente son los dos métodos para ver todos los ítems de noticias y uno para ver un ítem específico.
Puede ver que la variable $slug se pasa al método del modelo en el segundo método. El modelo está
usando esta variable para identificar el ítem de noticas a devolver.

Ahora, el controlador devuelve los datos mediante el modelo, pero todavía no se muestra nada. La
siguiente cosa a hacer es pasar estos datos a las vistas.

public function index()


{

Ing. Alejandro Torres Farfán 5


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

$data['news'] = $this->news_model->get_news();
$data['title'] = 'News archive';

$this->load->view('templates/header', $data);
$this->load->view('news/index', $data);
$this->load->view('templates/footer');
}

El código anterior obtiene todos los registros de noticias desde el modelo y lo asigna a una variable. El valor
para el título también se asigna al elemento $data['title'] y todos los datos se pasan a las vistas. Ahora
necesita crear una vista para presentar los ítems de noticias. Cree application/views/news/index.php y
agregue la siguiente porción de código.

<?php foreach ($news as $news_item): ?>

<h2><?php echo $news_item['title'] ?></h2>


<div id="main">
<?php echo $news_item['text'] ?>
</div>
<p><a href="news/<?php echo $news_item['slug'] ?>">View article</a></p>

<?php endforeach ?>

Aquí, cada ítem de noticias se cicla y muestra al usuario. Puede ver que escribimos nuestra plantilla en una
mezcla de PHP y HTML. Si prefiere usar un lenguaje de plantillas, puede usar la clase del Analizador de
Plantillas de CodeIgniter o un analizador de terceras partes.

Ya está hecha la página que muestra las noticias en general, pero todavía falta una página para mostrar
ítems de noticias individuales. El modelo creado anteriormente se hizo de tal forma que se puede usar
fácilmente para esta funcionalidad. Solo tiene que agregar algo de código al controlador y crear una nueva
vista. Regrese al controlador de noticias y agregue estas líneas de código al archivo.

public function view($slug)


{
$data['news_item'] = $this->news_model->get_news($slug);

if (empty($data['news_item']))
{
show_404();
}

$data['title'] = $data['news_item']['title'];

$this->load->view('templates/header', $data);
$this->load->view('news/view', $data);
$this->load->view('templates/footer');
}

Ing. Alejandro Torres Farfán 6


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

En lugar de llamar al método get_news() sin parámetros, se pasa la variable $slug para que devuelva un
ítem de noticias específico. La única cosa que queda por hacer es crear la vista correspondiente en
application/views/news/view.php. Ponga el siguiente código en un archivo.

<?php
echo '<h2>'.$news_item['title'].'</h2>';
echo $news_item['text'];

Ruteo
Debido a la regla de ruteo con comodín creado anteriormente, se necesita una ruta adicional para ver el
controlador que acabamos de hacer. Modifique el archivo de ruteo (application/config/routes.php) para
que se vea como se muestra a continuación. Esto asegura que las solicitudes alcancen al controlador de
noticias, en lugar de ir directamente al controlador de páginas. Las primera línea rutea las URI's con un slug
al método view() en el controlador news.

$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';

Apunte su navegador a la raíz de documentos seguido de index.php/news y vea sus páginas de noticias.

Tutorial - Crear Ítems de Noticias


Ahora Ud sabe como leer datos desde una base de datos usando CodeIgniter, pero todavía no escribió
ninguna información en ella. En esta sección expandiremos nuestro controlador de noticias y modelo
creados anteriormente para incluir esta funcionalidad.

Crear un formulario
Para ingresar datos en la base de datos, necesita crear un formulario donde pueda ingresar la información a
almacenarse. Esto significa que necesitaremos un formulario con dos campos, uno para el título y otro para
el texto. Derivaremos el slug de nuestro título en el modelo. Cree la nueva vista en
application/views/news/create.php.

<h2>Create a news item</h2>


<?php echo validation_errors(); ?>
<?php echo form_open('news/create') ?>
<label for="title">Title</label>
<input type="input" name="title" /><br />

<label for="text">Text</label>
<textarea name="text"></textarea><br />

<input type="submit" name="submit" value="Create news item" />


</form>

Las únicas dos cosas aquí que probablemente no se vean familiares son: las funciones form_open() y
validation_errors().

Ing. Alejandro Torres Farfán 7


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

La primera función la provee el helper form y presenta el elemento form y agrega funcionalidad adicional,
como un campo oculto para evitar la CSRF (del inglés Cross-Site Request Forgery o falsificación de solicitud
de sitios cruzados). La última se usa para informar errores relacionados a la validación del formulario.

Vuelva atrás a su controlador de noticias. Vamos a hacer dos cosas aquí, verificar si el formulario fue
enviado y si los datos enviados pasaron las reglas de validación. Usaremos la biblioteca de validación de
formularios para hacer esto.

public function create()


{
$this->load->helper('form');
$this->load->library('form_validation');

$data['title'] = 'Create a news item';

$this->form_validation->set_rules('title', 'Title', 'required');


$this->form_validation->set_rules('text', 'text', 'required');

if ($this->form_validation->run() === FALSE)


{
$this->load->view('templates/header', $data);
$this->load->view('news/create');
$this->load->view('templates/footer');

}
else
{
$this->news_model->set_news();
$this->load->view('news/success');
}
}

El código anterior agrega un montón de funcionalidad. Las primeras líneas cargan el helper form y la
biblioteca de validación de formularios. Después de eso, se establecen las reglas para la validación del
formulario. El método set_rules() toma tres argumentos: el nombre del campo de entrada, el nombre a
usarse en los mensajes de error y la regla. En este caso, los campos título y texto son obligatorios.

CodeIgniter tiene una poderosa bilioteca de validación de formularios como se demostró antes. Puede leer
más acerca de esta biblioteca en la sección correspondiente a la clase Form_validation.

Más abajo, se puede ver una condición que verifica si la validación del formulario se ejecutó correctamente.
Si no, se muestra el formulario, si se envió y se pasaron todas las reglas, se llama al modelo. Después de
esto, se carga una vista para mostrar el mensaje de éxito. Cree una vista en
application/view/news/success.php y escriba un mensaje de éxito.

Ing. Alejandro Torres Farfán 8


CIS UCV Especialista en PHP, MYSQL y CodeIgniter

Modelo
La única cosa que queda es escribir un método que escriba los datos en la base de datos. Usaremos la clase
Active Record para insertar la información y usaremos la biblioteca Input para obtener los datos publicados.
Abra el modelo creado anteriormente y agregue lo siguiente:

public function set_news()


{
$this->load->helper('url');
$slug = url_title($this->input->post('title'), 'dash', TRUE);
$data = array(
'title' => $this->input->post('title'),
'slug' => $slug,
'text' => $this->input->post('text')
);
return $this->db->insert('news', $data);
}

Este nuevo método se encarga de insertar el ítem de noticias en la base de datos. La tercera línea contiene
una nueva función, url_title(). Esta función – provista por el helper URL - desarma la cadena que se le pasa,
reemplazando todos los espacios por guiones (-) y asegurando que todos los caracteres estén minúsculas.
Esto le deja un bonito slug, perfecto para crear URIs.

Continuemos con la preparación del registro que se insertará luego, dentro del array $data. Cada elemento
corresponde con una columna en la tabla de la base de datos creada anteriormente. Aquí puede advertir
un nuevo método llamado post() de la biblioteca Input. Este método se asegura que los datos se
descontaminen, protegiéndolo a Ud de desagradables ataques de terceros. La biblioteca Input se carga por
defecto. Por último, insertamos nuestro array $data en la base de datos.

Ruteo
Antes que pueda comenzar a agregar ítems de noticias en su aplicación CodeIgniter, Ud tiene que agregar
una regla adicional en el archivo config/routes.php. Asegúrese que el archivo contenga lo siguiente. Esto
asegura que CodeIgniter vea a 'create' como un método, en lugar de un slug de ítem de noticias.

$route['news/create'] = 'news/create';
$route['news/(:any)'] = 'news/view/$1';
$route['news'] = 'news';
$route['(:any)'] = 'pages/view/$1';
$route['default_controller'] = 'pages/view';

Ahora apunte su navegador a su entorno de desarrollo local donde instaló CodeIgniter y agregue
index.php/news/create a la URL. ¡Felicitaciones, acaba de crear su primera aplicación CodeIgniter! Agregue
alguna noticia y consulte las distintas páginas que creó.

Tutorial - Conclusión
Este tutorial no cubre todas las cosas que puede esperar de un sistema de administración de contenidos
completamente desarrollado, pero le presenta los tópicos más importantes de ruteo, escritura de
controladores y modelos. Esperamos que este tutorial le haya dado una idea de algunos de los patrones de
diseño básicos de CodeIgniter, los cuales puede ampliar.

Ing. Alejandro Torres Farfán 9

También podría gustarte