API Rest - Client/Serveur simpliste

**Ludoztw** · 23/03/2015, 00h25

Bonjour,

Je débute dans l'apprentissage du web. Je souhaite étudier l'achitecture REST qui me permet de faire le lien entre une application côté client en JS et un serveur web. Sur mon serveur, j'ai une partie controleur, modele, et persistance qui gere mes personnes. Je souhaite donc réaliser ma partie côté client.
Je souhaite afficher un simple tableau à partir d'une base de données, pouvoir afficher, ajouter, modifier, supprimer une personne. Seulement voilà, lorsque j'affiche ma page html, et que je souhaite afficher mon tableau rien ne se passe

Je ne vois pas où est mon erreur, ai-je oublié quelque chose?

Controleur :

Code php :

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
<?php
class Controleur {
	function __construct() {
		try{
			$action=$_REQUEST['action'];
                        switch($action){
				case "get":
					$modele = DataAccessLayer::getPersonneModel($_REQUEST['id']);
					echo json_encode($modele);
					break;
				case "post":
					$modele = DataAccessLayer::postPersonne(array("nom" => utf8_decode($_REQUEST["nom"]), "prenom" => utf8_decode($_REQUEST["prenom"])));
					echo json_encode($modele);
					break;
				case "put":
					$modele = DataAccessLayer::postPersonne(array("id" => $_REQUEST['id'], "nom" => utf8_decode($_REQUEST["nom"]), "prenom" => utf8_decode($_REQUEST["prenom"])));
					echo json_encode($modele);
					break;
				case "delete":
					$modele = DataAccessLayer::deletePersonne($_REQUEST['id']);
					echo json_encode($modele);
					break;
				default: // L'action est incorrecte (non pr�vue)
					$modele = ModelCollectionPersonnes::getErrorModel("action", "Action non d�finie");
					echo json_encode($modele);						
					break;
			}
		}
		catch (Exception $e){
			$modele = ModelCollectionPersonnes::getErrorModel("Exception", $e->getMessage());
			echo json_encode($modele);
		}
	}
}
?>

mon api permettant d'afficher le tableau :

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
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
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Tableau des Personnes</title>
        <script src="./jquery-1.11.2.min.js"></script>
        <script src="./views.js"></script>
        <script src="./EventController.js"></script>
 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1> Tableau des Personnes </h1>
        <button id="displayTable">Afficher le tableau </button>
        <p id="errorMsgParagraph"></p>
        <table>
            <thead>
                <tr><th>Prénom</th><th>Nom</th><th></th><th></th></tr>
            </thead>
 
            <tbody id="outputTBody">
 
            </tbody>
        </table> 
 
        <script>
            var clickCallback = function(){
                var ctrl = new Controller($( this ).prop("nodeName"), $( this ).attr("id"),"click");
                ctrl.fireEvent();
               } 
               
            $( "#displayTable" ).bind("click",clickCallback);
            
            var changeCallback = function(){
                var ctrl = new Controller($( this ).prop("nodeName"),$( this ).attr("id"),"change");
                
                ctrl.fireEvent();
            }
        </script>
 
    </body>
</html>

Mon controleur js :

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
function Controller(tagName, idElement, eventType){
    this.tagName = tagName;
    this.idElement = idElement;
    this.eventType = eventType;
}
 
Controller.prototype.toString = function(){
    return "Element : " + this.tagName + ", ID :" + this.idElement + ", Type d'évenement : "+ this.eventType;
}
 
Controller.prototype.fireEvent = function(){
    switch (this.eventType){
        case "click" : 
            this.onClick();
            break;
        case "change":
            this.onChange();
            break;        
        default : alert("Evenement non défini");    
    }
}
 
Controller.prototype.onClick = function(){
    switch (this.idElement){
        case "displayTable" :
            this.executeRequest({action : "get"});
            break;
        case "ajouter_new" :
        case "retablir_as_new" :
            this.executeRequest({action : "post",
                nom : $( "#nom_new" ).val(),
                prenom : $( "#prenom_new" ).val()
            });
            break;
        default :
            var idElementParts = this.idElement.split('_');
            methode = idElementParts[0];
            idPersonne = idElementParts[1];
            this.executeRequest({action: idElementParts[0],
                id : idElementParts[1]});
    }         
} 
 
Controller.prototype.onChange = function(){
    var idElementParts = this.idElement.split('_');
    idPersonne = idElementParts[1];
    this.executeRequest({action : "put",
        id : idElementParts[1],
        nom : $( "#nom_"+idPersonne ).val(),
        prenom : $( "#prenom_"+idPersonne ).val()
    });
}
 
Controller.prototype.executeRequest = function(parametersObject){
    switch (parametersObject.action){
        case "delete" :
            callbackFunction = generateViewDeleteSingle;
            break;
 
        case "post" :
            callbackFunction = generateViewGetPostPutSingle;
            break;
 
        case "put" :
            callbackFunction = generateViewDoNothing;
            break;
 
        case "get" :
        if (parametersObject.id != null){
            callbackFunction = generateViewGetPostPutSingle;
        }
        else{
            callbackFunction = generateViewGetMultiple;
        }
 
        break;   
    }
 
 
jqxhr = $.ajax({dataType : "json",
    url : "http://localhost:8000/", // J'ai un gros doute sur l'url
    method : 'post',
    contentType : 'application/x-www-form-urlencoded',
            data : parametersObject,
 
            success : callbackFunction 
   });
 
jqxhr.fail(function(){
    $( "#outputParagraph" ).append("Erreur : échec de la requête getJSON");
});
 
}

La vue côté js :

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
function generateViewDoNothing(retrievedData){
 
} 
 
function generateViewDeleteSingle(retrievedData){
    if(retrievedData["error"] != null){
        for(var errorType in retrievedDate["error"]){
            $( "#errorMsgParagaph" ).append("Une erreur de type " + errorType + "s'est produite : "+ retrievedData["error"][errorType]);
        }
    }
    else{
        $ ( "#outputTBody" ).empty();
 
        for(var key in retrievedData['data']){
            personne = retrievedData['data'][key];
 
            $( "#outputTBody ").append('<tr>' +
                    '<td><input id="prenom_new" value="' + personne['prenom']+'"/></td>'
                    +'<td><input id="nom_new" value="'+personne['nom']+'"/></td>'
                    +"<td>Supprimé</td>"
                    +'<td><button id="retablir_as_new">Rétablir</button></td>'
                    +'</tr>');    
 
            $( "#retablir_as_new" ).bind("click", clickCallback);
 
        }
    }
 
}
 
function generateViewGetPostPutSingle(retrievedData){
    if(retrievedData["error"] != null){
        for(var errorType in retrievedData["error"]){
            $ ( "#errorMsgParagraph" ).append("Une erreur de type "+errorType+"s'est produite : "+retrievedData["error"][errorType]);
        }
    }
    else
    {
        $( "#outputTBody" ).empty();
 
        for(var key in retrievedData['data']){
            personne = retrievedData['data'][key];
 
        $( "#outputTBody" ).append('<tr>'
        +'<td><input id="prenom_'+personne['id']+'" value="'+personne['prenom']+'"/></td>'
        +'<td><input id="nom_'+personne['id']+'" value="'+personne['nom']+'"/></td>'
        +'<td>ID : '+personne['id'].substring(0,5)+'...</td>'
        +'<td><button id="'+'delete_'+personne['id']+'">Supprimer</button></td>'
        +'</tr>');
 
        $( "#delete_"+personne['id'] ).bind("click",clickCallback);
        $( "#get_"+personne['id'] ).bind("click",clickCallback);
        $( "#nom_"+personne['id'] ).bind("change",changeCallback);
        $( "#prenom_"+personne['id'] ).bind("change",changeCallback);
        }
    }
}
 
function generateViewGetMultiple(retrievedData){
    if(retrievedData["error"] != null){
        for (var errorType in retrievedData["error"]){
            $( "#errorMsgParagraph" ).append("Une erreur de type "+errorType+"s'est produite : "+retrievedData["error"][errorType]);
        }
    }
    else{
        $( "#outputTBody" ).empty();
        $( "#outputTBody" ).append('<tr>'
                +'<td><input id="prenom_new" value="" /></td>'
                +'<td><input id="nom_new" value="" /></td>'
                +'<td><button id="ajouter_new">Ajouter</button></td>'
                +"<td></td>"+'</tr>');
        $( "#ajouter_new" ).bind("click", clickCallback);
 
        for (var key in retrievedData['data']){
            personne = retrievedData['data'][key];
 
            $( "#outoutTBody").append('<tr>'
                    +'<td><input id="prenom_' + personne['id']+ '" value="' + personne['prenom'] + '"/></td>'
                    +'<td><input id="nom_' + personne['id'] + '" value="'+personne['nom']+'"/></td>'
                    +'<td><button id="'+'delete_'+personne['id']+'">Supprime</button></td>'
                    +'<td><button id="'+'get_'+personne['id']+'">Voir Détails</button></td></tr>'
                    +'</tr>');
 
            $( "#delete_"+personne['id']).bind("click",clickCallback);
            $( "#get_"+personne['id']).bind("click",clickCallback);
 
            $( "#nom_"+personne['id'] ).bind("click",clickCallback);
            $( "#prenom_"+personne['id'] ).bind("click",clickCallback);
 
        }
    }
}

