![[Web] Eine umfassende Einführung](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/web-eine-umfassende-einf-hrung_ltr.gif){kind=small}
[Web] Eine umfassende Einführung
0. Vorwort
Ich werde hiermit eine Tutorial-Serie bezüglich WebDevelopment eröffnen.
Aller Anfang ist schwer und daher werde ich - mit euch zusammen - den Weg in die richtige Richtung gehen.
Meine Zielgruppe: Hobby Entwickler die etwas lernen wollen und fortgeschrittene Web-Entwickler.
Dies wird kein Copy&Paste Tutorial.
Ohne eigenständiges Denken wird niemand zum Ziel kommen.
Zur Entwicklung wird Windows verwendet! Das Einrichten eines Endsystems(root/vserver mit Debian o.ä.) werde ich vermutlich nicht behandeln.
Ein Provisorisches Inhaltsverzeichnis.
Dieses wird ständig erweitert und ich nehme Themenvorschläge gerne an.
0. --------Vorwort
1. ------- Entwicklungsumgebung - Einrichtung
1.1 --------- xampp
1.1.1 ---------- Installation
1.1.2 ---------- Eigene Domain: etc/host
1.1.3 ---------- virtual hosts
1.1.4 ---------- Cookieless Self Hosted CDN
1.1.5 ---------- SSL/TLS support + CERT creation
1.1.6 ---------- MySQL Benutzer
1.2 --------- Google Chrome
1.2.1 ---------- Dev-Tools Einleitung
1.2.2 ---------- Workspaces + Network mapping
1.2.3 ---------- Cache Killer
1.3 --------- Version Control (Git)
1.3.1 ---------- Sinnvoll ? Auch für mich als Einzelperson ?
1.3.2 ---------- Local GitHub repository
1.3.3 ---------- Linux-Server repository -- advanced !
2. ------- Die Sprachen
2.1 --------- HTML
2.2 --------- CSS
2.3 --------- LESS
2.3.1 ---------- Vorteile gegenüber CSS
2.3.2 ---------- nodejs / WinLess / Compiler
2.3.3 ---------- Integration in Chrome + Auto Compile
2.3.4 ---------- Bootstrap anpassen
2.4 --------- PHP
3. ------- Entwicklungs-Konzepte
3.1 ------- Modul-basierte Entwicklung
3.1.1 ---------- Ordnerstruktur
3.1.2 ---------- htaccess
3.2 ------- Model-View-Controller (MVC) -- advanced !
3.2.1 ---------- Grundlagen/Einführung
3.2.2 ---------- Ordnerstruktur
3.2.3 ---------- Arbeiten mit mehreren Entwicklern. Front-End/Back-End
4. ------- Datenbank-Anbindungen
4.1 ------- mysql, mysqli, PDO
4.1.1 ---------- Vergleich
4.1.2 ---------- Beispiele
4.1.3 ---------- Sicherheitsaspekte
5. ------- CMS (Content-Managemenet-System)
6. ------- ASP C#
Und los geht's !
1.1 xampp
1.1.1 Installation
1.1.1 Installation
Download:
Die Installation sollte jeder selber hinbekommen.
In meinem Fall habe ich mir eine komplett neu formatierte Partition #DevArea(E:) erstellt und xampp in E:\xampp installiert.
Damit behält man am besten die Übersicht.
1.1.2 Eigene Domain: etc/host
Momentaner Stand:
Wenn wir localhost in die Adresszeile des Browsers eingeben, gelangen wir zu der Startseite von xampp.
Wir möchten allerdings eine "vernünftige" URL.
öffnet die Datei \\Windows\System32\drivers\etc\hosts mit einem Texteditor (der beste Editor ist immer noch notepad++).
Dort befinden sich einige Zeilen Code.
Wenn ihr beispielsweise
Code:
127.0.0.1 meineSeite.de
Eventuell könnt ihr die Datei nicht speichern, da euch die Berichtigung fehlt.
Dann müsst ihr in den Eigenschaften der Datei unter Sicherheit die Erweiterten Berechtigungen anpassen.
Wir möchten zwei Domains hinzufügen.
Code:
127.0.0.1 meineSeite.de 127.0.0.1 static.meineSeite.de
Wofür die static Domain ist, wird im Teil 1.1.4 (Cookieless Self Hosted CDN) erklärt.
1.1.3 virtual hosts
Die Startseite von xampp befindet sich im Ordner //xampp/htdocs
Mir gefällt dies persönlich nicht und daher werden wir dagegen was tun.
Ich habe auf meiner frischen Partition einen Ordner "//Server/default/" erstellt.
Dort kopieren wir nun den gesamte Inhalt von //xampp/htdocs hinein.
In dem Verzeichnis //Server soll für jede Zukünftige Seite ein neuer Ordner erstellt werden.
Wir erstellen also nun den Ordner //Server/meineSeite.de/
Jetzt wollen wir dies apache mitteilen.
Dazu öffnen wir die Datei E:\xampp\apache\conf\httpd.conf und suchen folgende Stelle:
Code:
DocumentRoot "E:/xampp/htdocs" <Directory "E:/xampp/htdocs">
Code:
DocumentRoot "E:/Server" <Directory "E:/Server">
Nun öffnen wir die Datei E:\xampp\apache\conf\extra\httpd-vhosts.conf und Verknüpfen unseren Ordner E:/Server/default mit localhost.
Code:
<VirtualHost *:80>
DocumentRoot "E:/Server/default"
ServerName localhost
</VirtualHost>
Anschließend müssen wir noch einen VirtualHost für unsere eigentliche Seite einrichten.
Code:
<VirtualHost *:80>
DocumentRoot "E:/Server/meineSeite.de"
ServerName meineSeite.de
</VirtualHost>
Dies sind die minimalen Optionen eines VirtualHosts. Damit begnügen wir uns aber nicht und fügen noch Parameter zum loggen von Fehlern hinzu:
Code:
<VirtualHost *:80>
DocumentRoot "E:/Server/meineSeite.de"
ServerName meineSeite.de
ErrorLog "apache_error.log"
CustomLog "apache_access.log" common
php_flag log_errors on
php_flag display_errors on
php_value error_reporting 2147483647
php_value error_log "php_error.log"
</VirtualHost>
Startet den Apache Server neu und testest alles im Browser.
localhost sollte euch zu der Startseite von XAMPP bringen und meineSeite.de zu einem - vermutlich leerem - Indexverzeichnis.
1.1.4 Cookieless Self Hosted CDN
Cookieless self hosted CDNs bedeutet, dass ihr eine subdomain einrichtet und über diese auf alle statischen Objekte (Bilder, Scripte, Styles) von eurer Hauptseite aus zugreift.
Der Vorteil daran ist, dass beim Anfordern der Objekte der Cookie-Header nicht mitgesendet wird und somit die Größe der angeforderten Daten minimiert wird.
Protokolle sind zudem so ausgelegt, dass sie nur eine limitierte Anzahl an Requests gleichzeitig pro domain verarbeiten.
Durch die Hinzunahme einer Subdomain, haben wir diese Anzahl verdoppelt, was zu einer enormen Leistungssteigerung führen kann.
Zugegebenermaßen ist dies für einen lokalen Testserver total nutzlos, allerdings empfinde ich es doch als wichtig, dass man diese Techniken verinnerlicht.
Wir müssen für unser CDN Verzeichnis ebenfalls einen VirtualHost erstellen.
Code:
<VirtualHost *:80>
DocumentRoot "E:/Server/meineSeite.de/static"
ServerName static.meineSeite.de
</VirtualHost>
In den Ordner E:/Server/meineSeite.de/static kommen demnächst alle statischen Inhalte für die jeweilige Seite ~
Apache neustarten und die Änderungen wurden übernommen.
1.1.5 TLS support + CERT creation
Transport Layer Security (TLS), damals Secure Sockets Layer (SSL), ist ein hybrides Verschlüsselungsprotokoll zur sicheren Datenübertragung im Internet.
Ohne TLS/SSL werden Daten unverschlüsselt übertragen und können von potentiellen Angreifern im Klartext ausgelesen werden.
Passwörter, Kreditkarteninfos, Anschrift, etc.. können also abgefangen werden.
Das TLS 1.2 Protokoll ist in zwei Layer aufgeteilt:
1) TLS Record Protocol
2) TLS Handshake Protocol
Die Verbindung ist mit einem symmetrischen Verfahren (AES, SCH, ...) verschlüsselt.
Der benötigte Schlüssel für diese Verfahren wird über das TLS Handshake Protocol ausgehandelt. Der Austausch findet i.d.R. verschlüsselt (RSA,DSS,..) statt.
In jeder Nachricht befindet sich (in der Regel..) ein message authentication code (MAC). Dieser MAC wird mit z.b. SHA256 gehasht. In TLS 1.2 ist das Standard-Hash-Verfahren noch MD5, in TLS 1.3 wird auf SHA256 gesetzt.
Zusammengefasst aus der RFC5246(TLS 1.2 - Introduction - Seite 3)
Quelle:
Im folgenden werden wir zur Verschlüsselung des Handshakes ein 2048bit RSA KeyPaar verwenden. Der MAC soll mit sha256 gehasht werden.
Als Anmerkung: 1048bit RSA Keys sind nicht mehr sicher. Solltet ihr noch so einen haben, wird dringend geraten, auf 2048bit oder 4096bit zu wechseln.
XAMPP liefert bereits eine fertige Methode um die benötigten Dateien zu erstellen, leider nur mit 1024bit und MD5 als hashing-algorithmus. Daher müssen wir eine kleine Änderung vornehmen:
//xampp/apache/makecert.bat mit einem Texteditor öffnen und Zeile 7 mit folgendem ersetzen (oder im Anhang die vollständige Batch herunterladen)
Code:
bin\openssl req -new -nodes -newkey rsa:2048 -out server.csr -sha256
Bei Common Name solltet ihr meineSeite.de angeben. Also die URL eurer Seite.
Ihr habt nun euer Zertifikat erstellt. Dieses Zertifikat nennt sich auch "Self Signed Certificate" weil es sich selbst signiert.
Der Nachteil daran ist, dass dieses Zertifikat von den Browsern als "nicht vertrauenswürdig" angesehen wird, da es sich eben selbst signiert und nicht von einer anerkannten Cert Seite stammt.
Diese Zertifikate sollten also nur für den Testbetrieb verwendet werden.
Für eine öffentliche Seite solltet ihr euch ein CERT kaufen.
Da wir bisher nur einen VirtualHost für den Port 80 erstellt haben, müssen wir noch einen für den Port 443 hinzufügen und dem Virtualhost sagen, dass er die SSLEngine verwenden soll und auf unsere generierten Zertifikate verweisen.
Code:
<VirtualHost *:443> DocumentRoot "E:/Server/meineSeite.de" ... SSLEngine on SSLCertificateFile "conf/ssl.crt/server.crt" SSLCertificateKeyFile "conf/ssl.key/server.key" </VirtualHost>
1.1.6 MySQL Benutzer
Anmerkung: Die folgenden Schritte kann man normalerweise auch über
ausführen, allerdings ist in der neusten Revision von xampp dieses Modul defekt und es schadet bestimmt auch nicht, wenn man weiß, wie man sowas manuell einrichtet.Nach einer Neuinstallation von XAMPP ist unsere Datenbank komplett ungeschützt und besitzt kein Passwort.
Als erstes wollen wir unterbinden, dass Nutzer sich ohne Passwort anmelden können. Dazu müssen wir die Option "AllowNoPassword" ändern.
Code:
File: //xampp/phpmyadmin/config.inc.php $cfg['Servers'][$i]['AllowNoPassword'] = false;
Momentan steht in der config noch, dass dieses Passwort aus der config-Datei gelesen werden soll:
$cfg['Servers'][$i]['auth_type'] = 'config';
Theoretisch ist das möglich, man müsste dann nur bei $cfg['Servers'][$i]['password'] = ''; ein Passwort setzen, allerdings wollen wir
keine klartext-Passwörter in einer Datei speichern, wir gehen einen anderen Weg und ändern dazu erstmal den authtype von config auf cookie:
Code:
$cfg['Servers'][$i]['auth_type'] = 'cookie';
Code:
mysqladmin.exe -u root password secret
Nun könnt ihr euch mit root@secret unter localhost/phpmyadmin anmelden.
1.2 Google Chrome
Für dieses Kapitel setze ich vorraus, dass ihr wisst, was CSS ist und wie man es verwendet.
Solltet ihr dies noch nicht wissen, verweise ich einfach mal auf den (noch nicht geschriebenen) Teil 2 dieser Serie.
1.2.1 Dev-Tools Einleitung
Was hat Google Chrome mit dem entwickeln von Webseiten zu tun ?
Nunja, Chrome bietet viele komfortable Möglichkeiten eine Seite zu erstellen. Zukünftig wollen wir nur noch selten notepad++ verwenden und alles in Chrome LIVE und PERSISTENT bearbeiten. Ausnahme ist ASP.NET, dafür hilft uns Chrome wenig.
Mit F12 öffnet ihr in Chrome die DevTools. Dort geht ihr in die Einstelllungen und aktiviert "Enable CSS Source Maps" sowie "Auto-reload generated CSS". (
) Dies benötigen wir später für LESS. Vorausblick: Wir verwenden eine art Programmiersprache und erzeugen unseren CSS Code dynamisch.Ein komplexeres Beispiel zu LESS
Code:
.-(@i : length(@tagsColors)) when (@i > 0){
@color: extract(@tagsColors, @i);
@name: extract(@tagsNames, @i);
.@{name}{
li:after {
background: @color;
.box-shadow-2(inset 1px 0 darken(@color, 20%));
}
span {
background: @color;
border-color: darken(@color, 8%) darken(@color, 10%) darken(@color, 12%);
.gradient(top, lighten(@color, 5%), darken(@color, 5%));
}
}
.-((@i - 1));
}.-;
Änderungen im Styles Fenster (1 auf dem Bild) sind leider nicht persistent. Um ein direktes bearbeiten zu ermöglichen,
müssen wir Workspaces einrichten.
1.2.2 Workspaces + Network mapping
Das Video erklärt die folgende Thematik sehr schön :)
Dann wollen wir mal als erstes unser Arbeitsverzeichnis festlegen.
In den DevTools gehen wir auf den Reiter Sources, Rechtsklick auf eine freie Fläche im linken Teil (der Source Tab, siehe Bild..). Es sollte nur "Add folder to Workspace" als Auswahl vorhanden sein. Sucht den Ordner //Server/meineSeite.de/ und fügt diesen hinzu.
als nächstes Navigiert ihr in Chrome zu eurer CSS Datei //Server/meineSeite.de/static/style.css oder wo auch immer diese liegen mag. In meinem Fall ist es //Server/meineSeite.de/adv.public/static/theme/default/admin.css .
Rechtsklick auf diese Datei und "Map to network resource".
Das folgende Fenster könnt ihr im Normalfall einfach mit Enter bestätigen.
Hier eine bebilderte kurze Anleitung:
Nun könnt ihr im "Styles Fenster" ( siehe Bild 1 ) Änderungen vornehmen und diese werden direkt gespeichert und euch live präsentiert. Ihr könnt auch HTML oder php Dateien so bearbeiten, alles kein Problem.
Falls ihr eine Datei zum bearbeiten in Chrome sucht, nutzt einfach mal die Tastenkombination STRG + o.
Im Teil 3 werde ich ein Video zur Arbeitsweise mit Chrome veröffentlichen. Dann sollte es nochmal klarer werden ;-)
Aber vorerst wird noch ein wenig mehr Wissen benötigt.
1.2.3 Cache Killer
Chrome, sowie jeder andere Browser, speichert statischen Inhalt im Cache. Wenn wir Änderungen an CSS Dateien vornehmen, kann es sein, dass diese Änderungen nicht sichtbar sind, da Chrome die im Cache gespeicherte Kopie verwendet.
Cache Killer ist ein Addon für Chrome, dass den Cache schnell an/aus schalten kann:
Nächstes Update wird ein wenig dauern, da ich ein eigenes MVC Framework von 0 aufbaue und die Schritte alle notieren muss. Inklusive Plugin-System zur einfachen an/abschaltung von diversen Funktionen.
to be continued...
