Programmation PHP pour les téléphones mobiles et tablettes avec JQuery Mobile

Imaginez que vous utilisez PHP pour développer leurs applications de s’exécuter sur des appareils mobiles. Avec JQuery Mobile, vous créez des interfaces qui interagissent avec le serveur Web via Ajax.


Présentation

Ce n’est pas magique.! Ce qui est l’habitude: nous utilisons HTML pour assembler les écrans et Javascript (Ajax) pour faire des demandes au serveur Web, où sont les codes source PHP que vous recevrez, processus et retourner l’information. Et pour cela, nous pouvons compter sur l’ensemble des installations que JQuery nous permet de.

jQuery mobile

jQuery Mobile est un cadre Web optimisé pour smartphones et tablettes. Il s’agit d’un système d’interface html5 compatible avec les plates-formes d’appareils mobiles les plus populaires. Construit sur jQuery et jQuery UI, son code permet une conception flexible, Facilement personnalisable.

Dans la pratique

Prenons un exemple simple, dans lequel nous avons une interface avec un champ de texte pour l’utilisateur d’entrer leur “nom”. En cliquant sur le “Envoyer”, le formulaire est envoyé au serveur (via Ajax), qui affiche le message “Bonjour nomDoUsuario!” ou “Salut tout le monde!”, si le champ de nom est vide.

Salut tout le monde!

index.php | Interface utilisateur (côté client)
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>
    <tête>
    <titre>Salut tout le monde! JQuery Mobile</titre>
    <méta nom="viewport" contenu="width=device-width, échelle initiale=1"> 
    <lien 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"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
    <script>
        $(fonction() { 
            $("#bt-enviar").Cliquez sur(fonction() {
                $.Ajax({
                  type de: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  Date: ({nom: $.Garniture($("#nome").Val()) }),
                  Datatype: "text",
                  Succès: fonction(Date) {
                    $("#nome").Val("");
                    $("#resultado").HTML(Date);
                  }
                });
            });
        });
    </script>     
</tête>
<corps> 
    <date div-Rouleau="page" ID="indexPage">
        <date div-Rouleau="header">
            <H1>Salut tout le monde - JQuery Mobile</H1>
        </div>
        <date div-Rouleau="content">
            <date div-Rouleau="fieldcontain">
                <étiquette est="nome">Entrez votre nom:</étiquette>
                <type d’entrée.="text" ID="nome" nom="nome" valeur="" />
            </div>
            <id d’entrée="bt-enviar" type de="button" valeur="Enviar" />
            <id de la div="resultado"></div>
        </div>
    </div> 
</corps>
</HTML>
?>
olamundo.php | Votre code PHP (côté serveur)
1
2
3
 
  <?PHP en-tête("Content-Type: texte/html;  charset = ISO-8859-1",true) ?>
  <H3>Salut <?PHP ECHO $_ POSTE[« nom »] ? $_ POSTE[« nom »] : "Mundo" ?>!</H3>

Le résultat est quelque chose comme:


Voir ce code fonctionner!

Le grand balcon mobile jquery est dans le méta-tag “Fenêtre”, où le paramètre “width=largeur de l’appareil” resizes automatiquement le contenu en fonction de l’écran de l’appareil mobile que vous accédez. Ainsi, la présentation lors de l’accès à partir d’un bureau est différente d’un téléphone mobile.

Vous pouvez utiliser un émulateur pour mieux visualiser le comportement de votre page et l’affichage sur un téléphone mobile, Tablette, etc., comme on le voit dans la figure ci-dessus. Dans le cas de Chrome, il suffit d’installer un type d’extension “Émulateur d’ondulation” et l’utiliser comme un outil de test. Il existe plusieurs solutions similaires.

Le reste va de votre besoin et de votre créativité…

Totales hits: 64866

11 Commentaires sur “Programmation PHP pour les téléphones mobiles et tablettes avec JQuery Mobile

  1. Fabio a dit:

    Bonjour, Félicitations pour le poste. Je voudrais profiter de son contenu pour poser une question(si vous pouvez m’aider, j’apprécie). Je voudrais faire une simple consultation dans la banque dans PHP, puis montrer à l’écran l’utilisateur est enregistré ou non dans la banque en utilisant jquery mobile. Tu sais comment je peux faire ça.? Reconnaissant pour l’attention.

    • Bonjour Fabio. Oui, savoir faire, mais vous avez besoin de connaître un peu de programmation afin que vous compreniez l’explication. Le principe est le même que celui que j’ai utilisé dans l’exemple “olamundo.php”; la différence est que vous devez faire la connexion à la base de données, rechercher le résultat souhaité (monter votre SQL) et l’afficher. Câlins!

      • Max a dit:

        Bonjour Taylor, vous auriez un cycle complet de programmation PHP pour les téléphones mobiles et tablettes avec JQuery Mobile. Tapez un CRUD.

        Un exemple d’un système d’horaire de cours où je pourrais vous montrer une liste de cours provenant de la base de données et en cliquant sur le cours, j’ai pu voir toutes les informations sur le cours.

      • Salut Max. Je n’ai pas ce cours :( L’exemple dans ce post est déjà très proche de ce que vous devez, vous avez juste besoin de travailler sur le Demande (envoi de formulaire de données/html/Ajax) et le Réponse (retour de données traitées php/sql/server). Sur Internet a de nombreux exemples de CRUD dans PHP.

        Aujourd’hui, si vous de faisez quelque chose pour Mobile, utiliserait le Ionique.

    • Le code est basé sur HTML, CSS et JavaScript. Alors, le navigateur lui-même (Ie, Firefox, Chrome) à partir de votre appareil (téléphone cellulaire, Tablette, ordinateur portable) est chargé d’interpréter. Aucun logiciel n’est nécessaire. Du côté des clients, mettre le code dans un fichier texte tout (Bloc-notes, par exemple) et l’enregistrer comme une extension .html. Côté serveur, pour manipuler les données, devra utiliser un langage de programmation, comme PHP, Java, Asp, .Net, etc..

  2. Rafael Auguste a dit:

    Bonne après-midi,

    Première, Félicitations pour l’article.

    Il est donc possible de développer des applications pour Android et IOS en utilisant Jquery Mobile et Phonegap et aussi et possible d’utiliser PHP et MYSQL pour la connexion au serveur?

    • Bonne nuit, ouais c’est tout à fait possible. Avec Phonegap, vous créez votre application en html/js (côté client) et il s’exécutera sur Android iOS, accéder aux ressources du côté serveur (PHP et MySQL), via Ajax.

  3. Jan Jan Jan a dit:

    Il a comme programme d’exemple que vous avez été installé sur google play ? ou tout simplement roue, accéder directement dans un navigateur ?

    • Oui, vous faites votre demande avec HTML, CSS et Javascript, puis utilise des programmes comme Phonegap (en) pour générer des applications (Presque) grès natif pour des plates-formes comme Android et iOS. Ensuite, il suffit d’aller à Google Play (Androïde). Votre application sera en mesure de communiquer avec votre PHP en faisant généralement des demandes Ajax, comme dans l’exemple.

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués avec *