Kategorien
Server Shared Hosting Site Builder Webdesign Webserver Wunschthema

Eine einfache Website mit Kontaktformular

Manchmal benötigt man eine einfache Website mit etwas Text, ein paar Bildern und einem Formular.
Also so Dinge,  wie:

  • Ich verschenke Dinge, willst du die haben?
  • Ich mag etwas, magst du das auch?
  • Weisst du auf meine Frage eine Antwort?
  • Ich verkaufe mein Haus, willst du es haben?

Ich meine so ganz klar private, einfache Vorgänge, die nicht darauf abzielen, Daten zu sammeln oder andere fiese Sachen zu tun. Im Zeitalter von Datenschutz-Grundverordnungen, SPAM Bots und Fake News weiss man ja nie. Seht diesen Blogeintrag daher bitte als persönliche Erfahrung, wie einfach es ist, im World Wide Web eine Website selbst zu erstellen.

Die Website

Auch wenn es nur eine einfache Seite ist, soll sie doch etwas „hermachen“ und auf allen denkbaren Endgeräten gut aussehen. Ich möchte natürlich einen Bild-Slider und auch das eine oder andere schicke Element. Weil das doch alles recht mühselig zu erstellen ist nutze ich das Bootstrap Framework. Mit Bootstrap lassen sich recht einfach anspruchsvolle Layouts erstellen, hier ein paar Beispiele:

Bootstrap Beispiele
Bootstrap Beispiele

Ich will aber nichts herunterladen und installieren, sondern nur meine index.html Seite bauen. Am besten mit einem Tablet oder einem Telefon. Ich brauche also zunächst ein HTML Gerüst und eine Seite. Das kann ich auf meinem PC machen und dann per FTP auf meinen Webspace laden oder auch direkt im Webhosting in der cPanel Dateiverwaltung.

index.html Datei

Für mein Beispiel habe ich mir eine Subdomain angelegt (bootstrap.seafolly.ch) und dort erzeuge ich nun eine index.html Datei. Wenn ich die Datei index.html nenne, wird sie direkt als erstes aufgerufen, wenn ich die URL im Browser aufrufe.

index.html erstellen
index.html erstellen

Starter Template

In diese Datei kopiere ich mir den Beispiel Startcode von der Bootstrap-Seite https://getbootstrap.com/docs/4.1/getting-started/introduction/.

Starter-Template im cPanel Editor
Starter-Template im cPanel Editor

Das sieht auf den ersten Blick etwas unübersichtlich aus, ist aber gar nicht so schlimm. Im Starter-Template werden alle benötigten Dateien zur Laufzeit geladen (Bootstrap CSS und JavaScript, sowie jQuery).

In diesem Bereich des Codes werden wir arbeiten

... <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1> ...

Jumbotron

Der Text oben auf der Seite ist in einem „Jumbotron“. Es ist ein Text mit einem Button und einem Link dahinter.

Jumbotron mit Button und Link
Jumbotron mit Button und Link

