Formularios Con Facile Forms

Formularios con Facile Forms
http://edu.jccm.es/ecowiki/content/tut/joomla/facile.html
Realizar formularios en Joomla con Facile Forms

Febrero 4th, 2007 Ramn Castro Prez Este documento se ofrece con la nica intencin de ser til sin ningn tipo de garanta. Licencia GPL.
Facile Forms facilita enormemente la creacin de formularios en Joomla, lo que ayuda a personalizar el sitio web adaptndolo de esta manera a nuestras necesidades. A continuacin explicaremos brevemente cmo usar esta solucin en nuestro portal Joomla. INSTALANDO FACILE FORMS Descargaremos del sitio http://www.facileforms.biz/ el componente, el mdulo, el mambot y la traduccin al castellano. Todo est disponible en la seccin Downloads Una vez descargados los paquetes (formato .zip), procederemos a su instalacin desde el backend usando el men Instaladores. En las figuras 1 y 2 se pueden visualizar las instalaciones y los mensajes recibidos.
1 de 10
10/02/2009 12:00
Figura 1
Figura 2
2 de 10
10/02/2009 12:00
El siguiente paso es publicar el mdulo y el mambot. Nos dirigimos a los mens "Mdulos -- Mdulos del sitio" y "Mambots -- Administrador de Mambots". Buscamos la referencia a Facile Forms y encontraremos que tanto el mdulo como el mambot estn desactivados. Publicaremos con un clic de ratn (Figura 3: Activando mdulo y mambot).
Figura 3 Pulsamos las pestaas "Componentes -- Facile Forms -- Configuration" y accedemos al siguiente formulario:
Figura 5 Activamos la opcin de "Nueva instalacin". Si deseramos contar con datos de ejemplo o mantener la compatibilidad con formularios de versiones anteriores, marcaramos las dos ltimas opciones. Salvamos, pulsamos siguiente en el mensaje que aparece y accedemos a la siguiente pantalla:
Figura 6 La primera opcin est marcada en "NO". De esta manera se usar el direccionamiento relativo La segunda opcin permite previsualizaciones La tercera opcin se refiere al aspecto de la parrilla donde realizaremos el formulario Las siguientes opciones (tres) vienen optimizadas por defecto
3 de 10
10/02/2009 12:00
Las opciones 7 y 8 configuran el aspecto por defecto de las reas de texto (pequeas, medianas y grandes) Por ltimo, introduciremos nuestro email (para notificaciones) y las rutas de subida de imgenes y archivos Salvamos, volviendo de esta forma al backend. CREANDO UN FORMULARIO NUEVO Nos dirigimos a la pestaa "Componentes -- Facile Forms -- Manage Forms" Pulsamos "Nuevo" para crear un formulario Accedemos a un formulario con pestaas. De momento completamos algunos campos (Figura 7) como el Ttulo, el nombre por el que lo identificar el sistema, altura, anchura, etctera
Figura 7 Una vez hemos terminado, salvamos. Nos aparece ahora un enlace para acceder al nuevo formulario. Lo pulsamos y podremos visualizar la parrilla vaca (Figura
Figura 8 Vamos a insertar en la parrilla un cuadro "input" de texto con su correspondiente etiqueta. Primero, crearemos el input y lo colocaremos en la parrilla; despus, la etiqueta
4 de 10
10/02/2009 12:00
Figura 9: Seleccionamos el tipo de input: texto
Figura 10 Datos a cumplimentar: - Nombre por el que identificaremos el elemento en el backend (es til utilizar un nombre preparado para presentar en algn informe (por ejemplo, valdra "Nombre de empresa" y no "empr_nom") ya que al final de este post lo usaremos para presentar un resumen) - Nombre (html) del input (como es un elemento de texto lo nombrar con el prefijo txt_ ) - Ojo con la anchura (width) y con el mximo de caracteres permitidos (max. length) - Si quisiramos que este elemento tuviera algn valor predeterminado, lo indicaramos en Value Una vez terminado, salvamos. Para la etiqueta (texto que preceder al input en el formulario), haremos lo mismo: Pulsamos "Nuevo", seleccionamos "Static/Text HTML"
5 de 10
10/02/2009 12:00
Figura 11 - Insertamos el nombre para identificar este elemento en el backend - Insertamos el nombre html de este elemento - Insertamos su valor (el texto que aparecer en el formulario) - Salvamos Siempre que salvemos, volveremos a la parrilla. Los elementos aparecen (si no lo hemos especificado antes) superpuestos unos sobre otros. Los seleccionaremos de la lista y usando los cursores los colocaremos en la posicin deseada (podemos cambiar la amplitud del desplazamiento modificando el valor del cuadro "Move-Pixels") y finalmente guardaremos, pulsando "Save" La figura 12 muestra la parrilla terminada con el formulario completo (NOTA: Siempre podremos modificar el tamao de la parrilla pulsando en "Edit Form" volviendo de esta manera al formulario de la Figura 7) Presentamos en la figura 12 una parrilla con: - Varios cuadros de texto (input tipo text) - Una lista de seleccin (input tipo select) - Un rea de texto (input tipo text area) - Un botn de envo (input tipo submit)
Figura 12 A continuacin, pasamos a configurar el comportamiento del formulario - Campo Email: Pretendemos que el usuario introduzca un email vlido Seleccionamos el campo Email y activamos la pestaa "Scripts". Ahora, activamos "Library" en la seccin "Validation Scripts" y en el desplegable escogemos la opcin ff_validemail, introduciendo el mensaje que queremos visualice el usuario si comete un error. Salimos guardando. La figura 13 recoge lo anterior.
6 de 10
10/02/2009 12:00
Figura 13 - Campos Empresa, telfono y descripcin: Queremos evitar que el usuario los deje en blanco. Para ellos, seleccionamos cada uno de ellos de la lista, activamos la pestaa "Scripts", "Library", "Validation Scripts" y en el desplegable seleccionamos la opcin "ff_valuenotempty". En el espacio reservado para los mensajes de error, pondremos "Debe escribir un nombre de empresa" o "Debe escribir un telfono" o "Por favor, introduzca una descripcin de su oferta". - Campo Tipo de contrato: Obligaremos al usuario a elegir una opcin vlida. Haremos lo mismo que en el resto de campos. - Botn de envo del formulario: Seleccionamos el elemento, activamos la pestaa "Script" y elegimos la opcin "Library" en "Action Scripts". En el desplegable escogeremos la opcin "ff_validate_submit" (validar y, si todo est correcto, enviar). Salimos salvando. La figura 14 muestra esto:
Figura 14 - Confirmacin del envo: Una vez que el usuario ha enviado el formulario, ste recibir una confirmacin. Para ello, editamos el formulario (botn "Edit Form") volviendo a la Figura 7. Activamos la pestaa "Scripts" y seleccionamos "Library" en "Submitted Scripts". Escogemos de la lista la opcin "ff_showsubmitted". Salimos salvando. Podemos probar el formulario pulsando el botn de envo con algn campo vaco. Si algo falla, deberemos repasar lo visto hasta ahora. ACCEDIENDO AL FORMULARIO DESDE EL FRONTEND (DESDE EL SITIO WEB) Queremos que el formulario que acabamos de crear sea accesible desde nuestro sitio. Crearemos ahora, en el men principal, un botn que nos llevar hasta l. Desde el backend, pulsaremos las opciones: "Mens -- mainmenu" y haremos clic en "Nuevo". En la pantalla siguiente, seleccionaremos la opcin "Componente". En el formulario que aparece, insertaremos el nombre que aparecer en el Men Principal de nuestra web (en el ejemplo: Empresas). Seleccionaremos "Facile Forms" en el rea de texto y pulsaremos el botn "Aplicar". Tras esto, aparecer en el lado derecho de la pgina un formulario para completar el proceso. La figura 15 lo muestra:
Figura 15 NOTA: El nombre del formulario ser el que asignamos cuando lo creamos (Figura 7, campo "Name"). Podemos definir el estilo del formulario (borde, etctera), pero lo dejaremos con sus opciones por defecto. Pulsamos "Guardar" y ya est. Desde el frontend, nuestros visitantes ya podrn cumplimentar el formulario.
7 de 10
10/02/2009 12:00
GESTIONANDO LOS DATOS GRABADOS POR LOS USUARIOS Grabaremos una entrada ficticia desde el backend para aprender a manejar los registros futuros. Desde la parrilla cumplimentamos el formulario y lo enviamos. Si todo va bien, recibiremos confirmacin del envo. Seleccionamos la opcin "Manage Records" y entraremos en el listado de entradas, el cual dispone de opciones de filtrado. Hacemos clic en nuestra entrada y observaremos lo siguiente (figura 16):
Figura 16 Pulsando la opcin "Salvar" la entrada quedar como "Revisada". Facile Forms permite, entre otros, que puedas programar tus scripst php (PIECES) para que lo usen los formularios que disees. Desde el punto de vista del administrador "aficionado" que no tiene muchas nociones de PHP, esto implica conocer algo de la estructura de Joomla, por lo que aqu vamos a hacerlo un poco ms sencillo: Crearemos un script php que nos permitir acceder a los registros grabados desde el formulario Crearemos una pgina de contenido esttico que har referencia a este script Esta pgina de contenido esttico podr ser accesible desde el men bien de manera privada (usuarios registrados) bien pblica (todos los visitantes) PROCEDIMIENTO Los datos grabados por el formulario se almacenan en dos tablas: - "jos_facileforms_records": donde encontramos el nmero Id de cada registro asociado a cada formulario (ver figura 17)
Figura 17 - "jos_facileforms_subrecords": donde se encuentran los valores grabados (ver figura 18). Los Id de la anterior tabla estn en el campo "record" de esta tabla.
8 de 10
10/02/2009 12:00
Figura 18 - Como queremos extraer los registros del formulario llamado "panel_empresas", extraeremos los "id" asociados y para cada uno de stos (record en la 2 tabla), consultaremos los ttulos y valores grabados. NOTA: Como puede observarse en la figura 18, los ttulos son los nombres de los inputs del formulario - Los resultados los mostraremos en una tabla junto con la fecha en la que se grab el formulario. PASOS PREVIOS (solamente es necesario darlos la primera vez): a) Descarga el mambot mosaddphp.php aqu (botn derecho: guardar enlace como) b) Sube el mambot descargado a la carpeta mambots/ de tu directorio joomla c) En el directorio de joomla crea la carpeta mosaddphp/ d) Desde el backend, men "Mambots -- Administrador de Mambots" PUBLICA el Legacy Mambot Includer Seguimos: 1. Creamos el script php. Puedes descargar el ejemplo aqu (botn derecho: guardar enlace como) 2. Creamos el contenido esttico desde el men del backend: "Contenido -- Administrador de contenido esttico" pulsando la opcin "Nuevo" 3. Usamos un ttulo y escribimos un encabezamiento (por ejemplo, "OFERTAS DE EMPRESAS RECIBIDAS"). Punto y aparte y escribimos: {mosaddphp:nombre_del_archivo_php} (en el ejemplo: {mosaddphp:ofertas.php}). La figura 19 lo muestra:
Figura 19 4. Activamos la opcin "Publicado" y guardamos (ya est) 5. Ahora enlazaremos el documento creado desde el men principal. Acudimos al men: "Mens -- mainmenu" y pulsamos el botn "Nuevo". Seleccionamos la opcin "Enlace-Contenido esttico". En el formulario que aparece, insertamos un nombre (que llevar el botn del men) por ejemplo, "Ofertas" y pulsamos "Guardar". 6. Abrimos el frontend (web) y observamos cmo ha aparecido un nuevo botn en el men principal l lamado "Ofertas". Lo pulsamos y aparecer la informacin de los formularios enviados, tal y como vemos en la figura 20
9 de 10
10/02/2009 12:00
Figura 20 6. Aqu hemos creado un enlace pblico. Si se desea crearlo para usuarios registrados, solamente hay que restringir el acceso en el contenido esttico y crear el enlace en el men de usuarios registrados. Conclusiones: Espero que este post-gua os sirva como introduccin al manejo de Facile Forms. Se ha pretendido dar una visin general para "ir perdiendo el miedo". Dominar el resto es cuestin de tiempo. Enlace al wiki de FacileForms: http://www.facileforms.biz/wiki/Main_Page Saludos
10 de 10
10/02/2009 12:00

Formularios Con Facile Forms

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Formularios Con Facile Forms

Transféré par

Droits d'auteur :

Formats disponibles

Formularios con Facile Forms

Realizar formularios en Joomla con Facile Forms