PHP праграмаванне для тэлефонаў і планшэтаў з JQuery Mobile

Уявіце, што вы выкарыстоўваеце PHP для распрацоўкі прыкладанняў для працы на мабільных прыладах. З JQuery Mobile вы ствараеце інтэрфейсы, якія ўзаемадзейнічаюць з вэб-серверам праз Ajax.


Прэзентацыя

Гэта не магія! Што вы робіце, гэта звычайнае: мы выкарыстоўваем HTML для зборкі экранаў і Javascript (Аякс) рабіць запыты на вэб-сервер, дзе крыніцы PHP, якія будуць атрымліваць, апрацаваць і вярнуць інфармацыю. І дзеля гэтага, мы можам разлічваць на набор магчымасцей, якія нам дазваляе JQuery.

jQuery Mobile

jQuery Mobile - гэта вэб-структура, аптымізаваная для смартфонаў і планшэтаў. Гэта сістэма інтэрфейсаў на аснове HTML5, сумяшчальная з самымі папулярнымі платформамі мабільных прылад. Пабудавана на jQuery і jQuery UI, яго код дазваляе гнуткі дызайн, лёгка наладжваецца.

На практыцы

Зробім просты прыклад, дзе ў нас ёсць інтэрфейс з тэкставым полем, каб карыстальнік мог яго ўставіць “імя”. Націснуўшы на кнопку “Адправіць”, форма адпраўляецца на сервер (праз Ajax), які адлюстроўвае паведамленне “Прывітанне імя карыстальніка!” або “Прывітанне Сусвет!”, калі поле імя пустое.

Прывітанне Сусвет!

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"> 
    <спасылка адн="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").націсніце(функцыя() {
                $.аякс({
                  тып: "POST",
                  url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  дадзеныя: ({імя: $.абрэзаць($("#nome").вал()) }),
                  dataType: "text",
                  поспех: функцыя(дадзеныя) {
                    $("#nome").вал("");
                    $("#resultado").HTML(дадзеныя);
                  }
                });
            });
        });
    </сцэнар>     
</галава>
<цела> 
    <дадзеныя div-ролю="page" ідэнтыфікатар="indexPage">
        <дадзеныя div-ролю="header">
            <h1>Прывітанне Сусвет - JQuery Mobile</h1>
        </дзіў>
        <дадзеныя div-ролю="content">
            <дадзеныя div-ролю="fieldcontain">
                <этыкетка для="nome">Увядзіце імя:</этыкетка>
                <тып уводу="text" ідэнтыфікатар="nome" імя="nome" значэнне="" />
            </дзіў>
            <ўваходны ідэнтыфікатар="bt-enviar" тып="button" значэнне="Enviar" />
            <дзіў ідэнтыфікатар="resultado"></дзіў>
        </дзіў>
    </дзіў> 
</цела>
</HTML>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?PHP header("Content-Type: text/html;  charset=ISO-8859-1",праўда) ?>
  <h3>прывітанне <?PHP рэха $_POST['nome'] ? $_POST['nome'] : "Mundo" ?>!</h3>

O resultado é algo do tipo:


Veja este código funcionando!

A grande sacada do JQuery Mobile está na meta-tag viewport, дзе параметр “шырыня = шырыня прылады” аўтаматычна змяняе памер змесціва ў адпаведнасці з экранам мабільнай прылады, да якой вы атрымліваеце доступ. Такім чынам, прэзентацыя пры звароце з працоўнага стала адрозніваецца ад сотавага тэлефона.

Вы можаце выкарыстоўваць эмулятар, каб лепш візуалізаваць тое, як ваша старонка паводзіць сябе і адлюстроўваецца на мабільным тэлефоне, планшэт, і г.д., як відаць на малюнку вышэй. Няма Caso рабіць Chrome, проста ўсталюйце тып пашырэння “Пульсацыя эмулятар” і выкарыстоўваць яго ў якасці інструмента тэсціравання. Ёсць некалькі падобных рашэнняў.

Астатняе ідзе ад вашай патрэбы і творчасці…

Усяго доступы: 64866

11 водгукі “PHP праграмаванне для тэлефонаў і планшэтаў з JQuery Mobile

  1. Фабіё сказаў:

    добрае раніца, віншаванні паведамленне. Я хацеў бы скарыстацца яго зместам, каб адказаць на пытанне(калі вы можаце мне дапамагчы, я ўдзячны). Я хацеў бы зрабіць просты запыт у банку ў PHP, а потым паказаць на экране, ці зарэгістраваны карыстальнік у банку з дапамогай jquery mobile. Вы ведаеце, як я магу гэта зрабіць? Удзячны за ўвагу.

    • Прывітанне Фабіё. сім, Я ведаю, як гэта зрабіць, але вы павінны ведаць трохі праграмавання, каб зразумець тлумачэнне. Прынцып той самы, што я выкарыстаў у прыкладзе “olamundo.php”; розніца ў тым, што вы павінны падключыцца да базы дадзеных, атрымаць жаданы вынік (змантаваць SQL) і адлюстраваць яго. абдымкаў!

      • Макс сказаў:

        прывітанне Тэйлар, у вас будзе поўны курс праграмавання PHP для тэлефонаў і планшэтаў з JQuery Mobile. Як ЦЯРДЫ.

        Прыкладам можа служыць сістэма раскладу курсаў, дзе я паказваў бы спіс курсаў, якія паступаюць з базы дадзеных, і калі я націскаў на курс, я мог бачыць усю інфармацыю аб курсах.

      • Прывітанне Макс. У мяне ёсць гэты курс :( Прыклад у гэтым пасце ўжо вельмі блізка да таго, што трэба, вам проста трэба папрацаваць запыт (адпраўка даных / HTML / формы для Ajax) і як адказ (Дадзеныя апрацоўваюцца вяртанне PHP / SQL / сервер). У Інтэрнэце ёсць шмат прыкладаў CRUD у PHP.

        Сёння, калі б твае рабілі нешта для мабільных прылад, будзе выкарыстоўваць Іянічны.

  2. У якое праграмнае забеспячэнне будзе ўстаўлены зыходны код, каб наша праграма “Прывітанне Сусвет” і столькі іншых праходзіць бегчы??

    • Код заснаваны на HTML, CSS і JavaScript. таму, сам аглядальнік (IE, Firefox, Хром) вашай прылады (мабільны тэлефон, планшэт, сшытак) клапоціцца пра пераклад. Няма праграмнага забеспячэння для ўстаноўкі. Кліенцкі бок, змясціць код у любы тэкставы файл (Нататнік, напрыклад) і захавайце яго як пашырэнне .html. З боку сервера, para manipular os dados, terá que usar uma linguagem de programação, como PHP, ява, Asp, .Net, і г.д..

  3. Rafael Augusto сказаў:

    добрый день,

    Primeiramente, Parabéns pelo artigo.

    Então e possível desenvolver apps tanto para android quanto para IOS usando o Jquery Mobile e Phonegap e também e possível usar o PHP e MYSQL para conexão com o servidor?

    • сім, você faz sua aplicação com HTML, CSS e Javascript e depois usa programas como o PhoneGap para gerar aplicativos (quase) nativos para plataformas como Android e iOS. Daí é só subir para o Google Play (Android). Seu aplicativo vai conseguir se comunicar com seu PHP normalmente fazendo requisições Ajax, як апісана ў прыкладзе.

пакінуць каментар

Ваш электронны адрас не будзе апублікаваны. Абавязковыя для запаўнення палі пазначаныя *