PHP-Programmierung für Mobiltelefone und Tablets mit JQuery Mobile

Stellen Sie sich vor, dass Sie PHP verwenden, um ihre Anwendungen auf mobilen Geräten laufen zu entwickeln. Mit JQuery Mobile erstellen Sie Schnittstellen, die Interaktion mit dem Web-Server über Ajax.


Präsentation

Es gibt keine Magie! Was ist das übliche: Verwenden Sie HTML Canvas und Javascript anpassen (AJAX) Anfragen an den Webserver zu machen, wo sind die PHP-Quellen, die erhalten werden, verarbeiten und Informationen zurück. Und für diese, Wir können auf den Satz von Funktionen zählen, dass JQuery uns ermöglicht.

jQuery Mobile

jQuery Mobile ist ein Web-Framework für Smartphones und Tablets optimiert. Es ist ein System, basierend auf HTML5 kompatible Schnittstellen mit den beliebtesten Handy-Plattformen. Gebaut auf jQuery und jQuery UI, der Code ermöglicht eine flexible Gestaltung, leicht anpassbar.

In der Praxis

Nehmen wir ein einfaches Beispiel, Wir verfügen über eine Schnittstelle mit einem Textfeld für den Benutzer zur Eingabe Ihrer “Name”. Durch Anklicken des Buttons “Senden”, das Formular wird an den Server gesendet. (über Ajax), Das zeigt die Meldung “Hallo nomeDoUsuario!” oder “Hallo Welt!”, Wenn das Feld "Name" leer ist.

Hallo Welt!

Index.php | User-interface (Client-seitige)
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>
    <Kopf>
    <Titel>Hallo Welt! JQuery Mobile</Titel>
    <Meta name="viewport" Inhalt="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" />
    <Script src="http://Code.jQuery.com/jQuery-1.6.4.min.js"></Skript>
    <Script src="http://Code.jQuery.com/mobile/1.1.0/jQuery.Mobile-1.1.0.min.js"></Skript>   
    <Skript>
        $(Funktion() { 
            $("#bt-enviar").Klicken Sie auf(Funktion() {
                $.AJAX({
                  Typ: "POST",
                  URL: "http://taylorlopes.com/util/jQueryMobile/olamundo/olamundo.php",
                  Daten: ({Name: $.Trimmen($("#nome").Val()) }),
                  Datentyp: "text",
                  Erfolg: Funktion(Daten) {
                    $("#nome").Val("");
                    $("#resultado").html(Daten);
                  }
                });
            });
        });
    </Skript>     
</Kopf>
<Körper> 
    <Div-Daten-Rolle="page" id="indexPage">
        <Div-Daten-Rolle="header">
            <H1>Olá mundo - JQuery Mobile</H1>
        </div>
        <Div-Daten-Rolle="content">
            <Div-Daten-Rolle="fieldcontain">
                <Label ist="nome">Informe Seu nome:</Label>
                <Eingabetyp="text" id="nome" Name="nome" Wert="" />
            </div>
            <Eingabe-id="bt-enviar" Typ="Taste" Wert="Enviar" />
            <Div-id="resultado"></div>
        </div>
    </div> 
</Körper>
</html>
?>
olamundo.php | Seu Código PHP (Server-seitige)
1
2
3
 
  <?PHP Header("Content-Type: Text/html;  Charset = ISO-8859-1",wahr) ?>
  <H3>Hallo <?PHP Echo $_ POST['Name'] ? $_ POST['Name'] : "Mundo" ?>!</H3>

Das Ergebnis ist etwas:


Finden Sie unter diesem Code arbeiten!

Die große Sache von JQuery Mobile ist im Meta-tag “Ansichtsfenster”, wo die Parameter “Gerät-Breite = breite” automatisch ändert den Inhalt wie der Bildschirm des mobilen Geräts, der zugreift. Auf diese Weise, die Präsentation durch den Zugriff auf einen Desktop-PC unterscheidet sich von einem Handy.

