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

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

class Empleados extends CI_Controller{

    public function mostrar_pagina_principal(){

        $this->load->view('pagina_principal');

    }

}

?>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body>

    <h1>

        Primer tutorial de CI en ADWE

    </h1>

</body>

</html>

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:

1
www.tudominio.com/index.php/nombre_controlador/nombre_funcion/argumento1/argumento2…

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):

1
www.tudominio.com/index.php/empleados/mostrar_pagina_principal

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’:

1
2
3
4
5
6
7
8
9
10
11
public function mostrar_pagina_principal($titulo){

    $datos = array(

        'dato_titulo' => $titulo

    );

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

}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body>

    <h1>

        <?php echo $dato_titulo ?>

    </h1>

</body>

</html>

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.

Desarrollador web y aficionado al desarrollo de videojuegos.

Comentarios arrow 14 Comentarios
  1. Gracias, espero que haya sido de utilidad, ¡un saludo!

  2. Buen tutorial espero los proximos.
    saludos.

  3. Me alegro de que te haya servido!

  4. Realmente un tutorial claro,y quiero seguir aprendiendo mucho más de éste Framework. Excelente

  5. Hola, ¿es posible clonar una página creada con Codeigniter? Gracias

    • ¿A qué te refieres? En principio copiando los controladores, modelos y vistas sería suficiente (y librerías que use la web)

      • Tengo una web en un idioma y quiero la misma en otro y con base de datos diferente.

        • Si se trata de mover la web a otro servidor, puedes copiar tu código actual al nuevo servidor, y cambiar la configuración del fichero database.php para que se conecte a la nueva base de datos.

          Después depende de como esté programada tu web, puede que tengas que cambiar los textos que aparecen en tus vistas, o el nombre de las funciones en los controladores, que son los que controlan las URL si no las defines en routes.php

  6. Simple y claro, donde puedo continuar aprendiendo el tutorial

  7. muy buen tutorial gracias.
    si quiero hacer una consulta sql y mostrar la vista.
    ademas de agregar registros a la tabla como se podria hacer.

  8. Hola y antes que nada agradezco que hayas compartido tu saber, te cuento un poco, yo programo en php en forma desordenada, el objetivo, se complio, se sabe que un cliente o destinatario de la aplicacion quiere que funcione acorde a lo que pidio, el orden interno nosotros lo sabemos, pero si otro lo ve, por si no esta el programador original ahi sonamos, voy a probar este framework, nunca use uno, solo archivos como si fuera estructurado, y te dejo si una inquietud, que me o nos, recomendarias para el diseño web, o hay plantillas, ahi es dificil cubrir todo, pero a veces es necesario, hacer la app, y que sea un poco vistosa, desde ya gracias. un abrazo, desde Buenos Aries, trabajo en una dependencia del estado en investigacion. gracias otra vez. Ariel de merlo bs.as

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.