html dinámico?

Hola, en esta ocasión quiero compartir con los que lean este Blog, mi experiencia de haber logrado hacer un archivo .html dinamico.

Yo tenía la idea de que solo podía haber archivos dinámicos .php .asp .jsp pero gracias a @cvander y @freddier y todos los twitts de #mejorandhtml5 me introduje en el uso de JQuery, Javascript, html5 y algo de PHP.

Ya había desarrollado aplicaciones en PHP y XAJAX, sin embargo un reto era lograr lo mismo eliminando el uso de la extensión .php

Y bueno quizás esto no es nada nuevo, pero les comparto la forma en que lo hice.

El proyecto era, hacer una hoja de calculo de impuestos aduanales, que permitiera guardar cada hoja en una base de datos para consultas posteriores.

El reto era dejar de usar un programa desarrollado en VB6 (solo windows, claro) y llevarlo a un ambiente multiplataforma; la solucion, la web.

Todo comenzó con el modelado en html5, usando las nuevas etiquetas <header>, <nav>, <section>, <footer>.

Después vino la manita de gato, o el ponerlo bonito. Usando css3 y construyendo un archivo con las recomendaciones de @freddier de ordenar primero las etiquetas, después los id’s y por ultimo las clases, ademas de que cada una de estas secciones ordenadas alfabéticamente para una lectura mucho mas facil

Lo interesante fue como lograr meter, sacar y mostrar datos de una base en MySQL sin movernos del mismo archivo .html

Ahhh la solución fue la función $.get() de JQuery, que es una acortamiento de la funcion $.ajax() según leí.

Esta funcion $.get() es maravillosa, permite llamar a un archivo, en mi caso, .php con las distintas funciones de conexión a la base de datos, leer registros y construir las variables que serian devueltas a la funcion $.get().

Puedes a traves de esta función $.get() envías variables en formato JSON a el archivo .php, lo que te permite usarlas dentro del código php a través de $_GET. En mi caso a través de una variable llamada “fase” podía saber que función dentro del código php ejecutar.

Otra característica de la función $.get() de JQuery, puedes recibir del script php un objeto JSON, para enviarlo desde php usas la función json_enconde() que recibe un arreglo y lo devuelve a la función $.get().

Lo mas interesante es que dentro del código php puedes usar un solo echo.

Ahora tratare de explicar todo lo antes mencionado con algo de código.

 

Primero

Imaginemos que tenemos una serie de etiquetas input en la cual traeremos los valores de una tabla en MySQL, usare en ejemplo de los datos de un cliente.

En nuestro archivo .html tendríamos en algún lugar algo así:

<input type=”text” id=”clave” />

<input type=”text” id=”nombre” />

<input type= “text” id= “movil” />

<input type =”text” id=”email” />

<button type=”button” id=”buscar”>Buscar</button>

Ahora pegamos en el botón a través de JQuery el evento click, todo esto en un archivo .js

$(document).ready(

$(“#buscar”).click(buscarcliente);

//buscarcliente es el nombre de la función que hará la búsqueda

);

ahora dentro del mismo archivo .js escribimos la función buscar.

function  buscar(){

var opciones = {

clave: $(“#clave”).val()

};

//estamos construyendo un objeto JSON llamado opciones con un elemento llamado clave al cual le estamos asignando el valor del input con el id “clave” de nuestro html

//ahora hacemos uso de la funcion $.get()

$.get(

“funciones.php”,

opciones,

function(inyeccion){

$(“#nombre”).val(inyeccion.nombre);

$(“#movil”).val(inyeccion.movil);

$(“#email”).val(inyeccion.email);

},

“json”

);

}

ok.. hasta aquí vamos bien, creo. Explico que hicimos:

En la función $.get(), estamos usando como primero parámetro el url de donde esta el archivo .php que vamos a usar para conectarse a la base de datos y traer los campos nombre, movil, email de un cliente a través de la clave que enviamos con el segundo parámetro que es el objeto JSON llamado “opciones”.

El tercer parámetro es la función que recibirá lo que devuelve el archivo php y el cuarto parametro es el tipo de respuesta que aceptara la funcion $.get(), que en este caso es un objeto JSON

La función que esta como 3er parametro, lo que hace es recibir el objeto llamado “inyeccion” y aplicar los elementos de este objeto en cada uno de los input’s correspondientes dentro del html

Bien, ahora vamos con el archivo .php que en nuestro ejemplo se llama “funciones.php”

En el archivo funciones podemos tener tan solo lo relacionado a este pequeño proceso, o bien una serie de funciones que vayamos a utilizar. En el ejemplo lo haremos todo en un solo pedazo de código.

<?php

//primero conectamos la base de datos

$conn = mysql_connect(“localhost”,”usuario”,”password”);

//seleccionamos la base que vamos a usar, en este ejemplo nuestra base se llama “empresa”

mysql_select_db(“empresa”);

//construimos el query

$query = “SELECT nombre, movil, email FROM cliente WHERE clave = ” . $_GET[“clave”];

//estamos usando la variable “clave” que nos envió el $.get a través del objeto JSON “opciones”, pudimos haber recibido mas de una variable y todas son guardadas en el $_GET de php

//hacemos la consulta

$result = mysql_query($query) or die (mysql_error());

//leemos el registro

$registro = mysql_fetch_assoc($result);

//y ahora construimos el objeto JSON que devolveremos

$inyeccion = json_encode(

array(

“nombre”=>$registro[nombre],

“movil”=>$registro[movil],

“email”=>$registro[email]

)

);

// y por ultimo lo mandamos con un echo de regreso al $.get()

echo $inyeccion;

?>

Bueno pues así es como de una forma sencilla podemos tener un archivo .html que funcione como si fuera un archivo .php

Obviamente habrá muchas cosas mas que validar dentro del .php y el .js pero pero solo quiero mostrar la forma esencial de como trabaja este ejemplo.

Ventajas que le encontré…

Puedo organizar mejor mis funciones, y mi código en general.

1 archivo .html con el modelado, con etiquetas lo mas limpias posibles. Recomendación de @freddier!!

1 archivo .css con toda la cosmética que quieras darle a tu proyecto

1 archivo .js con todo lo relacionado a el funcionamiento de tu pagina

1 archivo .php con todo lo relacionado a datos dinamicos

Y claro el impresionante jquery.js que facilita enormemente comprender el uso de javascript

Esta es mi anécdota y disculpen la indentación del código, los detalles adicionales que pudiera ser necesarios en un proyecto ya mas en forma.

Espero que este ejemplo sea al menos útil para alguien

Por ultimo, visita este link: http://goo.gl/QK8uh (Jn 3:16)

Saludos y dejen sus comentarios….

Bye

Anuncios

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