Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Swanhilde Schmitzer Geändert vor über 9 Jahren
1
Willkommen zu Ausgewählte Fragen der praktischen Informatik
Fachhochschule Hannover Sommersemester 2014 Kurze Vorstellung
2
Kurze Vorstellung Thomas Arkadius Sluga Ausbildung Assisten für Informationstechnik Studium Studium – Angewandte Informatik (FH Hannover / Bachelor) Studium –High Performance Computing (UNI PB / Master) Berufliches
3
Beispiele aus dem Beruf
Berufliches TYPO3 und Magento Entwickler Programmierung von Internetseiten Programmierung vom Extensions SEO und Affiliate (Couponing) Schwerpunkt liegt bei TYPO3 Mobile Webdesign und Smartphone Apps iOS und Android Apps Tätigkeit in diversen Agenturen Seit 2012 Geschäftsführender Gesellschafter Dozent an der Fachhochschule Hannover Seit 2013 – Letzte LV WWW Techniken I (Medizinisches Informationsmanagement) Beispiele aus dem Beruf
4
Beispiele aus dem beruflichen Alltag
Swopper
5
Beispiele aus dem beruflichen Alltag
Intim esthetic
6
Beispiele aus dem beruflichen Alltag
Die LV
7
Ausgewählte Fragen der praktischen Informatik
Organisatorisches Lehrveranstaltung Ausgewählte Fragen der praktischen Informatik Aktuelle Themen aus dem Bereich praktische Informatik. Ziel: Aktuelle Problemen und Möglichkeiten in der Informatik kennenlernen und verstehen für einen guten Einstieg in die berufliche Zukunft. Skripte: hannover.couponwerk.de (online am Wochenende) Backlinks und Ranking
8
Agenda und Timing für die Vorlesung
Organisatorisches Agenda und Timing für die Vorlesung Datum Thema Einführung und allgemeines Optimierung von TYPO3 Seiten Keine Vorlesung (Interkulturelle Kommunikation) Mobile Web Welche Content Management Systeme gibt es ? Entwicklung von Apps + Übung TYPO3 aus der Sichtweise der Entwickler Keine Vorlesung (Christ Himmelfahrt) Programmierung von TYPO3 Extensions Besprechung der Übung TYPO3 Extension – Videothek + Übung Data Mining und Security Keine Vorlesung (Ostern) Zusammenfassung / Prüfungsvorbereitug Besprechung der Übung + Lösung – Beginn Prüfungszeitraum TYPO3 und Ajax / jQuery Termine im Mai
9
Agenda und Timing für die Vorlesung
Organisatorisches Agenda und Timing für die Vorlesung Datum Thema Einführung Optimierung von TYPO3 Seiten Keine Vorlesung (Interkulturelle Kommunikation) Mobile Web Welche Content Management Systeme gibt es ? Entwicklung von Apps + Übung TYPO3 aus der Sichtweise der Entwickler Keine Vorlesung (Christ Himmelfahrt) Programmierung von TYPO3 Extensions Besprechung der Übung TYPO3 Extension – Videothek + Übung Data Mining und Security Keine Vorlesung (Ostern) Zusammenfassung / Prüfungsvorbereitug Besprechung der Übung + Lösung – Beginn Prüfungszeitraum TYPO3 und Ajax / jQuery Mögliche Änderungen
10
(Mögliche) Änderungen im Mai
Umzug in die Schweiz am Datum Thema (FR) Einführung (FR) Optimierung von TYPO3 (FR) Welche CMS gibt es ? (SA) Mobile Web (SA) TYPO3 aus der Sichtweise der Entwickler (FR) Entwicklung von Apps + Übung (FR) Programmierung von TYPO3 Extensions (FR) Besprechung der Übung (FR) TYPO3 Extension Videothek + Übung (FR) Vorbereitung zur Prüfung (FR) Besprechung der Übung + Lösung (FR) Keine Vorlesung (Karfreitag) (SA) Eventuell LV – Beginn Prüfungszeitraum (FR) TYPO3 und AJAX / jQuery Einteilung der Gruppe
11
Einteilung der Gruppen
Backlinks und Ranking
12
Vorlesungen am Samstag – Beginn eine Stunde später !!!!!!
Einteilung der Gruppe Einteilung der Gruppen Gruppe Vorlesung Zeitraum Prak. Informatik 09:00 Uhr – 10:30 Uhr Prak. Medieninformatik 10:45 Uhr – 12:15 Uhr 2. Gruppe 12:30 Uhr – 14:00 Uhr 14:15 Uhr – 15:45 Uhr Vorlesungen am Samstag – Beginn eine Stunde später !!!!!! Los geht es
13
Berufsbild - Informatiker
Nerd – Geek - Informatiker Backlinks und Ranking
14
Die Top-Marken dieser Welt
15
eCommerce in Deutschland
Backlinks und Ranking
16
Der Trend zum „Online“ – Die Klassiker
Newcomer
17
Der Trend zum „Online“ – Die Newcomer
Informatik ist TeamWork
18
Informatiker sind gefragt
Backlinks und Ranking
19
Fakten zum Thema IT (Informatik)
Erklärung Einstiegsgehalt 50% aller AG zahlen zwischen und € Gute Jobs 30% der Unternehmen zahlen mehr als € ( primär in Hamburg, Köln, Berlin, München) Sehr gute Jobs 10% der Unternehmen zahlen mehr als € WICHTIG Von der Masse abheben und sich spezialisieren IT Boomt
20
IT Boomt Backlinks und Ranking
21
Was wollen wir uns anschauen
Ein Blick auf andere Jobs und Branchen in der Wirtschaft Das Internet wird ein sehr wichtiger Absatzmarkt für viele Unternehmen ( Onlineshops / Magento) Unternehmen möchten durch Internetseiten Ihre Präsenz im Internet stärken (Content Management Systeme) Die Wirkung nach außen wird immer wichtiger und die Macht der sozialen Netzwerke wurde erkannt Die Vermarktung der Produkte wird immer wichtiger ( SEA/Google AdWords, Affiliate Marketing) Anbindung und Schnittstellen für Smartphones und Apps gewinnen an Bedeutung Content Management Systeme
22
Content Management Systeme
Content Management Systeme sind wichtig für viele Unternehmen Beispiel: Onlineshops Anbindung von Payment Anbietern Anbindung an Warenwirtschaftssysteme Leistungsfähige Server Vermarktung der Produkte Apps (interessant im Bereich Mode) jedoch mit dem Problem der „mobile Sales“ und viele weitere Probleme, Lösungen und interessante Aufgabengebiete … Wichtig – HTML, CSS, PHP, mySQL, Java, C#, Umgang mit IDEs usw .. Wordpress
23
Wordpress Die „Blogger-Software“ für das Internet Fakten zu Wordpress
24
Wordpress Die „Blogger-Software“ für das Internet
Sehr einfache Installation Man benötigt keine Kenntnisse im Bereich HTML, CSS, PHP, Datenbanken Die meisten Hoster unterstützen Wordpress problemlos Themes können problemlos ausgetauscht werden Kommentarfunktion unterstützt die Kommunikation Pingback erlaubt ein schnelles Feedback bei Verlinkung Einfache Anbindung von sozialen Netzwerken Tausende von (nützlichen ) Plugins Backlinks und Ranking
25
Nachteile von Wordpress
Die „Blogger-Software“ für das Internet Schwer zu vermarkten, da eben einfach zu installieren (Sehr) beliebt für Angriffe Sehr oft müssen Updates durchgeführt werden Viele Themes sind schwer zu konfigurieren Keine Mehrsprachigkeit (Standard mit Möglichkeiten zur Umsetzung) Templates und Flexibilität ist schwer umsetzbar Backlinks und Ranking
26
eCommerce Backlinks und Ranking
27
eCommerce Backlinks und Ranking
28
Wieso Magento ? Magento ist sehr beliebt
Viele Plugins um das System zu erweitern Einfache Portierung für andere Länder Plugins für zahlreiche Zahlungsmöglichkeiten Interessant: Gute Gehälter für Entwickler Kostenlos Die Problematik für Anfänger Schwer zu erlenen, da Live-Systeme besser sind Ohne Gewerbe oft kein Zugang zu Zahlungsmöglichkeiten Messen der Conversion schwer ohne Investition Optimierung (SEO) und Affiliate kaum machbar Magento braucht leistungsstarke Server Backlinks und Ranking
29
Das Magento Backend Backlinks und Ranking
30
Was muss ein gute CMS leisten ?
Es gibt kein gutes CMS – Dieser Ansatz ist einfach falsch! Erst das Problem/Anforderungen und dann die Wahl vom CMS Jedes CMS löst individuelle Probleme, aber Ein Update sollte „einfach“ sein Individuelle Einstellungen, Konfigurationen und Erweiterungen dürfen durch ein Update nicht verloren gehen Oft entscheidet (leider) das Budget Wechsel vom Server sollte einfach und schnell sein Sicherheit Unterschiedliche Rollen/Redakteure Mehrsprachigkeit CMS sollte kostenlos sein Individuell gestaltbar Schnell (was ist schnell ?) Responsive und Mobile sollten möglich sein uvm. (unabhängig von OS, Browser, Ort, etc) ? Was muss ein gutes CMS leisten ?
31
Was muss ein gute CMS leisten ?
Wichtig – Kommunikation mit anderen Entwicklern Welche Erfahrungen wurden gemacht Realistisch sein – Was kann ich leisten und wo sind Lücken Soll das System später erweitert werden Möchte der Kunde andere Dienst mit dem CMS kombinieren (Apps) Was leistet der Webhoster Werden spezielle Dienste benötigt (Newsletter) Alternative Möglichkeiten – Ein CMS (TYPO3) und ein Firmenblog(Wordpress). ! Interesse an Agenturen
32
Interesse an Angenturen
Joomla
33
Joomla Eigentlich ganz „ok“
Neue Versionen leisten deutlich mehr Wirkt leider bei vielen oft „kindlich und zu bunt“ Einfache und moderne Oberfläche Gut für kleine und private Internetseiten Wenige (gute) Agenturen bieten Joomla an Gehalt für Entwickler ist oft geringer Für aktuelle Entwicklungen fehlt es an freiwilligen Entwicklern Teilweise wird HTML in der DB gespeichert (FATAL) Kein Multi-Domain (eine Installation = Internetseiten) Leider noch viele offene und bekannte Bugs Backlinks und Ranking
34
TYPO3 TYPO3
35
TYPO3 Denkanstöße zu TYPO3:
Das CMS ist von der Struktur (sehr) einfach aufgebaut und alle Dateien können bearbeitet werden. Inhalte werden in der Datenbank gespeichert. Sie ist ein wichtiger Bestandteil von TYPO3 und sollte regelmäßig gesichert werden. Eine schnelle Datenbank wirkt sich erheblich auf die Performance der Internetseite aus. Bei Hostern hat die Datenbank oft eine maximale Größe und beim erreichen dieser kommt es zu Problemen Datenbanken in TYPO3
36
Die Datenbanken in TYPO3
TYPO3 Besitzt sehr viele Tabellen Backlinks und Ranking
37
Die Datenbanken in TYPO3
Hinweis Tabellen innerhalb der Datenbank können problemlos manuell bearbeitet werden. Manuelle Eingriffe sind nur selten notwendig und man sollte wissen, was man macht! TYPO3 löscht in der Regel keine Inhalte in der Datenbank. Sie werden als gelöscht markiert. Großes Problem – s bleiben in der Datenbank erhalten, sind nur als gelöscht markiert. Widerspricht dem Datenschutz in Deutschland. Es gibt keine referentielle Integrität (Primärschlüssel und Fremdschlüssel) Aufbau der Tabellen
38
Aufbau der Tabellen (Fast) alle Tabellen besitzen den gleichen grundlegenden Aufbau id für Einträge pid (falls Einträge zu einer Seite im Seitenbaum gehören) crdate (Datum der Erstellung vom Eintrag) tstamp (Datum der letzten Änderung) user_id (Wer hat den Eintrag erstellt) Die Werte dieser Felder werden durch TYPO3 automatisch verwaltet und aktualisiert! Wenn man eine Extension erstellt, werden viele deser Datenbankfelder automatisch erstellt. Wichtige Tabellen
39
Wichtige Tabellen (Benutzerverwaltung)
Backend User Alle Benutzer die Zugriff zum Backend besitzen, werden in der Tabelle be_users gespeichert. Die Gruppen der Backend User werden in der Tabelle be_groups gespeichert. Passwörter werden verschlüsselt abgespeichert! FrontEnd User Tabelle
40
Wichtige Tabellen (Benutzerverwaltung)
Frontend User Benutzer können sich mittels TYPO3 einen Account anlegen. TYPO3 stellt hierfür zahlreiche Extensions zur Verfügung, für die Anmeldung und Registrierung, wie fe_login. Die Benutzer werden unter fe_users gespeichert. Problem: Passwörter stehen im Klartext in der Datenbank Möchte ein Benutzer seinen Account löschen, dann wird nur ein Flag gesetzt Tabelle Pages
41
Ein Blick in die Tabelle pages
Password: Steht als Klartext in der Datenbank Disable: Account ist inaktiv, bis die aktiviert wurde. Wichtig: Template für den Versand selber erstellen. Beim Mail vom Mac wird die nicht dargestellt! Starttime und endtime: Wie lange soll der Account aktiv sein ? Deleted: Flag, welches den Account als gelöscht markiert Wieso ist pages wichtig ?
42
Wieso ist pages so wichtig ?
Der Aufbau von pages ist wichtig! Wir können mit einer TYPO3 Extension eigene Tabelle um weitere Felder erweitern. Innerhalb der TYPO3 Extension können wir die Daten aus pages auslesen und manipulieren. Zusätzlich können wir aus einer Extension die Daten in der Datenbank aus einer anderen Extension auslesen. Dies ist ein großer Vorteile – Alles steht in der Datenbank Ordner in einer Installation
43
Die Ordner innerhalb einer TYPO3 Installation
fileadmin: In diesem Ordner werden Daten gespeichert, welche z.B. über das Backend hochgeladen werden oder Templates für Templavoila typo3conf: Beinhaltet z.B. die Einstellungen typo3temp: Temp Ordner, der regelmäßig geleert werden sollte uploads: Dateien die z.B. über den RTE hochgeladen wurden Ordner uploads
44
Hinweise zum Ordner uploads
Der uploads Ordner kann über Wochen/Monate/Jahre sehr groß werden. Bilder die z.B. im TYPO3 Backend gelöscht werden, werden in dem Ordner nicht gelöscht. Zusätzlich werden keine Bilder überschrieben. Beispiel: Wird das Bild Haus_Am_See.jpg hochgeladen und dann ein zweites Bild Haus_Am_See.jpg, dann wird dieses in Haus_Am_See_01.jpg umbenannt. Typo3conf Ordner
45
Der typo3conf Ordner Im Ordner ext befinden sich alle Extensions, die uns zur Verfüfung stehen. Sie sind jedoch nicht aktiv, nur weil diese im Ordner existieren. Wie können aus dem Repository Extensions in den Ordner laden oder eigene (z.B. per FTP) in den Ordner kopieren. l10n beinhaltet Sprachdateien für das CMS und einzelne Extensions. localconf.php beinhaltet zahlreiche Einstellungen, welche über das INSTALL TOOL und das TYPO3 Backend geschrieben werden können. Localconf.php
46
Löschen einer Extension
localconf.php Wichtige Einträge der localconf.php Eintrag Bedeutung $TYPO3_CONF_VARS['SYS']['compat_version'] Um welche TYPO3 Version handelt es sich ? Kann manuell bearbeitet werden (nicht empfohlen), wenn eine Extension nur bis zu einer bestimmten Version installiert werden kann. $TYPO3_CONF_VARS['EXT']['extList_FE'] Liste mit Extension Keys, die in der Installation (FrontEnde) geladen werden sollen. Sollte nach der Installation einer Extension eine weiße Seite angezeigt werden, dann kann man den Extension Key hier löschen. $TYPO3_CONF_VARS['EXT']['extList'] Liste mit Extensions, welche z.B. über das Backend geladen werden sollen beim Login. Löschen einer Extension
47
Löschen einer Extension
Wird eine Extension deinstalliert, bleibt diese im Ordner ext erhalten. Man muss diese explizit löschen, damit diese auch auf dem Server entfernt wird. Löschen einer Extension
48
Löschen einer Extension
49
Löschen einer Extension
50
Löschen einer Extension
51
Löschen einer Extesion
Wird eine Extension gelöscht, dann bleiben die Tabellen in der Regel erhalten. Bei sensiblen Daten sollte man manuell prüfen, ob alle Daten komplett und korrekt gelöscht wurden Löschen einer Extension
52
Bearbeiten einer Extension
Vor dem erstellen einer Extension die Rechte prüfen, mit der die Daten auf dem Server erstellt werden. Hinweis: Abhängig vom Hoster. Sehr ärgerlich, wenn man plötzlich keine (Schreib-)Rechte mehr hat und nichts bearbeiten kann. Login->All Configuration Ändern der Rechte (siehe nächste Folie) Bearbeiten einer Extension (Rechte)
53
Bearbeiten einer Extension
Durchatmen
54
Durchatmen….. VIEL WICHTIGER INPUT Zusammenfassung
55
Kleine Zusammenfassung
TYPO3 speichert (fast) alle Inhalte in der Datenbank Extensions können auf die Daten in der Datenbank zugreifen Extensions muss man deinstallieren und entfernen Beim anlegen einer Extension im Install-Tool die Rechte prüfen Extensions werden unter typo3conf/ext gespeichert In der typo3conf/localconf.php werden die Extensions geladen Dateien im Ordner uploads werden in der Regel nicht gelöscht Timestamps in den Tabellen werden durch TYPO3 automatisch aktualisiert Passwörter der registrierten User stehen im Klartext in der Datenbank Einträge in der Datenbank werden nicht gelöscht, sondern als gelöscht markiert Entwicklung einer Extension
56
Entwicklung einer Extension in TYPO3
Entwicklung einer Extension für das CMS TYPO3 Grundlagen
57
Was wird benötigt ? Wir benötigen für die Entwicklung einer Extension folgendes: Grundlegende Kenntnisse in HTML Grundlegende Kenntnisse in CSS Grundlegende Kenntnisse in SQL / MySQL Gute Kenntnisse in PHP Sinnvoll – Für dynamische Seiten JavaScript und z.B. jQuery PHP in TYPO3
58
PHP ist leider nicht alles
TYPO3 arbeitet mit PHP, bietet jedoch weitaus mehr TYPO3 bietet Funktionen zum Zugriff auf das Environment TYPO3 bietet fertige Funktionen zum Zugriff auf die Datenbank TYPO3 erweitert einige PHP Funktionen und macht diese schmaller Zugriff auf die DB
59
Aufbau für SELECT in einer Extension
Beispiel select
60
Beispiel – Wann wurde eine Seite erstellt ?
Hinweis: Der GLOBALS Eintrag liefert die uid der aktuellen Seite. Die Online-Videothek
61
Wir bauen uns eine Online-Videothek
Unsere Videothek Wir bauen uns eine Online-Videothek TYPO3 Installation
62
Eine neue TYPO3 Installation
Wir aktualisieren unsere Liste mit Extensions 3 wichtige Extensions
63
3 wichtige Extensions installieren
Wir benötigen die folgenden Extensions: templavoila static_info_tables Kickstarter Alternativ – hannover.couponwerk.de/extensions.zip TYPO3 Seitenbaum
64
TYPO3 Seitenbaum Videothek bearbeiten
65
General Storage Folder
Seite Videothek bearbeiten General storage folder
66
General Storage Folder
67
General Storage Folder
Sichtbarkeit
68
General Storage Folder
Page disable entfernen Order für templates erstellen
69
Ordner für templates erstellen
Backlinks und Ranking
70
Template erstellen Template erstellen
71
Template-Mapping in TYPO3
Gemeinsame Übung Backlinks und Ranking
72
Interaktivität im Web und in Apps ermöglichen
JavaScript Interaktivität im Web und in Apps ermöglichen Backlinks und Ranking
73
Einseitige Kommunikation
JavaScript CLIENT SERVER (X)HTML CSS JavaScript Einseitige Kommunikation mySQL PHP Kommunikation ohne reload
74
Einseitige Kommunikation Kommunikation ohne reload ?
JavaScript CLIENT SERVER (X)HTML CSS JavaScript Einseitige Kommunikation mySQL PHP Kommunikation ohne reload ? Java nicht JavaScript
75
Geschichte zu JavaScript
76
JavaScript JavaScript wurde von Netscape entwickelt
JavaScript wird beim Client ausgeführt. Serverseitig wird z.B. PHP eingesetzt. Jeder moderne Webbrowser kann JavaScript (kurz JS), es muss somit kein Plugin/Addon/etc. installiert werden. JavaScript Quellcode liegt als Klartext vor und kann somit von jedem gelesen werden! JavaScript ist (relativ) einfach zu erlenen, bietet dem Entwickler sehr viele Möglichkeiten! Hallo Welt
77
Hallo Welt in JavaScript
Beispiel #1: JS Beispiel
78
JavaScript – Ausgabe im HTML Dokument
Beispiel #2: Variablen
79
Variablen in JavaScript
JavaScript kennt Variablen. Es gibt keine Unterscheidung zwischen Text, Integer, Double, Float etc.! Eine Variable muss einen Namen haben. Es wird zwischen Groß- und Kleinschreibung unterschieden! Variablen ausgeben
80
Variablen ausgeben Beispiel #3:
Funktionen
81
Funktionen am Beispiel
Funktionen sind ein wichtiges Hilfsmittel in der Programmierung und wird von JavaScript unterstützt. Funktionen werden eingesetzt um bestimmte immer wiederkehrende Aufgaben zu bearbeiten / zu lösen. Funktionen am Beispiel
82
Funktionen am Beispiel
Debugging
83
Debugging mit Firebug (Quellcode)
Ausgabe von Informationen durch console.log() Debugging Konsole
84
Debugging mit Firebug (Konsole)
Backlinks und Ranking
85
HTML + CSS + JS kombinieren
Unser Client / Webbrowser z.B. Firefox Engine baut die Internetseite auf Basis vom HTML Template und dem Design in unserem CSS beim Client auf. CSS Design für das Template Die Inhalte sind statisch! Wir können das Template, das Design oder den Inhalt nicht mehr verändern. HTML Template + Inhalt Backlinks und Ranking
86
HTML + CSS + JS kombinieren
Unser Client / Webbrowser z.B. Firefox Engine baut die Internetseite auf Basis vom HTML Template und dem Design in unserem CSS beim Client auf. CSS Design für das Template JavaScript HTML Template + Inhalt JavaScript kann auf HTML Elemente, Inhalte oder Layout zugreifen und diese verändern. Seite wird dynamisch! Backlinks und Ranking
87
ID und JavaScript Modifikation von Inhalten
Wie können wir den Inhalt von diesem <p> Tag ermitteln, verändern oder den kompletten Tag aus dem HTML Dokument entfernen ? Problem: Es gibt mehrere <p>Tags in diesem Dokument und das eine ist nicht eindeutig gekennzeichnet! ids
88
ID und JavaScript Wir bauen ein ID für unser <p> Tag ein. Über die ID können wir das <p> Tag innerhalb von CSS stylen: p#p_absatz1{ color:red; } In JavaScript können wir auf die ID vom <p> Tag zugreifen und den Inhalt z.B. auslesen. Inhalte auslesen
89
1. Versuch – Inhalt auslesen
Wir erhalten im Firebug als Ausgabe in der Konsole null. Begründung : Das Dokument wird von oben nach unten bearbeitet. Unsere ID existiert zum Zeitpunkt der Aufgabe nicht! Backlinks und Ranking
90
2. Versuch – Inhalt auslesen
Eine mögliche Lösung: Wir platzieren unser JavaScript am Ende. Wir erhalten noch eine Ausgabe, aber nicht die korrekte Backlinks und Ranking
91
Erklärung zur Ausgabe Fehler liegt bei uns!
Wir müssen das sogenannte Document Object Model (kurz DOM) beachten. Es handelt sich um eine Schnittstelle für den Zugriff auf HTML oder XML Dokumente. Eines der wichtigsten Hilfsmittel für den Zugriff auf HTML mit JavaScript. Wir schauen uns den DOM einmal genauer an mit dem folgenden Beispiel: FireBug öffnen und die folgende Seite aufrufen im Firefox: Der Dom
92
Der DOM am Beispiel Mit der Maus auf p#p_absatz1 gehen
DOM Eigenschaften
93
Der DOM + Eigenschaften vom <p> Tag
Aufklappen Backlinks und Ranking
94
Der DOM + Eigenschaften vom <p> Tag
Mittels innerHTML können wir auf den Inhalt zugreifen! Backlinks und Ranking
95
Der Inhalt von unserem <p> Tag
Wir übernehmen das innerHTML aus dem Firebug und fügen dies in unser JavaScript ein. JS ohne IDS
96
Auf <p> zugreifen ohne ID
Ohne ID müßen wir auf alle <p> zurückgreifen und wir erhalten ein Array. Wir müssen wissen, welches <p> Tag wir ausgeben/bearbeiten möchten und dann über das Array auf das <p> Tag zurückgreifen. Array von Tags auslesen
97
Array von Tags auslesen
Auf das erste Element mittels inhalt[0].innerHTML zugreifen. Beim Array beginnen wir bei 0 und nicht bei 1 DOM erweitern
98
DOM erweitern mittels JS
Neues Element einfügen
99
Neue Elemente einfügen
Unser Ergebnis Aktionen mit JS
100
Aktionen mit JS durchführen
Mit JS können gezielt bei Aktionen bestimmte Funktionen ausgeführt werden. Wieso return false ? Wenn wir einen Scrollbalken haben (z.B. viel Inhalt) und wir befinden uns unten, dann springen wir nicht automatisch wieder nach oben. Beispiel unter: Manipulation vom DOM
101
Manipulation vom DOM Formular validieren
102
Formular validieren mit JS
JavaScript eignet sich sehr gut zum validieren von Formularen. JavaScript Funktion zum validieren von diesem Formular. Check Formular
103
checkFormular() Wir lesen die einzelnen Eingabefelder (input) über die ID aus. 2. Wir lesen den Inhalt der Eingabefelder aus 3. Wir prüfen die Länge vom Text im Eingabefeld 4. Sollte dieser < 1 sein, dann setzen wir ein flag (fehler_vorhanden) auf true. 5. Am Ende prüfen wir, ob Fehler existierten 6. Ist dies der Fall, dann informieren wir den Besucher der Internetseite Backlinks und Ranking
104
informUser() Wir informieren nach dem validieren den Besucher über mögliche Fehler bei der Eingabe! Beispiel unter: Aktueller Status
105
Aktueller Status mit JS
JavaScript erlaubt die komplette Manipulation der Inhalte vom HTML Template. Kann somit auch gefährlich für uns Besucher sein. JavaScript lässt sich dynamisch (während der Laufzeit) einer Internetseite nachladen. Die meiste Malware im Internet basiert auf JavaScript. Passwörter, Benutzerdaten und viele weitere Informationen lassen sich über das Internet zu einem anderen PC / Server übertragen. Backlinks und Ranking
106
Die Problematik Die „Timeline“ der Vorlesung ist in dieser Form nicht möglich JavaScript/AJAX ist nicht bekannt und es mangelt an Know-How im Bereich PHP Einige Fehler
107
Die Problematik Was mir bei der Durchsicht der Aufgaben aufgefallen ist Zusammenhänge zwischen HTML und CSS verstehen Deklaration von Variablen in PHP und Schleifen (runde statt geschweifte Klammern) Variablen deklarieren und Werte zuweisen Einteilung der Zeit
108
Wann gibt es Vorlesungen ?
Die Problematik Die Zeiteinteilung der Vorlesung Der größte Teil der Vorlesung ist Selbststudium. Vermittelt wird die Basis und diese muss im Eigenstudium vertieft werden, abhängig vom Wissenstand des jeweiligen Studenten, mal mehr und mal weniger intensiv. Wann gibt es Vorlesungen ?
109
Vorlesungen An folgenden Tagen werden noch Vorlesungen gehalten:
( Labor ist belegt) ( Samstag ) (Freitag) (Freitag) (Samstag) (Prüfungsvorbereitung/Freitag) (Prüfungszeitraum) Der Ajax Call
110
Der Ajax Call Ansatz von Framework
111
jQuery – Das JavaScript Framework
Der Ansatz vom Frameworks: Bekannt aus dem Projekt-Management ist die 90%-10% Regel 90% von einem Projekt werden in 10% der Zeit fertiggestellt, die restlichen 10% benötigen mehr als 90% bis zur erfolgreichen Fertigstellung. Beispiele abseits der IT: Der Flughaben Berlin Das Problem im Projekt-Management: Man muss Möglichkeiten kennen um Probleme effizient zu lösen und zu bearbeiten. Umso mehr Möglichkeiten/Lösungen man kennt, umso besser kann man entscheiden, welche Möglichkeit/Lösung die Beste zum lösen ist. Kennt man nur eine, ist einfach eine Notlösung. Wichtig: Lernen, Fortbildung und Skills aneignen Was bietet JavaScript
112
jQuery – Das JavaScript Framework
Der Ansatz vom Frameworks: JavaScript bietet dem Entwickler Möglichkeiten Daten zu manipulieren, wenn diese längst ausgeliefert worden und beim Client angezeigt werden. JavaScript ist alt! Aber immer noch so effektiv, dass man Smartphones etc. damit erstellen kann. Problem von JavaScript: Oft muss man für einfache Lösungen sehr viel tippen. Als Alternative baut man sich ein Portfolio von eigenen Funktionen auf, welche man immer wieder nutzen kann. Problem: Andere Entwickler kennen diese Funktionen nicht, man braucht daher allgemeine Ansätze die genutzt werden können: Fertige (allgemein/abstrakte) Funktionen, welche man parametisieren kann. Das jQuery JS Framework
113
jQuery – Das JavaScript Framework
jQuery ist ein JavaScript Framework: jQuery ist nur eines von vielen JavaScript Framework, wie z.B. mooTools. Unterschiedliche Frameworks lassen sich oft nur sehr schlecht kombinieren, da die Syntax oft gleich ist. Vorher genau überlegen, welches Framework man für den Einsatz benötigt! jQuery bietet in der Regel die meisten Möglichkeiten und läuft sehr stabil. Welche Möglichkeiten haben wir ? Wir können einzelne HTML Elemente mittels der ID oder class ansprechen und Funktionen an die HTML Elemente binden, welche spezielle Aufgaben erfüllen. jQuery basiert auf JavaScript und kann daher in TYPO3, Magento, etc. (problemlos) genutzt werden Details zu jQuery unter jQuery einbinden
114
Unterschied Client / Server
jQuery einbinden Einbindung von jQuery: jQuery wird ständig weiterentwickelt und kann daher über ein CDN eingebunden werden. Was ist ein CDN: Ein CDN (Content Delivery Network) ist ein Server im Internet, der Inhalte bereitstellt und welche wir einbinden können, z.B. : Durch diese Anweisung kann immer die aktuellste jQuery Version eingebunden werden Unterschied Client / Server
115
Trennung von Inhalt und Daten
Client z.B. Firefox Es werden statische Informationen angezeigt. Möchte man einzelne Daten vom Server laden, muss die ganze Seite ausgeliefert werden für die Darstellung Sinniger: Inhalt von einem einzelnen div Container mit neuem Inhalt austauschen. Server z.B. Apache Beinhaltet Daten die an einen Client ausgeliefert werden. Kann auf persistente Daten zugreifen, z.B. aus mySQL Unterschiedliche Endgeräte können auf die Daten zugreifen und auch verändern. Was wird für AJAX benötigt
116
Trennung von Inhalt und Daten
Beispiel für den Einsatz von AJAX Wir besitzen eine einfache Internetseite mit statischem Inhalt Durch eine Aktion (klick) soll dieser Inhalt getauscht werden Die neuen Daten liegen auf dem Server Was wird benötigt für die Interaktion ? Einen Bereich innerhalb der Internetseite, der angesprochen/lokalisiert werden kann und in dem man Inhalte ändern möchte. Eine Datei auf dem Server, die nur die Daten (ohne HTML Struktur) bereitstellt Eine Möglichkeit für die Interaktion (z.B. ein Link <a href…> Eine Möglichkeit die Daten vom Server zu laden und zu platzieren Beispiel: Beispiel HTML
117
Trennung von Inhalt und Daten
Ajax in TYPO3
118
Ajax und der Einsatz in TYPO3
AJAX und TYPO3 ist grundsätzlich kein Problem Folgende Seite im FireFox und z.B. im Google Chrome öffnen: Auf „Status ändern“ klicken Was passiert hier ?
119
Ajax und der Einsatz in TYPO3
Welcher Effekt lässt sich beobachten ? Der Status vom Film wird verändert. Entweder er ist ausgeliehen oder verfügbar. Welchen Einsatzzweck hat Ajax auf dieser Seite ? Die Seite muss nicht aktualisiert werden. Mittels Ajax wird jede Sekunde der Status vom Film vom Server geladen. Es geht nur um den Status, da die HTML Struktur erhalten bleibt und nur der Inhalt vom div Container geändert wird. Dynamik wird in vielen Bereichen genutzt, wie Clients (ist eine neue da) Artikel in einen Warenkorb legen, ohne reload der Seite uvm. Wie funktioniert JS
120
Wie funktioniert diese Funktionalität ?
Wir benötigen ein Flag für jeden Film ob dieser ausgeliehen wurde oder nicht. Die Tabelle muss erweitert werden. ACHTUNG – Niemals für TYPO3 ein „alter Table“ nutzen, sondern eine eigene Extension erstellen. Beispiel der Extension
121
Wie funktioniert diese Funktionalität ?
Im Kickstarter bearbeiten
122
Wie funktioniert diese Funktionalität ?
Daten aus dem Kickstarter
123
Wie funktioniert diese Funktionalität ?
Extend existing Tables In diesem Bereich wird die vorhandene Tabelle erweitert. Frontend Plugins Wir erstellen ein neues Frontend Plugin für die Darstellung der Inhalte auf der Internetseite. Hier wird ein neues Template genutzt, welches z.B. den Button zum klicken beinhaltet und die Anzeige ob der Film verfügbar ist oder nicht. Tabellen richtig erweitern
124
Wie funktioniert diese Funktionalität ?
Tabelle auswählen, welche erweitert werden soll Wie funktioniert das Flag ?
125
Wie funktioniert diese Funktionalität ?
Der Server muss zwei unterschiedliche Funktionen bereitstellen Eine Datei, welche auf die Datenbank zugreift und den Status vom Film auslieht. Hierfür muss eine eindeutige ID vom Film übergeben werden! Eine Datei, welche auf die Datenbank zugreift und Status vom Film verändert. Hierfür muss eine eindeutige ID vom Film übergeben werden. Eine eindeutige ID ist vorhanden, da die Tabelle mit den Filmen einen Primärschlüssel besitzen. Dies hat der Kickstarter für uns automatisch angelegt. Die Tabellen der Extension
126
Wie funktioniert diese Funktionalität ?
Inhalt von ext_tables.sql aus unserer Extension uid Fortlaufende Nummer der Filme in der Datenbank pid Ist die uid der Seite, wo man den Film hinterlegt hat (in der List-Ansicht) Die PHP Dateien
127
Wie funktioniert diese Funktionalität
Folgende Dateien im Webbrowser öffnen Die status.php
128
Wie funktioniert diese Funktionalität ?
Der aktuelle Status vom Film fileadmin/ajax/status.php Updates
129
Die Funktionalität ENDE
130
Welche Dateien stellt der Kickstarter zur Verfügung ?
Die wichtigsten Daten zur Programmierung einer Extension Im Kickstarter legen wir die Tabellen an, die wir benötigen Im Kickstarter legen wir ein FrontEnd Plugin und/oder ein Backend Plugin an. Wir können diese auf der Internetseite einfügen Der Kickstarter legt (viele) zusätzliche Dateien an, damit TYPO3 mit unseren Daten umgehen kann. Backlinks und Ranking
131
Die FAQ zur Extensionprogrammierung
Q: In welchem Ordner liegen die Daten meiner Extension A: typo3conf/ext/extension_key Q: Ich kann meine Dateien nicht bearbeiten A: Extension löschen und im Install Tool die Rechte auf 0777 für Dateien/Ordner setzen Q: Wo kann ich meine FrontEnd Extension programmieren ? A: typo3conf/ext/extension_key/pi1/ class.tx_extension_key_pi1.php Backlinks und Ranking
132
Die FAQ zur Extensionprogrammierung
Einbau der Funktionalitäten für unsere Extension typo3conf/ext/extension_key/pi1/ class.tx_extension_key_pi1.php In der Methode main() bauen wir unsere Funktionalitäten ein. Als Ergebnis (return) liefern wir eine Variable, mit dem Inhalt für unsere Internetseite Backlinks und Ranking
133
Step-By-Step zur eigenen Extension
Eine neue Extension kann im Extension Manager erstellt werden. Hierfür muss der Kickstarter installiert werden. Anschließend findet man im Pull Down Menü den Eintrag „Create new Extension“ Backlinks und Ranking
134
Step-By-Step zur eigenen Extension
Im ersten Schritt muss für die Extension ein Extension-Key angegeben werden. Wichtig: Keine Umlaute, Leerzeichen, Sonderzeichen. Idealerweise nur Buchstaben, wie z.B. fh_thomas_sluga Anschließend muss man auf „Update klicken“ Backlinks und Ranking
135
Step-By-Step zur eigenen Extension
Unter „General Info“ werden allgemeine Informationen zur Extension hinterlassen. Besonders wichtig ist der Name der Extension! Dieser wird in der Liste der Extensions im Extension Manager angezeigt. Die einzelnen Felder -> siehe nächste Folie Backlinks und Ranking
136
Step-By-Step zur eigenen Extension
Backlinks und Ranking
137
Step-By-Step zur eigenen Extension
Für die Darstellung der Inhalte auf der Internetseite benötigen wir ein FrontEnd Plugin. Hierbei handelt es sich um unsere pi1 Datei, welche wir mittels PHP Programmieren können. Wir geben erst einmal einen Title an Bei den Einstellungen muss man einige Punkte beachten -> siehe die nächsten Folien! Backlinks und Ranking
138
Step-By-Step zur eigenen Extension
(Sehr) Wichtige Eingaben für das FrontEnd Plugin Wir geben den Titel vom FrontEnd Plugin an und stellen ein, wo wir dem User die Möglichkeit geben möchte die Extension in die Seite einzubinden. In diesem Fall handelt es sich um die folgende Option: Backlinks und Ranking
139
Step-By-Step zur eigenen Extension
Der Aktuelle Status Wir haben jetzt eine Extension, mit der wir eigentlich arbeiten können. Wir können diese Extension an eine beliebige Stelle auf unserer Internetseite einbinden. Mittels PHP können wir jetzt diese Extension programmieren und z.B. Inhalte darstellen. Was können wir nicht machen ? Eigene Datensätze anlegen. Ein Datensatz kann z.B. ein Film sein. Damit wir individuelle/eigene Datensätze anlegen können, benötigen wir eine Tabelle, welche diese Daten aufnimmt. Backlinks und Ranking
140
Step-By-Step zur eigenen Extension
In diesem Bereich können wir eine oder mehrere Tabellen für unsere Extension anlegen. Dabei muss man folgendes beachten: Title of the table Dies ist der Text, der uns beim einfügen von neuen Datensätzen in der Listenansicht angezeigt wird. Backlinks und Ranking
141
Step-By-Step zur eigenen Extension
Löschen und verstecken Wir können angeben, dass einzelne Einträge auch gelöscht oder versteckt werden können (sinnvoll!) Wir können angeben, dass bestimmte Einträge nur für einen bestimmten Zeitraum gültig sein dürfen. Man sollte diese Felder immer aktivieren! Backlinks und Ranking
142
Step-By-Step zur eigenen Extension
Normalerweise können Datensätze nicht auf „normalen Seiten/regular pages“ hinterlegt werden. Man benötigt einen Systemordner zum speichern. Es gibt aber die Möglichkeit bei der Erstellung der Extension anzugeben, dass man Datensätze dieser Extension gerne auf normalen Seiten hinterlegen möchte. Backlinks und Ranking
143
Step-By-Step zur eigenen Extension
Wir können nun unsere Tabelle erstellen mit allen Feldern, die Wir benötigen für die Lösung von unserem Problem. Wichtig: Bei jeder Änderung muss ein Update (Klick auf Update) gemacht werden, damit die Daten/Änderungen auch gespeichert werden. Unter „Field Type“ kann die Darstellung angeben werden. Hierbei kann es sich um Text oder Text + RTE handeln. Backlinks und Ranking
144
Step-By-Step zur eigenen Extension
Damit wir die Einträge auseinanderhalten können, existiert die Möglichkeit ein Label anzugeben. Hierbei muss es sich um ein Feld in unserer Datenbank handeln. Wir nutzen in diesem Fall „eingabe“. Die genaue Vorgehensweise -> nächsten Folien Backlinks und Ranking
145
Step-By-Step zur eigenen Extension
Wir erstellen einen „Test Eintrag“. Also einen Eintrag in unsere Tabelle. Backlinks und Ranking
146
Step-By-Step zur eigenen Extension
Wir erstellen einen neuen Eintrag und speichern diesen ab Anmerkung: Eingabe ist dabei der Titel von unserem Feld in der Tabelle Backlinks und Ranking
147
Step-By-Step zur eigenen Extension
Wir erhalten nun diese Ansicht. Als Label wird unsere Eingabe „Test Eintrag“ genutzt. Backlinks und Ranking
148
Step-By-Step zur eigenen Extension
Backlinks und Ranking
149
Mapping innerhalb einer Extension
Für das Layout benötigen wir eine CSS Datei und eine HTML Vorlage. Innerhalb der Extension können wir z.B. Daten aus der DB auslesen. Man sollte vermeiden HTML Code für die Darstellung in die TYPO3 Extension zu programmieren. Best Practice Eine HTML Vorlage mit Markern. Wir ersetzen diese Marker durch Inhalte und geben Inhalt + Layout aus. TYPO3 unterstützt diese Vorgehensweise perfekt und wir müssen diese nur nutzen. Backlinks und Ranking
150
Mapping innerhalb einer Extension
Eine HTML Vorlage erstellen Man muss sich überlegen, wie das Layout für die Darstellung der Inhalte aussehen soll. Backlinks und Ranking
151
Mapping innerhalb einer Extension
Im Ordner unserer erstellten TYPO3 Extension erstellen wir einen neuen Ordner templates. In diesem templates Ordner speichern wir unsere HTML Vorlage (z.B. template.html) ab. -> siehe nächste Folie Backlinks und Ranking
152
Mapping innerhalb einer Extension
In der template.html speicher wir unsere HTML Vorlage aus Folie #135 ab. Backlinks und Ranking
153
Mapping innerhalb einer Extension
Nun das Mapping innerhalb der Extension (typo3conf/ext/fh_test_ext/pi1/ class.tx_fhtestext_pi1.php) Backlinks und Ranking
154
Mapping innerhalb einer Extension
Die komplette Extension gibt es unter dieser URL als Vorlage studenten.browsermaniac.de/fh_test_ext.zip Backlinks und Ranking
155
Was liefert der Kickstarter
Backend Module TYPO3 erlaubt neben der Programmierung von Extensions für das FrontEnd, auch die Programmierung von Extensions für das Backend. Alle Extensions werden über den Kickstarter erstellt. Es handelt sich um eine Basis, welche uns zur Verfügung gestellt wird. Mit dieser Basis können wir unsere individuelle Programmierung durchführen und Probleme mittels TYPO3 lösen. Was liefert der Kickstarter
156
Backend Module Backend Module sind nicht sichtbar, wenn man eingeloggt ist. Sie bieten zahlreiche Vorteile. So kann man Gruppen erstellen, wie z.B.: Videothek Kundendaten Videobestand Mahnwesen Zusätzlich kann man einzelne Bereiche für bestimmte Benutzer freischalten (Gruppenrechte). Die Administration wird viel einfacher und viele Extensions nutzen Backend Moduke, wie TT News, DirectMail, usw. Download: Backlinks und Ranking
157
Backend Module Die Vorgehensweise ist ähnlich, wie bei der Programmierung von einem FrontEnd Plugin. Damit wir ein „Modul“ im Backend sehen können, müssen wir ein neues unter „Backend Modules“ anlegen. Backend Module findet man nicht unter pi1, sondern unter mod1 Darstellung der Inhalte erfolgt aus der index.php Backlinks und Ranking
158
Backend Module Backend Module sind in der Programmierung (etwas) komplizierter. Problem: Ein FrontEnd Plugin können wir nach „Lust und Laune“ gestalten. Beim Backend Module sind die Welt anders aus. Wir können unsere Funktionalität einbauen, müssen jedoch auch die Besonderheiten einer TYPO3 Installation (gemeint ist insbesondere das Backend) beachten. Backlinks und Ranking
159
Backend Module aus der mod1/index.php
aus der locallang.xml der Extension Backlinks und Ranking
160
Backend Module Wichtiger Unterschied zwischen FrontEnd und Backend Modul Bei einem Backend Modul werden automatisch Übersetzungen angelegt. Es gibt eine Default Sprache, welche über die Extension geladen wird. Der Umgang mit Übersetzung mittels TYPO3 ist komplex! Beim Backend Modul muss man das Konzept verstanden haben. Alternative – Man verlässt sich auf die Default-Settings aus dem Kickstarter. Backlinks und Ranking
161
Backend Module Die Zahlen 1 bis 3 repräsentieren die Navigationspunkte von unserem Backend Modul. In $content können wir unseren Inhalt speichern und im Backend für die Benutzer ausgeben. Wichtig: Für einfache Extensions, sollte man den restlichen PHP Code nicht verändern. Backlinks und Ranking
162
Sinnvolle Vorbereitung auf die Prüfung
Eine Extension erstellen mittels Kickstarter (z.B. Bibliothek) Mittels dieser Extension können Bücher zum ausleihen online gestellt werden ISBN Cover Kurze Beschreibung Status (ausleihbar/ausgeliehen) Bücher auf der Seite darstellen und ein HTML Template für die Darstellung nutzen Mittels AJAX (jQuery) einen Button einbauen und einen Film als ausgeliehen markieren Ein Backend Modul erstellen Übersicht über alle Filme Übersicht über Filme die ausgeliehen sind Übersicht über Filme, die nicht ausgeliehen sind Backlinks und Ranking
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.