Beagle Mobil: 2012

Cuando comenzamos a desarrollar para móvil y nos adentramos mas, nos surge la duda "¿como envío información de mi formulario a una base de datos?", la respuesta a este enigma es: utilizando ajax y un servidor remoto que nos permita crear un archivo .php, .jsp, .asp, etc que haga la interacción a X base de datos, que en este caso - ejemplo utilizaremos un archivo .php y base de datos Mysql. El código se capturo dentro de Dreamweaver 6, que ya tiene integrado Phonegap y Jquerymobile, por lo que si utilizan integración de phonegap en Xcode o Eclipse les recomiendo solo añadir los links .js faltantes al código html resultante de este ejemplo.

Creando Tabla mysql y el archivo .PHP

Para guardar la información en la base de datos requerimos de un puente, esto es un archivo PHP que por medio de Post obtendrá los datos que enviemos desde nuestra aplicación móvil y este lo enviara a la base de datos.

Tabla mysql

1.- Create database phonegap

2.- CREATE TABLE `clientes` (
id_clientes int(11) unsigned NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) DEFAULT NULL,
`mail` varchar(50) DEFAULT NULL,
`telefono` varchar(50) DEFAULT NULL ,
PRIMARY KEY (`id_clientes `)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

Archivo .PHP

1.- Creamos un archivo conecta.php (puede ser cualquier otro nombre)

2.- <?php

//Conexión a base de datos
$server = "localhost";
$username = "root";
$password = "";
$database = "phonegap";
$con = mysql_connect($server, $username, $password) or die ("Error al conectar: " . mysql_error());
mysql_select_db($database, $con);

//Obtenemos por Post los valores enviados desde el móvil

$nombre = $_POST["name"];
$mail = $_POST["mail"];
$telefono = $_POST["telefono"];

//Insertamos en la base de datos

$sql = "INSERT INTO clientes (id_clientes, nombre, mail, telefono ) ";
$sql .= "VALUES (' ', '$nombre', '$mail', '$telefono')";
if (!mysql_query($sql, $con)) {
die('Error: ' . mysql_error());
} else {
// Mostramos un mensaje, que sera el que se desplegara en nuestro móvil al concluir el guardado de datos.

echo "Datos guardados";
}
mysql_close($con);
?>

En el código anterior se muestra como crear la conexión a la base de datos, para después obtener por POST los valores que envío el móvil para así finalizar insertando en la base de datos y enviar un mensaje final hacia el móvil, notaran que es similar a como lo hacen los formularios de una pagina WEB.

Creando el conector móvil

Archivo .html (móvil)

Creamos el archivo en html en este caso prueba.html y dentro de <head></head> escribimos el <script> lo siguiente:

<script>
        $(function() {

            $("#enviadatos").click(function() {
                var elNombre = $("#nombre").val();
    var elMail = $("#mail").val();
    var elTelefono = $("#telefono").val();
$("#nombre").val(" ");
    $("#mail").val(" ");
    $("#telefono").val(" ");

                    $.ajax({
                      type: "POST",
                      url: "conecta.php",
                      data: ({name: elNombre, mail: elMail, telefono: elTelefono }),
                      cache: false,
                      dataType: "text",
                      success: onSuccess
                    });

            });



            function onSuccess(data)
            {

    alert(data);
            }

        });
    </script>

El código se invoca cuando se presiona el botón con id= "enviadatos" de nuestro formulario móvil, paso seguido se guardan en variables los valores de en este caso los input con los id: nombre, mail, telefono , que serán enviados por medio de Ajax a nuestro archivo conecta.php que sera el encargado de procesar la información y retornar algún mensaje.

Y listo esos son los pasos para enviar datos desde el móvil hacia una base de datos.

aquí abajo esta el código completo del formulario móvil.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aplic. Web de jQuery Mobile</title>

<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css" />

<script src="jquery-mobile/jquery-1.8.0.js"></script>
<script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>

<script>
        $(function() {

            $("#enviadatos").click(function() {
                var elNombre = $("#nombre").val();
    var elMail = $("#mail").val();
    var elTelefono = $("#telefono").val();
$("#nombre").val(" ");
    $("#mail").val(" ");
    $("#telefono").val(" ");

                    $.ajax({
                      type: "POST",
                      url: "conecta.php",
                      data: ({name: elNombre, mail: elMail, telefono: elTelefono }),
                      cache: false,
                      dataType: "text",
                      success: onSuccess
                    });

            });


            function onSuccess(data)
            {

        alert(data);
            }

        });
    </script>

</head>

<body>

<div data-role="page" id="page">
<div data-role="header">
  <h1>Clientes</h1>
</div>

<div data-role="fieldcontain">
          <label for="name">Nombre:</label>
          <input type="text" name="nombre" id="nombre" value="" />
   </div>

            <div data-role="fieldcontain">
          <label for="mail">Mail:</label>
          <input type="text" name="mail" id="mail" value="" />
   </div>


             <div data-role="fieldcontain">
          <label for="telefono">Tel:</label>
          <input type="text" name="telefono" id="telefono" value="" />
   </div>

  <div class="ui-body ui-body-b">
  <fieldset class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="d">Cancelar</button></div>
    <div class="ui-block-b"><button type="button" data-theme="a" id="enviadatos">Enviar</button>


                </div>
     </fieldset>
        </div>
<div data-role="footer">
  <h4>Clientes</h4>
</div>
</div>
</body>
</html>

- Beagle Mobil Education.

Beagle Mobil

martes, 23 de octubre de 2012

Phonegap, Enviando datos a mysql