C’est pas tout de créer des serveur web et bases de données, faut savoir els exploiter. Dans ce tutoriel, vous trouverez comment réaliser un petit script pour tester votre serveur en mettant en oeuvre Ajax.
Premier site avec Ajax
L’objectif est de créer une page web avec une zone de saisie couplée à un liste de suggestion issue d’une base de données. A chaque saisie de l’utilisateur, une requete Ajax est soumise au serveur qui va interroger la base de données pour vérifier que le nom d’une ville commençant par les lettres saisies existe pas dans la table villes. Si c’est le cas, le serveur renvoi la liste des villes correspondant. Les villes renvoyées peuvent être cliquées pour remplir automatiquement la zone de saisie.
Créons notre table
Dans Postgresql, on créé la table avec le code SQL suivant
CREATE TABLE villes
(
nom character varying(50) NOT NULL,
CONSTRAINT villes_pkey PRIMARY KEY (nom)
)
Il est téléchargé sur Jquery.com la bibliothèque Javascript JQuery qui est enregistrée à la racine du site. Pour fonctionner, le site est constitué des 3 principaux fichiers suivants:
index.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Vital, afin que le site soit bien interprété par le
navigateur en termes de caractères -->
<title>Mon premier site utilisant Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<!-- lien vers la bibliothèque jquery téléchargées depuis jquery.com -->
<script type="text/javascript" src="suggest.js"></script>
<!-- lien vers le fichier personnel suggest.js qui s'exécuter après
le chargement du DOM -->
<link rel="stylesheet" href="suggest.css" media="screen" />
<!-- lien vers le fichier personnel CSS -->
</head>
<body>
<div>
Saisir un mot: <input type="text" />
<!-- C'est ici que l'utilisateur sélectionnera
les première lettre du nom à trouver -->
</div>
<div>
Suggestions: <span id="suggest"></span>
<!-- c'est dans ce span -élément inline- que s'écrira le résultat
de la requete ajax -->
</div>
</body>
</html>
suggest.js (exécuté côté client: le navigateur web):
$(document).ready(function() {
// $(document).ready() s'exécute dès que le DOM est chargé,
// avant que toutes les ressources soient téléchargées (ex: images)
$('#txt1').keyup(function() {
// inscrit dans le gestionnaire d'événement que la fonction propose() est
// à lancer lorsque la touche du clavier est lachée sur le contrôle txt1
propose(); // fonction à appeler sur le keyup de l'input txt1
});
});
function propose(){
if($('#txt1').val() == '') { // si l'input d'id=txt1 est vide ou vidé
$('#suggest').html(''); // vide le span d'id=suggest
return; // sort de la fonction
}
$.ajax({ // exécute une requete Ajax
type: 'GET', // en mode GET
url: 'suggest.php', // vers le fichier suggest.php
data: 'txt='+$("#txt1").val(), // avec les paramètres suivant donc suggest.php?txt=...
dataType:'text', // le serveur renverra une réponse de suggest.php sous forme texte
success: function(msg){ $('#suggest').html(msg); }
// si Ajax réussi, écrit dans le span d'id=suggest
// la réponse du serveur suggest.php?txt=
});
}
suggest.php(exécuté côté serveur et restituant au client de l’HTML)
<?php
session_start(); // démarrer la gestion des sessions
header("Content-Type: text/plain ; charset=utf-8");
// renvoie un réponse au format MIME text avec les caractères utf-8
header("Cache-Control: no-cache, private"); // anti cache pour HTTP/1.1
header("Pragma: no-cache"); // anti cache pour HTTP/1.0
if (!isset($_SESSION['chaineconnexion'])) {
// si la variable $_SESSION['chaineconnexion'] n'est pas définie alors:
$_SESSION['chaineconnexion']='host=localhost port=5432 user=form password=form dbname=form';
}
if(isset($_REQUEST['txt'])){ // si la variable $_REQUEST['txt'] est bien définie alors:
$conn=pg_connect($_SESSION['chaineconnexion']); // on créé la connexion avec la base PGSQL
$sql = "SELECT nom FROM villes WHERE nom LIKE '".$_REQUEST['txt']."%'";
// on définit la requete à exécuter
$result = pg_query($conn,$sql);
// on exécute la requete, le flux de données généré sera représenté par $result
while($row = pg_fetch_assoc($result)){
// on boucle ligne à ligne (à chaque appel de pg_fetch_array,
// $row récupèrera sous forme de table la ligne de données)
echo '<div onclick=\'$("#txt1").val("'.$row['nom'].
'");$("#suggest").hide();\'>'.$row['nom'].'</div>';
// exemple, renverra: <div onclick='$("#txt1").val("Montpellier");
// $("#suggest").hide();'>Montpellier</div>
}
}
?>
Mise en forme
Pour mettre en forme notre site, on applique une feuille de style simple
suggest.css
root {
display: block;
}
#suggest {
position:fixed;
top:33px;
left:130px;
background-color:#86B0D8;
border-style:solid;
border-width:1px;
margin:5px;
cursor : wait;
}
div:hover{
background-color:white;
}
Voilà, c’est fini. Les prochains articles seront plus « webmapping » avec la spatialisation des bases de données, et leur exploitation.
Premier site avec Ajax
L’objectif est de créer une page web avec une zone de saisie couplée à un liste de suggestion issue d’une base de données. A chaque saisie de l’utilisateur, une requete Ajax est soumise au serveur qui va interroger la base de données pour vérifier que le nom d’une ville commençant par les lettres saisies existe pas dans la table villes. Si c’est le cas, le serveur renvoi la liste des villes correspondant. Les villes renvoyées peuvent être cliquées pour remplir automatiquement la zone de saisie.
Dans Postgresql, on créé la table avec le code SQL suivant
CREATE TABLE villes
(
nom character varying(50) NOT NULL,
CONSTRAINT villes_pkey PRIMARY KEY (nom)
)
Il est téléchargé sur Jquery.com la bibliothèque Javascript JQuery qui est enregistrée à la racine du site. Pour fonctionner, le site est constitué des 3 principaux fichiers suivants:
index.xhtml
<?xml version= »1.0″ encoding= »UTF-8″?>
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml »>
<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″/>
<!– Vital, afin que le site soit bien interprété par le
navigateur en termes de caractères –>
<title>Mon premier site utilisant Ajax</title>
<script type= »text/javascript » src= »jquery.js »></script>
<!– lien vers la bibliothèque jquery téléchargées depuis jquery.com –>
<script type= »text/javascript » src= »suggest.js »></script>
<!– lien vers le fichier personnel suggest.js qui s’exécuter après
le chargement du DOM –>
<link rel= »stylesheet » href= »suggest.css » type= »text/css » media= »screen » />
<!– lien vers le fichier personnel CSS –>
</head>
<body>
<div>
Saisir un mot: <input type= »text » id= »txt1″ />
<!– C’est ici que l’utilisateur sélectionnera
les première lettre du nom à trouver –>
</div>
<div>
Suggestions: <span id= »suggest »></span>
<!– c’est dans ce span -élément inline- que s’écrira le résultat
de la requete ajax –>
</div>
</body>
</html>
suggest.js
$(document).ready(function() {
// $(document).ready() s’exécute dès que le DOM est chargé,
// avant que toutes les ressources soient téléchargées (ex: images)
$(‘#txt1’).keyup(function() {
// inscrit dans le gestionnaire d’événement que la fonction propose() est
// à lancer lorsque la touche du clavier est lachée sur le contrôle txt1
propose(); // fonction à appeler sur le keyup de l’input txt1
});
});
function propose(){
if($(‘#txt1’).val() == ») { // si l’input d’id=txt1 est vide ou vidé
$(‘#suggest’).html( »); // vide le span d’id=suggest
return; // sort de la fonction
}
$.ajax({ // exécute une requete Ajax
type: ‘GET’, // en mode GET
url: ‘suggest.php’, // vers le fichier suggest.php
data: ‘txt=’+$(« #txt1 »).val(), // avec les paramètres suivant donc suggest.php?txt=…
dataType:’text’, // le serveur renverra une réponse de suggest.php sous forme texte
success: function(msg){ $(‘#suggest’).html(msg); }
// si Ajax réussi, écrit dans le span d’id=suggest
// la réponse du serveur suggest.php?txt=
});
}
suggest.php
<?php
session_start(); // démarrer la gestion des sessions
header(« Content-Type: text/plain ; charset=utf-8 »);
// renvoie un réponse au format MIME text avec les caractères utf-8
header(« Cache-Control: no-cache, private »); // anti cache pour HTTP/1.1
header(« Pragma: no-cache »); // anti cache pour HTTP/1.0
if (!isset($_SESSION[‘chaineconnexion’])) {
// si la variable $_SESSION[‘chaineconnexion’] n’est pas définie alors:
$_SESSION[‘chaineconnexion’]=’host=localhost port=5432 user=form password=form dbname=form’;
}
if(isset($_REQUEST[‘txt’])){ // si la variable $_REQUEST[‘txt’] est bien définie alors:
$conn=pg_connect($_SESSION[‘chaineconnexion’]); // on créé la connexion avec la base PGSQL
$sql = « SELECT nom FROM villes WHERE nom LIKE ‘ ».$_REQUEST[‘txt’]. »%' »;
// on définit la requete à exécuter
$result = pg_query($conn,$sql);
// on exécute la requete, le flux de données généré sera représenté par $result
while($row = pg_fetch_assoc($result)){
// on boucle ligne à ligne (à chaque appel de pg_fetch_array,
// $row récupèrera sous forme de table la ligne de données)
echo ‘<div onclick=\’$(« #txt1 »).val(« ‘.$row[‘nom’].
‘ »);$(« #suggest »).hide();\’>’.$row[‘nom’].'</div>’;
// exemple, renverra: <div onclick=’$(« #txt1 »).val(« Montpellier »);
// $(« #suggest »).hide();’>Montpellier</div>
}
}
?>
Mise en forme
Pour mettre en forme notre site, on applique une feuille de style simple suggest.css
root {
display: block;
}
#suggest {
position:fixed;
top:33px;
left:130px;
background-color:#86B0D8;
border-style:solid;
border-width:1px;
margin:5px;
cursor : wait;
}
div:hover{
background-color:white;
}
Spatialiser la base de données colloque
Même si PostgreSQL a été installé conjointement avec PostGis, la base de données n’est pas par défaut spatialisée. Un rapide coup d’oeil aux tables nous montre l’absence des deux principales tables nécessaires à PostGIS, geometry_columns et statial_ref_sys.
Voilà comment les ajouter, ainsi que l’ensemble des fonctions necessaires à la spatialisation de la base colloque:
sudo su – postgres
createlang plpgsql colloque
psql -f /usr/share/postgresql-8.3-postgis/lwpostgis.sql -d colloque
psql -f /usr/share/postgresql-8.3-postgis/spatial_ref_sys.sql -d colloque
Pour ajouter les droits d’usage sur ces tables à l’utilisateur, saisir :
sudo –s –u postgres
psql colloque
ALTER TABLE geometry_columns OWNER TO colloque;
ALTER TABLE spatial_ref_sys OWNER TO colloque;
