Koop-App ( Teil B: Client-Server )

Albert Einstein ( 1934; 1879 - 1955; de.wikipedia )
[Es] sprießen aus der menschlichen Gesellschaft nur dann wertvolle Leistungen hervor, wenn sie genügend gelockert ist, um dem Einzelnen freie Gestaltung seiner Fähigkeiten zu ermöglichen.


Koop-App ( Teil B: Client-Server, Einführendes ) Was ist das?

Was meint synchron / asynchron ? Der Begriff "asynchrone Datenübertragung" ( zeichenweise asynchron ) darf nicht mit der Asynchronen Kommunikation verwechselt werden ( Abfolgen von Anfrage/Antwort bei Übertragungsprotokollen ).

Welche Vorteile haben also asynchrone ( nicht-blockierenden ) Callback-Funktion gegenüber synchronen ( blockierenden ) Übertragungen? Wie kann AJAX ( Asynchronous JavaScript and XML ) als unvollständiger Anteil von Formular-Daten-Übertragungen durch den Browser gesehen werden? Siehe AJAX from Scratch ( Vergleich zwischen Formular und AJAX ) und ggf. ergänzend Lade HTML-Fragment mit AJAX


Hinweise ( AJAX - Schnellstart ) einführend

Notwendig fuer AJAX ist ein Online-Browser ( und/oder Node.js ). Es gibt Unterschiede, ob die aktuelle Seite eine lokale *.htm Datei ist oder eine *.htm online-Seite vom Server. Der Online-Zustand kann abgefragt werden, wie z.B.

 fuction is_online() { 
   var p = document.URL; // var p = window.location.protocol;
   return ( /(http|https)\:/.test(p) ) && (!/file\:/.test(p)) ;
 }

Wie geht das mit AJAX-Request/Response?

Zunächst wird das AJAX-ECMAScript-Objekt xhr = new XMLHttpRequest(); gebraucht, etwa wie folgt:

  var xhr;
  try { xhr = new XMLHttpRequest(); 
  } catch (failed) { xhr = false; }
  if (!(xhr && is_online())) { 
        alert("Senden unmöglich\nKein Internet/XMLHttpRequest"); 
  }

Wie geht das mit dem AJAX-Request ( senden, upload )?

xhr.open("POST", "my.php", true); 
xhr.setRequestHeader("Content-Type",
   "application/x-www-form-urlencoded; charset=UTF-8");

var vStr = verschluessele_str ( JSON.stringify( obj ) ) ;
var upload_str = MY_KEY1=' + MYSTR1 + "&MY_KEYv=" + vStr;

xhr.send( upload_str );

Wie geht das mit AJAX-Response ( Callback-Funktion )?

Hier lediglich ein vereinfachter Hinweis:

  xhr.onreadystatechange = function () {

    if (xhr.readyState === 4 && xhr.status === 200) 
    {
      alert( xhr.responseText ); 
      // oder that.form.MYNAME.value = xhr.responseText;
    }
  };
 //was dann? if (o.post_reset) {that.form.reset(); }
 //was dann? if (o.post_htm) { bib.url_to_frame(o.frame_name, obj.urlpost); }

upload_str = "MY_KEY1=" + MYSTR1 + "&MY_KEYv="+upload_str; wird mit dem Request xhr.send(upload_str) an my.php gesendet.

php verwendet für die response-Antwort die echo-Funktion. Infolge der php-Antwort(response) wird die Browser-Callback-Funktion xhr.onreadystatechange = function () {...) aufgerufen. Der Antwort-String xhr.responseText stammt von der php-echo-Funktion.


Hinweise ( PHP-Strings ) Zeichenkette === String?

Hinweise in der Veranstaltung.

Was ist ein String? Zu Programmiersprachen und Betriesbssystemen gehören Stringdarstellungen ( angepaßte, native ). Ein ECMAScript-String ( Quelltext ) ist nicht identisch zu einem PHP-String. PHP-Strings sind verschieden von ECMAScript-Strings. Beispiele:

Ein ' ' - PHP - String wird nicht geparst. Z.B. entspricht ein 
          PHP-String         ' $fn \n'    dem 
          ECMAScript-String  ' $fn \\n'   und dem
          ECMAScript-String  " $fn \\n"

Ein " " - PHP - String wird geparst, d.h. 
          bei " $fn \n"  wird die PHP-Variable $fn eingesetzt 
          und aus \n wird der Zeilen-Umbruch-Code 10. 

  PHP                                  |  ECMAScript
----------------------------------------|----------------------------------------
  $str1 = 'abc';                        |  var str1 =  'abc';
                                       | 
  $str2 .= 'UVW' . "XYZ";               |  var str2 += 'UVW' + "XYZ";
                                       | 
  $arr = array("a","b","c");            |  var arr = ["a","b","c"]; 
                                       | 
  $str = implode("-", $arr);            |  var str = arr.join("-");


  PHP Associative Arrays               | ECMAScript-Objekte
----------------------------------------|----------------------------------------
  $arr = array (                        | var obj = { 
        "obst"  => array(               |            "obst" : { 
                   "b" => "Birne",      |                    "b" : "Birne",
                   "c" => "Apfel"       |                    "c" : "Apfel"
                   )                   |                     }
        );                             |           };

----------------------------------------|----------------------------------------
  $arr = json_decode( $json_str,true ); | var obj = JSON.parse(json_str);
                                       |               
  $json_str = json_encode( $arr );      | var json_str = JSON.stringify(ob);

Teste:

<?php
$json_str = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json_str));
var_dump(json_decode($json_str, true));
?>

<script>
var json_str = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var obj = JSON.parse($json_str);
alert( "obj.a=" + obj.a  );
alert( " Object.keys(obj) liefert arr = " + Object.keys(obj) );
</script>


Konvertiere Unicode wie etwa U+597D nach HTML entity: ungeprüft:
$utf8str = html_entity_decode(preg_replace("/U\+([0-9A-F]{4})/","&#x\\1;",$str),ENT_NOQUOTES,'UTF-8');
          mb_convert_encoding(preg_replace("/U\+([0-9A-F]*)/","&#x\\1;",$str),"UTF-8","HTML-ENTITIES");

Weblinks: Einführung bei php.net in das Arbeiten mit PHP-Strings ,
www.w3schools PHP-Strings , PHP-String-Funktionen php.net


Hinweise ( PHP-debuggen ) PHP-Funktionen

Es gibt Entwicklungsumgebungen, die auch das Debuggen von PHP-Quelltexten ermöglichen. Einfache Möglichkeiten bietet PHP, wie z.B.

var_dump($arr) dient der debug-Anzeige mit typ-Angabe der Member
print_r($arr) dient der debug-Anzeige ohne typ-Angabe der Member
var_export($arr) liefert gültigen php-Code,
kann aber keine reference, keine cycles/recursive arrays,
wie z.B. var_export($_GLOBALS);

Achtung! PHP-Keywords, Classes, Functions und user-definierte Functions sind ggf. NICHT case-sensitive.

PHP-Beispiele

 phpInfo();                           // zeigt u.a. Installationsinfos an

 print_r( get_defined_functions() );  // zeigt u.a. die verfügbaren Funktionsnamen an

 function get_php_url() { 
   $temp = 'http'.(isset($_SERVER['HTTPS'])?'s':'').'://';
   return "$temp{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
 }

 function get_dir_name() {
  return dirname(get_php_url());
  }

 function get_anz_files_in_dir() { 
   return count($files = scandir(__DIR__)); 
 }

Zu PHP (Version...) gehören eigebauten Funktionen


PHP-Funktionen und ECMAScript-Funktionen nachgeschriebener Code

Zu Funktionsbibliotheken gehören neben Umfang und Komplexität auch Einsatzbereiche und eine Historie. PHP-Funktionen sind keine ECMAScript-Bibliotheken. Natürlich gibt es Versuche, Bibliotheken in eine andere Sprache zu übertragen.

Kevin van Zonneveld und andere haben zu PHP-Functionen einen equivalenten Code in JavaScript-Code (nach-) geschrieben ( Siehe php.js ( "online functions that are far from perfect" ).

ECMAScript-Funktionen mit PHP nachbilden ( Beipspiele ):

/* Danke! Source siehe http://eqcode.com/wiki/... */

function utf8_ord($ch) { $len = strlen($ch); if($len <= 0) { return false; }
  $h = ord( $ch{0} );
  if ($h <= 0x7F) {return $h;}
  if ($h < 0xC2) {return false;}
  if ($h <= 0xDF && $len > 1 ) { return ($h & 0x1F) <<  6 | (ord($ch{1}) & 0x3F); }
  if ($h <= 0xEF && $len > 2 ) {return ($h & 0x0F) << 12 | (ord($ch{1}) & 0x3F) << 6 
                                                         | (ord($ch{2}) & 0x3F); }
   if ($h <= 0xF4 && $len>3) {return ($h & 0x0F) << 18 | (ord($ch{1}) & 0x3F) << 12 
                                    | (ord($ch{2}) & 0x3F) << 6 | (ord($ch{3}) & 0x3F);
   } return false;
}
function utf8_charAt($str, $num) { return mb_substr($str, $num, 1, 'UTF-8'); }
function charCodeAt($str, $num)  { return utf8_ord(utf8_charAt($str, $num)); }
function fromCharCode($num) {
  if($num<128) {return chr($num);}
  if($num<2048) {return chr(($num>>6)+192).chr(($num&63)+128);}
  if($num<65536) {return chr(($num>>12)+224).chr((($num>>6)&63)+128).chr(($num&63)+128);}
  if($num<2097152) {return chr(($num>>18)+240).
    chr((($num>>12)&63)+128).chr((($num>>6)&63)+128).chr(($num&63)+128);
  } return false;
}

function myhash($s) { $b = 10;
 if (!$s || strcmp($s, "") == 0) { return 0; } else { $h = 0; $g = 0;
   for ($i = strlen($s) - 1; $i >= 0; $i -= 1) { $c = charCodeAt($s, $i);
     $h = (($h << 6) & 0xfffffff) + $c + ($c << 14);
     if (($g = $h & 0xfe00000) != 0) { $h = ($h ^ ($g >> 21)); }
   } return $h;
 }
}

function decrypt($str, $key) {
  $c = 0; $i = 0; $key_char = 0;$crypt = "";
  for ($i = 0; $i < strlen($str); $i += 1) { 
    $c = charCodeAt($str, $i);
    $key_char = charCodeAt($key, $i % strlen($key));
    if ($c != $key_char) { $c ^= $key_char; }
    $crypt .= fromCharCode($c);
  } return $crypt;
};

Wie fange ich konkret an? Start-Beispiel für Teil B

Weitere Hinweise in der Veranstaltung. Das Start-Beispiel dient als php-Hilfestellung und dem experimentellen Untersuchen, Erfassen und Abstimmen von zahlreichen Aspekten.

Weil AJAX verwendet wird, werden alle HTML-Tags, auf die mit ECMAScript-Zugriffe erfolgen mit seiteneindeutigem id="..." versehen. Eine Funktion get_alle_formwerte() holt alle Werte ab und erstellt damit das Objekt f. Später bilden Elemente von f den JSON-Sende-String für AJAX.

function get_alle_formwerte() {
  var f = {};
  f.ta0 = document.getElementById('ta0').value;
  //f.uvw = document.getElementById('uvw').checked || false;
  return f;
}

AJAX soll insbesondere POST verwenden.

Siehe ein altes clientseitiges Start-Beispiel und ein Anfang für PHP ... in der Vorlesung das serverseitige Beispiel, das als eine konkrete ( fehlerbehaftete ) Hilfe für den serverseitigen Teil mit PHP gedacht Das "weiter-entwickelte"-Beispiele soll recht universell einsetzbar und leicht anpassbar sein, soll Passworte prüfen, Ressourcen-Hash übertragen und prüfen, Zweifaktoren verifikation, und Daten gruppenbezogen Speicher/Lesen im/von Daten-File, usw. beinhalten. Die Datenfiles sollen, wie bei Teil A beschrieben, mit den notwendigen cmod-Rechten und gemäß durchgängig kohärenter innerer Strukturierung "automatisch skalieren". Bei neu hinzu kommenden Facilitatoren installieren sich die neu hinzu kommenden Verzeichnisse und Startdateien koop.htm/.ht_koop.php in gewisser Weise "automatisch".

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr