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){
	$id = $request->getQueryParam('id');	
	$nom = $request->getQueryParam('nom');	
       	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.body.id;
 var nom= req.body.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

  • 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

app = Flask(__name__)

@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 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'
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

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'
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 import request
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'
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.