Programowanie PHP dla telefonów komórkowych i tabletów z JQuery Mobile

Wyobraź sobie, że opracowanie ich aplikacji działających na urządzeniach mobilnych za pomocą PHP. Z JQuery Mobile tworzenia interfejsów, które komunikują się z serwerem sieci Web za pomocą Ajax.


Prezentacja

To nie magia! Co to jest zwykle: używamy HTML do montażu ekranów i Javascript (Ajax) , aby składać żądania do serwera sieci Web, gdzie znajdują się kody źródłowe PHP, które otrzymasz, procesu i zwrotu informacji. I do tego, możemy liczyć na zestaw udogodnień, które JQuery umożliwia nam.

mobilne jQuery

jQuery Mobile to Web Framework zoptymalizowany pod kątem smartfonów i tabletów. Jest to system interfejsu oparty na HTML5 kompatybilny z najpopularniejszymi platformami urządzeń mobilnych. Zbudowany na jQuery i jQuery UI, jego kod pozwala na elastyczną konstrukcję, Łatwe konfigurowalne.

W praktyce

Zróbmy prosty przykład, w którym mamy interfejs z polem tekstowym, aby użytkownik mógł wprowadzić “Nazwa”. Klikając przycisk “Wyślij”, formularz jest wysyłany do serwera (przez Ajax), który wyświetla komunikat “Witam nameDoUsuario!” lub “Cześć ludzie!”, jeśli pole nazwy jest puste.

Cześć ludzie!

