PHP, MySQL et Silverlight : Le tutoriel complet

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Matthias Shapiro, réparti en trois parties, PHP, MySQL and Silverlight: The Complete Tutorial (Part 1), PHP, MySQL and Silverlight: The Complete Tutorial (Part 2) et PHP, MySQL and Silverlight: The Complete Tutorial (Part 3).

Ceci est supposé être un billet de blog de type 'one-stop-shop', pour la création d'un service Web très simple en PHP, qui extrait d'une base de données MySQL et pour l'affichage des données en Silverlight. L'accent étant mis sur le « simple », ce tutoriel est destiné aux personnes qui n'ont jamais fait de bases de données ou de services Web.

Voici un exemple du produit fini (je me réserve le droit de nettoyer les données sur une base régulière) :

Ce tutoriel va parcourir les étapes pour créer une simple to-do list. Notre to-do list contiendra le texte détaillant ce que nous devons faire et une valeur indiquant si la tâche a été faite. Dans ce tutoriel, nous créerons une table MySQL pour contenir nos données, un service PHP pour appeler les données et une application Silverlight pour afficher et interagir avec les données.

Tout d'abord, nous allons créer la table dont nous avons besoin pour nos données.

Si vous n'avez pas ou si vous n'aimez pas phpMyAdmin, la requête MySQL pour créer la table est décrite ci-dessous :

CREATE TABLE `[your_database_name]`.`to_do_data` (
`index_key` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`is_done` TINYINT( 4 ) NOT NULL DEFAULT '0?,
`to_do_text` TEXT NOT NULL ,
FULLTEXT ( `to_do_text` )
) ENGINE = MYISAM

Si vous avez phpMyAdmin, je vous suggère fortement de l'utiliser si vous êtes novice en MySQL. Dans phpMyAdmin, allez dans votre base de données et entrez le nom de la table que vous voulez créer dans la section « Create new table on database [your_db_name] ».

Nous appellerons notre table « to_do_data » et lui donnerons trois colonnes.

• index_key- identifie l'item to-do de manière unique.
• is_done - la valeur vrai/faux indique l'état de l'item to-do.
• to_do_text - un texte court pour décrire ce qui doit être fait.

Dans phpMyAdmin, il ressemblera à ceci :

Quelques notes sur les colonnes :

index_key

Il s'agit de la clé primaire de la table et elle est utilisée pour identifier de manière unique la ligne donnée. En tant que telle, elle ne peut être nulle et elle s'auto-incrémente quand des lignes sont ajoutées à la table.

is_done

Nous utilisons le type « TINYINT » pour cette valeur parce qu’utiliser BOOLEAN est fondamentalement la même chose. Elle n'est pas nulle parce que tout item doit être, soit « fait », soit « pas fait ». « Fait »= vrai = 1 et « Pas fait » = faux = 0. Nous allons par défaut mettre à « 0 » (faux) parce que nous partons du principe que les utilisateurs ne vont pas faire une to-do list de choses qui soit déjà complète.

to_do_text

Nous avons artificiellement limité la taille du texte à 1024 parce que nous supposons que ceci sera un court ensemble de to-do, et non pas un ensemble d'entrées de journal. Nous avons également activé « Fulltext » qui permet à la base de données MySQL d'indexer nos entrées pour une recherche rapide.

Maintenant nous cliquons simplement sur le bouton « Enregistrer » au bas et nous avons notre table.

Maintenant notre système de base de données est en place et nous sommes prêts à écrire un service Web PHP pour implémenter toutes les capacités du CRUD (create, read, update, delete) dont notre système aura besoin.

Si vous voulez en savoir plus sur MySQL, je vous recommande fortement « A Visual Introduction to SQL ». C'est le livre que j'ai, un reste de mes années d'études supérieures et c'est un livre exceptionnel pour choisir votre chemin à travers les différents scénarios de base de données.

Si vous cherchez quelque chose d'un peu moins coûteux, « MySQL Crash Course » est également un beau livre sur le sujet.

Dans la partie 1, nous avons créé les tables MySQL pour stocker les données nécessaires pour une simple to-do list. Dans la partie 2, nous allons écrire du code PHP qui va nous donner la possibilité de récupérer les données de la base de données et de les envoyer, au format JSON, à notre application Silverlight.

Nous allons créer quatre fichiers PHP (télécharger les fichiers php):

• mysql_vars.php - détient toutes les informations pour se connecter à la base de données MySQL ;
• get_todo_items.php - pour obtenir tous les items to-do ;
• add_todo_item.php - ajoute un item to-do ;
• change_status.php - change un item to-do de « not done » à « done » ou vice versa.

Étant donné que tous ces projets utiliseront les informations contenues dans mysql_vars.php, nous allons l'écrire en premier.

mysql_vars.php

<?php
$dbUsername = "[my_database_username]";
$dbPassword = "[my_database_password]";
$db = "[my_database_name]";
$server = "[my_database_server]";

//    To Do Table and Column Names
$mysql_todoTable  = "to_do_data";
$mysql_todoIndexCol = "index_key";
$mysql_isDoneCol = "is_done";
$mysql_todoTextCol = "to_do_text";

$connection = mysql_connect($server, $dbUsername, $dbPassword);

function formatInput($rawURLData)
{
    $returnString = urldecode($rawURLData);
    $returnString = mysql_real_escape_string($returnString);
    return $returnString;
}
?>

Nous avons rajouté la table to-do et les noms des colonnes de sorte que si nous décidons de changer quoi que ce soit plus tard, nous pouvons juste aller au fichier et mettre à jour la table ou la colonne une fois.

Par mesure de convenance, nous avons ajouté une fonction que nous souhaiterons utiliser dans nos fichiers PHP. La fonction « formatInput » sera utilisée pour s'assurer que toutes nos données sont décodées de l'URL qui appelle notre service Web (la méthode urldecode) et ensuite essayer de bloquer toutes injections SQL (la méthode mysql_real_escape_string).

Maintenant, nous allons écrire le fichier de base « Get the data ». Ce que nous allons faire c'est de l'écrire de sorte que nous puissions choisir d'obtenir :

• tous les items to-do ;
• tous les items to-do qui sont « done » ;
• tous les items to-do qui sont « not done ».

Cette gamme de fonctionnalités n'est même pas proche de l'idéal. Dans un monde parfait, nous aurions voulu un plus large éventail d'options en rassemblant des items (par exemple, les items qui contiennent un certain mot ou un item en particulier ou limiter le nombre d'items que nous appelons par une plage de dates). Toutefois, pour nos fins très simples, cela fera l'affaire.

La manière dont notre service Web fonctionnera, c'est que nous avons une URL que nous appellerons à partir de Silverlight quand on veut obtenir des données. Quand on appelle ce service Web, on peut vouloir obtenir seulement les items « not done » ou seulement les items « done ». Nous nous occuperons de cette option en ajoutant « ?itemStatus=done » or « ?itemStatus=notDone » à la fin de l'URL.

Exemple: si notre URL de base est

http://www.mywebsite.com/

l'appel à

http://www.mywebsite.com/get_todo_items.php

retournera tous les items, indépendamment de leur statut achevé tandis que

http://www.mywebsite.com/get_todo_items.php?itemStatus=done

retournera tous les items to-do qui sont complets. Donc, nous devons nous assurer que notre service Web répond adéquatement aux deux appels.

Il y a des commentaires dans le code, mais je vais juste vous expliquer le concept de base sous forme d'image :

Nous prenons une URL, nous en extrayons les variables, nous créons la requête MySQL basée sur les variables, nous exécutons la requête MySQL, nous en extrayons les résultats, et ensuite nous renvoyons l'objet PHP encodé comme un objet JSON. Chacun de nos fichiers suivra le même modèle.

get_todo_items.php

<?
include 'mysql_vars.php';
//    set up the "itemStatus" URL option and build a query addition
//to account for the itemStatus variable
$itemStatus = $_GET['itemStatus'];
$itemQueryAddition = "";
if($itemStatus != NULL)
{
    if($itemStatus == "done")
{
$itemQueryAddition = "WHERE `$mysql_isDoneCol` = 1?;
}     else if ($itemStatus == "notDone")
{
$itemQueryAddition = "WHERE `$mysql_isDoneCol` = 0?;
}

//    Construct our MySQL query
$todoQuery = "SELECT * FROM `$mysql_todoTable` $itemQueryAddition ;";

//    execute the query and gather the results&#8230;
mysql_select_db($db, $connection);
$todoResult = mysql_query($todoQuery);
$todoArray = array();
while($itemRow = mysql_fetch_array($todoResult))
{
    $todoArray[] = array( "ToDoIndex" => $itemRow['index_key'],
    "IsDone" => $itemRow['is_done'],
    "TodoText" => $itemRow['to_do_text'] );
}
mysql_close($connection);

//    &#8230; then encode the results as JSON Text&#8230;
//    we're using a "returnType" field so that our Silverlight application can differentiate between
//    the kind of return values it recieves and parse the Json object appropriately
$returnItems = array( "returnType" => "todoItems",
"results" => $returnItems);
$JSONResult = json_encode($todoArray);

// &#8230; and print the results so that our app can read them
echo $JSONResult;
?>

Les deux autres fichiers, add_todo_item.php et change_status.php utilisent exactement la même structure pour ajouter un nouvel item et changer le statut d'un item existant (respectivement). Je ne vais pas mettre pas tous les codes ici dans ce billet qui est déjà trop long, mais vous pouvez télécharger les fichiers ici.

Mettez à jour le fichier mysql_vars.php pour répondre à vos besoins et vous devriez être capable d'uploader ces fichiers et avoir votre service Web to-do fonctionnel et fin prêt pour Silverlight et pour l'appel de données, ce que nous traiterons dans la partie 3.

Dans la partie 1, nous avons créé les tables MySQL pour stocker les données nécessaires pour une simple to-do list. Dans la partie 2, nous avons écrit un service PHP pour livrer les items dans notre to-do list au format JSON. Dans la partie 3, nous allons créer une application Silverlight qui peut utiliser ce service Web pour récupérer, afficher et modifier la to-do list.

Tout d'abord, nous allons démarrer un nouveau projet Silverlight (vous pouvez télécharger le projet complet ici). Dans un souci de temps, je ne vais pas entrer dans les détails de l'implémentation «idéale »pour cela. Je vais juste montrer les parties nécessaires pour récupérer, afficher et interagir avec les données de choses à faire (to-do).

Avant de commencer avec l'interface utilisateur, construisons un modèle afin que nous puissions correctement lier nos données. Ajoutez un nouveau dossier au projet Silverlight et nommez-le « Models ». Ajoutez une nouvelle classe à celui-ci et nommez cette classe « ToDoItem.cs ». Dans ce cas, nous allons nous contenter de faire en sorte que le modèle ressemble à notre table MySQL.

ToDoItem.cs

public class ToDoItem
{
public bool isDone { get; set; }
public string toDoDescription {get; set;}
public int toDoID {get; set;}

public ToDoItem() { }
}

Maintenant, nous allons ajouter à notre MainPage.xaml un ListBox nommé « ToDoList » qui contiendra les items to-do et un Grid pour loger l'interface utilisateur pour ajouter un nouvel item to-do. Nous allons travailler sur le regroupement et l'affichage des items en premier.

Faites un clic droit sur le ListBox et allez dans « Edit AdditionalTemplates -> Edit Generated Items (ItemTemplate) -> CreateEmpty. »

Vous adorerez cette partie. Il suffit de lui ajouter une case à cocher. C'est tout ce dont nous aurons besoin, donc c'est tout ce que nous allons ajouter. Ensuite, allez dans le XAML et faites en sorte que la case à cocher ressemble à ceci :

<CheckBox Content=&#8221;{Binding toDoDescription}&#8221;
IsChecked=&#8221;{Binding isDone}&#8221;
Tag=&#8221;{Binding toDoID}&#8221; />

Cette liaison est tout ce dont nous aurons besoin une fois que nous rassemblons nos to-do du service Web et les rattachons à ce ListBox. Poursuivons et obtenons que ces données soient dans ce ListBox.

Ouvrez MainPage.xaml.cs et en haut de la classe, ajoutez :

WebClient wc = new WebClient();
ObservableCollection<ToDoItem> myToDoList = new ObservableCollection<ToDoItem>();
string baseURI = &#8220;http://<Web_address_holding_your_php_files>&#8221;;

Vous pourriez avoir à ajouter « using System.Net; » et « usingSystem.Collections.ObjectModel; » au début du fichier. Pendant que nous ajoutons les références, faites un clic droit sur le dossier « References », trouvez le composant « System.Json » et ajoutez-le au projet. Ensuite ajoutez « System.Json; » à la section références en haut. Ça va nous être utile dans quelques minutes.

Dans la méthode MainPage() sous InitializeComponent(), tapez « wc.DownloadStringCompleted += » et appuyez deux fois sur TAB. Cela ajoutera un gestionnaire d'évènements nécessaire quand le WebClient aura fini de se connecter au service Web que nous avons écrit.

Le gestionnaire d'évènements résultant (qui doit être nommé « wc_DownloadStringCompleted ») est le code vers lequel notre application se rendra à chaque fois qu'il fait un appel à notre service Web et obtient un résultat. Dedans, nous ferons les choses suivantes :

• vérifier pour s'assurer que nous avons obtenu un résultat sans erreur ;
• vérifier quel genre de résultat nous avons obtenu (avons-nous eu tous les items to-do ? ou faut-il ajouter un nouvel item to-do ?) ;
• parcourir le résultat extrayant les données dont nous avons besoin ;
• appliquer ces données à l'interface utilisateur.

Ajoutons le code pour faire cela afin d'obtenir tous les items. Faites en sorte que votre gestionnaire d'évènements ressemble à ceci :

void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null && e.Result!= "")
{
JsonValue completeResult = JsonPrimitive.Parse(e.Result);
string resultType = completeResult["returnType"].ToString().Replace('"', ' ').Trim();
if (resultType == "todoItems")
{
myToDoList.Clear();

JsonArray toDoItemsJson = (JsonArray)completeResult["results"];
foreach (JsonValue todoItemJson in toDoItemsJson)
{
ToDoItem thisTodo = new ToDoItem();

if (todoItemJson["ToDoIndex"] != null)
thisTodo.toDoID = Convert.ToInt32(todoItemJson["ToDoIndex"].ToString().Replace('"', ' ').Trim());
if (todoItemJson["TodoText"] != null)
thisTodo.toDoDescription = todoItemJson["TodoText"].ToString().Replace('"', ' ').Trim();
if (todoItemJson["IsDone"] != null)
{
int isDoneInt = Convert.ToInt32(todoItemJson["IsDone"].ToString().Replace('"', ' ').Trim());
if(isDoneInt == 0){
thisTodo.isDone = false;
} else if (isDoneInt == 1){
thisTodo.isDone = true;
}
}
myToDoList.Add(thisTodo);
}
ToDoList.ItemsSource = myToDoList;
}
}
}

