27 enero, 2009

Empezando con CodeIgniter

Nota: He traducido el tutorial de Kohana, derivado de CodeIgniter y al que algunos consideran una mejora considerable sobre éste.
He traducido este excelente tutorial sobre la librería PHP CodeIgniter por Ben Haines.

CodeIgniter es una librería de aplicaciones web para PHP. Permite a los desarrolladores construir aplicaciones web más rápidamente, y ofrece útiles librerías de código y atajos que aceleran las tareas tediosas en PHP. CodeIgniter se basa en un diseño modular (lo que quiere decir que puedes implementar librerías específicas a voluntad) lo que repercute en una mayor velocidad del sistema. Este tutorial intentará mostrar los pasos básicos de instalar la librería, incluyendo como construir una aplicación web básica hola mundo que utiliza un enfoque MVC.

¿Por qué una librería?


Las librerías permiten estructurar las aplicaciones al desarrollarlas ofreciendo clases reusables y funciones que pueden reducir significativamente el tiempo de desarrollo. Algunas pegas de las librerías es que ofrecen clases no necesitadas, añadiendo exceso de código que dificulta encontrar las cosas.

¿Por qué CodeIgniter?




Lo básico de CodeIgniter

CodeIgniter es una librería muy ligera con buen rendimiento. Mientras que resulta perfecta para el principiante (a causa de su pequeña curva de aprendizaje), también resulta perfecta para aplicaciones web grandes y exigentes. CodeIgniter está desarrollada por EllisLab y dispone de una documentación accesible y fácil de comprender. Una lista de razones que hacen de CodeIgniter una librería adecuada:
  • Usa pocos recursos pero ofrece un rendimiento excepcional
  • Enfoque MVC para el desarrollo (aunque permite bastante flexibilidad al utilizar una estructura poco rígida)
  • Genera URLs limpias aptas para motores de búsqueda
  • Fácilmente extensible
  • Funciona sobre PHP 4 (a partir de 4.3.2) y PHP 5
  • Soporta las principales bases de datos incluyendo MySQL (a partir de 4.1), MySQLi, SQL Server, Postgres, Oracle, SQLite y ODBC
  • La seguridad de la aplicación es un objetivo básico
  • Operaciones cacheadas fácilmente
  • Módulos y atajos que ayudan con las operaciones complejas como email, manipulación de imágenes, validación de formularios, subida de archivos, sesiones, aplicaciones multilenguaje y creación de apis para una aplicación
  • La mayoría de módulos sólo se cargan cuando son necesarios, lo que redunda en un drástico recorte de los recursos necesarios

¿Por qué un MVC?


Para los principiantes, MVC significa Modelo, Vista, Controlador. Es un patrón de programación usando para desarrollar aplicaciones web. Este patrón aisla la interfície de usuario y el backend (p.e. la interacción de la base de datos de todo lo demás. Una implementación correcta de esto permite que los desarrolladores modifiquen su interfície de usuario o backend sin afectar a la otra parte. MVC también incrementa la flexibilidad de una aplicación permitiendo la reutilización continua de los modelos o vistas). A continuación se puede encontrar una descripción de MVC.
  • Modelo: El modelo trata con los datos en su origen y con la interacción con la base de datos y contendrá funciones como agregar registros a la base de datos o seleccionar registros específicos de la base de datos. En CodeIgniter el componente modelo no es requerido y puede ser incluido en el controlador.
  • Vista: La vista trata con la visualización de los datos y con la interfície que el usuario controla. En CodeIgniter (o CI) la vista puede ser una página web, una fuente RSS, datos Ajax o cualquier otra "página".
  • Controlador: El controlador actúa como el intermediario entre la vista y el modelo y, como su nombre sugiere, controla lo que se envía desde el modelo hacia la vista. En CI, el controlador también es el lugar donde cargar módulos y atajos.

