Simple Login con LungoJS, MySQL y PHP

Hola a todos, en un articulo anterior les mostré como hace un simple login con JQM, pues ahora le toco el turno a Lungo. Bien para ser concretos, la versión de Lungo que estoy usando es la que esta en la dirección de su proyecto en github https://github.com/tapquo/Lungo.js, aunque he leído por ahí que algunos han tenido problemas en visualizar el demo de ejemplo que viene, así que he subido el mismo paquete a mi dropbox, es lo mismo, pero a mi me va bien.

https://www.dropbox.com/s/q0bfqj764uh9cl5/Lungo.js-master.tar.gz

Ojo para apreciar mejor el demo de ejemplo ejecútenlo sobre el servidor web, por ejemplo apache. Por otro lado, debo mencionar que la versión de Lungo esta madurando cada vez mas y agregando nuevas funcionalidades que debo agradecer pues se ve mas ordenado y nos facilita el diseño de aplicaciones, a algunos les puede chocar los cambios que se hacen, pero vamos, no es tan difícil revisar los ejemplos y comparar. Bueno ahora si, al login.

Primero tenemos la estructura de nuestro index.html.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login con LungoJS</title>
    <meta name="description" content="">
    <meta name="author" content="Julio Carazas">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="cleartype" content="on">

    <!-- iPhone -->
    <link href="http://cdn.tapquo.com/lungo/icon-57.png" sizes="57x57" rel="apple-touch-icon">
    <link href="http://cdn.tapquo.com/lungo/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPhone (Retina) -->
    <link href="http://cdn.tapquo.com/lungo/icon-114.png" sizes="114x114" rel="apple-touch-icon">
    <link href="http://cdn.tapquo.com/lungo/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPhone 5 -->
    <link href="http://cdn.tapquo.com/lungo/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPad -->
    <link href="http://cdn.tapquo.com/lungo/icon-72.png" sizes="72x72" rel="apple-touch-icon">
    <link href="http://cdn.tapquo.com/lungo/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: portrait)
             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
    <link href="http://cdn.tapquo.com/lungo/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPad (Retina) -->
    <link href="http://cdn.tapquo.com/lungo/icon-144.png" sizes="144x144" rel="apple-touch-icon">
    <link href="http://cdn.tapquo.com/lungo/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: portrait)
             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <link href="http://cdn.tapquo.com/lungo/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
             and (orientation: landscape)
             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css" id="theme-stylesheet">
    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
    <!-- App Stylesheet -->
    <link rel="stylesheet" href="static/stylesheets/app.css">
</head>

<body>
    <section id="login" data-transition="cover">
        <article id="art_login" class="active splash">
            <img src="images/logo.png" class="logo"/>
            <div class="form">
                <fieldset class="radius-top" data-icon="user">
                    <input type="text" placeholder="Ingresa tu email" id="txtUser" value="">
                </fieldset>
                <fieldset class="radius-bottom shadow" data-icon="lock">
                    <input type="password" placeholder="Ingresa tu contraseña" id="txtPass" value="">
                </fieldset>
                <br/>
                <a href="#" class="button anchor" data-icon="user" data-label="Ingresar" data-action="login"></a>
            </div>
        </article>
    </section>
    <section id="principal" data-transition="slide" data-aside="features">
        <header data-title="Login con LungoJS">
            <nav>
                <a href="#" data-view-aside="features" data-icon="menu"></a>
            </nav>
            <nav class="right">
                <button data-icon="signout" data-label="Salir" data-view-section="login"></button>
            </nav>
        </header>

Uno de los cambios que aprecio en lungo son los data-action, ya verán que útiles son mas adelante al trabajar con los eventos. También podrán apreciar el data-aside en el section que enlaza la sección con el aside que usara, este es llamado luego por el data-view-aside con el id del aside. Este cambio es muy bueno, ahora puedes hacer referencia a cualquier parte de tu vista usando data-view mas la etiqueta HTML5 que quieras usar, como section, article, footer, etc.

<article id="main-article" class="active list indented scroll">
            <ul>
                <li class="dark">
                    <strong>
                        A framework for developers who want to design, build and share cross device apps.
                    </strong>
                </li>
                <li data-icon="coffee" class="feature">
                    <strong>HTML5 Optimized Apps</strong>
                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
                </li>
                <li data-icon="file" class="feature">
                    <strong>Powerfull JavaScript API</strong>
                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
                </li>
                <li data-icon="book" class="feature">
                    <strong>Multi-Device full support</strong>
                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
                </li>
                <li data-icon="github-alt" class="feature">
                    <strong>Open Source Project</strong>
                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
                </li>
            </ul>
        </article>
    </section>

    <aside id="features">
        <header data-title="Login">
        </header>
        <article class="list active">
            <ul>
                <li class="current">
                    <a href="#">
                        <strong>Menu1</strong>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <strong>Menu2</strong>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <strong>Menu3</strong>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <strong>Menu4</strong>
                    </a>
                </li>
            </ul>
        </article>
    </aside>

    <!-- Lungo - Dependencies -->
    <script src="components/quojs/quo.js"></script>
    <script src="components/lungo.brownie/lungo.debug.js"></script>
    <!-- Lungo - Sandbox App -->
    <script>
        Lungo.init({
            name: 'Login LungoJS'
        });
    </script>
    <script src="app/login.js"></script>
</body>
</html>

Pasamos a nuestro PHP que devolverá un JSON, pueden usar cualquier lenguaje de lado del servidor, Python, Ruby, Java, siempre y cuando envíen un JSON de la misma estructura que genera este PHP.

<?php

header('Access-Control-Allow-Origin: *');

$server = "192.168.1.35";
$username = "root";
$password = "";
$database = "test";

$con = mysqli_connect($server, $username, $password) or die ("No se conecto: " . mysqli_error());

mysqli_select_db($con, $database);

$usu = filter_input(INPUT_POST,'email',FILTER_SANITIZE_STRING);
$pass = filter_input(INPUT_POST,'pwd',FILTER_SANITIZE_STRING);

$sql = "SELECT nombre FROM usuarios WHERE nombre='$usu' AND password='$pass' LIMIT 1";

$datos = array();

if ($resultado = mysqli_query($con, $sql)){
	if (mysqli_num_rows($resultado) > 0){
		while ($row = mysqli_fetch_object($resultado))
		{
		    $datos[] = array(
		        'nombre' => $row->nombre
		    );
		}
		echo json_encode($datos);
	}
	else{
		$datos[] = array(
	    	'nombre' => 'error'
	    );
		echo json_encode($datos);
	}
}
mysqli_close($con);

?>

Ahora uso mysqli, por sino sabían PHP en siguientes versiones no usara mas el clásico mysql. Quieren ver algunas ventajas de usar mysqli aquí.  Ahora pasamos el archivo login.js

Lungo.Events.init({
	// evento que queremos ejecutar (tap) , luego le decimos que elemento del dom dispara el evento
	// en este caso hacemos referencia al articulo con su id y luego al enlace "a" y aqui
	// usamos el data-action, por que ?, porque podrian haber muchos otros enlaces a parte de este
	// pero si le colocamos un data-action sabremos cual es, especificando su valor, en este caso
	// lue pusimos login.
	'tap article#art_login a[data-action=login]': function() {
		var url = 'server/login.php';
		// capturamos los valores de los input
		var usuario = Lungo.dom('#txtUser').val();
		var password = Lungo.dom('#txtPass').val();
		var data = { email: usuario,pwd: password };
		// Nuestra funcion que trabaja el resultado devuelto por el json
		var parseResponse = function(result){
			if (result[0]["nombre"] == "error"){
				// Si es un error le mostramos un bonito mensaje con un efecto muy estetico
				Lungo.Notification.error('Error', 'Usuario o Password no valido', 'remove', 2);
			}
			else{
				// Si todo fue correcto cargamos la seccion principal, usando Router
				Lungo.Router.section("principal");
				// Limpiamos los input
				Lungo.dom('#txtUser').val('');
				Lungo.dom('#txtPass').val('');
			}
		};
		// Ejecutamos el servicio post llamando nuestra funcion parseReponse que recibira un json
		// asi es como se puede consumir webservices REST y formato json
		Lungo.Service.post(url, data, parseResponse, "json");
    }
});

Unas capturas

Image and video hosting by TinyPic
Image and video hosting by TinyPic
Image and video hosting by TinyPic

Y el código fuente. Hasta otra.

https://www.dropbox.com/s/gx3oy7x8c4m2xh1/loginLungoJS.tar.gz

Anuncios

14 comentarios sobre “Simple Login con LungoJS, MySQL y PHP

  1. Genial, me sirvió un par de cosas. Dos preguntas. Como podemos manejar sesiones de usuario, osea que el usuario aparezca logeado en nuestra app de LungoJS y 2 No es nada seguro mandar los datos asi veo que por el POST tengo los datos en texto plano, como le podríamos agregar un poco mas de seguridad?. Gracias

    1. Hola, bueno el tema de sessiones y de seguridad lo puedes trabajar de lado del servidor, pero claro también es posible encriptarlo con algo de javascript y si el servidor tiene soporte https mucho mejor. Como ves el ejemplo es algo sencillo para que alguien pueda empezar a jugar con el, pero eso si, se aprecia el potencial de Lungo. Saludos.

  2. realice la prueba pero esta generando problema cuando se incluye la url completa en el archivo login.js url = ‘http://dominio/server/login.php’. Sabes como puedo solucionarlo?

  3. Hola;
    Muy buen post, lo usé para mi primera aplicacion con LungoJS, aunque usando epiphany (restful) para el login via post.

    El testeo muy bien en PC y simuladores, pero tengo muchos problemas con los inputs cuando trato de editarlos en el movil tanto en Android como IOS, y en LungoJS no acabo de ver que se dé una solucion.

    El principal problema con los inputs y los select me sucede tambien al hacer scroll y situarme en inputs que se corresponden con otros, es como si no hiciera scroll realmente de los inputs y selects del formulario.

    Veo que manejas bastate LungoJS por tus articulos, alguna solucion a este tema??

    Gracias

  4. Yo no sé si será culpa de mi adsl barato o qué, pero no me va… A lo mejor es el servidor que últimamente está más caído que de pie…

      1. gracias por la ayuda, pero aun a si no me funciona, al intentar correr la aplicación en el emulador no obtengo nada

  5. Como hago para mostrar un loading mientras esta consultando el servidor, hacer desaparecer el loading cuando termine la peticion y mostrar un error o success segun corresponda.

    Se cuales son las funciones de la API de lungojs pero nunca me muestra el error o el success. Pongo Lungo.Notification.show() antes de iniciar la consulta. Cuando termina pongo lungo.notification.hide() y luego Lungo.Notification.success(…) pero no se muestra.

    Como es el uso adecuado?

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 )

Google+ photo

Estás comentando usando tu cuenta de Google+. 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 )

Conectando a %s