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.
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.6.4.min.js"></script-->
<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.
<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.6.4.min.js"></script-->
<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.
buena aplicacion mi chavo oyes me mandarias tu codigo fuente para checarlo como es sale te lo agradeceria mucho mi correo machin_31z@hotmail.com
ResponderEliminarhola gracias por el ejemplo una duda como envias los datos del
ResponderEliminardel html al php digo como se pone la ruta en url se pone la ruta por ejemplo si fuera local http://192.168.10.100/conecta.php
saludos si me pudieras pasar el ejemplo te agradecería mucho
rivqueadr@gmail.com
Me intereso tu publicacion, pero no me puede resultar.
ResponderEliminarPodrias publicar el codigo fuente?? o enviarmelo porfa?? andresorellana85@gmail.com
esa parte ya me sale. Ahora, si quisiera enviar un valor para buscar un registro en la bd y mostrarlo en la pantalla del móvil. ¿como sería? he estado intentando con JSON pero no me sale. alguna sugerencia?
ResponderEliminargracias gracias gracias
ResponderEliminarEsto es lo que estaba buscando muchas gracias men..
ResponderEliminarcomo trabajar esto pero que la informacion se envie a un servidor gratuito y no a uno local, yo lo estoy haciendo hacia un servidor externo pero cuando doy enviar me sale error loading page y luego un error el la conexion hacia el servidor, pero no se por que? tenes alguna idea.
ResponderEliminarEliel que tal lo unico que tienes que hacer para que lo envie a un servidor gratuito seria poner el url de tu servidor donde esta ubicado el archivo
Eliminarurl: "http://tuurldelservidor.com/silotienesencarpeta/conecta.php",quedaria algo asi
oye amigo y para mandar a traer datos?
ResponderEliminaren eso estoy trabajando para poder traer datos cualquier cosa yo te digo amigo!
EliminarEste comentario ha sido eliminado por el autor.
Eliminarbrother al momento de comilar no agrega
ResponderEliminaral compilar todo en dremweaver si envia los datos al a bd, pero al crear el apk con phonegap en el movil no funciona, alguna solucion?
ResponderEliminarMe pasa exactamente igual
Eliminar¿Que se puede hacer??
Gracias de antemano
A mi me pasa igualito!
EliminarPor web perfecto pero como app no envia datos a la base de datos
¿Como están poniendo la ruta en esta linea?
Eliminartype: "POST",
url: "conecta.php",
si la están poniendo exactamente así no va enviar nunca los datos al servidor local, necesitan poner su ip y el puerto de internet ya sea que usan :80 u :8080 es decir url:"http://ip:puerto/suArchivoPHP"
Al menos así se maneja en nativo vía web services.
pongo el url como dices pero funciona si lo corro desde mi pc.. en android nose conecata por q lo me pasa a server no encontrado.. deben darse permisos o configurar el url en cordova.xml?
EliminarEs justo lo que estaba buscando, ahora, como hago para que mi aplicacion haga la consulta en la base de datos remota y me traiga esos datos, por ejemplo un nombre y una direccion. Muchas Gracias!
ResponderEliminarhola esta muy bien pero no me corre y me he matado la cabeza mirando que es me puedes enviar el codigo a mi correo gracias jeissonrincon94@misena.edu.co
ResponderEliminarbuenas quien me podria colaborar es que no soy capas de enviar ni recibir datos de la bd externa quien me podria pasar un ejemplo bien echo....hay le dejo mi correo damplaar30@gmail.com
ResponderEliminarhttps://gacetafrontal.com/biografia-de-carlos-augusto-salaverry/
ResponderEliminarRealmente, se puede decir que Carlos Augusto Salaverry no solo se dedicó a lo que sería la escritura o la poesía,