Aplicación CRUD con Vue.js y Codeigniter, Primera parte

Bueno, a continuación vamos a ver un ejemplo muy sencillo de cómo hacer un administrador de tareas con Vue.js y Codeigniter. De esta manera podremos ver un poco más de Vue, para seguir entendiendo como hacer peticiones ajax, y así trabajar con una base de datos MySQL.

Nuestra aplicación debería tener un aspecto como el siguiente:

En esta primer parte sólo nos enfocaremos en el backend, osea que vamos a crear la base de datos, configurar nuestro proyecto y finalmente crear las consultas y los servicios que se van a consumir vía ajax, desde el frontend.

Creando nuestra base de datos

Vamos a crear una base de datos MySQL, por ejemplo en mi caso yo voy a ponerle de nombre «organizador».

Luego, vamos a ejecutar el siguiente script sql:

CREATE TABLE estados(
   id_estado tinyint(1) unsigned not null primary key,
   nombre varchar(50)
)ENGINE=innoDB;
CREATE TABLE tareas(
   id_tarea tinyint(1) unsigned not null auto_increment primary key,
   titulo varchar(100) not null,
   descripcion text not null,
   id_estado tinyint(1) unsigned not null,
   fecha_alta datetime not null,
   fecha_modificacion datetime not null,
   fecha_baja datetime,
   foreign key(id_estado)
   references estados(id_estado)
   on delete cascade
   on update cascade
)ENGINE=innoDB;
INSERT INTO estados(id_estado, nombre)
VALUES
(1, 'Pendiente'),
(2, 'En proceso'),
(3, 'Finalizada'),
(4, 'Cancelada');

Nuestra base de datos tendrá dos tablas, «estados» y «tareas». Las tareas tendrán un título, una descripción y el estado actual de la tarea, como también otros datos que tienen que ver con fechas. En cuanto a la otra tabla, son los estados actuales que pueden tener las tareas: Pendiente, En proceso, Finalizada y Cancelada. También creamos los insert para dichas tablas, en el script.

Configurando aplicación

Vamos a descargarnos Codeigniter desde su página:

https://codeigniter.com/

Una vez descargado, lo descomprimimos y lo tiramos a nuestro localhost. Y luego a crear dentro del raíz el siguiente archivo .htaccess con el siguiente código:

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

Ahora tendremos que modificar algunos archivos de configuración en nuestro proyecto, yendo a application/config.

Primero editamos el archivo «autoload.php», en la siguiente línea:

$autoload['libraries'] = array();

Por:

$autoload['libraries'] = array('database');

Para tener la librería de conexión a la base de datos.

Y el helper para trabajar con url:

Reemplazamos:

$autoload['helper'] = array();

Por:

$autoload['helper'] = array('url');

Después vamos a abrir «config.php», en donde dice:

$config['base_url'] = '';

En este string ingresamos la ruta absoluta a nuestro proyecto. Por ejemplo en mi caso:

$config['base_url'] = 'https://localhost/organizador/';

Ahora, debemos escribir los datos para la conexión a nuestra base de datos, en el archivo: «database.php»:

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => '',

Modelos

Vamos a crear los modelos que nos permitirán realizar las consultas a nuestra base de datos. Dentro de application/models:

Estado_model.php:

<?php
class Estado_model extends CI_Model {
   public function __construct(){
      parent::__construct();
   }
   public function listar(){
      return $this->db
         ->select('id_estado, nombre')
         ->from('estados')
         ->get()
         ->result();
   }
}

Tarea_model.php:

<?php
class Tarea_model extends CI_Model {
   public function __construct(){
      parent::__construct();
   }
   public function insertar($data){
      $this->db->insert('tareas', array(
         'titulo' => $data['titulo'],
         'descripcion' => $data['descripcion'],
         'id_estado' => 1,
         'fecha_alta' => date('Y-m-d H:i:s'),
         'fecha_modificacion' => date('Y-m-d H:i:s'),
         'fecha_baja' => null
      ));
   }
   public function modificar($data){
      $this->db
         ->where('id_tarea', $data['id_tarea'])
         ->update('tareas', array(
            'titulo' => $data['titulo'],
            'descripcion' => $data['descripcion'],
            'id_estado' => $data['id_estado'],
            'fecha_modificacion' => date('Y-m-d H:i:s'),
         ));
   }
   public function listar(){
      return $this->db
         ->select('t.id_tarea, t.titulo, t.descripcion, e.id_estado, e.nombre nombre_estado')
         ->from('tareas t')
         ->join('estados e', 'e.id_estado = t.id_estado')
         ->where('fecha_baja', null)
         ->order_by('e.id_estado')
         ->get()
         ->result();
   }
   public function eliminar($data){
      $this->db
         ->where('id_tarea', $data['id_tarea'])
         ->update('tareas', array(
         'fecha_baja' => date('Y-m-d H:i:s')
      ));
   }
}

El primer modelo tendrá un método para listar los estados que pueden tener las tareas, mientras que el segundo tendrá métodos para insertar, modificar, eliminar y listar tareas.

Vistas

En este caso, vamos a tener una sola vista, que será la tabla donde haremos todas las operaciones que tiene que ver con las tareas. Dentro de application/views, vamos a crear una carpeta llamada «tareas» y dentro de ésta última un archivo con el nombre «index.php», que por el momento vamos a dejar vacío.