Avec cela en place, tout ce que nous devons faire, c'est d'effectuer un appel au get_todo_items.php, que nous pouvons faire en ajoutant ce code juste en dessous de la ligne wc.DownloadStringCompleted dans la méthode MainPage().

wc.DownloadStringAsync(new Uri(baseURI + "get_todo_items.php"));

Lorsque nous exécutons le projet, nous devrions obtenir tous les objets de notre base de données et les résultats devraient apparaître juste de la même façon que nous le voulons dans notre application Silverlight. Nous suivrons exactement le même modèle pour ajouter des nouveaux items to-do et mettre à jour les items to-do que nous avons déjà.

Je suis en train de séparer la partie finale de ce tutoriel (l'ajout et la mise à jour des items) dans un billet supplémentaire afin que je puisse conclure celui-ci. J'encourage le lecteur parcourant ce tutoriel à le compléter et à se référer à la dernière partie seulement s'il est bloqué.

Finalement, un petit avertissement. J'ai structuré ce projet pour qu'il fonctionne d'une manière aussi simple que possible. Ce n'est en aucun cas l'exemple d'une architecture idéale pour une application Silverlight pilotée par des données. C'est juste un bon moyen pour commencer à utiliser Silverlight dans un environnement qui n'est pas du 100% technologies Microsoft.

Télécharger tous les fichiers PHP et Silverlight:

http://www.designersilverlight.com/wp-content/uploads/2010/05/AllFiles_PHP_and_Silverlight.zip

Télécharger uniquement les fichiers PHP:

http://www.designersilverlight.com/wp-content/uploads/2010/05/PHP_Tutorial_Files.zip

Télécharger uniquement le projet Silverlight:

http://www.designersilverlight.com/wp-content/uploads/2010/05/ToDo_List_Tutorial.zip

Je tiens ici à remercier Matthias Shapiro pour son aimable autorisation de traduire l'article, ainsi que Philippe Vialatte, tomlev et Djug pour leurs précieux conseils.
Je remercie également Mahefasoa et jacques_jean pour leurs relectures respectives.