API Rest - Client/Serveur simpliste

Version imprimable

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:

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:

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:

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:

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

23/03/2015, 01h28
headmax

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?
23/03/2015, 01h41
Ludoztw

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"}]}.
23/03/2015, 09h27
headmax
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:

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:

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

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:

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?

23/03/2015, 11h27
Bovino

Citation:

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 :aie:).
23/03/2015, 12h21
headmax
Salut si tu fait un :

http://localhost:8000/php/?action=get&id=1
ça te retourne quoi?

Il me semble que ton script PHP attend un id ou alors tu check mal ton GET
Code:

1 2 3 4 $expr = '/^[1-9][0-9]*$/'; if(isset($_GET['id']) && preg_match($expr, $_GET['id'])){ //tes traitements }
Sans le dit code php je ne vois pas comment je pourrais t'aider, je te rappel que je n'ai ni tes concepts, ni l'environnement test sur lequel tu bosse, donc sans cette methode citez au dessus je suis pas en mesure de t'aider.

Je pense que ton problème vient de ta requête SQL qui soit est mal switcher ou alors attends un id qui ne lui est pas donnée peut être ...

gl
24/03/2015, 07h21
adam CEDRIC

utiliser postman pour test l'application REST cote serveur

Bonjour, je te conseille de test ton code php et voir le rendu. Tu peux utiliser l’outil postman de chrome (il est gratuit :D). Si tu veux un tutorel pour l’utilisation de postman voici https://www.youtube.com/watch?v=bqpXOT5mwW4
Gratitude