Beispiel einer Service orientierten Architektur in der Praxis

Der Browser ist das Benutzerinterface zu den Diensten. Dazu kommuniziert der Browser mit dem Frontend-Server. Dieser erzeugt ein HTML Dokument welches der Browser dem Benutzer zur Interaktion anzeigt.
In diesem Beispiel ist das die Seite: https://zahlenwette.kestennus.de
oder als Web-App auf Home-Screen für Android: https://zw.kestennus.de
Quelltext hier: https://zw.kestennus.de/TXT

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <script type="text/javascript">
    function Absenden(form) {
        var Tipp = document.getElementById("Tipp");
        //Tipp.disabled = "true";
        Tipp.value = "Bitte Warten";
        Tipp.style.cursor = "wait";
        document.body.style.cursor = "wait";
        return true;
    }
  </script>
  <style type="text/css">
html {
        height:100%;
        overflow:auto;
        width:100%;
}
* {
        font-family:Verdana,Arial;
        margin:0 auto;
        padding:0;
}
input {
        font-size:1.5em;
        border-radius:5px;
}
body {
        background-color:black;
        color:white;
        height:100%;
        width:100%;
}
div {
        width:50%;
}
div.Form {
        float:left;
        width:50%;
}
div.Form h3 {
        text-align:center;
}
div.Form td {
        text-align:left;
}
div.Form th {
        text-align:right;
}
div.Gewinner {
        float:right;
        text-align:center;
        width:50%;
}
div.Gewinner td {
        text-align:center;
}
div.Rahmen {
        height:95%;
        width:100%;
}

div.Submit {
        text-align:center;
}

fieldset {
        margin:15px;
        padding:15px;
        text-align:center;
}

h1 {
        font-size:2.5em;
        text-align:center;
}
hr {
        background-color:yellow;
        color:yellow;
        height:1%;
}
legend {
        font-size:1.5em;
        text-align:left;
}
th {
        white-space:nowrap;
}
 </style>
  <title>Tippe eine Zahl die kein anderer getippt hat</title>
 </head>

 <body>
 <div class="Rahmen">
  <h1>Tippe eine Zahl die kein anderer getippt hat</h1>
  <hr />

  <div class="Gewinner">
   <h3> Top Spieler Liste </h3>
   <table>
    <thead>
     <tr><th> &bull; Spielername &bull; </th><th> &bull; Zahl &bull; </th><th> &bull; Anzahl &bull; </th><th> &bull; Datum Zeit &bull; </th></tr>
    </thead>
    <tbody>
     <tr><td>hallihallo</td><td>1298</td><td>1</td><td class="D">2023-09-11 00:20:40</td></tr>
     <tr><td>ichbins</td><td>1133</td><td>1</td><td class="D">2023-03-11 17:49:19</td></tr>
     <tr><td>xxxxx</td><td>3030</td><td>1</td><td class="D">2023-03-11 00:46:40</td></tr>
     <tr><td>ccccccc</td><td>1010</td><td>1</td><td class="D">2023-03-11 00:46:00</td></tr>
     <tr><td>hsdhshshsh</td><td>2458</td><td>1</td><td class="D">2019-09-08 22:23:51</td></tr>
     <tr><td>sdsfasFSF</td><td>9270</td><td>1</td><td class="D">2017-01-16 23:19:57</td></tr>
     <tr><td>Max</td><td>1298</td><td>1</td><td class="D">2016-10-28 14:38:46</td></tr>
     <tr><td>Egon</td><td>4528</td><td>1</td><td class="D">2016-03-14 15:37:21</td></tr>
     <tr><td>Steve</td><td>9992</td><td>1</td><td class="D">2016-01-18 17:11:11</td></tr>
     <tr><td>ich</td><td>3453</td><td>1</td><td class="D">2015-04-17 00:32:36</td></tr>
     <tr><td>zgzugzugzuguz</td><td>9361</td><td>1</td><td class="D">2014-12-11 00:31:33</td></tr>
     <tr><td>willi</td><td>6720</td><td>1</td><td class="D">2014-11-03 15:30:40</td></tr>
     <tr><td>otto</td><td>8391</td><td>1</td><td class="D">2014-09-29 23:32:22</td></tr>
     <tr><td>xxx</td><td>5692</td><td>1</td><td class="D">2014-09-13 22:47:40</td></tr>
     <tr><td>gfgfdghdfhgdsh</td><td>6677</td><td>1</td><td class="D">2014-09-10 16:25:24</td></tr>
     <tr><td>hgzfgzufzufzu</td><td>8550</td><td>1</td><td class="D">2014-08-13 16:57:39</td></tr>
     <tr><td>Ffgvgg</td><td>5849</td><td>1</td><td class="D">2014-08-06 19:50:51</td></tr>
     <tr><td>Joe</td><td>3450</td><td>1</td><td class="D">2014-07-25 09:49:59</td></tr>
     <tr><td>joki</td><td>7694</td><td>1</td><td class="D">2014-07-15 18:08:07</td></tr>
     <tr><td>heino</td><td>7846</td><td>1</td><td class="D">2014-06-24 01:11:24</td></tr>
     <tr><td>ralala</td><td>3321</td><td>1</td><td class="D">2014-06-13 12:56:47</td></tr>
     <tr><td>Rudi</td><td>2235</td><td>1</td><td class="D">2014-06-11 15:49:38</td></tr>
     <tr><td>test</td><td>1495</td><td>1</td><td class="D">2014-06-05 16:56:10</td></tr>
     <tr><td>dggeggedgd</td><td>7547</td><td>1</td><td class="D">2014-04-28 19:30:53</td></tr>
     <tr><td>Waldemar</td><td>4522</td><td>1</td><td class="D">2014-04-21 00:22:16</td></tr>
    </tbody>
   </table>
  </div>

  <div class="Form">
   <form action="." method="post" onsubmit="return Absenden(this);">
    <fieldset>
     <legend> Tipp </legend>
     <table>
      <tr><th><label for="SpielerID"> Spielername: </label></th><td><input id="SpielerID" name="SpielerID" type="text" size="16" value="" /></td></tr>
      <tr><th><label for="Zahl"> Zahl (1-9999): </label></th><td><input id="Zahl" name="Zahl" type="number" min="1" max="9999" value="" /></td></tr>
     </table>
    </fieldset>
    <div class="Submit">
     <input id="Tipp" name="submit" type="submit" value="OK" title="" />
    </div>
   </form>
   <h3>  </h3>
  </div>

 </div>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'92a7bb496fa24534',t:'MTc0MzY3NDU1OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>

|
https://zahlenwette.kestennus.de
|

Der Frontend-Server erzeugt die HTML Seite und ist das Bindeglied zu den Diensten. Für die dynamischen Inhalte wird die Service API benutzt.
Hier sind dies die 3 UseCases:
API::POST('Gewinner'); // Liste der Gewinner
API::POST('MAX'); // Die größte erlaubte Zahl
API::POST('Tipp',$_REQUEST); // Abgabe eines Tipps

<?php  // API.php
class API {
    static function POST ($UseCase,$Eingabe=null) {
        $Ausgabe = $Eingabe;
        if (!is_array($Eingabe)) $Eingabe = array();
        try {
            $opts = array(
                            'http'=>array(
                                            'method' => 'POST',
                                            'header' => 'Content-type: application/x-www-form-urlencoded' . "\r\n".
														'Accept: text/plain' . "\r\n".
														'User-Agent: Kestennus', 
                                            'content' => http_build_query($Eingabe)
                                            )
                            );
            stream_context_set_option(stream_context_get_default(),$opts);
            $Ausgabe = unserialize(file_get_contents('https://api.kestennus.de/Zahlenwette/'.$UseCase.'/'));
            if (false === $Ausgabe) {
                $Ausgabe = 'Connection Error - Try again later';
                throw new Exception($Ausgabe);
            }
        }
        catch (Exception $e) {
            $Ausgabe = $e;
            throw new Exception($Ausgabe);
        }
        if (!is_array($Ausgabe)) $Ausgabe = array();
        return $Ausgabe;
    }
}
?>
***************************************************************************************************************************************
<?php
$Meldung = '';
$SpielerID = '';
$Zahl = '';
require_once('API.php');
if (isset($_REQUEST['submit'])) {
    $Tipp = API::POST('Tipp',$_REQUEST);
    if (isset($_REQUEST['SpielerID'])) {
        $SpielerID = $_REQUEST['SpielerID'];
   }
    if (isset($Tipp['Zahl']) and isset($Tipp['Anzahl'])) {
        $Meldung = 'Die Zahl '.$Tipp['Zahl'].' ist '.$Tipp['Anzahl'].' mal getippt';
   }

    if (isset($_REQUEST['Zahl'])) {
        $Zahl = $_REQUEST['Zahl'];
   }
}
$Gewinner = API::POST('Gewinner');
$Daten = API::POST('MAX');
$Anzahl = $Daten['MAX'];
?>
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <script type="text/javascript">
    function Absenden(form) {
        var Tipp = document.getElementById("Tipp");
        //Tipp.disabled = "true";
        Tipp.value = "Bitte Warten";
        Tipp.style.cursor = "wait";
        document.body.style.cursor = "wait";
        return true;
    }
  </script>
  <style type="text/css">
html {
        height:100%;
        overflow:auto;
        width:100%;
}
* {
        font-family:Verdana,Arial;
        margin:0 auto;
        padding:0;
}
input {
        font-size:1.5em;
        border-radius:5px;
}
body {
        background-color:black;
        color:white;
        height:100%;
        width:100%;
}
div {
        width:50%;
}
div.Form {
        float:left;
        width:50%;
}
div.Form h3 {
        text-align:center;
}
div.Form td {
        text-align:left;
}
div.Form th {
        text-align:right;
}
div.Gewinner {
        float:right;
        text-align:center;
        width:50%;
}
div.Gewinner td {
        text-align:center;
}
div.Rahmen {
        height:95%;
        width:100%;
}

div.Submit {
        text-align:center;
}

fieldset {
        margin:15px;
        padding:15px;
        text-align:center;
}

h1 {
        font-size:2.5em;
        text-align:center;
}
hr {
        background-color:yellow;
        color:yellow;
        height:1%;
}
legend {
        font-size:1.5em;
        text-align:left;
}
th {
        white-space:nowrap;
}
 </style>
  <title>Tippe eine Zahl die kein anderer getippt hat</title>
 </head>

 <body>
 <div class="Rahmen">
  <h1>Tippe eine Zahl die kein anderer getippt hat</h1>
  <hr />

  <div class="Gewinner">
   <h3> Top Spieler Liste </h3>
   <table>
    <thead>
     <tr><th> &bull; Spielername &bull; </th><th> &bull; Zahl &bull; </th><th> &bull; Anzahl &bull; </th><th> &bull; Datum Zeit &bull; </th></tr>
    </thead>
    <tbody>
<?php foreach ($Gewinner as $Zeile) : ?>
     <tr><td><?php echo substr(htmlspecialchars($Zeile['SpielerID']),0,25) ?></td><td><?php echo $Zeile['Zahl'] ?></td><td><?php echo $Zeile['Anzahl'] ?></td><td class="D"><?php echo $Zeile['DatumZeit'] ?></td></tr>
<?php endforeach; ?>
    </tbody>
   </table>
  </div>

  <div class="Form">
   <form action="." method="post" onsubmit="return Absenden(this);">
    <fieldset>
     <legend> Tipp </legend>
     <table>
      <tr><th><label for="SpielerID"> Spielername: </label></th><td><input id="SpielerID" name="SpielerID" type="text" size="16" value="<?php echo $SpielerID ?>" /></td></tr>
      <tr><th><label for="Zahl"> Zahl (1-<?php echo $Anzahl ?>): </label></th><td><input id="Zahl" name="Zahl" type="number" min="1" max="<?php echo $Anzahl ?>" value="<?php echo $Zahl ?>" /></td></tr>
     </table>
    </fieldset>
    <div class="Submit">
     <input id="Tipp" name="submit" type="submit" value="OK" title="" />
    </div>
   </form>
   <h3> <?php echo $Meldung ?> </h3>
  </div>

 </div>
 </body>
</html>

|
https://api.kestennus.de/Zahlenwette/<UseCase>
|

Der Services-Server stellt die Dienste bereit, welche von dem Frontend-Server über die API aufgerufen werden.
Hier sind dies die 3 Services:
https://api.kestennus.de/Zahlenwette/Gewinner/ (Liste der Gewinner)
https://api.kestennus.de/Zahlenwette/MAX/ (Die größte erlaubte Zahl)
https://api.kestennus.de/Zahlenwette/Tipp/ (Abgabe eines Tipps)

      class API {
          function <UseCase>($Eingabe) {   // <UseCase> muß konkretisiert werden
              $Ausgabe = array();
              .
              .
              return $Ausgabe;
          }
      }
      echo serialize(API::<UseCase>($_REQUEST));
********************************************************************************
      class API {
          function MAX() {    // Konkreter UseCase 'MAX'
              $Ausgabe = array('MAX' => 1234);
              return $Ausgabe;
          }
      }
      echo serialize(API::MAX());

Kontakt: eMail @ kestennus.de