CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:25:59

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> GESTION SIMPLIFIÉE D'UNE TABLE CLIENTE EN XML

GESTION SIMPLIFIÉE D'UNE TABLE CLIENTE EN XML

Information sur la source

Note :

10,00 / 10

Catégorie :Divers Classé sous :xml, selectSingleNode, insertBefore, cloneNode, documentElement Niveau :Initié Date de création :07/10/2007 Date de mise à jour :21/10/2007 06:26:36 Vu / téléchargé :6 382 / 478

Auteur : jchan

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Manipulation d'une base XML avec compteur de page.
Opérations habituelles: Ajout,suppression,modification et sauvegarde.
Conditions d'utilisation: Windows XP avec droits admins et Internet Explorer.Téléchargez le zip pour les icônes.

Source

<!--
/*------------------------------------------------------------------------
****** Gestion d'une Table Cliente *****
XML / JAVASCRIPT / DHTML
Environnement : Windows XP (avec droit Admin)
Navigateur : Internet Explorer
Niveau : Débutant confirmé
Description : Gestion simplifiée d'une base cliente en mode local.
"Nom,Prenom,Adresse,...".
Utilisation d'un fichier XML comme unité de stockage.
Opérations usuelles : Ajout, Suppression , Modification , Annulation et
sauvegarde, et un compteur de page dynamique pour
parcourir la table.Si aucune base n'existe,le
programme génère automatique un modèle avant toutes
opérations. Particularité : Msxml en natif.Utilisation
de la balise <xml> pour l'intégration des données dans
la page html. Bug : Accés refusé pour la sauvegarde en
local de la base xml à l'appel de la méthode save du
composant Msxml2.DOMDocument. Comme alternatif,j'ai
utilisé le FSO du WSH.
--------------------------------------------------------------------------*/ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<HTML>
<HEAD>
<TITLE>[ Base Abonné ]</TITLE>
<META name=VI60_defaultClientScript content=JavaScript>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript" language="javascript">
/* --------- Variables globales --------------*/
var ITEMTAGNAME = "abonne";
var LABELCOL = new Array("num_abonne","Nom","Prenom","Adresse","Code_Postal","Ville","Telephone");
// LABELCOL = Label des colonnes selon la structure d'un noeud abonné. La casse est respectée
var MAXREC = 0; // Nombre d'abonnés dans la "base" - Initialisé au chargement
var TABROW = 20; // Nombre d'enregistrement par page [ TABROW = PAGE ]
var DEBINDEX = 0; // Debut de Lecture des items DEBINDEX est selon l'ordre inscrite dans la base
var FININDEX = 0; // Fin de Lecture des items FININDEX est selon l'ordre inscrite dans la base
var PAGE = 20; // Par défaut 20 items (video) par Lecture [ PAGE = TABROW ]
var CPTPG = 1; // Compteur de page x / MAXPG -Initialisé au chargement voir initCPTPG()
var MAXPG = 0; // Compteur de page MAXREC / PAGE -Initialisé au chargement voir initCPTPG()
var NUMRECMAJ = 0; // Numéro element selectionné pour une mise à jour
var noderec = null; // Utiliser pour la création d'un nouveau abonne
var ENCODAGE = "iso-8859-1"; // codage des caractères
var FILEDBABN = "dbabonne.xml"; // Localisation de la Base Abonne
// ex syntaxe : Répertoire courant = "dbabonne.xml"
// Autre chemin existant = "c:\\database\\dbabonne.xml"
// -------------- ListSelectRec(numero) -----------------------
// Description : Manipulation sur l'enregistrement sélectionné (clické)
// Entree : Numero abonne
// Sortie : Affichage d'une seule ligne pour toutes manipulations :
// Ajout,Suppression,Modification,Annulation,Sauvegarde
// Appel de Fonction : majItemRec() - Modification de l'enregistrement
// delitemrec() - Suppression de l'enregistrement
// AnnulerItemRec() - Annulation des modifications en cours
// REM: : L'enregistrment sur disque est effectuée pour chaque opération
//-------------------------------------------------------------
function ListSelectRec(numero)
{
if(ListSelectRec.caller.toString().match(/addItemRec/i)) // Pour l'ajout d'un nouveau abonne
{
delrec();
addrec(TDBXML.rows.length) ; // une seule ligne à manipuler pour toutes opérations [debut index = 0]
var strIMG = "<BR><BR><DIV align=center><IMG id=imgretourpg SRC='img/icoleft1.bmp' " +
"title='Retour à la page' style='HEIGHT: 20px;cursor:hand' height=20 " +
" onclick='javascript:retourpg();'></IMG>" +
" <IMG SRC='img/icorec.bmp' title='Mise à jour dans la base' style='HEIGHT:20px;cursor:hand'"+
" height=20 onclick='javascript:majItemRec();'></IMG></DIV>"
}
else
{
var oNode = GetItemRec(numero);
if(!oNode){ txtNumero.style.backgroundColor = "red"; return;}
var xmldoc = GetXMLDocument(oNode.xml)
delrec();
GetRec(0,1,xmldoc) // Une ligne pour une selection
var strIMG = "<BR><BR><DIV align=center><IMG id=imgretourpg SRC='img/icoleft1.bmp'" +
" title='Retour à la page' style='HEIGHT: 20px;cursor:hand' height=20 onclick='javascript:retourpg();'>" +
" </IMG><IMG SRC='img/icorec.bmp' title='Mise à jour dans la base' style='HEIGHT: 20px;cursor:hand'" +
" height=20 onclick='javascript:majItemRec();'>" +
"<IMG SRC='img/icoundo.bmp' title='Annuler' style='HEIGHT: 20px;cursor:hand' height=20 " +
" onclick='javascript:AnnulerItemRec();'></IMG><IMG SRC='img/icodel.bmp' title='Supprimer'" +
" style='HEIGHT: 20px;cursor:hand' height=20 onclick='javascript:delitemrec();'></IMG></DIV>"
}
document.getElementById("TRREC0").onmouseout = null;
document.getElementById("TRREC0").onclick = null;
document.getElementById("TRREC0").onkeydown = null;
divopt.innerHTML = "";
divopt.innerHTML = strIMG;
document.getElementById("TRREC0").all.tags("INPUT").item(0).onkeyup = numcode_onkeyup;
}
/* --------------------------------[ GETREC(deb_index,fin_index,xmldoc) ]-------------------------------
Description: Lecture des enregistrements par PAGE
Entree:
- deb_index : debut de position pour la lecture d'enregistrement
- fin_index : fin de position pour la lecture d'enregistrement
- xmldoc : Document xml correspondant à un noeud d'abonné
Sortie:
- Récupération des données (num_video,Nom,Prenom,..)pour chaque abonné
Appel de fonctions:
- Fonction addrec(integer) . Création et insertions des lignes pour chaque enregistrement
l'affichage est effectuée sous la Table TDBXML
Rem: Ci-dessous la structure d'un enregistrement (noeud ou item) pour un abonné
<abonne>
<num_abonne></num_abonne>
<Nom></Nom>
<Prenom></Prenom>
<Adresse></Adresse>
<Code_Postal></Code_Postal>
<Ville></Ville>
<Telephone></Telephone>
</abonne>
.....
Utilisation : Par defaut les lectures se font par PAGE (20 items) et les INDEX debutent à 0
- GetRec(0,20) Lecture de 20 items
- GetRec(5,15) Lecture de 10 items à partir du 5ième
------------------------------------------------------------------------------------------------*/
function GetRec(deb_index,fin_index,XMLDOC)
{
var NBREC = fin_index - deb_index;
try{
for(i=0;i<NBREC;i++) // Création des lignes dans la Table TDBXML selon la valeur PAGE
addrec(i);
if(fin_index > 1 && fin_index <= PAGE ) // Cas avec base vide et création premiers elements
fin_index = MAXREC; // MAXREC et fin_index <= PAGE
else
{
if(fin_index != 1) // Récupération des elements dans la base.
{ // fin_index = 1 : Opération sur element ou nouveau element
deb_index = (CPTPG - 1) * PAGE;
fin_index = deb_index + (MAXREC - ((CPTPG - 1) * PAGE));
}
}
var objNodes = XMLDOC.getElementsByTagName(ITEMTAGNAME); // Récupération par tranche des items
var row = -1; // index des lignes à partir de 0
for(var i=deb_index;i<fin_index;i++)
{
row++;
for(var j=0;j<objNodes.item(i).childNodes.length;j++)
{
var champ = document.getElementById("TRREC" + row).all.tags("INPUT");
if(champ.item(j).id == LABELCOL[j]) // Contrôle supplémentaire selon le libellé
champ.item(j).value = objNodes.item(i).childNodes.item(j).text;
else
{
champ.item(j).value = "**Erreur**";
}
// Insertions des données selon la correspondance
}
}
}catch(e){ }
}
// ---------- Efface l'affichage en cours des enregistrements ---------
function delrec()
{
while(TDBXML.rows.length > 0)
var ret = TBODYREC.deleteRow(0);
}
/* --------------------------------[ addrec(row) ]-------------------------------
Entree:
- row : Numero d'index ( index d'un noeud = index d'une ligne dans la Table TDBXML)
Sortie:
- Création lignes indépendantes et zone de champs pour chaque attribut d'un element
----------------------------------------------------------------------------*/
function addrec(row)
{
var objTR =TDBXML.insertRow();
var objTD0 = document.createElement("TD");
var objTD1 = document.createElement("TD");
var objTD2 = document.createElement("TD");
var objTD3 = document.createElement("TD");
var objTD4 = document.createElement("TD");
var objTD5 = document.createElement("TD");
var objTD6 = document.createElement("TD");
objTR.id = "TRREC" + row;
objTD0.id = "TDREC0" + row;
objTD1.id = "TDREC1" + row;
objTD2.id = "TDREC2" + row;
objTD3.id = "TDREC3" + row;
objTD4.id = "TDREC4" + row;
objTD5.id = "TDREC5" + row;
objTD6.id = "TDREC6" + row;
document.getElementById(objTR.id).appendChild(objTD0);
document.getElementById(objTR.id).appendChild(objTD1);
document.getElementById(objTR.id).appendChild(objTD2);
document.getElementById(objTR.id).appendChild(objTD3);
document.getElementById(objTR.id).appendChild(objTD4);
document.getElementById(objTR.id).appendChild(objTD5);
document.getElementById(objTR.id).appendChild(objTD6);
document.getElementById(objTD0.id).innerHTML =
"<INPUT id=num_abonne name=num_abonne style='WIDTH: 66px; HEIGHT: 22px; BACKGROUND-COLOR: darkgray' size=11></INPUT>";
document.getElementById(objTD1.id).innerHTML =
"<INPUT id=Nom name=Nom style=' WIDTH: 150px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' size=25></INPUT>" ;
document.getElementById(objTD2.id).innerHTML =
"<INPUT id=Prenom name=Prenom style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' ></INPUT>" ;
document.getElementById(objTD3.id).innerHTML =
"<INPUT id=Adresse name=Adresse style=' WIDTH: 205px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' size=39></INPUT>" ;
document.getElementById(objTD4.id).innerHTML =
"<INPUT id=Code_Postal name=Code_Postal style='WIDTH:89px; HEIGHT:22px; BACKGROUND-COLOR:darkkhaki' size=17></INPUT>";
document.getElementById(objTD5.id).innerHTML =
"<INPUT id=Ville name=Ville style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR:darkkhaki' ></INPUT>" ;
document.getElementById(objTD6.id).innerHTML =
"<INPUT id=Telephone name=Telephone style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' ></INPUT>" ;
document.getElementById(objTR.id ).onmouseover = colorbkover;
document.getElementById(objTR.id ).onmouseout = colorbkout;
document.getElementById(objTR.id ).onkeydown = NoEditTR;
document.getElementById(objTR.id ).onclick = selectItemRec;
}
// -------- champ non editable -------------------
function NoEditTR()
{
if(window.event.keyCode != 9 ) return false;
}
// -- Recherche et retourne le noeud correspondant au numéro abonné --------
function GetItemRec(numero)
{
try{
var oNode = dbXML.selectSingleNode("//abonne[num_abonne = " + numero + "]");
}catch(e){ return null;}
return oNode; // null si numero inexistant
}
/* --------------------------------[ majItemRec() ]-------------------------------
Description: - Opération de mise à jour sur l'enregistrement sélectionné
Si le numéro d'abonné est modifié ou un nouveau est créé,
le noeud sera inséré selon l'ordre croissant numérique.
Entree: -
Sortie: - Sauvegarde de la base sur disque aprés opération de modification
Appel de fonction:
- MajChampItemRec(noderec) :
----------------------------------------------------------------------------*/
function majItemRec()
{
var numero = document.getElementById("TRREC0").all.tags("INPUT").item(0).value;
var strMess = "";
if(GetItemRec(numero) && numero != NUMRECMAJ)
{
document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "red";
alert("Le numéro : " + numero + " est déjà inscrit dans la base");
return;
}
else {
if(numero != NUMRECMAJ)
strMess = "\n\nNUMERO : " + NUMRECMAJ + " -> " + numero ;
if(numero == "")
{
document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "red";
return;
}
}
var blnret = window.confirm("Mise à jour dans la base sans annulation ?" + strMess);
if(blnret == false) return;
noderec = GetItemRec(numero);
if(noderec) // Mise à jour avec le même numero
{
MajChampItemRec(noderec);
savexml(dbXML.xml,FILEDBABN); // Mise à jour de la base sur disque
}
else // Mise à jour avec un autre numero
{
var docElem = dbXML.documentElement;
try{
var oNode = docElem.selectSingleNode("//abonne[num_abonne > " + numero + "]");
}catch(e){}
noderec = GetItemRec(NUMRECMAJ); // Récupération du noeud selectionne et mise à jour des champs
MajChampItemRec(noderec); // Mise à jour des champs du noeud selectionne
if(oNode) // Insertion d'un noeud selon l'odre croissant
var oDoc = docElem.insertBefore(noderec,oNode); // oDoc = noderec si OK
else // Insertion d'un noeud en fin de liste si numero superieur auc autres
var oDoc = docElem.insertBefore(noderec,docElem.lastchild); // oDoc = noderec si OK
if(oDoc)
{
NUMRECMAJ = -1;
savexml(dbXML.xml,FILEDBABN); // Mise à jour de la base sur disque
}
}
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
}
function MajChampItemRec(noeudAbn)
{
if(!noeudAbn)
{
noderectmp = itemRecXML.cloneNode(true); //true = arborescence du noeud <video>...</video>
noderec = noderectmp.selectSingleNode("//abonne");
}
for(var j=0;j<noderec.childNodes.length;j++)
{
var champ = document.getElementById("TRREC0").all.tags("INPUT");
if(champ.item(j).id == LABELCOL[j]) // Contrôle supplémentaire selon le libellé
{ noderec.childNodes.item(j).text = champ.item(j).value;
champ.item(j).style.backgroundColor = "lightsteelblue";
} // Insertions des données selon la correspondance
}
}
function savexml(strXML,strFILEDB)
{
var Path = window.document.location.pathname;
var strPath = Path.substr(1,(Path.length - 1) - objFS.GetFileName(Path).length );
strPath = strPath.replace(/\\/g,"\\\\");
var objxmldoc = GetXMLDocument(strXML);
var objxmldocelem = objxmldoc.documentElement;
strPI = "<?xml version=\"1.0\" encoding=\"" + ENCODAGE + "\"?>"; // Ajout entête xml + Encodage
strXML = strPI + String.fromCharCode(13,10) + objxmldocelem.xml;
if(strFILEDB.match(/:\\/i))
var strSaveXML = strFILEDB;
else
var strSaveXML = strPath + strFILEDB;
strSaveXML = strSaveXML.replace(/%20/g," ");
try{
var objFile = objFS.OpenTextFile(strSaveXML, 2, true); // Création d'un nouveau fichier ASCII
objFile.Write(strXML);
objFile.Close();
}catch(e){ alert("Erreur de création sur : " + strSaveXML + "\n" + e.description + "\n\n" + " Vérifier que le répertoire existe"); return;}
}
function delitemrec()
{
if( document.getElementById("TRREC0").all.tags("INPUT").item(0).value != NUMRECMAJ )
{ alert("La suppression est réalisée qu'avec le numéro sélectionné.");return;}
var blnret = window.confirm("Suppression définitive du Numéro : " + NUMRECMAJ + " ?");
if(blnret == false) return;
var objnoderec = GetItemRec(NUMRECMAJ);
var docelem = dbXML.documentElement;
var xmlabn = docelem.removeChild(objnoderec);
savexml(docelem.xml,FILEDBABN)
/* Mise à jour compteur selon suppression dans la première PAGE ou dernière PAGE*/
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
if(CPTPG == MAXPG) // dernière PAGE
{
DEBINDEX--;
FININDEX--;
if( (FININDEX % PAGE) == 0)
CPTPG-- ;
}
initCPTPG(PAGE,MAXREC,CPTPG);
retourpg();
}
function AnnulerItemRec(){
ListSelectRec(NUMRECMAJ)
}
function selectItemRec()
{
txtNumero.value = document.getElementById(this.id).all.tags("INPUT").item(0).value
NUMRECMAJ = txtNumero.value;
ListSelectRec(txtNumero.value)
}
function numcode_onkeyup()
{
document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "darkgray";
var numero = document.getElementById("TRREC0").all.tags("INPUT").item(0).value;
if(isNaN(numero))
document.getElementById("TRREC0").all.tags("INPUT").item(0).value = numero.substring(0,numero.length - 1)
}
function colorbkover()
{
var champ = document.getElementById(this.id).all.tags("INPUT");
for(var i=1;i<champ.length;i++)
champ.item(i).style.backgroundColor = "white";
txtNumero.style.backgroundColor = "darkgray";
}
function colorbkout()
{
var champ = document.getElementById(this.id).all.tags("INPUT");
for(var i=1;i<champ.length;i++)
champ.item(i).style.backgroundColor = "darkkhaki";
var height = parseInt(video.style.height.substr(0,video.style.height.length - 2)) - 10;
}
function initCPTPG(ROWPAGE,NBREC,COMPTEUR) //Initialisation du compteur de PAGE
{
if(NBREC == 0) COMPTEUR = 0 ;
var nbpage = NBREC/ROWPAGE;
if(nbpage > parseInt(NBREC/ROWPAGE))
nbpage = parseInt(NBREC/ROWPAGE) + 1;
MAXPG = nbpage;
NBPG.innerHTML = COMPTEUR + " / " + MAXPG;
}
// un Document XML est crée à partir d'une syntaxe xml.
function GetXMLDocument(strXML)
{
var msxmldoc = new ActiveXObject("Msxml2.DOMDocument");
msxmldoc.async = false;
msxmldoc.resolveExternals = false;
msxmldoc.validateOnParse = false;
msxmldoc.loadXML(strXML) ;
return msxmldoc;
}
function retourpg()
{
divopt.innerHTML = "";
initCPTPG(PAGE,MAXREC,CPTPG);
if(MAXREC <= PAGE)
{
pgPrec.click();
}
else
{
delrec();
GetRec(DEBINDEX ,FININDEX,dbXML);
}
video.focus();
NUMRECMAJ = 0;
}
</SCRIPT>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--
function window_onload() { // Initialisation variable,compteur de page et affichage d'une Page d'enregistrement
CreateDB(FILEDBABN); // Création d'une base vide si inexistant
DEBINDEX = 0;
FININDEX = PAGE;
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
initCPTPG(PAGE,MAXREC,CPTPG)
GetRec(DEBINDEX ,FININDEX,dbXML);
}
/* -------------------------[ COMPTEUR DE PAGE ]------------------
Description:
- Affiche une Page d'abonnée par tranche de 20(par défaut) .
Appel de fonction :
- pgSuiv() * Page suivante
- pgPrec() * Page précédente
- firstpg() * Première Page
- lastpg() * Dernière Page
-------------------------------------------------------------------*/
function pgSuiv_onclick() {
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
if(MAXREC <= PAGE) return;
divopt.innerHTML = "";
DEBINDEX = FININDEX;
FININDEX = DEBINDEX + PAGE; // PAGE = 20 par defaut
if(FININDEX > MAXREC)
{ DEBINDEX = MAXREC - PAGE;
FININDEX = MAXREC
CPTPG = MAXPG;
}
else
CPTPG++;
initCPTPG(PAGE,MAXREC,CPTPG);
delrec();
GetRec(DEBINDEX ,FININDEX,dbXML)
}
function pgPrec_onclick() {
divopt.innerHTML = "";
DEBINDEX -= PAGE;
FININDEX -= PAGE;
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
if(DEBINDEX < 0)
{ DEBINDEX = 0;
FININDEX = PAGE;
CPTPG = 1;
}
else
CPTPG--;
initCPTPG(PAGE,MAXREC,CPTPG);
delrec();
GetRec(DEBINDEX ,FININDEX,dbXML)
}
function firstpg_onclick() {
divopt.innerHTML = "";
DEBINDEX = 0;
FININDEX = PAGE ;
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
CPTPG = 1;
initCPTPG(PAGE,MAXREC,CPTPG);
delrec()
GetRec(DEBINDEX ,FININDEX,dbXML);
}
function lastpg_onclick() {
divopt.innerHTML = "";
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
if(MAXREC <= PAGE) return;
DEBINDEX = MAXREC - PAGE;
FININDEX = MAXREC;
CPTPG = MAXPG;
initCPTPG(PAGE,MAXREC,CPTPG);
delrec()
GetRec(DEBINDEX ,FININDEX,dbXML);
}
function txtNumero_onclick() {
txtNumero.select()
}
function txtNumero_onkeyup() {
if(isNaN(txtNumero.value))
txtNumero.value = txtNumero.value.substring(0,txtNumero.value.length - 1)
txtNumero.style.backgroundColor = "darkgray";
}
function txtNumero_onkeypress() {
if(window.event.keyCode == 13 && txtNumero.value != "")
{ window.event.returnValue = false;
NUMRECMAJ = txtNumero.value;
ListSelectRec(txtNumero.value);
}
}
// ------------ Nouveau abonne ----------
function addItemRec_onclick() {
if(NUMRECMAJ == -1)
{
var blnret = window.confirm("Annuler le travail en cours et créer un nouveau ?")
if(blnret == false) return;
}
NUMRECMAJ = -1
ListSelectRec(NUMRECMAJ)
}
function window_onmouseover() {
window.scrollTo(0,0)
}
//-->
</SCRIPT>
</HEAD>
<BODY bottomMargin=0 leftMargin=0 topMargin=0 rightMargin=0 background="" LANGUAGE=javascript
onload="return window_onload()" >
<TABLE align=center width="914" height="16" style="BACKGROUND-COLOR: darkgray"><TR><TD align=middle HEIGHT="16">
<FONT style="COLOR: white">*** LISTE DES ABONNES ***</FONT></TD></TR></TABLE>
<HR size=2 color=white>
<DIV align=center style="HEIGHT: 200px" id=DIV1>
<TABLE BORDER=1 style="FONT-WEIGHT: normal; LEFT: -8px; FONT-STYLE: normal; POSITION: relative; HEIGHT: 29px">
<THEAD>
<TR>
<TH style="WIDTH: 66px; HEIGHT: 22px" >Numéro</TH>
<TH style="WIDTH: 150px; HEIGHT: 22px" >Nom</TH>
<TH style="WIDTH: 114px; HEIGHT: 22px" >Prénom</TH>
<TH style="WIDTH: 205px; HEIGHT: 22px" >Adresse</TH>
<TH style="WIDTH: 89px; HEIGHT: 22px" >Code Postal</TH>
<TH style="WIDTH: 114px; HEIGHT: 22px" >Ville</TH>
<TH style="WIDTH: 114px; HEIGHT: 22px" >Téléphone</TH>
</TR>
</TABLE>
<DIV id="video" style="OVERFLOW-Y: scroll; WIDTH: 915px; BORDER-TOP-STYLE: inset; BORDER-RIGHT-STYLE: inset;
BORDER-LEFT-STYLE: inset; HEIGHT: 310px; BACKGROUND-COLOR: darkkhaki; BORDER-BOTTOM-STYLE: inset">
<TABLE id="TDBXML" BORDER=1 width=800 style="FONT-WEIGHT: normal; FONT-STYLE: normal" >
<TBODY id=TBODYREC >
</TBODY>
</TABLE>
<DIV id=divopt></DIV></DIV>
<IMG id=addItemRec SRC="img/icoabn.bmp" title="Nouveau abonné" ALIGN=center height=20 width=20
style="CURSOR: hand" LANGUAGE=javascript onclick="return addItemRec_onclick()"></IMG> </IMG>
<INPUT id=txtNumero name=txtNumero style="FONT-WEIGHT: bold; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid;
BORDER-LEFT-STYLE: solid; BACKGROUND-COLOR: darkgray; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: solid"
align=middle LANGUAGE =javascript
onclick ="return txtNumero_onclick()"
onkeyup="return txtNumero_onkeyup()"
onkeypress="return txtNumero_onkeypress()"
title=Numéro size=16>
<HR align=center width=100>
<DIV align=center><IMG SRC="img/icofirst.bmp" style="WIDTH: 32px; CURSOR: hand; HEIGHT: 32px" height=32 id=firstpg
LANGUAGE=javascript onclick="return firstpg_onclick()" width=32>
<IMG language=javascript id=pgPrec style="WIDTH: 32px;
HEIGHT:32px" onclick="return pgPrec_onclick()" height=32 alt="" hspace=0 src="img/icol1.bmp" width=32 useMap="" border=0>
<IMG language=javascript id=pgSuiv style="WIDTH: 32px; CURSOR: hand; HEIGHT: 32px" onclick="return pgSuiv_onclick()"
height=32 alt="" hspace=0 src="img/icor1.bmp" width=32 useMap="" border=0 >
<IMG SRC="img/icolast.bmp" style="LEFT: 79px; WIDTH: 32px; CURSOR: hand; TOP: 0px; HEIGHT: 32px" height=32 id=lastpg
LANGUAGE=javascript onclick="return lastpg_onclick()" alt="" hspace=0 width=32 useMap="" border=0>
<BR><SPAN id=NBPG></SPAN></DIV>
</DIV>
<object id=objFS classid=clsid:0D43FE01-F093-11CF-8940-00A0C9054228 VIEWASTEXT></object>
<SCRIPT type="text/javascript" language="javascript">
<!--
function CreateDB(strFILEDB)
{
/* --------- Creation de la base si inexistant --------------*/
var Path = window.document.location.pathname;
var strPath = Path.substr(1,(Path.length - 1) - objFS.GetFileName(Path).length );
strPath = strPath.replace(/\\/g,"\\\\");
if(strFILEDB.match(/:\\/i) )
var strSaveXML = strFILEDB; // Base avec chemin absolu
else
var strSaveXML = strPath + strFILEDB; // Base avec chemin par défaut
strSaveXML = strSaveXML.replace(/%20/g," ");
if(objFS.FileExists(strSaveXML) == false)
savexml("<evideo></evideo>",strSaveXML)
/* -------- Affectation de la base au document XML ----------*/
dbXML.src = strSaveXML;
}
-->
</SCRIPT>
<xml ID="dbXML" ></xml>
<xml id="itemRecXML">
<abonne>
<num_abonne></num_abonne>
<Nom></Nom>
<Prenom></Prenom>
<Adresse></Adresse>
<Code_Postal></Code_Postal>
<Ville></Ville>
<Telephone></Telephone>
</abonne>
</xml>
<div align=center style="POSITION:relative;TOP:0%">
<hr width="90%" color=black SIZE=2>
<img alt="www.aufildutemps.new.fr" hspace=0 src="img/logo.png" vspace=0 border=0 ></div>
</BODY>
</HTML>

<!--
/*------------------------------------------------------------------------
		****** Gestion d'une Table Cliente *****
XML / JAVASCRIPT / DHTML

Environnement	: Windows XP (avec droit Admin) 
Navigateur 	: Internet Explorer 
Niveau		: Débutant confirmé 
Description	: Gestion simplifiée d'une base cliente en mode local.
		  "Nom,Prenom,Adresse,...". 
		  Utilisation d'un fichier XML comme unité de stockage. 
Opérations usuelles : Ajout, Suppression , Modification , Annulation et
		      sauvegarde, et un compteur de page dynamique pour
		      parcourir la table.Si aucune base n'existe,le 
		      programme génère automatique un modèle avant toutes
		      opérations. Particularité : Msxml en natif.Utilisation
		      de la balise <xml> pour l'intégration des données dans
		      la page html. Bug : Accés refusé pour la sauvegarde en
		      local de la base xml à l'appel de la méthode save du 
		      composant Msxml2.DOMDocument. Comme alternatif,j'ai 
		      utilisé le FSO du WSH.
--------------------------------------------------------------------------*/ -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<HTML>
<HEAD>
<TITLE>[ Base Abonné ]</TITLE>
<META name=VI60_defaultClientScript content=JavaScript>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<SCRIPT type="text/javascript" language="javascript">

				/* --------- Variables globales  --------------*/
	

var ITEMTAGNAME = "abonne";
var LABELCOL = new Array("num_abonne","Nom","Prenom","Adresse","Code_Postal","Ville","Telephone");  
			// LABELCOL = Label des colonnes selon la structure d'un noeud abonné. La casse est respectée
var MAXREC 	= 0;	// Nombre d'abonnés dans la "base"  - Initialisé au chargement 
var TABROW 	= 20;	// Nombre d'enregistrement par page [ TABROW = PAGE ]
var DEBINDEX 	= 0;	// Debut de Lecture des items  DEBINDEX est selon l'ordre inscrite dans la base
var FININDEX 	= 0;	// Fin de Lecture des items    FININDEX est selon l'ordre inscrite dans la base
var PAGE 	= 20;	// Par défaut 20 items (video) par Lecture [ PAGE = TABROW ]
var CPTPG 	= 1;	// Compteur de page x / MAXPG		-Initialisé au chargement  voir initCPTPG()
var MAXPG 	= 0;	// Compteur de page  MAXREC / PAGE	-Initialisé au chargement voir initCPTPG()
var NUMRECMAJ 	= 0;	// Numéro element selectionné pour une mise à jour 
var noderec 	= null;	// Utiliser pour la création d'un nouveau abonne
var ENCODAGE 	= "iso-8859-1";			// codage des caractères 
var FILEDBABN	= "dbabonne.xml";		// Localisation de la Base Abonne  
						// ex syntaxe : Répertoire courant =	"dbabonne.xml" 
						//	       Autre chemin existant =	"c:\\database\\dbabonne.xml"

