PHP תכנות טלפונים ניידים, טבליות עם JQuery Mobile

תאר לעצמך שאתה משתמש PHP כדי לפתח את היישומים שלהם לפעול על מכשירים ניידים. עם JQuery Mobile יצירת ממשקים המקיימים אינטראקציה עם שרת האינטרנט באמצעות Ajax.


מצגת

. זה לא קסם! מה שאתה עושה הוא הרגיל: אנו משתמשים ב-HTML כדי לטעון את המסכים ואת Javascript (Ajax) כדי לבצע בקשות לשרת האינטרנט, היכן נמצאים קודי המקור של PHP שיקבלו, לעבד ולהחזיר את המידע. ובשביל זה, נוכל לסמוך על קבוצת המתקנים שJQuery מאפשרת לנו ל.

JQuery Mobile

jQuery Mobile היא מסגרת אינטרנט אופטימיזציה עבור טלפונים חכמים טבליות. זוהי ממשק מבוסס HTML5 תואם פלטפורמות ניידות הפופולרי ביותר. בנוי על jQuery ו jQuery ממשק, הקוד מאפשר עיצוב גמיש, ניתן להתאמה אישית בקלות.

בפועל

בואו נעשה דוגמא פשוטה, שבו יש לנו ממשק עם שדה טקסט כדי שהמשתמש ייכנס “שם”. על-ידי לחיצה על ה “שלוח”, הטופס נשלח לשרת (דרך אייאקס), המציגה את ההודעה “שלום נמאדאוסריו!” או “שלום לך עולם!”, אם שדה השם ריק.

שלום לך עולם!

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" Href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <קובץ src="http://code.jquery.com/jquery-1.6.4.min.js"></תסריט>
    <קובץ src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></תסריט>   
    <תסריט>
        $(פונקציה() { 
            $("#bt-enviar").לחץ על(פונקציה() {
                $.Ajax({
                  סוג: "POST",
                  Url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  תאריך: ({שם: $.קצץ($("#nome").ואל()) }),
                  סוג נתונים: "text",
                  הצלחה: פונקציה(תאריך) {
                    $("#nome").ואל("");
                    $("#resultado").Html(תאריך);
                  }
                });
            });
        });
    </תסריט>     
</ראש>
<הגוף> 
    <תאריך div-תפקיד="page" מזהה="indexPage">
        <תאריך div-תפקיד="header">
            <H1>שלום לך עולם - JQuery Mobile</H1>
        </Div>
        <תאריך div-תפקיד="content">
            <תאריך div-תפקיד="fieldcontain">
                <תווית הוא="nome">הכנס את שמך:</תווית>
                <סוג הקלט="text" מזהה="nome" שם="nome" ערך="" />
            </Div>
            <מזהה קלט="bt-enviar" סוג="button" ערך="Enviar" />
            <מזהה div="resultado"></Div>
        </Div>
    </Div> 
</הגוף>
</Html>
?>
מיכל בלגון | קוד ה-PHP שלך (צד-שרת)
1
2
3
 
  <?PHP כותרת("Content-Type: טקסט/html;  קידוד = ISO-8859-1",נכון) ?>
  <H3>שלום <?PHP אקו $_POST[שם] ? $_POST[שם] : "Mundo" ?>!</H3>

התוצאה היא משהו כמו:


ראה קוד זה עובד!

המרפסת הגדולה של JQuery Mobile נמצאת במטה-תג “אשנב”, כאשר הפרמטר “רוחב = רוחב התקן” משנה באופן אוטומטי את גודל התוכן בהתאם למסך של המכשיר הנייד אליו אתה ניגש. בדרך זו,, המצגת בעת גישה לשולחן עבודה שונה מטלפון נייד.

באפשרותך להשתמש באמולטור כדי להמחיש טוב יותר כיצד העמוד מתנהג ומופיע בטלפון נייד, לוח, ועוד, כפי שנראה באיור שלעיל. במקרה של Chrome, פשוט להתקין סיומת סוג “ריפל אמולטור” ולהשתמש בו ככלי בדיקה. ישנם מספר פתרונות דומים.

השאר עובר מתוך הצורך והיצירתיות שלך…

סה כ כניסות: 64866

11 הערות על “PHP תכנות טלפונים ניידים, טבליות עם JQuery Mobile

  1. פאביו אמר:

    בוקר טוב, ברכות על הפוסט. אני רוצה לנצל את התוכן שלו כדי לשאול שאלה(אם אתה יכול לעזור לי אני אסיר תודה). אני רוצה לעשות שאילתה פשוטה בבנק ב-PHP ולאחר מכן להראות על המסך של המשתמש רשום או לא בבנק באמצעות jquery ניידים. . אתה יודע איך אני יכול לעשות את זה? . אסירת תודה על תשומת הלב.

    • שלום פאביו. כן, יודע איך לעשות, אבל אתה צריך לדעת קצת תכנות כך שאתה מבין את ההסבר. העיקרון הוא כמו שאני השתמשתי בדוגמה “מיכל בלגון”; ההבדל הוא שעליך לבצע את החיבור למסד הנתונים, חפש את התוצאה הרצויה (לבנות את ה-SQL שלך) ולהציגו. חיבוקים!

      • מקס אמר:

        שלום טיילור, יהיה לך קורס מלאה לתיכנות php לטלפונים ניידים וטבליות עם JQuery Mobile. הקלד את הטקסט.

        דוגמה מערכת לוח זמנים שבו יכולתי לראות רשימה של קורסים המגיעים ממסד הנתונים ועל ידי לחיצה על הקורס אני יכול לראות את כל מידע הקורס.

      • . היי מקס. . אין לי את הקורס הזה :( הדוגמה בפוסט הזה הוא כבר קרוב מאוד מה שאתה צריך, אתה רק צריך לעבוד את ה קשה (שליחת נתונים/html/טופס על-ידי אייאקס) וה תגובה (נתונים להחזיר מעובד php / / שרת sql). באינטרנט יש דוגמאות רבות של הגועל ב PHP.

        היום, אם היית עושה משהו לנייד, ישתמש ב יונית.

    • הקוד מבוסס-HTML, CSS ו-JavaScript. אז, הדפדפן עצמו (כלומר, לפיירפוקס, כרום) מהמכשיר שלך (טלפון סלולארי, לוח, מחברת) דואג לתרגם. אין צורך בתוכנה. בצד הלקוח, לשים את הקוד בכל קובץ טקסט (פנקס רשימות, לדוגמה) ושמור אותו כהרחבה. html. בצד השרת, כדי לטפל בנתונים, יהיה עליך להשתמש בשפת תיכנות, כמו PHP, Java, Asp, .רשת, ועוד.

  2. רפאל אוגוסטו אמר:

    אחה"צ טובים,

    ראשון, ברכות על המאמר.

    אז אפשר לפתח אפליקציות הן אנדרואיד ו-iOS באמצעות Jquery Mobile ו-טלפון, גם וניתן להשתמש ב PHP ו-MYSQL כדי להתחבר לשרת?

    • לילה טוב, . כן, זה בהחלט אפשרי. באמצעות היישום הפונטי, אתה יוצר את האפליקציה שלך ב-html/js (צד הלקוח) וזה יפעל על אנדרואיד iOS, גישה למשאבים בצד השרת (PHP ו-MySQL), דרך אייאקס.

    • כן, אתה מבצע את הבקשה שלך עם HTML, CSS ו-Javascript ולאחר מכן משתמש בתוכניות כגון פונגאפ להפקת יישומים (. כמעט) יליד פלטפורמות כגון אנדרואיד ו-iOS. ואז פשוט להעלות ל-Google Play (אנדרואיד). היישום שלך יהיה מסוגל לתקשר עם ה-PHP שלך בדרך כלל על ידי ביצוע בקשות Ajax, כמו בדוגמה.

תשאיר הודעה

כתובת הדוא ל שלך לא יפורסם. שדות חובה מסומנים *