Catégories
eBooks

[eBook Gratuit] Télécharger le livre « Développer avec jQuery Mobile »

Découvrez en exclusivité un eBook complètement gratuit sur le Framework jQuery Mobile. Désormais en version 1.4.5, jQuery Mobile, qui permet de créer des sites mobiles multiplateformes, ne cesse d’évoluer et de séduire de plus en plus de développeurs, déjà très familiers de jQuery, dont s’inspire d’ailleurs le framework Mobile. Ce livre électronique vous permettra de découvrir en profondeur les nombreuses possibilités et surtout facilitées offertes par jQuery Mobile. Bien plus qu’une introduction, « Développer avec jQuery Mobile » fera de vous un expert du Framework.

Télécharger le livre électronique

Catégories
Développement multiplateforme

Plus loin avec jQuery Mobile : 1ère Partie (application de gestion des stages)

Logo jQuery MobileDans un précédent article, nous avons fait une introduction au framework jQuery Mobile. Ce puissant outil permet de construire de très belles applications basées sur les technologies du web (JavaScript, HTML & CSS). Nous allons dans cette série de 3 articles, présenter le framework de façon un peu plus avancée.

Pour ce faire, nous nous proposons de travailler sur un projet complet à chaque article. Chaque projet suivra une rapide analyse des besoins, une phase de conception, une phase de développement et une phase de tests, tout cela pour vous convaincre de la maturité de ce framework, qui peut être utilisé dans le cadre d’un projet d’entreprise à échelle industrielle 🙂

Pour ce premier article, nous allons créer une application simple de Gestion des stages.

Contexte et analyse des besoins

Un établissement universitaire souhaiterait mettre en place une solution mobile de gestion des stages, afin de permettre à ses étudiants, très high-tech, et roulant au Samsung Galaxy S II et autres smartphones derniers cris, de postuler à des offres de stages directement depuis leur plateforme mobile.

Avec cette application, il devra être possible de :

  • Consulter des offres de stages
  • Postuler à une offre
  • Voir/Afficher ses candidatures
  • Rechercher un stage, en se basant sur des critères comme le lieu (ville, département, la durée
  • Gérer son profil/compte

 

Conception de l’application

Maquettage ou sketching

Afin d’avoir une idée de l’application finale à mettre en place, il est absolument (c’est un avis personnel) nécessaire de s’aider d’une maquette. Il existe de très bon outils qui vous aideront à faire des maquettes (sketchs). La version Windows 7 de Paint est suffisamment riche pour produire des maquettes assez intéressantes. Pour notre exemple, je me suis servi du logiciel gratuit Pencil, avec lequel j’ai assez rapidement produit les croquis ci-dessous :

Login - dentificationTableau de bord

Base de données

Nous allons utiliser 3 tables pour réaliser notre application. Cet article n’étant pas un cours de conception de base de données, nous n’allons pas nous attarder dessus ou produire un schéma super optimisé. Voici ce que je vous propose :

 

Schéma de base de données
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 
CREATE TABLE Entreprise(  id int NOT NULL AUTO_INCREMENT,  nom varchar(100) NOT NULL,  email varchar(50) NOT NULL,  adresse varchar(50) NOT NULL,  code_postal int(5) NOT NULL,  ville varchar(50) NOT NULL,  pays varchar(50) NOT NULL,  telephone varchar(10) NOT NULL,  fax varchar(12) NOT NULL,  url_logo varchar(512) NOT NULL,  PRIMARY KEY (id) );   CREATE TABLE Stage(  id int NOT NULL AUTO_INCREMENT,  id_entreprise int,  type varchar(4),  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  sujet varchar(250) NOT NULL,  dateAjout timestamp,  PRIMARY KEY (id),  FOREIGN KEY(id_entreprise) REFERENCES Entreprise(id) );   CREATE TABLE Etudiant(  id int NOT NULL AUTO_INCREMENT,  id_stage int,  nom varchar(45) NOT NULL,  prenom varchar(45) NOT NULL,  email varchar(50) NOT NULL,  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  PRIMARY KEY (id),  FOREIGN KEY(id_stage) REFERENCES Stage(id) );

 

 

Développement avec jQuery Mobile

C’est ici que commencent les choses sérieuses avec jQuery Mobile. Nous allons donc implémenter ce que nous venons de concevoir.

L’interface utilisateur sera donc développer à l’aide des composants du Framework jQuery Mobile, tandis que l’application sera rendue dynamique à l’aide de PHP.

Page de connexion

Rien de bien méchant par ici. L’utilisateur doit simplement se connecter à l’aide de son e-mail et d’un mot de passe. Nous considérerons que ceux-ci ont été généré en début d’année, à l’inscription de l’étudiant au mois de septembre par exemple. Nous aurons donc au moins besoin des éléments html suivant :

  • Un formulaire
  • Deux labels et deux champs textes : pour le login et le mot de passe. (Voir la documentation pour les champs texte)
  • Un bouton : pour valider les entrées. (Voir la documentation pour les boutons)

Voici comment tout cela s’écrit avec jQuery Mobile :

 

Première vue jQuery Mobile
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>  <html lang="fr">  <head>  <meta charset="utf-8">  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  <title>Gestion des Stages</title>  <link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.min.css" />  <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>  <script type="text/javascript" src="js/jquery.mobile-1.0a4.1.min.js"></script>  </head>  <body>  <div data-role="page">    <div data-role="header">  <h1>Gestion des stages</h1>  </div><!-- /Entete de la page -->    <div data-role="content">  <form action="accueil.php" method="post">  <fieldset data-role="fieldcontain">  <caption>Connexion</caption>  <p>  <label for="email">Email :</label>  <input type="text" name="email" id="email" />  </p>  <p>  <label for="pwd">Mot de passe :</label>  <input type="password" name="pwd" id="pwd" />  </p>  <p>  <input type="submit" value="Valider" data-theme="b" />  </p>  </fieldset>  </form>  </div><!-- /Formulaire de connexion -->    <div data-role="footer">  <h4>&copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

 

ATTENTION ! les fichiers propres au Framework doivent être téléchargés (jquery.mobile-1.0a4.1.min.css, jquery-1.5.2.min.js, jquery.mobile-1.0a4.1.min.js ) et installé sur votre serveur d’exécution ou sinon précisez dans l’entête à la place des chemins relatifs, les liens absolus, à savoir :

  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
  • http://code.jquery.com/jquery-1.5.min.js
  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js

Rien de bien méchant par ici, juste du déjà vu dans un article d’introduction au framework. Quelques explications s’imposent tout de même.



data-role="fieldcontain" <!-- Permet un affichage optimal des champs du formulaire -->

data-theme="b" <!-- Permet de donner au bouton "Valider" sa couleur bleue-->

Le résultat en image :
Accueil Login

Un script php, défini dans le paramètre action du formulaire, se chargera de gérer la session d’identification. Nommons-le accueil.php. Le script ici sert uniquement d’exemple, et n’est donc pas exceptionnel. Je vous invite à l’améliorer et le sécuriser (Le but étant de surtout se focaliser sur jQuery) :

Fichier de connexion
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */   // fichier de connexion include_once 'config.php';   //Récupération des données du form. $session = $_POST['session']; $email = $_POST['email']; $mdp = $_POST['mdp'];   switch ($session) {    // Connexion au Dashboard  case "login":  //Test de validité de l'@  if (($email != "") && le_user_exist_bdd($email, $mdp)) {  include_once 'dashboard.php';  } else {  include_once 'index.php';  }  break;    // Deconnexion du Dashboard  case "logout":  include_once 'index.php';  break; } ?>  

 

Tableau de bord

Le tableau de bord (dashboard.php) offre une vue générale des offres de stages. On peut cliquer dessus pour avoir plus de détails. Voici comment cela s’écrit avec jQuery Mobile :

 

Dashboard
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ require_once 'config.php'; ?> <!DOCTYPE html> <html lang="fr">  <head>  <?php include_once 'entete.php';?>  </head>  <body>  <div data-role="page" data-add-back-btn="false">    <div data-role="header" data-theme="b">  <h1>Tableau de bord</h1>  <a href="accueil.php?session=logout" data-icon="delete" class="ui-btn-right">Quitter</a>  </div><!-- /Entete de la page -->    <div data-role="content" id="login_page">  <span class="ui-btn-left"> Bonjour <span style="font-weight: bolder;"></span></span>  <h3>Liste des offres :</h3>  <?php include_once 'tabs/offres.php'; ?>  </div><!-- /Contenu principal -->    <div data-role="footer" data-theme="c">  <div data-role="navbar">  <ul>  <li><a href="#" class="ui-btn-active" data-icon="check">Offres</a></li>  <li><a href="tabs/candidatures.php" data-icon="star">Candidatures</a></li>  <li><a href="tabs/search.php" data-icon="search">Rechercher</a></li>  <li><a href="tabs/profil.php" data-icon="info">Profil</a></li>  </ul>  </div><!-- /navbar -->  <h4> Gestion des stages &copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

  • A la ligne 17, data-add-back-btn= »false » interdit l’affichage du bouton de retour, qu’ajoute automatiquement  jQuery Mobile lorsqu’il détecte un historique; le dashboard étant la première page que l’ont affiche,  nous n’aurons pas besoin de revenir en arrière, sauf en cas de déconnexion, ce qui est déjà gérée par le bouton Quitter à la ligne 19 du script dashboard.php.
  • A la ligne 19, la classe ui-btn-right permet d’afficher (positionner) le bouton Quitter en haut à droite de la page; ui-btn-left permettant bien sûr d’afficher le bouton à gauche de l’écran.
  • Le paramètre data-icon permet d’ajouter une icône à un bouton. Ainsi, data-icon= »delete » ajoute une icône sous forme de croix au bouton Quitter à la ligne 19. On retrouve d’autre utilisation de ce paramètre aux lignes 31 à 34. Voir la documentation sur ce paramètre.
  • A la ligne 29, data-role= »navbar » permet de définir une barre de navigation sous forme d’onglets. Il suffit ensuite de les afficher à l’aide de simples listes html (<ul>, <li>,…)

Comme vous l’aurez surement remarqué, le paramètre data-role apparait souvent, et permet de définir sémantiquement la structure de notre écran.

Le fichier php affichant la liste des offres (On utilisera des données factices) s’écrit :

Affichage d’une liste d’offres
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ ?> <div data-role="content" id="liste_offres">  <ul data-role="listview" data-filter="true">  <li><a href="#">  <img src="images/logo_air-france.png" alt="Logo Air France" />  <h3>Air France</h3>  <p>Stage de développement de Systèmes embarqués temps réels</p>  </a></li>    <li><a href="#">  <img src="images/logo_atosorigin.jpg" alt="Logo Atos Origin" />  <h3>Atos Origin</h3>  <p>Stage de développement Java EE</p>  </a></li>  <li><a href="#">  <img src="images/logo_capgemini.gif" alt="Logo Capgemini" />  <h3>Cap gemini</h3>  <p>Stage Consultant Systèmes d'information</p>  </a></li>  <li><a href="#">  <img src="images/logo_google.jpg" alt="Logo Google" />  <h3>Google France</h3>  <p>Stage Ingénieur Réseaux et Systèmes</p>  </a></li>  </ul> </div><!-- / Liste des offres de stages -->

 

  • A la ligne 9, data-role= »listview » permet de définir une ListView (composant qui affiche des liens verticalement, et pouvant être triés par catégorie), tandis que data-filter= »true » permet de filtrer les données en fonction des mots-clés. Il suffit d’entrer quelques lettres pour voir le filtrage en action et n’afficher que le résultat voulu (voir la 2e image ci-dessous) :

Tableau de bord, listview jQuery Mobile

 

Et avec le filtrage on a ça :

Tableau de bord, listview filtrage jQuery Mobile

Dans 2 prochains articles, nous étudierons d’autres cas d’utilisation du Framework. En attendant, n’hésitez pas à visiter la documentation en ligne (Voir ci-dessous) et à voter pour cet article 🙂

Pour plus d’informations :

 <input type="submit" value="Valider" />

Catégories
Développement multiplateforme

Développer avec jQuery Mobile, Framework de développement d’applications multiplateformes mobiles

Logo jQuery MobilejQuery Mobile est un excellent framework de développement d’applications web mobiles, qui se propose, comme la plupart des Frameworks de développement mobile, d’offrir un ensemble d’outils à base de technologies du web, pour construire des applications indépendantes du matériel mobile. Il est compatible avec tous les OS mobiles actuels et beaucoup d’entrepreneur s’en servent dans leurs projets. Le site de musique en ligne Deezer s’en sert dans sa version mobile (http://m.deezer.com).

jQuery Mobile, qui est très facile à prendre en main, est donc un choix interessant pour qui souhaiterait écrire un service mobile en écrivant moins, tout en créant plus : c’est le fameux « write Less, do more ».

Un site en jQuery Mobile s’êcrit en HTML5. Toute page doit au moins comporter ceci :

Ecran de base jQuery Mobile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a3.min.js"> </script> </head> <body>     ... </body> </html>

Chaque écran de l’application est représenté par une page, qui est le plus souvent une balise <div>. Le framework propose l’attribut spécial data-role= »page » qui caractérise une page (écran) :

1 
<div data-role="page">...</div>

Et dans chaque page, on peut insérer tout ce que l’on veut, du code php, html…On y décrit une structure (gabarit ou template) pour notre écran actuel. On peut par exemple imaginer un écran avec un bloc d’entête, un bloc de contenu et un pied de page. Ca donnerait ça :

Structure d’une page jQuery Mobile
1 2 3 4 5 
<div data-role="page">        <div data-role="header">...</div>        <div data-role="content">...</div>        <div data-role="footer">...</div> </div>

Une page complète s’écrit finalement :

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 
<!DOCTYPE html> <html>     <head>     <title>Page Title</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"> </script> </head> <body>   <div data-role="page">       <div data-role="header">         <h1>Titre de l'écran actuel</h1>     </div><!-- /entete -->       <div data-role="content">            <p>Contenu de l'écran actuel.</p>            </div><!-- /contenu -->       <div data-role="footer">         <h4>Pied de page</h4>     </div><!-- /footer --> </div><!-- /Fin de la page -->   </body> </html>

Essayons de compliquer un peu. Nous allons écrire un écran simple, avec une liste de liens menant à d’autres pages (écrans). Cette page proposera de consulter mon CV, ma liste de projets, et le contenu de mon blog. Chaque élément de la liste menant à chacun des contenus. Ça donnerait ça au final

Demo jQuery Mobile

Pour générer une liste de ce type il faut utiliser un attribut spécial nommé data-role= »listview » à l’interieur d’une balise ul.

Il est possible de varier les couleurs pour chaque bloc de liens en modifiant l’attribut data-theme. L’élement qui sert d’entête à la liste est désigné par l’attribut data-role qui a pour valeur list-divider. Nos deux blocs de liens (A propos de moi, Mon blog) s’écrivent donc :

Page complète
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<div data-role="content">         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                  <li data-role="list-divider">A propos de moi</li>                  <li><a href="pages/cv.php">Mon CV</a></li>                  <li><a href="#">Mes projets</a></li>         </ul><!-- A propos de moi-->         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                   <li data-role="list-divider">Mon blog</li>                   <li><a href="#">Software (Android, Windows Phone 7,  IOS...)</a></li>                   <li><a href="#">Hardware (Freebox, Systèmes embarqués,...)</a></li>                   <li><a href="#">Web (HTML 5,CSS 3,...)</a></li>                   <li><a href="#">News</a></li>         </ul><!-- Mon blog--> </div><!-- contenu de la page -->

Voir la démo

Pour en savoir plus sur jQuery Mobile, le mieux c’est de lire la documentation qui est vraiment bien faite.