Es un curso que tiene como objetivo principal guiar a los que quieran conocer el funcionamiento de Codeigniter y a los que vienen de programar sin framework.

Siendo honesto, Codeigniter es de los frameworks más sencillos de enteder y su curva de aprendizaje es corta. Sin meterme en polémica que cuál o tal framework es el mejor, yo siempre digo que todos tienes pros y contras. Uno de los pros que mejor he visto en Codeigniter es precisamente que es sencillo de aprender, lo cual para mí es suficiente para seguir adelante en seguir aprendiendo.

El objetivo es bajar y configurar Codeingiter para comenzar a trabajar. Son configuraciones básicas que  se hacen solo una vez.

En mi caso estoy usando XAMPP, tengo la carpeta htdocs y la versión de Codeigniter es 3.x.x. Lo primero por hacer es descargar el zip del sitio oficial de Codeigniter y descomprimirlo en htdocs, le cambias el nombre a la carpeta como gustes, para el caso del ejemplo será “codeigniter”.

Entramos a la carpeta y podemos borrar estos archivos seleccionados, al final solo nos quedamos con application, system e index.php, como se muestra en la imagen:

Bien, de esta forma podemos ingresar al navegador, escribir localhost/codeigniter y podemos ver que el framework ya está funcionando:

Dentro de la carpeta application están las carpetas principales, que son:  models, views, controllers y config.

Las 3 primeras son descriptivas sabiendo el concepto de MVC (las veremos más adelante a detalle), la carpeta config es la que nos interesa esta vez y son 2 archivos por editar config.php, autoload.php.

1. Configurar la base_url en el archivo config.php línea 26. Esta configuración nos ayuda a referenciar a los controladores y sus métodos sin necesidad de poner toda la url del sitio. Cuando se suba de localhost a un servidor, basta con cambiar esta configuración y todas las referencias que hagas seguirán funcionando.
   

   <?php
       $config['base_url'] = 'https://localhost/codeigniter/';
   ?>
   

   
   
2. Quitar el index.php de la url en el archivo config.php línea 38. Esto nos ayuda a hacer url amigables y es más cómodo de manejar a la hora de escribir los controladores.
   

   <?php
       //$config['index_page'] = 'index.php';
       $config['index_page'] = ''; //Quedará así
   ?>
   

   
   
3. Para que el punto anterior funcione hay que colocar un archivo .htaccess en la raíz del proyecto. El contenido del archivo:
   

   <IfModule mod_rewrite.c>
       RewriteEngine on
   	RewriteCond $1 !^(index.php|resources|robots.txt)
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule ^(.*)$ index.php?/$1 [L]
   </IfModule>
   

   
   

   

4. Finalmente para que el base_url funcione como lo puse en el primer punto, se agrega en el archivo autolad.php línea 86.
   

   <?php
       $autoload['helper'] = array('url');
   ?>
   

Estas configuraciones se hacen siempre al inicio y solo una vez cuando se inicia un proyecto.

Si gustas, puedes bajar el zip con el proyecto de este ejemplo con estas configuraciones básicas.

Todos los frameworks tienen por default un controlador que se ejecutará cuando entres a la aplicación, o sea, cuando escribes localhost/codeigniter, el framework irá a buscar el contralador por default. En este caso es un controlador llamado Welcome en la carpeta controllers. Para saber cuál es el controlador por default ve a application/config/routes.php, y aquí nos indica:

<?php
   defined('BASEPATH') OR exit('No direct script access allowed');

   $route['default_controller'] = 'welcome';
   $route['404_override'] = '';
   $route['translate_uri_dashes'] = FALSE;

Entonces, esto nos lleva a ver el contenido de dicho controlador que es este:

<?php
   defined('BASEPATH') OR exit('No direct script access allowed');

    class Welcome extends CI_Controller {

       public function index()
       {
          $this->load->view('welcome_message');
       }
    }

Hemos de saber que todo controlador en Codeigniter tiene un método llamado index, que es el que se ejecuta primero. Este método nos indica que va a cargar la vista welcome_message que está en la carpeta views

Esta vista tiene el siguiente código, a modo de ejemplo puedes modificar y poner algunos mensajes para que veas los cambios. Cabe mencionar que esta vista la cambiaremos un poco en los siguientes tutoriales para mantener un orden del html.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter
    </title>
    <style type="text/css">
      ::selection {
        background-color: #E13300;
        color: white;
      }
      ::-moz-selection {
        background-color: #E13300;
        color: white;
      }
      body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
      }
      a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
      }
      h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
      }
      code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
      }
      #body {
        margin: 0 15px 0 15px;
      }
      p.footer {
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;
      }
      #container {
        margin: 10px;
        border: 1px solid #D0D0D0;
        box-shadow: 0 0 8px #D0D0D0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>Welcome to CodeIgniter!
      </h1>
      <div id="body">
        <p>The page you are looking at is being generated dynamically by CodeIgniter.
        </p>
        <p>If you would like to edit this page you'll find it located at:
        </p>
        <code>application/views/welcome_message.php
        </code>
        <p>The corresponding controller for this page is found at:
        </p>
        <code>application/controllers/Welcome.php
        </code>
        <p>If you are exploring CodeIgniter for the very first time, you should start by reading the 
          <a href="user_guide/">User Guide
          </a>.
        </p>
      </div>
      <p class="footer">Page rendered in 
        <strong>0.0515
        </strong> seconds. 
        <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?>
      </p>
    </div>
  </body>
</html>

Como puedes ver, en esta vista de ejemplo se tiene el css y el html todo junto, para el siguiente veremos cómo ordenar las vistas.

En el próximo tutorial se manejará el controlador y las vistas más a fondo, además conoceremos la carpeta para poner el css, js e imágenes y hacer la referencia a estos archivos mediante el base_url que vimos en esta primer entrada.

Hasta aquí esta entrada, cualquier duda o comentario, házmelo saber en ringhugos@gmail.com, también puedes escribirme al whatsapp, en el footer está mi número. Muchas gracias por leer el blog :D

Te recuerdo que en el zip viene comentado el código con explicaciones extras que no están en este post, lo puedes descargar en este link