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