Repaso 3: Creamos páginas para mostrar artículos

  • Por
  • PHP
Ampliamos las posibilidades de esta primera aplicación web de prueba. Hacemos las modificaciones en el modelo, vistas y controlador para mostrar las páginas de artículos.
Cabe señalar antes que nada que este artículo es la continuación de una serie de entregas del Manual de CodeIgniter, en el que estamos haciendo un repaso de lo que llevamos aprendido para hacer una aplicación web. Si te interesa y no has leído los repasos anteriores, debes comenzar por el artículo

En las próximas modificaciones o mejoras en el código de nuestra aplicación de artículos pretendo hacer la parte en la que se muestran los artículos completos, es decir, las páginas que mostrarán cada uno de los artículos que tenemos en nuestra base de datos, con su texto completo.

En principio, los enlaces para acceder a estas páginas están en la portada de nuestra aplicación y los hemos hecho en la vista "home", creada anteriormente. Podemos observar que los enlaces de la portada, que nos mostraban los últimos 5 artículos publicados, van a URLs como estas:

http://localhost/index.php/articulos/muestra/1
http://localhost/index.php/articulos/muestra/4

Como se puede ver, tenemos una URL que pasa por el directorio artículos (el controlador de artículos), el directorio muestra (que es la función que tenemos que realizar en el controlador para atender esta URL) y el número del identificador del artículo que deseamos ver (que es el parámetro que se enviará a la función muestra() del controlador).

Así pues, tenemos que hacer varias cosas para que esas URL funcionen y muestren el contenido de los artículos.

9.- Ampliación del modelo

Ahora vamos a hacer el modelo para que tenga una función que devuelva los datos de un artículo cuyo identificador pasaremos por parámetro. La nueva función devolverá un array con los datos del artículo encontrado, o false en caso que no encuentre el artículo.

<?php
class Articulo_model extends Model {

   function __construct(){
      parent::Model();
   }
   
   function dame_ultimos_articulos(){
      $ssql = "select * from articulo order by id desc limit 5";
      return mysql_query($ssql);
   }
   
   function dame_articulo($id){
      $ssql = "select * from articulo where id=" . $id;
      $rs = mysql_query($ssql);
      if (mysql_numrows($rs)==0){
         return false;
      }else{
         return mysql_fetch_array($rs);
      }
   }
}
?>

Como se puede ver, es exactamente el modelo anterior, en el que hemos creado la función dame_articulo().

10.- Ampliación del controlador

En este momento queremos que el controlador de artículos también muestre las páginas con los artículos, que tendrán URL como estas:

http://localhost/index.php/articulos/muestra/3

Así pues, tenemos que crear la función muestra() en el controlador, que recibe un parámetro que es el id del artículo que se desea ver. Esta función tendrá que solicitar al controlador los datos del artículo en cuestión y enviarlos a una vista para que lo muestre. Además, en caso que se intente acceder a artículos que no existen en la base de datos, tenemos que mostrar un error 404 de página no encontrada.

Pongo el código del controlador, tal como quedaría después de incorporar esta nueva función.

<?php
class Articulos extends Controller {
   function index(){
      //cargo el helper de url, con funciones para trabajo con URL del sitio
      $this->load->helper('url');
      
      //cargo el modelo de artículos
      $this->load->model('Articulo_model');
      
      //pido los ultimos artículos al modelo
      $ultimosArticulos = $this->Articulo_model->dame_ultimos_articulos();
      
      //creo el array con datos de configuración para la vista
      $datos_vista = array('rs_articulos' => $ultimosArticulos);
      
      //cargo la vista pasando los datos de configuacion
      $this->load->view('home', $datos_vista);
   }
   
   function muestra($id){
      //cargo el helper de url, con funciones para trabajo con URL del sitio
      $this->load->helper('url');
      
      //cargo el modelo de artículos
      $this->load->model('Articulo_model');
      
      //pido al modelo el artículo que se desea ver
      $arrayArticulo = $this->Articulo_model->dame_articulo($id);
      
      //compruebo si he recibido un artículo
      if (!$arrayArticulo){
         //no he recibido ningún artículo
         //voy a lanzar un error 404 de página no encontrada
         show_404();
      }else{
         //he encontrado el artículo
         //muestro la vista de la página de mostrar un artículo pasando los datos del array del artículo
         $this->load->view('muestra_articulo', $arrayArticulo);
      }
   }
}
?>

