Moderne Webseiten entwickeln – Das umfassende Training

Geballtes Praxiswissen zu allen Webtechnologien – inklusive HTML5, CSS3, jQuery, PHP, MySQL und mehr
4.3 (4 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
15 students enrolled
$120
Take This Course
  • Lectures 119
  • Length 14 hours
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 German

Course Description

In diesem Video-Training erfahren Sie alles, was Sie für die Entwicklung zukunftssicherer Webseiten und Webanwendungen brauchen. André Wösten führt Sie zunächst in die Grundlagen von HTML5, CSS3, JavaScript und PHP ein. Anschließend lernen Sie, wie Sie Ihre Webseiten mit modernen Funktionen ausstatten, und steigen dabei tiefer in jQuery, Base und Twitter Bootstrap ein. Profitieren Sie außerdem von zahlreichen Tipps zu Suchmaschinen-Optimierung, Usability und Responsive Webdesign.

  • Moderne Frameworks und Design-Templates direkt im Einsatz verstehen
  • Alle Webtechniken live erklärt: HTML, CSS, PHP, MySQL, jQuery u.v.m.
  • Tipps zu Website-Optimierung, Responsive Design und SEO

André Wösten ist Experte für Joomla! und arbeitet als selbstständiger Trainer und Software-Entwickler. Seine Spezialgebiete sind Content-Management-Systeme und die Webentwicklung mit jQuery, HTML5 und CSS3. Als Entwickler reizen ihn vor allem größere Projekte wie die Umsetzung von Internet-Portalen. Für »X Training« schult er Firmen und Anwender in allen Themen rund um Programmierung und Web.

What are the requirements?

  • Grundkenntnisse in der Webentwicklung sind hilfreich aber nicht erforderlich.

What am I going to get from this course?

  • Werden Sie mit diesem umfassenden Kurs zum Webentwickler. Bauen Sie mit PHP ein Backend auf, programmieren Sie Webseiten mit HTML und CSS und bringen Sie mit jQuery und JavaScript Leben auf Ihre Seiten.
  • Erstellen Sie im Handumdrehen das Grundgerüst Ihrer Webseite mit bewährten Templates und Designvorlagen. Lernen Sie außerdem Frameworks wie jQuery kennen, mit denen Sie bequem die Funktionen Ihrer Website programmieren.
  • Lernen Sie durch Live-Coding, wie Sie Ihre Webseiten von Grund auf programmieren. Mit dem mitgelieferten Übungsmaterial können Sie alle Übungen sofort mitmachen.

What is the target audience?

  • Jeder, der sich zum Webentwickler weiterbilden möchte
  • Webdesigner, die die Technik in den Griff bekommen möchten
  • Alle, die eigene Web-Projekte planen und umsetzen möchten

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Einführung in die moderne Webentwicklung
00:20

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Inhalte dieses Kapitels. Hier lernen Sie die neuesten Standards der Webentwicklung kennen und lernen, wie Sie eine moderne Entwicklungsumgebung richtig konfigurieren.

03:00

In diesem Video erklärt Ihnen Ihr Trainer, wie sich der Job des Webentwicklers in den letzten Jahren verändert hat. Sie lernen die Vielfalt der neuen Webstandards kennen und erfahren, wie Sie den Anforderungen heterogener Zielgruppen und Endgeräte am besten begegnen.

09:50

Moderne Webentwicklung erfordert Kenntnis über die verschiedenen Websprachen und Techniken. In diesem Video verschaffen Sie sich einen Überblick über HTML, CSS und weitere Webstandards.

05:54

Ein Content-Management-System (CMS) ermöglicht es Ihnen, Webseiten auf einfache Weise darzustellen und zu verwalten. Ihr Trainer stellt Ihnen in diesem Video die wichtigsten Systeme vor und erklärt den Unterschied zwischen Frontend und Backend.

08:34

Zu den Werkzeugen des Webentwicklers gehört auch ein lokaler Webserver mit angebundener Datenbank. Damit können Sie Ihre Website zunächst in Ruhe auf Ihrem Rechner entwickeln, bevor Sie sie live schalten. In diesem Video erfahren Sie, wie Sie das Server-Paket »XAMPP« auf einem Windows-Betriebssystem installieren.

05:52

»XAMPP« gibt es auch als eigene Distribution für den Mac. André Wösten erklärt Ihnen in diesem Video, wie Sie das Server-Paket auf dem Mac-Betriebssystem installieren und einrichten.

06:40

In diesem Video installieren Sie den Texteditor »Notepad++«. André Wösten zeigt Ihnen anschließend noch nützliche Browser-Plug-ins und stellt Ihnen weitere Werkzeuge vor, die Ihnen die Arbeit als Webentwickler spürbar erleichtern.

07:34

Für Mac-Anwender gibt es den Webeditor »Sublime Text«, der ein sehr nützliches Werkzeug für die Webentwicklung darstellt. André Wösten führt Sie in diesem Video durch die Installation dieses Tools und richtet anschließend noch eine FTP-Verbindung ein.

Übungsmaterial zu den einzelnen Abschnitten
Article
Section 2: Seiteninhalte mit HTML und CSS erstellen und gestalten
00:23

In diesem Video stellt Ihnen Ihr Trainer die beiden Themenblöcke des Kapitels vor. Sie lernen hier die Auszeichnungssprache HTML und die Formatierungssprache CSS kennen.

05:41


Die Grundstruktur einer Webseite wird durch die Auszeichnungssprache HTML festgelegt. In diesem Video wirft André Wösten einen Blick zurück in die Vergangenheit und zeigt auf, wie sich der HTML-Standard von den Anfängen bis hin zu HTML5 entwickelt hat.

10:43

HTML-Dokumente bestehen aus einem Seitenkopf, dem sogenannten »Head«, und einem Rumpf, dem »Body«. Was diese beiden Teile voneinander abgrenzt und wie Sie beim Aufbau des HTML-Grundgerüsts am besten vorgehen, zeigt Ihnen Ihr Trainer in diesem Video.

10:38

In diesem Video zeichnet Ihr Trainer Überschriften aus und fügt dem HTML-Dokument Absätze und Links hinzu. Sie lernen außerdem, weshalb Sie unbedingt den Zeichensatz Ihres Dokuments in den Metadaten angeben sollten.

15:56

Mit Cascading Style Sheets (CSS) können Sie die Elemente Ihrer Webseite nach Belieben formatieren und gestalten. Lernen Sie in diesem Video, wie Sie Selektoren verwenden, Regelsätze notieren und CSS-Stile überschreiben.

10:03

Mit CSS können Sie sowohl individuelle Stile zuweisen, als auch ganze Klassen von Elementen gestalten. In diesem Video lernen Sie am Beispiel einer Liste, wie Sie Klassenselektoren und IDs richtig einsetzen.

14:00

Mit CSS bestimmen Sie auch die Farbgebung Ihrer Webseiten. André Wösten zeigt Ihnen in diesem Video, wie Sie RGB-Farbwerte definieren, Seitenelemente umfärben und Transparenzen erzeugen.

06:19

Die Typografie von Webseiten hat in den letzten Jahren erheblich an Bedeutung gewonnen. In diesem Video lernen Sie, wie Sie neue Schriftarten importieren und einzelne Textteile kursiv oder fett setzen.]

