PHP 程式設計為手機和平板電腦與 JQuery 移動

想像一下您使用 PHP 來開發他們的應用程式運行在行動裝置上. 使用 JQuery 移動創建交互的介面上通過 Ajax 的 Web 服務器.


演示文稿

Não é nenhuma mágica! 跟往常一樣是什麼: 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 seunome”. Ao clicar no botãoEnviar”, o formulário é enviado para o servidor (via Ajax), que exibe a mensagemOlá nomeDoUsuario!” 或 “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>
    <>
    <標題>Olá Mundo! JQuery Mobile</標題>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <腳本 src="http://code.jquery.com/jquery-1.6.4.min.js"></腳本>
    <腳本 src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></腳本>   
    <腳本>
        $(功能() { 
            $("#bt-enviar").click(功能() {
                $.ajax({
                  type: "POST",
                  url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  日期: ({nome: $.trim($("#nome").val()) }),
                  dataType: "text",
                  success: 功能(日期) {
                    $("#nome").val("");
                    $("#resultado").HTML(日期);
                  }
                });
            });
        });
    </腳本>     
</>
<身體> 
    <div data-role="page" ID="indexPage">
        <div data-role="header">
            <h1>Olá mundo - JQuery Mobile</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label ="nome">Informe seu nome:</label>
                <輸入的類型="text" ID="nome" 名稱="nome" 價值="" />
            </div>
            <input id="bt-enviar" type="button" 價值="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</身體>
</HTML>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?PHP 標題("Content-Type: 文本/html;  charset = ISO-8859-1",真正的) ?>
  <h3>你好 <?PHP 回聲 $_ 郵政['nome'] ? $_ 郵政['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. Deste modo, 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, etc, 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

總點擊數: 32193

11 comentários 講習 “PHP 程式設計為手機和平板電腦與 JQuery 移動

  1. Fábio 說︰:

    早上好, parabéns pelo post. 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. Sim, 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. 擁抱!

      • 最大 說︰:

        你好泰勒, 你會為手機和平板電腦的 PHP 程式設計的全程和 JQuery 移動. 鍵入的 CRUD.

        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.

      • 嗨,最大. 我沒有這門課程 :( 這篇文章中的示例是已經非常接近你的需要, você só precisa trabalhar as request (通過 Ajax 發送資料,html 表單) e as response (資料返回處理 php/sqlserver). 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. 所以, o próprio navegador (IE, 火狐瀏覽器, Chrome) do seu dispositivo (celular, 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, 舉個例子) 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, etc.

  2. Rafael Augusto 說︰:

    下午好,

    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?

    • Boa noite, 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 說︰:

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

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

留言

您的電子郵件地址將不會發佈. 與標記必填的欄位 *