Pemrograman PHP untuk ponsel dan tablet dengan JQuery Mobile

Bayangkan Anda menggunakan PHP untuk mengembangkan aplikasi mereka untuk menjalankan pada perangkat mobile. Dengan JQuery Mobile Anda membuat antarmuka yang berinteraksi dengan Web server melalui Ajax.


Presentasi

Ada ada sihir! Apa itu biasa: menggunakan HTML agar sesuai dengan kanvas dan Javascript (AJAX) untuk membuat permintaan ke Web server, dimana ada sumber-sumber PHP yang akan menerima, proses dan kembali informasi. Dan untuk ini, Kita dapat mengandalkan serangkaian fitur bahwa JQuery memungkinkan kita.

jQuery Mobile

jQuery Mobile adalah sebuah Framework Web yang dioptimalkan untuk smartphone dan tablet. Ini adalah sebuah sistem yang didasarkan pada HTML5 antarmuka kompatibel dengan platform perangkat mobile yang paling populer. Dibangun di atas jQuery dan jQuery UI, Kode memungkinkan desain yang fleksibel, mudah dikustomisasi.

Dalam praktek

Mari kita ambil contoh sederhana, Kami memiliki antarmuka dengan bidang teks untuk pengguna untuk memasukkan Anda “Nama”. Dengan mengklik tombol “Kirim”, Formulir dikirim ke server (melalui Ajax), yang menampilkan pesan “Halo nomeDoUsuario!” atau “Halo dunia!”, Jika nama field kosong.

Halo dunia!

index.php | Antarmuka pengguna (sisi klien)
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>
    <kepala>
    <judul>Halo dunia! JQuery Mobile</judul>
    <nama meta="viewport" konten="width=device-width, awal-skala = 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"></script>
    <script src="http://Code.jQuery.com/mobile/1.1.0/jQuery.Mobile-1.1.0.min.js"></script>   
    <script>
        $(fungsi() { 
            $("#bt-enviar").Klik(fungsi() {
                $.AJAX({
                  jenis: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  tanggal: ({Nama: $.Trim($("#nome").Val()) }),
                  dataType: "text",
                  sukses: fungsi(tanggal) {
                    $("#nome").Val("");
                    $("#resultado").HTML(tanggal);
                  }
                });
            });
        });
    </script>     
</kepala>
<tubuh> 
    <div data-peran="page" ID="indexPage">
        <div data-peran="header">
            <H1>Olá mundo - JQuery Mobile</H1>
        </div>
        <div data-peran="content">
            <div data-peran="fieldcontain">
                <label adalah="nome">Informe seu nome:</label>
                <jenis input="text" ID="nome" Nama="nome" nilai="" />
            </div>
            <masukan id="bt-enviar" jenis="button" nilai="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</tubuh>
</HTML>
?>
olamundo.php | Kode PHP Anda (sisi server)
1
2
3
 
  <?PHP header("Content-Type: teks/html;  charset = ISO-8859-1",benar) ?>
  <H3>Halo <?PHP echo $_ POSTING['nama'] ? $_ POSTING['nama'] : "Mundo" ?>!</H3>

Hasilnya adalah sesuatu:


Lihat kode ini bekerja!

Yang besar dari JQuery Mobile adalah dalam meta-tag “viewport”, mana parameter “Device-width = Lebar” secara otomatis mengubah ukuran konten sebagai layar perangkat selular yang mengakses. Cara ini, presentasi dengan mengakses Desktop berbeda dari ponsel.

Anda dapat menggunakan sebuah emulator untuk lebih memvisualisasikan bagaimana halaman Anda berperilaku dan muncul dalam ponsel, Tablet, dll, seperti yang terlihat pada gambar di atas. Dalam kasus Chrome, hanya menginstal jenis ekstensi “Riak Emulator” dan menggunakannya sebagai alat tes. Ada beberapa solusi yang serupa.

Sisanya pergi ke kebutuhan Anda dan kreativitas…

Jumlah total hits: 34314

11 Komentar pada “Pemrograman PHP untuk ponsel dan tablet dengan JQuery Mobile

  1. Fábio mengatakan:

    Selamat pagi, Selamat untuk posting. Saya ingin mengambil konten untuk memperjelas keraguan(Jika Anda dapat membantu saya terima kasih). Saya ingin membuat query sederhana di di PHP dan kemudian menunjukkan pada layar pengguna yang terdaftar atau tidak di Bank menggunakan jquery mobile. Anda tahu bagaimana saya dapat melakukannya? Berterima kasih atas perhatian.

    • Halo Fath. Ya, Aku tahu bagaimana melakukan, Tapi Anda harus tahu sedikit pemrograman untuk memahami penjelasan. Prinsipnya adalah sama seperti yang digunakan dalam contoh “olamundo.php”; Perbedaannya adalah bahwa Anda harus membuat koneksi dengan database, mendapatkan hasil yang diinginkan (mengatur SQL Anda) dan menampilkannya. Pelukan!

      • Max mengatakan:

        Halo Taylor, Anda akan memiliki lapangan penuh pemrograman PHP untuk ponsel dan tablet dengan JQuery Mobile. Ketik CRUD.

        Contoh sistem kalender yang mana saya menunjukkan daftar kursus yang datang dari database dan ketika Anda mengklik pada kursus kursus, aku bisa melihat semua informasi perjalanan.

      • Hi Max. Saya tidak punya kursus ini :( Contoh dalam posting ini sudah sangat dekat dengan apa yang Anda butuhkan, Anda hanya harus bekerja permintaan (mengirim formulir/data/html melalui Ajax) dan respon (data kembali diproses php/sql/server). Internet memiliki banyak contoh CRUD di PHP.

        Hari ini jika Anda akan melakukan sesuatu untuk Mobile, akan menggunakan Ionik.

    • Kode didasarkan pada HTML, CSS dan JavaScript. Jadi, browser itu sendiri (IE, Firefox, Chrome) perangkat Anda (ponsel, Tablet, Notebook) mengurus menafsirkan. Anda tidak perlu menginstal software apapun. Sisi klien, menempatkan kode ke file teks (Notepad, misalnya) dan menyimpannya sebagai ekstensi file html. Sisi server, untuk memanipulasi data, akan harus menggunakan bahasa pemrograman, sebagai PHP, Jawa, ASP, .BERSIH, dll.

  2. Rafael Augusto mengatakan:

    Selamat sore,

    Pertama, Selamat untuk artikel.

    Jadi dapat mengembangkan aplikasi untuk kedua android dan IOS menggunakan Jquery Mobile dan pop akun Yahoo internasional dan juga dapat menggunakan PHP dan MYSQL untuk menyambung ke server?

    • Selamat malam, Ya itu sangat mungkin. Dengan pop akun Yahoo internasional Anda membuat aplikasi Anda dalam html/js (sisi klien) dan dia akan berjalan pada Android, iOS, mengakses sumber daya server-side (PHP dan MySQL), melalui Ajax.

  3. Jan mengatakan:

    Sebagai contoh program bahwa Anda melakukan diinstal pada google bermain ? atau hanya roda, mengakses langsung di Web browser ?

    • Ya, Anda melakukan aplikasi Anda dengan HTML, CSS dan Javascript, kemudian menggunakan program seperti Pop akun Yahoo internasional untuk menghasilkan aplikasi (hampir) pribumi untuk platform seperti Android dan iOS. Maka itu hanya sampai dengan Google Play (Android). Aplikasi Anda akan dapat berkomunikasi dengan PHP Anda biasanya melakukan permintaan Ajax, seperti dalam contoh.

Tinggalkan balasan

Alamat email Anda tidak akan dipublikasikan. Kolom yang harus diisi ditandai dengan *