Willkommen zu Ausgewählte Fragen der praktischen Informatik Fachhochschule Hannover Sommersemester...

Kurze Vorstellung

Willkommen zuAusgewählte Fragen der praktischen

Informatik

Fachhochschule Hannover Sommersemester 2014

Berufliches

Kurze Vorstellung

Thomas Arkadius Sluga

Ausbildung

Assisten für Informationstechnik

Studium

Studium – Angewandte Informatik (FH Hannover / Bachelor)Studium –High Performance Computing (UNI PB / Master)

Beispiele aus dem Beruf

BeruflichesTYPO3 und Magento EntwicklerProgrammierung von InternetseitenProgrammierung vom Extensions

SEO und Affiliate (Couponing)Schwerpunkt liegt bei TYPO3

Mobile Webdesign und Smartphone AppsiOS und Android Apps

Tätigkeit in diversen AgenturenSeit 2012 Geschäftsführender Gesellschafter

Dozent an der Fachhochschule HannoverSeit 2013 – Letzte LV WWW Techniken I (Medizinisches Informationsmanagement)

Beispiele aus dem beruflichen Alltag

Swopper


Intim esthetic


Die LV

Backlinks und Ranking

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)

OrganisatorischesAgenda und Timing für die Vorlesung

Termine im Mai

Datum Thema Datum Thema07.03.2014

Einführung und allgemeines 09.05.2014

Optimierung von TYPO3 Seiten

14.03.2014

Keine Vorlesung (Interkulturelle Kommunikation)

16.05.2014

Mobile Web

21.03.2014

Welche Content Management Systeme gibt es ?

23.05.2014

Entwicklung von Apps + Übung

28.03.2014

TYPO3 aus der Sichtweise der Entwickler 30.05.2014

Keine Vorlesung (Christ Himmelfahrt)

04.04.2014

Programmierung von TYPO3 Extensions 06.06.2014

Besprechung der Übung

11.04.2014

TYPO3 Extension – Videothek + Übung 13.06.2014

Data Mining und Security

18.04.2014

Keine Vorlesung (Ostern) 20.06.2014

Zusammenfassung / Prüfungsvorbereitug

25.05.2014

Besprechung der Übung + Lösung23.06.2014 – Beginn Prüfungszeitraum

02.05.2014

TYPO3 und Ajax / jQuery

Organisatorisches

Mögliche Änderungen

Agenda und Timing für die Vorlesung

Datum Thema Datum Thema07.03.2014

Einführung 09.05.2014

Optimierung von TYPO3 Seiten

14.03.2014

Keine Vorlesung (Interkulturelle Kommunikation)

16.05.2014

Mobile Web

21.03.2014

Welche Content Management Systeme gibt es ?

23.05.2014


28.03.2014

TYPO3 aus der Sichtweise der Entwickler 30.05.2014

Keine Vorlesung (Christ Himmelfahrt)

04.04.2014

Programmierung von TYPO3 Extensions 06.06.2014


11.04.2014

TYPO3 Extension – Videothek + Übung 13.06.2014

Data Mining und Security

18.04.2014

Keine Vorlesung (Ostern) 20.06.2014

Zusammenfassung / Prüfungsvorbereitug

25.04.2014

Besprechung der Übung + Lösung23.06.2014 – Beginn Prüfungszeitraum

02.05.2014

TYPO3 und Ajax / jQuery

Einteilung der Gruppe

(Mögliche) Änderungen im MaiUmzug in die Schweiz am 01.06.2014

Datum Thema Datum Thema07.03.2014 (FR)

Einführung 02.05.2014 (FR)

Optimierung von TYPO3

21.03.2014 (FR)

Welche CMS gibt es ? 03.05.2014 (SA)

Mobile Web

22.03.2014 (SA)

TYPO3 aus der Sichtweise der Entwickler

09.05.2014 (FR)


28.03.2014 (FR)

Programmierung von TYPO3 Extensions

16.05.2014 (FR)


04.04.2014 (FR)

TYPO3 Extension Videothek + Übung 23.05.2014(FR)

Vorbereitung zur Prüfung

11.04.2014 (FR)

Besprechung der Übung + Lösung

18.04.2014 (FR)

Keine Vorlesung (Karfreitag)

19.04.2014 (SA)

Eventuell LV23.06.2014 – Beginn Prüfungszeitraum

25.04.2014 (FR)

TYPO3 und AJAX / jQuery

Einteilung der Gruppe


Einteilung der Gruppen

Los geht es

Einteilung der GruppeEinteilung der Gruppen

Gruppe Vorlesung Zeitraum1. Gruppe Prak. Informatik 09:00 Uhr – 10:30 Uhr1. Gruppe Prak. Medieninformatik 10:45 Uhr – 12:15 Uhr

2. Gruppe Prak. Informatik 12:30 Uhr – 14:00 Uhr2. Gruppe Prak. Medieninformatik 14:15 Uhr – 15:45 Uhr

Vorlesungen am Samstag – Beginn eine Stunde später !!!!!!


Berufsbild - InformatikerNerd – Geek - Informatiker

Top-Marken

Die Top-Marken dieser Welt


eCommerce in Deutschland

Newcomer

Der Trend zum „Online“ – Die Klassiker

Der Trend zum „Online“ – Die Newcomer

Informatik ist TeamWork


Informatiker sind gefragt

IT Boomt

Fakten zum Thema IT (Informatik)Fakt ErklärungEinstiegsgehalt

50% aller AG zahlen zwischen 35.000 und 44.000 €

Gute Jobs 30% der Unternehmen zahlen mehr als 47.000 € ( primär in Hamburg, Köln, Berlin, München)

Sehr gute Jobs 10% der Unternehmen zahlen mehr als 59.000 €

WICHTIGVon der Masse abheben und sich

spezialisieren


IT Boomt

Content Management Systeme

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

Wordpress

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 ..

Fakten zu Wordpress

WordpressDie „Blogger-Software“ für das Internet


WordpressDie „Blogger-Software“ für das Internet

1. Sehr einfache Installation2. Man benötigt keine Kenntnisse im Bereich HTML, CSS,

PHP, Datenbanken3. Die meisten Hoster unterstützen Wordpress

problemlos4. Themes können problemlos ausgetauscht werden5. Kommentarfunktion unterstützt die Kommunikation6. Pingback erlaubt ein schnelles Feedback bei

Verlinkung7. Einfache Anbindung von sozialen Netzwerken8. Tausende von (nützlichen ) Plugins


Nachteile von WordpressDie „Blogger-Software“ für das Internet

1. Schwer zu vermarkten, da eben einfach zu installieren

2. (Sehr) beliebt für Angriffe3. Sehr oft müssen Updates durchgeführt werden4. Viele Themes sind schwer zu konfigurieren5. Keine Mehrsprachigkeit (Standard mit Möglichkeiten

zur Umsetzung)6. Templates und Flexibilität ist schwer umsetzbar

eCommerce



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


Das Magento Backend

Was muss ein gutes CMS leisten ?

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)

Interesse an Agenturen

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 Angenturen

Joomla


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

TYPO3

TYPO3

Datenbanken in TYPO3

TYPO3Denkanstöß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


Die Datenbanken in TYPO3

TYPO3 Besitzt sehr viele Tabellen

Aufbau der Tabellen

Die Datenbanken in TYPO3Hinweis

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 – eMails 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)

Wichtige Tabellen

Aufbau der Tabellen

(Fast) alle Tabellen besitzen den gleichen grundlegenden Aufbau

1. id für Einträge2. pid (falls Einträge zu einer Seite im Seitenbaum

gehören)3. crdate (Datum der Erstellung vom Eintrag)4. tstamp (Datum der letzten Änderung)5. 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 (Benutzerverwaltung)

FrontEnd User Tabelle

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!

Tabelle Pages

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.

1. Problem: Passwörter stehen im Klartext in der Datenbank2. Möchte ein Benutzer seinen Account löschen, dann wird nur ein

Flag gesetzt

Ein Blick in die Tabelle pages

Wieso ist pages wichtig ?

Password:

Steht als Klartext in der Datenbank

Disable:

Account ist inaktiv, bis die eMail aktiviert wurde. Wichtig: Template für den Versand selber erstellen. Beim Mail vom Mac wird die eMail nicht dargestellt!

Starttime und endtime:

Wie lange soll der Account aktiv sein ?

Deleted:

Flag, welches den Account als gelöscht markiert

Ordner in einer Installation

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

Die Ordner innerhalb einer TYPO3 Installation

Ordner uploads

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

Typo3conf Ordner

Hinweise zum Ordner uploadsDer 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.

Localconf.php

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.

Löschen einer Extension

localconf.phpWichtige 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 ExtensionWird 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 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

Bearbeiten einer Extension (Rechte)

Bearbeiten einer ExtensionVor 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.

www.domain.tld/typo3/install

Login->All Configuration

Ändern der Rechte (siehe nächste Folie)

http://www.domain.tld/typo3/install

Durchatmen

Bearbeiten einer Extension

Zusammenfassung

Durchatmen…..

VIEL WICHTIGER INPUT

Entwicklung einer Extension

Kleine Zusammenfassung1. TYPO3 speichert (fast) alle Inhalte in der Datenbank2. Extensions können auf die Daten in der Datenbank zugreifen3. Extensions muss man deinstallieren und entfernen4. Beim anlegen einer Extension im Install-Tool die Rechte prüfen5. Extensions werden unter typo3conf/ext gespeichert6. In der typo3conf/localconf.php werden die Extensions geladen7. Dateien im Ordner uploads werden in der Regel nicht gelöscht8. Timestamps in den Tabellen werden durch TYPO3 automatisch

aktualisiert9. Passwörter der registrierten User stehen im Klartext in der Datenbank10.Einträge in der Datenbank werden nicht gelöscht, sondern als gelöscht

markiert

Grundlagen

Entwicklung einer Extension in TYPO3

Entwicklung einer Extension für das CMS TYPO3

PHP in TYPO3

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

Zugriff auf die DB

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

Aufbau für SELECT in einer Extension

Beispiel select

Die Online-Videothek

Beispiel – Wann wurde eine Seite erstellt ?

Hinweis: Der GLOBALS Eintrag liefert die uid der aktuellen Seite.

TYPO3 Installation

Unsere Videothek

Wir bauen uns eine Online-Videothek

Eine neue TYPO3 Installation

3 wichtige Extensions

Wir aktualisieren unsere Liste mit Extensions

TYPO3 Seitenbaum

3 wichtige Extensions installieren

Wir benötigen die folgenden Extensions:

1. templavoila2. static_info_tables3. Kickstarter

Alternativ – hannover.couponwerk.de/extensions.zip

Videothek bearbeiten

TYPO3 Seitenbaum

General Storage Folder

General storage folder

Seite Videothek bearbeiten

Sichtbarkeit



Order für templates erstellen

Page disable entfernen


Ordner für templates erstellen

Template erstellen

Template erstellen


Template-Mapping in TYPO3

Gemeinsame Übung


JavaScript

Interaktivität im Web und in Apps ermöglichen

JavaScript

Kommunikation ohne reload

CLIENT SERVER

(X)HTML

CSS

JavaScript

mySQL

PHP

Einseitige Kommunikation

Java nicht JavaScript

JavaScript

CLIENT SERVER

(X)HTML

CSS

JavaScript

mySQL

PHP

Einseitige Kommunikation

Kommunikation ohne reload ?

Geschichte zu JavaScript

JavaScript

Hallo Welt

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!

JS Beispiel

Hallo Welt in JavaScript

Beispiel #1:

http://studenten.couponwerk.de/000-000-Thomas/js/js1.html

Variablen

JavaScript – Ausgabe im HTML Dokument

Beispiel #2:


Variablen ausgeben

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!

Funktionen

Variablen ausgeben

Beispiel #3:


Funktionen am Beispiel

Funktionen

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.

Debugging

Funktionen am Beispiel

Beispiel #4:


Debugging Konsole

Debugging mit Firebug (Quellcode)Ausgabe von Informationen durch console.log()


Debugging mit Firebug (Konsole)


HTML + CSS + JS kombinieren

HTML

CSS

Template + Inhalt

Design für das Template

Unser Client / Webbrowser z.B. Firefox

Engine baut die Internetseite auf Basis vom HTML Template und dem Design in unserem CSS beim Client auf.

Die Inhalte sind statisch! Wir können das Template, das Design oder den Inhalt nicht mehr verändern.


HTML + CSS + JS kombinieren

HTML

CSS

Template + Inhalt

Design für das Template

Unser Client / Webbrowser z.B. Firefox

Engine baut die Internetseite auf Basis vom HTML Template und dem Design in unserem CSS beim Client auf.

JavaScript

JavaScript kann auf HTML Elemente, Inhalte oder Layout zugreifen und diese verändern. Seite wird dynamisch!

ID und JavaScript

ids

Modifikation von Inhalten

Wie können wir den Inhalt von diesem Tag ermitteln, verändern oder den kompletten Tag aus dem HTML Dokument entfernen ?

Problem: Es gibt mehrere Tags in diesem Dokument und das eine ist nicht eindeutig gekennzeichnet!

Inhalte auslesen

ID und JavaScriptWir bauen ein ID für unser Tag ein. Über die ID können wir das Tag innerhalb von CSS stylen:

p#p_absatz1{ color:red;}

In JavaScript können wir auf die ID vom Tag zugreifen und den Inhalt z.B. auslesen.


1. Versuch – Inhalt auslesenWir 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!


2. Versuch – Inhalt auslesen

Eine mögliche Lösung:

Wir platzieren unser JavaScript am Ende.

Wir erhalten noch eine Ausgabe, aber nicht die korrekte

Der Dom

Erklärung zur AusgabeFehler 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:


DOM Eigenschaften

Der DOM am Beispiel

Mit der Maus auf p#p_absatz1 gehen

Der DOM + Eigenschaften vom TagAufklappen

Der DOM + Eigenschaften vom Tag

Mittels innerHTML können wir auf den Inhalt zugreifen!

JS ohne IDS

Der Inhalt von unserem TagWir übernehmen das innerHTML aus dem Firebug und fügen dies in unser JavaScript ein.

Array von Tags auslesen

Auf zugreifen ohne IDOhne ID müßen wir auf alle zurückgreifen und wir erhalten ein Array.

Wir müssen wissen, welches Tag wir ausgeben/bearbeiten möchten und dann über das Array auf das Tag zurückgreifen.

DOM erweitern

Array von Tags auslesen

Auf das erste Element mittels inhalt[0].innerHTML zugreifen. Beim Array beginnen wir bei 0 und nicht bei 1

Neues Element einfügen

DOM erweitern mittels JS

Aktionen mit JS

Neue Elemente einfügen

Unser Ergebnis

Manipulation vom DOM

Aktionen mit JS durchführenMit 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:


Formular validieren

Manipulation vom DOM

Check Formular

Formular validieren mit JSJavaScript eignet sich sehr gut zum validieren von Formularen.

JavaScript Funktion zum validieren von diesem Formular.

checkFormular()1. 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

Aktueller Status

informUser()

Wir informieren nach dem validieren den Besucher über mögliche Fehler bei der Eingabe!

Beispiel unter: http://studenten.couponwerk.de/000-000-Thomas/js/js13.html


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.

Einige Fehler

Die ProblematikDie „Timeline“ der Vorlesung ist in dieser Form nicht möglich

• JavaScript/AJAX ist nicht bekannt und es mangelt an Know-How im Bereich PHP

Einteilung der Zeit

Die ProblematikWas 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

Wann gibt es Vorlesungen ?

Die ProblematikDie 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.

Der Ajax Call

VorlesungenAn folgenden Tagen werden noch Vorlesungen gehalten:

• 11.04.2014• 12.04.2014 ( Labor ist belegt)• 19.04.2014 ( Samstag )• 25.04.2014 (Freitag)• 30.05.2014 (Freitag)• 31.05.2014 (Samstag)• 20.06.2014 (Prüfungsvorbereitung/Freitag)• 23.06.2014 (Prüfungszeitraum)

Ansatz von Framework

Der Ajax Call

Was bietet JavaScript

jQuery – Das JavaScript FrameworkDer 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

jQuery – Das JavaScript Framework

Das jQuery JS 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.

jQuery – Das JavaScript Framework

jQuery einbinden

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 http://jquery.com/

Unterschied Client / Server

jQuery einbindenEinbindung 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

Was wird für AJAX benötigt

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.

Beispiel HTML

Trennung von Inhalt und DatenBeispiel 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: http://studenten.browsermaniac.de/ajax.htmlhttp://studenten.browsermaniac.de/ajax_content.php

http://studenten.browsermaniac.de/ajax.html

http://studenten.browsermaniac.de/ajax_content.php

Ajax in TYPO3

Trennung von Inhalt und Daten

Was passiert hier ?

Ajax und der Einsatz in TYPO3AJAX und TYPO3 ist grundsätzlich kein Problem

Folgende Seite im FireFox und z.B. im Google Chrome öffnen:

http://studenten.browsermaniac.de/sluga-ajax-1.html

Auf „Status ändern“ klicken

http://studenten.browsermaniac.de/sluga-ajax-1.html

Wie funktioniert JS

Ajax und der Einsatz in TYPO3Welcher 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

• eMail Clients (ist eine neue eMail da)• Artikel in einen Warenkorb legen, ohne reload der Seite• uvm.

Beispiel der Extension

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.

Im Kickstarter bearbeiten

Wie funktioniert diese Funktionalität ?

Daten aus dem Kickstarter


Tabellen richtig erweitern


Extend existing TablesIn diesem Bereich wird die vorhandene Tabelle erweitert.

Frontend PluginsWir 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.


Wie funktioniert das Flag ?

Tabelle auswählen, welche erweitert werden soll

Die Tabellen der Extension

Wie funktioniert diese Funktionalität ?Der Server muss zwei unterschiedliche Funktionen bereitstellen

1. Eine Datei, welche auf die Datenbank zugreift und den Status vom Film auslieht. Hierfür muss eine eindeutige ID vom Film übergeben werden!

2. 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 einenPrimärschlüssel besitzen. Dies hat der Kickstarter für uns automatisch

angelegt.

Die PHP Dateien

Wie funktioniert diese Funktionalität ?Inhalt von ext_tables.sql aus unserer Extension

uidFortlaufende Nummer der Filme in der Datenbank

pidIst die uid der Seite, wo man den Film hinterlegt hat (in der List-Ansicht)

Die status.php

Wie funktioniert diese FunktionalitätFolgende Dateien im Webbrowser öffnen

• http://studenten.browsermaniac.de/fileadmin/ajax/status.txt• http://studenten.browsermaniac.de/fileadmin/ajax/rent.txt

http://studenten.browsermaniac.de/fileadmin/ajax/status.txt


Updates

Der aktuelle Status vom Filmfileadmin/ajax/status.php

Die Funktionalität

ENDE


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.


Die FAQ zur Extensionprogrammierung

Q: In welchem Ordner liegen die Daten meiner ExtensionA: typo3conf/ext/extension_key

Q: Ich kann meine Dateien nicht bearbeitenA: 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


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


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“


Step-By-Step zur eigenen ExtensionIm 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“


Step-By-Step zur eigenen ExtensionUnter „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


Step-By-Step zur eigenen ExtensionFü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!



(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:


Step-By-Step zur eigenen ExtensionDer 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.


Step-By-Step zur eigenen ExtensionIn diesem Bereich können wir eine oder mehrere Tabellen für unsere Extension anlegen. Dabei muss man folgendes beachten:

Title of the tableDies ist der Text, der uns beim einfügen von neuen Datensätzen in der Listenansicht angezeigt wird.


Step-By-Step zur eigenen ExtensionLö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!



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.


Step-By-Step zur eigenen ExtensionWir können nun unsere Tabelle erstellen mit allen Feldern, dieWir 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.


Step-By-Step zur eigenen ExtensionDamit 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



Wir erstellen einen „Test Eintrag“. Also einen Eintrag in unsere Tabelle.



Wir erstellen einen neuen Eintrag und speichern diesen ab

Anmerkung: Eingabe ist dabei der Titel von unserem Feld in der Tabelle



Wir erhalten nun diese Ansicht. Als Label wird unsere Eingabe „Test Eintrag“ genutzt.


Mapping innerhalb einer ExtensionFü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.


Mapping innerhalb einer Extension

Eine HTML Vorlage erstellen

Man muss sich überlegen, wie das Layout für die Darstellung der Inhalte aussehen soll.



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


Mapping innerhalb einer ExtensionIn der template.html speicher wir unsere HTML Vorlage aus Folie #135 ab.


Mapping innerhalb einer ExtensionNun das Mapping innerhalb der Extension (typo3conf/ext/fh_test_ext/pi1/ class.tx_fhtestext_pi1.php)



Die komplette Extension gibt es unter dieser URL als Vorlage

studenten.browsermaniac.de/fh_test_ext.zip

Was liefert der Kickstarter

Backend ModuleTYPO3 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.


Backend ModuleBackend Module sind nicht sichtbar, wenn man eingeloggt ist. Sie bieten zahlreiche Vorteile. So kann man Gruppen erstellen, wie z.B.:

Videothek1. Kundendaten2. Videobestand3. 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: http://studenten.browsermaniac.de/backend_videothek_sluga.zip


Backend ModuleDie 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


Backend ModuleBackend 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.


Backend Module

aus der mod1/index.php

aus der locallang.xml der Extension


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.


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.


Sinnvolle Vorbereitung auf die Prüfung1. Eine Extension erstellen mittels Kickstarter (z.B. Bibliothek)2. Mittels dieser Extension können Bücher zum ausleihen online gestellt

werden1. ISBN2. Cover3. Kurze Beschreibung4. Status (ausleihbar/ausgeliehen)

3. Bücher auf der Seite darstellen und ein HTML Template für die Darstellung nutzen

4. Mittels AJAX (jQuery) einen Button einbauen und einen Film als ausgeliehen markieren

5. Ein Backend Modul erstellen1. Übersicht über alle Filme2. Übersicht über Filme die ausgeliehen sind3. Übersicht über Filme, die nicht ausgeliehen sind

Willkommen zu Ausgewählte Fragen der praktischen Informatik Fachhochschule Hannover Sommersemester...

Documents

Transcript of Willkommen zu Ausgewählte Fragen der praktischen Informatik Fachhochschule Hannover Sommersemester...