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
Content Management Systeme Shared Hosting Webdesign Wunschthema

Ein selbstgehostetes Twitter Archiv mit WordPress

Wenn du in sozialen Netzwerken Nachrichten, Fotos und Videos postest, sammeln sich über die Jahre eine Menge Einträge an. Ohne gleich an die konkrete Datenapokalyse zu denken, wünscht man sich doch manchmal eine Art Backup oder ein Archiv seiner Daten. Wer mal die Suchfunktion von Twitter bemüht hat um eigene Tweets zu durchsuchen, kann ein Lied davon singen.

Konkreter Anlass für das nachdenken über Twitter Archiv war bei mir war die „Blockierung“ eines Twitter Users seitens Twitter, den ich für unser kleines Blog Projekt erstellt hatte und der wöchentlich eine Zusammenfassung der Blogeinträge postete. Grund der Sperrung war die Tatsache, dass der Geburtstag des Twitter Users nicht oder falsch ausgefüllt war. Im Ergebnis sind alle Tweets nun „weg“ (Die gesamte Geschichte findest du hier: ).

Zurück zum Archiv. Ich dachte mir, dass es doch möglich sein müsse, per Twitter API die Tweets des eigenen Users auszulesen und als Posts in einer WordPress Installation zu speichern. Die Tweets wären dann auch bei einer versehentlichen Sperrung noch lesbar und das Problem der Suche wäre obendrein ebenfalls gelöst.

Kategorien
Webdesign Wunschthema

Ein Child Theme in WordPress erstellen

Website Design und Layout sind eine echte Herausforderung. Ein Design „von Hand“ in ein WordPress Theme zu verwandeln ist doch recht zeitaufwendig und nicht ganz einfach. Viele Betreiber einer WordPress Website entscheiden sich daher für fertige Themes, die sie dann im Rahmen der Möglichkeiten konfigurieren.
Auf der einen Seite ist es praktisch, fertige Themes zu kaufen und zu konfigurieren. Man erzielt schnelle Ergebnisse und es sieht schick aus. Auf der anderen Seite benötigt man fast immer so eine „klitzekleine“ Änderung am Quellcode des Themes (siehe auch WordPress: Shortcodes, Listen und Störer). An dieser Stelle muss man über ein Child Theme nachdenken.

Die Idee bei einem Child Theme ist, dass man die Features und Eigenschaften des Parent Themes nutzen, aber an bestimmten Stellen das Verhalten des Parent Themes mit eigenen Änderungen überschreiben will. Die Änderungen bestehen immer aus zusätzlichen CSS-, JavaScript-, PHP- und HTML-Befehlen, sowie Grafik-Dateien. Wenn alle Änderungen in ein Child Theme ausgelagert werden, kann das Parent Theme bei einem Update problemlos aktualisiert werden. Nutzt man kein Child Theme werden die Änderungen überschrieben. Manchmal ändern sich bei einem Update auch Kleinigkeiten im überschriebenen Code, so dass man unter Umständen ein paar Anpassungen am eigenen Child Theme vornehmen muss. Das kommt aber bei einfachen Themes eher selten vor.

Daumenregel: Je aufwendiger und komplexer des verwendete Theme ist, desto vorsichtiger sollte man beim Überschreiben sein.

Child Theme erstellen

Manche gekauften Themes bringen bereits Child Themes mit. Im Screenshot siehst du ein Beispiel des Themes Pressroom.

Pressroom Child Theme
Pressroom Child Theme

Hier wird auch klar, dass es nicht kompliziert ist, ein Child Theme zu erstellen. Das Child Theme benötigt

  • einen eigenen Ordner auf der Ebene der Themes
  • eine style.css Datei für die CSS Befehle
  • ein Screenshot des fertigen Child Themes, damit im WordPress Backend ein hilfreiches Bild angezeigt wird, auf dem man das Theme erkennt.
  • eine functions.php Datei für die Einbindung des Parent Themes und eigene Funktionen. Der Inhalt der functions.php ist zwar vom Prinzip her immer gleich. Ja nach Theme müssen aber andere Parameter angesprochen werden. Das ist beispielsweise der Inhalt der Pressroom-Child functions.php.
<?php
function child_theme_enqueue_styles() {
wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css", array("reset", "superfish", "prettyPhoto", "jquery-qtip", "odometer", "animations"));
}
add_action("wp_enqueue_scripts", "child_theme_enqueue_styles");
?>

Das ist die absolute Grundausstattung für ein Child Theme und da fangen auch schon die Problem eines Anfängers, bzw. Nicht-Entwicklers an: „Wie erstelle ich diese functions.php Datei?“.

Child Theme Configurator

Glücklicherweise gibt es in WordPress Plugins für diese Arbeit. Ich benutze als Beispiel den Child Theme Configurator. Mit diesem Plugin lässt sich ein Child Theme aus einem installierten Theme erzeugen und konfigurieren.

Child Theme Configurator
Child Theme Configurator

Im konkreten Fall (WordPress: Shortcodes, Listen und Störer) benötigte ich zunächst die Struktur eines Child Themes.

Erstellen des Child Themes

Um das Child Theme zu erstellen, wählst du „Create a new Child Theme“, wählst ein existierendes Theme aus (in meinem Fall Maker), klickst auf Analyze. Wenn das Plugin die notwendigen Daten aus dem Theme lesen kann, erscheint ein grüner Haken.

Child Theme erstellen
Child Theme erstellen

Die restlichen Schritte kannst du auf den Standardeinstellungen belassen und nach Schritt 9 dein Child Theme erstellen.

Create Child Theme
Create Child Theme

Child Theme auswählen

Du kannst jetzt bereits das Child Theme aktivieren.

Child Theme aktivieren
Child Theme aktivieren

Datei überschreiben

Ich will eine bestimmte Datei des Parent Themes verändern (content-portfolio-jetpack.php). Dazu kann ich im Tab Files die gewünschte Datei auswählen und in mein Child Theme kopieren.

Datei aus dem Parent Theme kopieren
Datei aus dem Parent Theme kopieren

Die benötigte Ordnerstruktur wird bei dem Kopiervorgang mit angelegt. Wenn ich per FTP auf meinen Hosting Account schaue, sehe ich diese Dateien in meinem neuen Child Theme. Die zu überschreibende Datei content-portfolio-jetpack.php befindet sich im Ordner template-parts.

Dateien des Maker Child Themes
Dateien des Maker Child Themes

Fazit

Wer jemals ein Child Theme per Hand erstellt hat, wird dieses Plugin zu schätzen wissen.


tl;dr: Immer wenn du am Quellcode eines nicht selbst erstellten Themes etwas änderst, tötet jemand ein kleines süsses Kätzchen, also denke auch an die Kätzchen 😉

Kategorien
Security Verschlüsselung Webdesign Webserver

Installiere ein SSL Zertifikat – sofort!

Die Datenschutzgrundverordnung, die am 25. Mai 2018 in der Europäischen Union in Kraft getreten ist, schreibt unter anderem vor, Formulare auf einer Website mit einem SSL Zertifikat auszustatten. Das Zertifikat und das zugehörige Protokoll sorgen dafür, dass die Daten zwischen dem Browser des Besuchers und dem Server der besuchten Website verschlüsselt übertragen werden.

Auch unabhängig von dieser Verordnung ist die Installationen eines SSL Zertifikats eine gute Idee! Wenn deine Website noch kein SSL Zertifikat nutzt und du deine Website bei uns hostest, dann solltest du das jetzt einfach mal einrichten. Ich zeige dir, wie es geht.