Rainer Feike IT Berater

Seit 15 Jahren Freelancer / Freiberufler in der EDV um München. Speziell C/C++, JAVA, PHP, Bank, Wertpapier. Projekt Profil.

Wie entwickle ich eine Drupal Webseite - Teil 1

Drupal Association Member - Batch

Diese Reihe beschäftigt sich mit den notwendigen Arbeitsschritten zur Entwicklung einer Website (i.F. "Site") mit Hilfe des Content Management Systems (CMS) Drupal in version 6.x. Anhand meines Projekts "EQUIRA" zeige ich Schritt für Schritt die Entwicklung des Systems bis zur Inbetriebnahme auf einem Hetzner Root-Server.

Drupal Design und Themeing

Meistens gibt der Kunde ein Design vor. Unter dem Design einer Webseite versteht man die grafische Gestaltung "im weitesten Sinne". In den seltensten Fällen dürfte die Vorgabe alle Seiten der Site enthalten, im Detail, und insbesondere in den dynamischen Bereichen besteht immer Spielraum für Abweichungen.

Praktisch immer kommt das Design von einem Designstudio in Form von PaintShopPro Grafiken. Hieraus ein funktionsfähiges - und grafisch soweit wie möglich identisches - Theme zu bauen ist Inhalt der ersten Aufgabe.

In diesem Beispiel ist folgendes Design vorgegeben:
Designvorgabe für ein Drupal Themeing

Dazu noch folgende Nebenbedingungen:

  • Keine Tables verwenden.
  • Content muss im Browser auf Breite 980px zentriert werden. Natürlich soll aber das ganze Browserfenster schwarz sein und die horizontalen Separatoren über die ganze Breite laufen.
  • MainContent Markup muss vor dem Spaltencontent stehen (SEO Cond.)

Design in Regions zerlegen

Ein Drupal Theme definiert "Regions". Hierunter versteht die Engine einzeln ansteuerbare Bereiche des Designs, z.B. können Blöcke über die Adminoberfläche in bestimmte Regions konfiguriert werden. Manchmal bezeichnet man diese Darstellung in Bereichen auch als Mockup oder Wireframe.

Das vorgegebene Design legt folgende Aufteilung in Regions nahe:
Drupal Themeing - Aufteilung in Regions

Das Theme anlegen

Wenn die Grundlagen durchdacht sind, ist es Zeit das Theme anzulegen. Die Basisinstallation von Drupal ist sehr einfach. Paket Drupal 6.x hier runterladen und im Webspace (z.B. /srv/www/htdocs bei SuSE oder /var/www bei Debian) auspacken. Mein Theme wird "equira" heißen und auf der Adresse "www.equira.com" laufen.

Grundsätzlich wird Drupal im Verzeichnis "sites" (ab jetzt sind alle Pfadangaben relativ zum Webspace zu verstehen, hier also z.B. /var/www/sites) an eigene Bedürfnisse angepasst. Man kann sein Theme zwar auch einfach ins Verzeichnis "themes" packen, bekommt dann aber bei Core Upgrades größere Probleme. Ich erstelle also mein Theme in "sites/www.equira.com/themes/equira" (sites/all/themes/equira ginge auch, dann wird es allerdings bei Multisite Betrieb auf dem Server schwierig). Im Verzeichnis equira erstelle ich nun die für ein Theme minimal notwendigen Dateien equira.info und page.tpl.php.

equira.info - das Info File des Themes

Das *.info File eines Themes teilt der Drupal Engine grundlegende Fähigkeiten und Eigenschaften des Themes mit, auch Vererbungen und ganze Theme Hierarchien sind möglich. Die ganzen Details zur info Datei gibt es hier.

Mein theme info für equira sieht erstmal so aus:

name = EQUIRA Theme
description = equira Theme by Rainer Feike.
version = 1.0
core = 6.x
engine = phptemplate
; deactivate core css's
stylesheets[all][] = system-menus.css
stylesheets[all][] = system.css
stylesheets[all][] = user.css
stylesheets[all][] = defaults.css
; insert themscss's
stylesheets[all][] = reset.css
stylesheets[all][] = layout.css
stylesheets[all][] = design.css
stylesheets[all][] = custom.css
stylesheets[print][] = print.css
; regions
regions[content_top] = Content Top
regions[content] = Content Mid
regions[content_bottom] = Content Bottom
regions[right] = Advertising
regions[left] = Prim-Menu
regions[footer] = Footer
regions[beforeBody] = PlainCode before Body

