Affichage des données dans un tableau à l'aide de PHP+json et javascript

Version imprimable

1 pièce(s) jointe(s)

bonjour,

je développe en ce moment une petite application web pour ma société, mais je tombe sur un point bloquant pour afficher les demande insérées par les employés dans un tableau car les données s'affiche sur le BODY pas dans mon tableaux et le compteurs des enregistrement me sort des chiffres bizarres.

je sollicite votre aide afin que je puisse avancer dans mon travail.

voici mon code HTML:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP</title>
<link href="fonts/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/swap_acs.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 
 
</head>
 
<body>
<nav >
	<div class="logo">
    	<img src="images/logo.png" />
    </div>
    <ul>
 
        <li><a href="acs.php">acceuil</a></li>
        <li><a  href="swap_acs.php">swap</a></li>
        <li><a class="active">feed-back</a></li>
        <li><a href="#">rapport</a></li>
        <li><a href="#">guide</a></li>
        <li><a href="#">procédure</a></li>
 
        <div class="useractif">
        <p>Bienvenu(e) <?php echo $_SESSION['MM_Username'] ?></p>
        <li><a href="<?php echo $logoutAction ?>" onclick="return confirm('Voulez vous déconnecter?!');"><i class="fa fa-power-off fa-1x" style="color:red;"  aria-hidden="true" ></i>  déconnexion</a></li></div>
      </ul>
 
 
 
</nav>
 
 
 
	<div ng-app="myApp" ng-controller="controller">
        <div class="container">
            <br/>
            <h3 align="center">Liste des demandes de SWAP</a></h3>
            <br/>
            <div class="row">
                <div class="col-sm-2 pull-left">
                    <label>Afficher:</label>
                    <select ng-model="data_limit" class="form-control">
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                </div>
                <div class="col-sm-6 pull-right">
                    <label>Search:</label>
                    <input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12" ng-show="filter_data > 0">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <th>ID SWAP&nbsp;<a ng-click="sort_with('id_swap');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>MSISDN&nbsp;<a ng-click="sort_with('msisdn');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>PROFIL&nbsp;<a ng-click="sort_with('profil');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>CODE PDV&nbsp;<a ng-click="sort_with('Code_PDV');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>RAISON S&nbsp;<a ng-click="sort_with('PDVname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>GERANT S&nbsp;<a ng-click="sort_with('Gerant');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>WILAYA&nbsp;<a ng-click="sort_with('Wilaya');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>COMMUNE&nbsp;<a ng-click="sort_with('Commune');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>USER&nbsp;<a ng-click="sort_with('InserePar');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>DATE&nbsp;<a ng-click="sort_with('date_Insert');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>STATUT&nbsp;<a ng-click="sort_with('validation');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        </thead>
                        <tbody>
                            <tr ng-repeat="data in searched = (file | filter:search | orderBy : base :reverse) | beginning_data:(current_grid-1)*data_limit | limitTo:data_limit">
                                <td>{{data.id_swap}}</td>
                                <td>{{data.msisdn}}</td>
                                <td>{{data.profil}}</td>
                                <td>{{data.Code_PDV}}</td>
                                <td>{{data.PDVname}}</td>
                                <td>{{data.Gerant}}</td>
                                <td>{{data.Wilaya}}</td>
                                <td>{{data.Commune}}</td>
                                <td>{{data.InserePar}}</td>
                                <td>{{data.date_Insert}}</td>
                                <td>{{data.validation}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-12" ng-show="filter_data == 0">
                    <div class="col-md-12">
                        <h4>Pas de données trouvées..</h4>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-6 pull-left">
                        <h5>Page {{ searched.length }} sur {{ entire_user}}</h5>
                    </div>
                    <div class="col-md-6" ng-show="filter_data > 0">
                        <div pagination="" page="current_grid" on-select-page="page_position(page)" boundary-links="true" total-items="filter_data" items-per-page="data_limit" class="pagination-small pull-right" previous-text="&laquo;" next-text="&raquo;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src="JS/myapp.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</body>
</html>

mon code PHP pour récupérer les demandes:

Base Mysql: "GSAP",
table: "tbl_swap"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$conn  = new mysqli('localhost', 'root', '', 'GSAP');
$query = "select distinct id_swap, msisdn, profil, Code_PDV, PDVname, Gerant, Wilaya, Commune, InserePar, date_Insert, validation   from tbl_swap order BY id_swap";
$result = $conn->query($query) or die($conn->error . __LINE__);
$fetch_data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $fetch_data[] = $row;
    }
}
$jResponse = json_encode($fetch_data);
echo $jResponse;
?>

mon code javascript:

myapp.js

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
 
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('beginning_data', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});
app.controller('controller', function($scope, $http, $timeout) {
    $http.get('fetch.php').success(function(tbl_swap) {
        $scope.file = tbl_swap;
        $scope.current_grid = 1;
        $scope.data_limit = 10;
        $scope.filter_data = $scope.file.length;
        $scope.entire_user = $scope.file.length;
    });
    $scope.page_position = function(page_number) {
        $scope.current_grid = page_number;
    };
    $scope.filter = function() {
        $timeout(function() {
            $scope.filter_data = $scope.searched.length;
        }, 20);
    };
    $scope.sort_with = function(base) {
        $scope.base = base;
        $scope.reverse = !$scope.reverse;
    };
});

merci à vous.

Salut lakhdar16,
Il me semble que ton erreur est minime :) seulement un oubli ou une incompréhension niveau de la construction de la réponse côté PHP.
En PHP la réponse pour javascript se fait de plusieurs manière idéalement les plus utilisés sont un retour en HTML ou en JSON.

Sauf que dans ton cas ton script attend un retour JSON et tu lui envoie du ~~HTML~~, pour régler ton problème il faut que tu force ton retour en JSON et pour ça il suffit de le paramétrer car par défaut se sera que du HTML si tu ne le signale pas dans ton HEADER soit : header('Content-Type: application/json');
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php $conn = new mysqli('localhost', 'root', '', 'GSAP'); $query = "select distinct id_swap, msisdn, profil, Code_PDV, PDVname, Gerant, Wilaya, Commune, InserePar, date_Insert, validation from tbl_swap order BY id_swap"; $result = $conn->query($query) or die($conn->error . __LINE__); $fetch_data = array(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $fetch_data[] = $row; } } $jResponse = json_encode($fetch_data); //on force le retour en json header('Content-Type: application/json'); echo $jResponse; ?>

26/02/2018, 19h37
lakhdar16

1 pièce(s) jointe(s)

Bonsoir et désolé pour ma réponse tardive,

Merci Headmax pour votre réponse, j’ai essayé votre solution mais ça empêche l’affichage du HTML
Le code complet de la page s’affiche sur l’écran.

Je pense que le

Citation:

header (‘Content-Type: application/json’);

empêche l’affichage du code HTML.

Merci
26/02/2018, 22h38
Marco46

Avec AngularJS tu es supposé avoir 2 applications complètement séparées l'une de l'autre. L'application front (AngularJS) parler à l'application back (PHP dans ton cas) au travers de webservices.

Là j'ai l'impression que ton PHP retourne aussi le HTML.

Tu as manifestement un problème d'architecture.
27/02/2018, 21h09
lakhdar16

bonjour;

Merci Marco46 pour votre réponse, pourriez vous m'indiquer comment corriger mon architecture?

je suis un peu perdu et je ne trouve pas de solution à mon cas.

j'ai essayer d'adopter d'autre méthodes pour afficher mon résultat dans un tableau mais c’était pas convenable pour moi.

merci.
27/02/2018, 23h24
Marco46

C'est un peu compliqué à expliquer sur un post.

En gros ton application AngularJS est une application à part, avec son index.html et servie par un serveur http dédié. Elle consomme des services REST servis par ton application PHP dédiée sur son serveur dédié. L'application PHP n'expose rien en terme de HTML.

Dans ton cas j'ai l'impression que c'est le PHP qui expose le index.html dans lequel tu importes AngularJS. C'est pas de cette manière qu'il faut s'y prendre.

bonsoir,

dois-je penser à la création d'un MVC?
je ne possède pas cet niveau là je suis qu'au début.

j'ai remplacer ma structure par la suivante:

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP</title>
<link href="fonts/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-3.3.7.css" rel="stylesheet">
<link href="css/swap_acs.css" rel="stylesheet" type="text/css"/>
<link href="css/datatables.bootstrap.min.css" rel="stylesheet" type="text/css"/>
 
 
</head>
 
<body>
<nav class="barreNav">
	<div class="logo">
    	<img src="images/logo.png" />
    </div>
    <ul>
 
        <li><a href="acs.php">acceuil</a></li>
        <li><a  href="swap_acs.php">swap</a></li>
        <li><a href="swap_acs_primaire.php">feed-back</a></li>
        <li><a class="active">mes demandes</a></li>
        <li><a href="#">guide</a></li>
        <li><a href="#">procédure</a></li>
 
        <div class="useractif">
        <p>Bienvenu(e) <?php echo $_SESSION['MM_Username'] ?></p>
        <li><a href="<?php echo $logoutAction ?>" onclick="return confirm('Voulez vous déconnecter?!');"><i class="fa fa-power-off fa-1x" style="color:red;"  aria-hidden="true" ></i>  déconnexion</a></li></div>
      </ul>
 
 
 
</nav>
 
<div class="container" style="margin:0; padding: 0; margin-top: 150px;">
	<div class="col-md-8 col-xs-offset-2" style="margin:0; padding: 0;">
		<table class="table table-bordered table-hover" style="width: 1300px; font-size:13px; line-height: 20px; margin-bottom: 5px; ">
        	<thead style="background:rgba(255, 215, 0,1.0); color:rgba(74, 13, 50,1.0); font-weight:normal;">
            	<tr height="30px">
                			<th width="60px">ID Swap</th>
                            <th width="40px">MSISDN</th>
                            <th width="50px">Profil</th>
                            <th width="40px">Code</th>
                            <th width="140px">PDV</th>
                            <th width="150px">Gérant</th>
                            <th width="130px">Wilaya</th>
                            <th width="150px">Commune</th>
                            <th width="120px">User</th>
                            <th width="65px">Date</th>
                            <th width="50px">Statut</th>
                </tr>
            </thead>
            <tbody >
            	<?php 
                                        $conn = new PDO('mysql:host=localhost;dbname=GSAP', 'root', '');
                                        $sql = $conn->query('SELECT * FROM tbl_swap ORDER BY id_swap');
                                        while($data = $sql->fetch()) {
                                                echo '
                                                        <tr height="25px" style="text-align: left;">
                                                                <td>'.$data['id_swap'].'</td>
                                                                <td>'.$data['msisdn'].'</td>
                                                                <td>'.$data['profil'].'</td>
                                                                <td>'.$data['Code_PDV'].'</td>
                                                                <td>'.$data['PDVname'].'</td>
                                                                <td>'.$data['Gerant'].'</td>
                                                                <td>'.$data['Wilaya'].'</td>
                                                                <td>'.$data['Commune'].'</td>
                                                                <td>'.$data['InserePar'].'</td>
                                                                <td>'.$data['date_Insert'].'</td>
                                                                <td id="statut">'.$data['validation'].'</td>
                                                        </tr>
                                                
                                                ';
                                        }
                                ?>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="js/datatables.bootstrap.min.js"></script>   
<script type="text/javascript">
        $(document).ready(function() {
        $(".table").DataTable({
                "order": [[0, "desc"]]
                });
    });
 
</script>	
</body>
</html>

mon code fonctionne, mais le temps de réponse est un peu long.

comment puis-je améliorer mon code PHP afin d'obtenir une réponse rapide : à cet étape j'ai que 20 lignes ça prends 03 secondes pour afficher mon résultat ce qui est un peu long.

merci à vous