Programování v PHP pro mobilní telefony a tablety s JQuery Mobile

Představte si, že používáte PHP k vývoji svých aplikací na mobilních zařízeních. S JQuery Mobile vytvořit rozhraní, které spolupracují s webovým serverem přes Ajax.


Prezentace

Není to žádná magie.! Co je obvyklé: používáme HTML k sestavení obrazovek a Javascriptu (Ajax) prodílky na webový server, kde jsou zdrojové kódy PHP, které obdržíte, zpracovat a vrátit informace. A za to, můžeme se spolehnout na sadu zařízení, která nám JQuery umožňuje.

mobilní jQuery

jQuery Mobile je webový framework optimalizovaný pro chytré telefony a tablety. Jedná se o systém rozhraní založený na HTML5, který je kompatibilní s nejoblíbenějšími platformami mobilních zařízení. Postaveno na jQuery a jQuery UI, jeho kód umožňuje flexibilní design, Snadno přizpůsobitelné.

V praxi

Udělejme jednoduchý příklad, ve kterém máme rozhraní s textovým polem, ve kterém uživatel může zadat své “Jméno”. Kliknutím na tlačítko “Odeslat”, formulář je odeslán na server (přes Ajax), zobrazí zprávu “Dobrý den, jménoDoUsuario!” nebo “Ahoj světe!”, pokud je pole názvu prázdné.

Ahoj světe!

index.php | Uživatelské rozhraní (na straně klienta)
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>
    <hlava>
    <Název>Ahoj světe! JQuery Mobilní</Název>
    <název metadata="viewport" Obsah="width=device-width, počáteční měřítko=1"> 
    <Odkaz Rel="stylesheet" Href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <skript src="http://code.jquery.com/jquery-1.6.4.min.js"></skript>
    <skript src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></skript>   
    <skript>
        $(funkce() { 
            $("#bt-enviar").Klepněte(funkce() {
                $.Ajax({
                  Typ: "POST",
                  ADRESA URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  Datum: ({Jméno: $.Trim($("#nome").Val()) }),
                  Datatype: "text",
                  Úspěch: funkce(Datum) {
                    $("#nome").Val("");
                    $("#resultado").HTML(Datum);
                  }
                });
            });
        });
    </skript>     
</hlava>
<tělo> 
    <div datum-Roll="page" Id="indexPage">
        <div datum-Roll="header">
            <H1>Ahoj světe - JQuery Mobilní</H1>
        </div>
        <div datum-Roll="content">
            <div datum-Roll="fieldcontain">
                <Popisek Je="nome">Zadejte své jméno:</Popisek>
                <typ vstupu="text" Id="nome" Jméno="nome" Hodnotu="" />
            </div>
            <id vstupu="bt-enviar" Typ="button" Hodnotu="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</tělo>
</HTML>
?>
olamundo.php | Váš PHP kód (na straně serveru)
1
2
3
 
  <?PHP Záhlaví("Content-Type: text/html;  charset=ISO-8859-1",pravda) ?>
  <3:00 a.m.>Dobrý den <?PHP ozvěna $_POST["jméno"] ? $_POST["jméno"] : "Mundo" ?>!</3:00 a.m.>

Výsledkem je něco jako:


Viz tento kód funguje!

Velký jquery mobilní balkon je v meta-tag “Výřezu”, kde je parametr “width=šířka zařízení” automaticky mění velikost obsahu podle obrazovky mobilního zařízení, ke které přistupujete. Tímto způsobem, prezentace při přístupu z počítače se liší od mobilního telefonu.

Pomocí emulátoru můžete lépe vizualizovat, jak se vaše stránka chová a jak se zobrazuje na mobilním telefonu., Tablet, atd, jak je vidět na obrázku výše. V případě Chromu, stačí nainstalovat typ rozšíření “Zvlnění emulátor” a použít jej jako testovací nástroj. Existuje několik podobných řešení.

Zbytek jde z vaší potřeby a kreativity…

Celkový počet přístupů: 64866

11 Komentáře k “Programování v PHP pro mobilní telefony a tablety s JQuery Mobile

  1. Fabio řekl:

    Dobré ráno, Gratuluji k post. Chtěl bych využít jeho obsah položit otázku(pokud mi může pomoci oceňuji). Chtěl bych udělat jednoduchou konzultaci v bance v PHP a pak ukázat na obrazovce uživatel je registrován, nebo ne v bance pomocí jquery mobile. Víš, jak to můžu udělat.? Vděčný za pozornost.

    • Dobrý den, Fabio. Ano, vědět, jak to udělat, ale musíte vědět trochu programování, takže chápete vysvětlení. Princip je stejný jako ten, který jsem použil v příkladu “olamundo.php”; Rozdíl je v tom, že musíte provést připojení k databázi, usilovat o požadovaný výsledek (připojení sql) a zobrazit jej. Objetí!

      • Max řekl:

        Dobrý den Taylor, máte celý kurz PHP programování pro mobilní telefony a tablety s JQuery Mobile. Zadejte CRUD.

        Příklad rozvrhu kurzů systému, kde bych mohl ukázat seznam kurzů pocházejících z databáze a kliknutím na kurz jsem mohl vidět všechny informace o kurzu.

      • Ahoj Max. Nemám tento kurz :( V příkladu v tomto příspěvku je již velmi blízko co potřebujete, stačí zapracovat na Požadavek (odesílání dat/html/formuláře pomocí Ajax) a Reakce (data vrácená zpracování php/sql/server). Na internetu má mnoho příkladů CRUD v PHP.

        Dnes, pokud vaše byly něco udělat pro mobilní, by se použít Iontové.

    • Kód je založen na HTML., CSS a JavaScript. Tak, samotný prohlížeč (Ie, Aplikace Firefox, Chrom) ze zařízení (mobilní telefon, Tablet, Poznámkový blok) má na starosti tlumočení. Není potřeba žádný software. Na straně klienta, vložit kód do textového souboru (Programu poznámkový blok, například) a uložte jej jako prodloužený .html. Strana serveru, manipulovat s daty, bude muset používat programovací jazyk, jako PHP, Java, Asp, .Čisté, atd.

  2. Rafael Augustus řekl:

    Dobré odpoledne,

    První, Gratulujeme k článku.

    Takže je možné vyvíjet aplikace pro Android i IOS pomocí Jquery Mobile a Phonegap a také a možnost použít PHP a MYSQL pro připojení k serveru?

    • Dobrou noc, Ano, je to naprosto možné. S Phonegap vytvoříte aplikaci v html / js (na straně klienta) a poběží na Android iOS, přístup k prostředkům ze strany serveru (PHP a MySQL), přes Ajax.

  3. Jan řekl:

    Má jako ukázkový program, který jste být nainstalován na Google Play ? nebo jen kolo, přístup přímo v prohlížeči ?

    • Ano, provedete svou aplikaci pomocí HTML, CSS a Javascript a pak používá programy, jako je Telefonní mezera pro generování aplikací (Téměř) nativní kamenina pro platformy jako Android a iOS. Pak stačí jít na Google Play (Android). Vaše aplikace bude moci komunikovat s php tím, že obvykle ajax žádosti, stejně jako v příkladu.

Zanech odpověď

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *