Apprendre à programmer une application Web personnalisée PHP et MySQL sur IBM Cloud

L'outil de suivi du temps basé sur le navigateur permet aux utilisateurs d'enregistrer le temps passé sur les projets des clients.

Pour les professionnels qui facturent à l'heure - avocats, comptables, etc., le suivi des délais est une partie essentielle du processus de facturation. L'adage selon lequel le temps est de l'argent est presque littéralement vrai dans ces cas : Les heures de travail de ces professionnels sont en corrélation directe avec le revenu qu'ils gagnent. Un outil de suivi du temps qui leur permet de saisir facilement les heures de travail et d'obtenir des rapports sommaires à la fin de la semaine ou du mois est donc d'une importance capitale.

Dans ce tutoriel, je vous guide à travers le processus de construction d'un outil simple de suivi du temps et de déploiement sur IBM Cloud. En cours de route, je vous présenterai le service de base de données ClearDB MySQL sur IBM Cloud, qui vous offre une base de données évolutive et sécurisée dans le cloud pour vos données.

L'exemple d'application décrit dans cet article permet à un utilisateur de définir un ou plusieurs projets, chacun représentant un job client. L'utilisateur peut alors saisir, de façon continue, les heures travaillées sur chaque projet, accompagnées d'une brève description.

Les données saisies sont sauvegardées dans une base de données en ligne et un tableau de bord en ligne permet à l'utilisateur de visualiser un rapport des heures travaillées par projet. Alternativement, l'utilisateur peut télécharger un fichier au format CSV avec les mêmes données. L'ensemble de l'application est mobile, ce qui permet aux utilisateurs de saisir des données et de visualiser des rapports même lorsqu'ils sont en déplacement (idéal pour les professionnels qui n'ont pas de bureau ou de lieu de travail fixe).

Dans les coulisses, l'application utilise le service de base de données ClearDB MySQL d'IBM Cloud, qui fournit une base de données MySQL dans le cloud. L'application utilise également Bootstrap pour créer une interface mobile optimisée, et le micro-cadre PHP Slim pour traiter les requêtes.

Avant de commencer, assurez-vous d'avoir tout ce dont vous aurez besoin :

• Un compte IBM Cloud ;

• Une connaissance de base de PHP et MySQL ;

•Un environnement de développement PHP7 local ou hébergé avec Apache ;

•Composer, le gestionnaire de dépendances PHP ;

• L'outil de ligne de commande Cloud Foundry ;

• Un éditeur de texte ou un IDE.

L’installation suit les étapes suivantes :

1. Installer les dépendances

   La première étape consiste à initialiser une application de base avec le micro-cadre PHP Slim. Ceci peut être téléchargé et installé en utilisant Composer, le gestionnaire de dépendances PHP. Utilisez le fichier de configuration de Composer suivant, qui doit être sauvegardé dans $APP_ROOT/composer.json ($APP_ROOT fait référence au répertoire de votre projet).

    

   Sélectionnez

   {
       "require": {
          "php": ">=7.0.0",
          "slim/slim": "^3.9",
          "slim/php‑view": "^2.2"
       }
   }

   On lance l’installation en utilisant Composer avec cette commande :

   shell> composer install

2. Une fois les composants nécessaires téléchargés via Composer, créez les répertoires $APP_ROOT/public pour tous les fichiers accessibles sur le Web et $APP_ROOT/views pour toutes les vues, où $APP_ROOT fait référence au répertoire de l'application.

    

   Sélectionnez

   shell> cd myapp
   shell> mkdir public views

3. Ensuite, créez le fichier $APP_ROOT/config.php avec les informations suivantes (vous remplirez les espaces réservés à l'étape 3) :

    

   Sélectionnez

   <?php
   $config = 
     'settings' => [
       'displayErrorDetails' => true,
       'db' => 
         'hostname' => 'DB HOST NAME',
         'username' => 'DB USER NAME',
         'password' => 'DB USER PASSWORD',
         'name' => 'DB NAME',
         ];

4. Pour faciliter l'accès à l'application, vous pouvez également définir un nouvel hôte virtuel dans votre environnement de développement nommémyapp et pointer sa racine de document vers $APP_ROOT/public. Vous devez également ajouter un fichier .htaccess dans le répertoire $APP_ROOT/public avec les paramètres suivants :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} ! f
  RewriteCond %{REQUEST_FILENAME} ! d
  RewriteRule ^ index.php QSA,L</IfModule>

L'utilisation d'un hôte virtuel mappé au répertoire $APP_ROOT/public vous permet d'accéder aux routes d'application directement en utilisant le nom de l'hôte virtuel. Par exemple, utilisez http://myapp.localhost/projects/save au lieu de http://localhost/public/projects/save. Voir « Rubriques connexes » ci-dessous pour en savoir plus sur les hôtes virtuels et la configuration des serveurs Web pour les applications Slim framework.

L'étape suivante consiste à initialiser le framework Slim. Pour ce faire, utilisez un script contenant des rappels pour les routes de l'application, chaque rappel définissant le code à exécuter lorsque la route est adaptée à une requête entrante. Créez ce script à $APP_ROOT/public/index.phpavec le contenu suivant :

<?php
 
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;
 
// autoload files
require '../vendor/autoload.php';
require '../config.php';
 
// configure Slim application instance
// initialize application
$app = new \Slim\App($config);
 
// initialize dependency injection container
$container = $app‑>getContainer();
 
// add view renderer to DI container
$container['view'] = function ($container) {
  return new \Slim\Views\PhpRenderer("../views/");
};
 
// welcome page controller
$app‑>get('/', function (Request $request, Response $response) {
  return $response‑>withHeader('Location', $this‑>router‑>pathFor('home'));
});
 
$app‑>get('/home', function (Request $request, Response $response) {
  $response = $this‑>view‑>render($response, 'home.phtml', [
    'router' => $this‑>router
  ]);
  return $response;
})‑>setName('home');
 
$app‑>run();

Slim fonctionne en définissant des fonctions de rappel pour les méthodes et les terminaux HTTP. Ceci est fait en définissant la méthode Slim correspondante (get()pour les requêtes GET, post() pour les requêtes POST, et ainsi de suite) et en passant le modèle de route à faire correspondre comme premier argument à la méthode. Le deuxième argument de la méthode est une fonction anonyme, qui spécifie les actions à effectuer lorsque l'itinéraire est adapté à une requête entrante.

Le script ci-dessus met en place deux gestionnaires (d'autres seront ajoutés prochainement). La première est une simple redirection, qui redirige toutes les requêtes pour le / route vers le /home route. La seconde est la route /home elle-même, qui rend le contenu du modèle $APP_ROOT/views/home.phtml. Créez ce modèle avec le contenu ci-dessous :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf‑8">
    <meta http‑equiv="X‑UA‑Compatible" content="IE=edge">
    <meta name="viewport" content="width=device‑width, initial‑scale=1">
    <title>Home</title>
    <link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0‑beta.2/css/bootstrap.min.css">
    <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0‑beta.2/css/bootstrap‑theme.min.css">
    <!‑‑ HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries ‑‑>
    <!‑‑ WARNING: Respond.js doesn't work if you view the page via file:// ‑‑>
    <!‑‑if lt IE 9      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]‑‑>  
 
  </head>
  <body style="padding‑top: 95px">
 
    <div class="container">
      <div class="row">
        <nav class="navbar navbar‑expand‑md navbar‑dark 
          bg‑dark fixed‑top justify‑content‑between">
          <a class="navbar‑brand" href="#">Home</a>
        </nav>
      </div>
    </div>
    
    <!‑‑ content area ‑‑>
    <div class="container" style="text‑align: center">
      <p>
        <a role="button" class="btn btn‑success" href="">Add new project</a>
      </p>
      <p>
        <a role="button" class="btn btn‑success" href="">View current projects</a>
      </p>
    </div>        
    <!‑‑ content area ends‑‑>
      
    <!‑‑ footer ‑‑>
    <div class="container">
    </div> 
    <!‑‑ footer ends ‑‑>
 
  </body>
</html>

Ce fichier contient une interface utilisateur simple basée sur Bootstrap avec une barre de navigation, un pied de page et une zone de contenu. Ce modèle de base est également utilisé pour toutes les pages suivantes, seule la zone de contenu étant modifiée.

Pour voir ceci en action, naviguez jusqu'à la route /home (http://localhost/public/home ou http://myapp.localhost/home, selon que vous utilisez un hôte virtuel ou non) et vous devriez voir la version rendue du modèle ci-dessus :

IBM Cloud offre un certain nombre d'options de base de données en tant que service, dont l'une est la base de données ClearDB MySQL. Comme vous pouvez le deviner, ce service fournit une instance de base de données MySQL vide qui peut être liée à votre application. Le plan par défaut n'offre qu'un quota limité de stockage gratuit.

1. Pour voir comment cela fonctionne, initialisez une nouvelle instance de service de base de données ClearDB MySQL sur IBM Cloud en vous connectant à votre compte IBM Cloud et en sélectionnant la catégorie « Données et analyses » dans le menu de navigation. Cliquez sur le bouton Créer une ressource et dans la liste de services résultante, sélectionnez le service « ClearDB MySQL Database » et le plan gratuit CB5. Cliquez sur Créer pour continuer.

2. Initialiser une instance de base de données ClearDB MySQL :

   

   L’instance du service « ClearDB database » sera maintenant initialisé. À partir de la page des détails du service, cliquez sur le tableau de bord du service ClearDB « ClearDB Dashbord » ; sélectionnez la nouvelle instance de base de données, et aller à l’onglet « System Information » pour voir les « credentials »de l’instance. Et ajouter ces valeurs dans le fichier de configuration de l’application :$APP_DIR/config.php. Ainsi l’application pourra se connecter à l’instance de base de données.

   Dans la page Détails du service, ouvrez le tableau de bord ClearDB, sélectionnez la nouvelle instance de la base de données et visitez l'onglet Informations système pour afficher les informations d'identification de l'instance. Ajoutez ces valeurs au fichier $APP_DIR/config.php de l'application pour qu'elle puisse se connecter à l'instance de base de données.

   

3. Utilisez ces informations d'identification pour vous connecter à la base de données MySQL distante (à l'aide d'un outil tel que MySQL CLI ou phpMyAdmin) et créez des tables pour contenir les informations de projet et de saisie de temps en utilisant le SQL ci-dessous. Les deux tables sont reliées l'une à l'autre via la clé étrangère entries.pid, qui fait référence au champ projects.id.

CREATE TABLE projects (
  id int(11) NOT NULL AUTO_INCREMENT,
  name varchar(255) NOT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB;
CREATE TABLE entries (
  id int(11) NOT NULL AUTO_INCREMENT,
  pid int(11) NOT NULL,
  hours float NOT NULL,
  comment varchar(255) NOT NULL,
  date date NOT NULL,
  PRIMARY KEY (id),
  KEY pid (pid),
  CONSTRAINT entries_ibfk_1 FOREIGN KEY (pid) REFERENCES projects (id)
) ENGINE=InnoDB;

Maintenant que vous avez toute l'infrastructure en place, vous pouvez commencer à ajouter de vraies fonctionnalités à l'application.

1. Commencez par créer un formulaire pour ajouter de nouveaux projets à $APP_ROOT/views/projects/save.phtml en utilisant le modèle de base montré à l'étape 2 ci-dessus et en plaçant le code ci-dessous dans la zone de contenu :

    

   Sélectionnez

   <?php if (!isset($POST['submit'])): ?>
     <form method="post" 
       action="<?php echo $data['router']‑>pathFor('projects‑save'); ?>">
       <div class="form‑group">
         <label for="fname">Project name</label>
         <input type="text" class="form‑control" id="name" name="name">
       </div>
       <div class="form‑group">
         <button type="submit" name="submit" class="btn btn‑success">Save</button>
       </div>
     </form>  
   <?php else: ?>
     <div class="alert alert‑success" role="alert">
       <strong>Success!</strong> The project was successfully created or updated.
     </div>
   <?php endif; ?>

   Il s'agit d'un formulaire très simple, composé d'un seul champ de saisie pour le nom du projet. Ensuite, ajoutez un gestionnaire de route pour le rendre, dans le fichier $APPROOT/public/index.php:

    

   Sélectionnez

   <?php
   use \Psr\Http\Message\ServerRequestInterface as Request;
   use \Psr\Http\Message\ResponseInterface as Response;
   // ...
   // project form renderer
   $app‑>get('/projects/save', function (Request $request, Response $response) {
     $response = $this‑>view‑>render($response, 'projects/save.phtml', [
       'router' => $this‑>router
     ]);
     return $response;
   })‑>setName('projects‑save');
   // ...
   $app‑>run();

2. Lorsque l'application reçoit une demande pour l'URL /projects/save, elle rend le code du formulaire de la liste précédente et produit un résultat comme celui ci-dessous :

   

   Lorsqu'un utilisateur saisit des données dans le formulaire et les soumet, l'application doit valider les données. Si les données sont valides, l'application crée un nouvel enregistrement dans la table des projets. Cependant, avant de pouvoir le faire, il a besoin d'une connexion à la base de données.

3. Ajoutez les lignes de code ci-dessous pour initialiser une nouvelle connexion à la base de données de l'application en utilisant l'extension MySQLi de PHP. Ajoutez la connexion au conteneur d'injection de dépendance Slim afin qu'elle puisse être facilement utilisée par tous les gestionnaires de route de l'application :

    

   Sélectionnez

   <?php
   use \Psr\Http\Message\ServerRequestInterface as Request;
   use \Psr\Http\Message\ResponseInterface as Response;
   
   // ...
   
   // configure MySQL client to DI container
   $container['db'] = function ($container) {
     $config = $container‑>get('settings');
     return new mysqli(
       $config['db']['hostname'], 
       $config['db']['username'], 
       $config['db']['password'], 
       $config['db']'name'  );
   };
   
   // route handlers here
   // ...
   
   $app‑>run();

   Ensuite, définissez un gestionnaire séparé pour les requêtes POST, également dans le fichier $APP_ROOT/public/index.php, comme ci-dessous :

    

   Sélectionnez

   <?php
   use \Psr\Http\Message\ServerRequestInterface as Request;
   use \Psr\Http\Message\ResponseInterface as Response;
   
   // ...
   
   // project modification controller
   $app‑>post('/projects/save', function (Request $request, Response $response) {
     // get configuration
     $config = $this‑>get('settings');
     // get input values
     $params = $request‑>getParams();
     // check input
     if (!($name = filter_var($params['name'], FILTER_SANITIZE_STRING))) {
       throw new Exception('ERROR: Project name is not a valid string');
     }
     if (!$this‑>db‑>query("INSERT INTO projects (name) VALUES ('$name')")) {
       throw new Exception('Failed to save record: ' . $this‑>db‑>error);
     }
     $response = $this‑>view‑>render($response, 'projects/save.phtml', [
       'router' => $this‑>router
     ]);
     return $response;
   });
   
   // ...
   
   $app‑>run();

   Ce gestionnaire reçoit les requêtes POST et utilise la méthode getParams() pour extraire les paramètres d'entrée de la requête. Le gestionnaire désinfecte la valeur fournie par l'utilisateur pour s'assurer qu'elle ne contient aucun caractère dangereux, puis formule et exécute une requête INSERT pour créer un nouvel enregistrement dans la base de données MySQL du projet. Vous remarquerez qu'il utilise la connexion à la base de données initialisée plus tôt ($this->db) depuis le conteneur d'injection Slim dependency pour effectuer la requête.

4. Une fois la requête exécutée avec succès, le gestionnaire rend à nouveau le modèle de formulaire ; cette fois, puisque la variable $_POST['submit'] existe, le modèle rend un message de notification au lieu d'un formulaire vide. Voici ce que vous devriez voir :

Vous avez maintenant la possibilité d'ajouter de nouveaux projets, mais qu'en est-il de leur visualisation et de leur modification ? Il est facile d'ajouter un gestionnaire qui liste simplement les projets disponibles en exécutant une requête SELECT sur la base de données, comme indiqué ci-dessous :

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

// ...

// project list controller
$app‑>get('/projects[/]', function (Request $request, Response $response) {
  // query for all project records
  $projects = $this‑>db‑>query("SELECT * FROM projects");
  $response = $this‑>view‑>render($response, 'projects/list.phtml', [
    'router' => $this‑>router, 'projects' => $projects
  ]);
  return $response;
})‑>setName('projects‑list');

// ...

$app‑>run();

La liste des projets récupérés par la requête est transmise à un modèle, qui itére sur la liste et affiche chaque projet dans un tableau. Voici le code du modèle, à $APP_ROOT/views/projects/list.phtml :

<?php if (count($data['projects'])): ?>
<table class="table table‑border table‑responsive‑md">
  <thead>
    <tr>
      <th>#</th>
      <th>Project</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <?php foreach ($data['projects'] as $project): ?>
  <tr>
    <td><?php echo htmlspecialchars($project['id'], ENT_COMPAT, 'UTF‑8'); ?></td>
    <td><?php echo htmlspecialchars($project['name'], ENT_COMPAT, 'UTF‑8'); ?></td>
    <td><a role="button" class="btn btn‑primary" 
      href="<?php echo $data['router']‑>pathFor('projects‑save', 
      array('id' => htmlspecialchars($project['id'], ENT_COMPAT, 'UTF‑8'))); ?>">
      Modify project</a></td>
    <td><a role="button" class="btn btn‑danger" 
      href="<?php echo $data['router']‑>pathFor('projects‑delete', 
      array('id' => htmlspecialchars($project['id'], ENT_COMPAT, 'UTF‑8'))); ?>">
      Delete project</a></td>
  </tr>
  <?php endforeach; ?>
</table>
<?php endif; ?>

Et voici à quoi ressemble le résultat :

Notez à partir du code de modèle que chaque projet inclut des liens pour éditer et supprimer l'enregistrement correspondant, et l'ID du projet est inclus dans le lien comme paramètre URL. Les requêtes pour ces opérations sont traitées par les gestionnaires /projects/save et /projects/delete, respectivement.

Le traitement d'un projet implique l'affichage du même formulaire que celui utilisé pour créer un nouveau projet, sauf que les valeurs sont pré-remplies. Lors de la soumission, l'entrée saisie par l'utilisateur est validée comme auparavant. Cette fois, cependant, au lieu d'une requête INSÉRER, une requête MISE À JOUR est effectuée pour mettre à jour l'enregistrement du projet dans la base de données.

Ces tâches peuvent être accomplies en modifiant les gestionnaires /projects/save vus à l'étape 4 pour inclure une logique métier supplémentaire :

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

// ...

// project modification form renderer
$app‑>get('/projects/save[/{id}]', function (Request $request, Response $response, $args) {
  $project = null;
  if (isset($args['id'])) {
    $id = filter_var($args['id'], FILTER_SANITIZE_NUMBER_INT);
    $projectResult = $this‑>db‑>query("SELECT * FROM projects WHERE id = '$id'");
    $project = $projectResult‑>fetch_object();    
  }
  $response = $this‑>view‑>render($response, 'projects/save.phtml', [
    'router' => $this‑>router, 'project' => $project
  ]);
  return $response;
})‑>setName('projects‑save');

// project modification controller
$app‑>post('/projects/save[/{id}]', function (Request $request, Response $response, $args) {
  // get configuration
  $config = $this‑>get('settings');
  // get input values
  $params = $request‑>getParams();
  // check input
  if (!($name = filter_var($params['name'], FILTER_SANITIZE_STRING))) {
    throw new Exception('ERROR: Project name is not a valid string');
  }
  // if project id included
  // check input and update record
  // if not, create new record
  if (!empty($params['id'])) {
    $id = filter_var($params['id'], FILTER_SANITIZE_NUMBER_INT);
    if (!(filter_var($id, FILTER_VALIDATE_INT))) {
      throw new Exception('ERROR: Project is not valid');
    }
    if (!$this‑>db‑>query("UPDATE projects SET name='$name' WHERE id='$id'")) {
      throw new Exception('Failed to save record: ' . $this‑>db‑>error);
    }
  } else {
    if (!$this‑>db‑>query("INSERT INTO projects (name) VALUES ('$name')")) {
      throw new Exception('Failed to save record: ' . $this‑>db‑>error);
    }
  }
  $response = $this‑>view‑>render($response, 'projects/save.phtml', [
    'router' => $this‑>router
  ]);
  return $response;
});

// ...

$app‑>run();

Ces gestionnaires révisés acceptent maintenant un ID de projet optionnel comme partie intégrante de l'URL de la requête. Si le projet est trouvé, les gestionnaires recherchent dans la base de données l'enregistrement correspondant pour pré-remplir le formulaire de création de projet. Lors de la soumission, si l'ID de projet est inclus dans les paramètres d'entrée, le gestionnaire exécute une requête UPDATE avec le nom du projet révisé au lieu de la requête INSERT habituelle.

Ces changements aux gestionnaires nécessitent également des changements correspondants dans le modèle de formulaire, à $APP_ROOT/views/projects/save.phtml. Plus particulièrement, les changements incluent l'ajout d'un champ caché pour l'ID de projet et le pré-remplissage du champ de saisie avec le nom actuel du projet, si disponible. Pour des raisons de sécurité, la sortie s'échappant est effectuée avec htmlspecialchars() sur les données en cours d'interpolation dans le modèle. Voici le modèle de formulaire révisé :

<?php if (!isset($_POST['submit'])): ?>
  <form method="post" action="<?php echo $data['router']‑>pathFor('projects‑save'); ?>">
    <input name="id" type="hidden" 
      value="<?php echo (isset($data['project']‑>id)) ? 
      htmlspecialchars($data['project']‑>id, ENT_COMPAT, 'UTF‑8') : ''; ?>" />
    <div class="form‑group">
      <label for="fname">Project name</label>
      <input type="text" class="form‑control" id="name" name="name" 
        value="<?php echo (isset($data['project']‑>name)) ? 
        htmlspecialchars($data['project']_>name, ENT_COMPAT, 'UTF_8') : ''; ?>">
    </div>
    <div class="form_group">
      <button type="submit" name="submit" class="btn btn_success">Save</button>
    </div>
  </form>  
<?php else: ?>
  <div class="alert alert_success" role="alert">
    <strong>Success!</strong> The project was successfully created or updated.
  </div>
<?php endif; ?>

L'objectif de cette série en deux parties est de construire une application utile sauvegardée par une base de données avec PHP et MySQL et de tirer parti de la sécurité, de l'évolutivité et de la flexibilité d'IBM Cloud pour le déploiement et l'hébergement. La partie 1 a couvert les bases, vous montrant comment initialiser une instance de base de données basée sur le cloud et y connecter votre application PHP locale. Il vous a également expliqué les bases de l'ajout et de la modification d'enregistrements sur l'instance de la base de données cloud en utilisant le framework Slim.

La partie 2 s'appuiera sur ces sujets en vous montrant comment lier les entrées de temps avec les projets et générer des rapports de synthèse. Il vous montrera également comment transférer votre application PHP finale de votre environnement de développement local vers IBM Cloud, afin que l'application et la base de données fonctionnent dans le cloud. N'oublie pas de revenir pour ça !

Developpez.com remercie IBM pour l’autorisation de publication de ce tutoriel. Tous nos remerciements aussi à Guillaume SIGUI pour la mise au gabarit.