mission ship

On souhaite réaliser une application qui permette le déchargement des navires à la suite de la découverte du nouveau monde.

Pour cela on doit disposer d’une interface permettant le déchargement d’un navire, d’un serveur enregistrant les déchargements et d’une base de données pour la persistance. Les échanges devront être réalisés sous forme d’API REST, si possible avec SLIM pour le serveur et Ajax pour le client sans obligation.

Bonus : on pourra améliorer l’interface par des listes déroulantes chargées en Ajax à l’initialisation de celle ci.

L’architecture

L’interface

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="client de l'API Fish">
    <meta name="author" content="ckiki ?">
    <title>API Fish</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<body class="mesforms">
<div class="page container">

    <header class="header" id="top">
        <div class="row justify-content-md-center">
            <div class="col-12 col-md-auto">
                <h1>Déchargement</h1>
            </div>
        </div>
        <br>
        <br>
    </header>

    <!-- marchandises -->
    <h3>Lister les types de marchandises</h3>
    <br>
    <div class="col-md-8 col-lg-6">
        <button type="submit" class="btn btn-info" id="btn-new-liste1">Valider</button>
    </div>
    <br>
    <div class="col-md-8 col-lg-6">
        <!-- resultat à afficher ici -->
        <div id="marchandises"></div>
    </div>

    <br><br>
    <!-- Liste des marchandises du navire -->
    <h3>Lister les marchandises d'un navire</h3>
    <div class="form-group ">

        <label for="idN" class=" col-md-8 col-lg-6 col-form-label">Identifiant du navire</label>
        <div class="col-md-8 col-lg-6">
            <input class="form-control" type="text" value="" id="idN">
        </div>

        <label for="nomN" class=" col-md-8 col-lg-6 col-form-label">ou nom du navire</label>
        <div class=" col-md-8 col-lg-6">
            <input class="form-control" type="text" value="" id="nomN">
        </div>
        <br>
        <div class="col-md-8 col-lg-6">
            <button type="submit" class="btn btn-primary" id="btn-new-liste2">Valider</button>
        </div>
    </div>
    <br>
    <div class="col-md-8 col-lg-6">
        <!-- resultat à afficher ici -->
        <div id="march-nav"></div>
    </div>

    <br><br>
    <!-- Déchargement du navire -->
    <h3>Déchargement</h3>
    <div class="form-group ">

        <label for="idN2" class=" col-md-8 col-lg-6 col-form-label">Identifiant du navire</label>
        <div class="col-md-8 col-lg-6">
            <input class="form-control" required="required" type="text" value="" id="idN2">
        </div>

        <label for="date" class=" col-md-8 col-lg-6 col-form-label">Date du déchargement</label>
        <div class=" col-md-8 col-lg-6">
            <input class="form-control" required="required" type="date" value="" id="date" max="1492-10-12"
                   min="1700-12-31">
        </div>

        <label for="marchandise" class=" col-md-8 col-lg-6 col-form-label">Marchandise</label>
        <div class=" col-md-8 col-lg-6">
            <input class="form-control" required="required" type="text" value="" id="marchandise">
        </div>

        <label for="qte" class=" col-md-8 col-lg-6 col-form-label">Quantité</label>
        <div class=" col-md-8 col-lg-6">
            <input class="form-control" required="required" type="text" value="" id="qte">
        </div>
        <br>
        <div class="col-md-8 col-lg-6">
            <button type="submit" class="btn btn-success" id="btn-new-liste3">Déchargez moussaillons !</button>
        </div>
    </div>
    <br>
    <div class="col-md-8 col-lg-6">
        <!-- On pourra indiquer si le déchargement s'est bien passé, le principal est que la marchandise n'apparaisse plus quand on liste celles ci en étape 2 -->
        <div id="dechargement-effectif"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
            crossorigin="anonymous"></script>
</body>
</html>

Exemple d’appel Ajax

$(document).ready(function () {
    $('#btn-valide').click(function () {
        var id = $('#id').val();
        var nom = $('#nom').val();
        $.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            url: "https://waza.net/bateau?id=" + id + "&nom=" + nom,
            success: function (data) {
                $("#result").html(data);
            }
        });
    });
});

Les URI

/marchandises

affiche la liste des marchandises présentes dans la base de données

/marchandises/{idBateau}

affiche la liste des marchandises restantes sur le bateau ibBateau
code 200 si tout fonctionne
code 404 si l'id du bateau n'existe pas

/dechargement/{idBateau}

permet le déchargement d'une marchandise dont la date, l'id et la quantité seront passées en paramètre. La base de données devra être mise à jour en conséquence.
code 200 si tout fonctionne.
code 404 si l'id du bateau ou l'id de la marchandise n'existent pas.

Exemple de code serveur

<?php
require 'slim3/vendor/autoload.php';

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

$app = new \Slim\App;


$app->get('/bateaux', function (Request $request, Response $response) {
    return getBateaux();

});
$app->post('/bateau/{idf}', function (Request $request, Response $response) {
    $idf = $request->getAttribute('idf');
    $objectif = $request->getQueryParam('objectif');
    $rep = getBateau($idf, $objectif);
    if ($rep) {
        return $response->withJson(200);
    } else {
        return $response->withStatus(404);
    }
});
function connexion()
{
    $dsn = 'mysql:dbname=batooooo;host=sl-us-dal-9-portal.6.dblayer.com:22';
    $user = 'admin';
    $password = 'VV';
    try {
        return $dbh = new PDO($dsn, $user, $password);
    } catch (PDOException $e) {
        return '{"error":' . $e->getMessage() . '}}';
    }
}

function getBateaux()
{
    $sql = "SELECT * FROM bateau ORDER BY nom";
    try {
        $dbh = connexion();
        $statement = $dbh->prepare($sql);
        $statement->execute();
        $result = $statement->fetchAll(PDO::FETCH_CLASS);
        $dbh = null;
        return json_encode($result, JSON_PRETTY_PRINT);
    } catch (PDOException $e) {
        return '{"error":' . $e->getMessage() . '}}';
    }
}

function getBateau($id, $obj)
{
    $sql = "SELECT * FROM bateau WHERE id=:id";
    try {
        $dbh = connexion();
        $statement = $dbh->prepare($sql);
        $statement->bindParam(":id", $id);
        $statement->execute();
        $result = $statement->fetchAll(PDO::FETCH_CLASS);
        $dbh = null;
        return json_encode($result, JSON_PRETTY_PRINT);
    } catch (PDOException $e) {
        return '{"error":' . $e->getMessage() . '}}';
    }
}

$app->run();

La base de données

--
-- Base de données :  `stocky`
--

-- --------------------------------------------------------

--
-- Structure de la table `dechargement`
--

DROP TABLE IF EXISTS `dechargement`;
CREATE TABLE IF NOT EXISTS `dechargement` (
  `id` int(11) NOT NULL,
  `idNavire` int(11) NOT NULL,
  `dateD` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Déchargement des données de la table `dechargement`
--

INSERT INTO `dechargement` (`id`, `idNavire`, `dateD`) VALUES
(1, 1, '1610-08-11');

-- --------------------------------------------------------

--
-- Structure de la table `lignedechargement`
--

DROP TABLE IF EXISTS `lignedechargement`;
CREATE TABLE IF NOT EXISTS `lignedechargement` (
  `idDechargement` int(11) NOT NULL,
  `idMarchandise` int(11) NOT NULL,
  `quantite` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Déchargement des données de la table `lignedechargement`
--

INSERT INTO `lignedechargement` (`idDechargement`, `idMarchandise`, `quantite`) VALUES
(1, 1, 3);

-- --------------------------------------------------------

--
-- Structure de la table `marchandise`
--

DROP TABLE IF EXISTS `marchandise`;
CREATE TABLE IF NOT EXISTS `marchandise` (
  `id` int(11) NOT NULL,
  `nom` varchar(50) NOT NULL,
  `poidsUnitaire` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Déchargement des données de la table `marchandise`
--

INSERT INTO `marchandise` (`id`, `nom`, `poidsUnitaire`) VALUES
(1, 'tabac', 2),
(2, 'indigo', 2),
(3, 'vanille', 2),
(4, 'bois', 60),
(5, 'bovin', 80),
(6, 'maïs', 10),
(7, 'pomme de terre', 10),
(8, 'métaux précieux', 5),
(9, 'pierres précieuses', 5),
(10, 'cacao', 5),
(11, 'café', 5),
(12, 'coton', 4),
(13, 'fourrure', 5),
(14, 'vetement', 6),
(15, 'rhum', 8),
(16, 'cigar', 5);

-- --------------------------------------------------------

--
-- Structure de la table `navire`
--

DROP TABLE IF EXISTS `navire`;
CREATE TABLE IF NOT EXISTS `navire` (
  `id` int(11) NOT NULL,
  `nom` varchar(50) NOT NULL,
  `chargemax` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Déchargement des données de la table `navire`
--

INSERT INTO `navire` (`id`, `nom`, `chargemax`) VALUES
(1, 'Flying Clipper', 500),
(2, 'France II', 400),
(3, 'R.C. Rickmers', 800),
(4, 'Thomas W. Lawson', 700),
(5, 'Preussen', 600),
(6, 'Wyoming', 500),
(7, 'Potosí', 400),
(8, 'København', 800),
(9, 'Viking', 600),
(10, 'Amerigo Vespucci', 700),
(11, 'Sedov', 500),
(12, 'Great Republic', 400),
(13, 'Krusenstern', 800),
(14, 'Esmeralda', 700),
(15, 'Star Clipper', 500),
(16, 'Dar Młodzieży', 400),
(17, 'Simon Bolivar', 700),
(18, 'Cuauhtémoc', 800),
(19, 'Gloria', 700),
(20, 'Créole', 600);
COMMIT;

 

2019-01-28T11:32:35+01:00By |Tags: , , , |

Leave A Comment