Freitag, 27. Juli 2012

php & Co - Dynamische Webseiten

Hinweis August 2012: Dieser Text ist bereits über 10 Jahre alt und nicht mehr in allen Details aktuell. Aus Sentimentalität und weil die Grundsätze noch immer so stimmen, habe ich ihn hier nochmal mit in meinen neuen Blog übernommen.

Mit dieser Seite möchte ich eine kleine Einleitung in die Erstellung dynamischer Webseiten geben. Das Arbeiten mit dynamischen Webseiten ist einfacher als man denkt und effektiver als man sich vielleicht am Anfang vorstellen kann. Der Text wendet sich an alle, die schon selbst mit HTML sowie einer Hochsprache gearbeitet haben und einen ersten Einstieg in die Erstellung dynamischer Webseiten suchen.

Was ist eine Dynamische Webseite ?
Eine Seite ist dynamisch, wenn Teile ihres Inhaltes variabel sind, d.h. automatisch generiert werden und je nach Anforderung austauschbar sind. Eine Seite die häufig neue Inhalte anzeigt (z.B. aktuelle Nachrichten) oder bei der die Inhalte häufig verändert werden (z.B. ein Besucherzähler oder ein "Schwarzes Brett") sollte also dynamisch erzeugt werden. Aber auch für kleinere Anwendungen wie Linkliste, Gästebuch oder Fotogalerie lohnt sich der Einsatz dynamischer Webseiten.

Um die unterschiedlichen darzustellenden Inhalte möglichst flexibel zu handhaben, werden meist Datenbanken eingesetzt. Dies bringt einen weiteren Vorteil mit sich - Änderungen an der Webseite müssen überhaupt nicht mehr im Quellcode der Seite erfolgen, sondern können direkt in der Datenbank vorgenommen werden. Dieses Vorgehen soll im folgenden dargestellt werden.

Wir funktionieren dynamische Webseiten ?
Normale "statische" Webseiten bestehen aus reinem HTML Code. Um solche Seiten zu erstellen, benötigt man nichts weiter als einen Browser und einen HTML- oder Texteditor, also Voraussetzungen die heute jeder Rechner standardmäßig erfüllt. Die HTML Seite kann erstellt und getestet werden, ohne dafür online mit dem Internet verbunden zu sein. Erst bei der Veröffentlichung der Seite wird sie auf den Webserver beim Provider kopiert.

Bei dynamischen Seiten wird der Aufwand schon größer. Da die Browser der Internetsurfer nur "statische" HTML Seiten verstehen, benötigt man zusätzlich (schon bei der Entwicklung) einen Webserver, der die (dynamischen) Inhalte einer Webseite zusammenfügt und eine Datenbank, in der diese Inhalte verwaltet (gespeichert) werden.


Das Bindeglied zwischen Datenbank (als Informationsquelle) und der Ausgabe der HTML Datei (in Richtung Browser) wird in vielen Fällen durch eine (Web-) Serverseitig ablaufende Programmiersprache (Skriptsprache) dargestellt. Mit dieser Skriptsprache geben Sie als Entwickler genau vor, wie die dynamischen Inhalte in die statische HTML Datei zu integrieren sind. Die gängigsten Server- Sktiptsprachen sind heute JSP (Java Server Pages von SUN, auch als Open Source erhältlich), ASP (Active Server Pages von Microsoft), php (PHP: Hypertext Preprocessor ist Open Source) und PERL (ebenfalls Open Source).



Im folgenden soll am Beispiel meiner eigenen Linkverwaltung (siehe "Bookmarks") die Realisierung einer dynamischen Webseite mit zwei unterschiedlichen Skriptsprachen dargestellt werden. Zunächst möchte ich auf den Dienstleister "www.baseportal.de" eingehen, welcher Perl einsetzt und anschließend einen Blick auf PHP werfen, wofür man allerdings eine PHP- und Datenbank- Installation (oft MySql) beim Provider benötigt.


- Aller Anfang ist leicht

BasePortal bietet den Webserver, die Datenbank und als Bindeglied die Programmiersprache Perl komplett als Dienstleistung an. Dynamischen Seiten liegen nicht beim eigenen Provider, sondern auf dem Baseportal Server. Man muss sich lediglich anmelden (Benutzername, Kennwort, Email) und hat Zugriff auf all diese Ressourcen. Die Macher von Baseportal bieten jedoch keinen Webspace für die statischen Inhalte des Webauftritts (z.B. Bilder, Musik). Hier muss man nach wie vor auf einen Provider zurückgreifen (z.B. www.tripod.de - kostenlos).

BasePortal hat viele Vorteile. Zunächst einmal handelt es sich um einen kostenlosen (werbefinanzierten) Dienst. Außerdem gibt es eine sehr einfache Administrationsoberfläche und Assistenten, mit deren Hilfe man bereits einen Großteil der Programmierarbeit dialoggesteuert erledigen kann. Der Haupt- Nachteil besteht darin, dass man während der Entwicklung permanent online sein muss,- die Entwicklung mit Baseportal geht jedoch sehr schnell.

In Baseportal hat man es grundsätzlich mit zwei Dateitypen zu tun. Die Datenbank (gekennzeichnet durch das Zahnrad) und die Skriptdatei (gekennzeichnet durch das Blatt Papier) sind über das Hauptmenü oder per Assistenten jeweils sehr einfach zu erzeugen.


Zunächst sollte mit der Datenbank, bzw. der Definition einer Tabelle begonnen werden. Es ist zu überlegen, wie die Informationen, die später in die HTML Seite eingebaut werden sollen, am besten abgelegt werden. Die Bookmarks- Seite meiner eigenen Homepage soll hierzu als Beispiel dienen.


Nachdem die Datenbank erstellt ist und über das Baseportal Admin Tool "Inhalte / Neu" schon einige Datensätze hinterlegt sind, muss nun noch die Skriptdatei erstellt werden. Auch hierbei ist ein Assistent behilflich, eine Seite mit Hilfe des sehr vielfältig einsetzbaren "DO" Befehls zu erzeugen. Der folgende Quellcode zeigt eine normale HTML Datei, die um nur eine Zeile "DO" ergänzt wurde.


<html>
      <head>
        <title>Walid's Wegweiser</title>
      </head>
      <body>

      <h1 align=center>Walid's Wegweiser</h1>

      <p>Im folgenden bekommt Ihr einen Überblick meiner Lieblings- Links.</p>


        <do action=list db=bookmarks sort=bmnr,menu listfields=link,comment>

      </body>
      </html>
An die Stelle dieser "DO" Zeile setzt der Baseportalserver eine beliebig lange Liste (ACTION=LIST) der Inhalte aus der Tabelle "bookmarks" (db=bookmarks). Er zeigt hierbei nur die Felder "link" und "comment" (listfields=link, comment) an. Die gesamte Liste ist nach den Feldern "bmnr" und "menu" aufsteigend sortiert (sort=bmnr, menu).

Der Aufruf der Seite findet dann über den Aufruf folgender URL statt
http://www.baseportal.de/cgi-bin/baseportal.pl?htx=/vivaldi/smalltest


Das "DO" Kommando von Baseportal bietet über den Einsatz von zusätzlichen Parametern vor allem im Layoutbereich noch wesentlich mehr Möglichkeiten. Als eines von vielen gelungenen Beispielen hierfür kann sicherlich die Seite www.officetipps.net dienen.

Mit dem DO Befehl wird jedoch immer die anzuzeigende Tabelle im Ganzen beeinflußt, was in den aller meisten Fällen auch ausreicht. Möchte man als Programmierer jedoch auf jeden Datensatz der Tabelle einzeln und im Besonderen eingehen, ist auch dies problemlos mit Baseportal möglich.


<html>
    <head>
      <title>Walid's Wegweiser</title>
      <meta name="author" content="Walid Chaar">
    </head>
    <body background="http://www.chaar.de/walid/bookmarks/bg.gif">
      <h1>
        <a href="http://www.baseportal.de"><img src="http://www.chaar.de/walid/bookmarks/palme.gif" width="32" height="32" border="0" alt=""></a>
        Walid's Wegweiser
      </h1>

      <table width='100%' border='0'>

        <!-- ***** Beginn des dynamischen Inhaltes = PERL Code ***** -->
        <loop code=perl db=bookmarks sort=bmnr,menu>

          if ($sichtbar == 1)
          {
            if ($menu == 1)
            {
              out "<tr bgcolor=\"#e0e0e0\">";
              out "  <td colspan=3 valign='center'>";
              out "    <img src='http://www.chaar.de/walid/bookmarks/$icon' border='0' alt=''>";
              out "        <b>$link</b>";
              out "  </td>";
              out "</tr>";
            }else
            {
              out "<tr>";
              out "  <td align='right' width='300'>";
              out "    <a href='http://$link' target='_top'>$link</a>";
              out "  </td>";
              out "  <td>";
              out "    <a href='http://$link' target='NeuFenster$link'><img src='http://www.chaar.de/walid/bookmarks/fenster.gif' width='24' height='24' border='0' alt='Link in neuem Fenster öffnen'></a>";
              out "  </td>";
              out "  <td>";
              out "    $comment";
              out "  </td>";
              out "</tr>";
            }
          }
        </loop>
        <!-- ***** Ende des dynamischen Inhaltes = PERL Code ***** -->
       </table>

    </body>
    </html>
    
Statt eines einzelnen Befehls kommt im Listing ein ganzer Block von Perl Anweisungen ins Spiel. Die Befehle sind eigentlich selbsterklärend, können aber auch mit vielen weiteren Beispielen unter www.baseportal.de nachgeschlagen werden (Viel Spass :-).



- der Open Source Standard

PHP hat Stand heute eine Verbreitung im Internet von ungefähr 20%, d.h jede fünfte Seite im Netz läuft heute schon mit PHP. Und das hat seinen Grund: PHP ist auch sehr einfach ;-).



Auch PHP sollte mit einer Datenbank gekoppelt werden. Hierzu wird meist MySQL verwendet, da es sich ebenfalls um OpenSource handelt und ebenso wie PHP privat und geschäftlich ohne Lizenzgebühren eingesetzt werden kann. Heute unterstützt fast jeder Provider (leider meist gegen Aufpreis) PHP und MySQL. Alternativ bietet aber auch www.tripod.lycos.de PHP und MySQL kostenlos (mit Werbebannern) an.

Um PHP Skripte "offline" entwickeln und testen zu können sollte man einen kleinen Webserver auf seinem PC installieren. Ein kleine Beschreibung von Emilio Paolini zu diesem Thema findet ihr unter www.phpcenter.de/artikel/show.php3?id=15.

Auch zu MySQL gibt es Admin Tools, die die Verwaltung der Datenbank sehr viel einfacher machen. Eines der bekanntesten ist hierbei PHPMyAdmin, welches unter der Adresse www.phpmyadmin.net erhältlich ist. Wenn man ein solches Tool nicht hat, muss die schon weiter oben verwendete Tabelle "bookmarks" durch folgendes SQL Statement erzeugt werden...


#
       # Tabellenstruktur für Tabelle `bookmarks`
       #

       CREATE TABLE bookmarks (
         bmnr varchar(5) NOT NULL,
         link varchar(100) NOT NULL,
         comment longtext NOT NULL,
         icon varchar(20) NOT NULL,
         menu tinyint(4) NOT NULL default '9',
         sichtbar tinyint(4) NOT NULL default '1'
       ) TYPE=MyISAM;

Wenn die Tabelle angelegt ist muss sie nun auch gefüllt werden (SQL INSERT Befehle oder phpMyAdmin).
Das folgende Beispiel zeigt, dass das PHP Skript dem oberen Perl Skript bei Baseportal sehr ähnelt. Kein Wunder, sie erzeugen ja auch exakt die selbe Ausgabe.


<?
         // DB Verbindung herstellen
         $db = mysql_connect("localhost","user","kennwort") or die ("Permission denied");
       ?>


       <html>
       <head>
         <title>Walid's Wegweiser</title>
         <meta name="author" content="Walid Chaar">
       </head>
       <body background="../bg.gif">
         <h1>
           <img src="palme.gif" width="32" height="32" border="0" alt="">
           Walid's Wegweiser
         </h1>

         <table width='100%' border='0'>

           <?

             // Zaehler um fuer jeden Link ein neues Fenster zu oeffnen
             $z=0;

             $result = mysql_query ("select * from walid.bookmarks order by bmnr, menu ASC");

             while ($row = mysql_fetch_array ($result))
             {
               if($row["sichtbar"]=='1')
               { // Parameter über den Seiten kurzfristig ausgeblendet werden können
                 if($row["menu"]=='9')
                 {
                     printf("                  <tr>");
                     printf("                    <td align='right' width='300'>");
                     printf("                      <a href='http://%s' target='_top'>%s</a>", $row["link"], $row["link"] );
                     printf("                    </td>");
                     printf("                    <td>");
                     printf("                      <a href='http://%s' target='NeuFenster%s'><img src='fenster.gif' width='24' height='24' border='0' alt='Link in neuem Fenster öffnen'></a>", $row["link"], $z);
                     printf("                    </td>");
                     printf("                    <td>");
                     printf("                      %s", $row["comment"] );
                     printf("                    </td>");
                     printf("                  </tr>");
                 } else {
                     $size = GetImageSize($row["icon"]);    // ICON Größe wird ausgelesen
                     printf("                  <tr>");
                     printf("                    <td bgcolor=#DEDFDE" colspan=3>");
                     printf("                     <font ".$itd_font_m.">");
                     printf("                       <img src='%s' %s border='0' alt=''>", $row["icon"], $size[3]);
                     printf("                       ".str_repeat(' ', 20+2*$row["menu"])."<b>".$row["link"]."</b>");
                     printf("                     </font>");
                     printf("                    </td>");
                     printf("                  </tr>");
                 }
               }
             $z++;
             }
          ?>

         </table>

       </body>
       </html>
       <?
          mysql_close( $db );
       ?>

    

So, das ist eigentlich schon alles was ich noch zu PHP sagen wollte. Das WEB ist voll von Infos, Anleitungen und Beispielskripten zu PHP und MySQL.

Viel Spass beim Tüfteln und Ausprobieren :)


Bildquellenangabe © :2 mal Walid Chaar  / chaar.de
Baseportal Logo & 2 Screenshots / baseportal.de
php Logo / php.net

Keine Kommentare:

Kommentar veröffentlichen