13 conectar-seu-webapp-com-um-banco-de-dados-usando-php - CodeHamper

Conectar seu WebApp com um Banco de dados usando PHP

Conectar com um BD e fazer upload de uma imagem usando o IntelXDK




Primeiro vamos criar uma tabela, para fazer a interação com os dados, este exemplo ira utilizar o MySql:

CREATE TABLE IF NOT EXISTS 'contato' (
       'id' int(11) NOT NULL AUTO_INCREMENT,
       'nome' varchar(200) NOT NULL,
       PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Apos isso vamos criar nosso arquivo com o nome passa.php para fazer a interação com o BD:

<?php
$serve = mysql_connect('localhost', 'root', '');
if(!$serve){ echo 'erro';}
$db = mysql_select_db('teste', $serve);
if($_GET['acao']=='cadastra'){
     $nome = $_GET['nome'];
     $SQL = "INSERT INTO contato (nome) VALUES ('$nome')";
     $re = mysql_query($SQL, $serve);
}
if($_GET['acao'] == 'lista'){
     $SQL = "SELECT * FROM contato";
     $re = mysql_query($SQL, $serve);
     $num = mysql_num_rows($re);
     if($num > 0){
          while($Linha = mysql_fetch_object($re)){
                echo "{$Linha->nome}<br />";
           }
       }else{
          echo 'nenhum nome cadastrado';
       }
}

Nosso aplicativo, tem a interação básica, mas você pode aprimorar baseado no exemplo, segue o código do aplicativo, com interação com o mysql:

<!DOCTYPE html>
<html>
     <head>
         <title>exemple</title>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
         <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
   <body>
   <script>
   $( document ).ready(function() {
      var $server;
      $server = 'http://localhost/';
      $('#cadastra').on('click', function(){
           $nome = $('#nome').val();
           $.ajax({
               type: "get", url: $server+"passa.php",
               data: "nome="+$nome+"&acao=cadastra",
               success: function(data) {
                   intel.xdk.notification.alert('Nome Castrado com sucesso','Cadastro','ok');
                   Lista();
               }
           });
     });
     function Lista(){
            $.ajax({
                type: "get",
                dataType  : 'html',
                url: $server+"/passa.php",
                data: "acao=lista",
                success: function(data) {
                     $('#lista').html(data);
                }
            });
      }
      Lista();
   });
   </script>
   <p>Cadastra</p>
   <input id="nome" type="text" name="nom"><br>
   <button id="cadastra">Cadastrar</button>
   <hr>
   <p>Lista</p>
   <p id="lista"></p>
 </body>
</html>

Fazendo upload de imagens para um servidor web

Para que possamos pegar a imagem da câmera do dispositivo e também recuperar uma foto da galeria, deixe ativado os plugins camera e file.

Vamos adicionar o seguinte trecho dentro do nosso aplicativo:

<img src="" id="picture" width="200" height="150" /><br>
<div class='row'></div>
<div onclick='ChamaCamera();' class='btn'>Tirar foto</div>
<div class='row'></div>
<div onclick='PegaGaleria();' class='btn'>Pegar galeria</div>

A função ChamaCamara é a seguinte:

function ChamaCamera(){
     intel.xdk.camera.takePicture(90,true,"png");
}

A função PegaGaleria é seguinte:

function PegaGaleria() {
      intel.xdk.camera.importPicture();
}

Agora veremos um trecho que é ativado quando uma foto é tirada ou selecionada:

document.addEventListener("intel.xdk.camera.picture.add",function(event){
       var name = event.filename;
       var url = intel.xdk.camera.getPictureURL(name);
       convertImgToBase64(url, function(base64Img){
              document.getElementById("picture").setAttribute("src", url);
              $.ajax({
                    url: 'http://localhost/teste.php',
                     type: 'POST',
                     data: 'imagem='+base64Img,
                     dataType: "html",
                     error: function(){
                    },
                    success: function($data){
                    } 
              });
      });
});

Esse trecho ta de forma simples, sem nenhum tratamento de retorno, pois estamos demostrando como fazer um upload de uma imagem para um servidor.

No caso no exemplo estou usando um servidor local. Pode-se observar que a imagem é convertida pra base64, utilizando uma função, segue a função abaixo:

function convertImgToBase64(url, callback, outputFormat){
     var img = new Image();
     img.crossOrigin = 'Anonymous';
     img.onload = function(){
         var canvas = document.createElement('CANVAS');
         var ctx = canvas.getContext('2d');
         canvas.height = this.height;
         canvas.width = this.width;
         ctx.drawImage(this,0,0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback(dataURL);
         canvas = null; 
    };
    img.src = url;
}

Seguindo nosso exemplo, ja temos a parte que pega a imagem e que converte pra base64 e manda por ajax.

Agora vamos ver como o php pega a imagem e converte em uma imagem e salva no seu servidor:

<?php
$data = $_POST['imagem'];
$data = str_replace('data:image/png;base64,', '', $data);
$data = str_replace(' ', '+', $data);
$data = base64_decode($data);
file_put_contents('img/imagem.png', $data);

Seguindo esses passos você conseguira implementar em seu app o upload de imagens.


CodeHamper © 2017 - Todos os direitos reservados