Tutorial CodeIgniter 1º parte: Modelo MVC y primeros pasos.

En esta serie de tutoriales veremos los conceptos básicos de CodeIgniter, un framework de PHP que destaca por ser ligero, rápido de aprender y fácil de usar. En este primer tutorial estudiaremos el patrón Modelo Vista Controlador y daremos los primeros pasos en el desarrollo de una página web.


code-igniter

Patrón Modelo Vista Controlador:

CodeIgniter hace uso del patrón MVC, un patrón de desarrollo que separa una aplicación en 3 capas:

  • Modelo: es la capa de acceso a datos, en ella se realizan las conexiones y consultas a la base de datos, y los datos que esta obtiene son recibidos por la capa Controlador.
  • Controlador: aquí encontramos la lógica del programa, esta capa manipula la información que recupera de la base de datos, y la envía a la Vista. También recibe las acciones del usuario capturadas por la Vista y responde a ellas.
  • Vista: en esta parte se define la interfaz de usuario, especifica cómo se mostrará la información obtenida del Controlador y captura los eventos del usuario.

Una aplicación de ejemplo:

Si no ha quedado suficientemente claro, veremos un ejemplo en lo que podría ser una página web:

Imaginemos que tenemos una tabla en la base de datos con un listado de empleados, de ellos almacenamos su nombre y su sueldo mensual, pero necesitamos mostrar una pantalla en la que aparezca el sueldo anual de cada uno de los empleados, cada capa se encargaría de lo siguiente:

  • Modelo: establecería la conexión a la base de datos y ejecutaría la consulta, en este caso, Obtener el nombre y sueldo mensual de todos los empleados.
  • Controlador: obtendría los datos, y realizaría el cálculo necesario para obtener el sueldo anual, en este caso el sueldo mensual*12, y enviaría a la capa Vista los nombres de empleado relacionados con su sueldo anual.
  • Vista: en esta capa estará definido cómo se muestran los datos, en nuestro ejemplo, podría ser una tabla HTML con dos columnas, Nombre y Sueldo.

Durante este y el siguiente tutorial, veremos cómo se aplicaría este ejemplo en CodeIgniter. En lo que queda de este primer tutorial estudiaremos el funcionamiento básico de los controladores y cómo se muestran las vistas. El primer paso será descargar el framework desde la web oficial. Una vez en nuestro poder podremos ver las siguientes carpetas:

  • application/ : carpeta con los ficheros de nuestra aplicación, normalmente trabajaremos aquí.
  • system/ : contiene las clases de CodeIgniter, lo que hace que funcione.
  • user_guide/ : aquí dentro tenemos documentación y un fantástico tutorial. No es necesario para que nuestra web funcione correctamente.
  • index.php : este fichero es el punto de inicio de nuestra web, tiene que situarse en la raíz de donde queramos tener la página.

En estos momentos lo que nos interesa se encuentra dentro de la carpeta application, entramos en ella y, de todas las carpetas, nos quedaremos con tres, controllers, models y views, ¿os suenan de algo? Así es, aquí guardaremos nuestras clases Controlador, Modelo y nuestras Vistas, respectivamente.

Antes de ponernos manos a la obra, necesitaremos tener un servidor web que nos muestre las páginas y una base de datos de la que podamos obtener la información, para ello recomiendo XAMPP, que instalará todo lo que necesitamos para realizar estos tutoriales.

Creando nuestro primer controlador:

Tras instalar XAMPP construiremos en primer lugar el controlador para ver cómo se hace para ejecutar una función en CodeIgniter, para ello, crearemos el fichero empleados.php dentro de application/controllers y escribiremos el siguiente código:

[cc]load->view(‘pagina_principal’);

}

}

?>[/cc]

El código dentro de la función index muestra la vista ‘pagina_principal’, en estos momentos el controlador no funcionaría ya que la vista no existe, así que tenemos que crear el fichero ‘pagina_principal.php’ dentro de application/views e insertar el siguiente código:

[cc]

Primer tutorial de CI en ADWE

[/cc]

Ahora ya tenemos todo lo necesario para entender el funcionamiento básico de los controladores en CodeIgniter. Para llamar a una función de un controlador se usa la siguiente estructura:

[cc]www.tudominio.com/index.php/nombre_controlador/nombre_funcion/argumento1/argumento2…[/cc]

De esta manera, para poder ejecutar la función mostrar_pagina_principal() en empleados.php que hemos creado, bastará con introducir esta URL (en futuros tutoriales veremos cómo eliminar index.php de la URL):

[cc]www.tudominio.com/index.php/empleados/mostrar_pagina_principal[/cc]

Así, se llamará a la función mostrar_pagina_principal, la cual simplemente ejecuta la función $this->load->view(‘pagina_principal’), que se encarga de cargar la vista «pagina_principal.php». Si todo ha ido bien, podremos ver una página con el título «Primer tutorial de CI en ADWE»:

ejemplo1

Enviando datos del controlador a la vista:

Lo último que aprenderemos en este tutorial será cómo enviar datos de los controladores a la vista, para ello, volveremos a nuestro controlador empleados.php y realizaremos las siguiente modificaciones en la función ‘mostrar_pagina_principal’:

[cc]public function mostrar_pagina_principal($titulo){

$datos = array(

‘dato_titulo’ => $titulo

);

$this->load->view(‘pagina_principal’, $datos);

}[/cc]

Lo que hemos hecho ha sido en primer lugar añadir un argumento $titulo a la función e introducirlo dentro del array $datos. Este array lo enviamos en la función load->view junto al nombre de la vista. Lo que hacemos con esto es permitir que la vista ‘pagina_principal’ tenga acceso al array $datos. Ahora veremos cómo quedaría la vista ‘pagina_principal’ para que recupere el título del controlador:

[cc]

[/cc]

Como se puede ver, para acceder al valor debemos usar una variable con el nombre de la clave del array en la que lo pusimos, en este caso ‘dato_titulo’.

Seguro que ya sabéis como formar la URL para probar el funcionamiento de estas modificaciones, recordad que ahora además tenemos un argumento en la función, así que lo que se introduzca como argumento será lo que aparezca de título de la página.

Eso ha sido todo hasta ahora, en el próximo tutorial estudiaremos los modelos y finalizaremos este ejercicio de ejemplo.

WordPress › Error

Ha habido un error crítico en esta web.

Aprende más sobre el diagnóstico de WordPress.