Insertar datos a MySQL con jQuery y CodeIgniter

El fin de este tutorial es insertar informacion a una base de datos (en este caso MySQL) sin recargar la página usando el framework PHP CodeIgniter y jQuery.

Código de la tabla:

Código :

CREATE TABLE news (
   id int(11) NOT NULL AUTO_INCREMENT,
   title varchar(128) NOT NULL,
   slug varchar(128) NOT NULL,
   text text NOT NULL,
   PRIMARY KEY (id),
   KEY slug (slug)
);

No olvides configurar CodeIgniter para trabajar con base de datos.

En el directorio views de CodeIgniter creamos una carpeta llamada templates y dentro de ella creamos dos archivos: header.php y footer.php. A header.php todavía no le agregamos código. En footer.php añade lo que quieras!

En el directorio views de CodeIgniter creamos la carpeta news y dentro de ella el archivo create.php que va a contener el formulario.

application/views/news/create.php

Código :

<h2>Create a news item</h2>

<label for="title">Title</label> 
<input type="input" name="title" id="title" /><br />

<label for="text">Text</label>
<textarea name="text" id="text"></textarea><br />

<button id="add">Add</button>

<div id="mens"></div>

El div con id mens es donde se muestra la respuesta del servidor

.

Ahora creamos el controlador, en la carpeta controllers creamos el archivo news.php. En él creamos las siguientes funciones:

add: Muestra al usuario el formulario.
create: Ejecuta la funcion set_news() (aun no creada) que es la que inserta la información a la BD.

Código :

<?php
class News extends CI_Controller {

   public function __construct()
   {
      parent::__construct();
      $this->load->model('news_model');
   }

   public function create()
   {
      $this->news_model->set_news();
      echo 'insertado correctmanete';
   }

   public function add()
   {
      $this->load->view('templates/header');   
      $this->load->view('news/create');
      $this->load->view('templates/footer');
   }
}

Ahora creamos el modelo, en el directorio models creamos el archivo news_model.php y la función set_news() que escrito anteriormente guarda la información a la base de datos.

Código :

<?php
class News_model extends CI_Model {

   public function __construct()
   {
      $this->load->database();
   }

   public function set_news()
   {

      $this->load->helper('url');
      $slug = url_title($this->input->post('titulo'), 'dash', TRUE);
      
      $data = array(
         'title' => $this->input->post('titulo'),//capturo los datos que me envian desde la vista
         'slug' => $slug,
         'text' => $this->input->post('texto')
      );
      
      return $this->db->insert('news', $data);
   }

}

Ahora agregaremos código a header.php.

En el archivo header.php importamos la biblioteca jQuery que en mi caso la tengo en un directorio pero también se puede importar desde el CDN de Google o Microsoft. Este archivo también contiene el código jQuery para que no recargue la página cuando hacemos una inserción.

Código :

<!doctype html>
<html>
<head>
   <title>Tutorial</title>
   <meta charset="utf-8">

   <script src="<?php echo base_url().'js/jquery-1.9.1.min.js'; ?>"></script>

   <script>

   $(document).ready(function(){

     $("#add").click(function(){
        
        title=$("#title").val();
        txt=$("#text").val();

        if(title!="" && txt!=""){

           $.ajax({url:"<?php echo base_url().'index.php/news/create'; ?>",type:'POST',data:{titulo:title,texto:txt},success:function(result){
            $("#mens").html(result);

          }});

        }else{

         $("#mens").html("No deje campos vacíos");

        }

     });

   });

   </script>

</head>
<body>

   <div id="cabecera">
      <h1>Insertar datos a MySQL con CodeIgniter y AJAX jQuery</h1>
   </div>

Cuando se hace click en el botín con id add, capturamos lo que trae las cajas de texto a través de la función val() y la guardamos en las variables title y txt.
Si title y txt no están vacías entonces con el método jQuery $.ajax decimos que:

A través del método POST le enviamos las variables title y txt a la url que procesa la información, osea: base_url().'index.php/news/create'. Ésta ejecuta el método create() del controlador news (archivo news.php) y a la vez el método set_news() del archivo news_model.php, nuestro modelo.

Lo que hace la función set_news() es recojer o capturar las variables enviadas desde la vista e insertarlas a la base de datos:

Código :

      $data = array(
         'title' => $this->input->post('titulo'),//capturo los datos que me envian desde la vista
         'slug' => $slug,//capturo los datos que me envian desde la vista
         'text' => $this->input->post('texto')//capturo los datos que me envian desde la vista
      );
      
      return $this->db->insert('news', $data);//inserta a la base de datos.

Finalmente mostramos el resultado (un mensaje de éxito) en el div con id mens ubicado en el archivo create.php

Demo

Descarga desde mi repositorio en github el código completo, mejorado visulmente y con más opciones.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Insertar datos a MySQL con jQuery y CodeIgniter

Publica tu comentario

o puedes...