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" />

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.