Un ejemplo de un enfoque MVC sería el de un formulario de contacto.
  1. El usuario interactúa con la vista rellenando un formulario y enviándolo.
  2. El controlador recibe los datos POST del formulario, y envía estos datos al modelo que es quien actualiza la base de datos.
  3. El modelo envía el resultado de la base de datos al controlador.
  4. El resultado es actualizado en la vista y mostrado al usuario.

Esto puede sonar como mucho trabajo que hacer. Pero creeme, cuando se empieza a trabajar con aplicaciones grandes, poder reutilizar modelos o vistas ahorra un montón de tiempo.

Paso 1. Descargar CodeIgniter


Para empezar se necesita descargar CodeIgniter y subirlo a un servidor web. Apuntar el navegador a http://www.codeigniter.com/ y pulsa sobre el gran botón de descarga. Para este tutorial se usará la versión 1.70.



Paso 2. Instalar y explorar CodeIgniter


Una vez descargado, sólo es necesario descomprimir el Zip y renombrar la carpeta "CodeIgniter_1.7.0" al nombre de la aplicación deseada o, en este caso, "ci" y subirla a un servidor con soporte de PHP y MySQL. Ahora que está en el servidor, explicaré para qué son las carpetas y archivos:

  • La carpeta system almacena todos los archivos que hacen que CI funcione
    • La carpeta de aplicación es casi idéntica al contenido de la carpeta de sistema para que que el usuario pueda tener archivos que sean particulares de la aplicación, por ejemplo si un usuario quiere cargar un atajo en una aplicación, lo ubicaría en la carpeta system/application/helpers en lugar de la de system/helpers.
      • La carpeta config almacena todos los archivos de configuración relevantes para la aplicación. Eso incluye qué librerías debe auto-cargar la aplicación y detalles de la base de datos.
      • La carpeta controllers almacena todos los controladores de la aplicación.
      • La carpeta errors almacena todas las páginas de patrones de errores de la aplicación. Cuando un error aparece, se genera una página de error a partir de uno de estos patrones.
      • La carpeta hooks contiene extensiones que modifican el funcionamiento de los archivos del núcleo de CI. Están pensados para los usuarios avanzados de CI.
      • La carpeta language contiene líneas de texto que pueden ser cargadas a través del módulo de lenguaje para crear sitios multilenguaje.
      • La carpeta libraries contiene todas las librerías o módulos específicos para la aplicación.
      • La carpeta models almacena los modelos de la aplicación.
      • La carpeta views almacena las vistas de la aplicación.
    • La carpeta cache almacena los caches generados por el módulo de caché.
    • La carpeta codeigniter almacena los archivos necesarios para que CI funcione.
    • La carpeta database almacena todos los drivers de base de datos y las clases que habilitan las conexiones a bases de datos.
    • La carpeta fonts almacena todas las fuentes que pueden ser usadas por el módulo de manipulación de imágenes.
    • La carpeta helpers contiene los atajos del núcleo de CI, pero es posible ubicar otros atajos personales para que accedan todas las aplicaciones.
    • La carpeta language contiene los archivos de lenguaje del núcleo de CI que usan sus módulos y atajos, pero es posible ubicar carpetas de lenguaje para que accedan todas las aplicaciones.
    • La carpeta libraries almacena las librerías del nucleo de CI, pero es posible ubicar otras librerías personales para que sean accedidas por todas las aplicaciones.
    • La carpeta logs contiene todos los logs (registros) generados por CI.
    • La carpeta plugin almacena todos los plugins que pueden ser usados. Los plugins son casi idénticos a los atajos (helpers). Son funciones dirigidas a ser compartidas por la comunidad.
    • La carpeta scaffolding almacena todos los archivos que hacen que la clase scaffolding (andamiaje) funcione. Scaffolding permite una interfície CRUD (Create-Read-Update-Delete) conveniente para acceder a la información de la base de datos durante el desarrollo.
  • La user_guide guarda la guía de usuario de CI.
  • El archivo index.php es el elemento que gestiona toda la magia de CI y permite cambiar el nombre de las carpetas de sistema y de aplicación.

Paso 3: Configurar CodeIgniter


Conseguir que CI se ponga en marcha y funcione es bastante simple. Principalmente requiere editar unos pocos archivos de configuración.

Se necesita configurar CI para que apunte a la URL base correcta de la aplicación. Para hacerlo, hay que abrir system/application/config/config.php y editar la variable array base_url para que apunte a tu servidor y carpeta CI.
$config['base_url'] = "http://localhost/ci/";

Paso 4: Probando CodeIgniter


Haremos un rápido test para ver si CI está en marcha y funcionando adecuadamente. Dirígete a http://localhost/ci/ y deberías ver lo siguiente.



Paso 5: Configurando CodeIgniter (continuación)


Si está en marcha y funcionando, deberíamos terminar la configuración. Estamos empezando a configurarlo específicamente para nuestra nueva aplicación holamundo. Si quieres usar una base de datos con tu aplicación (cosa que haremos en este tutorial), abre system/application/config/database.php y establece los siguientes elementos a los valores correspondientes. Este código conecta a una base de datos MySQL llamada "holamundo" en localhost con el usuario "root" y la clave "root".
$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "root";
$db['default']['database'] = "holamundo";
$db['default']['dbdriver'] = "mysql";
Además, como vamos a usar la base de datos un poco, queremos que se cargue automáticamente para no tener que hacerlo cada vez que conectemos. Abre system/application/config/autoload.php y agrega 'database' a la variable array de carga automática de módulos.
$autoload['libraries'] = array('database');
Actualmente, la configuración de CI tendrá un controlador predefinido llamado "welcome.php" que se puede encontrar en la carpeta system/application/controllers. Para este tutorial, bórralo y abre el archivo system/application/config/routes.php y cambia el la variable de ruta predefinida para que apunte al controlador "holamundo".
$route['default_controller'] = "Helloworld"
CI también tiene un archivo de vista que no necesitamos. Abre la carpeta system/application/view/ y elimina el archivo welcome_message.php.

Paso 6: Crea la base de datos Holamundo


Puesto que esto no es un tutorial de MySQL, esta sección será corta. Crea una base de datos llamada "holamundo" y ejecuta el siguiente código SQL mediante phpMyAdmin o cualquier otro cliente MySQL.
CREATE TABLE `data` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(255) NOT NULL,
  `text` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `data` (`id`, `title`, `text`) VALUES(1, 'Hello World!', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla 
sapien eros, lacinia eu, consectetur vel, dignissim et, massa. Praesent suscipit nunc vitae neque. Duis a ipsum. Nunc a erat. Praesent 
nec libero. Phasellus lobortis, velit sed pharetra imperdiet, justo ipsum facilisis arcu, in eleifend elit nulla sit amet tellus. 
Pellentesque molestie dui lacinia nulla. Sed vitae arcu at nisl sodales ultricies. Etiam mi ligula, consequat eget, elementum sed, 
vulputate in, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;');

Paso 7: Crea el modelo Holamundo



Los modelos son opcionales en CI, pero está considerada una buena práctica el utilizarlos. Se trata de simples clases PHP que contienen funciones que trabajan con información de la base de datos. Crea un archivo helloworld_model.php en la carpeta system/application/models. En este archivo, crea una clase Helloworld_model, con un constructor Helloworld_model y una función getData.

En la función getData vamos a usar funciones de base de datos Active Record que aceleran el desarrollo cuando se trabaja con CI y bases de datos. Esencialmente se trata de funciones simplificadas para crear consultas.
<?php
class Helloworld_model extends Model {

    function Helloworld_model()
    {
        // Call the Model constructor
        parent::Model();
    }
    
    function getData()
  {
   //Query the data table for every record and row
   $query = $this->db->get('data');
   
   if ($query->num_rows() > 0)
   {
    return $query->result();
   }else{
    //show_error('Database is empty!');
   }
  }

}
?>

Paso 8: Crea el controlador Holamundo



Creemos un controlador que muestre la vista y cargue el modelo. De esa forma, cuando vayas a la dirección http://localhost/ci/index.php/helloworld/, verás datos que vienen de la base de datos. En la carpeta system/application/controllers, crea un archivo llamado helloworld.php. Ahí crearemos una clase que tiene el mismo nombre que el archivo.

Dentro de esta clase, necesitas crear una función llamada "index". Esta es la función que se mostrará cuando no se indique otra (por ejemplo al visitar http://localhost/ci/index.php/helloworld/). Si, por ejemplo, creasemos una función llamada foo, podríamos encontrarla en http://localhost/ci/index.php/helloworld/foo/.

Lo que hay que recordar es cómo CI estructura sus URLs. Es decir: http://host/codeignitordirectory/index.php/class/function

En la función index del controlador necesitamos cargar el modelo, consultar la base de datos, y pasar los datos solicitados a la vista. Para cargar cualquier recurso en CI (como módulos, atajos, vistas o modelos) usamos la clase load. Tras cargar el modelo, podemos acceder a él a través de su nombre y de la función particular deseada. Para pasar datos a la vista, necesitamos asignarla a un elemento de array y pasar el array, lo cuál recrea los elementos del array como una variable en el archivo de vista.
<?php
 class Helloworld extends Controller{
  function index()
  {
   $this->load->model('helloworld_model');

   $data['result'] = $this->helloworld_model->getData();
   $data['page_title'] = "CI Hello World App!";

   $this->load->view('helloworld_view',$data);
     }
 }
?>

Si visitamos http://localhost/ci/index.php/helloworld/ ahora, no funcionará. Eso se debe a que aún no hemos creado el archivo de la vista.



Paso 9: Crea la vista Holamundo


El archivo de vista es lo que el usuario ve y con lo que interactúa, pudiendo ser un segmento de una página o una página entera. Puedes pasar un array de variables a la vista a través del segundo argumento de la función de carga del modelo. Para crear la vista de nuestro tutorial, crea un nuevo archivo llamado helloworld_view.php en la carpeta system/application/view. Ahora, necesitamos crear los elementos normales html, head y body y entonces crear una cabecera y un párrafo para la información que vendrá de la base de datos. Para mostrar todos los registros recibidos de la base de datos, ponemos un bucle foreach que recorra todos los elementos.
<html>
 <head>
  <title><?=$page_title?></title>
 </head>
 <body>
  <?php foreach($result as $row):?>
  <h3><?=$row->title?></h3>
  <p><?=$row->text?></p>
  <br />
  <?php endforeach;?>
 </body>
</html>

Es posible que te hayas dado cuenta de que estamos usando una sintaxis alternativa de PHP que ofrece una forma conveniente de escribir comandos echo y que además ahorra tiempo.

Paso 10: Ta-da y algunos Extras


Cuando visites target="_blank">http://localhost/ci/index.php/helloworld/ deberías ver algo similar a lo siguiente:


Pero aún no hemos terminado. Hay unas pocas cosas que mejoran la experiencia con CodeIgniter - como eliminar ese molesto "index.php" de la URL. Es posible hacerlo creando un archivo .htaccess en la carpeta raíz y añadiendo el siguiente código.
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ ci/index.php/$1 [L]

También necesitarás abrir el archivo config.php de system/application/config/ y editar el elemento index_page asignándole una cadena vacía.
$config['index_page'] = ""; 
Otro truco es activar la habilidad de CI de parsear la sintaxis alternativa de PHP, si no está habilitada por defecto en el servidor. Para conseguirlo, abre el mismo archivo que antes (system/application/config/config.php) y edita el elemento rewrite_short_tags con el valor TRUE.
$config['rewrite_short_tags'] = TRUE;
Y con esto llegamos al final del tutorial. Una aplicación simple de CodeIgniter que permite entender cómo se estructura el código con esta librería, aunque no se pueden ver todas sus ventajas hasta que se empiecen a crear aplicaciones un poco más complejas. Espero que haya sido de utilidad. Addendum: En NetTuts ofrecen 6 trucos u optimizaciones muy interesantes si vas a utilizar la librería.

38 comentarios:

MARCELOABELDA dijo...

Hay un error en

Paso 7: Crea el modelo Holamundo

15. if ($query->num_rows() > 0)
16. {
17. //show_error('Database is empty!');
18. }else{
19. return $query->result();
20. }

debería ser:

15. if ($query->num_rows() > 0)
16. {
17. return $query->result();
18. }else{
19. //show_error('Database is empty!');
20. }

o cualquier otra opción válida.

EXCELENTE ARTÍCULO !!!!!!!!!

saludos.
desde www.marceloabelda.com.ar

digitta dijo...

Cierto. Hice copia-pega del artículo original. Lo corrijo... Gracias Marcelo.

Anónimo dijo...

Como cargo una imagen en la vista

José Rico dijo...

Como en html img src=""

Anónimo dijo...

algun ejemplo con la libreria login? >_<

Omar Malave (Blackberry) dijo...

hola, monte mi servidor de pruebas y para sorpresa mia, no me muestra las paginas de error 404, osea muestra las de apache normal! que pasara? en mi windows todo bien pero en el linux no me va!

Omar Malave (Blackberry) dijo...

hola, no me van los errores 404 cuando trato de llamar un controlador que no existe, es decir en mi windows todo bien pero en linux no, arme mi servidor de pruebas y no me anda, sera algo del mod_rewrite?

Anónimo dijo...

hola, yo trato de gestionar mi intranet con el CI, y siguiendo los pasos solo me muestra los textos de forma desarticulada y no las imagenes
si me pudieran dar una solucion ...agradecido

Victor Manuel dijo...

Buen totorial :P

John dijo...

Primero gracias por compartir este valioso manual. Mas encima lo has traducido. Gracias

Fermuch dijo...

Hola. Tuve un problema con el .htaccess
Lo solucione así:

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L]

Anónimo dijo...

BACAN EL ARTÍCULO..., MUCHAS GRACIAS...
By Mafuen

Anónimo dijo...

Eres lo maximo amigo, gracias, de verdad

Àl dijo...

Gracias. Intentaré seguir con el nivel aunque últimamente tengo un poco parado el blog...

Anónimo dijo...

¡Muy bueno! Agradecido, porque ya me cansé de hacer fuego frotando dos palitos... Otra (por el cartelito que apareció): Estaba usando el INNOMBRABLE EEXPLORADOR por casualidad, tengo Chrome, Opera y Firefox en W, y Opera y Firefox en Linux. ¡Ya bastante me paspa IE cuando me obliga a hacer magia negra con mis páginas!

Guillermo, Montevideo.

Anónimo dijo...

impecable! segui con estos muy buenos manuales

Anónimo dijo...

Discumpen a mi no me salio XD.... me sale esto:

title?>

text?>

y mi BD si tiene los datos =...k creen k sea...yo la pase igual no se si algo debi ponerlo o agregarle???

guitarrero dijo...

muy bueno el post. gracias

yo tuve un problema con el constructor de la clase helloworld_model, no daba ni atras ni adelante, no se si es por alguna configuracion (soy muy nuevo en esto de los frameworks), pero lo solucione cambiando model porconstruct asi funciono.

nuevamente muchas gracias.

Aviador dijo...

Buenas!

Me quedo en el paso nº8. Me pinta un error, relacionado con el constructor.

Fatal error: Class 'Controller' not found in C:\xampp\htdocs\code_php\application\controllers\helloworld.php on line 3

Puede ser que este CI corra en php4?

Wizardx dijo...

http://localhost/portal/index.php/helloworld.php/

hola una ayuda plix me marca

404 Page Not Found

The page you requested was not found.


ya hice todos lo pasos una y otra ves exactamente como dice ahi y no me sale que sera

Wizardx dijo...

404 Page Not Found

The page you requested was not found.



me da este error
esta es mi direccion
http://localhost/portal/index.php/helloworld.php

ya hice el archivo vista y todos los pasos como marcan ahi pero me da error alguien que me ayude porfa para ver donde esta mi error

Wizardx dijo...

http://localhost/portal/index.php/

Fatal error: Class 'Controller' not found in C:\AppServ\www\portal\application\controllers\helloworld.php on line 2

me da este error en la siguiente linea de arriba pero cuando agrego helloword me marca error


404 Page Not Found

The page you requested was not found.

http://localhost/portal/index.php/helloword/

Anónimo dijo...

Felicidades, muy buen tutorial para personas que nunca antes habian usado este maravilloso framework, todo esta muy claro...Sigue asi

Lupita dijo...

hola chicos disculpen a mi me sale esto:

title?>

text?>

y mi BD si tiene los datos

que necesito agregar o cual seria mi problema, muchas gracias!.

Excelente tutorial

Anónimo dijo...

Me gusto mucho tu tutorial, solo que tengo una pregunta.

muestro una tabla con los siguiente datos:

#producto|fecha ingreso|proveedor|descripcion

pero me gustaria que el usuario pueda presionar #producto y ordenarlos conforme a este id. o por fecha de ingreso o por proveedor.

Desearia algo como la funcionalidad que tiene las tablas de mysql que al presionar algun encabezado las ordena con respecto a el.

Me gustario mucho que me oriente.

muchas gracias

Marlon Martos Quiroz dijo...

hola muchas gracias pr la informacion aqui postada, tube algunos problemas pero .. se solucionaron basicamente por declaracion de las extenciones por versiones del codeneig... aqui podemos complementar con todo esto . http://www.forosdelweb.com/f68/error-codeigniter-2-0-2-a-917097/ .. gracias....
----
load->model('helloworld_model');

$data['result'] = $this->helloworld_model->getData();
$data['page_title'] = "CI Hello World App!";

$this->load->view('helloworld_view',$data);
}
}
?>
y en
----
db->get('data');

if ($query->num_rows() > 0) {
return $query->result();
} else {
//show_error('Database is empty!');
}
}

}
----
---

Àl dijo...

Gracias, Martín, por tu aportación.

Ariel dijo...

Asqueroso este artículo. Lleno de errores tanto de traducción como de Mayúsculas/Minúsculas. Es imposible que funcione así. Aún corrigiendo, tampoco funciona.

Si vas a publicar, hazlo de manera responsable.

Àl dijo...

Es tu opinión, Ariel. Ni el resto de comentarios de la misma página ni el número de visitas diarias que recibe este artículo respaldan esa opinión. Pero sí, es tan respetable como la mia. Disfruta lo aprendido.

Jexus dijo...

Hola, buen articulo, seguí los pasos y me encontré con algunas dificultades:

Fatal error: Class 'Controller' not found in....

Lo cual se debe a la versión del CI, la solución es modificar lo siguiente:

en helloworld.php:
class Helloworld extends CI_Controller

helloworld_model.php:
class Helloworld_model extends CI_Model{
function Helloworld_model()
{
// Call the Model constructor
parent::__construct();
}

para mas información revisa la guía de usuario

http://codeigniter.com/user_guide/general/controllers.html#what

Àl dijo...

Gracias Jexus. Hace mucho que publiqué el tutorial y te agradezco mucho tu corrección. Espero poder reunir tiempo para repasar la entrada del blog que más visitas recibe. Saludos.

Josué Botella Aguado dijo...

Muy buen artículo!!! Es un buen comienzo para adentrarse en este framework!!! Muchas gracias!! Saludos!!

Anónimo dijo...

me sale esto mi base de datos tiene datos

title?>

text?>

sale por cada dato q tenga en la tabla.

Anónimo dijo...

Excelente articulo! gracias "JEXUS" por tu aporte tb. Saludos!

Anónimo dijo...

sabes me podea ayudar para poder conectarlo con postgresql?? porfa

Luiz dijo...

Gracias por su compartir!!

Anónimo dijo...

Gracias man!!

Bohemio dijo...

Jexus, tu aporte es excelente!!! me salvaste la vida, Saludos!

Publicar un comentario en la entrada

Últimos links en indiza.com