PHP programmering voor mobiele telefoons en tabletten met JQuery Mobile

Veronderstel dat u gebruik maken van PHP om hun toepassingen uit te voeren op mobiele apparaten te ontwikkelen. Met JQuery Mobile u interfaces die communiceren met de webserver via Ajax.


Presentatie

Het is geen magie! Wat je doet is de gebruikelijke: We gebruiken HTML om de schermen en JavaScript te monteren (Ajax) aanvragen naar de webserver maken, waar zijn de PHP-broncodes die ze ontvangen, de informatie verwerken en retourneren. En dat, We kunnen rekenen op de set van faciliteiten die JQuery ons in staat stelt om.

jQuery Mobile

jQuery Mobile is een Webframework geoptimaliseerd voor smartphones en tablets. Het is een op HTML5 gebaseerd interface systeem dat compatibel is met de meest populaire mobiele platformen. Gebouwd op jQuery en jQuery UI, uw code zorgt voor een flexibel ontwerp, eenvoudig aanpasbaar.

In de praktijk

Laten we een eenvoudig voorbeeld maken, waarin we een interface hebben met een tekstveld waarin de gebruiker “naam”. Door te klikken op de “Verzenden”, het formulier wordt naar de server verzonden (via Ajax), die het bericht weergeeft “Hallo nameDoUsuario!” of “Hallo mensen!”, Als het veld naam leeg is.

Hallo mensen!

Index.php | Gebruikersinterface (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
<!HTML DOCTYPE>
<HTML>
    <hoofd>
    <titel>Hallo mensen! JQuery Mobile</titel>
    <Meta naam="viewport" Inhoud="width=device-width, initiële schaal = 1"> 
    <koppeling 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>
    <script-src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
    <script>
        $(functie() { 
            $("#bt-enviar").Klik(functie() {
                $.Ajax({
                  type: "POST",
                  Url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  datum: ({naam: $.Trim($("#nome").Val()) }),
                  Datatype: "text",
                  Succes: functie(datum) {
                    $("#nome").Val("");
                    $("#resultado").HTML(datum);
                  }
                });
            });
        });
    </script>     
</hoofd>
<lichaam> 
    <datum div-Role="page" ID="indexPage">
        <datum div-Role="header">
            <H1>Hallo mensen - JQuery Mobile</H1>
        </div>
        <datum div-Role="content">
            <datum div-Role="fieldcontain">
                <Label is="nome">Voer uw naam in:</Label>
                <invoertype="text" ID="nome" naam="nome" waarde="" />
            </div>
            <invoer-ID="bt-enviar" type="button" waarde="Enviar" />
            <div-id="resultado"></div>
        </div>
    </div> 
</lichaam>
</HTML>
?>
olamundo. php | Uw PHP-code (server-side)
1
2
3
 
  <?PHP koptekst("Content-Type: tekst/html;  charset = ISO-8859-1",waar) ?>
  <H3>Hallo <?PHP ECHO $_ BERICHT[naam] ? $_ BERICHT[naam] : "Mundo" ?>!</H3>

Het resultaat is iets van de:


Zie deze code werken!

Het grote balkon van JQuery Mobile staat op de meta-tag “Viewport”, waar de parameter “breedte = apparaatbreedte” Hiermee wordt de inhoud automatisch aangepast, afhankelijk van het scherm van het mobiele apparaat dat u wilt openen. Op deze manier, de presentatie bij het openen van een desktop is anders dan een mobiele telefoon.

U een emulator gebruiken om beter te visualiseren hoe uw pagina zich gedraagt en wordt weergegeven op een mobiele telefoon, Tablet, enz, zoals te zien in de bovenstaande afbeelding. In het geval van chroom, Installeer gewoon een extensie type “Ripple emulator” en gebruik het als een test tool. Er zijn verschillende vergelijkbare oplossingen.

De rest gaat van uw behoefte en creativiteit…

Totaal aantal treffers: 64871

11 Reacties op “PHP programmering voor mobiele telefoons en tabletten met JQuery Mobile

  1. Fabio zei:

    Goedemorgen, Gefeliciteerd met de post. Ik wil graag gebruik maken van zijn inhoud om een vraag te stellen(Als je me kan helpen ik ben dankbaar). Ik wil graag een eenvoudige vraag in de Bank in PHP en dan tonen op het scherm van de gebruiker is geregistreerd of niet in de Bank met behulp van jQuery Mobile. U weet hoe ik dat kan doen.? Dankbaar voor de aandacht.

    • Hallo Fabio. Ja, weten hoe te doen, maar je moet een beetje programmering weten om de uitleg te begrijpen. Het principe is hetzelfde als ik gebruikte in het voorbeeld “olamundo. php”; het verschil is dat u de verbinding met de database moet maken, Zoek het gewenste resultaat (bouw uw SQL) en weergeven. Knuffels!

      • Max zei:

        Hallo Taylor, u zou moeten een volledige cursus van PHP programmering voor mobiele telefoons en tabletten met JQuery Mobile. Typ een CRUD.

        Een voorbeeld een voorbeeld van een cursusschema systeem waar ik werd getoond een lijst van cursussen uit de database en door te klikken op de cursus ik kon alle cursus informatie zien.

      • Hallo Max. Ik heb niet deze cursus :( In het voorbeeld in deze post is al zeer dicht bij wat je nodig hebt, je hoeft alleen maar te werken de Verzoek (versturen van gegevens/html/formulier door Ajax) en de Reactie (gegevens weer verwerkte php/sql/server). Op het internet heeft veel voorbeelden van CRUD in PHP.

        Vandaag als je zo zou doen iets voor mobiel, zou gebruik maken van de Ionische.

    • De code is gebaseerd op HTML, CSS en JavaScript. Dus, de browser zelf (Ie, Firefox, Chrome) uw apparaat (mobiele telefoon, Tablet, Notebook) zorgt voor vertolking. Er is geen software vereist om te installeren. Aan de clientzijde, de code in een willekeurig tekstbestand plaatsen (Kladblok, bijvoorbeeld) en sla het op als een extensie. html. Aan de serverzijde, om de gegevens te manipuleren, zal een programmeertaal moeten gebruiken, zoals PHP, Java, Asp, .Vermogen, enz.

  2. Rafael Augusto zei:

    Goedemiddag,

    Eerste, Gefeliciteerd met het artikel.

    Zo en mogelijk om apps te ontwikkelen voor zowel Android als iOS met behulp van jQuery Mobile en PhoneGap en ook en mogelijk om PHP en MYSQL voor Server verbinding te gebruiken?

    • Goedenacht, Ja, het is perfect mogelijk. Met PhoneGap maakt u uw toepassing in html/js (clientzijde) en het zal draaien op Android iOS, toegang tot serverbronnen (PHP en MySQL), via Ajax.

  3. Januari zei:

    Het heeft als het voorbeeldprogramma dat u hebt gemaakt om te worden geïnstalleerd op Google Play ? of gewoon wiel, rechtstreeks toegang tot een browser ?

    • Ja, u doet uw toepassing met HTML, CSS en JavaScript en gebruikt vervolgens Programma's zoals PhoneGap om toepassingen te genereren (Bijna) inboorlingen naar platformen zoals Android en iOS. Dus klim gewoon naar Google Play (Android). Uw app zal in staat zijn om te communiceren met uw PHP normaal door het maken van Ajax-verzoeken, zoals in het voorbeeld.

Laat een antwoord achter

De uw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn gemarkeerd met *