Kategorien
Webentwicklung Werkzeuge

Websites bauen mit pimcore

phpstorm

Ich bin ja als PHP-Entwickler nicht gerade erfahren, ich mach dann eher das mit dem Frontend. Neuerdings beschlich mich allerdings der dringende Wunsch, mal ein bisschen Abwechslung zu haben und ich habe mich auch mal auf der Entwicklungsseite mal ein bisschen mit pimcore auseinandergesetzt.

Dazu habe ich eine kleine Website gebaut, die über Energydrinks informieren kann. Die Website ist direkt zweisprachig und von Objekten getrieben. Ich will nur mal einen kleinen Einblick geben, wie das ganze anhand der Drink-Darstellung aussieht.

Der Drinks-Controller

<?php

use Website\Controller\Action;
use Pimcore\Model\Object;


class DrinksController extends Action
{

    public function defaultAction()
    {
        $this->enableLayout();

    }

    public function listDrinksByCaffeineAction()
    {
        $this->enableLayout();

        $drinkList = new Object\Drink\Listing();
        $drinkList->setOrderKey("Koffeingehalt");
        $drinkList->setOrder("DESC");

        $this->view->drinks = $drinkList;


    }

    public function drinkDetailAction(){
        $this->enableLayout();

        $drink = Object\Drink::getById($this->getParam('id'));

        $this->view->drink = $drink;

    }

    public function indexAction()
    {
        $this->enableLayout();
    }
}

Hier werden eigentlich nur zwei Views mit passenden Daten gefüllt, die dann z.B. in list-drinks-by-caffeine.php (man beachte die Benamung der Datei im Vergleich mit der Action) angezeigt werden:

<?php
$this->layout()->setLayout('standard');
$lang_prefix = $this->document->getProperty('mainNavStartNode')->getFullPath();
?>


<?php while ($this->block("contentblock")->loop()) { ?>
    <?= $this->wysiwyg("content"); ?>
<?php } ?>


<table class="table">
    <tr>
        <th><?= $this->translate("Bild"); ?></th>
        <th><?= $this->translate("Koffeingehalt"); ?> / 100ml</th>
        <th><?= $this->translate("Name"); ?></th>
        <th><?= $this->translate("Hersteller"); ?></th>
    </tr>



    <?php
    /** @var  \Pimcore\Model\Object\Drink $drink */
    foreach ($this->drinks as $drink) { ?>

        <tr>
            <td>
                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getId()
                ), "drink") ?>">
                    <?php if ($drink->getBild()) { ?>
                        <?= $drink->getBild()->getThumbnail('list')->getHTML() ?>
                    <?php } ?>
                </a>

            </td>

            <td class="col-sm-4">
                <?= $drink->getKoffeingehalt(); ?>

            </td>
            <td class="col-sm-4">


                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getId()
                ), "drink") ?>">
                    <?= $drink->getName(); ?>
                </a>
            </td>
            <td class="col-sm-4">

                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getHersteller()->getId()
                ), "hersteller") ?>">
                    <?= $drink->getHersteller()->getName(); ?>

                </a>

            </td>
        </tr>

    <?php }; ?>

</table>

Das sieht dann so aus:

Drinks Übersicht
Drinks Übersicht

Für die Abbildung der Detail-Ansicht muss man sich dann ein bisschen mit statischen Routen befassen, die man in pimcore pflegen kann, die sieht dann so aus:

static_routes

Drinks Detail
Drinks Detail

Zusammenfassend kann ich sagen:

Mit dem CMS/PIM-System pimcore und dem Hilfsmittel PHPStorm bekomme ich (PHP nicht so erfahren) recht schnell brauchbare Ergebnisse und kann Seiten, die viele strukturierte Daten darstellen sollen, die untereinander verknüpft sind, schnell und einfach umsetzen.

Das ersetzt sicher keinen PHP-Profi, der 10 Jahre Zend-Erfahrung hat, kann aber ein guter erster Schritt sein, solche Modelle mal anzudenken. Wen das ganze interessiert, kann sich bei pimcore.org weitere Informationen holen, oder mich fragen.

Kategorien
Linklove Wochenbericht

Wochenbericht 2015.08

Entwicklung

Netzpolitsches

Kategorien
Linklove Wochenbericht

Wochenbericht 2015.07

Entwicklung

  1. Client-side MVC’s Major Bug
  2. Web applications don’t follow new rules
  3. Jahresbericht 2014 der jQuery Foundation
  4. Firefox führt Add-On-Signierung ein

Netzpolitik

Kategorien
Webentwicklung Werkzeuge

Was sich mit HTTP/2 ändern wird

Tools

Gerrit van Aaken beschrieb neulich den Toolchain-Wahn, der die Aufrüstung im Frontend-Development befallen hat. Einige dieser Toolchains nutze ich auch, zum Beispiel das Precompiling von Frontend-Templates in eine Datei, das kompilieren von mehreren LESS- und CSS-Files in eine einzige Datei. Alles, weil HTTP/1.1 teilweise nur einen Request parallalel verarbeitet. Aktuell ist das sinnvoll und notwendig, um überflüssige Header (Overhead) zu verringern und den Übertragungs-Payload möglich hoch zu halten.

Nachdem die Seitenperfomance immer größeren Stellenwert bei Google Rankings bekommt und Amazon mal durchgerechnet hat, wie dramatisch 100 Millisekunden zwischen Bounce und Conversion unterscheiden können, gehört es nicht nur zum guten Ton, sondern zur Pflicht, solche Dinge in seinen Workflow zu integrieren, wenn eine Internetseite für den Unternehmenserfolg ausschlaggeben sein sollte.

Aber was würde Sich ändern wenn unter anderem:

  1. Header komprimiert würden?
  2. Mehrere Requests parallel laufen könnten?
  3. Was, wenn die Site dem Browser Daten ungefragt rüberschiebt?

Dann wäre vieles (nicht alles) dieser Dinge überflüssig. Am Ende muss man die Rechnung Header vs. Payload neu auslegen, wenn Header komprimiert sind und die Dateien parallel geladen werden können. Zusammenfügen der Stylesheets und Javascript-Dateien wäre weniger wichtig als heute. Teilweise könnte das sogar kontraproduktiv sein.

Damit wird die Übergangszeit von HTTP/1.1 auf HTTP/2 für die Frontend-Developer noch eine sehr spannende Zeit werden. (Wer sich den englischen Wikipedia-Artikel über HTTP/2 durchliest, der wird deutlich besser informiert, wo HTTP/2 herkommt (SPDY von Google) und was es so im einzelnen für Änderungen gibt. Der deutsche Artikel ist da eher kurz angebunden.

Wer heute schon testen will, wie sich HTTP/2 in etwa auswirken könnte, der kann sich mal auf einem Apachen mod_spdy installieren und eine Perfomance-Messung vorher-nachher machen. Firefox und Chrome können in den aktuellen Stable-Versionen SPDY von Hause aus, Opera vermutlich auch und der IE wird mit Version 11 nachziehen.

Seid ihr auf die Zukunft vorbereitet? Habt ihr eure Grunt- / Gulp- / $BUILDTOOL-Chains schon vorbereitet? Macht ihr euch noch Gedanken um die aktuelle Optimierungs-Praktik oder lebt ihr schon mit vielen kleinen Dateien in der Zukunft der Webentwicklung? Werdet ihr verschiedene Versionen für HTTP/1.1 und HTTP/2 erstellen müssen?

Kategorien
Linklove Wochenbericht

Wochenbericht 2015.06

Entwicklung

  1. Raspberry Pi 2 on sale now at $35
  2. App-Entwicklung leicht gemacht: Mit Ionic, AngularJS und ngCordova zur mobilen Applikation
  3. Top 8 Best Bootstrap Alternative for Web Developers
  4. How to stop referrer spam
  5. Eight Reasons for Using AngularJS in a Web App
  6. Workingdraft Revision 206: ES6 Template Strings, Jobwechsel, Spartan
  7. Aufrüsten gegen den Minderwertigkeitskomplex

Netzpolitisches

  1. SpiderOak, Tor und Co. – 5 Tipps und Tools von Edward Snowden für mehr Privatsphäre im Netz
  2. Microsoft, Google und Amazon zahlen, um Werbeblocker AdBlock Plus zu umgehen
  3. 15 Jahre Payback – Kommentar über das Datensammelunternehmen