Ich kann das notwendige HTML Markup aus den Bootstrap Beispiele übernehmen (https://getbootstrap.com/docs/4.1/components/jumbotron/) und den Text anpassen.

  <title>Citroën Typ H</title>
</head>
<body>
<div class="jumbotron">
  <h1 class="display-4">Citroën Typ H</h1>
  <p class="lead">Der Citroën Typ H war ein Kleintransporter des französischen Automobilherstellers Citroën.</p>
  <hr class="my-4">
  <p>Der Typ H war einer der am weitesten verbreiteten Kleintransporter in Frankreich und wurde von Juni 1948 bis Dezember 1981 gebaut. </p>
  <a class="btn btn-primary btn-lg" href="https://de.wikipedia.org/wiki/Citroën_Typ_H" role="button">Mehr lesen in der Wikipedia</a>
</div>

Slider

Ein Slider heisst bei Bootstrap Carousel (https://getbootstrap.com/docs/4.1/components/carousel/). Es ist eine Slideshow, der man nur die gewünschte Links zu den Bilder hinzufügen muss. Die Bilder für meine Slideshow kommen aus diesem Flickr Album (Ja, diesen Platz mit den Autos gab es wirklich 🙂 ). Auch hier muss der Quellcode einfach kopiert und angepasst werden. Ich habe mir für die Variante mit Navigationspfeilen und einer Bildlegende entschieden. Die HTML Struktur ist eine ordered list (<ol></ol>) mit so vielen list items (<li></li>) wie Bilder angezeigt werden sollen. Innerhalb des list items wird die Bild-URL in ein image Tag (<img>)eingebunden. Die beiden Pfeile zum blättern sind einfach Links (<a href …></a>). Alles notwendige CSS und JavaScript ist in den vorher eingebundenen Dateien bereits fertig definiert.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3096/3123098936_1f45028957_b.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3123/3123102792_25e8b8049d_b.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3094/3122251861_b89f8e5469_b.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Nächstes</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Vorheriges</span>
  </a>
</div>

Auf der Seite funktioniert es einfach, die einzelnen Slides werden nach einer gewissen Zeit ausgetauscht. Alle Einstellungen sind natürlich auch änderbar. ich nutze den Standard.

Slider - Bootstrap Carousel
Slider – Bootstrap Carousel

Kontaktformular

Nun benötigen wir noch ein Formular. Auch hier gibt es alles vordefiniert zum kopieren unter https://getbootstrap.com/docs/4.1/components/forms/. Ich biete ein Feld für einen Namen, die E-Mail Adresse und eine Nachricht an. Damit das Formular mittig auf allen Bildschirmgrössen angezeigt wird, umschliessen ich es mit den nötigen Layout Klassen (https://getbootstrap.com/docs/4.1/layout/grid/).

<div class="row">
  <div class="col-1 col-sm-1 col-md-2 col-lg-2 col-xl-2"></div>
  <div class="col-10 col-sm-10 col-md-8 col-lg-8 col-xl-8">
  <form id="contact-form" method="post" action="contact.php" role="form">
  <p class="lead">Schreibe mir, wenn dir der Citroën Typ H auch gut gefällt :)</p>
  <div class="form-group">
    <label for="name">Dein Name oder dein Spitzname</label>
    <input class="form-control" name="name" type="text" id="name" placeholder="trage hier deinen Namen ein">
  </div>
  <div class="form-group">
    <label for="email">E-Mail Adresse (optional)</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com">
   </div>
   <div class="form-group">
     <label for="message">Nachricht (optional)</label>
     <textarea class="form-control" name="message" id="message" rows="3"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Senden</button>
   </form>
</div>
<div class="col-1 col-sm-1 col-md-2 col-lg-2 col-xl-2"></div>
</div>

Die einzelnen Felder befinden sich innerhalb eines form-Tags (<form id=“contact-form“ method=“post“ action=“contact.php“ role=“form“>). Die Methode zum verschicken ist POST und die Datei, in der die Daten verschickt werden sollen heisst contact.php.

So sieht das Formular auf der Website aus.

Formular
Formular

Daten verschicken

Nun kommen wir zum „komplizierten“ Teil. Die Daten, die der Benutzer eingibt, werden an eine andere Datei (contact.php) übertragen und von dort per E-Mail verschickt. Dieser Prozess ist technisch nicht besonders kompliziert aber rechtlich hängt da eine Menge dran. Je nachdem, ob der Absender seine E-Mail Adresse angegeben hat oder nicht handelt es sich um sensible persönliche Daten, die beispielsweise manchmal nur verschlüsselt übertragen werden dürfen. Wenn sie dann auf dem Webhosting Server angekommen sind, verschickt dort ein E-Mail Server des Provider die entsprechende E-Mail, das heisst die Daten werden von einem Dritten verarbeitet und ich als der Anbieter der Seite im Netz brauche unter Umständen einem Auftragsdatenverarbeitungsvertrag (siehe auch Auftragsdatenverarbeitungsverträge und Verordnungen). Aber zurück zur Technik. Ich erstelle mir auf die gleiche Weise wie eben eine Datei mit dem Namen contact.php und benutze hier im Beispiel „einfache“ PHP-Befehle um die E-Mail zu verschicken. Im weiteren Verlauf beschreibe ich eine von zahlreichen Methoden eine E-Mail mittels PHP zu verschicken und es wichtig zu wissen was passieren könnte.

Zunächst erstelle ich mir Variablen $from, $sendTo, $subject, $fields, $okMessage und$errorMessage.

<?php
// Die Absender E-Mail Adresse
$from = 'Citroen H Fan <hagen@novatrend.ch>';
// Die Emfänger E-Mail Adresse
$sendTo = 'Citroen H Fan <hagen@novatrend.ch>';
// E-Mail Betreff
$subject = 'Eine neue Nachricht von einem Citroen H Fan';
// Feldernamen und ihre Übersetzungen
// Ein Array bestehend aus dem Variablennamen => Tect der in der Email erscheint
$fields = array('name' => 'Name', 'email' => 'E-Mail', 'message' => 'Nachricht'); 
// Nachricht, wenn die E-Mail verschicht wurde
$okMessage = 'Deine Nachricht wurde verschickt. Vielen Dank. Wenn du deine E-Mail angegeben hast, melde ich mich vielleicht bei dir!';
// Nachricht, wenn die E-Mail nicht verschicht wurde
$errorMessage = 'Irgendwas ging schief bei der Übermittlung der Daten. Versuche es einfach später nochmal.';

Dann versuche ich die E-Mail zu verschicken (try catch). Wenn sie verschickt wird, zeige ich den Inhalt der $okMessage Variablen an, wenn sie nicht verschickt wird den Inhalt der $errorMessage Variablen. Wenn die Formularfelder nicht gefüllt sind, wird nichts verschickt.

try{
  if(count($_POST) == 0) throw new \Exception('Formular ist leer');
  $emailText = "Neue Nachricht aus dem Citroen H Formular \n=============================\n";
  foreach ($_POST as $key => $value) {
    // Wenn ein Feld da ist, schreibe es in die E-Mail 
    if (isset($fields[$key])) {
      $emailText .= "$fields[$key]: $value\n";
    }
  }
  // E-Mail Header
  $headers = array('Content-Type: text/plain; charset="UTF-8";',
    'From: ' . $from,
    'Reply-To: ' . $from,
    'Return-Path: ' . $from,
    );

  // E-Mail verschicken
  mail($sendTo, $subject, $emailText, implode("\n", $headers));
  $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e){
  $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

Ich gehe hier nicht näher auf den Code ein, das es wie gesagt, sehr viele Möglichkeiten gibt, E-Mails zu verschicken.
Mein Code hat den Nachteil, das

  • SPAM Bots die Datei contact.php nach dem erstmaligen Verschicken neu laden können und dann immer wieder eine neue E-Mail verschickt wird.  Die E-Mail geht allerdings nur an mich und von daher ist das nicht so schlimm.
  • SPAM Bots das Formular automatisiert ausfüllen und versenden können. Ich benutze momentan kein Captcha.
  • Hacker „gefährlichen“ Code in die Felder eintragen können, der dann auf den Novatrend übertragen wird und evtl. den Server „hackt“. Solange die benutzte PHP Version keine Sicherheitslücken hat, ist das Risiko allerdings gering.

Der Code hat aber auch einen Vorteil:

  • er ist extrem einfach und ich, als Ersteller der Site, kann bei Bedarf reagieren.

Die E-Mail

Die E-Mail sieht in meinem Mailprogramme so aus:

E-Mail
E-Mail

Fazit

Ich wollte zeigen, wie einfach die technischen Zusammenhänge sind, um Informationen im WWW anzuzeigen und zu verschicken. Es ist ausdrücklich keine „Raketentechnik“ sondern ganz im Gegenteil sehr bodenständiges „Handwerk“. Wie im Handwerk auch gibt es daher auch manchmal Situationen, in denen es einfach mal „schnell“ gehen muss. Für solch eine Situation ist dieses Beispiel gedacht.


tl;dr: Eine Website mit einem Slider und einem Formular ist schnell erstellt.

Kategorien
Allgemein Shared Hosting

Laravel Framework im Webhosting Paket nutzen

Laravel ist ein PHP-basiertes Free and Open Source Framework mit dem man Web-Applikationen entwickeln kann.
Der Slogan von Laravel ist

The PHP Framework for web artisans

Laravel gilt momentan als eines der populärsten PHP-Frameworks. Es versucht, Ideen aus Ruby on Rails und .NET in die PHP Welt zu bringen und macht damit den PHP Code sauberer und strukturierter. Interessante Features von Laravel in diesem Zusammenhang:

  • Laravel nutzt das Model, View, Controller Modell
  • Es nutzt die PHP Paketverwaltung Composer
  • Eloquent ORM ist eine PHP Implementierung des Active Record Entwurfsmusters. Es repräsentiert Datenbanktabellen als Klassen und erlaubt dadurch beispielweise Datenbankabfragen „einfach“ zu programmieren. Wenn am entsprechenden Objekt etwas geändert wird, wird es auch in der Datenbanktabelle geändert.
  • Blade ist eine sehr übersichtliche und leistungsfähige Template Engine.
  • Migrations ist ein Versionskontrollsystem für Datenbankstrukturen und erleichtert das Deployment.
  • Das Artisan Kommandozeilentool bietet viele Befehle, die den Umgang mit Laravel erleichtern, um beispielsweise Update und Migrationsprozesse zu managen. Unit Tests sind ein fester Bestandteil des Frameworks und können über Artisan ausgeführt werden.

Es gibt zahlreiche weitere Features, die Sie so nach und nach entdecken und nutzen können.
Und das Beste: Laravel lässt sich in einem „normalen“ Webhosting Paket von Novatrend per Installatron installieren.

Installation Laravel

Rufen Sie in der cPanel Verwaltung das Installatron auf und wählen Laravel aus.

ACHTUNG: Seit November 2017 benutzen wir anstelle des Installatrons das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.

cPanel - Installatron - Laravel Framework
cPanel – Installatron – Laravel Framework

Installieren Sie Laravel in einem eigenen Verzeichnis. Dieses Verzeichnis wird unterhalb des public_html Verzeichnisses angelegt und je nach Verwendungszweck können Sie Ihre Domain auf dieses Verzeichnis zeigen lassen.

cPanel - Installatron - Laravel Framework - Konfiguration
cPanel – Installatron – Laravel Framework – Konfiguration

Wenn Sie nun im Browser http://ihre-domain/ihr-verzeichnis aufrufen, so sehen Sie die Default Seite des Laravel Frameworks.

Laravel 5 - Startscreen
Laravel 5 – Startscreen

Loggen Sie sich nun mittels SSL auf der Konsole ein (siehe dazu auch Root-Server – ich bin drin) und wechseln Sie in das Unterverzeichnis /public_html/laravel. Lassen Sie sich die installierten Dateien mit dem Befehl ls -l anzeigen, um einen Überblick zu erhalten. Das Ansehen der Dateien können Sie auch per FTP machen. Mit einer SSL Verbindung können Sie allerdings auch Kommandos ausführen.

seafoll1@srv11 [~/public_html/laravel]# ls -l
total 204
drwxr-xr-x 11 seafoll1 seafoll1   4096 Oct 26 15:13 ./
drwxr-x--- 10 seafoll1 nobody     4096 Oct 26 16:55 ../
-rw-r--r--  1 seafoll1 seafoll1    351 Oct 26 15:13 .env
-rw-r--r--  1 seafoll1 seafoll1    307 Aug 30 13:31 .env.example
-rw-r--r--  1 seafoll1 seafoll1     61 Aug 30 13:31 .gitattributes
-rw-r--r--  1 seafoll1 seafoll1     57 Aug 30 13:31 .gitignore
-rw-r--r--  1 seafoll1 seafoll1     76 Oct 26 15:13 .htaccess
drwxr-xr-x 10 seafoll1 seafoll1   4096 Aug 30 13:31 app/
-rw-r--r--  1 seafoll1 seafoll1   1646 Aug 30 13:31 artisan
drwxr-xr-x  3 seafoll1 seafoll1   4096 Aug 30 13:31 bootstrap/
-rw-r--r--  1 seafoll1 seafoll1   1201 Aug 30 13:31 composer.json
-rw-r--r--  1 seafoll1 seafoll1 105047 Sep  2 10:08 composer.lock
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 config/
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 database/
-rw-r--r--  1 seafoll1 seafoll1    503 Aug 30 13:31 gulpfile.js
-rw-r--r--  1 seafoll1 seafoll1   1780 Oct 26 15:13 index.php
-rw-r--r--  1 seafoll1 seafoll1    159 Aug 30 13:31 package.json
-rw-r--r--  1 seafoll1 seafoll1     87 Aug 30 13:31 phpspec.yml
-rw-r--r--  1 seafoll1 seafoll1    899 Aug 30 13:31 phpunit.xml
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 public/
-rw-r--r--  1 seafoll1 seafoll1   1928 Aug 30 13:31 readme.md
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 resources/
-rw-r--r--  1 seafoll1 seafoll1    567 Aug 30 13:31 server.php
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 storage/
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 tests/
drwxr-xr-x 28 seafoll1 seafoll1   4096 Sep  2 10:08 vendor/

Laravel hat ein Command-line Interface namens Artisan. Es beschleunigt viele Arbeiten enorm. Rufen Sie es auf und schauen Sie die Befehle durch.

seafoll1@srv11 [~/public_html/laravel]# php artisan
Laravel Framework version 5.1.12 (LTS)
...
...
...

Erste Schritte

Ich zeige ein kleines Beispiel, um Ihnen den Einstieg in Laravel zu erleichtern.

Ich möchte gern aus dem Bootstrap CSS Framework ein Layout nutzen und Laravel soll den Inhalt dafür erzeugen. Das ist das Prinzip eines jeden Content Management Systems und kann beliebig um Formulare, Benutzerregistrierungen und viele andere Dinge erweitert werden. Das Beispiel ist ein kleiner Teil des Laravel Anfänger Tutorials von Dirk Helbert. In seinem Blog finden Sie weitere Beispiele.

Worum geht es?

In diesem Beispiel arbeiten wir mit der Blade Template Engine.

Aus dem Verzeichnis /public wird Ihre Webapplikation gestartet. Nach der Laravel Installation finden Sie dort unter anderem die index.php Datei, die als Einstieg für Ihre Webapplikation fungiert. In diesem Verzeichnis befinden sich auch alle öffentlichen Resourcen, wie Grafiken und CSS Dateien.

Die Datei, die die Informationen (HTML Code) für die Laravel Startseite enthält, liegt im Ordner /resources/views und heisst welcome.blade.php.

Wir wollen diese Datei verändern (mit den Daten aus dem Bootstrap Beispiel) und dann eine neue Datei namens app.blade.php erzeugen, die das Layout enthält. Nach den Änderungen sieht die Startseite dann etwa so aus:

Beispielseite basierend auf Bootstrap
Beispielseite basierend auf Bootstrap

Bootstrap Code

Laden Sie zunächst das Bootstrap Source Code Paket von der Downloadseite (http://getbootstrap.com/getting-started/#download)

Bootstrap - Download
Bootstrap – Download

Legen Sie im Laravel Verzeichnis public ein Unterverzeichnis bootstrap an und kopieren Sie dort den Inhalt aus dem Bootstrap Verzeichnis dist hinein. Die Verzeichnisstruktur sieht dann so aus:

public/bootstrap/css   //mehrere Dateien
public/bootstrap/fonts //mehrere Dateien
public/bootstrap/js    //mehrere Dateien

Legen Sie im Laravel Verzeichnis public ein weiteres Verzeichnis mit dem Namen css an. Kopieren Sie die Datei sticky-footer-navbar.css aus dem Bootstrap Verzeichnis docs/examples/sticky-footer-navbar in das Laravel Verzeichnis public/css und benennen Sie sie um in style.css.

public/css/style.css   //die umbenannte sticky-footer-navbar.css

Wechseln Sie nun in das Laravel Verzeichnis resources/views. Kopieren Sie die Datei index.html aus dem Bootstrap Verzeichnis docs/examples/sticky-footer-navbar in das Laravel Verzeichnis resources/views und benennen Sie sie um in app.blade.php.

resources/views/app.blade.php //die umbenannte index.html

Passen Sie die ../.. Pfade zu den Bootstrap-Dateien im HTML Code der app.blade.php auf Ihr Dateisystem an, fügen Sie den Verweis auf die Stylesheet Datei ein (und vergessen Sie auch die JavaScript Dateipfade am Ende der Datei nicht 🙂 )

<!-- Bootstrap core CSS -->
<link href="public/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="public/css/style.css" rel="stylesheet">
...
...
<script src="public/bootstrap/js/bootstrap.min.js"></script>

Nach dem Kommentar <!– Begin page content –> befindet sich ein div Tag mit der Klasse Container. Enfernen Sie den Inhalt zwischen dem öffnenden und schliessendem div Tag und fügen stattdessen den Befehl @yield(‚content‘) ein. Der Befehl fügt später den gewünschten Inhalt ein. Die Datei enthält nun das Layout, der eigentliche Inhalt kommt aus einer anderen Quelle hinzu.

...
<!-- Begin page content -->
<div class="container">
   @yield('content')
</div>
...

Die Quelle des Inhalts befindet sich in der Datei welcome.blade.php. Löschen Sie den bestehenden Inhalt und fügen Sie folgenden Code ein:

@extends('app')
@section('content')
<div class="page-header">
  <h1>Inhalt aus der <code>welcome.blade.php</code> Datei</h1>
</div>
<p class="lead">Beispieltext ...</p>
@endsection

Datei: welcome.blade.php

Der Code ist recht selbsterklärend und lässt ein wenig die Faszination von Laravel erahnen. Der Befehl @extends(‚app‘) erweitert die app.blade.php um den Text zwischen @section(‚content‘) und @endsection. Hier nochmal der genaue Verezichnispfad für diese Datei:

resources/views/welcome.blade.php

Wenn Sie nun die Startseite von Laravel im Browser aufrufen, sieht sie folgendmassen aus:

Beispielseite basierend auf Bootstrap
Beispielseite basierend auf Bootstrap

Genauso elegant wie in der Template Engine lassen sich nun andere Teile Ihrer Site aufbauen (Navigation, Benutzeranmeldung, Datenbankverbindungen, etc). Falls Sie bereits Erfahrungen mit PHP haben, sollten Sie sich Laravel unbedingt ansehen.

Links:


tl;dr: Wenn Sie bereits ein wenig Erfahrung mit PHP haben, werden Sie an Laravel viel Freude haben!

Kategorien
Content Management Systeme Webdesign

Themes basierend auf Bootstrap in Drupal

Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.

In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.

Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.

Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).

Drupal - Bootstrap - Installationen - 2012 - 2015
Drupal – Bootstrap – Installationen – 2012 – 2015

Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.

Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.

Was ist Bootstrap?

Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap - Komponenten (Auswahl)
Bootstrap – Komponenten (Auswahl)

Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.

Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.

Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:

Bootswatch - Flatly
Bootswatch – Flatly

Installation

Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂

Installieren und aktivieren Sie die Module bootstrap und jquery_update

Sie können die Installation per Konsole mit Drush erledigen

drush dl bootstrap jquery_update
drush en bootstrap jquery_update

oder über den Browser in /admin/modules/install

Drupal - Modul installieren
Drupal – Modul installieren

Konfiguration

Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.

Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.

Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).

Drupal - Theme aktivieren
Drupal – Theme aktivieren

Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.

Drupal - Startseite
Drupal – Startseite

Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.

Bootstrap - Flatly wählen
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
Drupal – Bootstrap – Flatly

Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.

Ein eigenes Sub-Theme

Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).

Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.

Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).

Bootstrap - Flatly - variable.less
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
Drupal – NovaTrend Design

In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!

Fazit

Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.