Programación PHP para móbiles e tabletas con JQuery Mobile

Imaxina usa o PHP para desenvolver as súas aplicacións para rodar en dispositivos móbiles. Con JQuery Mobile crea interfaces que interactúan co servidor web a través de Ajax.


Presentación

Non é ningunha máxica! O que se fai é o de sempre: usan HTML para montar as pantallas e Javascript (Ajax) para facer peticións ao servidor web, onde están os códigos fontes PHP que han recibir, procesar e voltar a información. E para isto, podemos contar co conxunto de facilidades que o JQuery nos posibilita.

jQuery Mobile

jQuery Mobile é un framework web optimizado para smartphones e tabletas. Trátase de un sistema de interfaces baseado en HTML5 compatible coas plataformas máis populares de dispositivos móbiles. Construído sobre o jQuery e jQuery UI, seu código permite un deseño flexible, facilmente personalizable.

na práctica

Imos facer un exemplo simple, en que temos unha interface cun campo texto ao usuario introducir o seu “nome”. Premendo no botón “Enviar”, o formulario é enviado ao servidor (vía Ajax), que exhibe a mensaxe “Ola nomeDoUsuario!” ou “Ola Mundo!”, O campo nome está baleiro.

Ola Mundo!

index.php | UI (do lado do cliente)
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
<!html DOCTYPE>
<html>
    <cabeza>
    <título>Ola Mundo! jQuery Mobile</título>
    <meta name="viewport" contido="width=device-width, inicio escala = 1"> 
    <ligazón rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <src guión="http://code.jquery.com/jquery-1.6.4.min.js"></escrita>
    <src guión="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></escrita>   
    <escrita>
        $(función() { 
            $("#bt-enviar").clic(función() {
                $.Ajax({
                  tipo: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  datos: ({nome: $.aparar($("#nome").Val()) }),
                  dataType: "text",
                  éxito: función(datos) {
                    $("#nome").Val("");
                    $("#resultado").html(datos);
                  }
                });
            });
        });
    </escrita>     
</cabeza>
<corpo> 
    <datos div-papel="page" ID="indexPage">
        <datos div-papel="header">
            <H1>Ola mundo - jQuery Mobile</H1>
        </div>
        <datos div-papel="content">
            <datos div-papel="fieldcontain">
                <etiqueta para="nome">Informe o seu nome:</etiqueta>
                <tipo de entrada="text" ID="nome" nome="nome" valor="" />
            </div>
            <ID de entrada="bt-enviar" tipo="button" valor="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</corpo>
</html>
?>
olamundo.php | Seu código PHP (server-side)
1
2
3
 
  <?php cabeceira("Content-Type: text / html;  charset = ISO-8859-1",verdadeiro) ?>
  <h3>Ola <?php eco $_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, onde o parâmetro width=device-width redimensiona automaticamente o contido segundo a pantalla do dispositivo móbil que está accedendo. deste xeito, presentación ao acceder dun escritorio é diferente dun móbil.

Pode utilizar un emulador para ver mellor a forma que a súa páxina compórtase e aparece nun móbil, comprimido, etc, como ver na figura anterior. No caso de Chrome, Só ten que instalar unha extensión tipo “emulador Ripple” e usala como ferramenta de proba. Existen varias solucións semellantes.

O resto vai da súa necesidade e creatividade…

Total de accesos: 64871

11 Comentarios sobre “Programación PHP para móbiles e tabletas con JQuery Mobile

  1. Fábio dixo:

    Bos días, Parabéns polo post. Quere aproveitar o contido del para sacar unha dúbida(se poida me axudar fico grata). Quere facer unha simple consulta na base en PHP e logo amosar na pantalla do usuario se rexistrou ou non na base utilizando jQuery Mobile. Saben como podo facer iso? Grato pola atención.

    • Ola Fábio. Si, sei como facer, pero hai que saber un pouco de programación para que entenda a explicación. O principio é o mesmo que utilicei o exemplo “olamundo.php”; a diferenza é que deberá facer a conexión coa base de datos, buscar o resultado desexado (montar a súa SQL) e amosar-lo. abrazos!

      • Max dixo:

        Ola Taylor, tería un curso completo de Programación PHP para móbiles e tabletas con JQuery Mobile. Tipo un CRUD.

        Un exemplo dun sistema de axenda de cursos onde me mostrase un lista de cursos está na base de datos e ao facer clic no curso eu puidese ver toda a información do Curso.

      • Ola Max. Non teño ese curso :( O exemplo deste post xa é ben próximo ao que necesita, Só ten que traballar as solicitude (envío de datos / html / form polo Ajax) e como resposta (retorno de datos procesados ​​PHP / SQL / servidor). En Internet ten moitos exemplos de CRUD en PHP.

        Hoxe o seu fose facer algo para Mobile, usaría o iónico.

    • O código está baseado en HTML, CSS e JavaScript. Polo tanto, o propio navegador (IE, Firefox, cromo) do dispositivo (móbil, comprimido, caderno) encárgase de interpretar. Non é preciso instalar ningún programa. Do lado cliente, introduza o código nun arquivo de texto calquera (bloque de notas, por exemplo) e salva-o como extensión .html. Á servidor, para manipular os datos, Terá que usar unha linguaxe de programación, como PHP, java, áspide, .Rede, etc.

  2. Rafael Augusto dixo:

    boa tarde,

    primeiramente, Parabéns polo artigo.

    Entón é posible desenvolver apps tanto para Android como para iOS usando jQuery Mobile e Phonegap e tamén é posíbel usar o PHP e MySQL para conexión co servidor?

    • Si, fai a súa aplicación con HTML, CSS e Javascript e despois usa programas como PhoneGap para xerar aplicacións (case) nativos para plataformas como Android e iOS. De aí é só subir a Google Play (androide). Súa aplicación vai conseguir comunicarse co seu PHP normalmente facendo peticións Ajax, como no exemplo.

Deixe unha resposta

O seu enderezo de correo-e non será publicado. Os campos obrigatorios están marcados con *