Programovanie v PHP pre mobilné telefóny a tablety s JQuery Mobile

Predstavte si, že používate PHP rozvíjať ich spúšťať aplikácie na mobilných zariadeniach. S JQuery Mobile vytvorení rozhraní, ktoré spolupracujú s webovým serverom cez Ajax.


Prezentácie

Nie je to žiadna mágia.! Čo je obvyklé: používame HTML zostaviť obrazovky a Javascript (Ajax) na vyhľadávanie žiadostí na webovom serveri, kde sú php zdrojové kódy, ktoré dostanete, proces a vrátiť informácie. A za to, môžeme sa spoľahnúť na sadu zariadení, ktoré JQuery nám umožňuje.

mobilný jQuery

jQuery Mobile je webový rámec optimalizovaný pre smartfóny a tablety. Je to HTML5-založený systém rozhrania kompatibilný s najpopulárnejšími platformami mobilných zariadení. Postavený na jQuery a jQuery UI, jeho kód umožňuje flexibilný dizajn, Ľahko prispôsobiteľné.

V praxi

Urobme jednoduchý príklad, v ktorom máme rozhranie s textom poľa pre užívateľa zadať svoje “meno”. Kliknutím na ikonu “Odoslať”, formulár sa odošle na server (cez Ajax), , ktorý zobrazuje správu “Dobrý deň, menoDoUsuario!” alebo “čaute všetci!”, ak je pole názvu prázdne.

čaute všetci!

index.php | Používateľské rozhranie (na strane 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
<!DOCTYPE html>
<HTML>
    <vedúci>
    <názov>čaute všetci! JQuery Mobile</názov>
    <meta názov="viewport" obsah="width=device-width, počiatočná stupnica = 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>
        $(Funkcia() { 
            $("#bt-enviar").Kliknite(Funkcia() {
                $.Ajax({
                  typ: "POST",
                  Url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  dátum: ({meno: $.Trim($("#nome").Val()) }),
                  Údajový typ: "text",
                  Úspech: Funkcia(dátum) {
                    $("#nome").Val("");
                    $("#resultado").HTML(dátum);
                  }
                });
            });
        });
    </skript>     
</vedúci>
<telo> 
    <div dátum-Roll="page" Id="indexPage">
        <div dátum-Roll="header">
            <H1>čaute všetci - JQuery Mobile</H1>
        </Div>
        <div dátum-Roll="content">
            <div dátum-Roll="fieldcontain">
                <Štítok je="nome">Zadajte svoje meno:</Štítok>
                <vstupné typ="text" Id="nome" meno="nome" hodnota="" />
            </Div>
            <vstupné id="bt-enviar" typ="button" hodnota="Enviar" />
            <div id="resultado"></Div>
        </Div>
    </Div> 
</telo>
</HTML>
?>
olamundo.php | Váš PHP kód (na strane servera)
1
2
3
 
  <?PHP Hlavičky("Content-Type: text/html;  charset=ISO-8859-1",pravda) ?>
  <3:00 .m.>dobrý deň <?PHP echo $_ POST["meno"] ? $_ POST["meno"] : "Mundo" ?>!</3:00 .m.>

Výsledkom je niečo ako:


Pozrite si tento kód, ktorý funguje!

Veľký jquery mobilný balkón je v meta-tag “Zobrazenia”, kde parameter “width =šírka zariadenia” automaticky zmení veľkosť obsahu podľa obrazovky mobilného zariadenia, ku ktoré pristupujete. Týmto spôsobom, prezentácia pri prístupe z pracovnej plochy sa líši od mobilného telefónu.

Emulátor môžete použiť na lepšiu vizualizáciu toho, ako sa vaša stránka správa a zobrazuje sa v mobilnom telefóne, Tabletu, atď, ako je vidieť na obrázku vyššie. V prípade prehliadača Chrome, stačí nainštalovať typ rozšírenia “Emulátor zvlnenia” a použiť ho ako testovací nástroj. Existuje niekoľko podobných riešení.

Zvyšok ide z vašej potreby a kreativity…

Celkový počet návštev: 64871

11 pripomienky k “Programovanie v PHP pre mobilné telefóny a tablety s JQuery Mobile

  1. Fabio povedal:

    dobré ráno, Gratuluji k post. Chcel by som využiť jeho obsah položiť otázku(ak mi môže pomôcť vážim). Chcel by som, aby sa jednoduchá konzultácia v banke v PHP a potom ukázať na obrazovke užívateľ je registrovaný, alebo nie v banke pomocou jquery mobile. Vieš, ako to môžem urobiť.? Vďačný za pozornosť.

    • Dobrý deň, Fabio. áno, vedieť, ako to urobiť, ale musíte vedieť, trochu programovania, takže chápete vysvetlenie. Princíp je rovnaký ako ten, ktorý som použil v príklade “olamundo.php”; rozdiel je v tom, že musíte vykonať pripojenie k databáze, usilovať o požadovaný výsledok (pripojiť SQL) a zobraziť ho. Hugs!

      • Max povedal:

        Dobrý deň Taylor, mali by ste celý kurz PHP programovania pre mobilné telefóny a tablety s JQuery Mobile. Zadajte CRUDE.

        Príklad systému rozvrhu kurzu, kde by som vám mohol ukázať zoznam kurzov pochádzajúcich z databázy a kliknutím na kurz som mohol vidieť všetky informácie o kurze.

      • Hi Max. Nemusíte mať tento kurz :( Príklad v tento post je už veľmi blízko k čo potrebujete, stačí pracovať na Žiadosť (odosielanie údajov/html/form AJAX) a Reakcia (spracované údaje vrátiť php/SQLServer). Na internete má mnoho príkladov CRUD v PHP.

        Dnes, ak by ste mali niečo urobiť pre mobilné telefóny, by sa Iónové.

    • Kód je založený na HTML, CSS a JavaScript. Tak, samotný prehliadač (Tj, Firefox, Chrome) z vášho zariadenia (Mobilný telefón, Tabletu, notebook) je zodpovedný za tlmočenie. Nie je potrebný žiadny softvér. Na strane klienta, vložte kód do textového súboru (Poznámkový blok, napríklad) a uložte ho ako rozšírenie .html. Strana servera, manipulovať s údajmi, bude musieť používať programovací jazyk, ako PHP, Java, Asp, .Čistá, atď.

  2. Rafael Augustus povedal:

    dobrý deň,

    Prvý, Gratulujeme k článku.

    Takže je možné vyvíjať aplikácie pre Android a IOS pomocou Jquery Mobile a Phonegap a tiež a možné použiť PHP a MYSQL pre pripojenie k serveru?

    • dobrú noc, Áno, je to úplne možné. S Phonegap môžete vytvoriť aplikáciu v html / js (na strane klienta) a bude bežať na Android iOS, prístup k prostriedkom zo strany servera (PHP a MySQL), cez Ajax.

  3. Január povedal:

    Má ako ukážkový program, ktorý ste nainštalovali na Google Play ? alebo len koleso, prístup priamo v prehliadači ?

    • áno, urobíte aplikáciu s HTML, CSS a Javascript a potom používa programy, ako je Phonegap (Telefónnagap) generovať aplikácie (Takmer) natívne kamenina pre platformy ako Android a iOS. Potom stačí ísť do Služby Google Play (Android). Vaša aplikácia bude môcť komunikovať s php tým, že typicky ajax žiadosti, ako v príklade.

nechať odpoveď

E-mailová adresa nebude zverejnený. Povinné polia sú označené *