Der Abschnitt "deactivate core css's" deaktiviert einige CSS Files des Drupal Cores, das macht das Themeing via CSS später leichter (natürlich nur wenn man wie ich das Core Layout nicht mag). Die Header Region habe ich mir gespart weil hier im vorgegebenen Layout keinerlei dynamische (also pro Seite verschiedene) Inhalte zu finden sind.

Die Region "PlainCode before Body" füge ich in alle meine Templates ein. Hierüber lassen sich später absolut positionierte Elemente (position:absolute) oder Schmankerl wie der Google Analytics urchinTracker JavaScript Code unterbringen.

page.tpl.php für equira erstellen

Die Datei page.tpl.php ist in Drupal das steuernde Template für ein Theme. Hier werden der HTML-Markup und die PHP - Codeschnippsel implementiert. Die Engine fügt später dynamisch Content aus der Datenbank ein. Ich bin ein Fan des "Semantischen Markups" von Andy Clarke (siehe Buchempfehlung auf der Seite), daher schreibe ich einige Layer entsprechend meinem Mockup ins Template:

<div id="head">
</div>
<div id="frame">
  <div id="content">
    <div id="contentTop">
    </div>
    <div id="mainContent">
    </div>
    <div id="contentButtom">
    </div>
  </div>
  <div id="navigation">
  </div>
  <div id="advertising">
  </div>
</div>
<div id="footer">
</div>

Der #frame ist nötig um den #footer am Ende auch wirklich unter alle Bereich in der Mitte zu bekommen. Wie man aus diesem Markup das dreispaltige (und dreizeilige) Layout via CSS entstehen lässt ist im Netz bereits ausgiebig diskutiert und bspw. hier von Matthew Levine beschrieben worden.

Jetzt muss man noch die PHP Variablen ins Templete einfügen:

<div id="head"></div>
<div id="frame">
  <div id="content">
    <div id="contentTop">
       $content_top
    </div>
    <div id="mainContent">
        $content
    </div>
    <div id="contentButtom">
       $content_bottom
    </div>
  </div>
  <div id="navigation">
    $left
  </div>
  <div id="advertising">
    $right
  </div>
</div>
<div id="footer">
    $footer
</div>
$beforeBody

Dabei ist die abkürzende Schreibweise wie bspw. $footer so zu verstehen:
$footer := <?php if ($footer) print $footer; ?>

Ausblick

Im nächsten Teil Wie entwickle ich eine Drupal Webseite - Teil 2beschreibe ich, wie die Tabs der zweiten Menüebene und das 3. Menü erstellt werden. Außerdem führe ich das Drupal Modul "equira" ein um einige "Preprocessings" für das Theme durch zu führen.

AnhangGröße
artikel-p1.png159.75 KB
artikel-p2.png1.36 KB
Geschrieben am 08.04.2009, zuletzt bearbeitet am 07.11.2014, wie folgt kategorisiert:
Fachbereiche Technische Umgebung Stichworte
Anlagen zum Artikel:
AnhangUmfang in kByte
artikel-p1.png163.6
artikel-p2.png1.4

Buchempfehlung Drupal

Das Drupal-Entwicklerhandbuch
Das Drupal-Entwicklerhandbuch - Gute Drupal Bücher gibt es eigentlich gar nicht. Das liegt daran, dass Leute die Drupal beherrschen Lukrativeres tun können als Bücher zu schreiben. Van Dyk ist zumindest schon lange dabei und hat umfassend Ahnung!
Empfehlenswert!

Buchempfehlung CSS

Transcending CSS Cover
Transcending CSS Andy Clarke, Molly E. Holzschlag und Dave Shea sind sicherlich unter den berühmtesten Persönlichkeiten des New Web Zeitalters. Hier erläutert Andy Clake den Übergang des Designs per HTML zum Beschreiben per HTML und Design per CSS.
Sehr empfehlenswert!
Rainer Feike: "Ich arbeite seit 1994 als Freelancer bzw. Freiberufler in der EDV Branche um München. Ich bin Softwareentwickler für Projekte in C/C++, JAVA und PHP. Ich bin Analyst und Berater im Fachbereich Bank und Börse. Ich konzipiere, entwickle und betreibe anspruchsvolle Web 2.0 Projekte. " Powered by Drupal

Skillset

C, C++, JAVA, PHP, Linux, Unix, SQL, mySQL, Oracle, JBF, Drupal, CSS, JavaScript, HTML, tomcat, XML, XSD - A highly efficient exceptional awesome software engineer :-)

Template design and technology by proxiss web20 technology