de:modul:m290_guko:learningunits:lu02:aufgaben:a02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m290_guko:learningunits:lu02:aufgaben:a02 [2026/08/13 16:06] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m290_guko:learningunits:lu02:aufgaben:a02 [2026/08/23 20:59] (aktuell) – gkoch
Zeile 1: Zeile 1:
 +====== 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