07:51

CSS bietet Ihnen die Möglichkeit, verschiedene Schriftgrößen anzugeben. Neben der absoluten Größenangabe in Pixeln können sie auch relative Angaben in Prozent oder in der Einheit »em« machen.

03:59

Das Document Object Model (DOM) beschreibt die Objektstruktur eines HTML-Dokuments. Dabei besteht die DOM-Hierarchie aus mehreren voneinander abhängigen »Knoten«. Diese Struktur der Webseite können Sie übrigens auch mit den Entwickler-Tools Ihres Browsers einsehen


10:22

Jedes Element einer Webseite erzeugt eine Box mit eigenen Abständen und Rahmen. Welche unterschiedlichen Box-Modelle es gibt und wie Sie deren Abstände kontrollieren können, erfahren Sie in diesem Video. Außerdem lernen Sie hier die neuen CSS3-Boxen kennen.

06:06

In diesem Video lernen Sie, wie Sie Seitenelemente platzieren und ihnen fixe Positionen zuweisen. Außerdem erfahren Sie, wie Sie auf die CSS-Referenz zugreifen können, um sich über alle CSS-Eigenschaften umfassend zu informieren.

Section 3: Web-Programmierung mit JavaScript
00:24

Dieses Video führt Sie in das Kapitel ein. André Wösten erklärt Ihnen zunächst die Web-Programmiersprache JavaScript und stellt Ihnen anschließend die JavaScript-Bibliothek »jQuery« vor

06:01

Mit JavaScript programmieren Sie Code, der direkt auf dem Rechner des Seitenbesuchers ausgeführt wird. André Wösten stellt Ihnen in diesem Video die Geschichte von JavaScript vor und erklärt Ihnen, welchen Nutzen moderne Bibliotheken haben.

04:29

Damit Sie das HTML-Grundgerüst nicht für jede Seite neu schreiben müssen, greifen Sie auf ein vorgefertigtes Template zurück. In diesem Video zeigt Ihnen André Wösten, wie Sie das Template »HTML5 Boilerplate« herunterladen und nach Ihren Wünschen konfigurieren.

11:20

In diesem Video schreiben Sie mit der Textausgabe »Hallo Welt!« Ihr erstes JavaScript-Programm. Sie erweitern zudem Ihren Texteditor um zusätzliche Funktionen und machen sich mit dem Boilerplate-Template vertraut.

10:02

In diesem Video lernen Sie, wie Sie Variablen mit JavaScript anlegen. Sie setzen Zahlen- und Wahrheitswerte für Berechnungen ein und programmieren eine bedingte Anweisung mit »if« und »else«.

10:18

Der JavaScript-Datentyp »Array« entspricht einer nummerierten Liste mit mehreren Elementen. In diesem Video lernen Sie, wie Sie Werte in Arrays speichern und diese anschließend mit einer Schleife wieder ausgeben.

06:12

Programmteile, die zusammengehören, können in sogenannten »Funktionen« ausgelagert werden. André Wösten zeigt Ihnen in diesem Video, wie Sie Variablen an eine Funktion übergeben und sich die berechneten Werte wieder zurückliefern lassen.

07:23

JavaScript-Objekte sind komplexe Datentypen mit Eigenschaften und Methoden. Am Beispiel eines Fahrzeugs lernen Sie in diesem Video Grundzüge der Objektorientierung kennen.

06:51

Ein Prototyp ist vergleichbar mit einem Bauplan, mit dem sich einzelne Objekte konstruieren lassen. Wie Sie die Instanzen eines Prototyps erzeugen, erklärt Ihnen Ihr Trainer in diesem Video.

06:18

In diesem Video lernen Sie das Framework »jQuery« kennen, das Ihnen die Arbeit mit JavaScript wesentlich erleichtert. Vor dem Einsatz dieser Programmbibliothek müssen Sie jedoch zunächst sicherstellen, dass die Seite auch vollständig geladen wurde.

07:44

Mit dem jQuery-Framework können Sie Seitenelemente ein- und ausblenden, animieren und dynamisch erzeugen. André Wösten zeigt Ihnen in diesem Video, wie Sie Ihre Website um interaktive Funktionen erweitern.

05:10

Viele Effekte können Sie sowohl mit JavaScript, als auch mit CSS3 erzeugen, wie André Wösten Ihnen in diesem Video zeigt. Sie werden aber sehen, dass es häufig einfacher ist, die CSS-Variante zu verwenden.

Section 4: Das Frontend des Beispielprojekts entwickeln
00:25

In diesem Training entwickeln Sie eine komplette Website, inklusive Frontend und Backend. In den folgenden Videos präsentiert Ihnen Ihr Trainer das Beispielprojekt – die Website eines Musiklabels – und zeigt Ihnen, wie Sie ein eigenes Web-Layout erzeugen.

05:23

Für das Beispielprojekt hat Ihr Trainer bereits ein grafisches Layout in Adobe Illustrator vorbereitet. In diesem Video bestimmen Sie alle Elemente der geplanten Webseite und verschaffen sich hier einen ersten Eindruck von ihrer Struktur.

04:53

In diesem Video erklärt Ihnen Ihr Trainer die verschiedenen Schichten einer Webanwendung. Während die Datenverarbeitung auf dem Server mit PHP und MySQL gesteuert wird, besteht der Code einer Webseite aus HTML, CSS und JavaScript

10:42

Grid-Systeme unterstützen Sie bei der Erstellung moderner, mehrspaltiger Layouts. In diesem Video lernen Sie das Grid-System »Base« kennen und erfahren, wie Sie die Spaltenbreite für unterschiedliche Layouts berechnen.

09:44

In diesem Video beginnen Sie mit der Umsetzung des Webprojekts. Sie gestalten einen Header, entwerfen ein mehrspaltiges Layout und generieren einen Farbverlauf mit CSS3. Als Vorlage dient Ihnen dabei das Beispiel-Design aus Adobe Illustrator

10:19

In diesem Video zeigt Ihnen André Wösten, wie Sie mit CSS3 Schatteneffekte erzeugen. Außerdem bereiten Sie eine Grafik vor, die Sie im Folgenden für einen mehrfarbigen Seitenkopf verwenden können.

09:40

André Wösten zeigt Ihnen in diesem Video, wie Sie Farben und Grafiken kombinieren, um einen attraktiven Gestaltungseffekt zu erzielen. Außerdem lernen Sie die CSS-Eigenschaft »z-index« kennen, mit der sich Seitenelemente verdecken lassen.

05:25

Um einen Inhaltsbereich semantisch auszuzeichnen, können Sie das HTML5-Tag »ARTICLE« verwenden. In diesem Video sehen Sie außerdem, wie Sie RGB-Farben als Hexadezimalcode notieren, Blindtext erzeugen und die Textdarstellung anpassen.

04:22

Schraffierte Flächen gestalten Sie ganz einfach mit dem passenden Hintergrundbild. Die Ausgangsgrafik in diesem Video ist dabei lediglich 36 Pixel groß, da sich das Muster auf der gesamten Fläche wiederholt.

10:08

André Wösten zeigt Ihnen in diesem Video, wie Sie Icons für Social-Media-Plattformen in den Seitenfuß einbinden und horizontal anordnen. Außerdem erfahren Sie, wie Sie Listenelemente und Links formatieren.

09:40

In diesem Video binden Sie Logo und Menü in die Webseite ein. André Wösten erklärt Ihnen außerdem, weshalb Sie jede Navigation mit dem semantischen HTML5-Element »NAV« markieren sollten.

06:06

»Google Fonts« bietet Ihnen die Möglichkeit, neue Schriftarten in Ihre Seite einzubinden. Die Vorgehensweise ist denkbar einfach: Sie wählen die gewünschte Schriftart aus und importieren dazu lediglich eine Zeile Code in Ihr HTML- oder CSS-Dokument

Section 5: Interaktivität und Multimedia
00:21

In diesem Kapitel erwecken Sie die Beispielsite mit multimedialen Inhalten zum Leben. Außerdem erstellen Sie eine Navigation und statten die Menü-Elemente mit modernen Hover-Effekten und Animationen aus

10:04

In diesem Video dreht sich alles um die Navigation der Webseite. Sie lernen unter anderem, wie Sie Menüs verschachteln, ausblenden und positionieren. Außerdem zeigt Ihnen Ihr Trainer, wie Sie mit CSS3-Pseudoklassen einfache Hover-Effekte erzeugen.

10:34

»Transitions« sind Animationen, die Sie mit CSS3 automatisch berechnen lassen können. In diesem Video erstellt André Wösten einen komplexen Hover-Effekt für die Navigation der Website und gibt Ihnen einen Ausblick auf die Zukunft von CSS3.

10:27

Noch mehr Möglichkeiten für animierte Elemente erhalten Sie, wenn Sie das JavaScript-Framework »jQuery« nutzen. Gegenüber den CSS3-Transitions bietet Ihnen jQuery unter anderem den Vorteil einer besseren Kompatibilität zu aktuellen Browsern.

05:55

Für jQuery existiert eine Vielzahl an kostenlosen Plug-ins. Mit der freien Erweiterung »Unslider« beispielsweise lassen sich elegante Foto-Präsentationen erzeugen. In diesem Video laden Sie das Plug-in zunächst von der Open-Source-Plattform »GitHub« herunter

12:38

In diesem Video erstellen Sie Ihre eigene Fotogalerie mit dem Plug-in »Unslider«. André Wösten erklärt Ihnen, wie Sie das Skript in Ihre Seite einbinden und die Darstellung anpassen.

03:14

In diesem Video installieren Sie weitere Plug-ins, damit die Galerie auch auf einem Touchscreen angezeigt und bedient werden kann. André Wösten zeigt Ihnen, in welcher Reihenfolge Sie die Bibliotheken einbinden.

04:46

Um Musikdateien auf Ihrer Website abspielen zu können, benötigen Sie einen Audio-Player. In diesem Video bereiten Sie zunächst den HTML-Code vor und gestalten einen Play-Button, bevor Sie die nötigen Bibliotheken einbinden.

08:24

Die JavaScript-Bibliotheken von »SoundManager 2« enthalten alle Funktionen, die Sie für das Abspielen von Audiodaten im Browser benötigen. André Wösten demonstriert Ihnen in diesem Video, wie Sie den Player einbinden und initialisieren.

06:47

Nicht jedes Videoformat lässt sich problemlos im Browser abspielen. In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die gängigen Videoformate im Web und erklärt Ihnen, wie Sie Videos für die Veröffentlichung online konvertieren.

11:38

Mit der jQuery-Erweiterung »jPlayer« können Sie konvertierte Videos auf Ihrer Webseite abspielen. André Wösten zeigt Ihnen in diesem Video, wie Sie den jPlayer integrieren und die Darstellung an Ihre Wünsche anpassen.

Section 6: Responsive Design umsetzen
00:27

In diesem Video führt Sie André Wösten in die Themen dieses Kapitels ein, in dem Sie Ihre Webseite auf verschiedenen Geräten testen und sicherstellen, dass alle Inhalte korrekt angezeigt werden.

04:46

In diesem Video erklärt Ihnen Ihr Trainer, weshalb es wichtig ist, die Darstellung Ihrer Webseite in verschiedenen Umgebungen zu testen. Dabei müssen Sie jedoch nicht nur die verschiedenen Browser, sondern auch die Vielfalt an digitalen Endgeräten berücksichtigen.

05:28

Smartphones und Tablet-PCs stellen Webseiten anders dar als hochauflösende Monitore von Desktop-Rechnern. Mit dem »Ripple Emulator« lassen sich unterschiedliche Geräte simulieren und Fehler in der Anzeige einer Webseite finden, die anschließend behoben werden können.

12:09

Das Grid-System »Base« bietet Ihnen die Möglichkeit, alternative Layouts für die Anzeige auf Tablets zu definieren. Bestehen weiterhin Probleme mit der absoluten Positionierung, können Sie für deren Lösung auf die sogenannte »Referenz-Box« zurückgreifen.

05:31

Smartphones haben eine besonders geringe Auflösung. Oft empfiehlt es sich deshalb, die Navigation der Webseite auszublenden und in eine Auswahlliste zu verlagern. Wie Sie Ihre Webseiten fit  für mobile Endgeräte machen, erfahren Sie in diesem Video.

03:15

Mehrspaltige Layouts wirken bei geringer Auflösung häufig zu eng auf den Betrachter. André Wösten zeigt Ihnen in diesem Video, wie Sie eine proportionale Spaltenbreite wählen, sodass Ihre Inhalte auch auf mobilen Geräten ansprechend dargestellt werden.

Section 7: Dynamische Websites mit PHP entwickeln
00:20

In diesem Video erfahren Sie mehr über die Inhalte des Kapitels. Sie lernen, wie Sie mit PHP einen Webserver programmieren, und legen den Grundstein für die Arbeit mit Datenbanken.

09:35

PHP ist die am weitesten verbreitete Server-Skriptsprache. Wie Sie mit PHP statische Webseiten um dynamische Funktionen erweitern, erklärt Ihnen André Wösten in diesem Video.

07:10

In diesem Video schreiben Sie Ihr erstes PHP-Programm. Sie lernen, wie Sie eine PHP-Datei anlegen, Text ausgeben und Statusinformationen anzeigen lassen. Außerdem zeigt Ihnen Ihr Trainer, wo Sie die PHP-Dokumentation finden.

03:48

Mehrzeilige Kommandos sind in PHP nichts Ungewöhnliches. In diesem Video lernen Sie, wie Sie Anweisungen kombinieren, Ihren Code mit Kommentaren versehen und Fehlermeldungen anzeigen.

09:37

In diesem Video zeigt Ihnen André Wösten, wie Sie Variablen mit PHP erstellen und Werte berechnen, die Sie anschließend inkrementieren oder miteinander verketten können.

12:50

In diesem Video entwickeln Sie ein Bestellformular mit PHP. Dazu erzeugen Sie zunächst ein HTML-Formular, speichern die Daten in einem Array und versenden dieses zum Schluss mit der HTTP-Methode »POST«.

11:31

In diesem Video stellen Sie sicher, dass die Formularfelder durch den Benutzer korrekt ausgefüllt werden. Zu diesem Zweck verwenden Sie eine »if«-Bedingung, die die Formulareingaben überprüft und im Fehlerfall den Datenversand unterbindet.

06:20

Die Switch-Anweisung eignet sich besonders für den Einsatz von Auswahllisten. Wie Sie Ihr Bestellformular um eine Dropdown-Liste erweitern, erfahren Sie in diesem Video.

08:34

Mit Schleifen lassen sich PHP-Anweisungen mehrfach ausführen. André Wösten erläutert Ihnen in diesem Video den Unterschied zwischen »for«- und »while«-Schleife und gibt Ihnen Hinweise dazu, welche Schleife für welchen Zweck am besten geeignet ist.

09:17

In PHP werden nicht nur Zahlen, sondern auch Zeichenketten als Schlüssel von Arrays vergeben. In diesem Video lernen Sie, wie Sie mit PHP ein Array definieren und Array-Werte per Schleife ausgeben lassen.

10:48

Um Ihr HTML-Dokument übersichtlicher zu gestalten, können Sie PHP-Skripte in externen Dateien auslagern. Wie Sie diese externen PHP-Dateien einbinden und zusammenhängenden Code in Funktionen kapseln, erfahren Sie in diesem Video.

10:43

Zu den Standarddomänen von PHP gehört es, Dateien auf dem Server auszulesen, zu schreiben und zu speichern. Am Beispiel einer E-Mail-Vorlage erfahren Sie in diesem Video, wie Sie externe Dateien mit PHP verwalten.

10:07

Um das Formular fertigzustellen, fügen Sie noch Datum und Uhrzeit in die Bestelldaten ein. Anschließend erfahren Sie, wie Sie sich ein detailliertes Protokoll für die PHP-Verarbeitung ausgeben lassen.

Section 8: Datenbanken mit MySQL
00:27

Dieses Video stellt Ihnen die Inhalte des Kapitels vor. Sie erfahren in den folgenden Videos alles über den Aufbau und die Normalisierung von Datenbanken und erzeugen eigene Datenbank-Abfragen mit SQL.

03:59

Datenbanken bestehen aus Tabellen, die über Relationen miteinander verknüpft sind. In diesen Tabellen können  Informationen effizient gespeichert, abgerufen und verändert werden. Eine komfortable Verwaltung ermöglicht Ihnen zudem das Datenbanksystem »MySQL«.

12:32

Bevor Sie die erste Datenbank erstellen, machen Sie sich in diesem Video zunächst mit dem Konzept von Tabellen, Relationen und Schlüsseln vertraut. Dabei erfahren Sie auch, wie Sie Datensätze aus verschiedenen Tabellen miteinander verbinden können.

07:20

Damit eine Datenbank konsistent wird, muss sie eine schrittweise Normalisierung durchlaufen. In diesem Video erklärt Ihnen André Wösten, wie Sie Redundanzen und Abhängigkeiten in den Daten beseitigen und Tabellen semantisch strukturieren.

05:31

Für das Erstellen von Datenbank-Modellen gibt es unterschiedliche Software. André Wösten stellt Ihnen in diesem Video die Software »MySQL Workbench« vor und führt Sie durch die Installation des Programms.

11:29

In diesem Video erzeugen Sie das Datenmodell für Ihre Beispiel-Website. Weil es sich dabei um ein Musiklabel handelt, legen Sie jeweils eine Tabelle für Künstler, Veröffentlichungen und für statische Seiteninhalte an.

07:20

Nachdem Sie das Schema Ihrer Datenbank angelegt haben, befüllen Sie diese nun mit initialen Daten. Anschließend übertragen Sie diese Daten auf Ihren Server und lesen dabei die SQL-Anweisungen aus.

03:43

Damit Ihre Website mit der Datenbank interagieren kann, müssen die Kommandos in der Datenbanksprache »SQL« geschrieben sein. Dabei verwenden Sie die drei Teilsprachen »DDL«, »DML« und »DQL« für die Definition, Manipulation und Abfrage der Daten.

07:30

In diesem Video lernen Sie, wie Sie mit der Anweisung »SELECT« auf ausgewählte Tabellendaten zugreifen. Außerdem erfahren Sie, wie Sie Datensätze sortieren und Ihre SQL-Anfragen visuell strukturieren.

07:48

In diesem Video erfahren Sie, wie Sie mehrere Tabellen gleichzeitig auslesen und Daten zusammenführen können. Dies erreichen Sie, indem Sie mit SQL komplexe Bedingungen formulieren, nach denen Datensätze abgefragt werden sollen.

08:07

Die Bearbeitung von Daten erfolgt über die Anweisung »UPDATE«. Weshalb Sie dafür zunächst eine Sicherheitsoption deaktivieren müssen, erklärt Ihnen André Wösten in diesem Video. Zum Schluss erfahren Sie außerdem, wie Sie Daten aus einer Tabelle löschen können.

Section 9: Das Backend entwickeln
00:20

André Wösten erklärt Ihnen in diesem Video, was Sie in diesem Kapitel erwartet. Sie erstellen eine Backend-Oberfläche für Ihre Website und erzeugen ein Formular, mit dem sich die Daten bequem bearbeiten lassen.

04:31

In diesem Video rufen Sie sich noch einmal die Architektur Ihrer Website ins Gedächtnis: Das Frontend beschreibt die Seitenausgabe, das Backend dient als Verwaltungsoberfläche. Beide kommunizieren mit der Datenbank via PHP und SQL.

08:34

Um das Backend nicht von Hand entwickeln zu müssen, greifen Sie auf das Framework »Bootstrap« zurück. Neben dieser mächtigen Bibliothek stellt Ihnen André Wösten in diesem Video auch noch den CSS-Präprozessor »LESS« vor

07:30

Noch mehr Handarbeit sparen Sie sich mit dem Bootstrap-Werkzeugkasten »LayoutIt!«. Seitengitter, Navigation und Inhaltsbereiche lassen sich damit ganz einfach per Drag-and-Drop erzeugen. Das fertige Template dient Ihnen anschließend als Grundlage für Ihr Backend-Layout.

07:32

In diesem Video erweitern Sie die Navigation und passen das Bootstrap-Layout Ihren Wünschen an. Darüber hinaus binden Sie passende Icons und farbige Buttons ein, um die Backend-Oberfläche attraktiver zu gestalten.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course