[Système] Loader pendant l'execution d'une tâche

Version imprimable

Bonjour tout le monde

alors je m'explique...
j'ai une 1ère page avec un formulaire tout simple qui redirige vers une 2nde page qui execute des actions sur une machine distante en fonction du formulaire, puis qui m'affiche mon résultat des actions faites sur la machine distante
mon souci, c'est que les actions executées sur la machine distantes peuvent durer relativement longtemps vu que c'est des requetes en bdd, donc je voulais avoir un loader le temps de l'execution de ces actions puis ensuite l'affichage de mon tableau.

code de la 2ème page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head>
<title>Extraction - Résultats</title>
<style type="text/css">
table {
	border-width: 0px;
	border-spacing: 2px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	background-color: white;
}
table td {
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: gray;
	background-color: white;
	padding: 1px;
	-moz-border-radius: 0px;
}
</style>
</head>
<body>
<?php
$date1 = $_POST['date1'];
$date2 = $_POST['date2'];
$projet = $_POST['projet'];
$mach = $_POST['mach'];
$lim = $_POST['lim'];
$mail = $_POST['mail'];
$filter = $_POST['filter'];
 
if ($date1){$date1_dis="du : ".$date1."<br/>"; $date1=" -date1 ".$date1."";}else{$date1=""; $date1_dis="";}
if ($date2){$date2_dis="au : ".$date2."<br/>"; $date2=" -date2 ".$date2."";}else{$date2=""; $date2_dis="";}
if ($mach){$mach_dis="machine : ".$mach."<br/>"; $mach=" -mach ".$mach."";}else{$mach=""; $mach_dis="";}
if ($mail){$mail_dis="mail : ".$mail."<br/>"; $mail=" -mail ".$mail."";}else{$mail=""; $mail_dis="";}
if ($lim){$lim_dis="severite : ".$lim."<br/>"; $lim=" -date1 ".$lim."";}else{$lim=""; $lim_dis="";}
if ($projet){$projet_dis="projet : ".$projet."<br/>"; $projet=" -projet ".$projet."";}else{$projet=""; $projet_dis="";}
if ($filter){$filter_dis="filtre : ".$filter."<br/>"; $filter_act=" -grep ".$filter.""; $filter=" | grep ".$filter."";}else{$filter=""; $filter_dis=""; $filter_act="";}
 
echo $date1_dis.$date2_dis.$mach_dis.$lim_dis.$projet_dis.$mail_dis.$filter_dis;
 
exec("plink -l root -pw xxxxxx srv \"cd /var/srv/home/xxx && ./Extract.ksh ".$date1."".$date2."".$mach."".$mail."".$lim."".$projet."".$filter_act." && exit\"");
 
$output = array();
$return_var = 0;
exec("plink -l root -pw xxxxxx srv \"cat /var/srv/home/xxx/Extract.txt".$filter." && exit\"", $output, $return_var);
 
echo "<br />";
 
echo "<table border='0'>";
	echo "<tr>";
		echo "<td style='background-color: #cccccc;'>ident</td>";
		echo "<td style='background-color: #cccccc;'>ident_annul</td>";
		echo "<td style='background-color: #cccccc;'>Severite</td>";
		echo "<td style='background-color: #cccccc;'>Machine</td>";
		echo "<td style='background-color: #cccccc;'>Objet</td>";
		echo "<td style='background-color: #cccccc;'>Projet</td>";
		echo "<td style='background-color: #cccccc;'>Appli</td>";
		echo "<td style='background-color: #cccccc;'>d_reception</td>";
		echo "<td style='background-color: #cccccc;'>d_prise_en_compte</td>";
		echo "<td style='background-color: #cccccc;'>alias_d_annulation</td>";
		echo "<td style='background-color: #cccccc;'>euuh</td>";
		echo "<td style='background-color: #cccccc;'>Libelle Alarme</td>";
	echo "</tr>";
	foreach($output as $key => $val){
		list($grr, $ident, $ident_annul, $severi, $s_machine, $s_objet, $s_proj, $s_appl, $d_reception, $d_prise_en_compte, $alias_d_annulation, $euuh, $texte) = explode("@", $val);
 
		/*$ident = trim($ident);
		if(empty($ident)){$ident="-";}*/
		$ident_annul = trim($ident_annul);
		if(empty($ident_annul)){$ident_annul="-";}
		/*$severi = trim($severi);
		if(empty($severi)){$severi="-";}*/
		$s_machine = trim($s_machine);
		if(empty($s_machine)){$s_machine="-";}
		$s_objet = trim($s_objet);
		if(empty($s_objet)){$s_objet="-";}
		$s_proj = trim($s_proj);
		if(empty($s_proj)){$s_proj="-";}
		$s_appl = trim($s_appl);
		if(empty($s_appl)){$s_appl="-";}
		$d_reception = trim($d_reception);
		if(empty($d_reception)){$d_reception="-";}
		$d_prise_en_compte = trim($d_prise_en_compte);
		if(empty($d_prise_en_compte)){$d_prise_en_compte="-";}
		$alias_d_annulation = trim($alias_d_annulation);
		if(empty($alias_d_annulation)){$alias_d_annulation="-";}
		$euuh = trim($euuh);
		if(empty($euuh)){$euuh="-";}
		$texte = trim($texte);
		if(empty($texte)){$texte="-";}
 
		$severi = trim($severi);
		if($severi=="0"){$style="color:#009933; background-color:#ffffff; font-weight:bold; font-size:11px; font-family:ARIAL;";}
		elseif($severi=="1"){$style="color:#0033ff; background-color:#ffffff; font-weight:bold; font-size:11px; font-family:ARIAL;";}
		elseif($severi=="2"){$style="color:#ff9900; background-color:#ffffff; font-weight:bold; font-size:11px; font-family:ARIAL;";}
		elseif($severi=="3"){$style="color:#cc3300; background-color:#ffffff; font-weight:bold; font-size:11px; font-family:ARIAL;";}
		elseif($severi=="4"){$style="color:#ff0000; background-color:#ffffff; font-weight:bold; font-size:11px; font-family:ARIAL;";}
 
		echo "<tr>";
			echo "<td style='".$style."'>".$ident."</td>";
			echo "<td style='".$style."'>".$ident_annul."</td>";
			echo "<td style='".$style."'>".$severi."</td>";
			echo "<td style='".$style."'>".$s_machine."</td>";
			echo "<td style='".$style."'>".$s_objet."</td>";
			echo "<td style='".$style."'>".$s_proj."</td>";
			echo "<td style='".$style."'>".$s_appl."</td>";
			echo "<td style='".$style."'>".$d_reception."</td>";
			echo "<td style='".$style."'>".$d_prise_en_compte."</td>";
			echo "<td style='".$style."'>".$alias_d_annulation."</td>";
			echo "<td style='".$style."'>".$euuh."</td>";
			echo "<td style='".$style."'>".$texte."</td>";
		echo "</tr>";
	}
echo "</table>";
?>
</body>
</html>

pour info, l'action la plus longue est la 1ère exec()...

Merci de votre aide

Si j'ai bien compris ton problème, il faut que tu utilise un script AJAX qui appel le script PHP qui execute tes requêtes, quand le script php a finit tu lui fait envoyer le résultat et tu affiches ton tableau avec javascript.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script language="javascript">
	function AJAXrequest()
	{
		var request = false;
		if (window.XMLHttpRequest) { // Mozilla, Safari,...
			request = new XMLHttpRequest();
			if (request.overrideMimeType) {
				request.overrideMimeType('text/xml');
			}
		}
		else if (window.ActiveXObject) { // IE
			try {
				request = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					request = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) {request = false;}
			}
		}
 
		if (!request) {
			alert('Abandon :( Impossible de créer une instance XMLHTTP (err001)');
			return false;
		}
 
		request.onreadystatechange = function() { traitement_du_resultat(request) };
		request.open('GET', "url_du_script.php", true);
		request.send(null);
	}
 
	function traitement_du_resultat(request)
	{
		if( request.readyState == 4 )
		{
			if( request.status == 200 )
			{
				//affichage de ton tableau
			}
		}
	}
	</script>

04/07/2008, 14h12
amans

le souci c'est qu'actuellement, après avoir cliquer sur le bouton de soumission du formulaire, la page index.php disparait... logique et la page exec.php reste en chargement tout le temps que mes fonctions exec() fassent leur boulot sur la machine distante...
ce que j'aimerai, c'est avoir un ptit message d'attente pendant le chargement de la page (l'execution des scripts en fait...soit le début de la page exec.php), puis le tableau s'affiche (le reste de la page en fait...)

index.php (formulaire) => exec.php (la page que j'ai collé au dessus...)

je sais pas si je suis clair :/

je ne vois pas comment appliquer le code que tu me proposes à mon cas...
je suppose qu'effectivement ajax va bien m'aider dans l'histoire mais je vois pas comment adapter ce que tu m'as donné à mon cas... :/
...ou sinon j'ai rien compris du tout à ton code... c'est pas impossible ;)
04/07/2008, 14h29
Kyaan

hmmm comment t'expliquer... pour ce que tu veux faire il faut séparer l'affichage de la page principale de l'execution de ton script exec.php et pour faire ça ya pas 36 méthodes.

AJAX te permet d'avoir une page principale qui s'affiche directement à l'utilisateur et qui execute en tache de fond ton script qui est plus lent, puis d'en afficher le résultat quand l'exécution est terminée.

dans l'exemple de code que je t'ai donné, il faut que tu mette dans le fichier url_du_script.php ton script qui est lourd d'execution. Ensuite tu met le javascript que je t'ai filé dans une autre page qui sera la page de destination de ton formulaire, et tu appelle la fonction AJAXrequest() avec éventuellement des arguments que tu peux transmettre au fichier url_du_script.php via la méthode GET en les rajoutant dans l'URL du script javascript ou via la méthode POST mais il faut que tu suives un tuto AJAX pour ça car c'est un peu plus compliqué.

Pour finir il ne te reste plus qu'à traiter la réponse envoyé par la requête AJAX en générant le HTML qui va bien et en l'incorporant dans une div ou un tableau via la méthode innerHTML.

alors j'ai avancé un chichouia :/

j'ai toujours ma page de formulaire qui redirige vers exec.php
exec.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php session_start(); 
 
$_SESSION['date1'] = $_POST['date1'];
$_SESSION['date2'] = $_POST['date2'];
$_SESSION['projet'] = $_POST['projet'];
$_SESSION['mach'] = $_POST['mach'];
$_SESSION['lim'] = $_POST['lim'];
$_SESSION['mail'] = $_POST['mail'];
$_SESSION['filter'] = $_POST['filter'];
 
?>
<html>
<head>
<title>Extraction - Résultats</title>
<script language="javascript">
	function AJAXrequest()
	{
		var request = false;
		if (window.XMLHttpRequest) { // Mozilla, Safari,...
			request = new XMLHttpRequest();
			if (request.overrideMimeType) {
				request.overrideMimeType('text/xml');
			}
		}
		else if (window.ActiveXObject) { // IE
			try {
				request = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					request = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) {request = false;}
			}
		}
 
		if (!request) {
			alert('Abandon :( Impossible de créer une instance XMLHTTP (err001)');
			return false;
		}
 
		request.onreadystatechange = function() { traitement_du_resultat(request) };
		request.open('POST', "act.php", true);
		request.send(null);
	}
 
	function traitement_du_resultat(request)
	{
		if( request.readyState == 4 )
		{
			if( request.status == 200 )
			{
				alert('ok');
			}
		}
	}
</script>
</head>
<body>
<script language="javaScript">AJAXrequest()</SCRIPT> 
<?php
echo "<div id='wait'>waiting...</div>";
?>
</body>
</html>

dans le act.php j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$date1 = $_SESSION['date1'];
$date2 = $_SESSION['date2'];
$projet = $_SESSION['projet'];
$mach = $_SESSION['mach'];
$lim = $_SESSION['lim'];
$mail = $_SESSION['mail'];
$filter = $_SESSION['filter'];
 
if ($date1){$date1_dis="du : ".$date1."<br/>"; $date1=" -date1 ".$date1."";}else{$date1=""; $date1_dis="";}
if ($date2){$date2_dis="au : ".$date2."<br/>"; $date2=" -date2 ".$date2."";}else{$date2=""; $date2_dis="";}
if ($mach){$mach_dis="machine : ".$mach."<br/>"; $mach=" -mach ".$mach."";}else{$mach=""; $mach_dis="";}
if ($mail){$mail_dis="mail : ".$mail."<br/>"; $mail=" -mail ".$mail."";}else{$mail=""; $mail_dis="";}
if ($lim){$lim_dis="severite : ".$lim."<br/>"; $lim=" -date1 ".$lim."";}else{$lim=""; $lim_dis="";}
if ($projet){$projet_dis="projet : ".$projet."<br/>"; $projet=" -projet ".$projet."";}else{$projet=""; $projet_dis="";}
if ($filter){$filter_dis="filtre : ".$filter."<br/>"; $filter_act=" -grep ".$filter.""; $filter=" | grep ".$filter."";}else{$filter=""; $filter_dis=""; $filter_act="";}
 
exec("plink -l root -pw xxxxxx srv \"cd /var/srv/home/xxx && ./Extract.ksh ".$date1."".$date2."".$mach."".$mail."".$lim."".$projet."".$filter_act." && exit\"");
 
$output = array();
$return_var = 0;
exec("plink -l root -pw xxxxxx srv \"cat /var/srv/home/xxx/Extract.txt".$filter." && exit\"", $output, $return_var);

comme tu peux le voir j'ai opté pour les sessions pour transmettre mes variables...avec post je n'y arrivais pas :/
il faut donc que je puisse maintenant récupérer certaines variables présentes dans le act.php et pouvoir les utiliser dans exec.php et là je vois pas comment on fait :/
concretement il faudrait que je puisse récupérer les valeurs des $xxx_dis et de $output.

après faudra effectivement que je génère le tableau mais ça c'est une autre histoire... tant que j'ai pas récupérer mes variables je génèrerais pas grand chose ;)

04/07/2008, 16h58
Kyaan
c'est très facile il suffit d'ajouter tes variables en argument de la fonction AJAXrequest() comme ceci:

Code:

function AJAXrequest(xxx_dis, output)

et plus loin de faire comme ceci:
Code:

1 2 3 request.onreadystatechange = function() { traitement_du_resultat(request) }; request.open('GET', "act.php?xxx_dis=" + xxx_dis + "&output=" + output, true); request.send(null);
tu n'a plus qu'a utiliser le tableau $_GET dans le fichier act.php et tu as transmis tes variables.

Aussi je pense à quelque chose, je ne sais pas si tu utilise firefox mais si c'est le cas installe un plugin qui s'appel firebug, d'expérience c'est l'outil parfait pour débugguer du javascript et c'est plus particulièrement utile quand on fait de l'AJAX.