Home » Android » Cordova » Html » JavaScript » Phonegap » Php » Programação » Vida de Programador » Criando aplicativo usando Cordova + PHP + MYSQL

Criando aplicativo usando Cordova + PHP + MYSQL

Posted on by
Compartilhe
Google+0

Fala galeris!

Algum tempo venho vendo nos fóruns de discussões do Phonegap, Cordova e outros, um assunto que é relativamente simples, (isto é se você já programa algum tempo usando a tecnologia html5+javascript+php) “Como conectar minha aplicação em algum banco de dados ou recuperar dados de algum banco”.

Coloquei acima a palavra “simples” porque no momento que estamos programando usando o Cordova/Phonegap é a mesma coisa de desenvolver um site, porém mudando apenas alguns detalhes, mas a lógica é  igual. Principalmente se você utiliza por exemplo o JavaScript  para criar páginas mais interativas e sem o famoso “refresh” na página quando realiza o “submit” de algum formulário…

Se você procurar hoje no Google vai encontrar milhões de conteúdos falando sobre este assunto, porém resolvi escrever este artigo mostrando algo simples e sem muito “FruFru” que poderá ser usado no seu dia-a-dia.

Para desenvolver este exemplo estou usando a estrutura Single Page e iremos precisar de:

– Projeto em Cordova
– Biblioteca jQueryMobile (Se preferir baixe este projeto em jQueryMobile que já tem um layout pronto)
– Ambiente PHP, aqui no Blog já fiz dois artigos mostrando como Criar ambiente PHP no Windows e no Mac
– Banco de dados que preferir neste exemplo estou usando Mysql
– 1 copo de café preferência quente!

Mãos a obra…

Vamos apagar tudo que está dentro da nossa tag Body e criar duas Div, uma com um formulário e outra com uma mensagem que “conectou com sucesso”, como estamos usando o estilo Single Page, estou definindo cada div como data-role=”page” e colocando um id único para cada, e assim identificar mais facilmente elas, o resultado fica assim:

 <div id="login" data-role="page">   
    <br><br>
    <div align="center"> <strong>Tela de Login </strong></div>
    <br><br>
    <form id="formLogin">
      <label>Usuario</label>
      <input id="usuario" name="usuario" type="text" placeholder="meu usuario" />
 
      <label>Senha</label>
      <input id="senha" name="senha" type="password" placeholder="minha senha" />
 
      <br>
      <button type="submit" data-theme="b">Acessar</button>
    </form>  
  </div>
 
  <div id="index" data-role="page">   
    Bem vindo <span id="usuario_nome"></span> conectou com sucesso!
  </div>

login

Vamos agora criar dentro da função deviceReady no arquivo index.js a chamada $.ajax para nosso servidor PHP que será no momento que o usuário clicar no botão Acessar…

$("#formLogin").submit(function (e){
        e.preventDefault();
 
         $.ajax({
            type: "POST",
            url: "http://127.0.0.1/procLogin.php", 
            data: {
                acao: 'LoginWeb',
                usuario: $("#usuario").val(),
                senha: $("#senha").val()
            },            
            async: false,
            dataType: "json", 
            success: function (json) {
 
                if(json.result == true){
                   //redireciona o usuario para pagina
                   $("#usuario_nome").html(json.dados.nome);
 
                   $.mobile.changePage("#index", {
                        transition : "slidefade"
                    });
 
                }else{
                   alert(json.msg);
                }
            },error: function(xhr,e,t){
                console.log(xhr.responseText);                
            }
        });
      });

Feito isto vamos criar um arquivo em PHP que vai ter a conexão com o nosso banco de dados e o retorno em JSON para nossa aplicação, neste exemplo eu fiz uma tabela no meu banco chamado “usuarios” que possui alguns atributos, apenas lembrando que a partir deste exemplo você consegue usar para qualquer outra finalidade. Enfim meu arquivo Php ficou assim:

<?php
$Mysqli = new mysqli('localhost', 'root', '3121', 'phpiando');
 
$request = $_SERVER['REQUEST_METHOD'] == 'GET' ? $_GET : $_POST;
 
switch ($request['acao']) {
 
	case "LoginWeb":
		$usuario = addslashes($_POST['usuario']);
		$senha = addslashes($_POST['senha']);
 
		$erro = "";
		$erro .= empty($usuario) ? "Informe o seu usuario \n" : "";
		$erro .= empty($senha) ? "Informe a sua senha \n" : "";
 
		$arr = array();
 
		if(empty($erro)){
			$query = "select * from usuarios where usuario = '{$usuario}' and senha = '{$senha}'";
			$result = $Mysqli->query($query);
 
			if($result->num_rows > 0){
				//usuario logado
				$obj = $result->fetch_object();
 
				$arr['result'] = true;
				$arr['dados']['nome'] = $obj->nome;
			}else{
				$arr['result'] = false;
				$arr['msg'] = "Usuário ou senha incorreto";
			}
		}else{
			$arr['result'] = false;
			$arr['msg'] = $erro;
		}
 
		echo json_encode($arr);
	break;
}

Pronto! Os passos acima já cria uma conexão do seu App com algum servidor.

Agora é só testar sua aplicação, se tudo ocorreu certo será redirecionado para tela de boas vindas.
Estou colocando este projeto no GitHub clique aqui para baixar.

Qualquer dúvida é só deixar nos comentários.