Nos tenemos que fijar en la nueva función creada: muestra(). En esta función cargamos el helper de URL (aun no hemos hablado de los helpers, pero lo veremos pronto). Luego cargamos el modelo de artículos y solicitamos el artículo al modelo. Luego comprobamos si existe el artículo. Si no existe, lanzamos un error 404, con la función show_404() (tampoco hemos visto aun la gestión de errores). Si existe, llamamos a la vista que debe mostrar el contenido completo del artículo, enviando el array con los datos del artículo encontrado.

Nos fijamos que la vista que solicitamos "muestra_articulo" no ha sido creada todavía.

11.- Creo la vista que muestra el artículo

Para acabar esta etapa de la construcción de nuestra web, vamos a crear la vista "muestra_articulo", que tiene que mostrar el contenido del artículo al usuario. Tiene un código muy sencillo.

<html>
<head>
<title><?=$titulo?></title>
</head>
<body>
<h1><?=$titulo?></h1>
<blockquote><b><?=$titulo?></b></blockquote>
<?=nl2br($cuerpo)?>
<p><a href="<?=site_url()?>">Volver</a></p>
</body>
</html>

Como se puede ver, se muestran todos los datos del artículo, con su título, descripción y cuerpo completo. Luego tenemos un enlace de volver que nos llevará a la portada del sitio, cuya URL obtenemos con la función site_url() que tenemos disponible al haber cargado el helper "url" en el controlador.

Ahora podemos comprobar, entrando a la portada del sitio, que los enlaces a los últimos artículos ya están funcionando. Si los pulsamos accederemos a las páginas que acabamos de hacer en esta etapa, en la que se nos muestra el contenido de los artículos. Si intentamos acceder a una URL de un artículo que no existe, como:

http://localhost/codeigniter/index.php/articulos/muestra/923

Podremos visualizar un error 404 de página no encontrada.

Hasta aquí tenemos nuestra aplicación que muestra artículos a sus visitantes, cargados en una base de datos. Es una aplicación incompleta, puesto que a poco que nos imaginemos, se nos ocurrirán multitud de cosas para mejorarla. Sin embargo, nuestro objetivo era más bien que los lectores sean capaces de entender el patrón de desarrollo de CodeIgniter, el MVC.

Quizás penséis que, siguiendo vuestras costumbres habituales de desarrollo en PHP, podríais haber hecho esta pequeña aplicación en menos tiempo y quizás con menos código fuente. No obstante, a medio plazo observaremos los beneficios de codificar por medio de los controladores, vistas y módulos, con los que obtendremos código más claro, organizado, y con mantenimiento más sencillo, entre diversas ventajas.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

EdJa

10/3/2010
Buen ejemplo
Me parecio buen ejemplo, estoy lentamente con CodeIgniter hace un tiempo y con symfony, semana de por medio con cada uno, y con el framework de Zend

como observación veo que el uso <?=$titulo?> o sea <?= ...... ?> si bien se puede usar, este no respeta los estándares

creo que debería corregirse asi para los que comienzan con php aprenden bien desde el principo algo tán básico

creo que hay buenos tutoriales por aqui y buena información, visito a diario desarrolloweb


saludos cordiales desde argentina

XeOn

13/3/2010
Gracias!
Es sorprendete como con este tutorial en dos horas aprendi todo lo que necesitaba para empezar con codeigniter.

Gracias M.A.

Ana

18/3/2010
Conexión BD + CSS
Magnífico manual, me ha ayudado mucho.
Cómo se hace la conexión a la BD de forma manual?
No consigo que las CSS funcionen, he puesto el archivo y la carpeta con las imágenes en la carpeta system sin resultado, luego he provado en la carpeta system/application con la misma suerte.

Gracias.

Distriker

20/3/2010
Ya está
Ya está, he llegado al final (a día de hoy), y creo que a partir de aquí ya puedo hacer yo mismo las cosas que con el CodeIgniter se pueden hacer.

Saludos

jose_lakatos

23/3/2010
Error al volver
Buenas ,he puesto en practica la pequeña aplicacion que habeis propuesto para iniciarnos en el uso de este Framework y me sale un error al pulsar el enlace volver.
En la vista de muestra_articulos.php si puslo en el enlace volver:

<a href="<?=base_url()?>">Volver</a>

me sale el siguiente error:

An Error Was Encountered

The URI you submitted has disallowed characters.

¿alguna idea? seguire investigando..

jose_lakatos

24/3/2010
Solucionado!
Despues de un ratito investigando..ya esta solucionado.Por lo visto tenia 2 problemas:

1.Mi editor(Aptana) no interpreta el codigo php que metes con <?= .. ?> sino que tengo que usar <?php ... ?>

2.Por otro lado no se porque extraña razon tenia en mi codigo en lugar del metodo site_url() tenia base_url()...algun despiste.

Alguien que usa Aptana sabe como configurarlos para que acepte el codigo PHP tambien con <?= ?> ???
Un saludo!

midesweb

24/3/2010
CSS y CodeIgniter
Hola,

El tema del CSS en CodeIgniter... ¿por qué lo metes en el directorio system? No creo que sea una buena idea, pues allí van los archivos de CodeIgniter.

Yo lo dejaría en la raíz de tu dominio o directorio raíz de publicación. O si tienes CodeIgniter instalado en un directorio, pon el directorio CSS en ese directorio. Es decir, el directorio de los CSS o las imágenes, colócalo al mismo nivel donde está el directorio system.

Por ejemplo, mi directorio system está aquí:
C:xampphtdocscodeignitersystem

Y mi directorio de las CSS está aquí:
C:xampphtdocscodeignitercss

jose_lakatos

24/3/2010
CSS con CodeIgniter
Ana,como bien dice Eugim,lo correcto es crearte un directorio a nivel de system (asi lo he visto en varios sitios).Por otro lado en la vista que desees traerte tus estilos externos debes hacerlo de la siguiente forma:

<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/style.css" media="screen" />

Asi te debería funcionar,a mi me funciona.Un saludo!

Ana

27/3/2010
CSS y CodeIgniter
Ahora si!

Gracias Eugim y Jose.

Angel Infante

18/5/2010
Al Seleccionar un articulo me muestra un error.
Hola; acabo de copiar el ejemplo tal cual como esta y no me funciona... Me aparece el siguiente error:

Not Found

The requested URL /ci/articulos/muestra/7 was not found on this server.
Apache/2.2.8 (Ubuntu) PHP/5.2.4-2ubuntu5.9 with Suhosin-Patch Server at localhost Port 80

Andres

02/8/2010
link css
Tambien puedes usar para conectarte a tus css usando <?php echo link_tag('carpeta_css/mi_estilo.css');?> la carpeta debes copiarla al nivel de system

Suerte!!!

leosuaar

16/8/2010
Aviso
Muy bien el manual!


Lo he estado leyendo todo, he hice la práctica. Sin embargo, en la parte donde se hace clic a un artículo y muestra la otra página, existe un link para volver. Resulta que ese enlace no funciona ya que la URL para retornar a la página principal se está formando mal. Para corregirlo, decidí utilizar el método anchor() que aparece en el helper de URL. Me quedó algo así en la página muestra_artículo.php:

<p><?php echo anchor('','Volver'); ?></p>

ciberwap

22/8/2010
vista muestra_articulo
al final quedaria asi para los mas principiantes como yo ;)
<html>
<head>
<title><?php $titulo; ?></title>
</head>
<body>
<h1><?php echo $titulo; ?></h1>

<blockquote><b><?php echo $titulo; ?></b></blockquote>

<?php echo nl2br($cuerpo); ?>

<p><a href="<?php site_url(); ?>">Volver</a></p>
</body>
</html>


y la url: http://localhost/CodeIgniter/index.php/ciberwap/muestra/1
ciberwap/muestra/1 - en mi caso de prueba ciberwap es el nombre de tu controlador que le pusiste el cual dentro de ese controlador estaria la funcion llamada muestra

David

29/1/2013
Y yo estrujándome el cerebro
Muy buen tutorial, sin embargo no conseguía saber porque encerrabais el recurso obtenido de la msql_query del modelo en un array.

En otras palabras:
$datos_vista = array('rs_articulos' => $ultimosArticulos);

Y la respuesta para esto:
$this->load->view('home', $datos_vista);

Al final averigué que SOLO y exclusivamente SOLAMENTE codeigniter permite pasar arrays y objetos a la vista mediante el método load().

Casi me vuelvo loco sacándole la lógica.

De todas formas gracias por el tutorial :)

Luis

27/8/2014
Problema solucionado con mysql_numrows
En primer lugar muchas gracias por el manual. Me está sirviendo de mucha ayuda para empezar con CodeIgniter
Me encontré con este mensaje al ejecutar la página para mostrar artículos
Message: Function mysql_numrows() is deprecated
Filename: models/articulo_model.php
Line Number: 16

Tras investigar un poco por la red me encontré con que la función mysql_numrows() ya está obsoleta, y ahora se utiliza para los mismos fines: mysql_num_rows()