Client-Server (end-to-end verschlüsselt) up n ⎯⎯> 1, down 1 ⎯⎯> m;

Es wird eine Web-App entwickelt, geschrieben und getestet, die schriftliche "Mit-Teilungen" von n-Clients = n-Teilnehmern ( annonym, ortunabhängig, zeitunabhängig ) erfaßt, verschlüsselt überträgt und auf einen Web-Server-Datei-System verschlüsselt speichert. Jeder Teilnehmer kann ( die "in Echtzeit" zusammengestellten ) Informationen abrufen und aufbereitet anschauen. Die Web-App soll einfach, robust sein. Die Web-App soll vielseitig einsetzbar sein.

Ideenfindung Client-Server

Der Mensch ist auch ein Wesen der Kommunikation . Es gibt zahlreiche Kommunikationsmodelle , Kommunikationsmethoden , Liste der Kommunikationsmodelle .

Innovative Projekte brauchen die Kommunikation und das kooperierende Zusammen-Wirken:
  • gedächtnisstützende Kommunikationen,
  • kommunikatives Handeln und
  • "Human Resource Management"

Zur gesellschaftlichen "Teil-Habe" gehört ein "Mit-Teilen/Mit-Teilung" von Bedeutungsmustern ( lat. communicatio ). Wie kann das "kooperierend-zusammen-wirkende" ( up n ⎯⎯> 1 ) und die "Vielheit in der Einheit" ( down 1 ⎯⎯> m; ) mit einer zu entwicklenden App ( annonym, ortunabhängig, zeitunabhängig, verschlüsselt ) unterstützt werden?

Aristoteles ( 384 - 322 v. Chr. ) sagt es so: Das Ganze ist mehr als die Summe der Teile.

Damit Ideen in der Diskussion nicht veloren gehen, sollten diese schriftlich, schnell, einfach, stichwortartig fixiert werden können. Wie können Ideen/Assoziationen entwickelt und im gemeinsamen Ideen-Pool kummulativ per Netz gesammelt werden? Damit die Teilnehmer nicht persönlich angreifbar werden, werden die Ideen/Assoziationen gemeinsam/schriftlich/anonym "in Echtzeit" per Netz gesammelt. Ein handschriftliches Protokoll ist nicht zu führen.

Wie können bei Kreativitätstechniken Kurz-Paraphrasierungen und freies Assoziieren/Phantasieren per Stichworten/Text gesammelt werden? Wie kann jeder Ideengeber schnell, einfach, schriftlich, stichwortartig, netzgestützt, "on th fly", seine Beiträge im gemeinsamen Ideen-Pool einbringen/mitprotollieren/speichern/aufbereiten/präsentieren?

Es ist eine App zu schreiben, die das kreative Zusammen-Wirken, wie es z.B. beim Die zu schreibende App soll fachunabhängig genutzt werden können und für Experten, Laien, Wissenschaftler und Mitarbeitern aus anderen Fachgebieten usw. geeignet sein und diese in "Echtzeit" unterstützen Beispiele: App auf Mobilgeräten für/bei Vorträgen, Referaten, Besprechungen, Gruppenarbeit, Evaluation, "sechs Lehren vom Inneren Team", Methode 635, Kreativitätstechniken, elektronisches Brainwriting und Brainstorming

Hinweise ( AJAX - Schnellstart ) einführend

Siehe AJAX from Scratch ( Vergleich zwischen Formular und AJAX ) und ggf. ergänzend Lade HTML-Fragment mit AJAX

// Notwendig fuer ajax ist ein online Browser 
// und aktuelle Seite keine lokale Datei:

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

AJAX-Response ( Callback-Funktion ). Was meint synchron / asynchron ? Der Begriff "asynchrone Datenübertragung" ( zeichenweise asynchron ) darf nicht mit der Asynchrone Kommunikation verwechselt werden ( Abfolge von Anfrage/Antwort beim Übertragungsprotokoll ). Welche Vorteile haben also asynchrone Callback-Funktion gegenüber synchronen?

Zu AJAX gehört das ECMAScript-Objekt new XMLHttpRequest(), dessen Nutzung etwa wie folgt ist:

var xhr;
try {xhr = new XMLHttpRequest();} catch (try_ms) {
 try {xhr = new ActiveXObject("Msxml2.XMLHTTP");} catch (try_ms_old) {
  try {xhr = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) { xhr = false; }}}
} 
if (!xhr) { alert("Senden unmöglich\nKein Internet/XMLHttpRequest"); return; }

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

var str = 'KEY1='    + MYSTR1 
     + '&JSONkey=' + JSON.stringify(obj);
xhr.send(str);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
 // lediglich zum 1. Testen 
 alert(xhr.responseText); // oder that.form.LOCATION.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); }
}

Wurden der var str = 'KEY1='+MYSTR1 + '&JSONkey='+JSON.stringify(obj); mit xhr.send(str) an my.php gesendet, so wird bei einer php-Antwort ( echo-Ausgabe ) die Browser-Callback-Funktion xhr.onreadystatechange = function () {...) aufgerufen. Der Antwort-String beifndet sich in xhr.responseText

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

Hinweise in der Veranstaltung.

Was ist ein String? Systeme haben system-angepaßte nativ-Stringdarstellungen. 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.

scandir(__DIR__) liefert Array mit den Dateinamen im aktuellen Verzeichnis. Teste mit print_r( scandir(__DIR__) )

date('Y-m-d H:i:s',time())

pathinfo(__FILE__) liefert Array mit ["dirname"] für File, ["basename"] für aktuellen php-namen ["extension"] als "php" und ["filename"] Name ohne .php Teste mit print_r( pathinfo(__FILE__) )

Achtung! PHP-Keywords, Classes, Functions und user-definierte Functions sind 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__)); 
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üröich 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;
};
Hinweise ( PHP-Files ) persistente Dateien

Es geht um JSON-String-Daten persistente mit PHP in Datei schreiben und ggf. lesen. Nachfolgender PHP-Code ist ungetestet und kann dennoch hilfreich sein.
Die funktion file_append() hängt an den File $file_name den String $append_string an. Existiert kein File $file_name, so wird vorher ein File angelegt.

define('FILE_BOM', "\xef\xbb\xbf");// alternative define('FILE_BOM', "");
define('FILE_CMOD', 0660);         // falls möglich define('FILE_CMOD', 0600);
define('FILE_MAX_SIZE', 100000);   // in Byte

function file_append($file_name, $append_string, $file_max_size=FILE_MAX_SIZE) {
  if (@file_exists($file_name)) { @chmod($file_name, FILE_CMOD); $fileSize = @filesize($file_name);
  } else { $fileSize = 0;
  }
  if ($fileSize + strlen($append_string) > $file_max_size) {
    echo json_encode(array('error' => 'Max file size reached'));
    exit;
  }
  if ($fileSize == 0) { $append_string = FILE_BOM . $append_string;}
  if (@file_put_contents($file_name, $append_string, FILE_APPEND) === false) {
    echo json_encode(array('error' => 'Could not write to file'));
  } else {
    echo json_encode(array('success' => true));
  } @chmod($file_name, FILE_CMOD);
}
Entwicklungsschritte ( exemplarisch ) Stichworte/Überlegungen

Es geht clientseitig um ECMAScript-Seite(n)-Programmierung mit Formvalidierung, JSON, Verschlüsselung über JSON-Form-Obj, localStorage, AJAX und

Es geht serverseitig um PHP-Seite(n)-Programmierung mit Formvalidierung, JSON und Server-File(s) für Speicherung der verschlüsselten Daten und Responnse-Generierung bei AJAX-Anfragen.

Es wird lediglich mit einem Formular in einer HTML5-Seite gearbeitet. Skizzierte Entwicklungsschritte und Vorgehen grob in Stichworten:

clientseitig


serverseitig


Wie fange ich konkret an? Start-Beispiele

Die Start-Beispiele dienen 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.

Die "ausgereiften" Start-Beispiele sind dann recht universell einsetzbar und leicht anpassbar. Die Seite aufgabe-9-2015-start.htm sendet mit JSON.stringify(obj). Der Server $arr = json_decode($erhaltenen_JSONstr,true) verwendet das assoziative $arr für weitere Aktionen ( Passworte prüfen, Sicherheitsprüfungen, Speicher/Lesen im/von Daten-File, usw.). Siehe clientseitig aufgabe-9-2015-start.htm und serverseitig aufgabe-9-2015-start.php

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr