PHP programmering vir selfone en tablette met JQuery Mobile

Verbeel jou jy gebruik PHP om jou programme te ontwikkel om op mobiele toestelle te loop. Met JQuery Mobile jy skep koppelvlakke wat interaksie met die webbediener via Ajax.


Aanbieding

Dit is geen magie! Wat jy doen, is die gewone: Ons gebruik HTML om die skerms en JavaScript te monteer (Ajax) om versoeke aan die webbediener te maak, waar is die PHP-bronkodes wat hulle sal ontvang, proses en gee die inligting terug. En vir daardie, Ons kan reken op die stel fasiliteite wat JQuery ons in staat stel om.

jQuery Mobile

jQuery Mobile is 'n web Framework geoptimaliseer vir slimfone en tablette. Dit is 'n HTML5-gebaseerde koppelvlak stelsel verenigbaar met die mees gewilde mobiele platforms. Gebou op jQuery en jQuery UI, jou kode maak voorsiening vir 'n buigsame ontwerp, maklik aanpasbaar.

In die praktyk

Kom ons maak 'n eenvoudige voorbeeld, in wat ons het 'n koppelvlak met 'n teks veld vir die gebruiker om hul “naam”. Deur op die “Stuur”, die vorm word na die bediener gestuur (via Ajax), wat die boodskap wys “Hallo nameDoUsuario!” of “Hallo wêreld!”, as die naam veld is leeg.

Hallo wêreld!

Indeks. PHP | Gebruikerskoppelvlak (kliënt-newe-)
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
<!HTML-DOTIPE>
<HTML>
    <Hoof>
    <titel>Hallo wêreld! JQuery Mobile</titel>
    <meta naam="viewport" Inhoud="width=device-width, aanvanklike skaal = 1"> 
    <Skakel Rel="stylesheet" Href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <SR-skrip="http://code.jquery.com/jquery-1.6.4.min.js"></Skrip>
    <SR-skrip="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></Skrip>   
    <Skrip>
        $(funksie() { 
            $("#bt-enviar").Klik(funksie() {
                $.Ajax({
                  Tik: "POST",
                  Url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  Data: ({naam: $.Snoei($("#nome").val()) }),
                  dataType: "text",
                  Sukses: funksie(Data) {
                    $("#nome").val("");
                    $("#resultado").HTML(Data);
                  }
                });
            });
        });
    </Skrip>     
</Hoof>
<liggaam> 
    <div data-Rol="page" Id="indexPage">
        <div data-Rol="header">
            <H1>Olá Mundo - JQuery Mobile</H1>
        </div>
        <div data-Rol="content">
            <div data-Rol="fieldcontain">
                <Etiket Vir="nome">Informe seu nomos:</Etiket>
                <invoertipe="text" Id="nome" naam="nome" waarde="" />
            </div>
            <invoer-ID="bt-enviar" Tik="button" waarde="Enviar" />
            <div ID="resultado"></div>
        </div>
    </div> 
</liggaam>
</HTML>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?PHP dekblad("Content-Type: text/html;  charset=ISO-8859-1",Waar) ?>
  <h3>hallo <?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. dus, 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, ens, 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

Totaal besoeke: 64866

11 resensies “PHP programmering vir selfone en tablette met JQuery Mobile

  1. Fábio gesê:

    Goeiemore, Baie geluk 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. drukkies!

      • Max gesê:

        hallo Taylor, você teria um curso completo de Programação PHP para celulares e tablets com JQuery Mobile. Tipo um 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.

      • Olá Max. Não tenho esse curso :( O exemplo deste post já é bem próximo do que precisa, você só precisa trabalhar as request (envio de dados/html/form pelo Ajax) e as response (retorno de dados processados php/sql/servidor). 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. daarom, o próprio navegador (IE, Firefox, Chrome) do seu dispositivo (sellulêre, 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, byvoorbeeld) 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, ens.

  2. Rafael Augusto gesê:

    goeie middag,

    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?

    • Goeienag, 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.

    • 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.

Laat 'n antwoord

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *