Geek the Planet


PHP no image

Published on Marzo 7th, 2011 | by Angelfire

0

jFormer, framework para crear formularios

JFormer es un liviano pero potente framework para formularios escrito en PHP y jQuery, dentro de sus características se encuentran:

  • Utilización de AJAX (jQUery) para la validación del formulario.
  • Fácilmente personalizable mediante CSS.
  • No necesita CAPTCHAs ya que viene protección para bots.
  • Entre otras…

Es realmente sencillo y bien hecho, ya lo he revisado un poco y me ha gustado bastante, explicaré la creación del siguiente formulario de login.

login form jformer

Lo primero es poner la hoja de estilos propia de jFormer:

<link rel="stylesheet" type="text/css" href="/css/jformer.css" ></link>

Lo segundo, los respectivos archivos de Javascript:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jformer.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Cuando estés creando el formulario es necesario incluir la siguiente línea:

require_once($_SERVER['DOCUMENT_ROOT'].'/php/jformer.php');


Y por último el código del formulario, todo el código va en 1 sólo archivo, aunque creo que por buenas practicas sería mucho mejor separar el PHP del JS:

<?php	    
// Create the form
$login = new JFormer('loginForm', array(
    'submitButtonText' => 'Login',
));

// Create the form page
$jFormPage1 = new JFormPage($login->id.'Page', array(
    'title' => '<p>Login Demo</p>',
));

// Create the form section
$jFormSection1 = new JFormSection($login->id.'Section', array());

// Check to see if the remember me checkbox should be checked by default

// Add components to the section
$jFormSection1->addJFormComponentArray(array(
    new JFormComponentSingleLineText('username', 'Username:', array(
        'validationOptions' => array('required', 'username'),
        'tip' => '<p>The demo login is <b>admin</b>.</p>',
    )),

    new JFormComponentSingleLineText('password', 'Password:', array(
        'type' => 'password',
        'validationOptions' => array('required', 'password'),
        'tip' => '<p>Password is 12345</p>',
    )),

    new JFormComponentMultipleChoice('rememberMe', '', 
        array(
            array('value' => 'remember', 'label' => 'Keep me logged in on this computer')
        ),
        array(
        'tip' => '<p>If a cookie is set you can have this checked by default.</p>',
        )
    ),
));

// Add the section to the page
$jFormPage1->addJFormSection($jFormSection1);

// Add the page to the form
$login->addJFormPage($jFormPage1);

// Set the function for a successful form submission
function onSubmit($formValues) {
    $formValues = $formValues->loginFormPage->loginFormSection;

    if($formValues->username == 'admin' && $formValues->password == '12345') {
        if(!empty($formValues->rememberMe)) {
            $response = array('successPageHtml' => '<p>Login Successful</p><p>We\'ll keep you logged in on this computer.</p>');
        }
        else {
            $response = array('successPageHtml' => '<p>Login Successful</p><p>We won\'t keep you logged in on this computer.</p>');
        }
    }
    else {
        $response = array('failureNoticeHtml' => 'Invalid username or password.', 'failureJs' => "$('#password').val('').focus();");
    }

    return $response;
}

// Process any request to the form
$login->processRequest();
?>

Esto debería ser suficiente para que el formulario funcione de manera correcta.

Visto en: Pixelco blog

Ver más: jFormer
demos

Tags: , , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



Comments are closed.

Back to Top ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa