Skip to content

20. Implementatie van de client/server-app op een hostingdienst

Hier geven we een overzicht van de implementatie van de client/server-applicatie die we hebben ontwikkeld op een server met de naam OVH [https://www.ovh.com/fr/]. De implementatie bij andere hostingproviders zou niet veel anders moeten zijn. We willen alleen laten zien dat onze applicatie zich goed leent voor deze implementatie.

20.1. Implementatie van de server

De beoogde hosting OVH is een basisopstelling:

  1. een PHP 7.3-omgeving;
  2. een SGBD MySQL;
  3. geen [Redis]-server;

Het derde punt dwingt ons om versie 14 van onze belastingberekeningsserver aan te passen.

Image

We moeten het volgende aanpassen:

  • de configuratiebestanden [1] ;
  • de controllers [AdminDataController] en [CalculerImpotController] om rekening te houden met het feit dat er geen server [Redis] is;

Het bestand [config.json] wordt als volgt aangepast:


{
    "databaseFilename": "Config/database.json",
    "corsAllowed": false,
    "redisAvailable":false,
    "rootDirectory": "/.../www/apps/impot/serveur-php7",
    "relativeDependencies": [

        "/Entities/BaseEntity.php",
        ...
        "/Controllers/AdminDataController.php"
    ],
    "absoluteDependencies": [
        "/.../vendor/autoload.php",
        "/.../vendor/predis/predis/autoload.php"
    ],
    "users": [
        {
            "login": "admin",
            "passwd": "admin"
        }
    ],
    ...
}

Opmerkingen

  • regel 4: er wordt een booleaanse waarde [redisAvailable] toegevoegd om aan te geven of er al dan niet toegang is tot een server [Redis];
  • regels 5, 13, 14: de absolute paden zullen veranderen;

Het bestand [database.json] verandert als volgt:


{
    "dsn": "mysql:host=...;dbname=...",
    "id": "...",
    "pwd": "...",
    "tableTranches": "dbimpots_tbtranches",
    "colLimites": "limites",
    "colCoeffR": "coeffr",
    "colCoeffN": "coeffn",
    "tableConstantes": "dbimpots_tbconstantes",
    "colPlafondQfDemiPart": "plafondQfDemiPart",
    ...
}

Opmerkingen

  • regels 2-4: de naam van de database en de inloggegevens van de eigenaar zullen veranderen;

De controller [AdminDataController] verandert als volgt:


<?php

namespace Application;

// Symfony-afhankelijkheden
use \Symfony\Component\HttpFoundation\Response;
use \Symfony\Component\HttpFoundation\Request;
use \Symfony\Component\HttpFoundation\Session\Session;
// alias van de laag [dao]
use \Application\ServerDaoWithSession as ServerDaoWithRedis;

class AdminDataController implements InterfaceController {

  // $config is de configuratie van de applicatie
  // verwerking van een Request-verzoek
  // maakt gebruik van de sessie en kan deze wijzigen
  // $infos zijn aanvullende gegevens die specifiek zijn voor elke controller
  // geeft een array terug: [$statusCode, $état, $content, $headers]
  public function execute(
    array $config,
    Request $request,
    Session $session,
    array $infos = NULL): array {

    // er moet slechts één parameter zijn: GET
    $method = strtolower($request->getMethod());
    ...

    // we kunnen aan de slag
    // Redis
    if ($config["redisAvailable"]) {
      \Predis\Autoloader::register();
      ...
    } else {
      try {
        // we halen de fiscale gegevens op uit de database
        $dao = new ServerDaoWithRedis($config["databaseFilename"], NULL);
        // taxAdminData
        $taxAdminData = $dao->getTaxAdminData();
      } catch (\Throwable $ex) {
        // dat is misgegaan
        // resultaat met fout teruggestuurd naar de hoofdcontroller
        $état = 1051;
        return [Response::HTTP_INTERNAL_SERVER_ERROR, $état,
          ["réponse" => utf8_encode($ex->getMessage())], []];
      }
    }

    // resultaat teruggestuurd naar de hoofdcontroller
    $état = 1000;
    return [Response::HTTP_OK, $état, ["réponse" => $taxAdminData], []];
  }

}

Opmerkingen

  • regel 31: er wordt nu getest of er al dan niet een server [Redis] is;
  • regels 32-34: zo ja, dan wordt de vorige code in zijn geheel overgenomen;
  • regels 35-46: anders worden de gegevens van de belastingdienst uit de database gehaald;

De controller [CalculerImpotController], die eveneens gegevens van de belastingdienst nodig heeft, verloopt op identieke wijze.

Dit is gebeurd. De implementatie op de server OVH bestond uit het uitvoeren van FTP. We hebben op OVH het volgende gedownload:

  • de versie [vuejs-14-without-redis];
  • de map [vendor] die alle afhankelijkheden van de server [vuejs-14-without-redis] bevat;

Nadat de overdracht FTP was voltooid, hebben we de benodigde tabellen voor de server gegenereerd met het volgende script SQL:


-- phpMyAdmin SQL Dump
-- versie 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generatietijd: 12 okt. 2019 om 07:45 AM
-- Serverversie: 5.7.24
-- PHP-versie: 7.2.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Tabelopbouw voor tabel `dbimpots_tbconstantes`
--

CREATE TABLE `dbimpots_tbconstantes` (
  `id` int(11) NOT NULL,
  `plafondQfDemiPart` decimal(10,2) NOT NULL,
  `plafondRevenusCelibatairePourReduction` decimal(10,2) NOT NULL,
  `plafondRevenusCouplePourReduction` decimal(10,2) NOT NULL,
  `valeurReducDemiPart` decimal(10,2) NOT NULL,
  `plafondDecoteCelibataire` decimal(10,2) NOT NULL,
  `plafondDecoteCouple` decimal(10,2) NOT NULL,
  `plafondImpotCelibatairePourDecote` decimal(10,2) NOT NULL,
  `plafondImpotCouplePourDecote` decimal(10,2) NOT NULL,
  `abattementDixPourcentMax` decimal(10,2) NOT NULL,
  `abattementDixPourcentMin` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Gegevens dumpen voor tabel `dbimpots_tbconstantes`
--

INSERT INTO `dbimpots_tbconstantes` (`id`, `plafondQfDemiPart`, `plafondRevenusCelibatairePourReduction`, `plafondRevenusCouplePourReduction`, `valeurReducDemiPart`, `plafondDecoteCelibataire`, `plafondDecoteCouple`, `plafondImpotCelibatairePourDecote`, `plafondImpotCouplePourDecote`, `abattementDixPourcentMax`, `abattementDixPourcentMin`) VALUES
(8, '1551.00', '21037.00', '42074.00', '3797.00', '1196.00', '1970.00', '1595.00', '2627.00', '12502.00', '437.00');

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

--
-- Tabelstructuur voor tabel `dbimpots_tbtranches`
--

CREATE TABLE `dbimpots_tbtranches` (
  `id` int(11) NOT NULL,
  `limites` decimal(10,2) NOT NULL,
  `coeffR` decimal(10,2) NOT NULL,
  `coeffN` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Gegevens dumpen voor tabel `dbimpots_tbtranches`
--

INSERT INTO `dbimpots_tbtranches` (`id`, `limites`, `coeffR`, `coeffN`) VALUES
(36, '9964.00', '0.00', '0.00'),
(37, '27519.00', '0.14', '1394.96'),
(38, '73779.00', '0.30', '5798.00'),
(39, '156244.00', '0.41', '13913.69'),
(40, '0.00', '0.45', '20163.45');

--
-- Indexen voor gedumpte tabellen
--

--
-- Indexen voor tabel `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  ADD PRIMARY KEY (`id`);

--
-- Indexen voor tabel `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT voor gedumpte tabellen
--

--
-- AUTO_INCREMENT voor tabel `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

--
-- AUTO_INCREMENT voor tabel `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Toen dit alles was voltooid, hebben we de bestanden [config.json, database.json] aangepast aan hun nieuwe omgeving.

20.2. Implementatie van de client [Vue.js]

Er is besloten om de client [Vue.js] te implementeren op de URL en [http://machine/apps/impot/client-vuejs/]. Dit heeft de volgende wijzigingen tot gevolg gehad:

In de hoofdmap van [workspace] van [VSCode] is het volgende bestand [vue.config.js] aangemaakt:

Image

Het bestand [vue.config.js] is als volgt:


// vue.config.js
module.exports = {
  // de klantenservice URL van de belastingberekeningsserver [vuejs]
  publicPath: '/apps/impot/client-vuejs/'
}

Het bestand [router.js] [3] is eveneens gewijzigd:


// imports
import Vue from 'vue'
import VueRouter from 'vue-router'
...

// routeringsplugin
Vue.use(VueRouter)

// de routes van de applicatie
const routes = [
  ...
]

// de router
const router = new VueRouter({
  // de routes
  routes,
  // de weergavemodus van de URL
  mode: 'history',
  // de basis-URL van de applicatie
  base: '/apps/impot/client-vuejs/'
})

// controle van de routes
router.beforeEach((to, from, next) => {
  ...
})

// de router exporteren
export default router

Opmerkingen

  • regel 21: de basis van URL is gewijzigd;

Het bestand [config.js] is als volgt gewijzigd:


// gebruik van de bibliotheek [axios]
const axios = require('axios');
// time-out van verzoeken HTTP
axios.defaults.timeout = 5000;
// de database van de belastingberekeningsserver URL
// het schema [https] veroorzaakt problemen in Firefox omdat de server
// een zelfondertekend certificaat verstuurt. Werkt prima met Chrome en Edge. Safari niet getest.
// met Firefox is het mogelijk door het onderstaande URL rechtstreeks op te vragen en aan Firefox te laten weten
// dat je het risico van een niet-ondertekend certificaat accepteert. Daarna zal de client [vuejs] werken.
axios.defaults.baseURL = 'http://.../apps/impot/serveur-php7';
// we gaan cookies gebruiken
axios.defaults.withCredentials = true;

// configuratie exporteren
export default {
  // object [axios]
  axios: axios,
  // maximale inactiviteitstijd van de sessie: 5 min = 300 s = 300000 ms
  duréeSession: 300000
}

Opmerkingen

  • regel 10: we plaatsen het bestand URL van de belastingberekeningsserver;

De productieversie van het project is gegenereerd met de opdracht [build] uit het volgende bestand [package.json] [5]:


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-22/main.js",
    "build": "vue-cli-service build vuejs-22-ovh-withBootstrapVue/main.js",
    "lint": "vue-cli-service lint"
  },
  ...
}

Vervolgens is de map [dist], die de gegenereerde productieversie bevatte, ‘geüpload’ naar de server OVH in de map [/.../apps/impot] en vervolgens hernoemd naar [client-vuejs], zodat de code van de klant in de map [/.../apps/impot/client-vuejs/] terechtkwam, zoals gepland. Vervolgens hebben we in deze map het volgende bestand [.htaccess] gedownload:


<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /apps/impot/client-vuejs/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /apps/impot/client-vuejs/index.html [L]
</IfModule>

Dit omdat de webserver van OVH die hier wordt gebruikt een Apache-server is. Voor andere soorten servers verwijzen we naar de documentatie |https://cli.vuejs.org/guide/deployment.html|.

De serverapplicatie PHP 7 kan |hier| worden getest.

De client [Vue.js] kan |hier| worden getest.

20.3. Conclusion

De versie [vuejs-21] was niet strikt noodzakelijk. We hadden gezien dat de versie [vuejs-20] goed bestand was tegen de door de gebruiker ingevoerde URL. Toch biedt de nieuwe versie extra gebruiksgemak. Hij kan navigeren door URL in te voeren. De applicatie biedt hem dan het scherm aan dat het beste past bij de huidige status (de sessie) van de applicatie. Daarnaast biedt de versie [vuejs-22] verbeteringen voor de weergave van de applicatie op mobiele apparaten.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 Ongewijzigd.