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.