En el artículo anterior “Desarrollo de aplicaciones web con CodeIgniter” vimos que CodeIgniter es un framework, del tipo modelo-vista-controlador, para el desarrollo de aplicaciones web con PHP, sus características y cómo instalarlo. Como quizá recordéis, es software libre bajo licencia MIT.

En este nuevo artículo vamos a dar los primeros pasos para crear nuestra propia aplicación web.

Nuestra aplicación web

Como ejemplo, vamos a implementar una aplicación web para la gestión de una biblioteca. Para ayudarnos, y atendiendo al ciclo anterior sobre Git, he creado un repositorio en GitLab. La idea es ir actualizando este repositorio conforme vayamos avanzando en los distintos artículos.

A continuación vamos a crear la base de datos que utilizaremos para nuestro gestor de biblioteca.

La base de datos

En nuestra biblioteca vamos a utilizar una base de datos implementada en un servidor MariaDB. Su código lo puedes encontrar también en GitLab, concretamente en el archivo biblioteca.sql, que se encuentra en el directorio /biblioteca/database. Además, he creado un sencillo gráfico con las relaciones entre las diferentes tablas de la base de datos.

Primeros pasos con CodeIgniter. La biblioteca. Base de datos.Estructura de la base de datos

Inicialmente he considerado las siguientes tablas:

  • Editoriales. Esta tabla recoge todas las editoriales de los libros que se encuentran en nuestra biblioteca.
  • Autores. Aquí están todos los autores de los libros que tenemos en la biblioteca.
  • Géneros. Esta tabla se corresponde con la de los géneros literarios. En principio, se trata de una tabla que no modificaremos.
  • Países. En esta tabla están recogidos todos los países y, al igual que sucede con la tabla anterior, se trata de una tabla que no modificaremos, por lo menos no a priori.
  • Usuarios. En esta tabla están recogidos los socios de nuestra biblioteca, con los datos mínimos de contacto.
  • Libros. El objeto de nuestra biblioteca. Aquí tienes todos los libros de nuestra biblioteca con los datos mínimos necesarios e interrelacionada con las otras tablas.
  • Préstamos. En esta tabla iremos añadiendo los préstamos conforme se vayan produciendo, indicando el libro que prestamos, a quién le prestamos el libro, y las fechas de salida, devolución y la fecha máxima de devolución. Este dato, por regla general, se compondrá con la fecha de salida más el tiempo de préstamo del libro.

Instalando nuestra aplicación

Tal y como vimos en el artículo anterior, debemos descargar la última versión de CodeIgniter y descomprimirlo en /var/www/html/, de forma que nuestra aplicación se encontrará en /var/www/html/biblioteca/.

A continuación editaremos el archivo /var/www/html/biblioteca/application/config/database.php, y lo modificaremos para que tenga el siguiente aspecto:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'pi',
    'password' => '********',
    'database' => 'biblioteca',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

Evidentemente, debes sustituir tanto la contraseña como el nombre de usuario de forma que se adapte a tu servidor.

Configurando permisos

El siguiente paso es configurar los directorios y archivos para que tengan los permisos adecuados para el funcionamiento de la aplicación. Para ello, ejecutaremos las siguientes órdenes:

cd /var/www/html/
sudo chown :www-data biblioteca
sudo chmod 755 biblioteca
cd biblioteca
sudo find . -type d -print -exec chown :www-data {} \;
sudo find . -type f -print -exec chown :www-data {} \;
sudo find . -type d -print -exec chmod 755 {} \;
sudo find . -type f -print -exec chmod 644 {} \;

Con esto ya tenemos todo configurado como toca y, salvo error u omisión, si te diriges a la IP de tu servidor, en mi caso http://192.168.1.48/biblioteca/, debes encontrarte algo como lo que ves en la siguiente captura de pantalla:

Primeros pasos con CodeIgniter. La biblioteca. Primera página.

Primeros pasos con controladores y vistas

En la captura anterior hemos visto una página generada dinámicamente por CodeIgniter, y que viene determinada por la vista application/views/welcome_message.php y su correspondiente controlador application/controllers/Welcome.php.

Si nos aventuramos con este primer controlador veremos que el código que implementa, eliminando comentarios, etc, es el siguiente:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
    public function index()
    {
        $this->load->view('welcome_message');
    }
}

Básicamente, nuestro controlador hereda de la clase CI_Controller y solo tiene un método que se corresponde con la vista. Ahora, si vamos a las vistas, application/views/welcome_message.php, veremos que su contenido es, básicamente, una página web en HTML con algo de PHP.

Pero, ¿cómo ha determinado qué página abre?. Para ello, debemos pegarle un vistazo al archivo application/config/routes.php, y en él encontraremos lo siguiente:

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

Efectivamente, este archivo es el encargado de dirigirnos a la página. Para ello, lo que nos dice es que el controlador por defecto es welcome. CodeIginiter lo ha definido como el archivo Welcome.php y la clase como Welcome y, por convención, aquí aparece todo en minúsculas.

Nuestro primer controlador y vista

Para ver cómo funciona esto, crearemos un controlador llamado Hola y una vista que se llamará . El contenido de nuestro controlador application/controllers/Hola.php es el siguiente:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Hola extends CI_Controller {
    public function view()
    {
        $this->load->view('hola_view');
    }
}

Mientras que nuestra vista tendrá un aspecto como el que ves a continuación:

    <head>
    ....
    </head>
    <body>
        <div id="container">
            <h1>Saludos desde <a href="https://colaboratorio.net/">
Colaboratorio</a></h1>

            <div id="body">
                <p>Esta es la nueva página estática que hemos creado,
 correspondiente a nuestro primer controlador y a nuestra primera vista</p>
            </div>
        </div>
    </body>
</html>

He eliminado parte del código pero puedes encontrar el repositorio completo en GitLab, tal y como he mencionado anteriormente.

Por último nos queda modificar la ruta. Para ello editaremos el archivo application/config/routes.php y añadiremos la línea $route['hola'] = 'hola/view';.

Si ahora abrimos el navegador en la dirección http://192.168.1.48/biblioteca/index.php/hola/view, nos encontraremos la página que ves en la siguiente captura de pantalla:

Primeros pasos con CodeIgniter. La biblioteca. La primera vista.

Modificando la ruta

Te habrás dado cuenta de que la dirección no queda muy estética, por el index.php. Lo suyo es eliminarlo. Para hacerlo, añadiremos el siguiente contenido al archivo .htaccess.

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

Conclusión

Ya hemos dado los primeros pasos para crear nuestra primera aplicación web con CodeIgniter. Hemos creado la base de datos, instalado la aplicación, incluso hemos creado nuestro primer controlador y nuestra primera vista.

En el próximo artículo de la serie, realizaremos el trabajo completo para una de las tablas. Es decir, crearemos el modelo, la vista y el controlador de esa tabla. Además modificaremos la forma de trabajar con las vistas, para facilitarnos la tarea de desarrollo de la aplicación web.


Más información:

La imagen de la portada es CC0 Creative Commons y se corresponde con la biblioteca de la Trinity University, en Dublín, Irlanda.

El resto de imágenes son capturas de pantalla realizadas por el autor del artículo.

3 1 voto
Article Rating
Subscribe
Notificarme de
guest

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

4 Comments
más antiguo
más nuevo más votado
Reacciones en línea
Ver todos los comentarios
Juan

En el titulo «Nuestro primer controlador y vista»
Para ver cómo funciona esto, crearemos un controlador llamado Hola y una vista que se llamará XXXXX.
Falto poner el nombre de la vista.
Saludos