Lập trình PHP cho điện thoại di động và máy tính bảng với JQuery Mobile

Hãy tưởng tượng bạn sử dụng PHP để phát triển ứng dụng của bạn để chạy trên các thiết bị di động. Với JQuery điện thoại di động bạn tạo giao diện tương tác với các máy chủ web qua Ajax.


Trình bày

Không có phép thuật! Những gì bạn làm là bình thường: chúng tôi sử dụng HTML để gắn kết các màn hình và Javascript (Ajax) để làm cho các yêu cầu đến máy chủ web, đâu là mã nguồn PHP sẽ nhận được, quy trình và trả lại thông tin. Và đối với điều này, chúng ta có thể tin cậy vào tập hợp các cơ sở mà JQuery cho phép chúng ta.

JQuery điện thoại di động

jQuery Mobile là một web Framework tối ưu hóa cho điện thoại thông minh và máy tính bảng. Nó là một hệ thống giao diện dựa trên HTML5 tương thích với các nền tảng di động phổ biến nhất. Được xây dựng trên jQuery và jQuery UI, mã của bạn cho phép thiết kế linh hoạt, Dễ dàng tùy chỉnh.

Trong thực tế

Hãy làm một ví dụ đơn giản, nơi chúng tôi có một giao diện với một lĩnh vực văn bản cho người sử dụng để nhập “Tên”. Bằng cách nhấp vào “Gửi”, biểu mẫu được gửi đến máy chủ (qua Ajax), Hiển thị thông báo “Xin chào nameDoUsuario!” ou “Chào thế giới!”, Nếu trường tên trống.

Chào thế giới!

Index.php | Giao diện người dùng (phía máy khách)
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>
    <đầu>
    <tiêu đề>Chào thế giới! JQuery điện thoại di động</tiêu đề>
    <Meta tên="viewport" Nội dung="width=device-width, quy mô ban đầu = 1"> 
    <liên kết 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"></kịch bản>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></kịch bản>   
    <kịch bản>
        $(chức năng() { 
            $("#bt-enviar").Nhấp vào(chức năng() {
                $.Ajax({
                  Loại: "POST",
                  Url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  Ngày: ({Tên: $.Trim($("#nome").Val()) }),
                  Loại dữ liệu: "text",
                  Success: chức năng(Ngày) {
                    $("#nome").Val("");
                    $("#resultado").HTML(Ngày);
                  }
                });
            });
        });
    </kịch bản>     
</đầu>
<cơ thể> 
    <div ngày-Vai trò="page" ID="indexPage">
        <div ngày-Vai trò="header">
            <H1>Chào thế giới - JQuery điện thoại di động</H1>
        </div>
        <div ngày-Vai trò="content">
            <div ngày-Vai trò="fieldcontain">
                <Nhãn ="nome">Nhập tên của bạn:</Nhãn>
                <loại đầu vào="text" ID="nome" Tên="nome" giá trị="" />
            </div>
            <ID đầu vào="bt-enviar" Loại="button" giá trị="Enviar" />
            <ID div="resultado"></div>
        </div>
    </div> 
</cơ thể>
</HTML>
?>
olamundo. php | Mã PHP của bạn (phía máy chủ)
1
2
3
 
  <?php tiêu đề("Content-Type: văn bản/html;  charset = ISO-8859-1",sự thật) ?>
  <H3>Xin chào <?php ECHO $_ BÀI[tên] ? $_ BÀI[tên] : "Mundo" ?>!</H3>

Kết quả là một cái gì đó giống như:


Xem mã này làm việc!

JQuery Mobile ban công lớn là trong Meta-Tag “Viewport”, nơi tham số “width = thiết bị-chiều rộng” tự động thay đổi kích thước nội dung tùy thuộc vào màn hình của thiết bị di động mà bạn đang truy cập. Bằng cách này, trình bày khi truy cập vào một máy tính để bàn là khác nhau từ một điện thoại di động.

Bạn có thể sử dụng trình mô phỏng để hình dung tốt hơn cách trang của bạn hoạt động và xuất hiện trên điện thoại, Tablet, vv, như đã thấy trong hình trên. Trong trường hợp của Chrome, chỉ cần cài đặt một loại mở rộng “Mô phỏng Ripple” và sử dụng nó như một công cụ kiểm tra. Có một số giải pháp tương tự.

Phần còn lại đi từ nhu cần của bạn và sáng tạo…

Tổng lượt truy cập: 64871

11 Bình luận trên “Lập trình PHP cho điện thoại di động và máy tính bảng với JQuery Mobile

  1. Fabio cho biết:

    Xin chào, Xin chúc mừng cho đăng bài. Tôi muốn tận dụng lợi thế của nội dung của mình để đặt câu hỏi(Nếu bạn có thể giúp tôi tôi biết ơn). Tôi muốn thực hiện một truy vấn đơn giản trong các ngân hàng trong PHP và sau đó hiển thị trên màn hình của người dùng được đăng ký hay không trong ngân hàng sử dụng jQuery điện thoại di động. Bạn biết làm thế nào tôi có thể làm điều đó.? Biết ơn sự chú ý.

    • Xin chào Fabio. Có, biết làm thế nào để làm, nhưng bạn cần phải biết một chút lập trình để bạn hiểu những lời giải thích. Nguyên tắc là giống như tôi được sử dụng trong ví dụ “olamundo. php”; sự khác biệt là bạn nên làm cho kết nối đến cơ sở dữ liệu, Tìm kiếm kết quả mong muốn (xây dựng SQL của bạn) và hiển thị nó. Những cái ôm!

      • Max cho biết:

        Xin chào Taylor, bạn muốn có một khóa học đầy đủ của lập trình PHP cho điện thoại di động và máy tính bảng với JQuery Mobile. Gõ một DẸP.

        Một ví dụ một hệ thống lịch trình, nơi tôi có thể nhìn thấy một danh sách các khóa học đến từ cơ sở dữ liệu và bằng cách nhấp vào khóa học tôi có thể thấy tất cả các khóa học thông tin.

      • Chào Max. Tôi không có khóa học này :( Ví dụ trong bài này là đã rất gần với những gì bạn cần, bạn chỉ cần làm việc Yêu cầu (gửi dữ liệu html, mẫu bằng Ajax) và các Phản ứng (dữ liệu về xử lý php / / máy chủ sql). Trên Internet có rất nhiều ví dụ của CRUD trong PHP.

        Hôm nay nếu bạn đã làm một cái gì đó cho điện thoại di động, sử dụng Ion.

    • Mã là dựa trên HTML, CSS và JavaScript. Vì vậy, bản thân trình duyệt (Ie, Firefox, Chrome) từ thiết bị của bạn (điện thoại di động, Tablet, máy tính xách tay) Chăm sóc các thông dịch. Không cần phần mềm. Ở phía khách hàng, Đặt mã trong bất kỳ tập tin văn bản (Notepad, Ví dụ:) và lưu nó như là một Extension. html. Ở phía máy chủ, để thao tác dữ liệu, sẽ phải sử dụng ngôn ngữ lập trình, như PHP, Java, Asp, .Net, vv.

  2. Không có cho biết:

    Chào bạn,

    Đầu tiên, Xin chúc mừng về bài viết.

    Sau đó, nó có thể phát triển các ứng dụng cho cả Android và iOS sử dụng jQuery điện thoại di động và PhoneGap và cũng có thể sử dụng PHP và MYSQL để kết nối với máy chủ?

    • Chúc ngủ ngon, có nó hoàn toàn có thể. Với PhoneGap bạn tạo ứng dụng của bạn trong HTML/JS (phía khách hàng) và nó sẽ chạy trên Android iOS, truy cập tài nguyên phía máy chủ (PHP và MySQL), qua Ajax.

    • Có, bạn làm cho ứng dụng của bạn với HTML, CSS và Javascript và sau đó sử dụng các chương trình như Developer để tạo ra các ứng dụng (Gần) bản địa của các nền tảng như Android và iOS. Sau đó, chỉ cần tải lên Google Play (Android). Ứng dụng của bạn sẽ có thể giao tiếp với PHP của bạn bình thường bằng cách làm cho Ajax yêu cầu, như trong ví dụ.

Để lại câu trả lời

Các địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu bằng *