Lehrlings Blog

27. März 2012 in Web von Leo

Kürzlich erstellte ich für einen Kunden einen Facebook Tab, worauf ich auch verschiedene Probleme stiess. So wurde zum einen der Scrollbalken im Firefox angezeigt, in anderen Browser jedoch nicht, was auch korrekt so wäre. Der erste Lösungsansatz war per CSS overflow auf hidden zu setzen und einfach dem Tab via Facebook eine feste höhe zu geben. Leider war dies keine gute Lösung, so kam es im Firefox teilweise dazu, dass der Inhalt abgeschnitten ist und der Tab kleiner als wir in den Facebook Optionen definiert haben blieb.

Lösung des Problems war schlussendlich folgendes Code-Schnippsel, welches vor dem schliessenden Body-Tag platziert werden muss:

<script src="//connect.facebook.net/en_US/all.js" type="text/javascript"></script>
		<script type="text/javascript">
			FB.init({
				appId  : 'appId',
				status : true, // check login status
				cookie : true, // enable cookies to allow the server to access the session
				xfbml  : true  // parse XFBML
			});
			FB.XFBML.parse();
			FB.Canvas.setAutoResize();
		</script>

in TYPO3 von Leo

Heute war es mal wieder an der Zeit ein Update für einen Kunden durchzuführen. So führte ich ein Update von 4.2.10 auf 4.5.13 (die aktuellste Version zurzeit) durch. Gesagt getan, die Symlinks zur neuen TYPO3 Source wurden umgeschrieben und prompt überrascht mich TYPO3 mit einem Fatal Error, welchen ich bisher noch nie gesehen habe.

Folgender Fehler wurde angezeigt:

Fatal error:  Uncaught exception 'ReflectionException' with message 'Class t3lib_lock does not exist' in /var/www/typo3_src/typo3_src-4.5.stable/t3lib/class.t3lib_div.php

Nach einer kurzen Suche in Google fand ich auch gleich eine Lösung, so löste folgende Zeile in der localconf.php Datei das Problem:

$TYPO3_CONF_VARS['SYS']['enableDeprecationLog'] = '0';

Diese deaktiviert den Deprecation Log, welcher sowieso nur unnötig viel Speicherplatz benötigt und zurzeit bei uns nun Standardmässig deaktiviert wird.

Nachtrag 30.3.2012: Mit der neuen TYPO3 Version 4.5.14 sollte dieser Fehler behoben worden sein.

2. März 2012 in TYPO3 von Leo

Kürzlich erhielt ich den Auftrag mich über Petitionen in TYPO3 zu informieren. Gibt es geeignete Extensions um Petitionen zu erstellen oder muss man im Notfall für den Kunden selbst etwas Programmieren? Hier meine Erfahrung:

Mein erster Anlaufpunkt war des Extension Repository auf typo3.org, wo ich dann auch gleich ein paar Resultate erhielt mit dem “petition” Suchbegriff. Leider waren die gefundenen Extensions nicht was benötigt wurde und waren grösstenteils auch sehr veraltet. Folgende Extensions scheinen für Petitionen gemacht zu sein:

• attacpetition (kein Manual, alt (2008))
• dl3_petition (kein Manual, alt (2006))
• cd_petition (kein Manual, alt (2009))
• a3_petition (kein Manual, nicht sehr Umfangreich – kaum Funktionen)

Leider sprach mich also keine der oben genannten Extensions an, da ich auch nichts veraltetes haben will. Schlussendlich entschied ich mich für die sr_feuser_register Extension, welche eigentlich für die normale fe_user Registrierung gedacht ist. Da die Extension jedoch eine sehr Umfangreiche Konfiguration und dazu auch ein Manual hat, probierte ich mich daran es mit dieser Extension zu versuchen.

So konfigurierte ich verschiedenes und blendete z.B. Benutzername, Passwort und all die anderen Felder die an eine Registrierung erinnern aus, passte das ganze sonst noch etwas an und fertig war es.

Eine Erweiterte Anleitung mit der Konfiguration, Tipps etc wird noch folgen!

23. Februar 2012 in TYPO3 von Leo

Um seine TYPO3 Webseite mit Meta Tags wie einer Description oder Keywords für SEO zwecke erweitern will (auch wenn diese mittlerweile keinen hohen SEO Wert mehr haben), kann dies ganz simpel über TypoScript lösen.

Will man ganz einfach die Meta Tags im Quellcode einfügen und den Inhalt aus dem Feld welches man in den Seiteneinstellungen der jeweiligen Seite hat, hilft einem folgender TS Code ab, welcher man ins TS Setup der root Seite kopiert:

page.meta {
  description {
    data = page:description
  }
  keywords {
    data = page:keywords
}

Will man das ganze noch aus der Übergeordneten Seite auslesen falls keine Tags / Description gesetzt ist, muss man folgendes tun.
Als erstes muss die localconf.php bearbeitet werden. Dort erweitert man die Einstellung “addRootLineFields” um die Felder “keywords” und description”:

$TYPO3_CONF_VARS['FE']['addRootLineFields'] = 'keywords,description';

Falls die Einstellung noch nicht in der localconf ist kann die Zeile oben direkt eingefügt werden.

Nun erweitern wir unseren TS Code im TS Setup, so dass er schlussendlich so aussieht:

page.meta {
  description {
    data = page:description
    ifEmpty.data = levelfield :-1, description, slide
  }
  keywords {
    data = page:keywords
    ifEmpty.data = levelfield :-1, keywords, slide
}

Fertig!

5. Februar 2012 in Allgemein von Leo

Mitte 2011 kam es bei uns in der Firma zur Idee, dass es ein Lehrlingsprojekt geben soll. Das Lehrlingsprojekt ist ein Projekt welches von den Lehrlingen Programmiert werden soll, um ihre Programmierkenntnisse zu verbessern und insbesondere sich mit Extbase und Fluid anzufreunden. Wenige Tage nach der Idee kam es zur Projekt-Idee, das “Znüni Projekt 2.0″ wurde geboren.

Das Znüni-Projekt 2.0
Bereits vor dem Znüni-Projekt gab es bei uns in der Firma eine Webapp, mit welcher wir Znüni (Frühstück) Bestellungen aufgeben konnten. So konnte dies jeweils einer für alle holen. Da es als App gemacht wurde, wurden mühsame Einkaufslisten überflüssig. Die erste Znüni App war jedoch sehr einfach und schlicht, deshalb sollte das Znüni-Projekt 2.0 viele neue Features mit sich bringen und vieles grundlegend vereinfachen.

Main-Features des Znüni-Projekts 2.0:
- Userverwaltung
- Guthabenverwaltung
- Desktop- und Mobileview
- Nutzung von mehreren Firmen (erkennung via Code)

Startscreen:

Dies ist der Startscreen des Znüni-Projekts. Hat man sich als Firma bereits registriert kann man hier seinen Code eintippen. Ansonsten kann man den Firmennamen eintippen und gelangt zur Registrierung.

Registrierung:

Hier sieht man das Registrierungsformular. Unten wird ein eindeutiger Code generiert mit welchem man sich auf der Startseite identifizieren kann.

Einkaufsliste:

Hier sieht man die Einkaufsliste im Desktop-View. Alle Einkäufe werde inklusive Besteller, Anzahl und Alternativprodukt angezeigt.

Bestellung hinzufügen:

Das Bestellformular ist ein simples Formular wo eingetragene Produkte ausgewählt werden können, sowie alle anderen notwendigen Informationen.

Produktliste:

Die Produktliste besteht aus hinzugefügten Produkten. Neue Produkte müssen zurzeit manuell hinzugefügt werden da es noch keine Schnittstellen gibt.

Produkte-Sets:

Falls man öfters das selbe bestellt kann man sich auf Produkte-Sets erstellen. So kann man alle Produkte in einem Set der Einkaufsliste hinzufügen.

Orientierung:

Für eine bessere Effizienz beim Einkaufen haben Produkte eine Orientierung. Sprich es wird angegeben wo sich das Produkt befindet, z.b. zuerst kommen die Getränke und zuletzt das Gemüse. Diese Reihenfolge wird auch in der Mobileapp berücksichtigt.

Benutzer:

Hier sieht man die Benutzerübersicht. Hier können Benutzer hinzugefügt, bearbeitet und gelöscht werden. Ausserdem kann direkt Guthaben hinzugefügt oder abgezogen werden.

Zum Znüni Projekt

3. Februar 2012 in TYPO3 von Leo

Als ich heute ein Update einer eigenen Extension welche ich zuvor lokal programmiert habe auf den Live Server deployed habe, kam es zu einem Unerwarteten Extbase Error:

Could not analyse class:Tx_Znueni_ViewHelpers_IsOldViewHelper maybe not loaded or no autoloader?

Anscheinend gibt es also ein Problem mit dem ViewHelper wie man oben aus der Fehlermeldung lesen kann. Jedoch ist die Klasse vorhanden und auch lokal macht es keinerlei Probleme. Und auch den Autoloader wird nicht benötigt, da Extbase dies ja eigentlich alles selbst regelt – sofern alles richtig benannt ist, und hier lag auch das Problem. Lokal auf meinem Mac machte dies keine Probleme, auf dem Linux Server jedoch schon. Und zwar lag es daran, dass der Dateiname des ViewHelpers mit einem Kleinbuchstaben anfing. Die Gross/Kleinschreibung spielt auf dem Server eine rolle, weshalb ich dies geändert habe, wodurch alles wieder wunderbar funktionierte.

19. Januar 2012 in TYPO3 von Leo

Kürzlich habe ich mal wieder eine Reihe an TYPO3 Updates für unsere Kunden verrichtet. Die Updates, welche normalerweise (bis vereinzelt auf ein paar Server probleme) sehr gut klappen, machte mir dieses mal ein Update von TYPO3 4.3 auf 4.5 zu schaffen. Da die TYPO3 Installation auf welcher das Problem auftauchte nicht von uns stammt, sondern erst später von uns übernommen wurde, war das ganze natürlich etwas unorganisierter und chaotischer.

Das Problem was ich beim genannten Update hatte, hängte mit dem neuen Kontext-Menu, welches in TYPO3 4.5 neu vorgestellt wurde zusammen. Kurz gesagt, es funktionierte nicht. Anstatt das die Page-Icons angezeigt wurden, welche man in den Seitenbaum ziehen kann um eine neue Seite zu erstellen, wurde nur ein rotes Kreuz (welches für “fatal error” steht) angezeigt.

Nach langer Google recherche und mithilfe von Arbeitskollegen hatten wir leider noch keine Lösung in Sicht. Jedoch wurde das Problem nicht aufgegeben, wodurch ich später einen Glückstreffer landete und die Lösung des Problems fand. Das Problem lag an folgender Zeile in der localconf.php (welche nicht von uns stammte):

$TYPO3_CONF_VARS['BE']['defaultUserTSconfig']="";

Nachdem ich die Zeile gelöscht habe, hat sich das Problem gelöst.

10. Januar 2012 in Coden, PHP, TYPO3 von Leo

Vor kurzem habe ich mit intensiv mit Extbase befasst, da ich auch gerade eine Extbase Erweiterung für einen Kunden erstellen musste. Da ich vorher “normal” TYPO3 Extension programmiert habe, habe ich natürlich bereits TypoScript über die Extension geladen, jedoch wird das ganze in Extbase etwas anders gemacht.

Folgender Code-Schnippsel wird genutzt:

$group = $this->settings['group']

Das TypoScript hierzu würde folgendermassen aussehen:

plugin.tx_meineExtension {
 settings {
  group {
   1 {
    label = Gruppe 1
   }
  }
 }
}

Zu beachten ist hierbei eigentlich nur, dass mit $this->settings auf “settings” (siehe oben) in den Einstellungen unserer Extension zugegriffen wird.

in Android, Coden, Javascript, Tutorials von Leo

In der Schule haben wir im JavaScript Modul den Auftrag erhalten, eine Android App mithilfe von PhoneGap zu programmieren. Ein weiterer Teilpunkt des Auftragspunkt gab es, wenn man das ganze mithilfe von jQuery Mobile umsetzt. Da ich jQuery schon kenne, dachte ich wieso nicht, und setzte mich mit jQuery Mobile auseinander.

Nun eine kleine Anleitung:

1. Als erstes muss natürlich PhoneGap korrekt installiert werden. Die beste Anleitung findet ihr hier, auf der offiziellen PhoenGap Website.
2. Das ganze geht von unserem index.html File aus. Dieses wird beim Start der App über PhoneGap aufgerufen. In der Anleitung oben wurde dieses File erstellt, es befindet sich im Verzeichnis /assets/www.
3. Nun benötigen wir jQuery Mobile, sprich das JS, CSS und die Bilder für die Designs. Dies alles kann hierheruntergeladen werden. Weiter unten auf der Download-Seite findet ihr den Link zu einem Zip (“If you want to host the files yourself you can download a zip of all the files:”), dieses sollte heruntergeladen werden. Es gibt noch weitere möglichkeiten, so kann jQuery auch aus dem Web geladen werden, dann wäre es jedoch nicht lokal auf dem Handy und würde Traffic verursachen, bzw. bei keiner Datenverbindung gar nicht geladen werden. JQuery Mobile lokal zu haben ist also der sicherste weg.
4. Haben wir jQuery Mobile heruntergeladen entpacken wir es und legen es auch ins www/ Verzeichnis wie unsere index.html-Datei. Das ganze wird nun in den Header inkludiert:

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
   

   Dies alles kommt natürlich in den Header (<head>) und die Link müssen auch noch angepasst werden (jenachdem wo ihr eure Files hingelegt habt).

5. Nun wo alles eingebunden ist, können wir mit einer ersten Seite beginnen. Damit das ganze so aussieht wie es aussehen sollte, wird eine spezielle Seiten Anatomie von jQuery Mobile verlangt. Mehr dazu findet ihr hier.
   Wir fügen für eine erste Seite also folgenden Code zwischen die Body-Tags unseres index.html-Files:

   <pre><div data-role="page" id="idDerSeite">
   	<div data-role="header">...</div>
   	<div data-role="content">...</div>
   	<div data-role="footer">...</div>
   </div></pre>
   

6. Der HTML-Code oben stellt jetzt eine Seite dar. Um mehrere Seiten zu erstellen, kopiert man den obigen Code einfach mehrmals in den Body-Tag der Seite und ändert die ID der Seite. Jeweils die oberste Seite wird als Standardseite genutzt, sprich, als erstes aufgerufen. Um die Seiten zu verlinken kann einfach ein normaler HTML-Link gemacht werden mit dem href=”#idDerSeite”.

28. Oktober 2011 in Coden von Leo

In den letzten Tagen habe ich mich sehr mit JavaScript befasst, wodurch ich auch mit dem Hash in einer URL in berührung kam.
Das gelernte sowie verschiedene Code Schnippsel möchte ich euch hier nun vorstellen:

Zuerst mal ganz grundlegend, wie komme ich an den Hash?
Um an den Hash zu kommen habe ich folgende Zeile Code genutzt:

var hash = location.href.substr(location.href.indexOf("#")).substring(1);

Da ich in meinem Beispiel jetzt eine Nummer erwartet habe (eine ID um genau zu sein), habe ich den Hash zuvor noch getestet ob es auch wirklich eine Zahl ist, bevor ich ihn weiterverarbeite.
Dies habe ich mit folgender Funktion gemacht:

isNumeric: function(n){
   return !isNaN(parseFloat(n)) && isFinite(n);
}

// Testen
if(isNumeric(hash)){
   // ...
}

Nun, damit wir das ganze noch dynamischer machen können, also um gleich zu sehen ob sich der Hash geändert hat und wir weitere Ereignisse abspielen können, benutzen wir “hashchange”.

Dies sieht so aus:

$(window).bind('hashchange', function (e){
   // on hash change, do this
});

Dies funktioniert jedoch nur in neuen Browsern, Browser wie IE7 oder kleiner würden damit nicht zurecht kommen. Jedoch kann dies mithilfe eines zusätzlichen JS Files geändert werden, damit auch diese unterstützt werden. Finden könnt ihr dies unter folgendem Link: Klick.