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
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.

Kategorien
Content Management Systeme Services Site Builder Webdesign Webserver Wunschthema

Und nun stehst du da … mit HTML, CSS und JavaScript

Nachdem ich letzte Woche gezeigt habe, wie einfach man sich eine Website Entwicklungsumgebung auf seinem eigenen Computer einrichtet, will ich mal nachfragen, wie es denn so aussieht mit der Erstellung der eigenen Website 🙂

Wenn du die eigene Website tatsächlich selbst mit HTML, CSS und JavaScript baust, ist das ja etwa so, als wenn du ein Haus aus Steinen, Sand, Kalk, Holz und Ziegeln selbst baut. Das kann sehr schön sein, aber es dauert auch echt lange bis es fertig ist. Falls dir diese Art der Erstellung einer Website gefällt, hier noch ein paar Links aus unserem Blog zur Motivation:

Kategorien
Infrastruktur Server Shared Hosting Webdesign Webserver Wunschthema

Das Wunder der Erstellung einer Website

Im Zeitalter von Page Buildern, Cloud Services, Social Medial Portalen, eCommerce  und dem Internet of Things wird es Zeit mal wieder an die Basics des WWW zu erinnern.
Stand der Dinge im Web ist bis heute folgender:

Ein Besucher mit einem Browser (Mobil oder Desktop) greift auf eine Website über einem Domainnamen zu. Das kann per Klick auf einen Link in einer E-Mail, einem Tweet, einem Facebook Post oder auch über das Eintippen des Domainnamens im Browser passieren. Der Domainname ist mit einer IP-Adresse verbunden. Hier im Blog ist die Domain blog.novatrend.ch und die IP Adresse 193.33.128.50. Die Kommunikation vom Browser zu dieser IP Adresse läuft über das HTTP Protokoll. Anfragen an die gewünschte IP Adresse beantwortet ein Web Server. Dieser Web Server liefert Dateien (HTML, Grafiken, CSS, JavaScipt) an den Browser des Besuchers. Der Browser interpretiert die an ihn gesendeten Daten und macht daraus eine Website.

An dieser grundsätzlichen Kommunikation und Vorgehensweise hat sich bis heute wenig verändert. Es gibt zahlreiche unterschiedliche Konzepte, wie die Daten, die der Server sendet, effektiv interpretiert werden können, aber prinzipiell sind die Zusammenhänge sehr einfach.

Jeder Computer, der mit dem Internet verbunden ist, kann Client und Server sein. Den Computer, auf dem ich diesen Text schreibe, nutze ich gerade als Client. Ich habe ein offenes Browserfenster und schreibe diesen Artikel im WordPress Editor des Novatrend Blogs. Das WordPress liegt auf einem Webhosting bei Novatrend. Wenn ich auf den Veröffentlichen Button klicke, werden die Daten von meinem Computer auf den Server bei Novatrend übertragen und du kannst darauf zugreifen. Das passiert am Montag, den 26.3.2018 um 8:00 Uhr.

Mein Computer könnte allerdings auch ein Web Server sein und andere mit dem Internet verbundene Computer könnten darauf zugreifen. Mein Computer ist allerdings ein Laptop und nicht immer am Internet und somit wäre es nicht besonders klug, eine Website rund um die Uhr darauf zu betreiben. Prinzipiell würde es aber gehen. Und nun sind wir beim eigentlichen Thema, dem „Wunder der Erstellung einer Website :)“.
Um eine Website unter realistischen Bedingungen auf deinem Computer zu erstellen, musst du ihn gleichzeitig zu einem Client und zu einem Web Server machen. Client ist er ja schon weil er einen Browser hat. Web Server ist er aber leider nicht, weil Betriebssysteme wie Windows und macOS keinen Web Server im Lieferumfang haben.

Um diese Funktionalität nachzurüsten gibt sehr viele Möglichkeiten. Die pragmatischste Lösung ist vermutlich XAMP für Windows und MAMP für macOS. Die Buchstaben MAMP standen ursprünglich für die Worte Mac, Apache Webserver, MySQL Datenbank und PHP. Das X in XAMP stand für Windows, Linux und Mac, also ein Platzhalter für beliebige Systeme. In der Realität hat sich allerdings XAMP für Windows durchgesetzt und MAMP im macOS Bereich. Linux Benutzer installieren die benötigten Programme meist separat mit ihrem Paketmanager.

MAMP

Da ich mit einem Mac arbeite, nehme ich als Beispiel hier MAMP. Es gibt eine freie und eine kostenpflichtige Version. Die kostenpflichtige hat viele Kleinigkeiten, die einem das Leben erleichtern. Um eine Website zu erstellen, reicht die freie Version allerdings mehr als aus.

MAMP
MAMP

Nach dem Download von mamp.info muss MAMP lokal installiert werden. Nach dem ersten Aufruf der App sieht man eine sehr einfache Oberfläche um die Server (Web Server und Datenbank Server) zu starten. Wie das heute so üblich ist, gibt es natürlich auch eine kostenpflichtige Cloud Funktion, auf die ich aber nicht eingehen möchte.

MAMP
MAMP

Bevor ich nun die Server starte, kurz ein paar Anmerkungen. So eine Website besteht aus vielen Dateien und es ist sinnvoll, von Anfang an „Ordnung“ zu halten. Ordnung in dem Sinne, dass ich die Dateien meiner Website auf meiner lokalen Festplatte wiederfinde. Ich sammle beispielsweise alle meine Projekte in einem /dev Ordner. Die einzelnen Websites sind dann in entsprechenden Unterordnern.

/dev Verzeichnis
/dev Verzeichnis (noch ohne beispiel Ordner 🙂 )

Wenn ein neues Projekt dazukommt, erstelle ich mir einen neuen Ordner und nenne ihn meistens nach der Domain oder dem Projektnamen. In diesem Fall nenne ich ihn beispiel. Ich lege im novatrend Ordner also den Ordner beispiel an und muss dem MAMP sagen, dass in genau diesem Ordner, dem sogenannten Document Root des Web Servers, meine neue Website liegen wird.

Document Root festlegen
Document Root festlegen

Standardmäßig läuft bei MAMP der Web Server Apache auf dem „Port“ 8888. Ich stelle das bei mir um auf den Standardport 80 für den Webserver und 3306 für den Datenbankserver. Wir sehen gleich warum.

Standard Ports
Standard Ports

Nachdem ich das getan habe, kann ich die Server in der MAMP App starten. Wenn alles grün leuchtet, öffnet MAMP automatisch ein Browserfenster und verzweigt auf die Startseite http://localhost/MAMP/ .

Server laufen
Server laufen

Auf der MAMP Startseite gibt es viele nützliche Dinge über MAMP zu lesen, ich will aber meine eigene Website bauen, also rufe ich http://localhost oder 127.0.0.1 auf. Im Browserfenster sehe ich das leere Inhaltsverzeichnis meines beispiel Ordners.
Wenn ich den Port nicht geändert hätte, hätte ich jetzt http://localhost:8888 oder 127.0.0.1:8888 aufrufen müssen.

localhost
localhost

Um eine Website zu sehen, müsste ich dort eine Datei erstellen, die HTML Code enthält. Das macht man mit einem Editor (oder auf der Kommandozeile, aber das ist vielleicht zu viel Technik :)). Ich benutze für einfache Dinge, wie das Bearbeiten von HTML-Dateien, ein kostenloses Programm aus dem App Store mit dem Namen Textwrangler, es gibt allerdings hunderte anderer Editoren. Ich erstelle eine Datei mit dem Namen meinesite.html im beispiel Verzeichnis und schreibe eine HTML Überschrift hinein (<h1>Hallo Welt</h1>).

meinesite.html
meinesite.html

Wenn ich mein Browserfenster aktualisiere, taucht die Datei im Verzeichnis auf.

localhost mit meinesite.html
localhost mit meinesite.html

Wenn ich den Link klicke, interpretiert der Browser das HTML und stellt es als Überschrift dar.

Hallo Welt
Hallo Welt

Wenn ich will, dass diese Datei gleich aufgerufen wird, wenn ich http://localhost eingebe, muss ich sie index.html nennen. Wenn ich das mache, sehe ich allerdings kein Dateiverzeichnis mehr und in der URL steht auch nur noch localhost.

Der Bauplatz für die Website ist jetzt fertig.

Bevor du nun Content Management Systeme wie WordPress, Joomla, Drupal oder gar Typo3 installierst, solltest du dich ein wenig mit HTML, der Hypertext Markup Language,  CSS, den Cascading Stylesheets und JS, der Programmiersprache JavaScript auseinandersetzen. Ein guter Startpunkt ist die Dokumentation über den h1 Tag auf selfhtml.

selfhtml.org
selfhtml.org

Wenn es dir so geht wie mir vor mehr als 20 Jahren, wirst du alles ausprobieren wollen und echt begeistert sein von den Möglichkeiten, die HTML bietet. Du wirst nie wieder „Zeit haben“ und du wirst keine Website mehr so ansehen wie vorher 🙂 .  Auch wenn heute alles scheinbar viel schneller, einfacher  und fluffiger von der Hand geht mit all den Webservices in der Cloud, im Ergebnis erzeugen sie alle HTML und es erleichtert das Verständnis von Websites ungemein, wenn man weiß, was man mit HTML, CSS und JavaScript alles anstellen kann.

Das was da jetzt auf meinem und vielleicht auch deinem Computer läuft ist gewissermaßen die Miniaturversion eines Webhosters. Wenn dein Computer nun rund um die Uhr am Netz hängen würde, eine von außen erreichbare IP-Adresse hätte, sicher gegen fiese Angriffe und dein Internetzugang schnell genug wäre um ein paar tausend Besuchern deine Website auszuliefern, dann wäre das jetzt deine Website, die du ganz allein, ohne etwas zu kaufen oder zu mieten mit Open Source Software und freien Standards erstellen kannst!
Da in diesem diesem Satz doch ziemlich oft das Wort „wäre“ vorkommt, gibt es Firmen wie uns, bei denen du deine Website, wenn das einfacher für dich ist, betreibst. Erstellen kannst du sie aber ganz allein auf deinem Computer!

Fazit

Es ist hilfreich sich selbst eine Website zu erstellen. Die Basics des World Wide Web gelten für alle Teilnehmer und sind nach wie vor erstaunlich einfach und logisch.


tl;dr: Bau dir einfach eine Website auf deinem Computer.

 

 

Kategorien
seafolly.ch Server Shared Hosting Verschlüsselung Webdesign Webserver

Die Kommandozeile ist nicht totzukriegen :)

Wer sein Webhosting aus der Ferne verwaltet, benutzt normalerweise eine grafische Benutzeroberfläche. Die reibungslose Funktion und die einfache Bedienbarkeit dieser grafischen Benutzeroberflächen ist eine echte Herausforderung, schließlich ist es so eine Art „Fernbedienung“ für den Server. Im Jahre 2018 funktionieren Tools wie cPanel allerdings wirklich gut.

In der Webentwicklung ist die Kommandozeile in den letzten Jahren allerdings wieder in Mode gekommen. Entwickler, Administratoren und Site Builder können Wartungs- und Entwicklungsaufgaben damit vereinfachen (wenn sie wissen, was sie tun 🙂 ). Auch bei Content Management Systemen wie WordPress (WP-CLI) und Drupal (Drush) wird die Kommandozeile immer beliebter.

Um mit dem Server deines Webhostings Kontakt aufzunehmen, benötigst du ein Kommandozeilen Programm. Kommandozeilen Programme gibt es für alle Betriebssystem Plattformen. Windows Benutzer nehmen meist PuTTY, Mac und Linux Benutzer haben das Terminal oder Shell Programm bereits im Betriebssystem enthalten. Für Android und iOS gibt es ebenfalls zahlreiche Terminal Apps. Der große Vorteil der Kommunikation via Shell sind die Sicherheit und die geringen Datenmengen, die übertragen werden müssen. Eine Verbindung per SSH funktioniert „immer“, zur Not auch auf einem Telefon mit schlechter Internet Anbindung.

Verbindung aufbauen

Das Kommandozeilen Programm besteht aus einem schwarzen Fenster mit einem Eingabebereich. Alle Befehle, die hier eingegeben werden, werden auf dem lokalen System ausgeführt. Um ein Webhosting bei uns zu erreichen musst du den ssh Befehl nutzen. Als Parameter übergibst du den Benutzernamen und den Host.

ssh [Benutzername]@[host]

In meinem Fall ist das ssh seafoll1@ftp.seafolly.ch. Benutzername und Host sind die gleichen, wie bei deinem FTP Zugriff.
Der Server fragt nach deinem Passwort.
Es ist ebenfalls das gleiche wie dein FTP Passwort.

Terminal OSX
Terminal OSX

Nach der Eingabe des Passworts verwandelt sich der Prompt der lokalen Kommandozeile (hagengraf: hagengraf$) in den Prompt des Webhosting Servers (seafoll1@srv11 [~]# ). Alle Befehle, die du nun absendest, werden von dem Server ausgeführt auf dem sich dein Webhosting befindet. Die Verbindung ist sicher und schnell. Übertragen wird nur dein Befehl und die Antwort des Servers. Das sind erheblich weniger Daten als bei einer grafischen Benutzeroberfläche.

Mit Schlüssel verbinden (empfohlen)

Anstelle der Verbindung mit einem Passwort gibt es auch die Verbindung mit einem Schlüsselpaar. Der eine Schlüssel ist öffentlich und liegt auf dem Server. Der andere Schlüssel ist privat und liegt auf dem lokalen Gerät. Wenn du beispielsweise jemandem Zugriff auf die Kommandozeile geben möchtest, aber nicht das dazugehörige Passwort, so kannst du einen Schlüssel erzeugen, aktivieren und an die berechtigte Person weitergeben. Der Nutzer mit Schlüssel kann sich dann ohne Passwort mit dem Server verbinden. Du kannst beliebig viele Schlüssel erzeugen, sowie existierende Schlüssel autorisieren und wieder sperren.

Wenn ich mich über die lokale Kommandozeile mit dem Webhosting verbinden möchte, gebe ich einfach ein …

ssh seafolly_ch

… bestätige mit Enter und bin „drin“.

Schlüssel erzeugen und aktivieren

Um einen Schlüssel zu erzeugen, öffnest du cPanel und suchst nach ssh.

cPanel SSH-Zugriff
cPanel SSH-Zugriff

In der folgenden Seite wird ein ausführlicher Erläuterungstext und der Button SSH-Schlüssel verwalten angezeigt. Nach einem Klick auf den Button gelangst du zur Übersicht. In meinem Fall steht da schon ein Schlüssel, den ich benutze, mit dem Namen seafolly_ch.

SSH-Schlüssel - Übersicht
SSH-Schlüssel – Übersicht

Achtung: Der private Schlüssel sollte aus Sicherheitsgründen nach der lokalen Konfiguration vom Server gelöscht werden.

Du kannst nun Schlüssel erzeugen oder existierende Schlüssel importieren. Um ein Schlüsselpaar zu erzeugen, klicke auf Neuen Schlüssel erzeugen. Ich nenne ihn seafollybeispiel. Dieser Name ist beliebig wählbar. Dann vergebe ich das Schlüsselkennwort (Pass Phrase). Als Typ nehme ich RSA und die größte Schlüsselgröße.

SSH-Schluesselpaar - erzeugen
SSH-Schluesselpaar – erzeugen

Die Schlüssel werden erzeugt und liegen als Datei im Verzeichnis .ssh auf dem Server. Auf dieses Verzeichnis kannst du auch per FTP zugreifen.

SSH-Schlüsselpaar erfolgreich erzeugt
SSH-Schlüsselpaar erfolgreich erzeugt

Die Schlüssel sind erzeugt aber noch nicht autorisiert. Durch einen Klick auf den zurück Link gelangst du wieder in die Übersicht. Dort ist nun ein neuer Schlüssel verfügbar, der noch nicht autorisiert worden ist.

Schluessel nicht autorisiert
Schluessel nicht autorisiert

Über den Link Verwalten kannst du den öffentlichen Schlüssel autorisieren.

Schlüssel autorisieren
Schlüssel autorisieren

Lokale Umgebung konfigurieren

Der private Schlüssel muss nun auf dem lokalen Gerät an der richtigen Stelle installiert werden (bei macOS ist das im Ordner .ssh im entsprechenden Benutzerverzeichnis). Du kannst den privaten Schlüssel als Datei herunterladen oder per Copy & Paste in eine lokal erzeugte Datei kopieren.

cPanel - Anzeige privater Schlüssel
cPanel – Anzeige privater Schlüssel

Wenn die Datei ebenfalls seafollybeispiel heißt, müssen in der SSH Konfigurationsdatei config

nano ~/.ssh/config

die folgenden Werte eingegeben werden:

Host seafollybeispiel
User seafoll1
Port 22
HostName ftp.seafolly.ch
IdentityFile ~/.ssh/seafollybeispiel

Außerdem darf die Datei nicht zu viele Zugriffsrechte haben, ansonsten führt der Verbindungsaufbau zur Fehlermeldung:

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: UNPROTECTED PRIVATE KEY FILE! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/Users/hagengraf/.ssh/seafollybeispiel' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.

Der Befehl

chmod 0400 seafollybeispiel

löst das Problem.

Nun kannst du dich mit dem Befehl

ssh seafollybeispiel

ohne ein Passwort anmelden und die Kommandozeile des Servers nutzen.

Hinweis: Die lokale Installation ist

Links


tl;dr: Du kannst dich ohne Passwort per SSH an der Kommandozeile deines Webhostings anmelden