Merci beaucoup de votre aide, je suis desespéré..

-------------------------------------------

EDIT : Il me semble que ça vient de la requête AJAX en fin du controleur JS car je n'arrive pas à rentrer dans la fonction generateViewGetMultiple dans la vue..

Merci beaucoup

**headmax** · 23/03/2015, 01h28

Salut,
1) Ton appel ajax a bien fonctionnée?
Dans ton exemple j'imagine que tu souhaite mettre ajour et afficher le resultat.
2)Tes données POST sont correct?
3)As tu des error.log PHP ou apache et SQL, tu es correct a ce niveau?
4)Si tout est ok a quoi ressemble de retour json?

**Ludoztw** · 23/03/2015, 01h41

Merci headmax pour ton aide

Alors :

1) Oui c'est cela. Je ne sais pas trop sur si mon appel a bien marché, mais en tout cas il a l'air de généré ma fonction get.
2) Dans ma requête ajax?
3) Non pas d'erreur
4) Il ressemble à cela : {"error":null,"data":[{"id":"1","nom":"Martin","prenom":"Michel"}]}.

**headmax** · 23/03/2015, 09h27

Salut Ludoztw,

J'aimerais si ça ne te dérange pas voir la partie PHP qui reçoit ta requête ajax GET donc pas le controller mais la méthode getPersonneModel de ta classe DataAccessLayer
comme il semblerait que cette fonction est incriminé dans le retour de ta requête ajax qui devrait te retourner un tableau PHP essaye de générer un log en php sur ce tableaux et dans ta classe pour voir si tout ce passe bien a ce niveau..
Ou essaye de mettre un var_dump de ce tableau et tester l'appel toi même sans le formulaire ajax pour voir si ton tableau retourne bien ce que tu souhaite.

Sinon d'après ton retour json :

Code :

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

1
2
 
{"error":null,"data":[{"id":"1","nom":"Martin","prenom":"Michel"}]}

Il semblerait que tu n'as pas d'erreur et que le script PHP te retourne une personne accessible en faisant dans la function success ajax un simple :

Code :

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

1
2
3
4
5
 
var json = data;
console.log(json.data[0].nom);
console.log(json.data[0].id);
console.log(json.data[0].prenom

**Ludoztw** · 23/03/2015, 10h42

Merci mais je viens d'identifier mon probleme, je n'arrive pas à le résoudre :

Lorsque je fais :

http://localhost:8000/php/?action=get

Code :

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

1
2
3
4
5
6
7
8
9
10
<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: id in C:\Users\Ludo\Documents\NetBeansProjects\JS\mvc_rest_php\controleur\Controleur.php on line <i>14</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0156</td><td bgcolor='#eeeeec' align='right'>129488</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\Users\Ludo\Documents\NetBeansProjects\JS\mvc_rest_php\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0156</td><td bgcolor='#eeeeec' align='right'>147608</td><td bgcolor='#eeeeec'>Controleur->__construct(  )</td><td title='C:\Users\Ludo\Documents\NetBeansProjects\JS\mvc_rest_php\index.php' bgcolor='#eeeeec'>..\index.php<b>:</b>8</td></tr>
</table></font>
 
{"error":null,"data":[{"id":"6325","nom":"Martin","prenom":"Jacques"},{"id":"84","nom":"Martin","prenom":"Jacques"}]}

Il y a l'erreur que l'id n'existe pas. Mon navigateur renvoie donc une erreur qui n'a pas lieu d'être. Cela perturbe ma requête JSON (j'ai vérifié).
Savez vous comment faire pour désactiver le mode débug .. J'ai tenté de désactiver des options dans wamp/php mais sans succes..

Auriez vous une solution?

**Bovino** · 23/03/2015, 11h27

Mon navigateur renvoie donc une erreur qui n'a pas lieu d'être.

Euh... pas vraiment, ce que tu montres, c'est une erreur PHP qui est renvoyée en HTML.
Et pour info, les langages informatiques possèdent rarement une option "faire des farces", donc si il te renvoie une erreur, c'est qu'elle a bel et bien lieu d'être (même si elle ne te fait pas plaisir

).

API Rest - Client/Serveur simpliste

JavaScript

Vue hybride

Discussions similaires

Partager

Partager