Sie können einen Emulator verwenden, um besser zu visualisieren, wie Ihre Seite verhält sich und erscheint in einem Handy, Tablette, etc., wie in der obigen Abbildung zu sehen. Im Falle von Chrome, installieren Sie einfach einen Erweiterungstyp “Ripple-Emulator” und verwenden Sie es als ein Test-tool. Es gibt mehrere ähnliche Lösungen.

Der Rest geht an Ihren Bedarf und Kreativität…

Total hits: 34319

11 Kommentare zu “PHP-Programmierung für Mobiltelefone und Tablets mit JQuery Mobile

  1. Fábio sagte:

    Guten Morgen, Herzlichen Glückwunsch für die post. Ich möchte an seinem Inhalt, Zweifel zu klären(Wenn Sie mir helfen können danke). Ich möchte eine einfache Abfrage in PHP zu machen und zeigen dann auf dem Bildschirm des Benutzers, der angemeldet oder nicht in der Bank mit Jquery mobile. Sie wissen, wie ich das tun kann? Dankbar für die Aufmerksamkeit.

    • Hallo Fabio. Ja, Ich weiß, wie zu tun, aber du musst wissen, ein wenig Programmierung zu verstehen, die Erklärung. Das Prinzip ist das gleiche wie im Beispiel “olamundo.php”; der Unterschied ist, dass Sie die Verbindung mit der Datenbank vornehmen müssen, das gewünschte Ergebnis zu bekommen (richten Sie Ihre SQL) und anzeigen. Umarmungen!

      • Max sagte:

        Hallo Taylor, Sie müssten einen vollen Kurs der PHP Programmierung für Mobiltelefone und Tablets mit JQuery Mobile. Geben Sie eine 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.

      • Hallo Max. Ich habe nicht dieses Kurses :( Das Beispiel in diesem Beitrag ist bereits sehr nah an, was Sie brauchen, você só precisa trabalhar as request (senden Datenformular/html/Ajax) Und die response (Rückkehr verarbeitet Php/Sql/Datenserver). Na Internet tem muitos exemplos de CRUD em PHP.

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

    • Der Code basiert auf HTML, CSS und JavaScript. Also, der Browser selbst (IE, Firefox, Chrom) Ihres Geräts (Handy, Tablette, Notebook) kümmert sich der Interpretation. Sie brauchen keine Software installieren. Client-seitige, Fügen Sie den Code in eine Textdatei (Notizblock, z. B.) und speichern Sie es als html-Datei-Erweiterung. Server-seitige, zum Bearbeiten der Daten, müssen eine Programmiersprache zu verwenden, wie PHP, Java, ASP, .NET, etc..

  2. Rafael Augusto sagte:

    Guten Tag,

    Erste, Herzlichen Glückwunsch für den Artikel.

    So können beide Android-apps entwickeln und IOS mit Jquery Mobile und Phonegap und kann auch PHP und MYSQL verwenden Sie, um mit dem Server verbinden?

    • Gute Nacht, Ja ist es durchaus möglich. Mit der Phonegap erstellen Sie Ihre Anwendung in html/js (Client-Seite) und sie wird auf Android, iOS laufen, Zugriff auf serverseitige Ressourcen (PHP und MySQL), über Ajax.

  3. Jan sagte:

    Haben als das Beispielprogramm, dass Sie auf Google installiert spielen ? oder nur Rad, direkt in einem Web-Browser zugreifen ?

    • Ja, Sie tun Ihre Anwendung mit HTML, CSS und Javascript, wie dann Verwendung Programme PhoneGap um Anwendungen zu generieren (fast) Eingeborenen für Plattformen wie Android und iOS. Dann liegt es nur an der Google-Play (Android). Ihre Bewerbung wird mit Ihrer PHP-Version normalerweise tun Ajax Requests kommunizieren zu können, wie im Beispiel.

Hinterlasse eine Antwort

Die e-Mailadresse wird nicht veröffentlicht. Pflichtfelder sind mit gekennzeichnet. *