phpBuddy.eu - Dynamische Webseite mit suchmaschinenfreundlichen URLs

Dynamische Webseite mit suchmaschinenfreundlichen URLs

Beitragsseiten
Dynamische Webseite mit suchmaschinenfreundlichen URLs
Planung und Vorbereitung (1)
Planung und Vorbereitung (2)
Listings und Funktionen
Index Datei und Fazit
Alle Seiten

Seite 1 von 5

Dynamische Webseite mit suchmaschinenfreundlichen URLs

Früher oder später möchte jeder Jungprogrammierer sein erworbenes PHP Wissen nicht mehr nur für das Erstellen von kleinen Scripts gebrauchen, sondern der Wunsch nach einer eigenen, datenbeankgestützten Webseite wird immer stärker. Obwohl dieses Vorhaben vergleichsweise einfach ist, stellt es dennoch viele Einsteiger vor Probleme. Dieses Tutorial möchte dabei helfen das Prinzip der Erstellung von datenbankgestützten Webseiten zu verstehen. In diesem Tutorial lernen wir:

Wie die Struktur der Tabellen in der Datenbank aussehen muß
Wie man das Hauptmenü aus der Datenbank generiert
Wie man die richtige Seite aus der Datenbank lädt
Wie man die Seiten suchmaschinenfreundlicher gestaltet durch:
- dynamische Seitentitel
- dynamische Keywords
- dynamische Seitenbeschreibung
Wie man suchmaschinenfreundliche Links erzeugt und damit arbeitet

Das im Verlauf des Tutorial gezeigte Verfahren stellt lediglich die einfachste Form einer dynamischen Webseite dar, was aber vollkommen ausreichend ist für kleinere Webauftritte.

Voraussetzungen

Um diesem Tutorial folgen zu können sollten einige Voraussetzungen erfüllt sein:

PHP 5
MySQL 4.1 oder höher (optimal 5.x oder höher)
Fundiertes Grundlagenwissen im Umgang mit PHP, MySQL und (X)HTML
Webserver der mod_rewrite unterstützt
... und natürlich Lernbereitschaft

Es wird in diesem Tutorials natürlich mit Datenbankverbindungen und Funktionen gearbeitet. Da ein ausführliches Erklären dieser Dinge den Rahmen des Tutorials sprengen würde wird vorausgesetzt, dass jeder Leser diese Dinge bereits beherrscht.

Die statische Ausgangsseite

Schauen wir uns zunächst einmal den Quelltext unserer statischen Beispieldatei an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamische Webseite Tutorial</title>
<meta name="keywords" content="Zoohandlung, Hunde, Katzen, Welpen, Hamster, Kleintiere" />
<meta name="description" content="Zoohandlung Max Mustermann GmbH - Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
<meta name="author" content="Max Mustermann" />
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
</head>
 
<body>
<div id="frame">
    <div id="header">
        <h1>Dynamische Webseite Tutorial</h1>
    </div><!-- Ende header -->
 
    <div id="main">
        <div id="navi">
            <ul>
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Rassehunde</a></li>
                <li><a href="#">Zuchtkatzen</a></li>
                <li><a href="#">Kleintiere &amp; Nager</a></li>
                <li><a href="#">Kontakt und Impressum</a></li>
            </ul>
        </div><!-- Ende navi -->
 
        <div id="content">
            <h3>Willkommen auf der Startseite</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu nunc eu sapien blandit accumsan. Donec et nisl. Vestibulum tincidunt. Sed hendrerit ante non neque accumsan facilisis. Nunc ac leo in nulla fringilla euismod. In interdum eleifend tortor. Aliquam scelerisque, enim eget sodales convallis, tellus massa pellentesque nibh, eu aliquet nulla orci at odio. Mauris pede risus, egestas a, consequat pharetra, malesuada ut, ipsum. Sed sed risus et augue dignissim sagittis. Aliquam malesuada imperdiet ipsum. Nullam a mauris vel risus semper commodo. Morbi mattis, nisl ac rhoncus commodo, nunc eros luctus nisi, vel bibendum lacus nisl non nunc. Cras auctor imperdiet magna. Donec tempus, neque nec lobortis luctus, dolor massa rhoncus quam, eu eleifend ligula nisi tristique velit.</p>
            <p>Praesent scelerisque orci vel elit. Duis nec sapien a lectus accumsan fringilla. Aliquam tempor iaculis dui. Integer malesuada. Vivamus eu tortor at nisi sodales consectetuer. Fusce ac pede non sapien consectetuer bibendum. Aliquam lacus massa, semper at, pellentesque non, pharetra vitae, purus. Nunc lobortis lacinia est. Phasellus facilisis consequat ligula. Cras eu lacus eu lorem ultricies viverra. Etiam pulvinar luctus pede. Vestibulum in pede in turpis porta fringilla. Cras porttitor, tellus eu mattis elementum, mi sapien iaculis felis, in posuere dui nisl viverra massa. Vestibulum pretium ligula. Morbi pretium lectus in tellus. Nunc eget magna non magna ullamcorper consectetuer. Nulla sagittis felis. Nullam lobortis vulputate augue.</p>
            <p>Praesent ullamcorper orci. Integer bibendum eros et ante tristique varius. Vestibulum dignissim ipsum non eros. Cras pretium venenatis tellus. Nulla volutpat turpis sagittis justo. Mauris erat. Sed tincidunt faucibus turpis. Nulla libero lacus, semper accumsan, laoreet id, venenatis ultricies, purus. Morbi tempus, tellus non pulvinar consectetuer, diam elit commodo lorem, in feugiat nisi arcu a nunc. Suspendisse non diam. Nunc non risus. Mauris lacinia euismod sem. Nulla pretium. Morbi posuere orci et purus. Sed sed enim.</p>
        </div><!-- Ende content -->
    </div><!-- Ende main -->
 
    <div id="footer">
        <p>Dynamische Webseite Tutorial &middot; <a href="http://www.phpbuddy.eu/">phpBuddy.eu</a> &copy; 2008</p>
    </div><!-- Ende footer -->
 
</div><!-- Ende frame -->
</body>
</html>

Wie wir sehen ist das nichts weiter als unspektakuläres HTML. Hier die live Demo der Seite, damit man weiß wie das Ganze aussieht. Die Links sind hier nur Platzhalter und würden normalerweise zu den einzelnen Seiten leiten.
Die Nachteile einer statischen Seite sind hinlänglich bekannt und müssen nicht bis in's kleinste Detail erörtert werden. Zwei wichtige Hauptgründe sind aber, dass man für jede Seite ein komplett neues Dokument benötigt und, sollte man etwas am Layout ändern wollen, müssen diese Änderungen an allen Dokumenten durchgeführt werden.

Durch das "Dynamisieren" reduzieren wir die Anzahl der Dokumente auf Eins, was uns bei späteren Änderungen viel Zeit und Arbeit sparen kann. Benutzen wir doch dieses HTML Dokument als Grundlage für dieses Tutorial.
Wir löschen zunächst alle statischen Elemente aus dem HTML Dokument und speichern es dann als PHP unter dem Namen index_dynamisch.php ab. Hier das ausgedünnte Listing der index_dynamisch.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
</head>
 
<body>
<div id="frame">
    <div id="header">
        <h1>Dynamische Webseite Tutorial</h1>
    </div><!-- Ende header -->
 
    <div id="main">
        <div id="navi">
            <ul>
 
            </ul>
        </div><!-- Ende navi -->
 
        <div id="content">
 
        </div><!-- Ende content -->
    </div><!-- Ende main -->
 
    <div id="footer">
        <p>Dynamische Webseite Tutorial &middot; <a href="http://www.phpbuddy.eu/">phpBuddy.eu</a> &copy; <?php echo date( 'Y' ); ?></p>
    </div><!-- Ende footer -->
 
</div><!-- Ende frame -->
</body>
</html>

Was über bleibt ist mehr oder weniger das nackte HTML Gerüst ohne Inhalte.

Zurück - Weiter >>

phpBuddy

Code-Schnipsel

Dynamische Webseite mit suchmaschinenfreundlichen URLs

Voraussetzungen

Die statische Ausgangsseite

Tutorial Übersicht

Quicklinks (extern)

Kontakt

Interessante externe Links

Die beliebtesten Artikel

Die aktuellsten Artikel