PeHachePe

Menú desplegable con efectos script.aculo.us

Ramón Castro — Fri, 06 Apr 2007 21:21:01 +0000

Demasiado tiempo sin postear nada tras la remodelación de la web en la que decidí usar el servicio web de WordPress y retirar la antigua del hosting (bastante jaleo me da la otra). En esta nueva entrega os dejo el código de un menú desplegable construído a partir de una lista (elementos li) donde el truco para desplegar consiste en usar los efectos “Fade” y “Appear” de la librería Script.aculo.us. Naturalmente, podíamos haber obviado su uso, pero ¿por qué no darle un toque de misterio al menú?

Al hacer clic sobre los elementos del submenú, se generará una petición AJAX que, gracias a la librería Prototype, hará aparecer rápidamente el contenido deseado en el div que hemos preparado a tal efecto (div id=”paginas”)

El juego de archivos es el siguiente:

index.html –> donde se presenta el menú encerrado en un div

index.css –> donde se colocan espacialmente los div y se opta por un menú horizontal (puede, cómo no, colocarse en vertical)

funciones js –> donde incluímos las librerías citadas y una página donde se declaran las funciones que usamos para presentar los contenidos en el div “paginas”

pagina.php –> script que procesa la petición AJAX y muestra, en función de la opción elegida en el menú, el contenido (en el ejemplo, es solamente una frase, pero puede incluirse lo que se quiera … conexión con base de datos, formularios, etcétera)

imagen –> a modo de icono, cogida del proyecto Tango

Nada más. Es muy sencillo. Podéis verlo en funcionamiento aquí y descargar el paquete .zip aquí. No me voy sin darle las gracias a jesusvld por removerme la conciencia (gran web de la que es partícipe; no dejéis de visitarla)

Saludos y hasta pronto

Sencillo y primitivo formulario de contacto

Ramón Castro — Sat, 17 Mar 2007 21:47:48 +0000

He estado dándole una vuelta al formulario para que las librerías incorporadas (prototype y scriptaculous) cobraran un mayor protagonismo, dejando a PHP únicamente la función de enviar el email. Con esta nueva revisión, AJAX se encarga de la validación.

He querido incluir los efectos visuales de la librería Scriptaculous (Effect.Appear y Effect.Fade) de tal manera que el visitante debe ir cumplimentando el formulario para que los campos sucesivos vayan apareciendo. Como no estoy nada puesto aún envío la información al script PHP declarando un objeto AJAX (sé que estoy obviando el hecho de que con Prototype se hace más fácil) así que si alguien lo ve más fácil, le invito a que me lo diga; necesito consejos urgentemente

Bueno, el código os lo pego aquí:

contacto.php

/* This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.You cand find a copy of the GNU General Public License in the “license” directory.

You should have received a copy of the GNU General Public License along with this script; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.

Ramon Castro (http://ramoncastro.es)

Uso de librerías AJAX:

Prototype -> (http://www.prototypejs.org/)

Script.aculo.us -> (http://script.aculo.us/)

Icono: Proyecto TANGO (http://tango.freedesktop.org/Tango_Icon_Gallery)

Formulario de contacto

envia.php


You cand find a copy of the GNU General Public License in the “license” directory.
You should have received a copy of the GNU General Public License along with this script; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA.
Ramon Castro (http://ramoncastro.es)
Uso de librerías AJAX:
Prototype -> (http://www.prototypejs.org/)
Script.aculo.us -> (http://script.aculo.us/)
Icono: Proyecto TANGO (http://tango.freedesktop.org/Tango_Icon_Gallery)
*/
$nombre = $_POST['nombre'];

$email = $_POST['email'];

$mensaje = $_POST['mensaje'];
$mail = ‘ramoncastroperez@yahoo.es’;

$asunto = ‘Mensaje de la web’;

$momento = date(‘d/m/y H:i a’);

$contenido = ”.$nombre.’, con mail ‘.$email.’ ha enviado el ‘.$momento.’ el siguiente mensaje:
‘.$mensaje.”;
//avisamos

echo ‘
’;

if(mail($mail,$asunto,$contenido))

{

$aviso = ‘Tu mensaje ha sido enviado. Gracias’;

echo $aviso;

}

else

{

$aviso = ‘Tu mensaje no ha podido ser enviado. Inténtalo más tarde. Gracias’;

echo $aviso;

}
?>

Como véis, no he añadido nada nuevo al script PHP que envía el mail (queda pendiente: cambiar la codificación de la información, que llega al mail con las tildes diabólicas, incorporar información sobre el navegador, SO e IP).
Podéis ver el ejemplo en mi web, aquí.
Saludos



Usando arrays en Ajax.InPlaceCollection desde PHP
Ramón Castro — Sat, 17 Mar 2007 21:47:04 +0000


En ocasiones nos puede interesar editar un texto y que aparezca una lista “select” con diversas opciones. Si éstas se hallan predefinidas, no hay mayor problema que seguir los ejemplos que hay en el wiki de Script.aculo.us pero si las opciones las recogemos de una base de datos o de un fichero, tendremos un “array” que podemos pasar fácilmente al select de la siguiente forma.
Esta vez lo he puesto todo en el mismo archivo y no hay base de datos detrás (es fácil venir de una consulta y mandar el resultado a otro script; mira posts anteriores en este mismo blog).
Ahí va el index.php:
 


/*

//Script PHP-AJAX distribuido con la intención de que sea útil/

//Usa las librerías Prototype y Scriptaculous//////////////////

//Ramón Castro Pérez (http://ramoncastro.es/PeHachePe/)////////

//Licencia GPL/////////////////////////////////////////////////

//Conserva esta nota///////////////////////////////////////////

*///tenemos un array que puede venir de una consulta o de un fichero de texto o de donde sea, vamos

$array = array(‘Esther’,'Elena’,'Ramón’,'Montse’);
?>








Principal









//recojo el valor si ya he enviado la opción

$valor = $_POST['value'];

if(isset($valor))

{

echo ‘
Has elegido a ‘.$valor.’
’;

}

else//si acabo de llegar a la página

{

//tenemos el párrafo de texto editable

echo ‘Elige tutor/a
’;
//Extraemos los valores del array y los pasamos a una cadena

$precadena = implode(“‘,’”,$array);

//Colocamos las comillas primera y final en la cadena

$cadena = “‘”.$precadena.”‘”;
//montamos el script donde pasamos el resultado a la página que procesa

//en el ejemplo ésta misma pero no tiene que serlo

//OJO, en la matriz Collection pasamos la variable $cadena
?>


}
echo ‘





‘;
?>
Las librerías usadas las puedes encontrar en http://script.aculo.us en la sección Downloads

Si copias y pegas el index.php, cambia las comillas inclinadas por las normales en tu editor de texto
Saludos
[tag]ajax, placecollection, scriptaculous, array, php[/tag]
       


LiveGrid (con AJAX ¿quién necesita aplicaciones de escritorio?) ¡Impresionante!
Ramón Castro — Sat, 17 Mar 2007 21:46:12 +0000


Sigo impresionado con la gente de Script.aculo.us, Prototype y Rico. Lo último que he estado mirando es el Livegrid, un artilugio fascinante para navegar entre registros en nuestra aplicación web. Eso sí, he podido acercarme tímidamente al código gracias al excelente tutorial (para novat@s como yo) de Jerome Sadou donde explica cómo usar la librería Rico con PHP en el lado del servidor.
El tutorial está en pdf pero viene “mascadito”, para copiar-pegar y probar en  local. Además, el autor ha añadido la funcionalidad para ordenar columnas en sentidos ascendente y descendente. El tutorial lo dice todo, solamente copiar y pegar y funciona. 
Una sola cosa que me ha dado algún quebradero de cabeza. En el xml_maker.php hay un switch donde los case son los encabezados de la tabla. A mí me ha funcionado con los case en minúsculas, aunque en el encabezado vayan con la primera inicial en mayúscula. 
Probadlo, es genial. 
Saludos
[tag]livegrid, rico, ajax, php[/tag]
       


Edición en línea (ya sabes: AJAX y … del lado del servidor, PHP)
Ramón Castro — Sat, 17 Mar 2007 21:43:21 +0000


Poco a poco voy escrutando las extraordinarias librerías de Script.aculo.us. Le toca ahora a la edición en línea (tema que aprovecha mucho mejor Mario Debian con su Inline Editor trabajado sobre éstas), sin duda uno de las técnicas que mejores resultados pueden darnos si detrás del formulario contamos con una base de datos y un intérprete (PHP, por ejemplo).
Así que me he puesto a seguir la documentación del wiki y ¡funciona!, así que os pego aquí el código.
Archivos:
- index.php –> Muestra una tabla con datos sobre empleados obtenida al consultar una base de datos usando para ello un bucle for. Las celdas que serán editables están identificadas con un nombre corto más el valor de la iteración corriente. Al final de la página llamamos a la librería script.aculo.us para que, al hacer clic en el contenido, convierta la celda en un cuadro de texto (hay muchas más opciones, digno de mirar en la documentación) y aparezca un botón tipo “submit” para enviar la orden (sin necesidad de recarga de la página: esto es AJAX) al script:
- guarda.php –> Recibe el valor de cada iteración y si la variable no está vacía (es decir, hemos editado y enviado) actualiza el registro en la base de datos y lo muestra. Así de sencillo.
- index.css –> Se encarga de los estilos
Las posibilidades son amplias: cajas de texto, áreas de texto, select, etcétera …
El código:
index.php
 


/*

This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or

(at your option) any later version.You cand find a copy of the GNU General Public License in the “license” directory.
You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA.
Ramon Castro (http://ramoncastro.es)
Uso de librerías AJAX:
Prototype -> (http://www.prototypejs.org/)
Script.aculo.us -> (http://script.aculo.us/)
*/
?>








Editando en línea con AJAX











//presentamos título
echo ‘
Emplead@s de la empresa
’;
//presentamos caja
echo ‘
’;

echo ‘’;
//la tabla
echo ‘
’;
echo ‘
’;

echo ‘’;

echo ‘’;

echo ‘’;

echo ‘’;
//conectamos con mysql y seleccionamos los datos
$con_mysql=mysql_connect(‘localhost’,’scripts’,’scripts’);
if (!$con_mysql) {echo ‘No se ha podido encontrar el servidor de datos’;exit;}
mysql_select_db(’scripts’);
$select = mysql_query(“select * from empleados”);
//montamos bucle
for($a = 0; $a < (mysql_num_rows($select)); $a++)
{

$reg = mysql_fetch_array($select);

echo ‘
’;

echo ‘’;

echo ‘’;
echo ‘
’;

echo ‘’;

echo ‘


‘;

echo ‘


‘;
}
echo ‘

Id Emplead@ Cargo







’;

echo $reg['id'];

echo ‘ ’;

echo $reg['empleado'];

echo ‘
’;

echo $reg['cargo'];

echo ‘



’;
echo ‘’;

echo ‘’;
?>


guarda.php
 

/*

This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or

(at your option) any later version.
You cand find a copy of the GNU General Public License in the “license” directory.
You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA.
Ramon Castro (http://ramoncastro.es)
Uso de librerías AJAX:
Prototype -> (http://www.prototypejs.org/)
Script.aculo.us -> (http://script.aculo.us/)
*/
//conectamos con mysql, cargamos variables y actualizamos
$con_mysql=mysql_connect(‘localhost’,’scripts’,’scripts’);
if (!$con_mysql) {echo ‘No se ha podido encontrar el servidor de datos’;exit;}
mysql_select_db(’scripts’);
$select = mysql_query(“select * from empleados”);
for($a=0;$a<(mysql_num_rows($select));$a++)
{

$reg = mysql_fetch_array($select);

$id = $reg['id'];

$emp = $_POST['emp-'.$a.''];

$car = $_POST['car-'.$a.''];
//si se cambia empleado actualizamos

if(isset($emp))

{

$update = mysql_query(“update empleados set empleado=’$emp’ where id=’$id’”);

//muestro el texto

echo $emp;

}

//si se cambia empleado actualizamos

if(isset($car))

{

$id = $reg['id'];

$update = mysql_query(“update empleados set cargo=’$car’ where id=’$id’”);

//muestro el texto

echo $car;

}
}
?>
index.css
 

/*

This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or

(at your option) any later version.You cand find a copy of the GNU General Public License in the “license” directory.
You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA.
Ramon Castro (http://ramoncastro.es)
*/
*{

margin:0;
padding:0;

}

a {text-decoration:none;}

a:link, a:visited{color:#444;}

a:hover, a:active{color:white;}

input{

border:1px solid #444;

margin:4px;

font-size:10px;

}

input:hover{

border:1px solid #0021a5;

}
body{
font-family: Andale Mono;
font-size:12px;

}

h1{

position:relative;

text-align:center;

background:transparent;

top:110px;

width:40%;

height:20px;

margin:auto;

}

div#caja{

position:relative;

margin:auto;

width:50%;

top:150px;

background:#199eee;

}

#caja table{

margin:auto;

padding: 20px;

}

#caja table tr#encab{

font-weight:bold;

text-align:center;

background:white;

}

#caja table td{

padding:4px;

}

b.rtop, b.rbottom{

display:block;

background: #FFF;

}

b.rtop b, b.rbottom b{

display:block;

height: 1px;

overflow: hidden;

background: #199eee;

}

b.r1{

margin: 0 5px

}

b.r2{

margin: 0 3px;

}

b.r3{

margin: 0 2px;

}

b.rtop b.r4, b.rbottom b.r4{

margin: 0 1px;

height: 2px;

}

.inplaceeditor-saving { background: url(../imgs/spinner.gif) bottom right no-repeat; }
Saludos
[tag]ajax, editor, php[/tag]
     


Autocompletar usando Script.aculo.us, PHP y MySQL
Ramón Castro — Sat, 17 Mar 2007 21:42:05 +0000


Sigo aprendiendo (muy poco a poco) y disfrutando de AJAX y más concretamente de las librerías Script.aculo.us y Prototype (espectaculares). Una de las cosas que quería implementar y probar en mis scripts era la posibilidad de ofrecer la cualidad Autocompletar en los cuadros de texto (al estilo de Google Suggest). Así que usando la documentación del wiki de Script.aculo.us he podido realizar un formulario donde puedes buscar al alumnado por el nombre. Tras escribir la primera letra, el script ya comienza a sugerir resultados, resultados que provienen de una base de datos MySQL y que un script PHP se encarga de consultar y listar. El esquema de funcionamiento es el siguiente:
1.- Se carga la página con el formulario (se cargan entonces las librerías script.aculo.us y prototype). En el formulario se presenta una caja de texto donde el cliente introducirá su búsqueda. Dentro del formulario hay un script javascript que llama a las librerías para que genere el proceso de autorrelleno. Entre otros parámetros, se pasan el número de letras mínimo que el cliente introducirá para que se vayan ofreciendo resultados, el url del script php, el id de la caja de texto, el id del div donde se presentará la lista de sugerencias, etcétera.
2.- Las librerías mencionadas llaman y pasan el valor escrito por el usuario al script php que lo recoge, lo limpia (con trim), conecta con MySQL, realiza la consulta (palabras parecidas) y lista los resultados.
3.- El producto de la consulta se pasa al div y éste se presenta. Finalmente, cuando el usuario selecciona de la lista un valor, éste se inserta de manera automática en la caja de texto.
Veamos el código:
Index.html:

Id	Emplead@	Cargo
’; echo $reg['id']; echo ‘	’; echo $reg['empleado']; echo ‘	’; echo $reg['cargo']; echo ‘