[PHP - MYSQL] Tableau formulaire + Back Office

**LuffyyffuL** · 13/03/2015, 16h26

Bonjour,

Débutant en PHP et MYSQL, je me permets de créer cette discussion pour demander votre aide.

J'ai pour but de créer un tableau qui va récupérer des valeurs en base afin de les afficher en html puis, la où ça se complique pour moi, faire en sorte de pouvoir ajouter des données en base grâce à une ligne en mode formulaire en dessous du tableau puis, cliquer sur un bouton "valider" pour enregistrer les données du formulaire en base, et/ou supprimer des lignes de ma table via une dernière colonne de mon tableau en html avec des checkbox, pour chaque ligne coché cliquer sur un bouton "supprimer".

** Voici mon code pour alimenter ma table, ce code n'est pas intégré à mon tableau final pour le moment vu que je n'ai pas trouver de solution **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form method="post" action="add.php">
 
	<input type="text" name="nom" size="10" value="nom" maxlength="10">
	<input type="text" name="prenom" size="10" value="prenom" maxlength="10">
	<input type="text" name="ville" size="10" value="ville" maxlength="10">
 
	<input type="submit" value="Envoyer" name="envoyer">
 
</form>

** add.php **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
 
if(isset($_POST['nom']))      $nom=$_POST['nom'];
else      $nom="";
 
if(isset($_POST['prenom']))      $prenom=$_POST['prenom'];
else      $prenom="";
 
if(isset($_POST['ville']))      $ville=$_POST['ville'];
else      $ville="";
 
 
if(empty($nom) OR empty($prenom) OR empty($ville))
 {
 echo '<font color="red"><b><center>Attention, vous devez remplir tous les champs</center></b></font>';
 }
 
 else 
 
{
 
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=base;charset=utf8', 'userbase', 'pwdbase');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
 
$req->execute(array(
$req = $bdd->prepare('INSERT INTO tbl_base(nom, prenom, ville) VALUES (:nom, :prenom, :ville)'); 
	'nom' => $nom,
	'prenom' => $prenom,
	'ville' => $ville
	));			 
 
    echo 'Vos infos on été ajoutées.';
 
}
?>

** Tableau pour visualiser les données **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
 
try
 
{
	// On se connecte à MySQL
	$bdd = new PDO('mysql:host=localhost;dbname=base;charset=utf8', 'userbase', 'pwdbase');
}
 
catch(Exception $e)
 
{
	// En cas d'erreur, on affiche un message et on arrête tout
	die('Erreur : '.$e->getMessage());
}
 
// Si tout va bien, on peut continuer
 
// On récupère tout le contenu de la table
$reponse = $bdd->query('SELECT * FROM tbl_base');
 
// On affiche chaque entrée une à une
while ($donnees = $reponse->fetch())
 
{
 
?>
 
	<div class="row">
		<div>
			<div class="date"><?php echo $donnees['nom'] ; ?></div>
			<div class="cell"><?php echo $donnees['prenom'] ; ?></div>
			<div class="cell"><?php echo $donnees['ville'] ?></div>
 
 
			<div class="cell"><input type="checkbox" name="case[]" value="'.$dat['id'].'" /></div>
 
		</div>
	</div>
 
<?php
 
}
 
$donne->closeCursor(); // Termine le traitement de la requête
 
?>

J'ai essayé d'utiliser au mieux PDO. La colonne avec les Checkbox ne sert à rien pour le moment à partir en visuel.

Si vous avez du code tout prêt, des exemples, solutions etc. je suis preneur afin de fusionner mes différentes parties en une seule optimisée et fonctionnelle.

Merci par avance

**sabotage** · 13/03/2015, 21h48

Qu'est ce qui ne te vas pas avec ton code actuel ?

Au passage quand même pour add.php, la premiere partie ne sert à rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
if(empty($_POST['nom']) || empty($_POST['prenom']) || empty($_POST['nom']))  {
   echo '<font color="red"><b><center>Attention, vous devez remplir tous les champs</center></b></font>';
 }
 else {
 try
{
	$bdd = new PDO('mysql:host=localhost;dbname=base;charset=utf8', 'userbase', 'pwdbase');
}
catch(Exception $e)
{
	die('Erreur : '.$e->getMessage());
}
 
 
$req = $bdd->prepare('INSERT INTO tbl_base(nom, prenom, ville) VALUES (:nom, :prenom, :ville)'); 
$req->execute(array(':nom' => $_POST['nom'],
	':prenom' => $_POST['prenom']
	':ville' => $_POST['ville']
	));			 
 
    echo 'Vos infos on été ajoutées.';
 
}
?>

**LuffyyffuL** · 15/03/2015, 11h10

Merci pour ta réponse, je vais enlever la partie qui ne sert pas.

Mon code fonctionne pour ce scénario :

- 1 page pour ajouter mes nouvelles données
- 1 page pour visualiser mes données dans un tableau
- La dernière colonne de mon tableau avec les checkbox pour supprimer des lignes n'est pas codée

Mon but :

- Avoir une seule page avec mon tableau et pouvoir supprimer et ajouter mes données.

- Pour supprimer des lignes, utiliser la dernière colonne avec les checkbox.

- Pour ajouter des lignes, mettre en place un petit bouton "+" en bas de mon tableau qui fera apparaitre une ligne vierge à compléter et à valider.

**sabotage** · 15/03/2015, 14h27

Et quel est ton problème ?

**LuffyyffuL** · 15/03/2015, 22h39

Re,

Mon problème est que je n'ai pas assez de connaissance pour arriver à ce résultat :

http://files.the-asw.com/web/dtable/ex3.html

C'est pratiquement ce que je recherche, sauf que je veux que mon tableau récupère les données actuelles dans la base, et que via la dernière ligne je puisse rajouter des données à ma base.

Je sais pas si c'est clair ce que j'essai de vous dire, mais je fais au mieux

Merci

Invité · 16/03/2015, 00h18

Bonjour,

tu sais afficher des données dans un tableau via "SELECT...."
insérer le formulaire d'ajout dans le bas du tableau ne pose pas de souci particulier
récupérer les données et les traiter pour les insérer via "INSERT..." ou les modifier via "UPDATE...", à priori tu sais faire aussi
JavaScript, tu sembles savoir l'utiliser

Donc, même question : "quel est ton problème ?"

Par contre, il ne faut pas oublier de mettre les balises <form...> autour du tableau !

Et il te manque peut-être des connaissances en AJAX pour le traitement SANS rechargement de page ?

[Edit] As-tu lu cet article ?

Créer une table HTML éditable en JavaScript

**LuffyyffuL** · 16/03/2015, 10h35

Re,

@sabotage : J'ai essayé ta méthode en supprimant le début de mon fichier "add.php", mais ma table ne s'alimente plus.

J'ai fusionné ma partie formulaire avec la partie qui se charge de générer mon tableau avec les données en base. Il me manque juste à me défaire du fichier "add.php".

@jreaux62 : oui, il me manque des connaissances en JavaScript et en Ajax, non, je n'ai pas lu ces articles, je vais regarder et c'est vrai que l'idée du Ajax a l'air interessante.

Merci

**LuffyyffuL** · 18/03/2015, 15h22

Bonjour,

Je reviens vers vous après avoir essayé ce code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function ajouterLigne()
{
	var tableau = document.getElementById("tableau");
 
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
 
	var colonne1 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne1.innerHTML += document.getElementById("titre").value;//on y met le contenu de titre
 
	var colonne2 = ligne.insertCell(1);//on ajoute la seconde cellule
	colonne2.innerHTML += document.getElementById("auteur").value;
 
	var date = new Date();
	var colonne3 = ligne.insertCell(2);
	colonne3.innerHTML += date.getDate();//on ajoute le jour du mois
 
	var colonne4 = ligne.insertCell(3);
	colonne4.innerHTML += date.getMonth()+1;//les mois commencent par 0
 
	var colonne5 = ligne.insertCell(4);
	colonne5.innerHTML += date.getFullYear();
 
}
 
<form method="post" action="">
	<input type="text" name="titre" id="titre" />
	<input type="text" name="auteur" id="auteur" />
 
	<input type="button" onclick="ajouterLigne();" value="Enregistrer"/>
</form>
 
 
<table id="tableau" border>
	<thead>
		<tr>
			<th>Titre</th>
			<th>Auteur</th>
			<th>Jour</th>
			<th>Mois</th>
			<th>Année</th>
			<th>Supprimer</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Premier article</td>
			<td>Pierre-Louis</td>
			<td>02</td>
			<td>06</td>
			<td>2007</td>
			<td onclick="supprimerLigne(this.parentNode.rowIndex);">X</td>
		</tr>
		<tr>
			<td>Mise-à-jour du système</td>
			<td>Admin</td>
			<td>01</td>
			<td>01</td>
			<td>2010</td>
			<td onclick="supprimerLigne(this.parentNode.rowIndex);">X</td>
		</tr>
		<tr>
			<td>Le site dans le futur !</td>
			<td>MystèreX</td>
			<td>20</td>
			<td>12</td>
			<td>2012</td>
			<td onclick="supprimerLigne(this.parentNode.rowIndex);">X</td>
		</tr>
	</tbody>
</table>

Ce code est ce que je recherche fonctionnellement, par contre, je ne sais pas comment remplacer les lignes "colonne5.innerHTML += ..." par un insert into afin d'alimenter ma table, et actualiser en live mon tableau avec une la nouvelle ligne.

Je pense qu'il faut que je remplace ma partie en php qui s'occupe de générer mon tableau et de l'alimenter par du code JavaScript ?

Merci de votre aide

Invité · 18/03/2015, 19h46

C'est là qu'intervient AJAX.

**LuffyyffuL** · 17/04/2015, 16h44

Bonjour,

Après plusieurs recherches, je suis tombé sur un code qui correspond à ce que je recherche :

Le tout est composé de 3 fichiers :

** index.php **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE HTML>
<html>
<title>Ajax table - edit delete add rows with Ajax - InfoTuts</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
 
 
 
</head>
<body>
 
 
 
<script language="javascript" type="text/javascript">
 
 
</script>
 
<table id='demoajax' cellspacing="0">
</table>
 
 
</body>
</html>

** DbManipulate.php **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
 
 
include('db.php');
 
 if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
 
   call_user_func($actionfunction,$_REQUEST,$con);
}
 
 
// Fonction Save DATA
 
function saveData($data,$con){
 
	$fname = $con->real_escape_string($data['fname']);
	$lname = $con->real_escape_string($data['lname']);
	$domain = $con->real_escape_string($data['domain']);
	$email = $con->real_escape_string($data['email']);
	$sql = "insert into ajaxtable(firstname,lastname,domain,email) values('$fname','$lname','$domain','$email')";
 
	if($con->query($sql)){
 
		showData($data,$con);
 
	} else {
 
		echo "error";
 
	}
 
}
 
 
// Fonction Show DATA
 
function showData($data,$con){
 
	$sql = "select * from ajaxtable order by id asc";
	$data = $con->query($sql);
	$str='<tr class="head"><td>Firstname</td><td>Lastname</td><td>Domain</td><td>Email</td><td></td></tr>';
 
 
	//if($data->num_rows>0) if (($firstname_tri) != "") {
	if($data->num_rows>0) if (($firstname_tri) == "") {
 
		while( $row = $data->fetch_array(MYSQLI_ASSOC)){
 
			$str.="<tr id='".$row['id']."'><td>".$row['firstname']."</td><td>".$row['lastname']."</td><td>".$row['domain']."</td><td>".$row['email']."</td><td><input type='button' class='ajaxedit' value='Edit'/> <input type='button' class='ajaxdelete' value='Delete'></td></tr>";
 
		}
 
	} else {
 
		$str .= "<td colspan='5'>No Data Available</td>";
 
	}
 
	echo $str;
 
}
 
 
function updateData($data,$con){
  $fname = $con->real_escape_string($data['fname']);
  $lname = $con->real_escape_string($data['lname']);
  $domain = $con->real_escape_string($data['domain']);
  $email = $con->real_escape_string($data['email']);
  $editid = $con->real_escape_string($data['editid']);
  $sql = "update ajaxtable set firstname='$fname',lastname='$lname',domain='$domain',email='$email' where id=$editid";
  if($con->query($sql)){
    showData($data,$con);
  }
  else{
   echo "error";
  }
  }
  function deleteData($data,$con){
    $delid = $con->real_escape_string($data['deleteid']); 
	$sql = "delete from ajaxtable where id=$delid";
	if($con->query($sql)){
	  showData($data,$con);
	}
	else{
	echo "error";
	}
  }
 
 
 
?>

+ un fichier avec la config BDD.

Tout fonctionne parfaitement, mais je voudrais rajouter une fonctionnalité, un filtrer me permettant de générer le tableau avec les infos voulues en function des filtres appliqués.

J'ai trouvé un code qui fait ce que je viens de dire mais, ce code me génère un second tableau et le code trouvé n'a pas été pensé de la meme façon par rapport à celui que je viens de vous copier.

N'ayant pas de connaissance particulière en Ajax, j'en appel à une ame charitable qui saurait m'écrire cette function "Filtre".

Je vous remercie.

Cordialement

**LuffyyffuL** · 17/04/2015, 16h55

Re,

J'avais fait un mixe du genre mais ça ne doit pas être joli à lire :

** index.php **

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunctionTri(){
 var ajaxRequest;  // The variable that makes Ajax possible!
 
 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 var firstname_tri = document.getElementById('firstname_tri').value;
 var lastname_tri = document.getElementById('lastname_tri').value;
 var domain_tri = document.getElementById('domain_tri').value;
 var email_tri = document.getElementById('email_tri').value;
 
var queryString = "?firstname_tri=" + firstname_tri ;
	queryString += "&lastname_tri=" + lastname_tri + "&domain_tri=" + domain_tri + "&email_tri=" + email_tri ;
 
	//ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
	ajaxRequest.open("GET", "DbManipulate.php" + queryString, true);
 
	ajaxRequest.send(null); 
}
 
