เขียนโปรแกรม PHP สำหรับโทรศัพท์มือถือและแท็บเล็ต ด้วย JQuery Mobile

จินตนาการคุณใช้ PHP ในการพัฒนาโปรแกรมประยุกต์เพื่อเรียกใช้บนอุปกรณ์มือถือ. ด้วย JQuery Mobile คุณสร้างอินเทอร์เฟซที่โต้ตอบกับเซิร์ฟเวอร์เว็บด้วย Ajax.


งานนำเสนอ

เป็น! ปกติคืออะไร: ใช้ HTML ให้พอดีกับผ้าใบและ Javascript (อาแจ็กซ์) ให้ร้องขอไปยังเซิร์ฟเวอร์เว็บ, แหล่งข้อมูล PHP ที่จะได้รับอยู่ที่ไหน, กระบวนการ และส่งกลับข้อมูล. และ สำหรับเรื่องนี้, เราสามารถนับบนชุดของคุณลักษณะที่ JQuery ช่วยให้เรา.

jQuery Mobile

jQuery Mobile เป็นกรอบ เว็บเหมาะสำหรับสมาร์ทโฟนและแท็บเล็ต. มันเป็นระบบที่อิงจาก HTML5 อินเทอร์เฟซที่เข้ากันได้กับแพลตฟอร์มโทรศัพท์มือถือที่นิยมมากที่สุด. สร้างขึ้นบน jQuery และ jQuery UI, รหัสของคุณช่วยให้การออกแบบที่ยืดหยุ่น, ปรับแต่งได้ง่าย.

ในทางปฏิบัติ

ลองมาตัวอย่างง่าย ๆ, เรามีอินเตอร์เฟซที่ มีช่องสำหรับให้ผู้ใช้ป้อนข้อความของคุณ “ชื่อ”. โดยคลิกที่ปุ่ม “ส่ง”, แบบฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์ (ผ่าน Ajax), ที่แสดงข้อความ “สวัสดี nomeDoUsuario!” หรือ “หวัดดีชาวโลก!”, ถ้าชื่อเขตข้อมูลว่างเปล่า.

หวัดดีชาวโลก!

index.php | อินเตอร์เฟซผู้ใช้ (ฝั่งไคลเอ็นต์)
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>
    <หัว>
    <ชื่อเรื่อง>หวัดดีชาวโลก! Jquery Mobile</ชื่อเรื่อง>
    <ชื่อเมตา="viewport" เนื้อหา="width=device-width, ขนาดเริ่มต้น = 1"> 
    <การเชื่อมโยง rel="stylesheet" ความนี้="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <การใช้สคริปต์="http://code.jquery.com/jquery-1.6.4.min.js"></สคริปต์>
    <การใช้สคริปต์="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></สคริปต์>   
    <สคริปต์>
        $(ฟังก์ชัน() { 
            $("#bt-enviar").คลิก(ฟังก์ชัน() {
                $.อาแจ็กซ์({
                  ชนิด: "POST",
                  url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  วัน: ({ชื่อ: $.ตัดแต่ง($("#nome").val()) }),
                  ชนิดข้อมูล: "text",
                  ประสบความสำเร็จ: ฟังก์ชัน(วัน) {
                    $("#nome").val("");
                    $("#resultado").HTML(วัน);
                  }
                });
            });
        });
    </สคริปต์>     
</หัว>
<ร่างกาย> 
    <ข้อมูลใน div-บทบาท="page" รหัส="indexPage">
        <ข้อมูลใน div-บทบาท="header">
            <h1>เหนื่อย Olá - Jquery Mobile</h1>
        </div>
        <ข้อมูลใน div-บทบาท="content">
            <ข้อมูลใน div-บทบาท="fieldcontain">
                <ป้ายชื่อ มี="nome">โนม Informe seu:</ป้ายชื่อ>
                <ชนิดค่านำเข้า="text" รหัส="nome" ชื่อ="nome" ค่า="" />
            </div>
            <ป้อนข้อมูลรหัส="bt-enviar" ชนิด="button" ค่า="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</ร่างกาย>
</HTML>
?>
olamundo.php | โค้ด PHP ของคุณ (ฝั่งเซิร์ฟเวอร์)
1
2
3
 
  <?PHP หัวข้อ("Content-Type: ข้อ ความ/html;  charset = iso-8859-1",จริง) ?>
  <H3>สวัสดี <?PHP เสียงก้อง $_โพสต์['ชื่อ'] ? $_โพสต์['ชื่อ'] : "Mundo" ?>!</H3>

ผลที่ได้คืออะไร:


ดูการทำงานของรหัสนี้!

เรื่องใหญ่ของ JQuery Mobile อยู่ในแท็ก meta “ช่องมุมมอง”, ที่พารามิเตอร์ “อุปกรณ์ความกว้าง =ความกว้าง” ปรับขนาดเนื้อหาโดยอัตโนมัติเป็นหน้าจอของอุปกรณ์เคลื่อนที่กำลังเข้าถึง. วิธีนี้, การนำเสนอการเข้าถึงเดสก์ท็อปจะแตกต่างจากโทรศัพท์มือถือ.

คุณสามารถใช้โปรแกรมจำลองเพื่อให้ เห็นภาพวิธีการทำงานของเพจของคุณ และปรากฏในโทรศัพท์มือถือ, แท็บเล็ต, ฯลฯ, เท่าที่เห็นในรูปข้างต้น. ในกรณีของ Chrome, เพียงแค่ติดตั้งชนิดของนามสกุล “จำลองการกระเพื่อม” และใช้เป็นเครื่องมือทดสอบ. มีหลายวิธีแก้ไขที่คล้ายกัน.

เหลือจะต้องการและความคิดสร้างสรรค์ของคุณ…

จำนวนผู้เข้าชม: 64866

11 comentários sobre “เขียนโปรแกรม PHP สำหรับโทรศัพท์มือถือและแท็บเล็ต ด้วย JQuery Mobile

  1. Fábio กล่าวว่า:

    สวัสดี, ขอแสดงความยินดีสำหรับการโพสต์. อยากจะให้ชี้แจงข้อสงสัยเนื้อหาของเขา(ถ้าคุณสามารถช่วยฉัน ขอบคุณ). อยากจะทำแบบสอบถามอย่างง่ายใน PHP ใน และจากนั้น แสดงบนหน้าจอ ของผู้ใช้ที่ลงทะเบียน หรือไม่ได้อยู่ ในธนาคารโดยใช้ jquery มือถือ. คุณรู้วิธีสามารถทำที่? ขอบคุณสำหรับความสนใจ.

    • สวัสดี Fabio. ใช่, ฉันรู้วิธีการทำ, แต่ต้องรู้ว่าบิตของการเขียนโปรแกรมเพื่อทำความเข้าใจคำอธิบาย. หลักการจะเหมือนกับที่ใช้ในตัวอย่าง “olamundo.php”; ความแตกต่างคือ คุณต้องทำการเชื่อมต่อกับฐานข้อมูล, ได้รับผลลัพธ์ต้องการ (ตั้งค่า SQL ของคุณ) และแสดง. กอด!

      • สูงสุด กล่าวว่า:

        สวัสดี เทย์เลอร์, คุณจะมีหลักสูตรเต็มรูปแบบของการเขียนโปรแกรม PHP สำหรับโทรศัพท์มือถือและแท็บเล็ตกับ JQuery Mobile. พิมพ์มี CRUD.

        ตัวอย่างระบบปฏิทินที่ผมแสดงรายการหลักสูตรที่มา จากฐานข้อมูล และ เมื่อคุณคลิกในหลักสูตรหลักสูตร อาจเห็นข้อมูลท่องเที่ยวทั้งหมด.

      • สวัสดี สูงสุด. ไม่มีหลักสูตรนี้ :( ตัวอย่างในกระทู้นี้อยู่แล้วใกล้กับสิ่งที่คุณต้อง, คุณเพียงแค่ต้องทำงาน ร้องขอ (ส่ง ฟอร์ม/ข้อมูล/html โดย Ajax) และการ การตอบสนอง (ข้อมูลกลับประมวลผล php / / เซิร์ฟเวอร์ sql). อินเทอร์เน็ตมีหลายตัวอย่างของ CRUD ใน PHP.

        ถ้าวันนี้คุณไปทำอะไรสำหรับมือถือ, จะใช้การ ผมไอออน.

    • รหัสอยู่บน HTML, CSS และจาวาสคริปต์. ดังนั้น, ตัวเบราว์เซอร์เอง (IE, Firefox, โครเมี่ยม) อุปกรณ์ของคุณ (โทรศัพท์มือถือ, แท็บเล็ต, โน๊ตบุ๊ค) ดูแลล่าม. คุณไม่จำเป็นต้องติดตั้งซอฟต์แวร์ใด ๆ. ฝั่งไคลเอ็นต์, ใส่รหัสลงในแฟ้มข้อความ (แผ่นจดบันทึก, ตัวอย่างเช่น) และบันทึกเป็นนามสกุลของไฟล์ html. ฝั่งเซิร์ฟเวอร์, การจัดการข้อมูล, จะมีการใช้ภาษาการเขียนโปรแกรม, เป็น PHP, Java, ASP, .สุทธิ, ฯลฯ.

  2. ราฟาเอล Augusto กล่าวว่า:

    สวัสดี,

    ครั้งแรก, ขอแสดงความยินดีสำหรับบทความ.

    เพื่อให้สามารถพัฒนาทั้งหุ่นยนต์ และ IOS โดยใช้ Jquery Mobile และ Phonegap และสามารถใช้ PHP และ MYSQL เพื่อเชื่อมต่อไปยังเซิร์ฟเวอร์?

    • ราตรีสวัสดิ์, ใช่มันเป็นไปได้ค่อนข้าง. Phonegap คุณสร้างโปรแกรมประยุกต์ของคุณใน html/js (ฝั่งไคลเอ็นต์) และเธอจะไปรันบน Android, iOS, การเข้าถึงทรัพยากรด้านเซิร์ฟเวอร์ (PHP และ MySQL), ผ่าน Ajax.

  3. ม.ค. กล่าวว่า:

    มีเป็นโปรแกรมตัวอย่างที่ว่า คุณได้ติดตั้งบน google เล่น ? หรือแค่ล้อ, การเข้าถึงโดยตรงในเว็บเบราว์เซอร์ ?

    • ใช่, คุณทำงานกับ HTML ของคุณ, CSS และ Javascript แล้วการใช้โปรแกรมเช่น Phonegap การสร้างโปรแกรมประยุกต์ (เกือบ) ชาวพื้นเมืองสำหรับแพลตฟอร์ม Android และ iOS. แล้ว มันคือ Google Play (หุ่นยนต์). โปรแกรมประยุกต์ของคุณจะสามารถสื่อสารกับ PHP ของคุณตามปกติทำ Ajax ร้องขอ, ดังตัวอย่าง.

ทิ้งคำตอบไว้

อีเมลของคุณจะไม่ถูกเผยแพร่. ฟิลด์ต้องมีเครื่องหมาย *