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.

mission Game of Thrones 4

Réaliser son API avec get et post

API PHP avec SLIM

Première URI – GET /bonjour

Exemple de code client functionSlim.js

Exemple de code serveur index.php (pas de ?> à la fin)

Pour le déploiement coté serveur

dans un fichier .htaccess

dans un fichier composer.json

URI avec attribut – GET /personnage/{name}

Exemple de code client

Exemple d’ajout de code index.php

URI avec paramètre – GET /user

Exemple de code client

Exemple d’ajout de code index.php

URI avec paramètre – POST /user

Exemple de code client

Exemple d’ajout de code index.php

API JavaScript avec Express.js

Première URI – GET /bonjour

Exemple de code serveur index.js

URI avec attribut – GET /personnage/{name}

Exemple de code serveur

URI avec paramètre – GET /user

Exemple de code serveur

URI avec paramètre – POST /user

Exemple de code serveur

Déploiement sur IBM

API Python avec Flask

Première URI – GET /bonjour

URI avec attribut – GET /personnage/{name}

Exemple de code serveur

URI avec paramètre – GET /user

Exemple de code serveur

URI avec paramètre – POST /user

Exemple de code serveur

Sauvegarde