30
Mar
10

ExtJS, mi primer formulario + PHP/JSP +base de datos

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:

# --------------------------------------------------------
# https://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%>

27 Responses to “ExtJS, mi primer formulario + PHP/JSP +base de datos”


  1. 1 Leo
    mayo 3, 2010 a las 10:22 pm

    Buena onda de blog.
    Saludos!

  2. 2 RAUL
    junio 1, 2010 a las 5:19 pm

    buen material, estoy de inicio en extJS me será de gran ayuda… gracias mil.

  3. 3 hector
    julio 26, 2010 a las 10:08 pm

    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 }

    • julio 27, 2010 a las 5:40 pm

      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

  4. octubre 13, 2010 a las 12:53 pm

    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

    • octubre 16, 2010 a las 10:54 pm

      De nada viejo, solo el colaborar el contribuir es suficiente paga por el tiempo tomado en la creacion de estos tutos

  5. 7 didiel
    diciembre 6, 2010 a las 12:20 am

    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

  6. 8 Jose
    enero 20, 2011 a las 9:55 am

    Excelentisimo Tuto… soy nuevo en esto y me sirvio muchisimo.. espero sigas asi.. (Y)

    • enero 22, 2011 a las 3:21 pm

      Gracias Jose la idea es hacerlo facil

  7. 10 Julio Cesar
    febrero 8, 2011 a las 8:12 pm

    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

    • febrero 13, 2011 a las 5:55 pm

      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.

  8. agosto 8, 2011 a las 6:45 pm

    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?

    • agosto 9, 2011 a las 8:29 am

      Luis, colaborame con una explicación de tu pregunta, para poder ayudarte.

  9. 14 marya
    agosto 11, 2011 a las 11:54 am

    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.

    • agosto 11, 2011 a las 4:10 pm

      Marya, bueno mi más sincero agradecimiento, espero que lo que aquí encuentres sea de ayuda en todo lo que estés realizando.

  10. 16 Edgar Cifuentes
    agosto 30, 2011 a las 11:21 am

    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

    • agosto 30, 2011 a las 5:05 pm

      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()

  11. 18 Luis Miguel
    septiembre 25, 2011 a las 1:46 am

    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

    • septiembre 26, 2011 a las 8:39 am

      formulario.render(‘divFormulario’);
      es igual a
      queremos que “formulario” se “renderice” en “divFormulario”
      renderice = aparezca

  12. 20 edgard pimentel
    abril 27, 2012 a las 3:06 pm

    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

  13. 21 lazaro Cesar
    mayo 23, 2012 a las 10:52 pm

    de verdad que se resuelve con este post, sencillo y a la vez completo.

  14. 22 ronald picado
    julio 13, 2012 a las 6:31 pm

    Hola quisiera saber si puedes hacer un formulario que mande datos a un servidor con zend framework y dspues que los recupere…. Claro el formulario con ext js…

  15. 23 Darwin Sanchez
    agosto 21, 2012 a las 9:57 am

    Esta chevere el tuto sigue asi;
    Debo hacer un servicio web en php para que sea consumido por una aplicacion en jsp;
    la parte de php ya la tengo y me devuelve el valor en un json,
    { “tabla_bd” : [ { “id” : 1, “nombre”: “dato” } ] } lo presente con un echo en php;
    Ahora se desea presentar ese json en una aplicacion jsp; ¿Me Puedes ayudar?
    Gracias de antemano exelente tutorial soy un poco novato sigue asi.

    • 24 Edgard86
      agosto 21, 2012 a las 12:39 pm

      yo también tuve el mismo problema pero si eres trome en php entonces te sera fácil interpretarlo y pasarlo a código java

    • agosto 22, 2012 a las 9:25 am

      pero ya está listo, o no entendí necesitas el cliente en JSP

  16. marzo 1, 2013 a las 12:45 pm

    Algo con java puede ser o es casi == al php ? gracias


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


I+Ds

Dudas consultas
Facebook
Twiter
Google +

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevas publicaciones por correo.

Únete a otros 348 seguidores

Ingenio DS en Facebook

Redes Sociales y Archivos

Entradas

marzo 2010
L M X J V S D
« Feb   Abr »
1234567
891011121314
15161718192021
22232425262728
293031  

IngenioDS en twiter


A %d blogueros les gusta esto: