Coding

Pimcore Tutorial Teil 1b: Installation via Composer

Posted on by Schubie

Heute beschreibe ich eine alternative Installation von Pimcore, nämlich mit Composer.

 

Für Ubuntu geht ihr hier folgendermaßen vor:

Installation von Composer

Schritt 1:

Ihr aktualisiert den Paket-Manager:

Anschließend installiert ihr mit apt-get install folgende Pakete:

Je nach verwendeter PHP Version kann die Zeile auch folgendermaßen aussehen, wobei die statt der 7.2 dort auch 7.1 oder irgendeine andere 7er Versionsnummer stehen kann:

Jetzt habt ihr Voraussetzungen erfüllt, um Composer auf eurem System zu installieren, daher können wir nun mit Schritt 2 fortfahren.

Schritt 2: 

Ihr wechselt in euer Home-Verzeichnis und installiert anschließend Composer mit folgenden zwei Befehlen:

Anschließend könnt ihr die Installation mit einem kleinen Script in der Kommandozeile (Bash) überprüfen, wobei ihr den aktuellen SHA-384 Wert (Installer Signature) von der Composer Seite verwenden und entsprechend im folgenden Skript austauschen solltet:

In der Regel bekommt ihr eine Erfolgsmeldung zurück.

Installer verified 

Ihr könnt Composer auch global auf dem System installieren. Dazu gebt ihr in die Shell folgendes ein:

Das installiert Composer für alle Benutzer auf eurem System unter /usr/local/bin. Ihr erhaltet in etwa folgende Ausgabe nach der Installation:

Jetzt könnt ihr eure Composer Installation testen:

Danach erhaltet ihr folgende Ausgabe:

Nun könnt ihr Composer auf eurem System einsetzen.

Pages: 1 2

Pimcore Tutorial Teil 1a: Installation

Posted on by Schubie

Ich überlege schon seit längerem, ein mehrteiliges Pimcore Tutorial zu schreiben. Und jetzt ergibt sich vielleicht der passende Zeitrahmen.

Pimcore ist ein CMS, Rapid Development Tool, Asset Management, PIM und noch einiges mehr, basierend auf PHP. In älteren Versionen (bis Pimcore 4) basierte es noch auf dem Zend Framework (ZF Version 1.x). Seit Pimcore 5 bildet Symfony 2 die Basis, wobei es einen Backport für alte ZF basierte Module bietet. Pimcore wurde ursprünglich von der österreichischen Agentur Elements.at entwickelt. Für die weitere Entwicklung wurde das aber in ein eigenes Unternehmen ausgelagert, die Pimcore GmbH, welche ebenfalls in Salzburg, Österreich ansäßig ist.

Nun aber zum eigentlichen Thema, der Erstellung eines Projekts mit Pimcore (Version 5).

Wie bei jedem neuen Projekt steht zuerst die Installation, und darum soll es heute gehen.

Pimcore benötigt neben einem PHP-fähigen Webspace noch eine MySQL Datenbank (oder MariaDB). Die Datenbank muss das Charset utf8mb4 haben.

Pimcore bietet mehrere Möglichkeiten zur Installation. Zum einen kann man es über die Kommandozeile installieren, sofern man über einen SSH-Zugang verfügt. Dann kann man im entsprechenden Ordner, z. B. /var/www/projekt/web, das Paket herunterladen und entpacken.

Falls man als root angemeldet ist, sollte man, bevor man irgendetwas installiert, zum User mit entsprechenden Zugriffsrechten für das Webverzeichnis wechseln, z. B. www-data.

Wechsel ins Installationsverzeichnis:

Anschließend wird Pimcore herunter geladen und im Verzeichnis entpackt:

Das Pimcore-Archiv kann nun wieder entfernt werden. Es wird nicht länger benötigt.

Falls der Shell-Zugriff nicht ohne weiteres möglich ist, ist es alternativ natürlich auch möglich, sich das Pimcore-Paket unter https://pimcore.com/en/download herunterzuladen, lokal zu entpacken und via FTP auf den Server zu kopieren (beim lokalen Arbeiten natürlich in das Verzeichnis des Webservers). Hierbei ist lediglich zu achten, dass Pimcore außerhalb des Webroot installiert werden darf, da der web Ordner im Pimcore-Paket das eigentliche Webroot-Verzeichnis wird.

Jetzt hat man einige neue Ordner und Dateien in seinem Installationsverzeichnis. Der document root des vhost sollte auf den neu erstellten Ordner web im Installationsverzeichnis zeigen.

Pimcore InstallationsformularJetzt könnt ihr die Seite unter der konfigurieren URL aufrufen, z. B. localhost. Abschließend müsst ihr die Angaben zur Datenbank machen und der Pimcore Installer erledigt den Rest. Ihr könnt bei der Installation noch zwischen verschiedenen Profilen wählen, einem fertigen System mit Beispiel-Daten zu Objekten und Templates (mit oder ohne Twig) oder einem komplett leeren Pimcore-Projekt.

Danach könnt ihr euch unter der URL http://localhost/admin/login mit eurem gewählten Passwort in das Backend einloggen und euch mit den verschiedenen Optionen vertraut machen.

Im nächsten Beitrag beschreibe ich eine alternative Installations-Methode über Composer, da das mittlerweile bei größeren Projekten zum Standard geworden ist.

 

Anzeigen von verwandten Taxonomy-Begriffen des angezeigten Nodes in View Filter

Posted on by Schubie

Letztens musste ich für eine Produkt-Detailseite alle verwandten Produkte in einer Blockview anhand bestimmter Taxonomien anzeigen. Nun kann man sich bei Drupal schnell in eine Sackgassen konfigurieren und man möchte frustriert aufgeben, oder den Umweg über eine programmatische Lösung gehen, denn zu zahlreich sind die Einstellungsmöglichkeiten, gerade im Views-Modul.

Es gibt hierfür eine Lösung, sich entsprechendes Verhalten im Backend zusammen zu klicken, wenn man sich durch das Wording in Drupal nicht verwirren läßt.

Und so geht´s:

1. Fügt eine Relationship zu eurer View hinzu: „Content. Taxonomy terms on node“
2. Fügt einen Context-Filter hinzu: „Taxonomy Term: Term ID“

Die Einstellungen für die Relationship sind noch eindeutig. Hier wählt man die Taxonomie aus, welche die entsprechende Relation hat, z. B. „Main Category“.

Jetzt kommt der vielleicht verwirrende Part, da Drupal im Wording beim Context-Filter von einem URL-Parameter ausgeht, wir den Parameter aber gar nicht über die URL mitgeben, sondern ihn über die entsprechende Relation bereitstellen.

Man nimmt folgende Einstellungen im Context-Filter vor:

  1. Auswählen des „Provide default value“ Radio-Buttons.
  2. Beim Drop-Down-Feld „Type“ wählt ihr „Taxonomy term ID from URL“ aus (obwohl wir gar nichts über die URL übertragen und das kann durchaus für Verwirrung sorgen, wenn man sich durch die Einstellungen klickt).
  3. Auswählen von „Load default filter from node page„.
  4. Auswählen von „Limit terms by vocabulary„.
  5. Auswahl der Taxonomy Vokabeln, die ihr zur Filterung benötigt.

Das war´s, jetzt solltet ihr in der View, z. B. einen Block, alle Produkte sehen, die mit der aktuellen Seite in Relation stehen.

Nachträglich hinzugefügtes Element im DOM ansprechen

Posted on by Schubie

Ich muss zugeben, ich hatte öfter das Problem, Elemente auf einer Webseite mit jQuery anzusprechen, die nachträglich via Ajax oder .append() dem DOM hinzugefügt wurden. Höchstwahrscheinlich bin ich auch der Letzte, der die ideale Lösung wohl nicht kannte, obwohl es bereits seit 2011 möglich und bekannt ist.

Normale DOM Elemente mit Click-Handler behandeln:

Das geht solange gut, wie alle Elemente schon im DOM vorhanden sind, kommt aber etwas nachträglich hinzu, zum Beispiel nachgeladen durch Ajax, dann kennt der Click-Handler den Selektor noch nicht und dann kann man auf das Element klicken wie man möchte, es wird nichts passieren. Es wird nicht mal eine Fehlermeldung ausgegeben, weil es keinen Fehler gibt.

Jetzt endlich, bin ich über eine gute Lösung für das Problem gestolpert.

Nachträgliche, dem DOM hinzugefügte Elemente, mit Click-Handler behandeln:

In diesem Fall wird das neue Element in jedem Fall gefunden. Das ganze bedeutet natürlich auch, dass in diesem Beispiel der gesamte DOM einer Seite durchlaufen wird, bis der gewünschte Selektor gefunden wird, wegen $(document).on().

Aus Performancegründen wäre vielleicht die Wahl eines vorhanden, näher an dem neuen Element liegender Container, die bessere Wahl, solange dieser bereits vorhanden ist. Das sollte aber nicht wirklich ein Problem sein 😉

Boilerplate und Google Maps

Posted on by Schubie

Wenn man Google Maps in einem eigenen Projekt einbinden möchte und das HTML5 Grundgerüst auf Boilerplate basiert, oder einem anderem HTML Framework, welches die CSS Styles resettet (reset.css), kann es zu ungewollten Nebeneffekten bei der Kartendarstellung, insbesondere bei den Bedien-Elementen kommen.

Hier reicht es, wenn man nach dem einbinden der reset.css oder bei Boilerplate hinter dem generierten Code für den Google Maps Platzhalter folgendes CSS definiert:

Pimcore Objekt Ordner Erstellung

Posted on by Schubie

Falls man mal ein Pimcore-Plugin schreiben sollte und man auf die Vorteile von den in Pimcore erstellten Objekten nicht verzichten möchte, kommt man manchmal auch nicht umhin Ordner in der Objekt Struktur automatisch anzulegen, sobald man das Plugin installiert, und natürlich sollte das ganze auch wieder entfernt werden, sobald man das Plugin wieder entfernt.

Das Erstellen eines Ordners im Objekt-Baum geht mittlerweile ziemlich einfach. Hierzu benötigt man lediglich einen Aufruf des Object_Services:

Um das ganze wieder zu entfernen, ist folgender Code nötig:

Sencha Doku-Wüste

Posted on by Schubie

Immer wieder, wenn ich mich mit Produkten von Sencha (http://www.sencha.com/) beschäftige, frage ich mich: Wieso gibt es keine wirklich gute Dokumentation? Schließlich kostet der ganze Mist einen Haufen Geld. Dabei spielt es keine Rolle, ob man sich mit Sencha Ext.js beschäftigt, oder, wie jetzt, mit Sencha Touch. Entweder sind die Abschnitte veraltet oder aber die verschiedenen Beispiele und Beschreibungen passen nicht zueinander. Der Neu-Einstieg für Entwickler in die Materie führt da nur zu Frust. Wenn man nicht möchte, dass man mit Ihren Produkten arbeitet, muss man Sie doch einfach nicht anbieten.

jQuery und PHP auf der kostenfreien Seite machen es besser und Microsoft mit dem MSDN auf der Kostenpflichtigen auch.

Sorry, musste mal gesagt werden…

Divx, jQuery und der IE9

Posted on by Schubie

Da muss man auch erstmal drauf kommen. Beim Testen von Änderungen eines Kundenauftritts funktionierten plötzlich die Ajax Requests für ein paar, via jQuery eingebundenen Skripte nicht mehr, natürlich nur im Internet Explorer 9. Zuerst dachte ich, ok, wird wohl irgendwo ein Scriptfehler im jQuery Code sein, ich habe dort aber keinen gefunden, nur eine lustige Fehlermeldung:

Beim googeln stieß ich dann auf den Hinweis, dass DivX Plugins für den IE9 hier zu Fehlern führen. Sobald man diese deaktiviert und dann den Internet Explorer neu startet, läuft auch alles wieder wie erwartet. Da könnte man Stunden beim debuggen verlieren.

IE8, HTML5 und Fancybox

Posted on by Schubie

Tja, der liebe IE8 kann halt auch nicht mit HTML5, wenn man Fancybox verwenden möchte. Das kann jetzt natürlich auch am modernizr liegen, dass eben Inhalte, die per Ajax nachgeladen werden, nicht mehr für die alten IE Versionen modifiziert werden.

Ich werde wohl mal mit innerShiv beschäftigen, vielleicht läuft es dann ja wie gewünscht. So lange aber werde ich nachladbare Inhalte lieber noch ohne HTML5 Elemente erstellen.

Wenn ich dann noch einen Wunsch frei hätte, würde ich mir wünschen, dass Microsoft dem Internet Explorer die gleiche Silent Update Routine Ihrem Produkt hinzufügt, wie Sie Google schon seit langem für Chrome verwendet. Bedenken ob des Zugriffs auf den Anwenderrechner hin oder her, aber so könnte man gewährleisten, dass alte IE Versionen endlich mal nahezu aussterben würden.

*Update*
innerShiv funktioniert auch mit via Fancybox und Ajax nachgeladenen Inhalten scheinbar einwandfrei. Das hat mir jetzt eine menge Arbeit beim umschreiben von HTML5 zurück zu HTML4.01 oder XHTML1.0 erspart.