Loading...   Upload Image

Event-KalenderTutorials » PHP/MySQL Tutorials » Event-Kalender

Verfasst von Alice am 05.09.2009 - wurde schon 24699 mal gelesen

Kategorie: PHP/MySQL
Bewertung:
15x bewertet
Schwierigkeit: mittel
Kommentare: [ 22 ]

Tag - Schlagwort Ajax Tag - Schlagwort PHP Tag - Schlagwort Kalender Tag - Schlagwort Date Tag - Schlagwort Script

Event-Kalender - Tutorial

Im Wishbook wurde der Wunsch nach einem Event-Kalender Script, welches mit Ajax arbeitet, geaeussert,
nun denn here we go ...

Was wird benoetigt?


- PHP / MySql Grundkenntnisse
- 1 MySql Datenbank
- Webspace der PHP unterstuetzt

Wie schauts aus?

- Kalender Darstellung

Administrations-Ansicht
- Uebersicht
- Event Eintragen
- Event Bearbeiten

Step 1 - Datenbank


Als erstes erstellen wir uns eine neue Tabelle, in die wir spaeter die Events eintraegen, in der Datenbank(mit PHPMyAdmin)
CREATE TABLE IF NOT EXISTS `grafixx_events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `date` date NOT NULL,
  `event` text  NOT NULL,
  PRIMARY KEY (`id`)
);


Step 2 - DatenbankVerbindung | config.inc.php


Config.inc.php heisst unsere Datei mit der wir eine Verbindung zur Datenbank herstellen, ohne die geht gar nichts!
Die config.inc.php wird spaeter ueberall eingebunden, wo eine Verbindung zur DB benoetigt wird.
Hier bitte nicht vergessen den MySQL Benutzernamen, das dazugehoerige Passwort und den Namen eurer Datenbank einzutragen!

Step 3 - events.php


Die Datei events.php ist fuer das Erstellen, Bearbeiten und Loeschen der Events zustaendig.
Hier muss bei $grafixx_name und $grafixx_pass der gewuenschte Username und das dazugehoerige Passwort angegeben werden, damit nicht jeder wahrlos Events eintragen kann!
 SQL Injektions
function clean_it($dirty){ 
    
     // Auswirkungen von magic_quotes_gpc zuruecksetzen, wenn ON
    if (get_magic_quotes_gpc()) {
        $clean = mysql_real_escape_string(stripslashes(htmlspecialchars($dirty)));
    }else{
        $clean = mysql_real_escape_string(htmlspecialchars($dirty));
    }

    return $clean;
}

ob_start();	// startet den Ausgabepuffer

?>



	Grafixx LayoutManager
	
	 
	
	
	

	
	



'; $error = "1"; } if($login_name != $grafixx_name OR $login_pass != $grafixx_pass){ // Angaben auf Korrektheit pruefen $message .= 'Zugriff verweigert ...
'; $error = "1"; } if($error != "1"){ // Wenn kein Fehler war // session handle----------------------------- $_SESSION['login'] = $_SERVER['REMOTE_ADDR']; // Session setzen header("Location: $pfad"); // Weiterleiten } if($error == "1"){ // Fehlermeldung ausgeben wenn vorhanden echo "

Error ...

\n

$message

\n"; } } ?>
Grafixx Login


Login } // ---------------------------------------------------------------------- // Event Eintragen/Editieren // ---------------------------------------------------------------------- if($action == 'new' OR $action == 'edit'){ $id = clean_it($_GET['id']); // Variable definieren if(isset($_GET['id'])){ // Sofern ID uebergeben wurde // DB Abfragen $abfrage = mysql_query("SELECT event, DATE_FORMAT(date, '%d') AS tag, DATE_FORMAT(date, '%m') AS monat, DATE_FORMAT(date, '%Y') AS jahr FROM grafixx_events WHERE id = '$id'"); $row = mysql_fetch_array($abfrage); extract($row); } if (isset($_POST['submit'])) { $tag = clean_it($_POST['tag']); $monat = clean_it($_POST['monat']); $jahr = clean_it($_POST['jahr']); $event = clean_it($_POST['event']); if(empty($tag) || empty($monat) || empty($jahr) || empty($event)){ // Pruefen ob alles angegeben echo "

Error...

Bitte danke alles Felder ausfuellen!

\n"; }else{ // Sofern alles angegeben wurde // Zeichen zaehlen => Datum if(strlen($tag) != 2 OR strlen($monat) != 2 OR strlen($jahr) != 4){ echo "

Error...

Bitte danke das Datum im richtigen Format angeben!

\n"; }else{ $datum = $jahr."-".$monat."-".$tag; // Datum zusammenwuefeln if(($_GET['action']) == 'edit'){ // Wenn action == edit $eintragen = mysql_query("UPDATE grafixx_events SET event = '$event', date = '$datum' WHERE id ='$id' "); }else{ // Neuer Eintrag $eintragen = mysql_query("INSERT INTO grafixx_events (event, date) VALUES ('$event','$datum')"); } if($eintragen){ // Sofern Eintrag geklappt hat header("Location: $pfad"); // Weiterleitung }else{ // Wenn Eintrag nicht geklappt hat => Fehlermeldung echo "

Error ...

\n"; echo "

Der Eintrag war leider nicht erfolgreich! ".mysql_error()."

\n
\n"; } } // close Datum korrekt } // close alles angegeben }// close submit ?>
Tag Monat Jahr



Wirklich ...

\n"; echo "

Bist du sicher dass du den Event loeschen moechtest?

\n"; echo "

  Ja  "; echo "    Nein  

\n
"; }else{ // Event loeschen $delete = mysql_query("DELETE FROM events WHERE id='$id'"); if($delete){ // Wenn Loeschung nicht erfolgt header("Location: $pfad"); // Weiterleitung }else{ // Wenn Eintrag nicht geloescht wurde => Fehlermeldung echo "

Error ...

\n"; echo "

Der Eintrag konnte leider nicht geloescht werden! ".mysql_error()."

\n
\n"; } } // close mode } // close action = loeschen // ---------------------------------------------------------------------- // Event auflisten // ---------------------------------------------------------------------- if(!isset($_GET['action'])){ // Sofern keine Aktion => Events Anzeigen echo "

Events

\n"; // DB-Abfrage => Events $abfrage = mysql_query("SELECT id, event, DATE_FORMAT(date, '%d.%m.%Y') AS datum FROM grafixx_events ORDER BY id DESC"); $total = mysql_num_rows($abfrage); // Anzahl Events // Events ausgeben echo "
    \n"; if($total > 1){ // Pruefen ob events vorhanden sind while($row = mysql_fetch_object($abfrage)){ echo "
  • \n"; echo "".$row->id.". ".$row->event."
    \n ".$row->datum."
  • \n"; } }else{ // Keine Events vorhanden echo "
  • Derzeit sind keine Events vorhanden ...
  • "; }// close events vorhanden echo "
\n"; } // close events anzeigen ?>


Step 4 - kalender.php


Die Datei kalender.php enthaelt 3 Funktionen:
- naechsterMonat() blaettert im Kalender einen Monat vor
- vorherigerMonat blaettert im Kalender einen Monat zurueck
- show_calender() gibt den Kalender aus

\n";
	// Monat zurueck blaettern
	echo "«\n ";
	
	// aktuelles Jahr und Monat ausgeben
	echo $monate[$monat]." ".$jahr;
	
	// Monat vor blaettern
	echo " »\n";
	echo "\n";
	
	// Wochen Tage ausgeben
	echo "\n"; 
		echo "Mo\n"; 
		echo "Di\n"; 
		echo "Mi\n"; 
		echo "Do\n"; 
		echo "Fr\n"; 
		echo "Sa\n"; 
		echo "So\n"; 
	echo "\n\n"; 

	// Leere Zellen ausgeben, bis zum ersten Tag des Monats
	for ($j=1; $j < $first; $j++){ 
		echo "\n "; 
	}
	
	if(strlen($monat) == 1){ // Null vorran stellen fuer Monat 1-9
		$sql_m = "0".$monat;
	}else{
		$sql_m = $monat;
	}
	
	// DB-Abfrage => Events des aktuellen Monats
	$abfrage = mysql_query("SELECT id, event, DATE_FORMAT(date, '%d.%m.%Y') AS datum FROM grafixx_events WHERE date BETWEEN '".$jahr."-".$sql_m."-1' AND '".$jahr."-".$sql_m."-31'");
	$total = mysql_num_rows($abfrage); // Anzahl Events
	
	if($total >= 1){ // Pruefen ob events vorhanden sind
		while($row = mysql_fetch_object($abfrage)){ 
			$events["$row->datum"] = "$row->event"; // Array mit Eventdaten fuettern
		}
		
	}// close events vorhanden
	
	for ($i=1; $i <= $last; $i++){ // Tage ausgeben
		
		$x = $wochentage[date("w", mktime(0 , 0, 0, $monat, $i, $jahr))];    // ermitteln des Wochentages
		
		if($total >= 1){ // Pruefen ob Events vorhanden sind
	
			if(strlen($i) == 1){ // Null vorran stellen fuer TAG 1-9
				$sql_i = "0".$i;
			}else{
				$sql_i = $i;
			}
	
			$event_date = $sql_i.".".$sql_m.".".$jahr; 		// aktuelles Datum in Schleife bestimmen 
		
			if(array_key_exists($event_date, $events)){ // Pruefen ob event bei $i vorhanden
				
				$show_event = "".$i."".$events["$event_date"]."\n";
					
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "".$show_event."\n";
				}else{
					echo "".$show_event."\n";
				}	
			}else{
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "".$i."\n";
				}else{
					echo "".$i."\n";
				}		
			}// close event vorhanden
	
		}else{ // Wenn keine Events sind
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "".$i."\n";
				}else{
					echo "".$i."\n";
				}	
		} // close check events
			
	 	if($x == "So"){ // Am Sonntag endet die jeweilige Zeile
			echo "\n\n ";  
	  	}
	} //close Tage ausgeben
	
	echo "\n";
	echo "\n";
	
} // close function show_calender
?>


Step 5 - request.php


Die Datei request.php ist die Datei, welche ueber den Ajax-Request aufgerufen wird, wenn im Kalender einen Monat vor bzw. zurueck geblaettert werden soll.


Wir haben also nun folgende Dateien


- config.inc.php Stellt die Verbindung zur Datenbank her
- events.php ist fuer Eintraegen, Loeschen und Bearbeiten der Events zustaendig
- kalender.php enthaelt mehrere Fuktionen die fuer die Darstellung des Kalenders zustaendig sind
- request.php wird jedesmal beim Ajax-Request aufgerufen, um den Kalender ohne erneutes Laden der kompletten Seite darzustellen

Den Kalender in die eigene Seite einbinden


Um den Kalender nun in die eigene Website einbinden zu koennen, muss in der Datei(es MUSS sich um eine PHP-Datei handeln), folgendes Javascript in den Head-Bereich der Seite, also irgendwo zwischen <head> und </head>, gesteckt werden:
<script type="text/javascript">
function get_Content(wo, was){

var url = "request.php"+was; // Datei die aufgerufen werden soll

var xmlHttp = null;
// Mozilla, Opera, Safari sowie Internet Explorer 7
if (typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) {
// Internet Explorer 6 und älter
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = null;
}
}
}
if (xmlHttp) {
xmlHttp.open('GET', url, true);

xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
myContent = xmlHttp.responseText;
document.getElementById(wo).innerHTML = myContent;
}
};
xmlHttp.send(null);
}
}
</script>


Und an der Stelle wo der Kalender ausgegeben werden soll, folgender Code positioniert werden:


Wichtig!


Hierbei bitte darauf achten, dass die Dateien kalender.php, request.php sowie die config.inc.php sich im selben Ordner befinden muessen, wie die

Datei in welcher der Kalender dargestellt werden soll.
Ansonst muessen saemtlich Pfadangaben in diesen 3 Dateien angepasst werden!


Beispiel:




	Grafixx LayoutManager
	
	 
	
	
	

	
	
	






Das war dann auch schon alles :)

Ach nee, fehlt ja noch die CSS-Angaben fuer den Kalender...

a.tool{ /* for tooltip */
position: relative;
z-index: 24;
}

a.tool:hover{ z-index:25; }

a.tool span{ display: none }

a.tool:hover span{
border: 2px solid #444;
background: #F7F7F7;
display: block;
color: #446FA6;
position: absolute;
top: 2em;
left: 2em;
width: 13em;
padding: 5px;
text-align: center;
}

.vor, .back{
border: 1px solid #ccc;
padding: 0px 5px;
}

.vor{ float: right; }

.back{ float: left; }

#kalender table{
border: 1px solid #ccc;
background: #fff;
text-align: right;
width: 200px;
padding: 5px;
}

#kalender caption{ /* Jahr / Monat */
border: 1px solid #ccc;
background: #F7F8F9;
font-weight: bold;
text-align: center;
padding: 5px;
}
#kalender caption a{
background: #fff;
}

#kalender td{
border: 1px solid #fff;
padding: 0 2px;
}

#kalender th{ /* Wochentage */
color: #446FA6;
}

#kalender .today{ /* aktueller Tag */
border: 1px solid #FE8989;
}

#kalender a{
font-weight: bold;
}


Tutorialdateien herunterladen

Hinweis: Das Tutorial wurde am 12.09.2009 ueberarbeitet, danke Lydia

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...


Neuste Tutorials

Neuste Forenthemen

Neuste Kommentare

Affiliates:   Chibi Graphics  •   Blue-Graphics  •   Pat DG  •   Gallery Yuri  •   Colorful Gfx  •   The Seduction  •   Design Grafixx  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider