Fullstack-Entwicklung (eBook)
807 Seiten
Rheinwerk Computing (Verlag)
978-3-8362-9086-9 (ISBN)
Dieses Nachschlagewerk hilft Ihnen dabei, in der Flut aus Programmiersprachen, Technologien und Tools der Webentwicklung den Kopf über Wasser zu halten. Lernen Sie, welche Programmiersprache für Ihre individuellen Aufgaben die richtige ist und verstehen Sie die Zusammenhänge zwischen den verschiedenen Technologien.
Von HTML, CSS, JavaScript und PHP bis zu Webprotokollen, Webarchitektur u.v.m.
Die Grundlagen des Webs verstehen
Verschaffen Sie sich einen Überblick über die Funktionsweise des Internets und erfahren Sie, was es mit Begriffen wie URL, HTTP, DNS, HTML, CSS und JavaScript auf sich hat.
Webseitengestaltung und -interaktion
Alles, was Sie über die Frontend-Entwicklung wissen sollten: Strukturieren mit HTML, Gestaltung mit CSS, Interaktion mit JavaScript.
Backend-Programmierung
Lernen Sie die Grundlagen der gängigen Webarchitekturen und Programmiersprachen, die hinter jeder modernen Webseite stehen.
Philip Ackermann ist CTO der Cedalo GmbH und Autor mehrerer Fachbücher und Fachartikel über Java und JavaScript. Seine Schwerpunkte liegen in der Konzeption und Entwicklung von Node.js- und JEE-Projekten in den Bereichen Industrie 4.0 und Internet of Things.
Materialien zum Buch ... 21
Geleitwort ... 23
Vorwort ... 25
1. Die Grundlagen verstehen ... 29
1.1 ... Begrifflichkeiten ... 29
1.2 ... Aufbau von Webapplikationen ... 33
1.3 ... Fullstack-Entwicklung ... 37
1.4 ... Tools für Fullstack-Entwickler ... 45
1.5 ... Zusammenfassung und Ausblick ... 52
2. Webseiten strukturieren mit HTML ... 55
2.1 ... Einführung ... 55
2.2 ... Die wichtigsten Elemente verwenden ... 60
2.3 ... Zusammenfassung und Ausblick ... 83
3. Webseiten gestalten mit CSS ... 85
3.1 ... Einführung ... 86
3.2 ... Farben und Textformatierungen anwenden ... 98
3.3 ... Listen und Tabellen ... 111
3.4 ... Die verschiedenen Layoutsysteme verstehen ... 122
3.5 ... Zusammenfassung und Ausblick ... 140
4. Webseiten interaktiv machen mit JavaScript ... 145
4.1 ... Einführung ... 146
4.2 ... Variablen, Konstanten, Datentypen und Operatoren ... 153
4.3 ... Kontrollstrukturen verwenden ... 157
4.4 ... Funktionen und Fehlerbehandlung ... 161
4.5 ... Objekte und Arrays ... 165
4.6 ... Zusammenfassung und Ausblick ... 168
5. Webprotokolle verwenden ... 171
5.1 ... Hypertext Transfer Protocol ... 171
5.2 ... Bidirektionale Kommunikation ... 189
5.3 ... Zusammenfassung und Ausblick ... 193
6. Webformate verwenden ... 195
6.1 ... Datenformate ... 196
6.2 ... Bildformate ... 207
6.3 ... Video- und Audioformate ... 215
6.4 ... Zusammenfassung und Ausblick ... 219
7. Web-APIs verwenden ... 221
7.1 ... Webseiten dynamisch ändern mit der DOM API ... 222
7.2 ... Daten asynchron laden mit Ajax und der Fetch API ... 233
7.3 ... Weitere Web-APIs ... 240
7.4 ... Zusammenfassung und Ausblick ... 244
8. Webseiten für Barrierefreiheit optimieren ... 247
8.1 ... Einführung ... 247
8.2 ... Bestandteile einer Webseite barrierefrei machen ... 254
8.3 ... Testen von Barrierefreiheit ... 274
8.4 ... Zusammenfassung und Ausblick ... 278
9. CSS vereinfachen mit CSS-Präprozessoren ... 281
9.1 ... Einführung ... 282
9.2 ... Sass verwenden ... 285
9.3 ... Zusammenfassung und Ausblick ... 307
10. Single-Page-Applikationen implementieren ... 309
10.1 ... Einführung ... 309
10.2 ... Setup ... 312
10.3 ... Komponenten -- die Bausteine einer React-Applikation ... 316
10.4 ... Styling von Komponenten ... 321
10.5 ... Komponentenhierarchien ... 327
10.6 ... Formulare ... 331
10.7 ... Die Kontext-API ... 335
10.8 ... Routing ... 339
10.9 ... Zusammenfassung und Ausblick ... 342
11. Mobile Anwendungen implementieren ... 345
11.1 ... Die unterschiedlichen Arten mobiler Anwendungen ... 345
11.2 ... Responsive Design ... 353
11.3 ... Cross Platform Development mit React Native ... 367
11.4 ... Zusammenfassung und Ausblick ... 379
12. Webarchitekturen verstehen und einsetzen ... 381
12.1 ... Schichtenarchitekturen ... 382
12.2 ... Monolithen und verteilte Architekturen ... 389
12.3 ... MV*-Architekturen ... 398
12.4 ... Zusammenfassung und Ausblick ... 403
13. Programmiersprachen auf der Serverseite verwenden ... 407
13.1 ... Arten von Programmiersprachen ... 408
13.2 ... Programmierparadigmen ... 412
13.3 ... Welche Programmiersprachen gibt es? ... 420
13.4 ... Zusammenfassung und Ausblick ... 432
14. JavaScript auf der Serverseite verwenden ... 435
14.1 ... JavaScript unter Node.js ... 436
14.2 ... Die eingebauten Module verwenden ... 447
14.3 ... Einen Webserver implementieren ... 452
14.4 ... Zusammenfassung und Ausblick ... 462
15. Die Sprache PHP verwenden ... 465
15.1 ... Einführung in die Sprache PHP ... 465
15.2 ... PHP und Webserver lokal installieren ... 466
15.3 ... Variablen, Datentypen und Operatoren ... 467
15.4 ... Kontrollstrukturen verwenden ... 476
15.5 ... Funktionen und Fehlerbehandlung ... 480
15.6 ... Klassen und Objekte verwenden ... 486
15.7 ... Dynamische Webseiten mit PHP entwickeln ... 491
15.8 ... Zusammenfassung und Ausblick ... 503
16. Webservices implementieren ... 505
16.1 ... Einführung ... 505
16.2 ... SOAP ... 507
16.3 ... REST ... 513
16.4 ... GraphQL ... 533
16.5 ... Zusammenfassung und Ausblick ... 537
17. Daten in Datenbanken speichern ... 541
17.1 ... Relationale Datenbanken ... 542
17.2 ... Nicht relationale Datenbanken ... 565
17.3 ... Zusammenfassung und Ausblick ... 572
18. Webanwendungen testen ... 575
18.1 ... Automatisierte Tests ... 576
18.2 ... Testabdeckung ... 586
18.3 ... Test-Doubles ... 589
18.4 ... Zusammenfassung und Ausblick ... 594
19. Webanwendungen deployen und hosten ... 597
19.1 ... Einführung ... 597
19.2 ... Container Management ... 608
19.3 ... Zusammenfassung und Ausblick ... 620
20. Webanwendungen absichern ... 623
20.1 ... Sicherheitslücken ... 624
20.2 ... Verschlüsselung und Kryptografie ... 633
20.3 ... SOP, CSP und CORS ... 637
20.4 ... Authentifizierung ... 647
20.5 ... Zusammenfassung und Ausblick ... 651
21. Die Performance von Webanwendungen optimieren ... 655
21.1 ... Einführung ... 656
21.2 ... Möglichkeiten der Optimierung ... 665
21.3 ... Zusammenfassung und Ausblick ... 684
22. Webprojekte organisieren und verwalten ... 687
22.1 ... Arten von Versionsverwaltungssystemen ... 688
22.2 ... Das Versionsverwaltungssystem Git ... 691
22.3 ... Zusammenfassung und Ausblick ... 705
23. Webprojekte managen ... 709
23.1 ... Klassisches Projektmanagement vs. agiles Projektmanagement ... 710
23.2 ... Agiles Projektmanagement mit Scrum ... 712
23.3 ... Zusammenfassung und Ausblick ... 724
Anhang ... 727
A ... HTTP ... 729
B ... HTML-Elemente ... 753
C ... Tools und Befehlsreferenzen ... 767
D ... Schlusswort ... 781
Index ... 783
1 Die Grundlagen verstehen
In diesem Kapitel geht es zunächst darum, Ihnen einen Überblick über die Webentwicklung zu geben und die wichtigsten Begrifflichkeiten zu erläutern.
Jeder spricht von Fullstack-Entwicklung, doch um zu verstehen, was das eigentlich ist, müssen wir uns erst mal mit den Grundlagen beschäftigen. Im ersten und im zweiten Teil dieses Kapitels geht es genau um diese Grundlagen, bevor wir uns im dritten Teil des Kapitels dem Begriff Fullstack-Entwicklung widmen.
1.1 Begrifflichkeiten
In diesem Teil möchte ich Ihnen zunächst eine Übersicht über wichtige Begrifflichkeiten geben, die in der Webentwicklung relevant sind. Anschließend schauen wir uns dann den grundsätzlichen Aufbau von Webanwendungen an.
1.1.1 Client und Server
Webseiten und Webanwendungen (Definition und Unterschied siehe Kasten) bestehen aus einem Teil, der auf der Clientseite ausgeführt wird (dem Frontend), und einem Teil, der auf der Serverseite ausgeführt wird (dem Backend). Auf Serverseite sorgt ein Webserver dafür, dass die Webseite bereitgestellt wird. Auf Clientseite greift man über einen Webclient (auch nur Client oder auch User Agent genannt) auf die Webanwendung zu. In der Regel handelt es sich dabei um einen Webbrowser (kurz: Browser), aber es gibt auch noch andere Arten von Clients wie beispielsweise Screenreader, kommandozeilenbasierte bzw. programmatisch gesteuerte HTTP-Clients oder sogenannte Headless Browser, die keine grafische Oberfläche haben.
Ruft man im Browser eine Webseite auf, ist der Ablauf dabei folgender: Auf Clientseite gibt der Nutzer im Browser die Adresse ein (auch URL für Uniform Resource Locator, siehe auch nächster Abschnitt) und bestätigt mit entsprechender Taste bzw. entsprechendem Button im Browser das »Laden« der Webseite. Der Browser generiert daraufhin im Hintergrund eine Anfrage, die über das HTTP-Protokoll (Kapitel 5, »Webprotokolle verwenden«) an den Server gesendet wird. Diese Anfrage nennt man auch HTTP-Anfrage oder HTTP-Request. Auf Serverseite nimmt der Webserver die Anfrage entgegen und generiert eine passende Antwort (HTTP-Antwort bzw. HTTP-Response), die er dann an den Client zurückschickt. Der Browser wiederum nimmt die Antwort entgegen und rendert, sprich, visualisiert die Webseite. Eventuell benötigte Ressourcen wie Bilder etc. lädt der Browser dabei automatisch nach, damit sie dargestellt werden können.
Abbildung 1.1 Das Prinzip von Client und Server
Begriffsdefinition
Ich verwende in diesem Buch immer wieder die Begriffe Webseite, Website und Webanwendung, die oftmals fälschlicherweise synonym verwendet werden. Daher an dieser Stelle eine kurze Klarstellung und Definition: Eine Webseite bezeichnet ein einzelnes HTML-Dokument, das unter einer bestimmten URL abgerufen werden kann (HTML für Hypertext Markup Language, dazu gleich mehr), eine Website dagegen ist eine Zusammenfassung verschiedener solcher einzelner Webseiten, beispielsweise die Website zum Buch https://www.webdevhandbuch.de/ oder die Verlagswebsite https://www.rheinwerk-verlag.de/. Bei einer Webanwendung dagegen handelt es sich um eine Website, die sich eher wie eine Desktopanwendung anfühlt. Beispiele hierfür sind Google Documents und Google Sheets. Ein synonymer Begriff für solche (vor allem interaktiven und mitunter komplexen) Webanwendungen ist auch Rich Internet Application.
1.1.2 Zusammenhang von URLs, Domains und IP-Adressen
Die Adresse, die man in die Adressleiste des Browsers eingibt, wird wie erwähnt als URL (Uniform Resource Locator) bezeichnet. Beispiele für URLs sind:
-
https://www.philipackermann.de/
-
https://www.philipackermann.de/static/img/profile.jpg
-
https://www.webdevhandbuch.de/static/styles/styles.css
-
https://www.webdevhandbuch.de/service/api/users?search=max
Eine URL besteht dabei aus verschiedenen Teilen:
Abbildung 1.2 Aufbau von URLs
-
Protokoll/Schema: Definiert das zu verwendende Protokoll. Mögliche Protokolle sind beispielsweise:
-
HTTP (Hypertext Transfer Protocol): Für das Übertragen von Webseiten wird das Protokoll HTTP verwendet oder dessen sichere Variante HTTPS (Hypertext Transfer Protocol Secure).
-
FTP (File Transfer Protocol): Dieses Protokoll dient dem Übertragen von Dateien zu oder von einem FTP-Server.
-
SMTP (Simple Mail Transfer Protocol): Dieses Protokoll kommt für das Übertragen von E-Mails zum Einsatz.
-
-
Host (auch Hostname): Identifiziert den Webserver eindeutig. Der Host besteht dabei aus Subdomain, Domain und Top-Level-Domain. Der Host »www.philipackermann.de« beispielsweise besteht aus der Subdomain »www«, der Domain »philipackermann« und der Top-Level-Domain »de«.
-
Port: Gibt an, über welchen »Kanal« auf den Webserver zugegriffen werden soll. In der Regel werden Sie diesen Teil beim »normalen Browsen« nicht sehen, da die Standardports (beispielsweise 80 für HTTP oder 443 für HTTPS, siehe auch https://de.wikipedia.org/wiki/Liste_der_standardisierten_Ports) von den Browsern in der Adressleiste nicht angezeigt werden. Für die lokale Entwicklung und insbesondere für die Entwicklung von Webservices (Kapitel 13, »Programmiersprachen auf der Serverseite verwenden«) werden Sie es allerdings häufiger mit individuellen Ports zu tun haben. Beispielsweise könnte eine URL eines lokal auf Ihrem Rechner laufenden Webservices so aussehen: »http://localhost:8080/myservice/api/users«.
-
Pfad (auch Path): Gibt den Pfad auf dem Webserver zu der angefragten Datei an (bzw. allgemeiner zu der angefragten Ressource, weil es sich nicht immer um eine Datei im physischen Sinne handeln muss). In der URL »https://www.philipackermann.de/static/img/profile.jpg« beispielsweise ist »/static/img/profile.jpg« der Pfad. Der Pfadtrenner ist dabei immer ein vorwärts gerichteter Schrägstrich (Slash).
-
Query String: Hierüber können in Form von Schlüssel-Wert-Paaren zusätzliche Informationen übergeben werden, anhand derer der Webserver die HTTP-Antwort generieren kann. Der Query String wird dabei über ein Fragezeichen eingeleitet, die einzelnen Query-String-Parameter sind durch ein kaufmännisches »Und« verbunden und die Schlüssel und Werte jeweils durch ein Gleichheitszeichen getrennt, also zum Beispiel »https://www.philipackermann.de/example?search=javascript&display=list«.
-
Fragment: Hierüber können Sie gezielt eine bestimmte Stelle innerhalb der jeweiligen Webseite »ansteuern«, sodass der Browser beim Laden der Webseite direkt dorthin »springt«. Eingeleitet wird dieser Teil durch das #-Zeichen, also beispielsweise »https://www.philipackermann.de/example#chapter5«.
IP-Adressen und DNS
Jeder Webserver hat eine eindeutige Adresse, über die er erreichbar ist: die sogenannte IP-Adresse, wobei mittlerweile zwischen IPv4 und IPv6 unterschieden wird. Technisch gesehen handelt es sich im Falle von...
| Erscheint lt. Verlag | 5.4.2023 |
|---|---|
| Zusatzinfo | Illustrationen |
| Verlagsort | Bonn |
| Sprache | deutsch |
| Themenwelt | Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge |
| Mathematik / Informatik ► Informatik ► Web / Internet | |
| ISBN-10 | 3-8362-9086-3 / 3836290863 |
| ISBN-13 | 978-3-8362-9086-9 / 9783836290869 |
| Informationen gemäß Produktsicherheitsverordnung (GPSR) | |
| Haben Sie eine Frage zum Produkt? |
EPUB (Wasserzeichen)Größe: 20,5 MB
DRM: Digitales Wasserzeichen
Dieses eBook enthält ein digitales Wasserzeichen und ist damit für Sie personalisiert. Bei einer missbräuchlichen Weitergabe des eBooks an Dritte ist eine Rückverfolgung an die Quelle möglich.
Dateiformat: EPUB (Electronic Publication)
EPUB ist ein offener Standard für eBooks und eignet sich besonders zur Darstellung von Belletristik und Sachbüchern. Der Fließtext wird dynamisch an die Display- und Schriftgröße angepasst. Auch für mobile Lesegeräte ist EPUB daher gut geeignet.
Systemvoraussetzungen:
PC/Mac: Mit einem PC oder Mac können Sie dieses eBook lesen. Sie benötigen dafür die kostenlose Software Adobe Digital Editions.
eReader: Dieses eBook kann mit (fast) allen eBook-Readern gelesen werden. Mit dem amazon-Kindle ist es aber nicht kompatibel.
Smartphone/Tablet: Egal ob Apple oder Android, dieses eBook können Sie lesen. Sie benötigen dafür eine kostenlose App.
Geräteliste und zusätzliche Hinweise
Buying eBooks from abroad
For tax law reasons we can sell eBooks just within Germany and Switzerland. Regrettably we cannot fulfill eBook-orders from other countries.
aus dem Bereich