// -------------- ListSelectRec(numero) -----------------------
// Description	: Manipulation sur l'enregistrement sélectionné (clické)
// Entree 	: Numero abonne
// Sortie	: Affichage d'une seule ligne pour toutes manipulations :	
// 	    	  Ajout,Suppression,Modification,Annulation,Sauvegarde
// Appel de Fonction	: majItemRec()     - Modification de l'enregistrement
//			  delitemrec()	   - Suppression de l'enregistrement
//			  AnnulerItemRec() - Annulation des modifications en cours
// REM: 	: L'enregistrment sur disque est effectuée pour chaque opération
//-------------------------------------------------------------
function ListSelectRec(numero)
{		
	if(ListSelectRec.caller.toString().match(/addItemRec/i)) // Pour l'ajout d'un nouveau abonne
	{
		delrec();
		addrec(TDBXML.rows.length) ;	// une seule ligne à manipuler pour toutes opérations [debut index = 0]
		var strIMG = "<BR><BR><DIV align=center><IMG id=imgretourpg SRC='img/icoleft1.bmp' " + 
		"title='Retour à la page' style='HEIGHT: 20px;cursor:hand' height=20 " + 
		" onclick='javascript:retourpg();'></IMG>" + 
		"  <IMG SRC='img/icorec.bmp' title='Mise à jour dans la base' style='HEIGHT:20px;cursor:hand'"+ 
		" height=20 onclick='javascript:majItemRec();'></IMG></DIV>"
	}
	else
	{
		var oNode = GetItemRec(numero);
		if(!oNode){  txtNumero.style.backgroundColor = "red"; return;}
		var xmldoc = GetXMLDocument(oNode.xml)
		delrec();
		GetRec(0,1,xmldoc)		// Une ligne pour une selection
		var strIMG = "<BR><BR><DIV align=center><IMG id=imgretourpg SRC='img/icoleft1.bmp'" + 
		" title='Retour à la page' style='HEIGHT: 20px;cursor:hand' height=20 onclick='javascript:retourpg();'>" + 
		" </IMG><IMG SRC='img/icorec.bmp' title='Mise à jour dans la base' style='HEIGHT: 20px;cursor:hand'" +
		" height=20 onclick='javascript:majItemRec();'>" + 
		"<IMG SRC='img/icoundo.bmp' title='Annuler' style='HEIGHT: 20px;cursor:hand' height=20 " + 
		" onclick='javascript:AnnulerItemRec();'></IMG><IMG SRC='img/icodel.bmp' title='Supprimer'" + 
		" style='HEIGHT: 20px;cursor:hand' height=20 onclick='javascript:delitemrec();'></IMG></DIV>"
	}
		document.getElementById("TRREC0").onmouseout = null;
		document.getElementById("TRREC0").onclick    = null;
		document.getElementById("TRREC0").onkeydown  = null;
		divopt.innerHTML = "";
		divopt.innerHTML = strIMG; 
		document.getElementById("TRREC0").all.tags("INPUT").item(0).onkeyup = numcode_onkeyup;
		
}



/* --------------------------------[ GETREC(deb_index,fin_index,xmldoc) ]-------------------------------
	Description:	Lecture des enregistrements par PAGE
	Entree:
		- deb_index : debut de position pour la lecture d'enregistrement
		- fin_index : fin   de position pour la lecture d'enregistrement
		- xmldoc	: Document xml correspondant à un noeud d'abonné		
	Sortie:
		- Récupération des données (num_video,Nom,Prenom,..)pour chaque abonné
	Appel de fonctions:
		- Fonction addrec(integer) . Création et insertions des lignes pour chaque enregistrement
		 l'affichage est effectuée sous la Table TDBXML 
	Rem: Ci-dessous la structure d'un enregistrement (noeud ou item) pour un abonné

 	<abonne>
		<num_abonne></num_abonne>
		<Nom></Nom>
		<Prenom></Prenom>
		<Adresse></Adresse>
		<Code_Postal></Code_Postal>
		<Ville></Ville>
		<Telephone></Telephone>
	</abonne>

		  .....	
	Utilisation : Par defaut les lectures se font par PAGE (20 items) et les INDEX debutent à 0
		- GetRec(0,20) Lecture de 20 items
		- GetRec(5,15) Lecture de 10 items à partir du 5ième	  
------------------------------------------------------------------------------------------------*/
function GetRec(deb_index,fin_index,XMLDOC)
{ 
 var NBREC = fin_index - deb_index;
    
  try{  
	for(i=0;i<NBREC;i++)		// Création des lignes dans la Table TDBXML selon la valeur PAGE
		addrec(i);

    if(fin_index >  1 && fin_index <= PAGE )		// Cas avec base vide et création premiers elements
		fin_index = MAXREC;			// MAXREC et fin_index <= PAGE
		else
		 { 
		  if(fin_index != 1)		// Récupération des elements dans la base. 
		  {				// fin_index = 1 : Opération sur element ou nouveau element
		  deb_index = (CPTPG - 1) * PAGE;
		  fin_index = deb_index + (MAXREC - ((CPTPG - 1) * PAGE));
		  }
		 }
	var objNodes = XMLDOC.getElementsByTagName(ITEMTAGNAME);	// Récupération par tranche des items
	var row = -1;							// index des lignes à partir de 0
	for(var i=deb_index;i<fin_index;i++)
		{ 
		 row++;
		  for(var j=0;j<objNodes.item(i).childNodes.length;j++)
		    {
			      var champ = document.getElementById("TRREC" + row).all.tags("INPUT");
			      if(champ.item(j).id == LABELCOL[j])  // Contrôle supplémentaire selon le libellé
		     		   champ.item(j).value =  objNodes.item(i).childNodes.item(j).text; 
		     		else
		     		  {
		     		   champ.item(j).value = "**Erreur**";
		     		  }   
		     		// Insertions des données selon la correspondance
		     }
		} 
 }catch(e){ }		
}


// ---------- Efface l'affichage en cours des enregistrements ---------
function delrec()		
{
 while(TDBXML.rows.length > 0)
    var ret = TBODYREC.deleteRow(0);
}

/* --------------------------------[ addrec(row) ]-------------------------------
	Entree:
		- row : Numero d'index  ( index d'un noeud = index d'une ligne dans la Table TDBXML)
			
	Sortie:
		- Création lignes indépendantes et zone de champs pour chaque attribut d'un element
	----------------------------------------------------------------------------*/
function addrec(row)
{

var objTR =TDBXML.insertRow();

var objTD0 = document.createElement("TD");
var objTD1 = document.createElement("TD");
var objTD2 = document.createElement("TD");
var objTD3 = document.createElement("TD");
var objTD4 = document.createElement("TD");
var objTD5 = document.createElement("TD");
var objTD6 = document.createElement("TD");

objTR.id   = "TRREC"  + row;

objTD0.id  = "TDREC0" + row;
objTD1.id  = "TDREC1" + row;
objTD2.id  = "TDREC2" + row;
objTD3.id  = "TDREC3" + row;
objTD4.id  = "TDREC4" + row;
objTD5.id  = "TDREC5" + row;
objTD6.id  = "TDREC6" + row;

document.getElementById(objTR.id).appendChild(objTD0);
document.getElementById(objTR.id).appendChild(objTD1);
document.getElementById(objTR.id).appendChild(objTD2);
document.getElementById(objTR.id).appendChild(objTD3);
document.getElementById(objTR.id).appendChild(objTD4);
document.getElementById(objTR.id).appendChild(objTD5);
document.getElementById(objTR.id).appendChild(objTD6);

document.getElementById(objTD0.id).innerHTML = 
"<INPUT id=num_abonne name=num_abonne style='WIDTH: 66px; HEIGHT: 22px; BACKGROUND-COLOR: darkgray' size=11></INPUT>";
document.getElementById(objTD1.id).innerHTML =
"<INPUT id=Nom name=Nom style=' WIDTH: 150px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki'  size=25></INPUT>" ;
document.getElementById(objTD2.id).innerHTML = 
"<INPUT id=Prenom name=Prenom style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' ></INPUT>" ;
document.getElementById(objTD3.id).innerHTML = 
"<INPUT id=Adresse name=Adresse style=' WIDTH: 205px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki'  size=39></INPUT>" ;
document.getElementById(objTD4.id).innerHTML = 
"<INPUT id=Code_Postal name=Code_Postal style='WIDTH:89px; HEIGHT:22px; BACKGROUND-COLOR:darkkhaki' size=17></INPUT>";
document.getElementById(objTD5.id).innerHTML = 
"<INPUT id=Ville name=Ville style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR:darkkhaki' ></INPUT>" ;
document.getElementById(objTD6.id).innerHTML = 
"<INPUT id=Telephone name=Telephone style=' WIDTH: 114px; HEIGHT: 22px; BACKGROUND-COLOR: darkkhaki' ></INPUT>" ;

document.getElementById(objTR.id ).onmouseover	= colorbkover;
document.getElementById(objTR.id ).onmouseout	= colorbkout;
document.getElementById(objTR.id ).onkeydown	= NoEditTR;
document.getElementById(objTR.id ).onclick	= selectItemRec;
}

// -------- champ non editable -------------------
function NoEditTR()
{
 if(window.event.keyCode != 9 ) return false;
}

// --  Recherche et retourne le noeud correspondant au numéro abonné --------
function GetItemRec(numero)
{
    try{
	var oNode = dbXML.selectSingleNode("//abonne[num_abonne = " + numero + "]");
	}catch(e){ return null;}
	return oNode;  // null si numero inexistant
}

/* --------------------------------[ majItemRec() ]-------------------------------
	Description: - Opération de mise à jour sur l'enregistrement sélectionné
			Si le numéro d'abonné est modifié ou un nouveau est créé, 
			le noeud sera inséré selon l'ordre croissant numérique.
	Entree:	-
	Sortie:	- Sauvegarde de la base sur disque aprés opération de modification
	Appel de fonction: 
		- MajChampItemRec(noderec) : 
	----------------------------------------------------------------------------*/

function majItemRec()
{
	var numero = document.getElementById("TRREC0").all.tags("INPUT").item(0).value;
	var strMess = "";
	if(GetItemRec(numero) && numero != NUMRECMAJ)
		 { 
		  document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "red";
		  alert("Le numéro : " + numero + "  est déjà inscrit dans la base");
		  return;
		 } 
	else {
			if(numero != NUMRECMAJ)
				 strMess = "\n\nNUMERO : " + NUMRECMAJ + " -> " + numero ;
			if(numero == "") 
				 {
				 document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "red";
				 return;
				 }
		 }		  

	var blnret = window.confirm("Mise à jour dans la base sans annulation ?" + strMess); 
	if(blnret == false) return;
	
	noderec = GetItemRec(numero);
	if(noderec)							// Mise à jour avec le même numero
	 {
		MajChampItemRec(noderec);	
		savexml(dbXML.xml,FILEDBABN);				// Mise à jour de la base sur disque	
	 }
	 else								// Mise à jour avec un autre numero
	 {
		var docElem = dbXML.documentElement; 
		try{
		var oNode = docElem.selectSingleNode("//abonne[num_abonne > " + numero + "]");
		}catch(e){}
		noderec = GetItemRec(NUMRECMAJ);	// Récupération du noeud selectionne et mise à jour des champs
		MajChampItemRec(noderec);		// Mise à jour des champs du noeud selectionne
		
		if(oNode)		// Insertion d'un noeud selon l'odre croissant
				  var oDoc = docElem.insertBefore(noderec,oNode);   // oDoc = noderec si OK
		else			// Insertion d'un noeud en fin de liste si numero superieur auc autres
				  var oDoc = docElem.insertBefore(noderec,docElem.lastchild);   // oDoc = noderec si OK
		if(oDoc)
		 { 
		   NUMRECMAJ = -1;
		   savexml(dbXML.xml,FILEDBABN);				// Mise à jour de la base sur disque 	
		 }  
	 }
MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length; 	 
}

function MajChampItemRec(noeudAbn)
{
		if(!noeudAbn)
		{
			noderectmp = itemRecXML.cloneNode(true); //true = arborescence du noeud <video>...</video>
			noderec = noderectmp.selectSingleNode("//abonne");
			
		}
	  		  for(var j=0;j<noderec.childNodes.length;j++)
			    {
				      var champ = document.getElementById("TRREC0").all.tags("INPUT");
				      if(champ.item(j).id == LABELCOL[j])  // Contrôle supplémentaire selon le libellé
			     		 {  noderec.childNodes.item(j).text = champ.item(j).value; 
			     		    champ.item(j).style.backgroundColor = "lightsteelblue";
			     		 }				// Insertions des données selon la correspondance
			     }
			     
}

function savexml(strXML,strFILEDB)
{	
	
	var Path = window.document.location.pathname;
	var strPath = Path.substr(1,(Path.length - 1) - objFS.GetFileName(Path).length );
	strPath = strPath.replace(/\\/g,"\\\\");
	var objxmldoc = GetXMLDocument(strXML); 
	var objxmldocelem = objxmldoc.documentElement;
	strPI = "<?xml version=\"1.0\" encoding=\"" + ENCODAGE + "\"?>"; // Ajout entête xml + Encodage
	strXML = strPI + String.fromCharCode(13,10) + objxmldocelem.xml;

	if(strFILEDB.match(/:\\/i))
		var strSaveXML = strFILEDB;
		else
		var strSaveXML = strPath + strFILEDB;

	strSaveXML = strSaveXML.replace(/%20/g," ");

	try{
		var objFile = objFS.OpenTextFile(strSaveXML, 2, true); // Création d'un nouveau fichier ASCII
		objFile.Write(strXML);
		objFile.Close();
	   }catch(e){ alert("Erreur de création sur : " + strSaveXML + "\n" + e.description + "\n\n" + " Vérifier que le répertoire existe"); return;}	

	
}


function delitemrec()
{   
    if( document.getElementById("TRREC0").all.tags("INPUT").item(0).value != NUMRECMAJ )
		{ alert("La suppression est réalisée qu'avec le numéro sélectionné.");return;}
    var blnret = window.confirm("Suppression définitive du Numéro : " + NUMRECMAJ + " ?");
    if(blnret == false) return;
	var objnoderec = GetItemRec(NUMRECMAJ);
	var docelem = dbXML.documentElement;
	var xmlabn = docelem.removeChild(objnoderec);
	savexml(docelem.xml,FILEDBABN)	

	/*   Mise à jour compteur selon suppression dans la première PAGE ou dernière PAGE*/
	
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length; 
	if(CPTPG == MAXPG)		// dernière PAGE
	{
	DEBINDEX--;
	FININDEX--;		
	if( (FININDEX % PAGE) == 0) 
	   CPTPG-- ;
	}
	
	initCPTPG(PAGE,MAXREC,CPTPG); 
	retourpg();
}

function AnnulerItemRec(){
ListSelectRec(NUMRECMAJ)
}

function selectItemRec()
{		
		txtNumero.value = document.getElementById(this.id).all.tags("INPUT").item(0).value 
		NUMRECMAJ		= txtNumero.value;
		ListSelectRec(txtNumero.value)
}

function numcode_onkeyup()
{
document.getElementById("TRREC0").all.tags("INPUT").item(0).style.backgroundColor = "darkgray";
var numero = document.getElementById("TRREC0").all.tags("INPUT").item(0).value;

 if(isNaN(numero)) 
	document.getElementById("TRREC0").all.tags("INPUT").item(0).value = numero.substring(0,numero.length - 1)
}

function colorbkover()
{ 
        var champ = document.getElementById(this.id).all.tags("INPUT");
        for(var i=1;i<champ.length;i++)
		     		champ.item(i).style.backgroundColor =  "white";
		txtNumero.style.backgroundColor =  "darkgray";   
}

function colorbkout()
{ 
        var champ = document.getElementById(this.id).all.tags("INPUT");
        for(var i=1;i<champ.length;i++)
		champ.item(i).style.backgroundColor =  "darkkhaki";
	var height = parseInt(video.style.height.substr(0,video.style.height.length - 2)) - 10;
		
}

function initCPTPG(ROWPAGE,NBREC,COMPTEUR)	//Initialisation du compteur de PAGE
{		
		
		if(NBREC == 0) COMPTEUR = 0 ;
		var nbpage = NBREC/ROWPAGE;
		if(nbpage > parseInt(NBREC/ROWPAGE)) 
			nbpage = parseInt(NBREC/ROWPAGE) + 1;
		MAXPG = nbpage;	
		NBPG.innerHTML = COMPTEUR + " / " + MAXPG;
}

// un Document XML est crée à partir d'une syntaxe xml.
function GetXMLDocument(strXML)
{
	var msxmldoc = new ActiveXObject("Msxml2.DOMDocument");
	msxmldoc.async = false;
	msxmldoc.resolveExternals = false;
	msxmldoc.validateOnParse = false;
	msxmldoc.loadXML(strXML) ;
	
	return msxmldoc; 
}

function retourpg()
{ 
	divopt.innerHTML = "";
	
	initCPTPG(PAGE,MAXREC,CPTPG); 
	if(MAXREC <= PAGE)
	{
		pgPrec.click();
	}
		else
	{
		delrec();	
		GetRec(DEBINDEX ,FININDEX,dbXML);
	}
	video.focus();
	NUMRECMAJ = 0;
	
}



 
</SCRIPT>

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function window_onload() {	// Initialisation variable,compteur de page et affichage d'une Page d'enregistrement 
	CreateDB(FILEDBABN);	// Création d'une base vide si inexistant
	DEBINDEX = 0;
	FININDEX = PAGE;
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
	initCPTPG(PAGE,MAXREC,CPTPG)
	GetRec(DEBINDEX ,FININDEX,dbXML);
}

/* -------------------------[ COMPTEUR DE PAGE ]------------------
	Description:
		- Affiche une Page d'abonnée par tranche de 20(par défaut) . 
	Appel de fonction :
		- pgSuiv()	* Page suivante 
		- pgPrec()	* Page précédente
		- firstpg()	* Première Page
		- lastpg()	* Dernière Page
-------------------------------------------------------------------*/
function pgSuiv_onclick() {		
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
	if(MAXREC <= PAGE) return;

	divopt.innerHTML = "";
	DEBINDEX = FININDEX;
	FININDEX = DEBINDEX + PAGE;		// PAGE = 20 par defaut

	if(FININDEX > MAXREC) 
	 { DEBINDEX = MAXREC - PAGE;
	   FININDEX = MAXREC 
	   CPTPG = MAXPG;
	 } 
	 else
	 CPTPG++;
	initCPTPG(PAGE,MAXREC,CPTPG); 
	
	delrec();
	GetRec(DEBINDEX ,FININDEX,dbXML)
}


function pgPrec_onclick() {

	divopt.innerHTML = "";
	DEBINDEX -=  PAGE;
	FININDEX -= PAGE;
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;

	if(DEBINDEX < 0)			
	 { DEBINDEX = 0;
	   FININDEX = PAGE;
	   CPTPG = 1;
	 } 
	 else 
	 CPTPG--;

	initCPTPG(PAGE,MAXREC,CPTPG);

	delrec();
	GetRec(DEBINDEX ,FININDEX,dbXML)
}

function firstpg_onclick() {
	divopt.innerHTML = "";
	DEBINDEX = 0;
	FININDEX = PAGE ;
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;
	CPTPG = 1;
	initCPTPG(PAGE,MAXREC,CPTPG);
	delrec()
	GetRec(DEBINDEX ,FININDEX,dbXML);
}

function lastpg_onclick() {
	divopt.innerHTML = "";
	MAXREC = dbXML.getElementsByTagName(ITEMTAGNAME).length;

	if(MAXREC <= PAGE) return;

	DEBINDEX = MAXREC - PAGE;
	FININDEX = MAXREC;
	CPTPG = MAXPG;
	initCPTPG(PAGE,MAXREC,CPTPG);
	delrec()
	GetRec(DEBINDEX ,FININDEX,dbXML);
}

function txtNumero_onclick() {
	txtNumero.select()
}

function txtNumero_onkeyup() {
	 if(isNaN(txtNumero.value)) 
	    txtNumero.value = txtNumero.value.substring(0,txtNumero.value.length - 1)
	 txtNumero.style.backgroundColor = "darkgray";
}

function txtNumero_onkeypress() {
	if(window.event.keyCode == 13 && txtNumero.value != "") 
           { 	window.event.returnValue = false; 
		NUMRECMAJ = txtNumero.value;
		ListSelectRec(txtNumero.value);
	   }	
}

// ------------ Nouveau abonne ----------
function addItemRec_onclick() {	

	if(NUMRECMAJ == -1)
	  { 
	     var blnret = window.confirm("Annuler le travail en cours et créer un nouveau ?")
	     if(blnret == false) return;
	  }   
	NUMRECMAJ = -1  
	ListSelectRec(NUMRECMAJ)
}


function window_onmouseover() {
window.scrollTo(0,0) 
}

//-->
</SCRIPT>
</HEAD>
<BODY bottomMargin=0 leftMargin=0 topMargin=0 rightMargin=0 background="" LANGUAGE=javascript 
	onload="return window_onload()" >

<TABLE align=center width="914" height="16" style="BACKGROUND-COLOR: darkgray"><TR><TD align=middle HEIGHT="16">
 <FONT style="COLOR: white">*** LISTE DES ABONNES ***</FONT></TD></TR></TABLE>

<HR size=2 color=white>

<DIV align=center style="HEIGHT: 200px" id=DIV1>
	<TABLE BORDER=1 style="FONT-WEIGHT: normal; LEFT: -8px; FONT-STYLE: normal; POSITION: relative; HEIGHT: 29px">
	<THEAD>
	<TR>
	<TH style="WIDTH: 66px; HEIGHT: 22px"  >Numéro</TH>
	<TH style="WIDTH: 150px; HEIGHT: 22px" >Nom</TH>
	<TH style="WIDTH: 114px; HEIGHT: 22px" >Prénom</TH>
	<TH style="WIDTH: 205px; HEIGHT: 22px" >Adresse</TH>
	<TH style="WIDTH: 89px; HEIGHT: 22px"  >Code Postal</TH>
	<TH style="WIDTH: 114px; HEIGHT: 22px" >Ville</TH>
	<TH style="WIDTH: 114px; HEIGHT: 22px" >Téléphone</TH>
	</TR>
	</TABLE>
	 

	<DIV    id="video"  style="OVERFLOW-Y: scroll; WIDTH: 915px; BORDER-TOP-STYLE: inset; BORDER-RIGHT-STYLE: inset;
	 BORDER-LEFT-STYLE: inset; HEIGHT: 310px; BACKGROUND-COLOR: darkkhaki; BORDER-BOTTOM-STYLE: inset">

	<TABLE id="TDBXML" BORDER=1 width=800 style="FONT-WEIGHT: normal; FONT-STYLE: normal" >
	<TBODY id=TBODYREC >
	</TBODY>
	</TABLE>

	<DIV id=divopt></DIV></DIV>

<IMG id=addItemRec SRC="img/icoabn.bmp" title="Nouveau abonné" ALIGN=center height=20 width=20 
	style="CURSOR: hand" LANGUAGE=javascript onclick="return addItemRec_onclick()"></IMG> </IMG>

<INPUT id=txtNumero name=txtNumero style="FONT-WEIGHT: bold; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; 
	BORDER-LEFT-STYLE: solid; BACKGROUND-COLOR: darkgray; TEXT-ALIGN: center; BORDER-BOTTOM-STYLE: solid" 
	align=middle LANGUAGE =javascript 
	onclick ="return txtNumero_onclick()" 
	onkeyup="return txtNumero_onkeyup()" 
	onkeypress="return txtNumero_onkeypress()" 
	title=Numéro size=16>


<HR align=center width=100>

<DIV align=center><IMG SRC="img/icofirst.bmp" style="WIDTH: 32px; CURSOR: hand; HEIGHT: 32px" height=32 id=firstpg 
	LANGUAGE=javascript onclick="return firstpg_onclick()" width=32>

<IMG language=javascript id=pgPrec style="WIDTH: 32px;
 HEIGHT:32px" onclick="return pgPrec_onclick()" height=32 alt="" hspace=0 src="img/icol1.bmp" width=32 useMap="" border=0>

<IMG language=javascript id=pgSuiv style="WIDTH: 32px; CURSOR: hand; HEIGHT: 32px" onclick="return pgSuiv_onclick()" 
 height=32 alt="" hspace=0 src="img/icor1.bmp" width=32 useMap="" border=0 >

<IMG SRC="img/icolast.bmp" style="LEFT: 79px; WIDTH: 32px; CURSOR: hand; TOP: 0px; HEIGHT: 32px" height=32 id=lastpg 
	LANGUAGE=javascript onclick="return lastpg_onclick()" alt="" hspace=0 width=32 useMap="" border=0> 
<BR><SPAN id=NBPG></SPAN></DIV>
</DIV>
<object id=objFS classid=clsid:0D43FE01-F093-11CF-8940-00A0C9054228 VIEWASTEXT></object>

<SCRIPT type="text/javascript" language="javascript">
<!--

function CreateDB(strFILEDB)
{

				/* --------- Creation de la base si inexistant  --------------*/

	var Path = window.document.location.pathname;
	var strPath = Path.substr(1,(Path.length - 1) - objFS.GetFileName(Path).length );
	
	strPath = strPath.replace(/\\/g,"\\\\");

		if(strFILEDB.match(/:\\/i) )				
			var strSaveXML = strFILEDB;		// Base avec chemin absolu
		else
			var strSaveXML = strPath + strFILEDB;	// Base avec chemin par défaut

	strSaveXML = strSaveXML.replace(/%20/g," ");

	if(objFS.FileExists(strSaveXML) == false) 
		  savexml("<evideo></evideo>",strSaveXML)
				
				/* --------  Affectation de la base au document XML ----------*/
	
	dbXML.src = strSaveXML;	
	

}		
-->		
</SCRIPT>		
<xml ID="dbXML" ></xml>

<xml id="itemRecXML">
 <abonne>
	<num_abonne></num_abonne>
	<Nom></Nom>
	<Prenom></Prenom>
	<Adresse></Adresse>
	<Code_Postal></Code_Postal>
	<Ville></Ville>
	<Telephone></Telephone>
 </abonne>
</xml>



<div align=center style="POSITION:relative;TOP:0%">
	<hr width="90%" color=black SIZE=2>
	<img alt="www.aufildutemps.new.fr" hspace=0 src="img/logo.png" vspace=0 border=0 ></div>
 

</BODY>
</HTML>

Conclusion

Le code est aussi disponible sur mon site :
www.aufildutemps.new.fr

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

dbabonne.xml 948 octets
tabn.html 18 076 octets
img
- Icoabn.bmp 3 129 octets
- icodel.bmp 3 129 octets
- icofirst.bmp 3 129 octets
- icol1.bmp 3 126 octets
- icolast.bmp 3 129 octets
- Icoleft1.bmp 3 129 octets
- icor1.bmp 3 129 octets
- icorec.bmp 3 129 octets
- icoundo.bmp 3 129 octets
- logo.png 210 octets

Télécharger le zip

Historique

