Grabar datos de Formulario Ext JS con MySQL

Para el siguiente ejemplo utilizaremos ExtJS + PHP + MySQL para guardar los datos del siguiente formulario.


Primero creamos nuestra base de datos en MySQL la cual se llama Ejemplo6 y contendrá la tabla Cliente.





CREATE SCHEMA IF NOT EXISTS `ejemplo6` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci ;
USE `ejemplo6`;

DROP TABLE IF EXISTS `ejemplo6`.`cliente` ;

CREATE  TABLE IF NOT EXISTS `ejemplo5`.`cliente` (
  `dni` INT NOT NULL ,
  `nombres` VARCHAR(45) NOT NULL ,
  `ciudad` VARCHAR(45) NOT NULL ,
  `fecha` DATE NOT NULL ,
  `genero` CHAR(1) NOT NULL ,
  `comentario` VARCHAR(100) NOT NULL ,
  PRIMARY KEY (`dni`) )
ENGINE = InnoDB;

Como 2do paso comenzaremos instalando ExtJS en nuestro documento html.

 <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="js/ext-all.js"></script>
 <script type="text/javascript" src="js/ejemplo5.js"></script>
 <script type="text/javascript" src="js/ext-lang-es.js"> 

En el 3er paso creamos el documento JS ejemplo6.js donde diseñaremos el formulario y lo programaremos con sus validaciones respectivas, en esta ocasión nos centraremos en el evento Handler del botón grabar.

if (Ext.getCmp('formulario').getForm().isValid()) {  //Valida que los datos del formulario sean correctos
                                            Ext.getCmp('formulario').getForm().submit({    //Obtiene los datos del formulario y envía a PHP                
                                                method: 'POST',//Metodo que utilizaremos para el envió de datos a PHP
                                                params:{ task:'GRABAR' },    //Parametro que se enviara conjuntamente con los datos
                                                waitTitle: 'Validando datos',    //Titulo del mensaje de espera
                                                waitMsg: 'Enviando datos..',    //Mensaje de espera
                                                success: function(form, action){        //Función que se ejecutara si el parámetro devuelto por PHP es TRUE
                                                    var data = Ext.util.JSON.decode(action.response.responseText);  //Captura la respuesta devuelta
                                                    Ext.Msg.alert('Confirmación', data.message.reason); //Muestra mensaje
                                                    Ext.getCmp('formulario').reset();        //Reseteara el formulario
                                                },
                                                failure: function(form, action){ //Función que se ejecutara si el parámetro devuelto por PHP es FALSE
                                                    var data = Ext.util.JSON.decode(action.response.responseText);
                                                       Ext.Msg.show({        //Muestra mensaje
                                                       title:'Error',
                                                       msg: data.errors.reason,
                                                       buttons: Ext.Msg.OK,
                                                       icon: Ext.MessageBox.ERROR
                                                    });
    }
});
} 

En el 4to y último paso, creamos el documento PHP ejemplo6.php el cual será llamado desde nuestro formulario (Revisar código de formulario ExtJS creado anteriormente en el documento ejemplo6.js). Iniciamos creando la conexión a la base de datos

header("Content-Type: text/plain"); 

$Servidor="localhost";

$Usuario="root";

$Contra="";

$BD="ejemplo6";


$link = mysql_connect($Servidor,$Usuario,$Contra);

mysql_select_db($BD);

mysql_query("SET NAMES 'utf8'");


El siguiente fragmento de código nos permite capturar y ejecutar el parametro que ha sido enviado por el formulario.

$task = '';
if ( isset($_POST['task'])){
  $task = $_POST['task'];
}
switch($task){
    case "GRABAR":
            ……………
    break;
default:
        echo "{failure:true}";
        break;
}

Por último grabamos en nuestra base de datos y devolvemos un mensaje de satisfacción o error; recordando que .$_REQUEST recopilara los datos de los IDs de cada componente del formulario (Ext.form.NumberField, Ext.form.TextField, Ext.form.ComboBox, ….) para que sean insertados en el campo que le corresponde de la base de datos.
$sql = " INSERT INTO cliente (dni, nombres, ciudad ,fecha, genero, comentario) VALUES(".$_REQUEST['dni'].",'".$_REQUEST['nombres']."','".$_REQUEST['ciudad']."','".$_REQUEST['fecha']."','".$_REQUEST['genero']."','".$_REQUEST['comentario']."')";    
            if (!$rs = mysql_query($sql)) 
            {
                echo '{"success": false, "errors":{"reason": "Error al momento de grabar"}}';
            }else
            {
                echo '{"success":true, "message":{"reason": "Se grabo satisfactoriamente"}}';
            }

0 comentarios:

Publicar un comentario en la entrada