Créé en 2018 et modifié le 09 Jan 2020
Créé en 2018 et modifié le 09 Jan 2020
Réaliser son API avec get et post
On souhaite maintenant faire correspondre nos classes avec la base de données suivante:
https://gitlab.com/cherryclass/got/blob/master/got.sql
- Instancier la base de données avec AWS ou IBM Cloud.
- Réaliser le diagramme physique de données correspondant.
- Réaliser le diagramme de classe correspondant.
- Ajouter un menu qui permet de choisir entre l’application PHP (mission 1 et 2), l’utilisation de l’API (3) et les API Slim, NodeJS et Flask.
API PHP avec SLIM
Slim est un micro Framework pour PHP.
Première URI – GET /bonjour
- Installer composer, puis dans le répertoire “got/serveur” du serveur web en PHP7, grâce à une invite de commande, exécuter :
composer require slim/slim "3"
- Réaliser une page firstSlim.html dans le répertoire “got/client” du serveur web qui appelle une URL ‘bonjour’ sur le serveur SLIM grâce à Ajax avec la méthode GET. On pourra s’aider de l’extension RESTED pour tester l’URI.
- Le serveur devra renvoyer bonjour qui sera affiché par la page d’appel.
Exemple de code client functionSlim.js
$( document ).ready(function() { $('#btn-valide').click(function(){ $.ajax({ type: "GET", contentType: 'application/json; charset=utf-8', url: "http://localhost/got/serveur/bonjour", success: function(data){ alert(data); } }); }); });
Exemple de code serveur index.php (pas de ?> à la fin)
<?php require 'vendor/autoload.php'; use \Psr\Http\Message\ServerRequestInterface as Request; use \Psr\Http\Message\ResponseInterface as Response; $app = new \Slim\App; $app->get('/zaza', function(Request $request, Response $response){ return "wazaaaaaaaa"; }); $app->run();
Pour le déploiement coté serveur
dans un fichier .htaccess
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.php [QSA,L] Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
dans un fichier composer.json
{ "require": { "php": "7.*", "ext-mbstring": "*", "ext-mysqli": "*", "ext-json": "*", "ext-pdo": "*", "ext-pdo_mysql": "*", "slim/slim": "3.*", "zircote/swagger-php": "^2.0", "firebase/php-jwt": "^5.0" } }
URI avec attribut – GET /personnage/{name}
- Choisir et envoyer un nom de personnage de GOT au serveur SLIM.
- Le serveur renverra la description du personnage grâce à une fonction PHP et un appel à la base de données.
Exemple de code client
$( document ).ready(function() { $('#btn-new-liste').click(function(){ let idx=$('#idx').val(); $.ajax({ type: "GET", url: "http://localhost/got/serveur/personnage/"+idx, success: function(data){ $("#result").html(data); } }); }); });
Exemple d’ajout de code index.php
$app->get('/personnage/{id}', function(Request $request, Response $response){ $id = $request->getAttribute('id'); return getPersonnage($id); }); function connexion() { /*IBM Cloud * $vcap_services = json_decode($_ENV['VCAP_SERVICES'], true); * $uri = $vcap_services['compose-for-mysql'][0]['credentials']['uri']; * $db_creds = parse_url($uri); * $dbname = "patisserie"; * $dsn = "mysql:host=" . $db_creds['host'] . ";port=" . $db_creds['port'] . ";dbname=" . $dbname; * return $dbh = new PDO($dsn, $db_creds['user'], $db_creds['pass'],array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8')); * */ //autre return $dbh = new PDO("mysql:host=localhost;dbname=patisserie", 'root', '', array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8')); } function getPersonnage($id) { $sql = "SELECT * FROM gateau"; try{ $dbh=connexion(); $statement = $dbh->prepare($sql); $statement->execute(); $result = $statement->fetchAll(PDO::FETCH_CLASS); return json_encode($result, JSON_PRETTY_PRINT); } catch(PDOException $e){ return '{"error":'.$e->getMessage().'}'; } }
URI avec paramètre – GET /user
- Envoyer le login et le mot de passe de connexion.html au serveur SLIM.
- Tester si le login et le mot de passe existe grâce à une fonction PHP et renvoyer l’email.
Exemple de code client
$('#btn-valide').click(function(){ let id=$('#id').val(); let nom=$('#nom').val(); $.ajax({ type: "GET", contentType: 'application/json; charset=utf-8', url: "http://localhost/got/serveur/user?id="+id+"&nom="+nom, success: function(data){ alert(data); } }); });
Exemple d’ajout de code index.php
$app->post('/user', function(Request $request, Response $response){ $tb = $request->getQueryParams(); $id = $tb["id"]; $nom = $tb["nom"]; //fonction de vérification d'utilisateur return checkUser($id, $nom); }); function checkUser($id, $nom) { $sql = "SELECT * FROM gateau"; try{ $dbh=connexion(); $statement = $dbh->prepare($sql); $statement->execute(); $result = $statement->fetchAll(PDO::FETCH_CLASS); return json_encode($result, JSON_PRETTY_PRINT); } catch(PDOException $e){ return '{"error":'.$e->getMessage().'}'; } }
URI avec paramètre – POST /user
- Réaliser un formulaire d’inscription d’utilisateur inscription.html.
- Permettre l’ajout de l’utilisateur dans la base de données.
Exemple de code client
$('#btn-valide').click(function(){ let id=$('#id').val(); let nom=$('#nom').val(); $.ajax({ type: "POST", contentType: 'application/json; charset=utf-8', url: "http://localhost/got/serveur/user?id="+id+"&nom="+nom, success: function(data){ alert(data); } }); });
Exemple d’ajout de code index.php
$app->post('/user', function(Request $request, Response $response){ $tb = $request->getQueryParams(); $id = $tb["id"]; return insertUser($id, $nom); }); function insertUser($id, $nom) { $sql = "INSERT ..."; ... }
API JavaScript avec Express.js
Express est un Framework pour réaliser un serveur avec Node.js.
Première URI – GET /bonjour
- Installer NodeJS
- Réaliser un fichier bonjour.js dans “got/serveur”
console.log("Bonjour");
- Tester le fichier.
node "dossier"/bonjour.js
- Installer les module express et autres grâce à npm.
npm install express --save npm install cors --save
- Implémenter l’URI /bonjour et lancer le fichier.
Exemple de code serveur index.js
var express = require('express'); var cors= require('cors'); var hostname = 'localhost'; var port = 8080; var app = express(); app.use(cors()); var myRouter = express.Router(); myRouter.route('/bonjour').get(function(req,res){ res.json({message : "Youhou", methode : req.method}); }) // Nous demandons à l'application d'utiliser notre routeur app.use(myRouter); // Démarrer le serveur app.listen(port, hostname, function(){ console.log("Mon serveur fonctionne sur http://"+ hostname +":"+port); });
URI avec attribut – GET /personnage/{name}
- Installer le module mysql pour pouvoir accéder à une base de données.
npm install mysql --save
- Choisir et envoyer un nom de personnage de GOT au serveur.
- Le serveur renverra la description du personnage grâce à une fonction et un appel à la base de données.
Exemple de code serveur
A ajouter au code précédent
var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'patisserie' }); connection.connect(); myRouter.route('/personnage/:nono').get(function(req,res,next){ nono= req.params.nono; console.log( nono); connection.query('SELECT * from gateau', function (error, results, fields) { if (error) throw error; res.json({ message : results}); }); })
URI avec paramètre – GET /user
- Envoyer le login et le mot de passe de connexion.html au serveur .
- Tester si le login et le mot de passe existe grâce à une fonction et renvoyer l’email.
Exemple de code serveur
myRouter.route('/gateaux').get(function(req,res,next){ nom= req.query.nom; console.log( nom); connection.query('SELECT * from gateau', function (error, results, fields) { if (error) throw error; res.json({message : results}); }); })
URI avec paramètre – POST /user
- Permettre l’ajout de l’utilisateur dans la base de données depuis inscription.html.
Installer le module body-parser grâce à npm.
npm install body-parser --save
Exemple de code serveur
connection.connect(); //var bodyParser = require('body-parser') //app.use( bodyParser.json() ); // to support JSON-encoded bodies //app.use(bodyParser.urlencoded({ // to support URL-encoded bodies extended: true })); app.use(express.json()); // to support JSON-encoded bodies //app.use(bodyParser.urlencoded({ extended: true}));// to support URL-encoded bodies // assuming POST: id=foo&nom=red <-- URL encoding // or POST: {"id":"foo","nom":"red"} <-- JSON encoding myRouter.route('/user') .post(function(req,res){ var id= req.query.id; var nom= req.query.nom; connection.query('insert into gateau values('+id+',"'+nom+'")', function (error, results, fields) { if (error) throw error; }); res.json({ message : "Gateau ajouté"}); })
Déploiement sur IBM
Le fichier serveur doit s’appeler app.js
Dans un fichier package.json
{ "name": "NodejsStarterApp", "version": "0.0.1", "private": true, "scripts": { "start": "node index.js" }, "dependencies": { "express": "4.*", "cors":"2.*", "cfenv": "1.*", "body-parser": "1.*", "request": "2.*", "htmlparser": "1.*", "mysql": "2.*" }, "repository": {}, "engines": { "node": "10.*" } }
Modifier les variables suivantes dans index.js :
var host = (process.env.VCAP_APP_HOST || 'localhost'); var port = (process.env.VCAP_APP_PORT || 3000); var app = express();
API Python avec Flask
Flask est un Framework pour réaliser un serveur avec Python.
Première URI – GET /bonjour
- Installer Python
- Installer le module flask
pip install Flask
- Installer le module cors
pip install -U flask-cors
- Implémenter l’URI /bonjour qui devra renvoyer le message bonjour.
- Lancer le serveur puis y accéder.
python index.py
Exemple de code serveur index.py
from flask import Flask from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route("/") def hello(): return "Hello World!" if __name__ == '__main__' app.run(debug=True)
URI avec attribut – GET /personnage/{name}
- Installer le module flask-mysql pour pouvoir accéder à une base de données.
- Choisir et envoyer un nom de personnage de GOT au serveur.
- Le serveur renverra la description du personnage grâce à une fonction et un appel à la base de données.
Exemple de code serveur
@app.route('/gateau/<id>') def success(id): return 'gateau %s' % id from flask import Flask from flask import request from flask import jsonify from flaskext.mysql import MySQL import json app = Flask(__name__) mysql = MySQL() app.config['MYSQL_DATABASE_USER'] = 'root' app.config['MYSQL_DATABASE_PASSWORD'] = '' app.config['MYSQL_DATABASE_DB'] = 'patisserie' app.config['MYSQL_DATABASE_HOST'] = 'localhost' app.config['MYSQL_DATABASE_SOCKET'] = '' mysql.init_app(app) @app.route('/personnage/<nom>', methods=['GET']) def ma_fonction(nom): print(nom) conn = mysql.connect() cursor = conn.cursor() cursor.execute('select * from gateau') data = cursor.fetchall() if len(data) != 0: return jsonify(data) else: return json.dumps({'error':str(data[0])}) conn.close() if __name__ == '__main__': app.run(debug=True)
URI avec paramètre – GET /user
- Envoyer le login et le mot de passe de connexion.html au serveur .
- Tester si le login et le mot de passe existe grâce à une fonction et renvoyer l’email.
Exemple de code serveur
from flask import Flask from flask import request from flaskext.mysql import MySQL import json from flask_cors import CORS app = Flask(__name__) CORS(app) mysql = MySQL() app.config['MYSQL_DATABASE_USER'] = 'root' app.config['MYSQL_DATABASE_PASSWORD'] = '' app.config['MYSQL_DATABASE_DB'] = 'patisserie' app.config['MYSQL_DATABASE_HOST'] = 'localhost' mysql.init_app(app) @app.route('/user', methods=['GET']) def ma_fonction(): id = request.args.get('id') nom = request.args.get('nom') conn = mysql.connect() cursor = conn.cursor() cursor.execute('select * from gateau') data = cursor.fetchall() if len(data) != 0: return jsonify(data) else: return json.dumps({'error':str(data[0])}) conn.close() if __name__ == '__main__': app.run(debug=True)
URI avec paramètre – POST /user
- Permettre l’ajout de l’utilisateur dans la base de données depuis inscription.html.
Exemple de code serveur
from flask import Flask from flask_cors import CORS from flask import request from flaskext.mysql import MySQL import json app = Flask(__name__) CORS(app) mysql = MySQL() app.config['MYSQL_DATABASE_USER'] = 'root' app.config['MYSQL_DATABASE_PASSWORD'] = '' app.config['MYSQL_DATABASE_DB'] = 'patisserie' app.config['MYSQL_DATABASE_HOST'] = 'localhost' mysql.init_app(app) @app.route('/user', methods=['POST']) def ma_fonction(): id = request.args.get('id') nom = request.args.get('nom') conn = mysql.connect() cursor = conn.cursor() cursor.execute('insert into gateau values('+id+',"'+nom+'")') data = cursor.fetchall() if len(data) is 0: return json.dumps({'message':'gateau created successfully !'}) else: return json.dumps({'error':str(data[0])}) conn.close() if __name__ == '__main__': app.run(debug=True)
Sauvegarde
- Enregistrer les fichiers dans un répertoire got4 sous Gitlab.