Programación PHP para teléfonos móviles y tabletas con JQuery Mobile

Imagine que utilizar PHP para desarrollar sus aplicaciones para ejecutar en dispositivos móviles. Con JQuery Mobile crear interfaces que interactúan con el servidor Web a través de Ajax.


Presentación

No hay ninguna magia! Qué es el habitual: utilizar HTML para colocar la lona y Javascript (AJAX) para hacer peticiones al servidor Web, Dónde están las fuentes PHP que recibirá, procesar y devolver la información. Y para esto, Podemos contar con el conjunto de características que JQuery nos permite.

jQuery Mobile

jQuery Mobile es un Framework Web optimizado para smartphones y tablets. Es un sistema basado en HTML5 interfaces compatibles con las plataformas de dispositivos móviles más populares. Construido en el jQuery y jQuery UI, el código permite un diseño flexible, fácilmente personalizable.

En la práctica

Tomemos un ejemplo simple, Tenemos una interfaz con un campo de texto para el usuario que introduzca su “nombre”. Haciendo clic en el botón “Enviar”, el formulario es enviado al servidor (vía Ajax), muestra el mensaje “Hola nomeDoUsuario!” o “Hola mundo!”, Si el campo nombre está vacío.

Hola mundo!

index.php | Interfaz de usuario (lado del 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>Hola mundo! JQuery Mobile</Título>
    <nombre de la meta="viewport" contenido="width=device-width, escala inicial = 1"> 
    <enlace REL="stylesheet" href="http://Code.jQuery.com/Mobile/1.1.0/jQuery.Mobile-1.1.0.min.CSS" />
    <script src="http://Code.jQuery.com/jQuery-1.6.4.min.js"></secuencia de comandos>
    <script src="http://Code.jQuery.com/Mobile/1.1.0/jQuery.Mobile-1.1.0.min.js"></secuencia de comandos>   
    <secuencia de comandos>
        $(función() { 
            $("#bt-enviar").Haga clic en(función() {
                $.AJAX({
                  tipo: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  fecha: ({nombre: $.recortar($("#nome").Val()) }),
                  tipo de datos: "text",
                  éxito: función(fecha) {
                    $("#nome").Val("");
                    $("#resultado").HTML(fecha);
                  }
                });
            });
        });
    </secuencia de comandos>     
</cabeza>
<cuerpo> 
    <datos de div-papel="page" ID="indexPage">
        <datos de div-papel="header">
            <H1>Hola mundo - JQuery Mobile</H1>
        </div>
        <datos de div-papel="content">
            <datos de div-papel="fieldcontain">
                <etiqueta es="nome">Informe seu nome:</etiqueta>
                <tipo de entrada="text" ID="nome" nombre="nome" valor="" />
            </div>
            <id de entrada="bt-enviar" tipo="button" valor="Enviar" />
            <id de la div="resultado"></div>
        </div>
    </div> 
</cuerpo>
</HTML>
?>
olamundo.php | Seu código PHP (lado del servidor)
1
2
3
 
  <?PHP cabecera("Content-Type: texto/html;  charset = ISO-8859-1",VERDADERO) ?>
  <H3>Hola <?PHP echo $_ EL POST['nombre'] ? $_ EL POST['nombre'] : "Mundo" ?>!</H3>

El resultado es algo:


Ver este trabajo de código!

Es el gran problema de JQuery Mobile en el meta-tag “punto de visión”, donde el parámetro “dispositivo-ancho = ancho” Redimensiona automáticamente el contenido que la pantalla del dispositivo móvil que está accediendo a. De esta manera, la presentación por el acceso a una computadora de escritorio es diferente de un teléfono celular.

Puede utilizar un emulador para visualizar mejor cómo su página se comporta y aparece en un teléfono celular, Tablet, etcetera, como se ve en la figura anterior. En el caso de cromo, sólo tiene que instalar a un tipo de extensión “Emulador de la ondulación” y utilizarlo como una herramienta de prueba. Hay varias soluciones similares.

El resto va a su necesidad y creatividad…

Total hits: 64866

11 Comentarios sobre “Programación PHP para teléfonos móviles y tabletas con JQuery Mobile

  1. Fábio dijo:

    Buenos días, Felicitaciones por el post. Me gustaría tomar su contenido para aclarar una duda(Si me puedes ayudar gracias). Me gustaría hacer una consulta simple en PHP en y luego mostrar en la pantalla del usuario registrado o no en el Banco utilizando jquery mobile. Sabes como puedo hacer? Agradecido por la atención.

    • Hola Fabio. Sí, Sé cómo hacerlo, pero tienes que saber un poco de programación para entender la explicación. El principio es el mismo que utiliza en el ejemplo “olamundo.php”; la diferencia es que usted debe hacer la conexión con la base de datos, obtener el resultado deseado (configurar el SQL) y mostrarlo. Abrazos!

      • Max dijo:

        Hola Taylor, tienes un curso completo de PHP de programación para teléfonos móviles y tabletas con JQuery Mobile. Tipo un CRUD.

        Un ejemplo de un sistema de calendario de cursos donde me mostró una lista de cursos procedentes de la base de datos y al hacer clic en el curso pude ver toda la información.

      • Hola Max. No tengo este curso :( El ejemplo en este post ya está muy cerca de lo que usted necesita, sólo tienes que trabajar la solicitud de (envío de formulario de html de datos por Ajax) y de la respuesta (vuelta de los datos procesado php/sql/server). Internet tiene muchos ejemplos de CRUD en PHP.

        If hoy vas a hacer algo para el móvil, utilizaría el Jónico.

    • El código está basado en HTML, CSS y JavaScript. Por lo tanto, el propio navegador (IE, Firefox, Cromo) de su dispositivo (teléfono celular, Tablet, Notebook) se encarga de interpretar. No necesita instalar ningún software. Lado del cliente, poner el código en un archivo de texto (Bloc de notas, por ejemplo) y guárdelo como extensión de archivo html. Lado del servidor, para manipular los datos, tendrá que utilizar un lenguaje de programación, como PHP, Java, ASP, .NET, etcetera.

  2. Rafael Augusto dijo:

    Buenas tardes,

    Primero, Felicidades por el artículo.

    Así puede desarrollar aplicaciones para ambos android y IOS usando Jquery Mobile y Phonegap y también puede utilizar PHP y MYSQL para conectarse al servidor?

    • Buenas noches, Sí es posible. Con el Phonegap se crea tu aplicación en html/js (del lado del cliente) y ella se va a ejecutar en Android, iOS, acceso a recursos del servidor (PHP y MySQL), vía Ajax.

  3. Jan dijo:

    Se como el programa de ejemplo que se instalado en google play ? o simplemente rueda, accediendo directamente en un navegador Web ?

    • Sí, haces tu aplicación con HTML, CSS y Javascript, entonces utilizar programas como PhoneGap generar aplicaciones (casi) nativos para plataformas como Android y iOS. Entonces es sólo hasta el Google Play (Android). Su aplicación será capaz de comunicarse con su PHP normalmente hacer peticiones Ajax, como en el ejemplo.

Contesta

Su dirección de correo electrónico no será publicado. Campos requeridos están marcados con *