Controladores

En este proyecto habrá dos controladores, uno sólo para incluir la vista que acabamos de crear, y otro para realizar realizar las operaciones de manipulación de tareas.

Dentro de application/controllers:

Tareas.php:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Tareas extends CI_Controller {
   public function __construct(){
      parent::__construct();
   }
   public function index(){
      $this->load->view('tareas/index');
   }
}

Tareas_ajax.php:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Tareas_ajax extends CI_Controller {
   private $request;
   public function __construct(){
      parent::__construct();
      $this->load->model('estado_model');
      $this->load->model('tarea_model');
      $this->request = json_decode(file_get_contents('php://input'));
   }
   public function recuperar_estados(){
      $estados = $this->estado_model->listar();
      echo json_encode($estados);
   }
   public function recuperar_tareas(){
      $tareas = $this->tarea_model->listar();
      echo json_encode($tareas);
   }
   public function crear_tarea(){
      $this->tarea_model->insertar(array(
         'titulo' => $this->request->titulo,
         'descripcion' => $this->request->descripcion
      ));
   }
   public function modificar_tarea(){
      $this->tarea_model->modificar(array(
         'id_tarea' => $this->request->id_tarea,
         'titulo' => $this->request->titulo,
         'descripcion' => $this->request->descripcion,
         'id_estado' => $this->request->id_estado
      ));
   }
   public function eliminar_tarea(){
      $this->tarea_model->eliminar(array(
         'id_tarea' => $this->request->id_tarea
      ));
   }
}

Asignamos las rutas de nuestra aplicación. Vamos a application/config/routes.php.

Primero modificamos:

$route['default_controller'] = 'welcome';

Lo modificamos con el controlador principal de nuestra aplicación que es «tareas»:

$route['default_controller'] = 'tareas';

Y finalmente vamos a agregar el resto de las rutas:

$route['recuperar_estados']['get'] = 'tareas_ajax/recuperar_estados';
$route['recuperar_tareas']['get'] = 'tareas_ajax/recuperar_tareas';
$route['crear_tarea']['post'] = 'tareas_ajax/crear_tarea';
$route['modificar_tarea']['post'] = 'tareas_ajax/modificar_tarea';
$route['eliminar_tarea']['post'] = 'tareas_ajax/eliminar_tarea';

Para entender un poco de qué se trata esto último, cuando en la próxima publicación tengamos que hacer peticiones ajax con Vue.js, la aplicación frontend va a consumir estas rutas.

«recuperar_estados» y «recuperar_tareas» son peticiones GET que nos van a devolver listas con datos en formato json. El primero nos va a devolver los estados, mientras que el segundo las tareas.

Mientras que «crear_tarea», «modificar_tarea» y «eliminar_tarea», son peticiones POST, y van a recibir un json, que desde PHP será convertido en objeto PHP. Para eso usamos:

$this->request = json_decode(file_get_contents('php://input'));

Por ejemplo, si desde Javascript enviamos un json con este formato:

{titulo: "Algún título", descripcion: "..."}

Desde PHP vamos a acceder de la siguiente forma:

$titulo = $this->request->titulo;
$descripcion = $this->request->descripcion;

Bueno, por el momento ya tenemos resuelta la parte del backend, en la siguiente publicación vamos a ver como recuperar y enviar datos desde el frontend con Vue.js

Ver parte 2


10 Respuestas a “Aplicación CRUD con Vue.js y Codeigniter, Primera parte”

  1. Hola estuve revisando tu codigo me parece super pero me sale:

    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator, andres@hotmail.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

    More information about this error may be available in the server error log.

    Apache/2.2.8 (Win32) PHP/5.2.6 Server at localhost Port 80

    1. Los errores ‘Internal Server Error’ no se pueden saber qué problema tienen a menos que veas el código. Por ejemplo puede ser un problema al hacer una consulta a la base de datos.

      Saludos!

  2. hola Ferchu, muy interesante el tutorial !! estoy con muchas ganas de pegar un salto hacia JS y vue.js parece ser una buena opcion. hay algun lugar -canal-sitio- que me recomiendes para encontrar tutoriales para integrar vue.js y codeigniter ? leo en reddit que Cigniter esta -según algunos- desactualizado, vos que pensas al respecto?
    gracias

    1. Gracias!

      Con respecto a tu pregunta, no, no vi ningún video que se integre Vue con CI, pero seguro hay, la verdad no recuerdo ahora mismo.

      Y con lo otro, no estoy muy de acuerdo, Codeigniter se sigue usando en muchos desarrollos. No es tan potente como Laravel, pero para proyectos a corto plazo es bastante útil.

      Saludos!

  3. Muchas gracias, siento que ya tengo algo de bases, pero aún me falta mucho en este tema de codeigniter y vue, seria chévere si hiciera algún temita nuevo para codeigniter como correos o helpers o como hacer un registro con validación de correo electronico

  4. Hola, buenas, aun no entiendo por que es tienes que modificar el archivo routes.php de codeigniter, me podrias explicar un poco.
    Saludos

    1. En el archivo routes.php vos definís las url de tu sitio, y además indicás a qué controlador y método llamar en cada caso.

      Esto igual no es obligatorio, si venís trabajando con Codeigniter y no usás routing es lo mismo.

      Saludos!