LU02b - Installation des Code-Editors WebStorm [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU02b - Installation des Code-Editors WebStorm ======

===== Voraussetzungen =====
  * Arbeitsform: Einzelarbeit oder Partnerarbeit (helfen Sie sich gegenseitig)
  * Zeitaufwand: ca. 20 Minuten
  * Erwartetes Ergebnis:
    * Korrekt installierter Code-Editor WebStorm inkl. Aktivierung der Non-Commercial-Lizenz

===== Einführung =====
Programmieren von Quellcode ist ohne einen geeigneten Code-Editor mühsam. WebStorm ist ein solcher Editor, der uns viele nützliche Funktionen bietet – und das Beste: Für nicht kommerzielle Projekte ist er kostenlos verfügbar. Mit dem vorinstallierten Datenbank-Plugin können wir Datenbanken ganz leicht anlegen, konfigurieren und mit SQL-Code Daten auslesen.

===== Aufgaben =====

==== 1. Konto & Installation ====
  - Erstellen Sie ein JetBrains-Konto mit Ihrer BZZ-E-Mail-Adresse (falls noch nicht vorhanden).
  - Laden Sie WebStorm herunter und installieren Sie es: [[https://www.jetbrains.com/webstorm/| WebStorm herunterladen]].
  - Starten Sie WebStorm.
    - Bei der Lizenzauswahl wählen Sie die **Non-Commercial License** (dazu müssen Sie sich in Ihrem JetBrains-Konto anmelden).
{{:de:modul:m290_guko:learningunits:lu02:aufgaben:screenshot_2026-08-18_at_12.33.59.png?direct&800| Non-Commercial License Screen in WebStorm}}
//Non-Commercial License Screen in WebStorm//
    - Falls die Non-Commercial License nicht sichtbar ist, haben Sie vermutlich eine alte Version installiert. Laden Sie die aktuelle Version von WebStorm herunter.
  - Erstellen Sie ein neues Projekt in WebStorm → Klick auf "+" → beide Checkboxen abwählen und dem Projekt einen Namen vergeben, z.B. "M290_LU02".
{{:de:modul:m290_guko:learningunits:lu02:aufgaben:create_project_ws.png?direct&800| Neues Projekt in WebStorm erstellen}}
  - Öffnen Sie nach der Einrichtung das Datenbank-Plugin (Klick auf Datenbank-Icon in der rechten Seitenleiste) in WebStorm.
{{:de:modul:m290_guko:learningunits:lu02:aufgaben:open_db_plugin.png?direct&800| Default JS-File schliessen und Datenbank-Plugin öffnen (Klick auf Icon)}}

==== 2. Verbindung zur Datenbank herstellen ====
  - Im Datenbank-Fenster auf "+" klicken → "Data Source" auswählen → **MySQL** auswählen.
{{:de:modul:m290_guko:learningunits:lu02:aufgaben:create_data_source.png?direct&900| Screenshot mit Steps von 1-4, wie im WebStorm-DB-Plugin eine MySQL-Verbindung ausgewählt wird.}}
  - Im erscheinenden Fenster die Verbindung konfigurieren (s. Screenshot mit Beispiel-Angaben):
    - User: root
    - Password: Das Passwort, das Sie beim Installieren bzw. Konfigurieren von MySQL Community Server gesetzt haben
  - Falls eine Warnung erscheint, dass noch Treiber heruntergeladen werden müssen, klicken Sie auf den entsprechenden Link direkt über dem Button "Test Connection".
  - Klicken Sie auf **Test Connection**: Ein grünes Popup ("Succeeded") bedeutet Erfolg → mit Apply, OK bestätigen. Bei "Failed" stimmt möglicherweise das Passwort nicht.

{{:de:modul:m290_guko:learningunits:lu02:aufgaben:connection_settings.png?direct&900|Konfiguration für die Verbindung von WebStorm zu MySQL}}\\
//Konfiguration, um die Verbindung zu MySQL herzustellen.//

Sobald die Verbindung von WebStorm zu MySQL erstellt ist, öffnet sich ein Konsolenfenster (Query Console), und im Datenbank-Plugin-Fenster erscheint die Verbindung mit einer Zahl dahinter (z.B. 0 of 0). Klappen wir das Menü auf, sind weder Datenbanken noch Tabellen sichtbar – das erstellen wir im nächsten Schritt.

Im Konsolenfenster schreiben und führen wir SQL-Befehle aus. MySQL interpretiert diese Befehle und gibt uns eine Antwort zurück.

{{:de:modul:m290_guko:learningunits:lu02:aufgaben:sql_connection_done.png?direct&1100| WebStorm-Screenshot nach erfolgreicher Konfiguration der Verbindung zu MySQL}}

Yay! WebStorm ist installiert und mit MySQL verbunden. Nun können Sie das erste Datenset importieren (nächste Aufgabe).

----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Guido Koch