برمجة بي إتش بي للهواتف المحمولة وأقراص مع الجوال مسج

تخيل يمكنك استخدام بي إتش بي لتطوير التطبيقات الخاصة بهم لتشغيلها على الأجهزة النقالة. مسج موبايل لك إنشاء الواجهات التي تتفاعل مع ملقم ويب عن طريق Ajax.


العرض التقديمي

Não é nenhuma mágica! ما هو المعتاد: usamos HTML para montar as telas e Javascript (Ajax) para fazer requisições ao servidor Web, onde estão os códigos-fontes PHP que irão receber, processar e retornar as informações. E para isto, podemos contar com o conjunto de facilidades que o JQuery nos possibilita.

jQuery Mobile

jQuery Mobile é um Framework Web otimizado para smartphones e tablets. Trata-se de um sistema de interfaces baseado em HTML5 compatível com as plataformas mais populares de dispositivos móveis. Construído sobre o jQuery e jQuery UI, seu código permite um design flexível, facilmente personalizável.

في الممارسة العملية

Vamos fazer um exemplo simples, em que temos uma interface com um campo texto para o usuário inserir seunome”. Ao clicar no botãoEnviar”, o formulário é enviado para o servidor (via Ajax), que exibe a mensagemOlá nomeDoUsuario!” أو “Olá Mundo!”, se o campo nome estiver vazio.

Olá Mundo!

index.php | Interface do usuário (client-side)
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
<?بي إتش بي
<!DOCTYPE html>
<إتش تي أم ال>
    <رئيس>
    <العنوان>Olá Mundo! JQuery Mobile</العنوان>
    <meta name="viewport" المحتوى="width=device-width, initial-scale=1"> 
    <link 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").click(الدالة() {
                $.ajax({
                  نوع: "POST",
                  url: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  تاريخ: ({nome: $.trim($("#nome").val()) }),
                  dataType: "text",
                  success: الدالة(تاريخ) {
                    $("#nome").val("");
                    $("#resultado").إتش تي أم ال(تاريخ);
                  }
                });
            });
        });
    </البرنامج النصي>     
</رئيس>
<الهيئة> 
    <div data-role="page" معرف="indexPage">
        <div data-role="header">
            <h1>Olá mundo - JQuery Mobile</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label هو="nome">Informe seu nome:</label>
                <نوع الإدخال="text" معرف="nome" الاسم="nome" القيمة="" />
            </div>
            <معرف الإدخال="bt-enviar" نوع="button" القيمة="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</الهيئة>
</إتش تي أم ال>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?بي إتش بي رأس("Content-Type: نص/html;  charset = إيزو-8859-1",صحيح) ?>
  <h3>مرحبا <?بي إتش بي صدى $_ وظيفة['nome'] ? $_ وظيفة['nome'] : "Mundo" ?>!</h3>

O resultado é algo do tipo:


Veja este código funcionando!

A grande sacada do JQuery Mobile está na meta-tag viewport, onde o parâmetro width=device-width redimensiona automaticamente o conteúdo conforme a tela do dispositivo móvel que está acessando. Deste modo, a apresentação ao acessar de um Desktop é diferente de um celular.

Você pode utilizar um emulador para visualizar melhor a forma com que sua página se comporta e aparece em um celular, tablet, إلخ, como visto na figura acima. No caso do Chrome, basta instalar uma extensão tipo Ripple Emulator e usá-la como ferramenta de teste. Existem várias soluções semelhantes.

O resto vai de sua necessidade e criatividade

إجمالي عدد مرات الدخول: 34321

11 تعليقات على “برمجة بي إتش بي للهواتف المحمولة وأقراص مع الجوال مسج

  1. Fábio وقال أن:

    صباح الخير, تهانينا لهذا المنصب. Gostaria de aproveitar o conteúdo dele para tirar uma dúvida(se você puder me ajudar fico grato). Gostaria de fazer uma simples consulta no banco em PHP e em seguida mostrar na tela de o usuário esta cadastrado ou não no banco utilizando jquery mobile. Sabem como posso fazer isso? Grato pela atenção.

    • Olá Fábio. نعم, sei como fazer, mas é preciso saber um pouco de programação para que entenda a explicação. O princípio é o mesmo que utilizei no exemploolamundo.php”; a diferença é que você deverá fazer a conexão com o banco de dados, buscar o resultado pretendido (montar sua SQL) e exibi-lo. العناق!

      • ماكس وقال أن:

        مرحبا تايلور, سيكون لديك دورة كاملة من "برمجة بي إتش بي" للهواتف المحمولة وأقراص مع الجوال مسج. اكتب الخام.

        Um exemplo um sistema de agenda de cursos onde me mostrasse um lista de cursos vindo do banco de dados e ao clicar no curso eu pudesse ver todas as informações do Curso.

      • مرحبا ماكس. ليس لدى هذا بالطبع :( المثال في هذا المنصب فعلا قريب جداً ما تحتاج إليه, você só precisa trabalhar as request (إرسال نموذج/البيانات/إتش تي أم ال عن طريق Ajax) وأن response (إرجاع البيانات المجهزة بي/مزود). Na Internet tem muitos exemplos de CRUD em PHP.

        Hoje se seu fosse fazer algo para Mobile, usaria o Ionic.

    • O código é baseado em HTML, CSS e JavaScript. حتى, o próprio navegador (IE, Firefox, Chrome) do seu dispositivo (الهاتف الخليوي, tablet, notebook) se encarrega de interpretar. Não é preciso instalar nenhum software. Do lado cliente, coloque o código em um arquivo texto qualquer (bloco de notas, على سبيل المثال) e salve-o como extensão .html. Do lado servidor, para manipular os dados, terá que usar uma linguagem de programação, como PHP, جافا, Asp, .Net, إلخ.

  2. 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?

اترك ردًا

عنوان البريد الإلكتروني الخاص بك لن ينشر. يتم وضع علامة الحقول المطلوبة مع *