07 octobre 2007 19:39:44 :: changement de l'image de capture
09 octobre 2007 20:10:54 :: Ajout de commentaire supplémentaire.
21 octobre 2007 06:26:37 :: Remplacement du zip existant

Sources du même auteur

EMULATION DE $_GET() DU PHP

Toutes les sources de jchan

Sources de la même categorie

SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth

INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges

TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

FAIRE UN CV EN HTML VIA XML ET DU XSL par antour

ALBUM PHOTO AVEC PARTIE ADMINISTRATION - PHP + AJAX + XML par tinokoxx

ENIGMES, CASSE-TÊTES À RÉSOUDRE par Bul3

GALERIE PHOTO AVEC MENU RUBAN par JeMi

DIFFÉRENCES EN JAVASCRIPT [DJ] par bultez

Commentaires et avis

Commentaire de LeFauve42 le 17/10/2007 11:44:00

Salut,

Bon, je n'ai pas tout regarde en detail, mais voici quelques remarques:
- Tu fais beaucoup d'appels a getElementById() pour le meme element. Un exemple parmis d'autres:
document.getElementById(objTR.id).appendChild(objTD0);
document.getElementById(objTR.id).appendChild(objTD1);
document.getElementById(objTR.id).appendChild(objTD2);
document.getElementById(objTR.id).appendChild(objTD3);
document.getElementById(objTR.id).appendChild(objTD4);
document.getElementById(objTR.id).appendChild(objTD5);
document.getElementById(objTR.id).appendChild(objTD6);

(et tu en fais pleins d'autres dans la meme fonction). Ces appels sont couteux. Pourquoi ne pas en faire un seul et stocker le resultat dans une variable ?
Et puis tu pourrais en profiter pour tester que l'element existe bien (il devrais etre la mais on ne sait jamais avec ces navigateurs :o) )

- Si j'ai bien compris, ton code marche uniquement sur IE. Appelons ca un exercice de style, mais ce n'est pas vraiment le but de IE et javascript d'ecrire ce genre d'application (surtout si il faut les privileges admin, donc, probablement modifier les reglages de securite (il y a des raisons si par defaut, cela n'est pas autorise...)).

AMHA, tu aurais pu poster au choix:
- Un exemple court montrant comment lire et ecrire un fichier xml en local avec les droits admins et IE (c'est le seul point original de ton source)
- Une gestion de table clients portable (eventuellement avec un script de 3 lignes php te permettant de mettre ton fichier xml sur le serveur)
- Les deux, mais separement :o)

Eric

Commentaire de jchan le 17/10/2007 16:12:45

Effectivement dans cette source le code n'est pas optimisé. Une fonction primitive
pour la création d'une ligne dans la table serait mieux, voir la création d'une
classe pour toutes les opérations.Mais ce n'était pas le but d'écrire un code
professionnelle où il ne reste plus rien à faire.Sur les forums on trouve des
bouts de codes pour manipuler une base xml mais pas d'exemple complet.D'où cette
petite contribution.

Pour le test si l'élément existe bien, la function GetItemRec(numero) effectue
cette opération. Elle retourne le noeud correspond au numero client s'il existe
sinon null.

Pour les droits admins pour l'éxécution du programme,j'ai codé trop vite. En
plaçant les sources dans le répertoire "Documents partagés", le problème est résolu.
PS:Avec du recul,je me suis dis que c'était pas normal.

En résumé avec PHP c'est la solution pour une version portable.Je commence tout juste
à m'y mettre (encore novice en la matière).

jchan.

Commentaire de pilou_77 le 20/10/2007 12:01:00

je signale que mon anti-virus 'a-squared' a détecté un 'Heuristic.ArchiveBomb' à la vérification du .zip de ce code.

bonne réception

Commentaire de jchan le 21/10/2007 06:36:55

Je n'ai pas trouvé de virus sur ce zip.J'utilise la dernière version (v.12) de McAfee VirusScan avec la dernière maj de DAT. J'ai remplacé le zip pour plus de sureté.

Commentaire de crow le 23/11/2007 12:46:07 10/10

Bonjour,

Je trouve ce script très bien même si je comprend pas forcément tout ce qu'il fait... anfin, je cherchais un script comme celui-la pour faire une recherche de produit avec un part au lieu du numero d'abonne.. le truc c'est qu'il me rapporte une seule ligne par produit alors que j'aimerais qu'il m'affiche tous les produit qui ont le même numéro... je me doute qu'il faut faire une boucle pour qu'il continue de chercher... seulemement, je ne suis pas très doué en JS et mes essais ont été negatif...

Peux-tu m'aider ?

Merci d'avance.

Commentaire de jchan le 24/11/2007 20:29:05

Salut,

Je suppose que ta base doit être similaire comme ci-dessous.

<?xml version="1.0" encoding="iso-8859-1" ?>
<www.aufildutemps.info>
<client>
   <nomclient>jchan</nomclient>
<produit id="123456">
  <designation>café</designation>
  <marque>Terra</marque>
     <origine>Colombie</origine>
</produit>
<produit id="123456">
  <designation>café</designation>
  <marque>Luna</marque>
  <origine>Venezuela</origine>
</produit>
  </client>
</www.aufildutemps.info>

Pour la manip j'appelle simplement une fonction qu'il faudra
adapter.Dans le code, l'objet "xmlprd" est le document XML et txtarea1 est une zone de texte pour l'affichage.

function listprd()
{
var nomcli = "\"jchan\"";
var numprd = "123456";

var odocxml = xmlprd.selectSingleNode("//client[nomclient=" + nomcli + "]");

for(var i=0;i<odocxml.childNodes.length;i++)
{
if(odocxml.childNodes.item(i).nodeName == "produit" && (odocxml.childNodes.item(i).attributes.getNamedItem("id").text == numprd))
{
      var oxmlprd = odocxml.childNodes.item(i);
  txtarea1.value  += "\n" + "Produit Numero : " + numprd + "\n"
  for(var j=0;j<oxmlprd.childNodes.length;j++)
   txtarea1.value += oxmlprd.childNodes.item(j).nodeName + " : " + oxmlprd.childNodes.item(j).text + "\n"
}
}
}

J'ai testé et ça marche avec IE. Pour les autres navigateurs
il faudra utiliser XPath au lieu de selectSingleNode.

Bonne continuation.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

prob avec Javascipt et accssoirement xml [ par Thepp ] Mon probl est 2 niveaux- je dispose d'un fichier xml et celui-ci ne comporte pas de rfrence un fichier Xsl (masque d'affichage), je voudrais trouver a l'aide!!! xml big probleme!!! [ par jed35 ] bonjour à tous.voilà je cherche un javascript qui permet d'afficher un élément xml par son id.en fait j'arrive à afficher un document xml sous forme " XML+recherche javascript [ par leneo42 ] Dites moi ce qui ne vas pas ?? je ne comprend plus bien la pourquoi ca va pas ???""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" Lire fichier XML [ par indiana_jules ] Bonjour,voilà, j'ai une petite question. Je sais qu'on peut en javascript lire dex fichiers XML, notamment en utilisant :var xmldoc = new ActiveXObjec Kezako RSS ? [ par slachz ] voilà tout est dans le titre !c koa RSS ? j'ai vus ça sur plusieurs sites (dont codes-sources) mais j'y comprend rien T_T (enfin je vois vite fait men affichage recursif arbre XML [ par joenbl ] J'aimerai afficher un fichier XML du type ci dessous en utilisant XSLT afin d'obtenir des menus déroulants (un peu comme l'affichage par défaut de IE ecrire un fichier [ par daeron ] Bonjour, j'ai récupéré un flux xml grâce à l'objet xmlhttprequest.Maintenant j'aimerai l'écrire dans un fichier de type xml pour l'utiliser plus tard. Ecrire/Lire un fichier XML à partir d'un formulaire [ par sbertho ] Je recherche des informations pour réussir à écrire les résultats d'un formulaire dans un fichier XML, puis de lire ces résultats pour les afficher.Es lecture d un xml avec javascript et sauvegarde [ par glad777 ] Bonjour a tous et a toutesj aimerai savoir comment faire pour avoir une fonction javascript qui puisse me lire un fichier xml, j ai lu un code avec va jeu de memoire [ par gladysxxl ] bonjour,petit souci avec le jeu de memoire ( http://www.javascriptfr.com/code.aspx?ID=22785 ) qui fonctionne tres bien en local mais lorsque je me le

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP