Aber was habe ich in der Woche geschafft? Nunja, es ist ein wenig mehr geworden, als ich ursprünglich gedacht habe. So ist habe ich bereits ein funktionierendes FrontEnd sowie BackEnd geschrieben. Im FrontEnd existiert eine News-Funktion sowie einige Unterseiten. Dies kann alles aus dem Backend gesteuert werden. So verfasst man im BackEnd eine News und auf die Startseite wird sie dargestellt. Das Projekt umfasst bereits jetzt 49 Dateien.

Das es so “viele” sind hat einen einfachen Grund: Ich habe mir ein Template-System überlegt. Das Template-System sorgt für eine Trennung von PhP und HTML. Wie das funktioniert erkläre ich hier mal genauer:

Man hat z.B. eine News in der MySQL-DB stehen. Diese liest man mittels eines PhP-Scriptes aus. Die Ausgabe der News übernimmt ein HTML-Script welches von dem PhP-Script geladen und wie PhP-Code behandelt wird. Der Vorteil davon ist, dass man Layout-Technisch das selbe Template bei verschiedenen PhP-Scripten verwenden kann. Der Code dafür sieht folgendermaßen aus:

function gettemplate($temp_name){
		return str_replace('"', "'", file_get_contents('module/templates/'.$temp_name.'.html'));
	}

Um das Template nun aufzurufen müssen wir nur noch die Funktion richtig aufrufen:

eval ("\$news = \"".gettemplate("news")."\";");
			echo $news;

Damit wird dann das HTML-Script geladen, die Variablen werden gesetzt und dann ausgegeben.

Darüber hinaus habe ich natürlich eine functions.php erstellt. In dieser stehen die allgemeinen Funktionen drin, die man benötigt, um z.B. auf bestimmte Spalten oder Tabellen in der MySQL-DB zuzugreifen oder um öfter wiederkehrende Prozesse umzusetzen. Meist ist es einfacher sowie Platzsparender, wenn man mit Funktionen arbeitet, da man sie immer wieder in einem Script brauch. Da muss man nur die Funktion aufrufen und nicht jedes mal den Inhalt der Funktion komplett in dem Script neu tippen.

Wenn ihr euch das ProjektCMS mal ansehen möchtet, könnt ihr das unter folgendem Link: ProjektCMS

So, das wars es vorerst, ich denke jedoch, dass ich im Laufe der Woche noch das ein oder andere schreiben werde. Spätestens jedoch kommenden Freitag (diesmal auch wirklich Freitag )

Was die beiden Spiel-Designs angeht:

Das eine wird als Download für die breitere Masse zur Verfügung stehen. Wo genau es im fertigen Zustand downloadbar sein wird, wird zu gegebener Zeit bekannt gegeben. Das andere wird ein privates Design werden,w as nicht weiter veröffentlich wird. Damit wird bloß angegeben

Aber Schritt für Schritt:

Zuerst habe ich das Design entworfen, da ich ungern an einem CMS entwickel, ohne etwas zu haben, woran ich mich orientieren kann. Dabei muss man jedoch beachten, dass man bei der Entwicklung das Design nicht in die Entwicklung mit einbezieht. Das hat den Grund, dass man ja auch andere Designs unterstützen möchte und da sollte man das CMS unabhängig vom Desing entwickeln.

Aber hier erstmal ein Bild vom Design:

Dieses Design habe ich auch schon in seiner Grundform umgesetzt und wie ich das gemacht habe, erkläre ich nun genauer:

Zunächst erstmal mussten wir das Design slicen (wie dsa funktioniert erkläre ich hier nicht! Dafür gibt es genügend Videos auf Youtube . Hat man das erledigt erstellt man sich in seinem Hauptverzeichnis (dort, wo das CMS entwickelt werden soll) einen neuen Ordner namens “images”. In diesen Ordner packt ihr dann die einzelenen durch slicen entstandenen Bild rein.

Dann erstellen wir eine “index.php” und eine “stylesheet.css”.

In der “index.php” liegt eine Standart-Formatierung vor sowie der Aufbau des Designs von oben nach unten, mittels den div-Containern. Mehr brauch man da glaub ich nicht erklären, bei Fragen, einfach einen Kommentar verfassen oder mir eine Email schreiben.

Die “stylesheet.css” ist da schon deutlich interssanter. Dort findet die ganze “Action” statt Zunächst erstmal sagen wir im body, wie der Background aussehen soll und sorgen dafür, dass das Design Bündig am oberen Rand des Browsers anfängt.Danach legen wir die jeweiligen Hintergrundbilder für die einzelenen Bereiche des Designs fest. Das ist bisher nicht viel, aber man schon ein Design auf die Beine gestellt! Es kann noch nichts, aber es sieht schonma nach einem Anfang aus

Das wars auch schon vom ersten Dev-Update. Kommen wir zur Vorschau, was bis nächsten Freitag so alles gemacht werden soll:

1. functions.php – Wir brauchen funktionene, und da werden direkt zu Beginn die ersten erstellt
2. settings.php – In der Settings.php behandeln wir die Einstellungen unserer Seite, wie z.B. der Titel usw.
3. BackEnd-Design – Wir haben bisher das Design vom FrontEnd aber wir brauchen eins für das BackEnd

Das ist bis jetzt geplant, aber ich denke, wenn ich dann dabei bin, wird noch einiges mehr dazu kommen

Ich habe mich entschloßen ein neues Projekt zu starten und zwar werde ich ein CMS selber entwickeln. Dabei soll die komplette Entwicklung hier auf der Seite dokumentiert werden, sodass jeder etwas davon hat . Zur Zeit befinde ich mich noch in der Planungsphase, aber was ist geplant? Gehe ich mit dem CMS in Richtung Clan-CMS, d.h. größtenteils ein Forum mit einem Raidplaner usw. oder mache ich ein neues Blog-CMS oder was ganz was anderes?

Was es sein wird, soll jeder Nutzer letztendlich selbst entscheiden können. Das CMS wird komplett Modular aufgebaut, das heisst, man hat ein Grundsystem und dann lädt man sich Module nach und installiert diese. Will man z.B. ein Forum bei sich auf der Web-Präsenz haben, dann lädt und installiert man sich das Modul “Forum”. Will man eine Gallerie haben, installiert man sich das Modul “Gallerie”.Das ist im Groben der Plan. Derzeit plane ich im einzelnen, wie ich das ganze umsetze, wie stark ich auf Objektorientierte Programmierung mittels PhP setze, welchen Umfang das Grundsystem haben wird usw. Nebenher entwerfe ich erste mögliche Oberflächen für das Frontend bzw. Backend (ich arbeite ungern ohne ein Design ). Über den genauen Entwicklungs-Stand wird hier natürlich informiert, dazu werde ich wöchentlich (immer Freitags)  einen Artikel verfassen, der den entsprechenden Entwicklungsstand entspricht.

Desweiteren bin ich derzeit noch auf der Suche nach einem schönen Namen für das Projekt, falls also irgendjemand eine nette Idee hat, so darf er sie mir gerne mitteilene

Ich hoffe, euch dabei dann auch noch die Entwicklung mit PhP, MySQL, Javascript, CSS sowie HTML etwas näher zu bringen.

Im Moment habe ich leider nicht soviel Zeit, um viel an der Seite zu machen, daher liegt es zur Zeit ein wenig brach. Das wird sich jedoch ändern, sobald ich wieder die Zeit dazu finde, hier ordentlich zu posten.

Desweiteren arbeite ich mich derzeit in ein neues Feld der Programmierung ein, genauer gesagt in C# in Verbindung mit der App-Programmierung für Windows Phone. Sollte es weiterhin so laufen, wie bisher, wird die Seite ein kleines Update erhalten und C# ebenfalls in ihr Repetoir aufnehmen. Man kann also gespannt sein.

Dieses mal wollen wir uns mal ein wenig mit CSS auseinander setzen.

CSS gehört in Sachen Webdesign zu den Grundlagen und erlaubt sehr viele Möglichkeiten, um ein Design zu erstellen bzw. einzustellen. In der Regel werden die CSS-Anweisungen in einer seperaten CSS-Datei hinterlegt und werden dann in der index.php/index.html eingebunden. Das funktioniert mit folgenden Stück Code:

<link rel="stylesheet" type="text/css" href="styles.css" />

Aber das einbinden von CSS-Dateien soll uns heute nicht beschäftigen. Wir beschäftigen uns heute mit den ID’s und Klassen, die uns in CSS zur Verfügung stehen. Aber was sind die ID’s und die Klassen? Wofür benötige ich diese?

Es ist eigentlich leicht und schnell erklärt: Über die ID’s und die Klassen kann CSS einzelne Elemente ansprechen. So spricht folgender Code:

#sample{
   height: 100px;
   width: 200px;
   color: #999999;
}
#sample .samp{
   color: #e50000;
}

Nur Elemente an, die in dem Eltern-Element mit der id=”sample” liegen. Darüber hinaus spricht dieser code gezielt die class=”samp”  an, aber nur, solang das Element mit der Klasse “samp” in dem Eltern-Element mit der id=”sample” liegt. Als kleines Beispiel dient folgender Code:

<div id="sample"><!--Die ID, das Eltern-Element der Klasse-->
   <div class="samp"><!--Die Klasse-->
      Rote Schrift
   </div>
   Graue Schrift
</div>
Schwarze Schrift

Jetzt haben wir ein Beispiel aber ich erkläre nochmal im einzelnen, wie man classes und id’s in CSS anspricht.

Mit folgender Schreibweise spricht man eine id mit dem Namen “sample” an:

#sample{
   ...
}

Mit dieser Schreibweise spricht man eine class mit dem Namen “samp” an, die innerhalb eines Eltern-Elementes mit der id “sample” liegt:

#sample .samp{
   ...
}

Darüber hinaus kann man spezielle Elemente in einem Element ansprechen (egal ob class oder id):

#sample .samp a{
   ...
}

Damit sprechen wir alle Links innerhalb der Klasse “samp” an. Das geht natürlich auch Seiten-weit. So können wir mit folgenden Code:

a{
   color: #e50000;
}

Alle Links der Seite Rot färben.

Das sind, wie der Titel schon sagt, nur Grundlagen, die man beherschen sollte

Dabei wird geklärt, wo man sie benutzt, wann man welche benutzen und worauf man sonst noch so achten sollte.

Den Anfang machen wir mit “$_GET['sample']“:

Mittels $_GET können wir Variablen übergeben. Das ganze passiert über die URL. So würde “$_GET['sample']” bei diesem Beispiel: “http://www.meinblog.eu/index.php?sample=hallo” den Wert “hallo” haben. Auf diese Weise kann man nun verschiedene Variablen übergeben. Nützlich ist das vor allem, wenn man z.B. die Seitenzahl übergeben möchte. Ein Nutzer kann so z.B. dann manuell zu einer gewünschten Seitanzahl wechseln. Gleichzeitig ist diese Einflussnahme eine Nutzers auch eine der stärksten Schwachstellen von der $_GET-Funktion. So kann ein potenzieller Angreifer, dort einfach code einschleusen, der dann ausgeführt wird. Daher ist es ratsam, diese Variablen stets genau zu überprüfen (Anm.: mysql_real_escape_string()).

Kommen wir zu “$_POST['sample']“:

POST funktioniert sehr ähnlich wie GET, jedoch gibt es markante Unterschiede. Mit POST übermittelte Daten werden NICHT an die URL angehängt. Sie werden mit dem HTTP-Request-body übergeben. Die POST-Funktion bietet sich für Formulare an, die man auswerten möchte. Zu beachten ist auch, dass man mit POST Dateien uploaden kann, mit GET jedoch nicht.

Doch wann benutzt man was?

Als Faust-Formel kann man sich folgendes merken: GET kann man nutzen um sich etwas vom Server zu holen und POST um ihm etwas zu schicken.

Natürlich ist das so nicht allgemeingültig, jedoch sollte man es z.B. vermeiden Anweisungen, die Änderungen vornehmen via GET zu übermitteln, da diese sehr leicht manipuliert werden können und somit ein Fehler oder schlimmeres Produzieren können. Ein Vorteil von GET ist jedoch, dass man z.B. Unterseiten, die man mittels GET erreicht hat Bookmarken kann. Das geht mit POST nicht. Post sollte man hingegen bei Formularen verwenden. Wenn man nun ein Formular nach diesem Muster:

     <form action="auswerten.php" method="post">
            <input type="text" name="username" value="Hier Username angeben" />
            <input type="text" name="email" value="Hier Email angeben" />
            <input type="submit" name="submit" value="Speichern" />
            <input type="reset" value="Abbrechen" />
     </form>

erstellt, so kann man in einem Auswertungsscript gezielt einzelne Punkte ansprechen bzw. auslesen. Das könnte dann so aussehen (auswerten.php):

 if(isset($_POST['submit'])){
$username = mysql_real_escape_string($_POST['username']);
$email = mysql_real_escape_string($_POST['email']);
/*weitere Anweisungen, um z.b. die Daten hochzuladen*/
}

Wichtig: Egal ob ihr nun GET oder POST verwendet, überprüft stets, ob die Eingabe korrekt ist. Leider gibt es viele Leute im Internet, die sich einen Spaß daraus machen, die Arbeit anderer zunicht zu machen. So kann eine nicht überpüfte GET-Variable dazu missbraucht werden, um z.B. eure MySQL-Datenbank zu löschen.

Das macht man mit php und der schönen Funktion “include()”.

Aber fangen wir vorne an. Zunächst benötigen wir eine index.php, in der auch das Design vorhanden ist (Ob es auch geladen wird, oder ob es darin hardcoded ist, ist jetzt erstmal egal). Die index.php ist bei sehr vielen Programmierern sehr ähnlich aufgebaut. Man hat einen Head-Bereich und einen Body-Bereich. Darin sind dann die Informationen zu dem Design, Meta-Informationen usw. zu finden. Diese Interessieren uns jedoch nicht. Uns interessiert die Stelle, an der der Inhalt geladen werden soll.

Wie oben schon erwähnt machen wir das hier mit “include()”. Aber nicht nur, wir benötigen auch noch eine eine GET-Funktion und eine If-Bedingung.

Am Kopf der index.php schreiben wir nun folgendes hin:

    if(isset($_GET['site'])){
        $site = $_GET['site'];
    }

Mit dieser Zeile Code überprüfen wir, ob ein Link mit dem Schema http://www.example.com/index.php?site=meinblog aufgerufen wurd. Wenn ja dann definieren wir “$site” als den Wert hinter dem Gleichheitszeichen.

Kommen wir zum eigentlich interessanten Teil:

     if(isset($site)){
         if(file_exists($site.'.php')){
              include($site.'.php');
         }else{
              print 'Tut uns Leid, die von ihnen angegebene Datei existiert nicht!';
         }
     }else{
         include('news.php');
     }

Hier überprüfen wir, ob und wenn ja welche Seite als Inhalt angefordert wird. Zunächst erstmal fragen wir mittels der If-Bedingung ab, ob im Link ein entsprechender Verweis zu einem Script vorhanden ist. Wenn nicht, soll die Standart-Startseite geladen werden. In diesem Fall nennen wir sie news.php, sie kann aber auch anders heißen.

Ist jedoch ein spezielles Script gefordert, überprüfen wir, ob die Datei überhaupt existiert. Existiert sie nicht, geben wir eine Fehlermeldung aus. Existiert sie, wird sie geladen.

So kann man dann den Inhalt einer Seite neu laden, ohne, dass in jeder Datei, die Inhalt enthält, das Design vorhanden ist.

Die Verbindung zu einer solchen Datenbank ist mittels PhP sehr einfach zu bewerkstelligen. Dazu reichen ein paar Zeilen Code und schon ist man mitten drin.

	$host="localhost";
	$user="root";
	$pass="";
	$database="meinblog";
	$dz=mysql_connect($host, $user, $pass);
	mysql_select_db($database, $dz);

Das wäre auch schon der gesamte Code, um eine Verbindung zu Datenbank herzustellen. Aber schauen wir uns den Code mal etwas genauer an.

Zu Beginn definieren wir uns erstmal 4 Variablen. Das muss man nicht machen, man kann auch alles direkt in die MySQL-Anweisungen schreiben, jedoch ist das mal wieder ein wenig unübersichtlich. Daher die Variablen. Ich gehe bei dem Beispiel-Code von einer Lokal installierten Server-Version (z.B. Xampp) aus. Da ist in der Regel der Host = localhost, der Benutzer = root und er hat kein Passwort. Fehlt nur noch der Datenbank-Name. Bei einer Lokal Server-Version kann man in aller Regel sich die Datenbanken selbst erstellen, jedoch ist das bei gemieteten Webservern nicht immer so einfach. Meist muss man dort eine MySQL-Datenbank erstmal anfordern und dann bekommt man den Namen vorgegeben.

Da ich aber hier mit einem Beispiel arbeite, habe ich mich für den Datenbank-Namen “meinblog” entschieden.

Nachdem wir die Variablen definiert haben, müssen wir noch eine Verbindung aufbauen. Das machen wir, indem wir zunächst eine weitere Variable deklarieren, in der eine Verbindung zur MySQL-Datenbank hergestellt wird. Um diese Verbindung herzustellen benötigen wir einmal die Host-Adresse, den Usernamen und das Passwort. Dann haben wir zwar eine Verbindung zu dem Server, aber unser Script weiss noch nicht, in welcher Datenbank wir operieren wollen. Daher müssen wir erst eine auswählen. Dafür benötigen wir den Namen der Datenbank und die Verbindung zum MySQL-Server auf dem die Datenbank zu finden ist.

Daher haben wir auch vorher die Server-Verbindung in eine Variable geschrieben. Wie immer gilt, man kann das auch alles in eine Zeile Schreiben, aber es ist dann nicht sonderlich übersichtlich und dann schleichen sich leicht Fehler ein.

Diese 6 Zeilen Code schreibt man nun in eine Datei und nennt sie z.B. mysql.php. Nun muss man sie nur noch includen und fertig.

Tipp: Includet die mysql.php immer am Kopf der index.php, dann können alle Dateien, die ihr in der Index.php ausführt auf die MySQL-Datenbank zugreifen.

meinblog.eu geht ans Netz! Ab sofort steht die Seite 24/7 online und versucht euch zu helfen. Ob nun durch Tutorials, Beantwortung von Programmiertechnischen Fragen oder durch die Bereitstellung von kostenlosen Website-Designs.

Da die Seite gerade erst anläuft, bitte ich es zu entschuldigen, dass ich noch nicht allzuviele Tutorials etc. habe. Aber das wird sich in den kommenden Tagen legen.

Und nun viel Spaß mit meiner Seite