Contao Erweiterung mit Composer-Unterstützung entwickeln - Teil 3

In den Teilen eins und zwei ging es um das Einrichten eines Contao-Projektes mit Git-Anbindung und das Veröffentlichen auf einer Subdomain. Der dritte und letzte Teil soll dazu dienen, den Kreis zu schließen und eine Contao-Erweiterungen in das vorhandene Projekt zu integrieren. Dabei soll diese Extension komplett per Composer updatebar sein.

Contao Extension erstellen

Wir lassen uns im ersten Schritt mittels Extension-Creater eine leere Contao-Extension erstellen.

contao_extension_1

Im Anschluss lassen wir uns für das Gerüst die Dateien erstellen lassen.

contao_extension_2

Es sollte jetzt folgende Ordner unter awesome_extension erstellt wurden sein:

contao_extension_3

Remote Repository erstellen

Für die Versionsverwaltung setzen wir wieder auf Git und erstellen auf dem Server ein neues Bare-Repository.

mkdir contao-awesome-extension.git
cd contao-awesome-extension.git
git --bare init

Auf dem heimischen Etnwicklungsrechner erstellen wir ein neues leeres Git-Repository, welches wir im Anschluss mit dem Remote-Repository verbinden.

cd c:\Projekte\contao-awesome-extension
git init

In diesem Verzeichnis legen wir folgende Ordnerstruktur an:

c:\Projekte\contao-awesome-extension\module
c:\Projekte\contao-awesome-extension\src\xuad\Module

Danach kopieren wir die vom Contao-Extension-Creator erstellten Ordner und Dateien:

c:\Projekte\neues-contao-projekt\system\modules\awesome_extension\config 
c:\Projekte\neues-contao-projekt\system\modules\awesome_extension\assets 
c:\Projekte\neues-contao-projekt\system\modules\awesome_extension\templates 

in das module-Verzeichnis:

c:\Projekte\contao-awesome-extension\module

Die im Ornder class enthaltene RandomOutputModule.php kopieren wir in den Source-Pfad:

c:\Projekte\neues-contao-projekt\system\modules\awesome_extension\classes\RandomOutputModule.php

nach

c:\Projekte\contao-awesome-extension\src\xuad\Module\RandomOutputModule.php

Das Projekt sollte nun folgende Struktur besitzen:

contao_extension_file_structure

Anschließend passen wir, in der Datei RandomOutputModul.php den Namespace an. Dieser entspricht unserer Ordnerstruktur:

namespace xuad\AwesomeExtension\Module;

Zu guter Letzt erstellen wir eine composer.json, in unserem Extension-Ordner (c:\Projekte\contao-awesome-extension) mit folgenden Inhalt:

{
    "name": "xuad/contao-awesome-extension",
    "description": "Awesome contao extension",
    "keywords": ["contao", "extension", "awesome"],
    "type": "contao-module",
    "homepage": "http://xuad.net",
    "license": "proprietary",
	"authors":[
		{
		"name":" Max Mustermann",
		"email": "mail@neues-contao-projekt.de",
		"homepage": "http://neues-contao-projekt.domain.de",
		"role": "Project leader"
		}
	],
    "require": {
		"php":">=5.3",
		"contao/core":">=2.11,<3.5",
		"contao-community-alliance/composer-plugin": "~2.0"
	},
	"autoload": {
		"psr-0": {
			"classmap":["src/"],
			"xuad\\AwesomeExtension\\": "src/" 
		}
	},
	"extra":{
		"contao": {
			"sources":{
				"module": "system/modules/awesome_extension"
			}
		},
		"branch-alias": {
			"dev-master": "0.1.x-dev"
		}
	}
}

Über die Konsole verbinden wir unser lokales Repo mit dem Remote-Repo:

git add .
git commit -m "Initial commit"
git remote add origin [UBERSPACE_NAME]@[SERVER].uberspace.de:/home/[UBERSPACE_NAME]/contao-awesome-extension.git
git push origin master

Lokal binden wir unsere Extension, welche im Remote-Repositpory eingecheckt ist, in das lokale Contao-Projekt ein:

Dazu passen wir die composer.json im Contao-Projekt an (c:\Projekte\neues-contao-projekt\composer\composer.json). Dazu füren wir unsere Repository in den Block repositories ein:

"repositories": [
	...
	{
		"type": "vcs",
		"url": "[UBERSPACE_NAME]@[SERVER].uberspace.de:/home/[UBERSPACE_NAME]/contao-awesome-extension.git"
	}
],

```json

Und das zu ladende Paket in den **require** Block:

"require": {
	...
	"xuad/contao-awesome-extension": "0.1.*"
	},

In der composer.json sollte nun so aussehen:

{
    "name": "local/website",
    "description": "A local website project",
    "type": "project",
    "license": "proprietary",
    "require": {
        "contao-community-alliance/composer-client": "~0.12",
		"xuad/contao-awesome-extension": "0.1.*"
    },
    "prefer-stable": true,
    "minimum-stability": "dev",
    "config": {
        "preferred-install": "source",
        "cache-dir": "cache",
        "component-dir": "../assets/components"
    },
    "repositories": [
        {
            "type": "artifact",
            "url": "packages"
        },
        {
            "type": "composer",
            "url": "http://legacy-packages-via.contao-community-alliance.org/"
        },
		{
    		"type": "vcs",
    		"url": "[UBERSPACE_NAME]@[SERVER].uberspace.de:/home/[UBERSPACE_NAME]/contao-awesome-extension.git"
    	}
    ],
    "extra": {
        "contao": {
            "migrated": "done"
        }
    }
}

Anschließend im Extension-Creator die Erweiterung löschen und den Ordner awesome_extension unter c:\Projekte\neues-contao-projekt\system\modules löschen. Danach führen wir ein composer update in der Eingeaufforderungen im folgenden Ordner aus:

c:\Projekte\neues-contao-projekt\composer

Das Paket wird anschließend installiert und in Contao integriert. Damit man bequem weiter entwickeln kann ohnre sich eine composer update - Orgie, bei jeder Änderung an der Erweiterung zu ersparen, einfach den Ordner c:\Projekte\neues-contao-projekt\composer\vendor\xuad\contao-awesome-extension löschen und eine symbolische Verknüpfung erstellen. Dazu nach c:\Projekte\neues-contao-projekt\composer\vendor\xuad navigieren und per mklink einen Link zum Projekt erstellen

mklink /D contao-awesome-extension c:\Projekte\contao-awesome-extension

Erweiterung zum Leben erwecken

Jetzt kann man bequem die Extension unter PhpStorm lauffähig programmieren. Also erstellen wir eine composer/vendor/xuad/contao-awesome-extension/module/config/autoload.php mit dem Inhalt:

<?php

TemplateLoader::addFiles(array(
    'awesome_extension_random_template' => 'system/modules/awesome_extension/templates'
));

Danach registrieren wir das Modul in der composer/vendor/xuad/contao-awesome-extension/module/config/config.php mit folgendem Eintrag:

$GLOBALS['FE_MOD']['AwesomeExtension']['RandomOutput'] = 'xuad\\AwesomeExtension\\Module\\RandomOutputModule';

Danach passen wir die Member-Variable $strTemplate in der Datei composer/vendor/xuad/contao-awesome-extension/src/xuad/AwesomeExtension\Module\RandomOutputModule.php lass eine zufällige Zahl in der Methode compile() erzeugen:

<?php

/**
 * Contao Open Source CMS
 *
 * Copyright (c) 2005-2015 Leo Feyer
 *
 * @package   AwesomeExtension
 * @author    Max Mustermann
 * @license   proprietary
 * @copyright Max Mustermann 2015
 */


/**
 * Namespace
 */
namespace xuad\AwesomeExtension\Module;


/**
 * Class RandomOutputModule
 *
 * @copyright  Max Mustermann 2015
 * @author     Max Mustermann
 * @package    Devtools
 */
class RandomOutputModule extends \Module
{

	/**
	 * Template
	 * @var string
	 */
	protected $strTemplate = 'awesome_extension_random_template';


	/**
	 * Generate the module
	 */
	protected function compile()
	{
        	$this->Template->randomNumber = rand();
	}
}

Damit wir im Frontend die erzeugte Zahl sehen, passen wir das Template awesome_extension_random_template.html5 an:

<div class="<?= $this->class; ?> block"<?= $this->cssID; ?><?php if ($this->style): ?> style="<?= $this->style; ?>"<?php endif; ?>>

  <?php if ($this->headline): ?>
    <<?= $this->hl; ?>><?= $this->headline; ?></<?= $this->hl; ?>>
  <?php endif; ?>
  <p>Random number: <?= $this->randomNumber ?></p>
</div>

Jetzt sollte die Extension fertig programmiert sein und wir können diese in Contao integrieren. Dazu wird ein Frontend-Modul im Theme erstellt

contao_extension_4

...und in die Startseite integriert:

contao_extension_5

Das fertige Ergebnis sollte dann so aussehen:

contao_extension_6

Zum Schluss noch alle Änderungen in das Remote-Repo schreiben:

git add --all
git commit -m "it works now"
git push origin master

Da alles auf dem Entwicklungsrechner zu unserer Zufriedenheit läuft, können wir es anschließend auf dem Server testen. Dazu einfach die lokale composer/composer.json und die Datenbank mit dem auf dem Server syncronisieren. Anschließend auf dem Server im composer-Ordner (/var/www/virtual/[UBERSPACE_NAME]/neues-contao-projekt.xuad.net/composer/composer) ein composer update ausführen. Danach sollte die Ausgabe auf dem Server genau wie auf dem Entwicklungsrechner aussehen.

Public und private keys erzeugen - für lästige passwort eingabe

Damit man unter Windows und Linux nicht ständig, bei einem composer update, die Passwörter eingeben muss, kann man sich einen public und einen private Key erzeugen. Der public-Key wird auf dem Server hinterlegt um die Legimentierung seitens SSH zu automatisieren.

Windows

Unter Windows müssen wir für die Erzeugung der Schlüsselpaare noch die Umgebungsvariable HOME setzen. Dazu navigieren wir zu den Umgebungsvariablen von Windows (Systemsteuerung » Erweitere Systemeinstellungen » Umgebungsvariablen) und erstellen mit Neu.. eine neue Systemvariable:

Name der Variablen: HOME
Wert der Variablen: %USERPROFILE%
system_variable_home

Jetzt starten wir wieder einmal die Eingabeaufforderung von Windows mit Administratorenrechten und generieren ein Schlüsselpaar:

ssh-keygen -t rsa

Es kann alles mit Enter bestätigt werden, damit die Passwortabfragen verschwinden. Im Anschluss kopieren wir den Inhalt aus c:\Users[BENUTZER].ssh\id_rsa.pub kopieren und fügen diesen Inhalt auf dem Server in der ~/.ssh/authorized_keys am Ende ein.

Linux

Unter Linux können wir den Schritt mit der Systemvariablen überspringen. Wir generieren auf dem Server ein neues Schlüsselpaar:

ssh-keygen -t rsa

welches unter ~/.ssh abgelegt wird. Anschließend den Inhalt von id_rsa.pub am Ende der ~/.ssh/authorized_keys ablegen.

Danach wird bei einem Update der eigenen Erweiterung, per composer, nicht mehr nach dem Passwort gefragt.