index.php | Interfejs użytkownika (po stronie 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>
    <Głowica>
    <tytuł>Cześć ludzie! JQuery Komórkowy</tytuł>
    <nazwa meta="viewport" zawartość="width=device-width, skala początkowa=1"> 
    <Link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <src skryptu="http://code.jquery.com/jquery-1.6.4.min.js"></skrypt>
    <src skryptu="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></skrypt>   
    <skrypt>
        $(Funkcja() { 
            $("#bt-enviar").Kliknij(Funkcja() {
                $.Ajax({
                  typu: "POST",
                  Adres url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  Data: ({Nazwa: $.Przycinanie($("#nome").Val()) }),
                  Datatype: "text",
                  Sukces: Funkcja(Data) {
                    $("#nome").Val("");
                    $("#resultado").HTML(Data);
                  }
                });
            });
        });
    </skrypt>     
</Głowica>
<ciało> 
    <data div-Roll="page" IDENTYFIKATOR="indexPage">
        <data div-Roll="header">
            <H1>Cześć ludzie - JQuery Komórkowy</H1>
        </DIV>
        <data div-Roll="content">
            <data div-Roll="fieldcontain">
                <Etykiety jest="nome">Wpisz swoje imię i nazwisko:</Etykiety>
                <Typ danych wejściowych="text" IDENTYFIKATOR="nome" Nazwa="nome" wartość="" />
            </DIV>
            <Identyfikator wejściowy="bt-enviar" typu="button" wartość="Enviar" />
            <DIV id="resultado"></DIV>
        </DIV>
    </DIV> 
</ciało>
</HTML>
?>
olamundo.php | Twój kod PHP (po stronie serwera)
1
2
3
 
  <?PHP Nagłówek("Content-Type: tekst/html;  charset = ISO-8859-1",prawda) ?>
  <3:00.>Cześć <?PHP echo $_ POST["nazwa"] ? $_ POST["nazwa"] : "Mundo" ?>!</3:00.>

Rezultatem jest coś takiego:


Zobacz ten kod działa!

Duży mobilny balkon jquery znajduje się w metatagu “Rzutni”, gdzie parametr “width=szerokość urządzenia” automatycznie zmienić rozmiar zawartości zgodnie z ekranem urządzenia mobilnego, do którego uzyskujesz dostęp. W ten sposób, podczas uzyskiwania dostępu z komputera stacjonarnego różni się od telefonu komórkowego.

Za pomocą emulatora można lepiej wizualizować zachowanie strony i wygląd na telefonie komórkowym, Tabletka, itp, jak widać na powyższym rysunku. W przypadku Chrome, po prostu zainstaluj typ rozszerzenia “Emulator tętnienia” i używać go jako narzędzia testowego. Istnieje kilka podobnych rozwiązań.

Reszta wychodzi z twoich potrzeb i kreatywności…

Całkowitej trafienia: 64866

11 Komentarze na temat “Programowanie PHP dla telefonów komórkowych i tabletów z JQuery Mobile

  1. Fabio powiedział:

    Dzień dobry, Gratulujemy postu. Chciałbym skorzystać z jego treści, aby zadać pytanie(jeśli możesz mi pomóc doceniam). Chciałbym zrobić prostą konsultację w banku w PHP, a następnie pokazać na ekranie użytkownik jest zarejestrowany lub nie w banku za pomocą jquery mobile. Wiesz, jak mogę to zrobić.? Wdzięczny za uwagę.

    • Witam Fabio. Tak, wiedzieć, jak to zrobić, ale musisz wiedzieć trochę programowania, więc rozumiesz wyjaśnienie. Zasada jest taka sama jak ta, którą użyłem w przykładzie “olamundo.php”; różnica polega na tym, że należy nawiązać połączenie z bazą danych, szukać pożądanego rezultatu (montowanie sql) i wyświetlić go. Uściski!

      • Max powiedział:

        Witam Taylor, będziesz mieć pełny kurs programowania PHP dla telefonów komórkowych i tabletów z JQuery Mobile. Wpisz CRUD.

        Przykład systemu harmonogramu kursu, w którym mogę pokazać listę kursów pochodzących z bazy danych i klikając na kurs widziałem wszystkie informacje o kursie.

      • Witam Max. Nie mam tego kursu :( W przykładzie w tym poście jest już bardzo blisko to, czego potrzebujesz, wystarczy pracować nad Żądanie (Wysyłanie formularza/html/dane przez Ajax) i Odpowiedzi (przetwarzanie danych zwracanej php/sql/serwer). W Internecie ma wiele przykładów CRUD w PHP.

        Dzisiaj, jeśli chcesz coś zrobić dla telefonów komórkowych, wykorzystywałaby Jonowych.

    • Kod jest oparty na języku HTML, CSS i JavaScript. Tak, sama przeglądarka (Ie, Firefox, Chrome) z urządzenia (telefon komórkowy, Tabletka, Notebook) odpowiada za tłumaczenie ustne. Nie jest potrzebne żadne oprogramowanie. Po stronie klienta, umieścić kod w pliku tekstowym (Notatnik, na przykład) i zapisać go jako rozszerzenie .html. Po stronie serwera, aby manipulować danymi, będzie musiał użyć języka programowania, jako PHP, Java, Asp, .Netto, itp.

  2. Rafael August powiedział:

    Dzień dobry,

    Pierwszym, Gratulujemy artykułu.

    Tak więc możliwe jest opracowanie aplikacji zarówno dla Androida, jak i IOS za pomocą Jquery Mobile i Phonegap, a także i możliwe jest użycie PHP i MYSQL do połączenia z serwerem?

    • Dobranoc, Tak, jest to całkowicie możliwe. Z Phonegap tworzysz aplikację w html / js (po stronie klienta) i będzie działać na Androida iOS, uzyskiwanie dostępu do zasobów po stronie serwera (PHP i MySQL), przez Ajax.

    • Tak, złożyć wniosek w formacie HTML, CSS i Javascript, a następnie używa programów takich jak Phonegap do generowania aplikacji (Prawie) rodzime kamionki dla platform takich jak Android i iOS. Następnie po prostu przejdź do Google Play (Android). Twoja aplikacja będzie w stanie komunikować się z PHP, zazwyczaj składając prośby Ajax, jak w przykładzie.

Odpowiedz

Twój adres e-mail nie zostaną opublikowane. Wymagane pola są oznaczone *