Esta vez utilizaremos en mismo formulario anterior y le modificaremos el formato de la fecha para que ya no sea DD/MM/AAAA y sea AAAA-MM-DD o sea 31/12/2010 y sea 2010-12-31 y luego lo guardamos en la base de datos.
utilizamos 3 archivos 1 para el formulario, otro para procesar la solicitud, (trabajaremos con JMerlin PHP más adelante) y el script de la base de datos.
utilizamos la siguiente base de datos:
# -------------------------------------------------------- # http://ingeniods.wordpress.com # codigo.java@hotmail.com # 301-3363126 # -------------------------------------------------------- #CREANDO LA BASE DE DATOS CREATE DATABASE IF NOT EXISTS `Ext` /*!40100 DEFAULT CHARACTER SET latin1 */ ; USE `Ext`; #CREANDO LA TABLA PERSONA CREATE TABLE IF NOT EXISTS `Persona`( `nombre` VARCHAR(100) NOT NULL DEFAULT '', `apellido` VARCHAR(100) NOT NULL DEFAULT '', `fdn` DATE NOT NULL DEFAULT '2010-01-01', `id` INTEGER(20) NOT NULL AUTO_INCREMENT, PRIMARY KEY (`id`) )ENGINE=InnoDB DEFAULT CHARSET=latin1;
el formulario
<html>
<head>
<title>Mi Primer Formulario Ingenio DS</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var formulario = new Ext.form.FormPanel({
<!-- formulario nombre de la variable, Ext.FormPanel funcion que indica que queremos un formulario -->
standardSubmit: true,
renderTo: document.body,<!-- donde pondremos el formulario -->
<!-- si tuviesemos un div donde quisieramos poner el formulario seria(mirar ultima linea) -->
frame: true,<!-- lo queremos como ventana -->
title: 'Ingenio DS',<!-- titulo de la ventana -->
width: 250,<!-- ancho del formulario -->
heigth: 250,<!-- ancho del formulario -->
x: 100,<!-- 'x' y 'y', una posicion en la ventana -->
y: 100,
floating: true,<!-- decir que puede tomar cualquier posicion en la ventana -->
items: [{<!-- items hace referencia a los campos del formulario es un vector -->
xtype: 'textfield',<!--xtype tipo del campo -->
fieldLabel: 'Nombre',<!--fieldLabel texto del campo -->
name: 'nombre'<!--name nombre del campo -->
},{
xtype: 'textfield',<!--xtype puede ser textfield, datefield, timefield, numberfield, combo, textarea-->
fieldLabel: 'Apellido',
name: 'apellido'
},{
xtype: 'datefield',
fieldLabel: 'Fecha de nacimiento',
name: 'fdn',
format :'Y-m-d'<!-- AAAA-mm-dd->
}],
<!-- en es es un vector precedido de la palabra buttons: para especificar -->
<!-- que este vector son los botones del formulario en este caso el submit-->
buttons: [{
text: 'Guardar',
handler: function() {
<!-- estos son elementos basicos de los formularios -->
<!-- la accion -->
<!-- guardar_persona.jsp=para tomcat -->
<!-- guardar_persona.php=para wamp, xamp, apache -->
formulario.getForm().getEl().dom.action = 'guardar_persona.php';
<!-- el metodo de envio de la informacion -->
formulario.getForm().getEl().dom.method = 'POST';
<!-- para decir que este boton es el submit -->
formulario.getForm().submit();
}
}]
});
});
<!-- formulario.render('divFormulario'); -->
</script>
</head>
<body>
<!-- Nada en el cuerpo -->
Ingenio DS
</body>
</html>
y la pagina para procesar la solicitud
<?php
//parametros de conexion a la base de datos
$direccion= "localhost";
$bbdd= "Ext";
$nombre= "root";
$clave = "";
$conexion;
$consulta;
$resultado;
//realizando la conexion
$conexion=mysql_connect($direccion,$nombre,$clave );
mysql_select_db($bbdd,$conexion);
try{
//diseñando la consulta SQL
$consulta = "INSERT INTO persona(nombre, apellido, fdn) VALUES (";
$consulta =$consulta."'".$_REQUEST['nombre']."',";
$consulta =$consulta."'".$_REQUEST['apellido']."',";
$consulta =$consulta."'".$_REQUEST['fdn']."');";
//lanzando la consulta
$resultado = mysql_query($consulta,$conexion) or die(mysql_error());
echo("Operacion terminada satisfactoriamente");
}catch(Exception $e){
echo('Error: '.$e);
}
?>
y este código JSP para la gente del Tomcat,
Para que funciones tienes que instalar el
driver de conexión a MySQL descargalo aqui y crear una carpeta que se llame “WEB-INF” y dentro de esta una que se llame “lib” y hay guardar el driver que debe ser un jar
<!-- clases para la conexion a la BD -->
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.DriverManager" %>
<!-- Clases para convertir de String a Date -->
<%@ page import="java.text.DateFormat" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.sql.Date" %>
<%
//parametros de conexion
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/ext";
String nombre = "root";
String clave = "";
PreparedStatement pstmt = null;
ResultSet rs = null;
Connection co=null;
//variable para mostrar un mensaje
String mensaje="";
try {
//Cargando el driver de coneccion
Class.forName(driver);
} catch (ClassNotFoundException ex){
mensaje="Error en la conexion, No cargo el Driver ";
}
//Conectandose a la BD
co = DriverManager.getConnection(url,nombre,clave);
//Convirtiendo de String a Date
DateFormat df = new SimpleDateFormat("yyyy-MM-dd");
Date fecha = new Date(df.parse(request.getParameter("fdn")).getTime());
try {
//Estructiura sentencia SQL
pstmt = co.prepareStatement("INSERT INTO persona(nombre, apellido, fdn) VALUES(?,?,?)");
//dandole valor a los ?
pstmt.setString(1,request.getParameter("nombre") );
pstmt.setString(2,request.getParameter("apellido"));
pstmt.setDate(3,fecha);
//ejecutando sentencia
pstmt.executeUpdate();
mensaje="La operacion termino satisfactoriamente";
} catch (Exception ex){
mensaje="Error: "+ex;
}
%>
<%=mensaje%>
Buena onda de blog.
Saludos!
buen material, estoy de inicio en extJS me será de gran ayuda… gracias mil.
tengo una duda como puedes hacer para que estas lineas las metas en una funcion ya lo intente pero no me llama la funcion
function() {
40
41
42
43
44
45 formulario.getForm().getEl().dom.action = ‘guardar_persona.php’;
46
47 formulario.getForm().getEl().dom.method = ‘POST’;
48
49 formulario.getForm().submit();
50 }
tendrias que ser mas explicito por que en realidad es una funcion aninima pero si la sacas del handler y le das nombre en el handler tendrias que llamar la funcion y deberia funcionar
Hola Ingeniods
La clase ExtJS me parece una maravilla, ya la habia probado pero no con datos.
Buen aporte, gracias voy a probarlo,
Saludos desde Nicaragua
NicaFox
De nada viejo, solo el colaborar el contribuir es suficiente paga por el tiempo tomado en la creacion de estos tutos
muy bueno el codigo, me sirvio de mucho…necesito saber como puedo obtener la informacion de la base de datos y mostrarla en un formulario ext, si me puedes ayudar con eso te lo agradeceria.
saludos
Excelentisimo Tuto… soy nuevo en esto y me sirvio muchisimo.. espero sigas asi.. (Y)
Gracias Jose la idea es hacerlo facil
Muy buen tutorial para trabajar con EXTJS y Mysql, tengo una duda espero me puedas ayudar, lo que pasa que tengo una tabla que tiene un id auto incrementable y campos de nombre, telefono, corre, comentario y en el form de la EXT JS no pongo el campo id por que es auto incrementable y no quiero que aparesca, y en el archivo de conexion de php, pongo todos los campos que quiero que se guarden en la base de datos menos el ID, y me marca error al momento de guardar tengo que poner en el Form el campo ID y en el PHP tambien, pero tengo que poner manualmente el id si el ID 1 esta ya ocupado me marca error solo puedo poner los ID que no esten ocupados, y yo no kiero eso quisiera saber como puedo hacerle en la conexion o en el form para que no me cause problemas si no llamo al campo del id auto incrementable..
Espero me puedas ayudar.. gracias
ahora mismo no tengo computador… es malo para mi porque todos los ambientes de desarrollo los perdí, Java, PHP, C#, ZK, JSP., …, .. en fin espero poder terminar el fin de semana que viene, instalarlos nuevamente.
Que tal viejo oye tu ejemplo me ayudo mucho.
Sin embargo tengo una pregnunta:
¿Se pueden cargar ventanas independientes (que se encuentran en otro archivo) en un contenedor?
Luis, colaborame con una explicación de tu pregunta, para poder ayudarte.
hola antes k nada felicitarlo por los tutoriales k nos deja en su pagina y bueno estoy haciendo un sistema para mi curso de java con jsp y mysql esto es la solucion de mi sitema gracias espero su repsuesta
Diseñaremos un sistema en html y jsp donde el vendedor y el jefe de almacén puedan ver que productos hay en stock. Realizaremos un formulario de envió de pedido al proveedor vía web. Realizaremos nuestra base de datos en Mysql que actualizara el stock de los productos.
El objetivo de dicho sistema es la de incrementar las ventas, confianza y el mejoramiento en el control de los procesos que se realizan, para así lograr una mayor productividad de la empresa.
Marya, bueno mi más sincero agradecimiento, espero que lo que aquí encuentres sea de ayuda en todo lo que estés realizando.
buen dia me gustaria saber que funcion tiene la libreria ext-base.js ya que estoy trabajando con la version extjs4 y no encuentro este archivo, soy nuevo y estoy en la tarea de generar un formulario que guarde y consulte datos en mysql.
si no es mucha molestia le agradeseria si tiene un ejemplo de como consultar,modificar y crear datos en un formulario
gracias
ext-base.js, no es una librería es un archivo javascript del Ext js 3 o inferior, que contiene la definición de la clase base de todo el Ext, en el 4 no estoy seguro pero creo que el contenido de ese archivo está en uno llamado ext-all.js o ext-all-debug.js; pero puedes verificar y mirando dentro de ellos debe exister una linea que diga “Ext.Base()“
Amigo buen tutorial! estoy comenzando con esta onda del extJs y pues quisiera saber que hace formulario.render(‘divFormulario’); que dejaste comentado o en que caso se usa? gracias
formulario.render(‘divFormulario’);
es igual a
queremos que “formulario” se “renderice” en “divFormulario”
renderice = aparezca
tengo un problema la cual no puedo recuperar el valor de mi textfieldlabel en mi jsp, espero me puedan ayudar
items: [
//text
// ,
{
fieldLabel: 'usuario',
name:'first',
value:'prueba'
}
]
handler:function(){
// window.location=’panel1.jsp’,
alert(text.getValue()),
// simple.getForm().submit(),
// window.location=’principal.jsp’
simple.getForm().getEl().dom.action = ‘index.jsp’,
simple.getForm().getEl().dom.method =’POST’,
simple.getForm().submit()
}
}
y en el JSP me sale null el valor de la variable
JSP Page
de verdad que se resuelve con este post, sencillo y a la vez completo.