Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m290_guko:learningunits:lu02:aufgaben:a02 [2026/08/13 16:06] – ↷ Seite von modul:m290_guko:learningunits:lu02:aufgaben:a02 nach de:modul:m290_guko:learningunits:lu02:aufgaben:a02 verschoben msuter
+++ de:modul:m290_guko:learningunits:lu02:aufgaben:a02 [2026/08/23 20:59] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== LU02b - Installation des Code-Editors Webstorm ======
+====== LU02b - Installation des Code-Editors WebStorm ======
 ===== Voraussetzungen =====
-  * Arbeitsform: Einzelarbeit/Partnerarbeit **helfen Sie sich gegenseitig**
+  * Arbeitsform: Einzelarbeit oder Partnerarbeit (helfen Sie sich gegenseitig)
-  * Zeitaufwand: 20 Minuten
+  * Zeitaufwand: ca. 20 Minuten
   * Erwartetes Ergebnis:
-    * Korrekt installierter Code-Editor Webstorm inkl. Aktualisierung der Lizenzgültigkeit (Non-Commercial Lizenz).
+    * 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 er kostenlos verfügbar. Mit dem vorinstallierten Datenbank-Plugin können wir Datenbanken ganz leicht anlegen, konfigurieren und mit SQL-Code Daten auslesen.  Klingt doch super, oder?
+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 =====
-  - 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/Download]].
+==== 1. Konto & Installation ====
-  - Starten Sie Webstorm.
+  - Erstellen Sie ein JetBrains-Konto mit Ihrer BZZ-E-Mail-Adresse (falls noch nicht vorhanden).
-    - Bei der Lizenzauswahl, wählen Sie die **Non-Commercial Licence** (dazu müssen Sie sich in Ihrem JetBrains-Konto anmelden).
+  - Laden Sie WebStorm herunter und installieren Sie es: [[https://www.jetbrains.com/webstorm/| WebStorm herunterladen]].
-    - Falls die Non-Commercial Licence nicht sichtbar ist, dann haben Sie vermutlich eine alte Version installiert. Laden Sie die aktuelle Version von Webstorm herunter.
+  - Starten Sie WebStorm.
-  - Erstellen Sie ein neues Projekt in Webstorm -> Klick auf "+" -> beide Checkboxen abwählen und dem Projekt einen Namen vergeben, wie "M290".
+    - Bei der Lizenzauswahl wählen Sie die **Non-Commercial License** (dazu müssen Sie sich in Ihrem JetBrains-Konto anmelden).
-  - Ö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:screenshot_2026-08-18_at_12.33.59.png?direct&800| Non-Commercial License Screen in WebStorm}}
-  - Stellen Sie eine Verbindung zwischen Ihrer lokalen MySQL-Datenbank und Webstorm her -> Im Datenbank-Fenster aufs "+" klicken und "Data Source" auswählen und dann **MySQL** (Version 9) auswählen. Im erscheinenden Fenster die Verbindung konfigurieren (s.Screenshot mit Beispiel-Angaben).
+//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: (leer) oder das Passwort, das Sie beim Installieren bzw. Konfigurieren von MySQL Community Server gesetzt haben (Windows User) -> siehe [[https://moodle.bzz.ch/mod/lesson/view.php?id=29259&pageid=6383|Installation MySQL]]
+    - Password: Das Passwort, das Sie beim Installieren bzw. Konfigurieren von MySQL Community Server gesetzt haben
-    - Falls eine Warnung erscheint, dass noch **Software/Treiber** heruntergeladen werden müssen -> anklicken (direkt über "Test Connection")
+  - Falls eine Warnung erscheint, dass noch Treiber heruntergeladen werden müssen, klicken Sie auf den entsprechenden Link direkt über dem Button "Test Connection".
-    - Test Connection: grünes Popup (Succeeded) -> Apply, OK; Failed -> möglicherweise stimmt das Passwort nicht
+  - 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.
-  - Yay! Webstorm ist installiert und mit MySQL verbunden. Nun können Sie das erste Datenset importieren (nächste Aufgabe).
-{{:modul:m290_guko:learningunits:lu02:aufgaben:screenshot_2025-08-24_at_02.17.35.png?direct&700|Konfiguration für die Verbindung von Webstorm zu MySQL}}\\
+{{: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