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?
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
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
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
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
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
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
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.
- 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:
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.
Posted from my blog with SteemPress : https://blog.novatrend.ch/2018/06/25/eine-einfache-website-mit-kontaktformular/