Webtechnologien Teil 1: Entwicklungsumgebung 04.04.18 1
Literatur und Links [1-1] Seidler, Kai; Vogelsang, Kay: Das XAMPP Handbuch. Addison-Wesley, 2006 [1-2] http://www.apachefriends.org/download.html http://sourceforge.net/projects/xampp/files/ [1-3] http://aktuell.de.selfhtml.org/extras/download.shtml [1-4] http://www.selfphp.info/de/extras/download.php [1-5] http://www.php.net/docs.php [1-6] http://www.ulduzsoft.com/linux/kchmviewer/getting-kchmviewer/ http://sourceforge.net/projects/kchmviewer/files/ [1-7] http://dev.mysql.com/downloads/tools/workbench/ [1-8] http://www.gimp.org/downloads/ http://www.inkscape.org/de/ [1-9] http://www.ukrebs-software.de/german/back4sure/download.html 2
Übersicht Lokales Arbeiten unter Windows Arbeiten mit einem Server Virtuelle Maschine für Linux Es wird die Einrichtung der Entwicklungsumgebung XAMPP unter Windows gezeigt. Die Snapshot-Dumps stammen nicht von der aktuellen Version XAMPP 7.2, sind aber immer noch gültig. 3
Entwicklungsumgebung (Windows) I Download über www.apachefriends.de bzw. gleich: http://sourceforge.net/projects/xampp/files/ Download und Installationshinweise stehen unter https://www.apachefriends.org/download.html 4
Entwicklungsumgebung (Windows) II Es wird als erstes XAMPP 7.2.1 installiert: xampp-win32-7.2.1-0-vc15-installer.exe Nehmen Sie immer die letzte Version. 5
Entwicklungsumgebung (Windows) III Tomcat, Perl und der Mailserver können Sie für diese Veranstaltung weglassen; für die LV Programmieren könnte Tomcat benötigt werden. Ab Windows 7 sollte der Installationsordner unter c:\xampp liegen. Das ist auch die Default-Einstellung 6
Entwicklungsumgebung (Windows) IV Zum Deinstallieren muss die Routine \xampp\uninstall.exe aufgerufen werden diese steht im Installationsordner. Oder es wird der normale Deinstallationsmechanismus über die Systemsteuerung (Programme und Funktionen) benutzt: 7
Neugierig unter c:\xampp nachsehen I Der XAMPP-Ordner c:\xampp Oberer Teil 8
Neugierig unter c:\xampp nachsehen II Der XAMPP-Ordner c:\xampp Unterer Teil 9
Neugierig unter c:\xampp nachsehen III In den Ordner c:\xampp\htdocs kommen die HTML/PHP-Dateien 10
Entwicklungsumgebung (Windows) V Vorgehen nach dem Installieren 1) Das Control-Panel starten: Start des Apache-Servers Start des MySQL-Servers 2) Prüfung, ob alles in Ordnung ist, per Browser: Als URL folgendes eingeben: http://localhost/ bzw. http://localhost/dashboard/ Im folgenden werden die Snapshot-Dumps dazu angezeigt. 11
XAMPP I - Vor dem Serverstart 12
XAMPP II Der Apache php.ini 13
Beispiel für php.ini-problem I Es wird die gmp-bibliothek benutzt, die beim PHP-Start nicht geladen wird, da dies in der in php.ini verhindert ist. 14
Beispiel für php.ini-problem II Die gmp-bibliothek wird durch Löschen des ";" nun geladen. 15
XAMPP III Der Apache Wichtig für die Fehlersuche 16
XAMPP IV Der erste Aufruf Nun wird der Browser aufgerufen mit folgender URL (Adresse): http://localhost/ bzw. http://localhost/dashboard/ 17
XAMPP V Der erste Aufruf http://localhost/dashboard 18
XAMPP VI Der erste Aufruf http://localhost/dashboard/phpinfo.php 19
Start von phpmyadmin I http://localhost/phpmyadmin 20
Start von phpmyadmin II 21
Start von phpmyadmin III Die Web-Administrationsoberfläche phpmyadmin oberer Teil 22
Lokales Arbeiten I ohne Webserver URL: file:///c:/.../hello.html Browser (1) read Hello.html Die Adressen der Objekte (URL) sind Verweise auf lokale Dateien. Dies funktioniert NUR(!) lokal auf dem eigenen PC; eine Übertragung auf eine andere Maschine kann zu Problemen führen. Dies geht auch ohne XAMPP, ist aber nicht zu empfehlen. Ordner Eigene Dateien 23
Lokales Arbeiten II mit Webserver URL: http://localhost/hello.html Apache (3) HTTP Browser Ordner htdocs (2) read (1) copy Hello.html Ordner Eigene Dateien Das ist die richtige Arbeitsweise, da alle Adressen echte Web-Adressen sind. Schritt (1) muss immer zu Fuß gemacht werden. Vorher muss der Web- Server gestartet sein. 24
Installation von netbeans I Hier gibt es verschiedene Möglichkeiten je nach Geschmack: Eclipse mit PHP-Plugins Netbeans mit PHP-Plugins Einfache Editoren vim jedit Es wird die Benutzung von netbeans vorgestellt. 25
Installation von netbeans II - Java Zuerst Java installieren sofern nicht vorhanden: http://www.oracle.com/technetwork/java/javase/downloads/index.html Version Java 8 nehmen. 26
Installation von netbeans III Adresse: http://netbeans.org/downloads/ Die englische Version, deutsche Versionen gibt es hier kaum. 27
Installation von netbeans IV Zuerst die netbeans Java-Version: Ordner der Installation und der Java-Installation Hier für die Build-Version von Netbeans vom 14.02.18 28
Installation von netbeans V Dann als Zweites die PHP-Version: Falls eine frühere Version vorhanden Nun folgt eine verkürzte Installation 29
Installation von netbeans VI Dieses Fenster ist am Anfang leer. Nach dem Start Tools>Options auswählen und dann... 30
Installation von netbeans VII configure... Hier wird der Pfad zum PHP-Interpreter eingetragen: c:\xampp\php\php-win.exe (hängt vom Ort der Installation ab) Das ist nur ein einziges Mal erforderlich. 31
Hallo world mit PHP 7.1 I Es wird ein neues Projekt ausgewählt, dann der Typ PHP-Applikation bestimmt 32
Hallo world mit PHP 7.1 II Achten Sie auf den richtigen Ordner hier darf nie...htdocs stehen. Nun wird ein Name definiert immer neueste PHP-Version 7.1 auswählen. Netbeans 8.2 kann nicht 7.1, daher hier 7.0 auswählen. 33
Hallo world mit PHP 7.1 III Hier nun unterscheiden sich die oben vorgestellten Varianten Wir wählen die einfachste als erstes... Falls hier nichts steht, muss es über configure geändert werden (siehe oben) Der Rest ist erst einmal uninteressant, also Finish 34
Hallo world mit PHP 7.1 IV Unser erstes PHP-Programm: Hallo World! 35
Hallo world mit PHP 7.1 V Eingeben des Programms und Starten über das grüne Dreieck. Die Ausgabe erscheint unterhalb des Source-Code-Fensters. 36
Nun über den Server I Nun wird eine richtige HTML-Seite mit PHP über den Server wie oben beschrieben realisiert. Wir legen ein neues Projekt an wie gehabt: 1.Schritt 2.Schritt 37
Nun über den Server II Wir legen ein neues Projekt an wie gehabt, aber stellen im 3. Schritt des Assistenten etwas anderes ein. 3.Schritt In den htdocs-ordner soll nun netbeans alle Dateien installieren. 38
Nun über den Server III Dazu schreiben wir uns schnell eine einfache Seite mit dem Hallo- World-PHP-Befehl was das alles zu bedeuten hat, wird später erklärt. 39
Nun über den Server IV Mit Set Main Project wird ein bestehendes Projekt zum Hauptprojekt gemacht. Der Name wird fett geschrieben. Dann ein Klick auf das grüne Dreieck: Die Datei wird kopiert, der Browser gestartet und das Ergebnis angezeigt. 40
Nun über den Server V Wir können uns im Browser den angezeigten Quellcode der Datei anzeigen lassen. 41
Nachschauen der Konfiguration I Das Ergebnis der Konfiguration schauen wir uns nun über den folgenden Weg an: Projekt (rechte Maustaste) Dies wird benötigt, wenn später die Konfiguration des Projekts geändert werden muss. 42
Nachschauen der Konfiguration II Wir können an diesen Stelle unsere Konfiguration einsehen und ändern. Hier kann eingestellt werden, ob bei jedem Öffnen die Dateien kopiert werden sollen 43
Weitere Konfiguration von netbeans I Jetzt schauen wir uns die Plugins an. 44
Weitere Konfiguration von netbeans II Die sollten schon dabei sein 45
Weitere Konfiguration von netbeans III Zum Schluss noch aktualisieren (was bei frischen Installationen eigentlich unnötig ist, aber wer weiß ) 46
Nun zum Firefox I Nehmen Sie die Development-Version, die auch parallel zur normalen installiert und benutzt werden kann. https://www.mozilla.org/de/firefox/developer/ 47
Nun zum Firefox II Im devel-firefox die parallele Installation erlauben. Dann in netbeans den neuen Browser bekannt machen: 48
Nun zum Firefox III 1) Firefox auswählen 2) Edit-Knopf drücken 3) Filenamen des Devel-Firefox eintragen 4) Alles mit OK abschließen 49
Nun zum Firefox IV Die Entwickler- Symbolleiste einschalten Unten erscheint die Leiste Ein Klick auf das rote Feld öffnet das Fenster. 50
Nun zum Firefox V Wem das depressive Schwarz (Programmieren ist schon schlimm) noch depressiver macht, kann in der Konfiguration das Thema auf Firebug (Weiß mit Farben) einstellen (die Stimmung hebt sich sofort). 51
Nun zum Firefox VI Nach Öffnen einer Seite kann unten im Fenster der Inhalt genau angesehen werden, hier der Source-Code mit CSS. Ein Klick auf den Source-Code bewirkt, dass darüber der betreffende Bereich angezeigt wird. 52
Nun zum Firefox VII Durch Auswahl der Reiter können sich alle Aspekte angesehen werden die Konsole ist bei Aufrufen von console.log() wichtig. 53
Nun zum Firefox VIII 54
Nun zum Firefox IX 55
Installation von Manuals I SelfHTML SelfPHP PHP Documentation PHP Documentation Kommentare Reference-Handbuch für HTML, CSS und JavaScript sehr empfehlenswert http://aktuell.de.selfhtml.org/extras/download.shtml Dasselbe für PHP sehr empfehlenswert http://www.selfphp.info/de/extras/download.php Offizielle Dokumentation von PHP http://www.php.net/docs.php Offizielle Dokumentation von PHP mit ergänzenden Kommentaren sehr empfehlenswert http://www.php.net/docs.php Am besten ist es für Windows-Freunde die CHM-Versionen zu benutzen. Falls der eingebaute chm-viewer nicht funktioniert, dann nehmen Sie am besten den kchmviewer von http://sourceforge.net/projects/kchmviewer/ 56
Zu selfhtml (nur für HTML 4 geeignet) http://de.selfhtml.org/ http://aktuell.de.selfhtml.org/extras/selfchm.htm 57
Zu selfphp http://www.selfphp.de/de/extras/download.php 58
Zu PHP Einfache und erweiterte Dokumentation http://www.php.net/docs.php http://www.php.net/download-docs.php 59
Installation von Manuals II chm-versionen 60
CHM-Viewer http://www.ulduzsoft.com/linux/kchmviewer/ http://sourceforge.net/projects/kchmviewer/files/ 61
MySQL Workbench I http://dev.mysql.com/downloads/tools/workbench/ 62
MySQL Workbench II 63
Zeichenprogramme http://www.gimp.org/downloads/ https://inkscape.org/de/release/0.92.2/ 64
Dann noch etwas Backups! I http://www.ukrebs-software.de/german/back4sure/download.html 65
Dann noch etwas Backups! II 66
Dann noch etwas Backups! III 67
Für die Freunde von Eclipse Eclipse mit PHP zusammen: http://www.eclipse.org/downloads/packages/eclipse-php-developers/ heliosr Installationsvideos (auf Deutsch): http://www.youtube.com/watch?v=scbw8dsqa3i http://www.youtube.com/watch?v=08-dgbn-53m http://www.youtube.com/watch?v=ie1x_1dvt2m Für PHP selbst: http://www.youtube.com/user/phptutorialdeutsch?feature=watch 68
Linux-Version Es gibt noch eine virtuelle Maschine (VirtualBox) mit Linux. Diese basiert auf redhat Linux (CentOS 6.9). Diese Maschine ist im Labor A209L verfügbar oder von der Website des Dozenten herunter ladbar. Installiert und fertig konfiguriert sind dort: XAMPP 7.2.1 Java 1.8 Netbeans 8.2 und Netbeans Nightly Build (PHP 7.1) C Software für Übungen der LV IT-Security Software für Übungen der LV Verteilte Anwendungen PHPUnit-Tests Manuals für Java, PHP und JavaScript (offline) 69
Nach dieser Anstrengung etwas Entspannung... 70