PHP-programmering for mobiltelefoner og tabletter med JQuery Mobile

Forestille seg du bruker PHP til å utvikle sine programmer til å kjøre på mobile enheter. Med JQuery Mobile opprette du grensesnitt som samhandler med Web-serveren via Ajax.


Presentasjon

Det er ingen magi! Hva er vanlig: Bruk HTML canvas og Javascript (AJAX) å gjøre forespørsler til webserveren, hvor er PHP kilder som får, behandle og returnere informasjon. Og for dette, Vi kan regne med funksjonssettet som JQuery gir oss.

jQuery Mobile

jQuery Mobile er en Web rammeverk optimalisert for smartphones og tabletter. Det er et system basert på HTML5 kompatible grensesnitt med de mest populære plattformene for mobilenheter. Bygget på jQuery og jQuery UI, koden gir en fleksibel design, lett tilpasses.

I praksis

La oss ta et eksempel, Vi har et grensesnitt med et tekstfelt for brukeren å angi din “navn”. Ved å klikke “Sende”, skjemaet er sendt til serveren (via Ajax), som viser meldingen “Hei nomeDoUsuario!” eller “hallo verden!”, Hvis feltet er tomt.

hallo verden!

index.php | Brukergrensesnitt (klientsiden)
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>
    <hodet>
    <tittel>hallo verden! JQuery Mobile</tittel>
    <meta navn="viewport" innhold="width=device-width, første skala = 1"> 
    <kobling 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"></skriptet>
    <script src="http://Code.jQuery.com/Mobile/1.1.0/jQuery.mobile-1.1.0.min.js"></skriptet>   
    <skriptet>
        $(funksjonen() { 
            $("#bt-enviar").Klikk(funksjonen() {
                $.Ajax({
                  type: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  data: ({navn: $.trimme($("#nome").Val()) }),
                  dataType: "text",
                  suksess: funksjonen(data) {
                    $("#nome").Val("");
                    $("#resultado").HTML(data);
                  }
                });
            });
        });
    </skriptet>     
</hodet>
<kroppen> 
    <div data-rolle="page" ID="indexPage">
        <div data-rolle="header">
            <H1>Olá mundo - JQuery Mobile</H1>
        </div>
        <div data-rolle="content">
            <div data-rolle="fieldcontain">
                <etikett for="nome">Informe seu nome:</etikett>
                <inndatatypen="text" ID="nome" navn="nome" verdi="" />
            </div>
            <input-id="bt-enviar" type="button" verdi="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</kroppen>
</HTML>
?>
olamundo.php | Din PHP-koden (serversiden)
1
2
3
 
  <?PHP topptekst("Content-Type: tekst/html;  charset = ISO-8859-1",sann) ?>
  <H3>hallo <?PHP ekko $_ INNLEGG['navn'] ? $_ INNLEGG['navn'] : "Mundo" ?>!</H3>

Resultatet er noe:


Se denne koden arbeider!

Big deal av JQuery Mobile er i metakoden “visningsområde”, hvor parameteren “Device-bredde = bredde” endrer automatisk størrelse innholdet som skjermen på den mobile enheten som har tilgang til. På denne måten, ved å åpne en Desktop er forskjellig fra en mobiltelefon.

Du kan bruke en emulator bedre visualisere hvordan siden fungerer og vises i en mobiltelefon, Tavle, etc, som vist i figuren over. I Chrome, bare installere en forlengelsen type “Rippel Emulator” og bruke det som en test-verktøyet. Det finnes flere lignende løsninger.

Resten går til dine behov og kreativitet…

Totalt antall treff: 64866

11 kommentarer på “PHP-programmering for mobiltelefoner og tabletter med JQuery Mobile

  1. Fabio sa:

    god morgen, Gratulerer med stillingen. Jeg ønsker å ta sitt innhold å avklare tvil(Hvis du kan hjelpe meg takk). Jeg ønsker å lage en enkel spørring i i PHP, og deretter vise på skjermen til brukeren som registrerte eller ikke i banken ved hjelp av jquery mobile. Du vet hvor kan jeg gjøre det? Takknemlig for oppmerksomheten.

    • Hei Fabio. ja, Jeg vet hvordan du gjør, men du må vite litt av programmering å forstå forklaring. Prinsippet er det samme som brukes i eksemplet “olamundo.php”; forskjellen er at du må gjøre forbindelse med databasen, få ønsket resultat (konfigurere din SQL) og vise det. Klemmer!

      • Max sa:

        Hei Taylor, du ville ha en full løpet av PHP programmering for mobiltelefoner og tabletter med JQuery Mobile. Skriv inn en 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.

      • Hei Max. Jeg har ikke dette kurset :( Eksempelet i dette innlegget er allerede svært nær hva du trenger, você só precisa trabalhar as request (sende data/html/skjema med Ajax) e as response (data tilbake behandlet php/sql/server). Na Internet tem muitos exemplos de CRUD em PHP.

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

    • Koden er basert på HTML, CSS og JavaScript. Så, kikker selv (IE, Firefox, Chrome) på enheten (mobiltelefon, Tavle, notatblokk) tar vare på tolking. Du trenger ikke å installere noen programvare. Klientsiden, plassere koden i en tekstfil (Notisblokk, for eksempel) og lagre som html-filtypen. Serversiden, manipulere data, må bruke et programmeringsspråk, som PHP, Java, ASP, .NET, etc.

  2. Rafael Augusto sa:

    god ettermiddag,

    Første, Gratulerer for artikkelen.

    Så kan utvikle programmer for både android og IOS bruker Jquery Mobile og telefon og også kan bruke PHP og MYSQL til å koble til serveren?

    • god natt, Ja er det mulig. Med telefon oppretter du programmet i html/js (klientsiden) og hun kommer til å kjøre på Android, iOS, tilgang til serversiden ressurser (PHP og MySQL), via Ajax.

  3. Jan sa:

    Har som prøveprogrammet at du installeres på google spille ? eller bare hjul, tilgang til direkte i en webleser ?

    • ja, du gjør programmet med HTML, CSS og Javascript, så bruk programmer som Telefon generere programmer (nesten) innfødte for plattformer som Android og iOS. Er det bare opp til Google spill (Android). Programmet vil kunne kommunisere med din PHP normalt gjøre Ajax forespørsler, eksemplet.

legg igjen et svar

Den e-postadressen din vil ikke bli publisert. Obligatoriske felt er merket med *