Aprendiendo Ext JS 3

CRUD de un catálogo de contactos Más videos

Comentarios: 91 Likes: 0 Persona Duración: 0.0 minutos Dificultad: Intermedio

Descripción del tema

En esta ocasión vamos a Crear, Leer, Actualizar y Borrar (CRUD) un catálogo de contactos usando un EditorGrid que a su vez contendrá un Writter en su Store. Con esto podremos simplificar nuestro código al momento de hacer las peticiones a nuestro servidor. En este tutorial haremos un CRUD para poder editar la información contenida en un EditorGrid, esto lo lograremos mediante el Writter de un store.
resultado final

Resultado Final

Durante el tutorial se irá explicando el código necesario para realizarlo, recuerda que puedes descargar el código fuente si te es necesario.

La Base de Datos

La información para el EditorGrid estará en una base de datos de MySQL que contendrá una tabla llamada “contacts”, en esta tabla solo tenemos la información básica de un contacto. El código para generar la tabla se muestra a continuación. 
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 18-10-2010 a las 13:25:06
-- Versión del servidor: 5.1.36
-- Versión de PHP: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- Base de datos: `test`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `contacts`
--

CREATE TABLE IF NOT EXISTS `contacts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `firstName` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `lastName` varchar(39) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=10 ;

--
-- Volcar la base de datos para la tabla `contacts`
--

INSERT INTO `contacts` (`id`, `email`, `firstName`, `lastName`) VALUES
(1, 'pedro@gmail.com', 'Pedro', 'Lopez'),
(2, 'jose@hotmail.com', 'Jose', 'Paz'),
(3, 'john@hotmail.com', 'John', 'Smith');
La base de datos se llama “test” pero puedes usar el nombre que te agrade, solo recuerda cambiar el nombre cuando se haga la conexión mediante PHP.

Exponer la Información

Como la información está almacenada en una base de datos, necesitamos realizar la conexión vía PHP o cualquier otro lenguaje de servidor y un simple “SELECT” de la siguiente manera. El siguiente código se debe escribir en un archivo llamado “serverside/getContacts.php”. 
<?php
	//step 1
	$connection= mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());
	
	$result= mysql_query("SELECT * FROM contacts");  //step 2
	
	$data= array();
	while($row= mysql_fetch_array($result)){  //step 3
		array_push($data,array(
			"id"	=> $row["id"],
			"first"	=> $row["firstName"], 
			"last"	=> $row["lastName"], 
			"email"	=> $row["email"], 
		));
	}
	echo json_encode(  //step 4
		array(  
		"success"	=> true,
		"data"		=> $data
	));
En el paso uno se realiza la conexión a la base de datos, recuerda que debes poner las credenciales adecuadas así como la base de datos que usarás, en mi caso es “test”. En el paso dos se hace el query que regresa todo lo que contiene la tabla “contacts”, es un query muy sencillo. En el paso tres se itera el resultset que regresó la consulta, dentro del ciclo creamos un arreglo con la información de cada uno de los contactos. En el paso cuatro se imprime la información en formato JSON, la respuesta será como el siguiente ejemplo: 
{"success":true,"data":[{"id":"1","first":"Pedro","last":"Lopez","email":"pedro@gmail.com"},{"id":"2","first":"Jose","last":"Paz","email":"jose@hotmail.com"}}
Con eso es suficiente para poder generar mediante JavaScript la interface del Grid ya que tenemos toda la información necesaria.

Empaquetando el Tutorial

Vamos a empaquetar el código para evitar conflictos con otras variables. Esto es algo muy importante y siempre lo debemos realizar. 
Ext.ns("com.quizzpot.tutorials");

com.quizzpot.tutorials.Crud = {
	init : function() {
		//code
	}
}
Ext.onReady(com.quizzpot.tutorials.Crud.init,com.quizzpot.tutorials.Crud);
La función “init” se ejecutará tan pronto como el DOM esté listo, por lo tanto ahí debemos colocar el código que necesitamos ejecutar primero.

Creado el CRUD

Lo que haremos a continuación es solicitar la información al servidor, esto será ya dentro de la función “init” de nuestro archivo “crudexample.js”. Como mencionamos anteriormente usaremos un writer que se encargue de hacer las operaciones básicas (leer, escribir, modificar y eliminar). Para lograr esto es necesario definir la propiedad “api” con las URLs donde el “proxy” realizará las peticiones Ajax de manera automática, nótese que no estamos usando la propiedad “url” que normalmente usamos. 
var proxy = new Ext.data.HttpProxy({  //step 1

	api: {	//step 2
		read 	        : "serverside/getContacts.php",
		create 	: "serverside/createContact.php",
		update	: "serverside/updateContact.php",
		destroy	: "serverside/destroyContact.php"
	}
});
En el paso uno se crea una instancia de “Ext.data.HttpProxy” esto es para que el “store” realice las peticiones Ajax de manera automática. En el paso dos usamos la configuración “api” con las URLs a donde se realizarán las peticiones Ajax para cada acción a realizar. Por el momento solo tenemos definido el archivo “getContacts.php”, los demás los definiremos más adelante. A continuación haremos el “Reader” y el “Writer”: 
var reader = new Ext.data.JsonReader({ //step 1
	totalProperty	: "total",
	successProperty	: "success", // indica la propiedad que define si se ha insertado/actualizado o borrado con éxito
	messageProperty	: "message",
	idProperty		: "id",
	root			: "data" //este es el nombre del parámetro que llega al servidor con el JSON modificado
	},[  //step 2
		{name: "email", allowBlank: false},
		{name: "first", allowBlank: false},
		{name: "last", allowBlank: false}
	]);
		
var writer = new Ext.data.JsonWriter({ //step 3
		encode		: true,
		writeAllFields	: true//decide si se manda al servidor solamente los campos modificados o todo

});
En el paso uno lo que hacemos es crear una instancia del “JsonReader” este componente nos permitirá leer e interpretar la respuesta del servidor para cada petición Ajax realizada. Lo que tenemos que notar es el atributo “messageProperty” que define la propiedad que aloja un mensaje en la respuesta del servidor, otra propiedad importante es “successProperty” la cual indicará si la operación ha sido realizada con éxito. En el paso dos colocamos los campos que conforman el “Record” que contendrá la información que usaremos en el grid. En el paso tres se crea la instancia del “JsonWriter”, el atributo “encode” lo usamos para poner la información que se escribe en el grid en formato JSON, el atributo “writeAllFields” forza al “writer” a enviar todos los campos del record y no solamente aquellos que se han modificado. Lo siguiente es hacer el store que tendrá al “JsonReader”, “JsonWriter” y al “HttpProxy”. Lo haremos de la siguiente manera: 
this.storeGrid = new Ext.data.Store({ //step 1
	id		: "id",
	proxy		: proxy,
	reader		: reader,
	writer		: writer,
	autoSave	: true	//<--hace las peticiones al servidor automáticamente
});
		
this.storeGrid.load();  //step 2
En el paso uno lo que haces es hacer una instancia del store, esto es con el motivo de unir el “reader”, el “writer” y el “proxy”. Notemos que el “JsonWriter” es introducido al store de la misma manera de la que lo hacemos con el “JsonReader”, el store lo creamos como un objeto dentro de la función “init”. En el paso dos cargamos el store como siempre lo hemos hecho, esto ejecuta una petición Ajax al servidor. Con esto tenemos lo preparado al store para poder hacer las operaciones del CRUD de manera automática y muy sencilla.

Creando un Grid Editable

A continuación crearemos el grid editable, lo primero que haremos es hacer el grid y desplegar la información que traemos desde la base de datos. 
var textFieldEmail = new Ext.form.TextField({vtype: "email",allowBlank: false}), //step 1
textField = new Ext.form.TextField({allowBlank: false}),
	sm = new Ext.grid.CheckboxSelectionModel();
		
this.grid = new Ext.grid.EditorGridPanel({ //step  2
	store		: this.storeGrid, //step 3
	columns	: [
			sm,
			{header:'E-mail', dataIndex:'email', sortable: true, width:150, editor:textFieldEmail},
			{header:'Name', dataIndex:'first',sortable: true, editor:textField},
			{header:'Lastname', dataIndex:'last',sortable: true, editor:textField}
			],
	sm		: sm,
	border		: false,
	stripeRows	: true
});
En el paso uno creamos lo necesario para poder hacer cambios a nuestra tabla, lo que hicimos fue crear una instancia de “TextField” con un vtype de tipo “email”, esto es con el fin de que cuando se intente hacer un cambio o crear un nuevo contacto se haga un validación de que lo que se introdujo sea una dirección de correo electrónico válida. Y por ultimo con el “allowBlank” no dejamos que el campo este vacío. Se crea una segunda instancia de “TextField” pero esta no cuenta con un vtype ya que en esta no se tiene que hacer alguna validación de ese tipo pero si tiene el “allowBlank” para no permitir que este campo este vacío. Por último creamos un “checkBox” para hacer el selectionModel. El resto del código es conocido para nosotros si no te recomendamos ver los tutoriales sobre esto. En el paso dos creamos la tabla que editaremos. En el paso tres le pasamos el “storeGrid” que contiene la información a desplegar en el grid. Por último colocaremos nuestra tabla en una ventana para poder mostrar los registros de esta. 
var win = new Ext.Window({
	title	: "CRUD Example",
	layout	: "fit",
	tbar	: [  
		{text:'New Contact', scope:this, handler:this.addContact,iconCls:'save-icon'},
		{text:"Delete", scope:this, handler:this.onDelete,iconCls:'delete-icon'}],
	width	: 400,
	height	: 300,
	items	: [this.grid]
});
win.show();
Creamos la ventana esto ya es conocido para nosotros. Es importante mencionar que se crean los botones de “Nuevo Contacto” y “Eliminar” en la barra de herramienta, es importante mencionar que se les esta colocando una imagen a los botones, para esto es necesario definir las clases CSS (save-icon) y CSS(delete-icon) en nuestra hoja de estilos o documento HTML de la siguiente manera: 
.save-icon{background:transparent url(icons/add.png) 0 0 no-repeat !important;}
.delete-icon{background:transparent url(icons/delete.png) 0 0 no-repeat !important;}
Por el momento no trabajaremos con las funciones que están en los botones ya que lo haremos un poco más adelante así que puedes comentar el atributo “handler”. En este momento deberíamos tener algo como lo siguiente imagen:
leer los registros

Mostrar los contactos

Al ejecutar nuestra aplicación podemos notar que los campos de la tabla tienen los registros que trajimos de la base de datos.

Grabar los Registro Modificados

Hasta este punto tenemos la información en nuestro “Grid” lo siguiente que tenemos que hacer para poder cumplir una de las funciones del CRUD es editar los registros del “Grid” y guárdarlos en la base de datos. En este momento si editamos un registro no se actualiza en la base de datos, pero si se cambia en el “Grid”. Al intentar hacer esto nos marca el siguiente error: 
POST serverside/updateContact.php  404 Not Found
El error 404 nos indica que la url no existe, así que vamos a crear el archivo “serverside/updateContact.php”, este archivo es el que se conecta a la base de datos para poder actualizar el registro, a continuación veremos la estructura de este archivo. 
<?php	//step 1
	$connection=mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());
	
	$info = $_POST["data"];
	
	$data = json_decode(stripslashes($info)); //step 2
	
	$mail = $data->email;  //step 3
	$name = $data->first;
	$last = $data->last;
	$id   = $data->id;
	
	//step 4
	$query = sprintf("UPDATE  contacts SET email = '%s', firstName = '%s', lastName = '%s' WHERE id=%d",
mysql_real_escape_string($mail),
		mysql_real_escape_string($name),
		mysql_real_escape_string($last),
		mysql_real_escape_string($id));

	$rs  = mysql_query($query);
	
	echo json_encode(array(  //step 5
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact inserted successfully":mysql_error()
	));
En el paso uno se realiza la conexión a la base de datos, recuerda que debes poner las credenciales adecuadas así como la base de datos que usarás, en mi caso es “test”. En el paso dos, una vez que recibimos la información que mando el “Store” lo descodificamos con la función json_decode() de php con esto ya podemos acceder a la información que fue editada en el “Grid”, la función “stripslashes” elimina el carácter “\” que Apache le agrega, es posible que la configuración de tu servidor no lo haga, pero es bueno prevenir esto apra evitarnos errores en el futuro. En el paso tres obtenemos la información y la separamos en variables para poder insertarlas a la base de datos, esto es opcional ya que podríamos utilizar el mismo objeto $data. En el paso cuatro hacemos un “update” a la tabla en la que están guardados nuestros contactos y le damos como valores la información que fue mandada por el “Store”. En el paso cinco lo que hacemos es mandar un mensaje de éxito si es que todo sale bien, de lo contrario se manda el mensaje de error de mysql. Con esto si intentamos nuevamente hacer un cambio a un registro en el “Grid” veremos algo como lo siguiente:
actualizar registro

Actualizar un contacto

En este momento ya se guardan los registros en la base de datos y se tiene como respuesta algo como lo siguiente: 
{"success":true,"msg":"Contact inserted successfully"}
Hasta este momento ya cumplimos con dos de las cuatro funciones de un CRUD leer y actualizar si notamos la mayor parte de esto fue manejado por el “proxy”, el “JsonReader” y el “JsonWriter” nosotros solo creamos los archivos php, esto nos fácilita mucho las cosas.

Crear un registro nuevo

En la sección anterior logramos guardar los registros que fueron modificados por el usuario, ahora vamos a insertar nuevos registros en el Grid, para esto usaremos la función (addContact) que fue asignada al botón “nuevo contacto” esta función nos ayudara a realizar lo antes mencionado. 
addContact : function(){ 
	var contact = new this.storeGrid.recordType({ //step 1
		first	: "",
		last	: "",
		email	: ""
	});
	//step 2
	this.grid.stopEditing();
	this.storeGrid.insert(0,contact);
	this.grid.startEditing(0,1);
}
Creamos la función dentro del objeto principal y en el paso uno hacemos un nuevo registro poniendo los campos en del “Grid” vacios para que después el usuario pueda introducir la información necesaria, también podríamos definir valores por defecto. En el paso dos con “stopEditing” nos aseguramos que el usuario no esté modificando los campos, en el momento que se decida introducir un nuevo contacto. Ya que nos aseguramos que no se están editando, insertamos el nuevo contacto con los campos vacíos, y por último permitimos al usuario editar los campos con “strartEditng(0,1)” notemos que éste recibe como parámetros la posición de la celda donde se inicia a editar donde “0” es el numero de fila y “1” es el número de columna. Si ejecutamos nuestra aplicación veremos algo semejante a la siguiente imagen:
crando registro

Creando un contacto

Notemos que nos manda el siguiente error: 
POST serverside/createContact.php  404 Not Found
Al igual que en el caso anterior tenemos que crear el archivo “createContact.php” en el cual se hacer la conexión a la base de datos y se guarda el nuevo registro, la estructura del archivo se muestra a continuación: 
<?php
	//step 1
	$connection = mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());

	$info = $_POST["data"];

	$data = json_decode(stripslashes($info)); //step 2

	$name = $data->first; //step 3
	$last     = $data->last;
	$email = $data->email;
	
	//step 4
	$query = sprintf("INSERT INTO contacts (email,firstName,lastName) values ('%s','%s','%s')",
			mysql_real_escape_string($email),
			mysql_real_escape_string($name),
			mysql_real_escape_string($last));
			
	$rs = mysql_query($query);

	//step 5
	echo json_encode(array(
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact inserted successfully":mysql_error(),
		"data"		=> array(
			array(
				"id"	=> mysql_insert_id(),
				"first"	=> $name,
				"last"	=> $last,
				"email"	=> $email
			)
		) 
	));
La estructura de este archivo es muy semejante a la de los archivos previos. En el paso uno lo único que hacemos es hacer la conexión a la base de datos. En el paso dos decodificamos la información que nos manda el “Store”, esto lo hacemos mediante la función Json_decode() y le pasamos la información la cual es el registro que creó el usuario. En el paso tres lo que hacemos es sacar esa información y guardarla en unas variables para poder insertar esa información a la tabla “contacts” de nuestra base de datos. En el paso cuatro creamos el query que insertara los datos a la base de datos, es un query simple un “insert” le damos los campos y los valores que es la información que obtuvimos en el paso tres. En el paso cinco lo que hacemos es mandar un mensaje y la información que fue insertada al base de datos. Es muy importante mencionar que en el Json_encode que se está haciendo después del “success” y el “msg” mandamos la información que fue insertada a la base de datos, es muy importante mandar el “id” del nuevo registro, esto nos permitirá que los métodos update y delete funcionen correctamente, si no lo hacemos no funcionarán. Si intentamos insertar un nuevo registro esta será la respuesta: 
{"success":true,"msg":"Contact inserted successfully","data":[{"id":4,"first":"Alejando","last":"Cruz","email":"alejandro@gmail.com"}]}
Con esto ya podremos insertar un nuevo registro en nuestro “Grid” y en nuestra base de datos.

Eliminar un registro

En estos momentos solo hemos hecho lo necesario para poder leer los registros y desplegarlos en nuestro “Grid”, podemos añadir nuevo registros y editar los registros existentes. Lo único que nos hace falta es eliminar registros y con esto tendríamos las cuatro funciones del CRUD. Para esto crearemos la función a la que hace referencia el botón “eliminar”, lo que haremos es lo siguiente: 
onDelete : function(){ //step 1
	var rows = this.grid.getSelectionModel().getSelections(); //step 2

	if(rows.length === 0){  //step 3
		return false;
	}
this.storeGrid.remove(rows);  //step 4
},
En el paso uno creamos la función dentro del objeto principal. En el paso dos tomamos la instancia del “SelectionModel()” de nuestro “Grid”, con esto podemos obtener la información de las filas seleccionadas por el usuario mediante el método “getSelections()”. En el paso tres lo que hacemos es verificar que el usuario halla seleccionado algo, si no hay nada seleccionado o la selección del “Grid” esta vacía no se eliminará ningún registro ya que hacemos un return. En el paso cuatro ya que se verifico que es un registro que puede ser borrado lo elimina del “Grid” usando el método “remove” del store que contiene los records. Si intentamos hacer esto notaremos que efectivamente se borra del “Grid”, pero no se borra de nuestra base de datos, además nos manda el siguiente error: 
POST serverside/destroyContact.php  404 Not Found
Este es el mismo mensaje que recibimos en las secciones anteriores, ya que aún no tenemos ese archivo PHP; este archivo se encarga de borrar el registro en la base de datos, es muy semejante a los que hemos hecho, su estructura es la siguiente: 
<?php	//step 1
	$connection=mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());
	
	$id = json_decode(stripslashes($_POST["data"])); //step 2

	//step 3
	$query = sprintf("DELETE FROM contacts WHERE id = %d",
		mysql_real_escape_string($id));

	$rs  = mysql_query($query);
	
	//step 4
	echo json_encode(array(
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact deleted successfully":mysql_error()
	));
En el paso uno lo que hacemos es crear la conexión a la base de datos. En el paso dos obtenemos la información que nos fue mandada, la descodificamos con Json_decode() y la guardamos en la variable “id”. En este caso solo se nos envió el “id” del registro que se quiere eliminar. En el paso tres solo hacemos el query para eliminar el registro. En el paso cuatro mandamos como respuesta un mensaje de éxito y si ocurrió un error se manda el error como respuesta. Si intentamos eliminar un registro notaremos que esta vez también fue borrado de nuestra base de datos. Y esta sería la respuesta del servidor: 
{"success":true,"msg":"Contact deleted successfully"}
Con esto terminamos la última parte de nuestro CRUD que es eliminar un registro.

Conclusión

En esta ocasión vimos como podemos crear, leer, actualizar y eliminar datos usando “HttpProxy”, “JsonReader”, “JsonWriter” y un “Store” esto es muy útil ya que por medio de estas cleses de Extjs no tenemos que hacer las peticiones al servidor manualmente como lo hemos hecho en tutoriales pasados. El “JsonReader” se encarga de leer la información que nos manda el servidor, mientras el “JsonWriter” codifica la información y hace la petición al servidor. Si tienes algún comentario o sugerencia no dudes en comunicarnolos viá el formulario inferior, por el foro o en alguna de las redes sociales como Twitter y Facebook.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

91Comentarios

Instructor del curso

Crysfel3

Autor: Crysfel Villa

Es ingeniero de software con más de 7 años de experiencia en desarrollo web.
Descarga Código Fuente Ver Demostración

Regístrate a este curso

Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

Tendrás acceso a descargar los videos, códigos y material adicional.

Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

Llevarás un registro de tu avance.