JQuery Mobile ile cep telefonları ve tabletler için PHP programlama

Uygulamalarınızı mobil cihazlarda çalıştırmak için PHP kullandığınızı düşünün. JQuery Mobile ile Ajax üzerinden Web sunucusu ile etkileşim edebilen arayüzler oluşturursunuz.


Sunu

Não é nenhuma mágica! Yaptığın şey her zamanki.: usamos HTML para montar as telas e Javascript (Ajax) para fazer requisições ao servidor Web, onde estão os códigos-fontes PHP que irão receber, processar e retornar as informações. E para isto, podemos contar com o conjunto de facilidades que o JQuery nos possibilita.

jQuery Mobile

jQuery Mobile é um Framework Web otimizado para smartphones e tablets. Trata-se de um sistema de interfaces baseado em HTML5 compatível com as plataformas mais populares de dispositivos móveis. Construído sobre o jQuery e jQuery UI, seu código permite um design flexível, facilmente personalizável.

Na prática

Vamos fazer um exemplo simples, em que temos uma interface com um campo texto para o usuário inserir seu “adı”. Ao clicar no botão “Gönder”, o formulário é enviado para o servidor (via Ajax), que exibe a mensagemOlá nomeDoUsuario!” veya “Olá Mundo!”, se o campo nome estiver vazio.

Olá Mundo!

index.php | Interface do usuário (client-side)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?PHP
<!DOCTYPE html>
<HTML>
    <kafa>
    <Başlık>Olá Mundo! JQuery Mobile</Başlık>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <bağlantı rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <src script="http://code.jquery.com/jquery-1.6.4.min.js"></komut dosyası>
    <src script="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></komut dosyası>   
    <komut dosyası>
        $(işlevi() { 
            $("#bt-enviar").click(işlevi() {
                $.ajax({
                  türü: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  tarihi: ({adı: $.trim($("#nome").val()) }),
                  dataType: "text",
                  success: işlevi(tarihi) {
                    $("#nome").val("");
                    $("#resultado").HTML(tarihi);
                  }
                });
            });
        });
    </komut dosyası>     
</kafa>
<vücut> 
    <div data-role="page" KİMLİĞİ="indexPage">
        <div data-role="header">
            <Saat 13:00.m.>Olá mundo - JQuery Mobile</Saat 13:00.m.>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label olduğunu="nome">Informe seu nome:</label>
                <giriş türü="text" KİMLİĞİ="nome" Adı="nome" Değer="" />
            </div>
            <input id="bt-enviar" türü="button" Değer="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</vücut>
</HTML>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?PHP Üstbilgi("Content-Type: metin/html;  charset=ISO-8859-1",TRUE) ?>
  <H3>Merhaba <?PHP yankı $_post['nome'] ? $_post['nome'] : "Mundo" ?>!</H3>

O resultado é algo do tipo:


Veja este código funcionando!

A grande sacada do JQuery Mobile está na meta-tag viewport, onde o parâmetro width=device-width redimensiona automaticamente o conteúdo conforme a tela do dispositivo móvel que está acessando. Bu şekilde, a apresentação ao acessar de um Desktop é diferente de um celular.

Você pode utilizar um emulador para visualizar melhor a forma com que sua página se comporta e aparece em um celular, tablet, vb, como visto na figura acima. No caso do Chrome, basta instalar uma extensão tipo Ripple Emulator e usá-la como ferramenta de teste. Existem várias soluções semelhantes.

O resto vai de sua necessidade e criatividade

Toplam sayısı: 64871

11 Yorumlar “JQuery Mobile ile cep telefonları ve tabletler için PHP programlama

  1. Fábio dedi:

    Günaydın, Tebrikler yazı için. Gostaria de aproveitar o conteúdo dele para tirar uma dúvida(se você puder me ajudar fico grato). Gostaria de fazer uma simples consulta no banco em PHP e em seguida mostrar na tela de o usuário esta cadastrado ou não no banco utilizando jquery mobile. Sabem como posso fazer isso? Grato pela atenção.

    • Olá Fábio. Evet, sei como fazer, mas é preciso saber um pouco de programação para que entenda a explicação. O princípio é o mesmo que utilizei no exemploolamundo.php”; a diferença é que você deverá fazer a conexão com o banco de dados, buscar o resultado pretendido (montar sua SQL) e exibi-lo. Hugs!

      • Max dedi:

        Merhaba Taylor, JQuery Mobile ile cep telefonları ve tablet için PHP programlama tam bir ders olurdu. Bir pislik yazın.

        Um exemplo um sistema de agenda de cursos onde me mostrasse um lista de cursos vindo do banco de dados e ao clicar no curso eu pudesse ver todas as informações do Curso.

      • Merhaba Max. Bu ders yok :( Bu yazı örnekte zaten çok yakın gerekendir, você só precisa trabalhar as request (AJAX tarafından veri/html/form gönderme) e as response (işlenmiş php/sql/server veri döndürme). Na Internet tem muitos exemplos de CRUD em PHP.

        Hoje se seu fosse fazer algo para Mobile, usaria o Ionic.

    • O código é baseado em HTML, CSS e JavaScript. Yani, o próprio navegador (IE, Firefox, Krom) do seu dispositivo (Cep telefonu, tablet, notebook) se encarrega de interpretar. Não é preciso instalar nenhum software. Do lado cliente, coloque o código em um arquivo texto qualquer (bloco de notas, Örneğin) e salve-o como extensão .html. Do lado servidor, para manipular os dados, terá que usar uma linguagem de programação, como PHP, Java, Asp, .Net, vb.

  2. Rafael Augusto dedi:

    İyi günler,

    Primeiramente, Parabéns pelo artigo.

    Então e possível desenvolver apps tanto para android quanto para IOS usando o Jquery Mobile e Phonegap e também e possível usar o PHP e MYSQL para conexão com o servidor?

    • İyi geceler, sim é perfeitamente possível. Com o Phonegap você criar sua aplicação em html/js (lado cliente) e ela vai rodar em Android iOS, acessando recursos do lado servidor (PHP e MySQL), via Ajax.

  3. Jan dedi:

    Tem como o programa de exemplo que vc fez ser instalado no google play ? ou só roda, acessando diretamente num browser ?

    • Evet, você faz sua aplicação com HTML, CSS e Javascript e depois usa programas como o PhoneGap para gerar aplicativos (Neredeyse) nativos para plataformas como Android e iOS. Daí é só subir para o Google Play (Android). Seu aplicativo vai conseguir se comunicar com seu PHP normalmente fazendo requisições Ajax, como no exemplo.

Cevap bırak

E-posta adresinizi yayınlanan olmayacaktır. Gerekli alanları ile işaretlenir *