Dokumentation

Der Betreiber dieser Website www.pixelflüsterin.de hat den Umfang dieser Seite in dem Bereich Webentwicklung erweitert, um hier die Arbeit und das Know-how des Mediengestalters im Bereich der Programmierung in PHP /MySQL und JavaScript darzustellen. Im Rahmen einer Weiterbildung in diesen Programmiersprachen wurden weitere Unterpunkte in der Rubrik Webentwicklung eingefügt. Diese zeigen die Möglichkeiten einer dynamischen Website. Der User kann aktiv werden, in PHP können Einstellungen vorgenommen werden, diese werden vom Server zurückgesendet. Es wird gezeigt wie eine Datenbank im Hintergrund steht, um verschiedene Daten abzurufen oder auch aufzunehmen. In JavaScript können Elemente bewegt, verändert oder aufgerufen werden. Mit 3 kleinen Benutzerfreundlichen Spielen sollen die Möglichkeiten von JavaScript zum Teil auch im Zusammenspiel mit JQuery gezeigt werden: Bilder Verändern, Zufallsfunktionen, Timer, Drag and Drop, Ajax, Effekte im Zusammenspiel mit CSS und die Abwicklung kompletter Spielabläufe:

 

JavaScript 3 Maus-Spiele


Mit dem folgenden PDF können die Technische Dokumentation des JavaScript Projektes mit allen Beschreibungen der Abläufe, Diagrammen und der Übersicht über Funktionen und Objekte heruntergeladen werden:

JS - download pdf

Direkt hier in den Quellcode schauen!
Alle Funktionen der 3 Spiele mit Kommentaren zur besseren Übersicht:

Fang die Maus

								//-------------------------------------------------------------------------------------
								// Spiel Fang die Maus:

								// globale Variablen:
								var hintergrundbild = "hintergrundbild_start";
								var v_start =48;
								var v_ziel = 1;
								var v_gewonnen = false;
								var v_myTimer ;
								var v_gewinnerFeld = 0;
								var v_spielstart = false;
								var v_level = 0;
								var v_damagefeld = 0;
								var v_damage ="";
								/ Eigenschaften aus objektliteral: spielstand.:
								spielstand.maeuse = 0;
								spielstand.punktestand = 0;
								spielstand.punkte = 0;
								spielstand.damage = 0;
								
								//-----------------------------------------------------------------------------------------


								// baut die Felder für das Spiel auf( 48 DIV-Felder mit Feldnummer-id und css classe)
								function feldaufbau(){
									var aufbau = "";
									for (var i = 1; i < 49; i++){
										aufbau +=  "
" ; } document.getElementById("spielfeld").innerHTML += aufbau; } // hier kann die Geschwindigkeit der Maus eingestellt werden. function speed() { // wählt den Index des Selectfeldes aus und übergibt ihn in die Variable: var v_mausspeedy = document.navi.mausspeed.selectedIndex ; switch(v_mausspeedy){ case 0 : v_interval = 5000;break; case 1 : v_interval = 4000;break; case 2 : v_interval = 3000;break; case 3 : v_interval = 2000;break; case 4 : v_interval = 1000;break; } //wichtig; den interval vorher zu stoppen, damit die Mäuse sich nicht vermehren.... delTimer(); setTimer(v_interval) } //----------------------------------------------------------------------------------------- // setzt den Interval, damit die Maus immer an einem anderen Ort erscheint: function setTimer(v_interval){ var sec = 1; // hier findet der Mauswechsel statt: festgelegt duch den parameter v_interval aus der funktion speed. if(v_spielstart === true){ v_myTimer = setInterval("startpunkt()", (sec * v_interval)) ; } } //---------------------------------- // schaltet den Interval wieder aus: function delTimer(){ clearInterval( v_myTimer ) ; } //----------------------------------------------------------------------------------------- // setzt die weiteren Zielpunkte der Maus: (wird mit Intervall setTimer aktiviert) function startpunkt(){ // ändert das aussehen der Mäuse ( 6 verschiedene css Classen werden per random ausgewählt): var zielmausnr = Math.ceil ( Math.random() * 6 ); var v_zielmausclasse = 'ziel_' + zielmausnr; var_v_neuziel = 0; v_neuziel = Math.round(Math.random() * 48 + 0.5); v_neuziel = startlevel(v_neuziel); document.getElementById("feld_" + v_neuziel).className = v_zielmausclasse ; document.getElementById("feld_" + v_ziel).className = "farbeoriginal" ; v_ziel = v_neuziel; } //----------------------------------------------------------------------------------------- // Starten des Spiels: //----------------------------------------------------------------------------------------- // Grundposition: Gewonnen:nein, Start: Feld 64, Spielstart: true // der erste Zielpunkt wird im obersten drittel des Spielfeldes ermittelt: function startspiel(){ spielanleitungweg() spielstandanzeige(); v_spielstart = true; v_gewonnen = false; v_start = 48; // setzt den Button ende auf grau:DOM Manipulation: document.navi.ende.setAttribute('disabled','disabled'); //ändert das Hintergrundbild auf spiel: document.getElementById("spielfeld").className = "hintergrundbild_spiel" ; //DOM Manipulation wieder raus: if (document.getElementById("endpunktzahl")){ var element = document.getElementById("endpunktzahl") ; //removeChild nimmt ein Kindknoten wieder raus: element.parentNode.removeChild( element ) ; } // das erste Ziel wird im obersten drittel des Spielfeldes mit random ermittelt: v_ziel = Math.round(Math.random() * 24 + 0.5); v_neuziel = v_ziel; v_ziel = startlevel(v_neuziel); document.getElementById("feld_" + v_ziel).className = "ziel_1" ; document.getElementById("feld_48").className = "feld" ; //aktivierung des Intervals für die Maus: speed(); //startet das Spiel erneut: document.navi.start.onclick = function(){ if(v_gewonnen == true){ startspiel(); } }; } //----------------------------------------------------------------------------------------- //----------------------------------------------------------------------------------------- // Schritte gehen mit dem Kescher: //Hier wird kontrolliert ob der Kescher vorwärts gehen kann und die neue Position wird in v_weiter geschrieben: //würde das neue Feld außerhalb des Spielfeldes liegen wird eine 0 weitergegeben: function vorwaerts(){ v_weiter = v_start - 8; v_damagefeld = v_start; if(v_spielstart == true) { if(v_weiter < 1) { v_weiter = 0; } v_damage = "damageup"; aktion(v_weiter); } } //------------------------------------- //Hier wird kontrolliert ob der Kescher zurück gehen kann und die neue Position wird in v_weiter geschrieben: //würde das neue Feld außerhalb des Spielfeldes liegen wird eine 0 weitergegeben: function zurueck(){ if(v_spielstart == true) { v_weiter = v_start + 8; v_damagefeld = v_start; if(v_weiter > 48) { v_weiter = 0; } v_damage = "damagedown"; aktion(v_weiter); } } //------------------------------------- //Hier wird kontrolliert ob der Kescher nach rechts gehen kann und die neue Position wird in v_weiter geschrieben: //würde das neue Feld außerhalb des Spielfeldes liegen wird eine 0 weitergegeben: function rechts(){ if(v_spielstart == true) { v_weiter = v_start + 1; v_damagefeld = v_start; if((v_weiter == 9)|| (v_weiter == 17) || (v_weiter == 25)|| (v_weiter == 33) || (v_weiter == 41)|| (v_weiter == 49)) { v_weiter = 0; } v_damage = "damageright"; aktion(v_weiter); } } //------------------------------------- //Hier wird kontrolliert ob der Kescher nach linkt gehen kann und die neue Position wird in v_weiter geschrieben: //würde das neue Feld außerhalb des Spielfeldes liegen wird eine 0 weitergegeben: function linksfunk(){ if(v_spielstart == true) { v_weiter = v_start - 1; v_damagefeld = v_start; if((v_weiter == 0)|| (v_weiter == 8) || (v_weiter == 16)|| (v_weiter == 24) || (v_weiter == 32)|| (v_weiter == 40)) { v_weiter = 0; } v_damage = "damageleft"; aktion(v_weiter); } } //---------------------------------------------------------------------------------------------------------------------------- //---------------------------------------------------------------------------------------------------------------------------- // Hier wird die Aktion ausgeführt, wenn ein Schritt weiter gegeangen wird: // Entweder geht der Kescher ein Schritt weiter // oder es gibt eine Damagemeldung wenn das Spielfeld verlassen wurde. // bei einer gefangenen Maus wird die Maus im Käfig angezeigt, (timeout 3 sec), der Spielfeldrahmen färbt sich in Magenta um // die gewonnen oder verlorenen Punkte werden gleich in die Globale Variable geschrieben und angezeigt: function aktion(v_weiter){ var v_farbe = "feld"; var v_farbeoriginal = "farbeoriginal"; var v_gefangenmaus = "gewonnen" // ein Array für alle Feldnamen, die aus dem Array genommen werden, // damit die Nummern übereinstimmt habe ich hier das Feld_0 mit eingefügt: var array_feld = new Array("feld_0","feld_1", "feld_2", "feld_3", "feld_4", "feld_5", "feld_6", "feld_7", "feld_8", "feld_9","feld_10", "feld_11", "feld_12", "feld_13", "feld_14", "feld_15", "feld_16", "feld_17", "feld_18", "feld_19", "feld_20", "feld_21", "feld_22", "feld_23", "feld_24", "feld_25", "feld_26", "feld_27", "feld_28", "feld_29", "feld_30", "feld_31", "feld_32", "feld_33", "feld_34", "feld_35", "feld_36", "feld_37", "feld_38", "feld_39", "feld_40", "feld_41", "feld_42", "feld_43", "feld_44", "feld_45", "feld_46", "feld_47", "feld_48"); if (v_level != 0){ v_weiter = damagelevel(); } if(v_weiter != 0) { document.getElementById(array_feld[v_weiter]).className = v_farbe ; document.getElementById(array_feld[v_start]).className = v_farbeoriginal ; if(v_weiter == v_ziel){ //stoppt den Interval der ZielMaus: delTimer(); v_spielstart = false; spielstand.maeuse = spielstand.maeuse +1; spielstand.punkte = spielstand.punkte +3; spielstandanzeige(); document.getElementById(array_feld[v_weiter]).className = v_gefangenmaus ; document.getElementById("spielfeld").style.border ="3px solid #e2007a"; v_gewinnerFeld = array_feld[v_weiter]; //hier ist ein kleiner Timeout gesetzt, damit die Maus auch im Käfig zu sehen ist: setTimeout( "gewonnenanzeige();" , 2500 ) ; } else{ v_start = v_weiter; // console.log() gibt den aktuellen Wert in der Konsole aus: //console.log(v_start) ; } } else{ spielstand.damage= spielstand.damage+1; spielstandanzeige(); document.getElementById("feld_" + v_damagefeld).className = v_damage ; } } //------------------------------------------------------------------------------ // Damit die Gewinnanzeige etwas Zeit bekommt ist diese Funktion ausgelagert: //Hier wird der Spielfeldrahmen auf Magenta gesetzt, der Spielstand abgerufen und das gewinner Feld wieder auf die Originalfarbe gesetzt: function gewonnenanzeige(){ var v_farbeoriginal = "farbeoriginal"; spielstandanzeige(); document.getElementById("spielfeld").style.border ="3px solid #000"; document.navi.ende.removeAttribute('disabled'); document.getElementById(v_gewinnerFeld).className = v_farbeoriginal ; v_gewonnen = true; } //------------------------------------------------------------------------------ // Zeigt Spielende mit dem erreichen Punktestand: // und Setzt die Punkte wieder auf 0: // wird mit DOM Manipulation angezeigt : function spielende(){ delTimer(); //stellt den Startbutton wieder auf "Start": document.navi.start.value = "start"; //wird hier über Objektliteral punkteanzeige.js aufgerufen: spielstand.punkteberechnung(); var spielendetext = ""; //wird hier über Objektliteral punkteanzeige.js aufgerufen und der spielendetext übergeben: spielendetext = spielstand.spielendeanzeige(); // setzt das Hintergrundbild wieder auf Start: document.getElementById("spielfeld").className = "hintergrundbild_start" ; //DOM Manipulation, neuer p-tag wird erstellt: // erster p tag: create Element erstellt ein neues Element in diesem Fall:

: var element = document.createElement( "p" ) ; // fügt ein Attribut id ein: element.setAttribute( "id" , "endpunktzahl" ) ; var newText = document.createTextNode( spielendetext ) ; //appendChild fügt ein Kindknoten hinzu: element.appendChild( newText ) ; document.getElementById("endanzeige").appendChild( element ) ; // alles wieder auf Startposition: spielanleitungweg() spielstand.punktestand = 0; spielstand.punkte = 0; spielstand.damage= 0; spielstand.maeuse = 0; // hier wirde der Button eingegraut: document.navi.ende.setAttribute('disabled','disabled'); } //------------------------------------------------------------------------------ function spielstandanzeige(){ //wird hier über Objektliteral punkteanzeige.js aufgerufen: anzeigetext = spielstand.anzeigedisplay("anzeige"); } //---------------------------------------------------------------------------------------------------------------------------------- //Level----------------------------------------------------------------------------------------------------------------------------- // diese Funktion baut Hindernisse ein: function schema1(){ v_level = 1; var v_wand = "wand"; document.navi.Schema.value = "Level 1"; document.getElementById("spielfeld").className = "hintergrundbild_spiel" ; var array_schema1 = new Array("feld_10","feld_14","feld_32","feld_43","feld_46"); for(var i = 0; i < array_schema1.length; i++){ document.getElementById(array_schema1[i]).className = v_wand ; } document.navi.Schema.onclick = function(){ schema2(); }; } //--------------------------------------------------------------------- // diese Funktion baut weitere Hindernisse ein: function schema2(){ v_level = 2; var v_wand = "wand"; document.navi.Schema.value = "Level 2"; var array_schema2 = new Array("feld_8","feld_13","feld_17","feld_19","feld_32","feld_37","feld_42"); for(var i = 0; i < array_schema2.length; i++){ document.getElementById(array_schema2[i]).className = v_wand ; } document.navi.Schema.onclick = function(){ schemaende(); }; } //--------------------------------------------------------------------- // setzt alle Felder wieder auf Originalfarbe zurück: function schemaende(){ document.navi.Schema.value = "Level"; var v_farbeoriginal = "farbeoriginal"; // hier darf das Array nicht mit Feld_0 beginnen, sonst kommt es zu einer Fehlermeldung: var array_feld = new Array("feld_1", "feld_2", "feld_3", "feld_4", "feld_5", "feld_6", "feld_7", "feld_8", "feld_9","feld_10", "feld_11", "feld_12", "feld_13", "feld_14", "feld_15", "feld_16", "feld_17", "feld_18", "feld_19", "feld_20", "feld_21", "feld_22", "feld_23", "feld_24", "feld_25", "feld_26", "feld_27", "feld_28", "feld_29", "feld_30", "feld_31", "feld_32", "feld_33", "feld_34", "feld_35", "feld_36", "feld_37", "feld_38", "feld_39", "feld_40", "feld_41", "feld_42", "feld_43", "feld_44", "feld_45", "feld_46", "feld_47", "feld_48"); for(var i = 0; i < array_feld.length; i++) { document.getElementById(array_feld[i]).className = v_farbeoriginal ; } document.navi.Schema.onclick = function(){ schema1(); }; v_level = 0; } //--------------------------------------------------------------------- // hier werden die Fehler beim Anfahren gegen eine Wand ermittelt: function damagelevel(){ if (v_level == 1){ if((v_weiter == 10)|| (v_weiter == 14) || (v_weiter == 32)|| (v_weiter == 43)|| (v_weiter == 46)) { v_weiter = 0; return v_weiter; } else{ return v_weiter; } } if (v_level == 2){ if((v_weiter == 10)|| (v_weiter == 14) || (v_weiter == 32)|| (v_weiter == 43)|| (v_weiter == 46) || (v_weiter == 8) || (v_weiter == 13) || (v_weiter == 17) || (v_weiter == 19) || (v_weiter == 32) || (v_weiter == 37) || (v_weiter == 42)) { v_weiter = 0; return v_weiter; } else{ return v_weiter; } } if (v_level == 0){ return v_weiter; } } //--------------------------------------------------------------------- // Damit die Maus keine Wände verschwinden lässt müssen auch die Ziele abgefragt und eingeschränkt werden: function startlevel(v_neuziel){ if (v_level == 1){ if((v_neuziel == 10)|| (v_neuziel == 14) || (v_neuziel == 32)|| (v_neuziel == 43)|| (v_neuziel == 46)) { v_neuziel = 1; return v_neuziel; } else{ return v_neuziel; } } if (v_level == 2){ if((v_neuziel == 10)|| (v_neuziel == 14) || (v_neuziel == 32)|| (v_neuziel == 43)|| (v_neuziel == 46) || (v_neuziel == 8) || (v_neuziel == 13) || (v_neuziel == 17) || (v_neuziel == 19) || (v_neuziel == 32) || (v_neuziel == 37) || (v_neuziel == 42)) { v_neuziel = 7; return v_neuziel; } else{ return v_neuziel; } } if (v_level == 0){ return v_neuziel; } } //------------------------------------------------------------------------------------------------------------------------------------- // hier wird die Spielanleitung mit Ajax eingelesen : function spielanleitung() { //alert("hallo Spielanleitung"); var ajax ; if ( window.ActiveXObject ) { ajax = new ActiveXObject( "Microsoft.XMLHTTP" ); } else if( window.XMLHttpRequest ) { ajax = new XMLHttpRequest(); } //holt die Datei über GET: ajax.open( "GET" , "ajax/spielanleitung.txt" , false ); // false ->synchron ajax.send( null ) ; // in Variable gespeichert: var textdata = ajax.responseText; //alert("hallo" + textdata); //hier wird die Datei aufgerufen: document.getElementById("anleitung").innerHTML = textdata ; document.navi.anleitung.value = "ausblenden"; //hier soll die Anleitung wieder verschwinden: document.navi.anleitung.onclick = function(){ spielanleitungweg() }; } // und wieder entfernt: function spielanleitungweg(){ //wird einfach mit dem Wort "Anleitung" überschrieben: document.getElementById("anleitung").innerHTML = "" ; //damit sie erneut aufgerufen werden kann: document.navi.anleitung.value = " Spielanleitung "; document.navi.anleitung.onclick = function(){spielanleitung()} } //---------------------------------------------------------------------------------------------------------------------------- // Objektliteral //---------------------------------------------------------------------------------------------------------------------------- var spielstand = { // Eigenschaften: punkte : 0 , damage : 0 , maeuse : 0 , punktestand : 0, // Methoden: //Punktestandberechnung: punkteberechnung : function(){ spielstand.punktestand = spielstand.punkte - spielstand.damage; } , //---------------------------------------------------------------------------------------------------------------------------- //anzeige Punkte anzeigedisplay : function(anzeige){ var anzeigetext = ""; var anzeige = document.getElementById(anzeige) ; //alert("wo ist die Anzeige hin??" + anzeige) anzeigetext += "

Gefangene Mäuse: " + spielstand.maeuse + "

"; anzeigetext += "

Punktestand: " + spielstand.punkte + "

"; anzeigetext += "

Schadenspunkte: -" + spielstand.damage + "

"; anzeige.innerHTML = anzeigetext; //return anzeigetext; } , //---------------------------------------------------------------------------------------------------------------------------- // Endstandanzeige spielendeanzeige : function(){ var spielendetext = ""; //alert(spielstand.maeuse); if (spielstand.maeuse == 1){ spielendetext = spielstand.maeuse + " Maus gefangen: " + spielstand.punktestand + " Punkte" ; } if (spielstand.maeuse > 1){ spielendetext = spielstand.maeuse + " Mäuse gefangen: " + spielstand.punktestand + " Punkte" ; } if (spielstand.maeuse == 0){ spielendetext = "Sie haben leider noch keine Maus gefangen." ; } return spielendetext; } , } ;

Such die Maus
								//-------------------------------------------------------------------------------------
								// Such die Maus:
							
								var lupeobj = {
								//Eigenschaft:
								anzeigeBild : 1,
								//----------------------------------------------------------------------------------------------------------------------------------------------------
								//Methoden:
								//----------------------------------------------------------------------------------------------------------------------------------------------------
								// JQuery Methode um eine Lupe darzustellen:
								
								lupejquery : function(){
								
									$(document).ready(function() {
									$("#effekt").mousemove(function(Pos){
										var bild = new Image();
										bild.src = $("#mini").attr("src");
										var width = bild.width;
										var height = bild.height;
										var li = Pos.pageX - $(this).offset().left;
										var ob = Pos.pageY - $(this).offset().top;
										if ( (li > 0 && li < $(this).width()) &&
											(ob > 0 && ob < $(this).height()) ) {
											$("#lupen").fadeIn("fast");
										} else {
											$("#lupen").fadeOut("slow");
										}
										if ($("#lupen") .is (":visible")) {
											var pw = $("#lupen").width()/2;
											var ph = $("#lupen").height()/2;
											var px = li - pw;
											var py = ob - ph;
											var grw = Math.round(pw - li/$("#mini").width() * width * 3.03);
											var grh = Math.round(ph - ob/$("#mini").height() * height * 3.03);
											var pos = grw + "px " + grh + "px";
											$("#lupen").css({left: px, top: py, backgroundPosition: pos});
										}
									})
									})

								},
								
								
								//----------------------------------------------------------------------------------------------------------------------------------------------------
								// Abstand Maus für Methode "mausgefunden()"
								// berechnet den Abstand für den pageX / pageY Wert, wenn der Monitor in seiner Größe verändert wird:
								// officeX und Y war leider nicht möglich anzuwenden, da die Lupenfunktion diese Eigenschaft nicht zulässt.
								// es muss die Spielfeldgröße (bei Mointoranpassung endgröße) und der margin-left ( abstand zum Lupenbild) übergeben werden.
								// die Größe des Monitors wird mit innerWidth abgerufen der Scrollbalken wird mit dem Wert 16 abgezogen.
								
								abstandberechnung : function(spielfeld,margin){
									
									var fenster = window.innerWidth - 16;
									var abstand = 0;
									
									if (fenster > spielfeld){
										abstand = ((fenster - spielfeld) / 2) + margin;
									}
									else{
										abstand = margin;
									}
									return abstand;

								},
								
								



								//mausfinden:
								// der Parameter "event" gibt die Koordinaten über pageX und pageY aus.
								// die Bildnummer wird übergeben und ändet sich je nachdem weches Bild angezeigt wird.
								// für jedes Bild gibt es eine Abrfage für die Koordinaten wo die Maus versteckt ist(Toleranzspielraum 20px):
								// es werden die Koordinaten abgefragt und wenn der Mauszeiger sich in dieser Toleranzzone bewegt wird der Border auf Magenta gesetzt.
								// die Eigenschaft mausentdeckt wird auf true gesetzt.
								// die Methode ganzesbild wird aufgerufen
								// im elsezweig wird der Border wieder zurück gesetzt, damit die Anzeige wieder black ist.
								// der abstand für die verschiedenen Monitorgrößen wird abgerufen und zu dem Abstand der Maus im Bild addiert.

								mausgefunden :function( event )
								{
									
									var abstand = lupeobj.abstandberechnung(1099,70);
									var sekunden = 0;


									switch ( lupeobj.anzeigeBild ) 
									{
									case 1 : 	if((event.pageX > 170 + abstand && event.pageX < 190 + abstand ) && (event.pageY > 570 && event.pageY < 585)){
												//alert("hallo");
													document.getElementById("effekt").style.border ="3px solid #e2007a";
													lupeobj.mausentdeckt = true;
													setTimeout( "lupeobj.ganzesbild();" , 3000 ) ;
												}
												else{
													document.getElementById("effekt").style.border ="3px solid #000";
													lupeobj.mausentdeckt = false;
												}
												break ;
									case 2 : 	if((event.pageX > 435 + abstand && event.pageX < 455 + abstand ) && (event.pageY > 355 && event.pageY < 370)){
												
													document.getElementById("effekt").style.border ="3px solid #e2007a";
													lupeobj.mausentdeckt = true;
													setTimeout( "lupeobj.ganzesbild();" , 3000 ) ;

												}
												else{
													document.getElementById("effekt").style.border ="3px solid #000";
													lupeobj.mausentdeckt = false;
												}
												break ;
									case 3 : 	if((event.pageX > 425 + abstand && event.pageX < 445 + abstand) && (event.pageY > 420 && event.pageY < 435)){
													lupeobj.mausentdeckt = true;
													document.getElementById("effekt").style.border ="3px solid #e2007a";
													setTimeout( "lupeobj.ganzesbild();" , 3000 ) ;
												}
												else{
													document.getElementById("effekt").style.border ="3px solid #000";
													lupeobj.mausentdeckt = false;
												}
												break ;
									case 4 : 	if((event.pageX > 540 + abstand && event.pageX < 560 +abstand ) && (event.pageY > 625 && event.pageY < 640)){
													lupeobj.mausentdeckt = true;
													document.getElementById("effekt").style.border ="3px solid #e2007a";
													setTimeout( "lupeobj.ganzesbild();" , 3000 ) ;
												}
												else{
													document.getElementById("effekt").style.border ="3px solid #000";
													lupeobj.mausentdeckt = false;
												}
												break ;
												
									default  : document.getElementById("effekt").style.border ="3px solid #000";
												lupeobj.mausentdeckt = false;
									}
									//Programmierhilfe
									//document.getElementById("msg").innerHTML = event.pageX + "x: " + event.pageY + "y: " + "das ist die Bildnummer:" + lupeobj.anzeigeBild;
									//document.getElementById("msg2").innerHTML = "das ist der Abstnd" + abstand;
								},
								
								
								// Methode, damit nachdem die Maus gefunden wurde das richtige Bild mit Maus angezeigt wird:
								// es wird vorher abgefragt, ob die Maus gefunden wurde, denn nur wenn die Maus länger als 3 Sekunden  in der Lupe angezeigt wird
								// wird diese Funktion aktiv. Sonst könnte ein zufälliges Vorbeihuschen der Lupe diese Funktion auslösen und die Maus wäre noch gar nicht gefunden!!!!
							
								ganzesbild : function(){
									if(lupeobj.mausentdeckt == true){
										neuesBild = 'images/suchmaus_' + lupeobj.anzeigeBild + 'gross.jpg';
										document.getElementById("mini").src = neuesBild;
									}
									
								},
								
									
							//----------------------------------------------------------------------------------------------------------------------------------------------------
							//----------------------------------------------------------------------------------------------------------------------------------------------------
							//Bildwechsel:
							// Damit die beiden folgenden Methoden flexibel bleiben. Wird nur der Parameter Anzahl übergeben.
							// in diesem steht die Anzahl der Bilder. die Globale Eigenschaft anzeige Bild wird in den Methoden jeweils um eins ++ oder -- gerechnet.

							// zum anlegen weiterer Bilder müssen:
							// -der Parameter angepasst werden
							// -zwei bilder erstellt "suchmaus_x.jpg" und "suchmaus_xgross.jpg"
							// -die CSS angepasst ( bild "suchmaus_xgross.jpg" eingebaut) und neu abgesichert werden unter: suchdiemaus_x.css.
							// - x steht für die fortlaufende Nummer der Bilder und muss fortlaufend und in den Bildern und der css identisch sein.

							// wählt das nächste Bild aus; über den eventhändler "weiter":

								bildweiter : function(anzahl){
									// hier wird gefragt ob die anzeigeBild auch nicht größer wird als die Parameterangabe "anzahl".
									// und wird wieder auf 0 gestellt.
									if (lupeobj.anzeigeBild >= anzahl){
										lupeobj.anzeigeBild = 0;
									}
									lupeobj.anzeigeBild++;
									//wechselnde Bildanzeige Änderung des img im HTML
									neuesBild = 'images/suchmaus_' + lupeobj.anzeigeBild + '.jpg';
									document.getElementById("mini").src = neuesBild;

									//wechselnde Bildanzeige Änderung des Backgroundimages im css:
									var css_wechsel = 'css/suchdiemaus_' + lupeobj.anzeigeBild + '.css';
									document.getElementById("css").href = css_wechsel;

								},
								
								//------------------------------------------------------------------------------
								// wählt das vorherige Bild aus, über den Eventhändler "zurueck":
								
								bildzurueck : function(anzahl){
									// hier wird gefragt ob die anzeigeBild auch nicht kleiner wird als 1. 
									//Danach wird die anzeigeBild wieder auf die richtige Anzahl gestellt:
									if (lupeobj.anzeigeBild <= 1){
									lupeobj.anzeigeBild = anzahl +1;

									}
									lupeobj.anzeigeBild--;
									
									//wechselnde Bildanzeige Änderung des img tags im HTML
									neuesBild = 'images/suchmaus_' + lupeobj.anzeigeBild + '.jpg';
									document.getElementById("mini").src = neuesBild;
									
									//wechselnde Bildanzeige Änderung des Backgroundimages im css:
									var css_wechsel = 'css/suchdiemaus_' + lupeobj.anzeigeBild + '.css';
									document.getElementById("css").href = css_wechsel;
								}

							};



							

Puzzle die Maus
							//-------------------------------------------------------------------------------------
							// Spiel Puzzle die Maus:
						var puzzle = {
							//Eigenschaften:
							//-------------------------------------------------------------------------------------------------------------------------------------------------------------
							bilder : ["maus_1.jpg","maus_2.jpg","maus_3.jpg","maus_4.jpg","maus_5.jpg","maus_6.jpg","maus_7.jpg","maus_8.jpg","maus_9.jpg",
									"maus_10.jpg","maus_11.jpg","maus_12.jpg","maus_13.jpg","maus_14.jpg","maus_15.jpg",
									"maus_16.jpg","maus_17.jpg","maus_18.jpg","maus_19.jpg","maus_20.jpg"],
							
							felder : ["feld_0","feld_1", "feld_2","feld_3","feld_4","feld_5","feld_6","feld_7","feld_8","feld_9","feld_10","feld_11","feld_12","feld_13",
										"feld_14","feld_15","feld_16","feld_17","feld_18","feld_19"],
										
							startpuz : false,
												
							
							//Methoden:
							//-------------------------------------------------------------------------------------------------------------------------------------------------------------

							//eine Methode mit jQuery für das dragable und dropable der Puzzleteile:
							draganddrop : function(){

							$(function() {
								$( ".column" ).sortable({
									connectWith: ".column",
									handle: ".portlet-header",
									cancel: ".portlet-toggle",
									placeholder: "portlet-placeholder ui-corner-all"
									});
								 
									$( ".portlet" )
									.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
									.find( ".portlet-header" )
									.addClass( "ui-widget-header ui-corner-all" )
									.prepend( "");
								 
									$( ".portlet-toggle" ).click(function() {
									var icon = $( this );
									icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
									icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
									});
								});
							

							},
							
							//-------------------------------------------------------------------------------------------------------------------------------------------------------------
							// bringt die Puzzlestückchen im Array drucheinander: 
							shuffle : function(myArray){
								var arrayLength = myArray.length;
								if ( arrayLength == 0 ) return false; // false wenn das Array leer ist
								for(var i =0; i < arrayLength; i++) {
									//zufaellige Nummer aus dem Array auswaehlen
									var j = Math.floor( Math.random() * ( arrayLength-1 ) );
									//aktuelle Arraynummer mit dem zufaellig generierten austauschen (swap)
									var tempi = myArray[i];
									var tempj = myArray[j];
									myArray[i] = tempj;
									myArray[j] = tempi;
								}
								return myArray;
							},
							
							
								//-------------------------------------------------------------------------------------------------------------------------------------------------------------
								// prüft, ob das Puzzel richtig zusammengesetzt ist und färbt den Rand nach Fertigstellung Magentafarben ein.
								pruefungPuzzle : function(){
									
									if(puzzle.startpuz == true){
										// dies ist die Richtige Reihenfolge der Bilder:
										var bilderrichtig = new Array("maus_1.jpg","maus_2.jpg","maus_3.jpg","maus_4.jpg","maus_5.jpg","maus_6.jpg","maus_7.jpg","maus_8.jpg","maus_9.jpg",
											"maus_10.jpg","maus_11.jpg","maus_12.jpg","maus_13.jpg","maus_14.jpg","maus_15.jpg",
											"maus_16.jpg","maus_17.jpg","maus_18.jpg","maus_19.jpg","maus_20.jpg");
											
										// hier werden die Bilder der reihenfolge nach wie sie im Dokument stehen in ein Array aufgenommen
										// Voraussetzug: Die Bilder sind im HTMLdokument mit dem Attribut alt mit dem entsprechenden Bildnamen ausgesstattet.
										var bilderpruefung = new Array ();
										var newbild = ""
										for ( i = 0  ;   i < 20   ;  i++  ){
											//newbild = document.images[i].alt;
											newbild = document.getElementById("puzzlebox").getElementsByTagName("img")[i].alt;
											bilderpruefung[i] = newbild;
										}
										// beide Arrays werden in einen String umgewandelt und danach verglichen, ob beide gleich sind:
										var bildpruef_string = bilderpruefung.toString();
										var bildricht_string = bilderrichtig.toString();

										if (bildricht_string == bildpruef_string){

											//alert("fertig")
											document.getElementsByClassName("column")[0].style.border ="3px solid #e2007a";
										}
										
										else{
											// optional, vielleicht passiert hier im elsezweig noch etwas:
											//document.getElementsByClassName("column")[0].style.border ="2px solid black";
											//alert("noch mal")
										}
									}
								
							},
							

							//-------------------------------------------------------------------------------------------------------------------------------------------------------------
							// Die Puzzleteile werden durcheinandergebracht:
							startpuzzle : function(){
							puzzle.startpuz = true;
							//setzt den magenta farbenen Border wieder auf black:
							document.getElementsByClassName("column")[0].style.border ="3px solid black";
							// ruft die JQuery draganddrop Funktion auf:
							puzzle.draganddrop();
							//bringt die Puzzleteile drucheinander:
							puzzle.shuffle(puzzle.bilder);
							//diese Schleife holt die bilder aus dem druchmixten array und füllt die Felder mit den Puzzleteilen:
								for(var i = 0; i < puzzle.bilder.length; i++){
									puzzlebild = 'images/' + puzzle.bilder[i] ;

									document.getElementById(puzzle.felder[i]).src = puzzlebild;
									document.getElementById(puzzle.felder[i]).alt = puzzle.bilder[i] ;
								}

							}
							
						};




						

 

PHP / MySQL - Sprüche-Shop


Im folgenden PDF können die Technische Dokumentation des PHP Projektes mit allen Beschreibungen der Abläufe, Diagrammen und der Übersicht über die Datenbank, Klassen und den Funktionen heruntergeladen werden:

PHP - download pdf

Direkt hier in den Quellcode schauen!
Alle Funktionen der Sprüche-Shop Programmierung mit Kommentaren:

Kontrollzentrum
										//-------------------------------------------------------------------------------------
										// Kontrollzentrum
										//------------------------------------------------------------------------------------------------------
										require("../klassen/Datenbank.ClassPDO.php");
										require("../klassen/LayoutClass.php");

										session_set_cookie_params (0) ;
										session_name("pixelsession") ;
										session_start() ;
										//Nach fertigstellung Aktivieren:
										//error_reporting (0) ; 

										//---------------Variablen -----------------------------------------------------------------------------

										$db = new Datenbank ();
										$laynew = new Layout ();
										$info = "";
										$farbe = "";

										$anzeigeware = "class = anzeigewarenkorbaus";
										// hier werden die grautöne mit dem "getter" aus der Classe Layout geholt:
										$farbe = $laynew->getgrautoene ();
										if(!isset($_POST["spruchabsenden"])){
										$info = $laynew->infotext();}
										//-----------------------------------------------------------------------------------------------------------
										// diese Funktion ruft die Sprüche ab, und zeigt die Aktuelle Seite an 
										//( eine Funktion wo beide Klassen enthalten sind)
										function aktuelleansicht($db,$laynew){
											$feld = $_SESSION["feld"];
											$seite = $feld +6;
											$db->dbconnect();

											$liste = $db->spruecheausDB($feld, $seite);
											$anisichtalle = $laynew->spruchansicht($liste);

											return $anisichtalle;
											
										}

										//-----------------------------------------------------------------------------------------------------------
										// anzeige für die Sprucheingabe im Feld_10:
										//diese Methode wird bei jedem Seitenaufbau aufgerufen, nur wenn ein Spruch angezeigt wird ändert sich die Anzeige in neuerSpruch.
										$anzeigeSprucheingabe = $laynew->eingabeSpruch();

										
										//-----------------------------------------------------------------------------------------------------------
										// der Autor wird auf "" gestellt, wenn kein Autor angegeben wird:
										// der Spruch wird mit der Themakennzeichnung "neu" in die Datenbank aufgenommen.
										// der neue Spruch wird angezeigt dabei werden Text und Autor der Methode neuerSpruch übergeben.
										if(isset($_POST["spruchabsenden"])){
											if($_POST["neuautor"] === "Autor"){
												$_POST["neuautor"] = "";
											}
											$text = $_POST["neuspruch"];
											$autor = $_POST["neuautor"];
											//der Spruch wird in die Datenbank aufgenommen:
											$db->spruchaufnahme();
											// der Spruch wird angezeigt:
											$anzeigeSprucheingabe = $laynew->neuerSpruch($text,$autor);
											$info = $laynew->infotextdanke();
										}

										
										//-----------------------------------------------------------------------------------------------------------
										// mit GET werden hier die Sprüche an die SESSION übergeben die mit dem link "auswahl" ausgewählt wurden:
										if (isset ($_GET["sp_id"])){

											//übernimmt die auswahl des Spruches in die Session:
											$_SESSION["auswahl"][] = ($_GET);
											// die Sprüche in der auswahl werden gezählt:
											$_SESSION ["anzahlsprueche"]++;
											$feld = $_SESSION["feld"];
										}
										


										//-----------------------------------------------------------------------------------------------------------
										// nach dem drücken des Sendbuttons laufen folgende Methoden ab:
										// hier wird die ausgewählte Farbe in die SESSION übernommen
										if (isset ($_POST["senden"]))
										{
											if (isset ($_POST["farbwahl"])){

												$_SESSION["farbe"] = $_POST["farbwahl"];

											}

											
											
											//-----------------------------------------------------------------------------------------------------------
											// Die Info steht für die Technische Info die Angezeigt werden kann (zur Zeit unaktiv)
											if (isset ($_POST["info"])){
												$info = $laynew->infotext();
											}
											
											
											//--------------------------------------------------------------------------------------------------------
											// Hier werden die Sprüche angezeigt "Feld" wird wieder auf 0 gesesetzt:
											if(isset($_POST["sprueche"])){
												$aufruf = "";
												$_SESSION ["aufruf"]= $aufruf;
												
												$feld = 0;
												$seite = $feld +6;
												$_SESSION["sprueche"] = $_POST["sprueche"];
												$_SESSION["feld"] = $feld;
												//mit der Methode spruecheausDB werden die Sprüche aus der Datenbank geholt:
												$liste = $db->spruecheausDB($feld, $seite);
												//mit der Methode spruchansicht werden die sprüche in die unterschiedlichen Felder gelegt und dargestellt:
												$anisichtalle = $laynew->spruchansicht($liste);
												
												$thema= $laynew->Spruchthemaanzeige();

											}
											

										}
										//-----------------------------------------------------------------------------------------------------------
										//Wenn noch keine Sprüche ausgewählt sind steht die Anzahl auf 0

										if(!isset($_SESSION ["anzahlsprueche"])){
		
											$_SESSION ["anzahlsprueche"]=0;
		
										}
										
													
										
										//-----------------------------------------------------------------------------------------------------------
										// Wenn eine Farbe gewählt ist wird sie so lange angezeigt, wie sie sich  in der Session befindet
										if (isset ($_SESSION["farbe"])){
											$farbe = $laynew->farbeaendern();
										}
										
										//-----------------------------------------------------------------------------------------------------------
										//solange Sprüche gewählt sind werden diese angezeigt:
										if (isset ($_SESSION["sprueche"])){
											$anisichtalle = aktuelleansicht($db,$laynew);
											//mit diser Methode werden 3 Bilder aud der DB geholt und dargestellt:
											$bildarray = $db->bilderausDB();
											$thema= $laynew->Spruchthemaanzeige();

										}

										//-----------------------------------------------------------------------------------------------------------
										// hier wird der "Warenkorb" angezeigt:
										if (isset($_POST["spruchanzeige" ])){
											if (isset($_SESSION["auswahl"])){
												$anzeigeware ="class = 'anzeigewarenkorban'";
												$feld = $_SESSION["feld"];
												// holt die daten aus der DB
												$db->warenkorbinhalt ();

												// anzeige der Daten:
												$anzeigeauswahl = $laynew->anzeigewarenkorb();
											}
											else{
												$anzeigeware ="class = 'anzeigewarenkorban'";
												$anzeigeauswahl = $laynew->anzeigelehrerwarenkorb();
											}
										}

										//-----------------------------------------------------------------------------------------------------------
										// löscht die Inhalte wider aus dem Warenkorb raus:
										if (isset ($_POST["deleteindex"])){
											
											$index = $_POST['deleteindex'] ;


												if(isset($index))
												{
													//echo "das it die Art_id: " . $sp_id ."und das der Index: ". $index ."
"; unset( $_SESSION["auswahl"][$index]["sp_id"]); unset( $_SESSION["auswahl"][$index]["sp_thema"]); unset( $_SESSION["auswahl"][$index]["sp_text"]); unset( $_SESSION["auswahl"][$index]["sp_autor"]); } $anzeigeauswahl = $laynew->anzeigewarenkorb(); // hier wird die anzahl der ausgewählten Sprüche wieder abgezogen: $_SESSION ["anzahlsprueche"]--; // der Warenkorb wird angezeigt: $anzeigeware ="class = 'anzeigewarenkorban'"; } //----------------------------------------------------------------------------------------------------------- // holt die nächsten Sprüche aus der Datenbank und zeigt sie an: if(isset($_POST["weiter"])) { $feld = $_SESSION["feld"] +6; $seite = $feld +6; $_SESSION["feld"] = $feld; // diese Methode gibt die Anzahl der Sprüche zurück, die in der Datenbank sind: $anzahlsp = $db->anzahlspruche(); if ($_SESSION["feld"] < ($anzahlsp["anzahl"])){ $liste = $db->spruecheausDB($feld, $seite); $anisichtalle = $laynew->spruchansicht($liste); } else{ $_SESSION["feld"] = 0; $feld = $_SESSION["feld"]; $seite = $feld +6; $liste2 = $db->spruecheausDB($feld, $seite); $anisichtalle = $laynew->spruchansicht($liste2); } } //----------------------------------------------------------------------------------------------------------- // holt die vorherigen Sprüche aus der Datenbank und zeigt sie an: if(isset($_POST["zurueck"])) { if ($_SESSION["feld"] > 5){ $feld = $_SESSION["feld"] -6; $seite = $feld +6; $_SESSION["feld"] = $feld; $liste = $db->spruecheausDB($feld, $seite); $anisichtalle = $laynew->spruchansicht($liste); } else{ $anzahlsp = $db->anzahlspruche(); $zwischenergebnis = ($anzahlsp["anzahl"] / 6) ; $feld = floor($zwischenergebnis) * 6 ; $_SESSION["feld"] = $feld; $seite = $feld +6; $liste = $db->spruecheausDB($feld, $seite); $anisichtalle = $laynew->spruchansicht($liste); } }

Datenbankklasse
							
							
									//-------------------------------------------------------------------------------------
									//Datenbankabwicklung:
									//--------------------------------------------------------------------------------------------------------------------------------------
									class Datenbank

									{
										
										// Eigenschaften:
										//--------------------------------------------------------------------------------------------------------------------------------------

										private $dbh = null ; 

										

										//Methoden:
										//--------------------------------------------------------------------------------------------------------------------------------------

										//contact Datenbank
										// mit dem Connect wird in Zeile 24 die UTF8 Codierung aufgezwungen. Ohne diesen Zusatz gab es Probleme mit Umlauten und deren Darstellung.
										function dbconnect ()
										{
											try
											{
											$this->dbh = new PDO ( "mysql:host=".HOST."; dbname=".DBNAME.";charset=utf8" , USER , PWD, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'")  ) ;
											}
											
											  catch(PDOException $e){
												echo "Achtung, keine Verbindung zur Datenbank: ". $e->getMessage();
											}
										}

										//--------------------------------------------------------------------------------------------------------------------------------------
										//query mit fetch_assoc
										function dbquery ($sql)
										{
											$this->dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
											try{
												$result = $this->dbh->query ( $sql ) ;
												
											}
											catch (PDOException $e) {
												echo "falsche SQL:";
												print_r($e);
											}

												$ret = $result->fetch(PDO::FETCH_ASSOC);
												return $ret;

										
										}
										
										//--------------------------------------------------------------------------------------------------------------------------------------
										//query ohne fetch_assoc aber mit return
										
										function dbquery_result($sql)
										{
											$this->dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
											try{
												$result = $this->dbh->query ( $sql ) ;
											}
											catch (PDOException $e) {
												echo "falsche SQL:";
												print_r($e);
											}
											

												return $result;

										}
										
										
										//--------------------------------------------------------------------------------------------------------------------------------------
										// reiner Assocc:
										function dbquery_assocc($result)
										{
										$row = $result->fetch(PDO::FETCH_ASSOC);
										

										return $row;

										
										}
										
										//--------------------------------------------------------------------------------------------------------------------------------------
										//query ohne fetch_assoc zur Datenaufhame "INSERT" und ohne return ; 
										function dbqueryinsert($sql)
										{
											$result = $this->dbh->query ( $sql ) ;
										
										}
										
										//--------------------------------------------------------------------------------------------------------------------------------------
										//schließt die Datenbank
										function dbclose ()
										{
												$this->dbhd = null ;
												//echo "
";
												//var_dump ($tmp);
												//echo"
"; } // ------------------------------------------------------------------------------------------------------------ // -----------------Methoden für Pixel_PHP Seite:--------------------------------------------------------------- //-------------------------------------------------------------------------------------------------------------------------------------- // holt die Sprüche aus der Datenbank raus: function spruecheausDB($feld, $seite) { $sprueche =""; $sprueche = $_SESSION["sprueche"]; $this->dbconnect (); while ($feld < $seite){ foreach ($sprueche as $spruchthema){ $sql = "SELECT * FROM sprueche WHERE sp_thema = '$spruchthema' LIMIT $feld,1"; $result = $this->dbquery_result ( $sql ) ; $row = $this->dbquery_assocc($result); } $liste[] = array($row["sp_id"],$row["sp_thema"],$row["sp_text"], $row["sp_autor"]); $feld++; } $this->dbclose (); return $liste; } //-------------------------------------------------------------------------------------------------------------------------------------- // holt 3 bilder mit rand aus der DB: function bilderausDB(){ $bilder = $_SESSION["sprueche"]; $this->dbconnect (); $i = 0; foreach ($bilder as $bildthema){ $sql = "SELECT bild_pfad, bild_name FROM bilder WHERE bild_thema = '$bildthema' order by rand() limit 3"; $result = $this->dbquery_result ( $sql ) ; while ($row = $this->dbquery_assocc($result)) { $bildarray[$i] = ($row); $i++; } } $this->dbclose (); return $bildarray; } //-------------------------------------------------------------------------------------------------------------------------------------- // gibt die Anzahl der Sprüche zurück, die in der Datenbank sind function anzahlspruche() { $this->dbconnect (); $thema = $_SESSION["sprueche"][0]; $sql = "select count(sp_thema) as anzahl from sprueche group by sp_thema having sp_thema = '$thema'"; $anzahlsp = $this->dbquery($sql); $this->dbclose (); return $anzahlsp; } //-------------------------------------------------------------------------------------------------------------------------------------- // holt die inhalte für den Warenkorb aus der DB übergibt diese direkt in die $_SESSION. function warenkorbinhalt () { $anzeigeauswahl =""; $this->dbconnect(); for ($i=0;$i < Count($_SESSION["auswahl"]);$i++) { if (isset ($_SESSION["auswahl"][$i]["sp_id"])) { $ausgabe = $_SESSION["auswahl"][$i]["sp_id"]; //$anzeige = "das ist die Ausgabe, sp_id:". $ausgabe ; $sql = "SELECT * FROM sprueche WHERE sp_id =" . $ausgabe; $result = $this->dbquery_result($sql); //$anzeigearray[$i] = array () ; while ($row = $this->dbquery_assocc($result)) { //$anzeigearray[$i] = ($row); $_SESSION["auswahl"][$i]["sp_thema"] = ($row["sp_thema"]); $_SESSION["auswahl"][$i]["sp_text"] = ($row["sp_text"]); $_SESSION["auswahl"][$i]["sp_autor"] = ($row["sp_autor"]); } } } $this->dbclose(); } //-------------------------------------------------------------------------------------------------------------------------------------- // Aufnahme Spruch in die Datenbank: // mit prepares Statement, damit einer SQL-injection vorgebeugt wird. function spruchaufnahme(){ $thema = "neu"; $text = $_POST["neuspruch"]; $autor = $_POST["neuautor"]; $this->dbconnect (); $sql="insert into sprueche ( sp_thema, sp_text, sp_autor)values (?, ?, ?);"; $prepStmt = ""; $prepStmt = $this->dbh->prepare($sql); $inhalt = array ( $thema,$text,$autor); $prepStmt->execute ( $inhalt ) ; $this->dbclose(); } }

Layoutklasse
							//-------------------------------------------------------------------------------------
							// Gestaltung der Seite:
							
							
								class Layout
								{
								//--------------------------------------------------------------------------------------------------------------------------------------
									// Eigenschaften:
								//--------------------------------------------------------------------------------------------------------------------------------------
									private $rottoene = array("#fdece4","#fbd9c9","#f8c5ae","#f5b093","#f29a79","#ee8360","#eb6b4a","#e85236","#e53527","#e2001a");
									private $gruentoene =array("#ecf5eb","#d7ead7","#c1dfc2","#aad3ac","#90c796","#73bb81","#4faf6c","#0aa459","#009a47","#009036");
									private $blautoene = array("#e9e6f2","#d2cee5","#bcb5d7","#a69dc9","#9085ba","#6666ff","#7a6fac","#655a9f","#4f4794","#38378b");
									private $cyantoene = array("#d5edfa","#d5edfa","#bde4f7","#a2daf4","#84d0f0","#5ec5ed","#1bbbe9","#00b1e6","#00a7e3","#009ee0");
									private $magentatoene = array("#fdeef4","#fadce9","#f7c9dd","#f4b5d0","#f19fc1","#ed87b2","#ea6ea3","#e75294","#e52d87","#e2007a");
									private $yellowtoene = array("#fffdee","#fffbdb","#fff9c7","#fff7b2","#fff59b","#fff381","#fff165","#ffef44","#ffee00","#ffed00");
									private $grautoene = array('#f7f7f7','#ebebeb','#e0e0e0','#ccc','#b4b4b4','#999','#808080','#666','#4d4d4d','#4d4d4d');

									private $farbe = "";
									private $info = "";
									
								// -------------------------------------------------------------------------------------------------------------------------------------
									// Getter/ Setter:
								//--------------------------------------------------------------------------------------------------------------------------------------
									public function getrottoene (){     		//getter rottoene
										return$this->rottoene ;
									}
									public function getgruentoene (){     //getter gruentoene
										return$this->gruentoene ;
									}
									public function getblautoene (){     //getter blautoene
										return$this->blautoene ;
									}
									public function getcyantoene (){     //getter cyantoene
										return$this->cyantoene ;
									}
									public function getmagentatoene (){     //getter magentatoene
										return$this->magentatoene ;
									}
									public function getyellowtoene (){     //getter yellowtoene
										return$this->yellowtoene ;
									}
									public function getgrautoene (){     //getter grautoene
										return$this->grautoene ;
									}

									public function getinfo (){     //getter info
										return$this->info ;
									}
								//--------------------------------------------------------------------------------------------------------------------------------------
									//Methoden:
								//--------------------------------------------------------------------------------------------------------------------------------------
								//--------------------------------------------------------------------------------------------------------------------------------------

									//Farbe des Layouts ändern:
									function farbeaendern (){
										
										foreach(($_SESSION["farbe"])as $ausgabe)
										{
											if ($ausgabe === "rot")
												return $this->farbe = $this->rottoene;
											else if ($ausgabe === "gruen")
												return $this->farbe = $this->gruentoene;
											else if ($ausgabe === "blau")
												return $this->farbe = $this->blautoene;
											else if ($ausgabe === "cyan")
												return $this->farbe = $this->cyantoene;
											else if ($ausgabe === "magenta")
												return $this->farbe = $this->magentatoene;
											else if ($ausgabe === "yellow")
												return $this->farbe = $this->yellowtoene;
										}
									}
									
								//--------------------------------------------------------------------------------------------------------------------------------------
									// gibt Infotext aus:
									function infotext(){
										$this->info .="

Wie in einem Webshop könne hier Sprüche ausgewählt und im 'Warenkorb' angesehen werden. Wer möchte lässt sich von seinen Lieblingssprüchen ein PDF erstellen.

"; return $this->info; } function infotextdanke(){ $this->info .="

Vielen Dank für Ihren Spruch!
"; $this->info .="Der Inhaber dieser Seite behält sich vor, diesen zu prüfen, bevor Inhalte hier gezeigt werden die möglicher Weise nicht im Kontext zu dieser Seite stehen.

"; return $this->info; } //fixiert die Auswahl der ausgewählten Sprüche function auswahfixiert($sp_id){ $fixiert = false; if(isset($_SESSION["auswahl"])){ for ( $i = 0 ; $i < count ($_SESSION["auswahl"]) ; $i++ ){ //foreach($_SESSION["auswahl"] as $x){ if(isset($_SESSION["auswahl"][$i]["sp_id"])){ if($_SESSION["auswahl"][$i]["sp_id"] == $sp_id){ $fixiert = true; break; } } } } return $fixiert; } //-------------------------------------------------------------------------------------------------------------------------------------- // zeigt die Sprüche in den Pixelflächen an: function spruchansicht($liste){ $spruchauswahlclasse = "id ='spruchauswahlfixiert'"; $ansichtfeld0 = ""; $ansichtfeld1 = ""; $ansichtfeld2 = ""; $ansichtfeld3 = ""; $ansichtfeld4 = ""; $ansichtfeld5 = ""; $anisichtalle = array ($ansichtfeld0, $ansichtfeld1, $ansichtfeld2, $ansichtfeld3, $ansichtfeld4, $ansichtfeld5); for ( $i = 0 ; $i < count ( $anisichtalle ) ; $i++ ){ //überprüft, ob alle Positionen in der Liste gefüllt sind ( anzahl der Sprüche nicht durch 6 Teilbar) und blendet den Auswahlknopf aus: if (isset($liste[$i][0])){ //$übergibt die id-nummer an die Variable $id: $id = $liste[$i][0]; // mit Nummer: $anisichtalle [$i] .= "

" . $liste[$i][0] . "

"; $anisichtalle [$i] .= "

"; $anisichtalle [$i] .= $liste[$i][2] . "
"; $anisichtalle [$i] .= "

"; $anisichtalle [$i] .= "

"; $anisichtalle [$i] .= $liste[$i][3] . "

"; if(($this->auswahfixiert($liste[$i][0]) == true)){ $anisichtalle [$i] .= "

"; } else $anisichtalle [$i] .= "

"; //$anisichtalle [$i] .= "

"; } else{ $anisichtalle[$i] = ""; } } return $anisichtalle; } function Spruchthemaanzeige(){ $thema=""; switch ( $_SESSION["sprueche"][0] ) // kein exakt gleich! { case "Weisheiten" : $thema = "Weisheiten:" ; break ; case "Lustige" : $thema = "Spass:" ; break ; case "Mut" : $thema = "Mutmacher:" ; break ; case "Arbeit" : $thema .= "Arbeit:" ; break ; } return $thema; } //-------------------------------------------------------------------------------------------------------------------------------------- // gestaltet den Warenkorb in seiner Anzeige: function anzeigewarenkorb(){ $anzeigeauswahl =""; for ($i=0;$i < Count($_SESSION["auswahl"]);$i++){ if(isset($_SESSION["auswahl"][$i]["sp_id"])){ $anzeigeauswahl .= "
"; $anzeigeauswahl .= ""; $anzeigeauswahl .= ""; $anzeigeauswahl .= "" ; $anzeigeauswahl .= ""; $anzeigeauswahl .= ""; $anzeigeauswahl .= ""; $anzeigeauswahl .= ""; $anzeigeauswahl .= "
" . $_SESSION["auswahl"][$i]['sp_id'] . "" . $_SESSION["auswahl"][$i]['sp_text'] ."" . $_SESSION["auswahl"][$i]['sp_autor'] ."
"; $anzeigeauswahl .= "" ; $anzeigeauswahl .= ""; $anzeigeauswahl .= "
" . "
"; $anzeigeauswahl .= "
"; } } return $anzeigeauswahl; } //-------------------------------------------------------------------------------------------------------------------------------------- // gibt Info, das noch keine Sprüche ausgewählt worden sind function anzeigelehrerwarenkorb(){ $anzeigeauswahl =""; $anzeigeauswahl .= "
"; $anzeigeauswahl .= "

"; $anzeigeauswahl .= "Sie haben noch keine Sprüche ausgewählt!"; $anzeigeauswahl .= "

"; $anzeigeauswahl .= "
"; return $anzeigeauswahl; } //-------------------------------------------------------------------------------------------------------------------------------------- // lehrt den Warenkorb: function warenkorblehren(){ for ( $i = 0 ; $i < count ( $_SESSION["auswahl"]) ; $i++ ){ unset( $_SESSION["auswahl"][$i]["sp_id"]); unset( $_SESSION["auswahl"][$i]["sp_thema"]); unset( $_SESSION["auswahl"][$i]["sp_text"]); unset( $_SESSION["auswahl"][$i]["sp_autor"]); } } //-------------------------------------------------------------------------------------------------------------------------------------- // Methode um einen eingenen Spruch eingeben zu können: function eingabeSpruch(){ $anzeigeSprucheingabe = ""; $anzeigeSprucheingabe .="

"; $anzeigeSprucheingabe .= "Hier können Sie einen eigenen schönen Spruch eintragen:"; $anzeigeSprucheingabe .= "

"; $anzeigeSprucheingabe .= "
"; $anzeigeSprucheingabe .= ""; $anzeigeSprucheingabe .= ""; $anzeigeSprucheingabe .= ""; $anzeigeSprucheingabe .= "
"; return $anzeigeSprucheingabe; } //-------------------------------------------------------------------------------------------------------------------------------------- // nach der Sprucheingabe erscheint der neue Spruch: function neuerSpruch($text,$autor){ $anzeigeSprucheingabe =""; $anzeigeSprucheingabe .="

"; $anzeigeSprucheingabe .= $text . "
"; $anzeigeSprucheingabe .= "

"; $anzeigeSprucheingabe .= "

"; $anzeigeSprucheingabe .= $autor . "
"; //$anzeigeSprucheingabe .= ""; $anzeigeSprucheingabe .= "

"; return $anzeigeSprucheingabe; } }

fpdf Erstellung
								//-----------------------------------------------------------------------------------------------------
								// pdf wird über eine Klasse erstellt:
								
								include("../klassen/fpdf/fpdf.php" ) ; // fpdf wo diese Klasse liegt ist in PHP ini documentiert!
								require("../klassen/Datenbank.ClassPDO.php");
								require("../klassen/LayoutClass.php");
								session_set_cookie_params (0) ;
								session_name("pixelsession") ;
								session_start() ;
								//Nach fertigstellung Aktivieren:
								//error_reporting (0) ; 
								$laynew = new Layout();

								
								function pdferstellenvw()
								{	


									$pdf = new FPDF("P","mm", array(210,297)) ; // neues Objekt erstellen  L oder P legt das Hoch oder Querformat an im Array werden die Dokumentenformate angelegt.
									
									$pdf->AddPage() ; // erstellt neue Seite ein
									
									$pdf->SetFont ( "Arial","B",25 ) ; //gibt die Schriftart an:
									$pdf->SetXY ( 10, 20 ) ;
									// Titel:
									$pdf->Write ( 10 , utf8_decode ("Ihre Sprüche:" )) ; //mit utf8_decode eingeben, damit die umlaute mitkommen
									//Schmucklinie
									$pdf->Line ( 10 , 36 , 180 , 36 ) ; // werte  horizontal, vertikal, horizotal,vertikal
									$pdf->Image('../images/logo_pixelfluesterin_quadrat.jpg',160,-3,50);


									$standtext_x = 40;
									$standautor_x = 0;
									$spruchnr = 1;

									//Diese Schleife zeigt die Sprüche an, die Abstände zwischen den Zeilen und die Nummern 
									//werden in jedem Durchgang um 13mm hochgerechnet:
									for ($i=0;$i < Count($_SESSION["auswahl"]);$i++){

										if(isset($_SESSION["auswahl"][$i]["sp_id"])){

										$text = $_SESSION["auswahl"][$i]["sp_text"];
										$autor = $_SESSION["auswahl"][$i]["sp_autor"];
										$text = utf8_decode($text);
										$autor = utf8_decode($autor);
										
										$pdf->SetXY ( 10, $standtext_x ) ;// Stand X / Y
										$pdf->SetFont ( "Arial" ) ;
										$pdf->SetFontSize ( 9 ) ;
										$pdf->Write ( 10 , ($spruchnr .". " . $text )) ; // texteingabe
										$standautor_x = $standtext_x -16;
										$pdf->SetXY ( 13, $standautor_x) ;
										$pdf->SetFontSize ( 7 ) ;
										$pdf->Write ( 50 , $autor ) ;

										$standtext_x = $standtext_x +13;
										$spruchnr++;
										}
									}
									//Schmucklinie:
									$pdf->Line ( 10 , $standtext_x+5 , 180 , $standtext_x+5 ) ;
									//schlusstext:
									$pdf->SetXY ( 10, $standtext_x +30 ) ;
									$pdf->Write ( 10 , utf8_decode ("Schönen Dank" ) ) ;
									



									
									$pdf->Output("pixelfluesterin_sprueche.pdf" , "D" ) ;  // D oder I  // erst der name der neuen Dataei "I" für fest integrieren D für ausgabe
								}
								
								pdferstellenvw();
								$laynew->warenkorblehren();
								$_SESSION["anzahlsprueche"] = 0;