PHP ծրագրավորման հեռախոսների եւ պլանշետների հետ jQuery Mobile

Պատկերացրեք, որ դուք օգտագործել PHP զարգացնել իրենց դիմումները, որ առաջադրվելու է բջջային սարքերի. Հետ jQuery Mobile եք ստեղծել ինտերֆեյս, որ հետ է վեբ սերվերի միջոցով Ajax.


ներկայացում

Não é nenhuma mágica! O que se faz é o de sempre: 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"> 
    <կապ rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></ձեռագիր>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></ձեռագիր>   
    <ձեռագիր>
        $(ֆունկցիա() { 
            $("#bt-enviar").սեղմեք(ֆունկցիա() {
                $.ajax({
                  տիպ: "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 for="nome">Informe seu nome:</label>
                <input type="text" id="nome" name="nome" value="" />
            </div>
            <input id="bt-enviar" տիպ="button" value="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</մարմին>
</HTML>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?PHP header("Content-Type: text/html;  charset=ISO-8859-1",true) ?>
  <h3>Բարեւ Ձեզ <?PHP echo $_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. 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, եւ այլն, 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

Ընդամենը մուտքերը: 31006

11 արձագանքներ “PHP ծրագրավորման հեռախոսների եւ պլանշետների հետ jQuery Mobile

  1. Fábio ասել է:

    Bom dia, 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. Գրկախառնվել!

      • max ասել է:

        Olá Taylor, Եթե ​​ցանկանում եք ունենալ մի ամբողջ ընթացքը PHP ծրագրավորման համար բջջային հեռախոսների եւ պլանշետների հետ jQuery Mobile. Մուտքագրեք 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.

      • բարեւ Max. Ես այս ընթացքը :( Օրինակ է այս պաշտոնում է արդեն շատ մոտ է, թե ինչ պետք, você só precisa trabalhar as request (ուղարկելով տվյալների / html / ձեւ Այաքսի) e as response (տվյալները մշակվում վերադարձի PHP / SQL / սերվերի). 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, firefox, քրոմ) 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, եւ այլն.

  2. Rafael Augusto ասել է:

    Boa tarde,

    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?

    • 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 (Android). Seu aplicativo vai conseguir se comunicar com seu PHP normalmente fazendo requisições Ajax, como no exemplo.

Թողնել Պատասխանել

Ձեր էլ. Փոստի հասցեն չի հրապարակվելու. Պահանջվող դաշտերը նշված են *