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 ↑