</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name='forumulaire_filtres'>
	<div class="div_tbl_form_filtres_maitre">
		<div class="div_tbl_from_filtres_titre">
			<b>Filtres</b>
		</div>
		<div class="div_tbl_form_filtres_menu">
			<div class="div_tbl_form_filtres_menu_date"><b>firstname</b></div>
			<div class="div_tbl_form_filtres_menu_priorite"><b>lastname</b></div>
			<div class="div_tbl_form_filtres_menu_numdt"><b>domain</b></div>
			<div class="div_tbl_form_filtres_menu_application"><b>email</b></div>
		</div>
		<div class="div_tbl_form_filtres">
			<div class="div_tbl_form_filtres_date"><input type='text' id='firstname_tri' size="9" value="" maxlength="10"/></div>
			<div class="div_tbl_form_filtres_date"><input type='text' id='lastname_tri' size="9" value="" maxlength="10"/></div>
			<div class="div_tbl_form_filtres_numdt"><input type='text' id='domain_tri' size="11" value="" maxlength="11"/></div>
			<div class="div_tbl_form_filtres_numdt"><input type='text' id='email_tri' size="11" value="" maxlength="11"/></div>
		</div>
		<div class="div_tbl_form_valider"><input class="bouton_valider" type='button' onclick='ajaxFunctionTri()' value='Valider'/></div>
	</div>
</form>
<div id='ajaxDiv'>Your result will display here</div>

** DbManipulate.php **

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function filtreDate ($data,$con) {
 
	$dbhost = "localhost";
	$dbuser = "userdemandes";
	$dbpass = "userdemandes";
	$dbname = "demandes";
 
 
	//Connect to MySQL Server
	mysql_connect($dbhost, $dbuser, $dbpass);
 
 
	//Select Database
	mysql_select_db($dbname) or die(mysql_error());
 
 
	// Retrieve data from Query String
	$firstname_tri = $_GET['firstname_tri'];
	$lastname_tri = $_GET['lastname_tri'];
	$domain_tri = $_GET['domain_tri'];
	$email_tri = $_GET['email_tri'];
 
 
	// Escape User Input to help prevent SQL Injection
	$firstname_tri = mysql_real_escape_string($firstname_tri);
	$lastname_tri = mysql_real_escape_string($lastname_tri);
	$domain_tri = mysql_real_escape_string($domain_tri);
	$email_tri = mysql_real_escape_string($email_tri);
 
 
 
	if (($firstname_tri) != "") {
 
		//build query
		$query = "SELECT * FROM ajaxtable WHERE firstname = '$firstname_tri'";
 
		if (($lastname_tri) != "")
		$sql .= " AND lastname = '$lastname_tri'";
 
		if (($domain_tri) != "")
		$sql .= " AND domain = '$domain_tri'";
 
		if (($email_tri) != "")
		$sql .= " AND email = '$email_tri'";
 
 
 
		//Execute query
		$qry_result = mysql_query($query) or die(mysql_error());
 
		//Build Result String
		$display_string = "<div class='div_tbl_filtres_maitre'>";
 
		$display_string .= "<div class='div_tbl_filtres_menu'>";
 
		$display_string .= "<div class='div_tbl_filtres_menu_date'><b>firstname</b></div>";
		$display_string .= "<div class='div_tbl_filtres_menu_priorite'><b>lastname</b></div>";
		$display_string .= "<div class='div_tbl_filtres_menu_numdt'><b>domain</b></div>";
		$display_string .= "<div class='div_tbl_filtres_menu_application'><b>email</b></div>";
		$display_string .= "</div>";
 
 
		// Insert a new row in the table for each person returned
		while($row = mysql_fetch_array($qry_result)){
 
			//$display_string .= "<div class='div_tbl_filtres_view'>";
 
			if ( $row[statut]=="OK" ) { $display_string .= "<div class='div_tbl_filtres_view_ok'>"; } else { $display_string .= "<div class='div_tbl_filtres_view_ko'>"; }
 
			$display_string .= "<div class='div_tbl_filtres_date'>$row[firstname]</div>";
			$display_string .= "<div class='div_tbl_filtres_priorite'>$row[lastname]</div>";
			$display_string .= "<div class='div_tbl_filtres_numdt'>$row[domain]</div>";
			$display_string .= "<div class='div_tbl_filtres_application'>$row[email]</div>";
 
			$display_string .= "</div>";
		}
 
		echo "Query: " . $query . "<br />";
 
		$display_string .= "</div>";
 
		echo $display_string;
 
	}
 
}
 
 
include('db.php');
 
 if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
 
   call_user_func($actionfunction,$_REQUEST,$con);
}

[PHP - MYSQL] Tableau formulaire + Back Office

PHP & Base de données

Discussions similaires

Partager

Partager