Dollois Connection
Un pense bête comme un autre
Générateur de données
19/08/10
Aujourd’hui, Generate Data, un site à l’image de Lorem Ipsum qui génère du texte, va vous aider dans vos tests de formulaire en générant des données typées.
Exemple
Il faut d’abord choisir ce que nous désirons comme type de résultat, 5 choix sont possibles:
- HTML
- Excel
- XML
- CSV
- SQL (notre sélection)
Cela fait, choisissons le pays auquel les données répondront (ex: numéro de téléphone, adresse, …), puis pour finir le nombre de résultats générés.
Maintenant, il faut définir les champs que l’on veut retrouver en spécifiant:
- le nom
- le type de données (numéro de téléphone, adresse, email)
- éventuellement des options liées au type de données sélectionnées
Interface du site generate data
Résultats
Avant d’obtenir nos données, comme nous avons sélectionné SQL comme type de résultat, il faut spécifier, entre autre, un moteur de base de données entre
- Mysql
- Oracle
Et voici le résultat : en 2 minutes nous avons des données en base pour réaliser nos tests.
Résultat SQL de notre génération de données
Conclusion
Une très bonne initiative qui va nous faire gagner du temps et nous permettre de mieux tester nos développements. Merci à Korben de m’avoir fait découvrir ce lien. Prenez 5 minutes pour découvrir ce très bon site si vous ne l’avez pas encore fait.
Migration du site
13/08/10
Comme vous pouvez le constater une nouvelle version du site Dollois est en préparation.
Désolé des gênes occasionnées.
Utilisation de JQuery pour soumettre un formulaire
17/12/09
Voilà un petit tutoriel pour utiliser l’API JQuery et la soumission de formulaire via l’Ajax.
Tout d’abord : le principe. Nous somme sur un formulaire en PHP (le langage importe peu pour comprendre le principe). Lors de la soumission de ce formulaire, nous ne voulons pas que la page soit rechargée. C’est la raison pour laquelle nous allons utiliser la technologie AJAX.
Mais avant tout voici un petit exemple.
Inventaire des fichiers
L’exemple sera composé de 3 fichiers:
- Le formulaire (index.php)
- Traitement javascript (ajax.js)
- Le fichier PHP de traitement (action.php)
Le formulaire
Nous allons faire simple : un petit formulaire de connexion avec un identifiant et un mot de passe.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Soumettre un formulaire en ajax via JQuery</title>
<script type="text/javascript" src="./_js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./_js/ajax.js"></script>
<link rel="stylesheet" type="text/css" href="./_css/exemple.css" media="screen" />
</head>
<body>
<div id="root">
<form id="auth" method="post" name="auth" action="">
<fieldset>
<legend>Authentification</legend>
<label for="iden">Identifiant:</label>
<br />
<input type="text" name="iden" id="iden" class="text" size="20" />
<br />
<label for="mdp">Mot de Passe:</label>
<br />
<input type="text" name="mdp" id="mdp" class="text" size="20" />
<br /><br />
<button type="submit" class="button positive"> Connexion</button>
</fieldset>
</form>
<div id="success" class="success" style="display:none;"></div>
</div>
</body>
</html>
On inclut 2 fichiers javascript :
- jquery-1.3.2.js : API JQuery à télécharger ici
- ajax.js : notre fichier qui va faire le lien entre notre formulaire et notre traitement php
Le Javascript
Il est composé de 2 fonctions importantes :
- ready : fonction à exécuter lorsque le document sera prêt.
- ajax : fonction qui charge une page externe en utilisant une requête HTTP
Les Options
On doit fournir à la fonction « ajax » plusieurs options plus ou moins évidentes. C’est pourquoi je m’attarderai sur dataTypes.
dataType (string) : correspond au format des données qui seront renvoyées du serveur. Si aucun type n’est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat : responseXMl ou ResponseText. Voici la liste des types disponibles:
- « xml » : retourne un document XML qui pourra être traité par jQuery.
- « html » : retourne du code HTML au format texte, inclus l’évaluation des script tags.
- « script » : évalue la réponse en Javascript et retourne cette dernière au format texte.
- « json » : évalue la réponse en JSON et retourne un objet Javascript.
Dans notre exemple le fichier action.php retourne des données structurées, c’est pourquoi nous choisissons comme type de données JSON.
$(document).ready(function () {
$("form#auth").submit(function() {
var identifiant = $('#iden').attr('value');
var mdp = $('#mdp').attr('value');
$.ajax({
type: "POST",
url: "action.php",
data: "&iden="+ identifiant + "&mdp=" + mdp,
success: result,
dataType: "json"
});
return false;
});
});
function result(data){
var resultat = '<p>Résultat: <b>'+data.identifiant+'</b> vous êtes connecté avec le mot de passe suivant <b>'+
data.mdp+"</b><br />n L'exemple est finit retourné sur le site <a class='positive' href='"+data.url+"'>Dollois Connection</a></p>";
$('form#auth').hide();
$('div#success').fadeIn("slow");
$('div#success').append(resultat);
}
Le PHP
Le contenu de ce fichier n’a aucun intérêt, vous l’aurez bien compris, si ce n’est, par exemple, de vous permettre d’interroger une base de données pour vérifier si l’identifiant et le mot de passe correspondent bien à un utilisateur du site.
Le seul point à noter est json_encode qui retourne la représentation JSON d’une valeur.
<?php
$result = array(
'url' => 'http://www.dollois.com',
'identifiant' => $_POST['iden'],
'mdp' => $_POST['mdp'],
);
echo json_encode($result);
?>
Fichiers et liens
Vous trouverez un zip de l’exemple
Voici la liste des différents liens qui peuvent aider à approfondir le sujet: