OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Umbraco CMS - Installationsanleitung

Umbraco das Framework CMS

Im Gegensatz zu vielen anderen CMS ist das Open Source CMS Umbraco nicht nur ein Baukasten-System, sondern viel mehr ein stabiles Framework. Dadurch bietet es die Möglichkeit, beliebige Webseitstrukturen auf unterschiedlichste Art und Weisen flexibel und individuell aufzubauen.

Selbstverständlich gibt es auch im Umbraco-Umfeld viele Addons und Extensions (Umbraco-Syntax: Packages) die uns Entwicklern bei der täglichen Arbeit unterstützen. Die primäre Anlaufstelle ist hier http://our.umbraco.org/projects.

Grenzenlose Flexibilität

Die grosse Stärke von Umbraco ist es, dass das System keinen eigenen Code (HTML, CSS, JavaScript) generiert. Somit ist der Entwickler in der Lage Webseiten zu entwickeln, die exakt seinen Vorstellungen entsprechen. Nicht das System sondern der Entwickler definiert wie der Code aufgebaut werden soll. Diese Stärke in Bezug auf die Flexibilität hat den Nachteil, dass der Einstieg in die Entwicklung mit Umbraco etwas mühsamer ist als mit anderen CMS-Systemen. Ist diese Hürde jedoch erst einmal genommen, stehen dem Entwickler alle Möglichkeiten offen und es gibt keinerlei Einschränkungen, weder in Bezug auf den Code noch auf das Design der Webseite. Die einzigen Grenzen sind die technischen Limitationen von HTML, CSS oder JavaScript.

Umbraco-Starterkits

Die Flexibilität von Umbraco führt dazu, dass es viele unterschiedliche Ansätze gibt, Umbraco aufzubauen. Wie andere CMS bietet auch die Umbraco-Community einige Starterkits (http://our.umbraco.org/projects/starter-kits) an, die einen Schnelleinstieg in Umbraco erlauben. Meiner Meinung nach ist die Qualität jedoch nicht überzeugend (davon ausgenommen sind die neuen Starterkits Umbraco 7 – diese habe ich noch nicht getestet).

Umbraco Installation
Step-by-Step

In diesem Blog erkläre ich Ihnen, wie Sie Step-by-Step Umbraco selber aufsetzen können, um rasch erste Erfolge zu erzielen. Dabei wird auf ein Starterkit verzichtet, um ein Verständnis für den Aufbau von Umbraco zu schaffen. Somit werden Ihnen Gedankengänge aufgezeigt, die für die Weiterentwicklung von Umbraco-basierenden Webseiten von elementarer Bedeutung sind. Das im Weiteren beschriebene Vorgehen entspricht im Wesentlichen den allgemein akzeptierten Best Practices der Umbraco Community.

Voraussetzungen

Grundsätzlich ist es so, dass Sie eine Microsoft-Umgebung benötigen. Sie können Umbraco mit WebMatrix (http://www.microsoft.com/web/webmatrix/), VisualStudio oder auf einem IIS installieren. Wir entwickeln einfachere Webseiten mit WebMatrix, komplexere mit VisualStudio und hosten unsere Lösungen in den meisten Fällen bei www.simplehosting.ch.
Ich zeige Ihnen nun den einfachsten Weg um Umbraco mit WebMatrix zum Fliegen zu bringen.

 

Los geht’s!

 

Download

Laden Sie die aktuelle Umbraco-Version von http://our.umbraco.org/download herunter und entpacken Sie das ZIP-File in einem für Sie passenden Ordner.

Umbraco Download 

Umbraco Download 2 

Anschliessend können Sie WebMatrix starten (falls noch nicht installiert, können Sie WebMatrix gratis von http://www.microsoft.com/web/webmatrix/ herunterladen) und das Verzeichnis wählen in dem die entzippten Umbraco-Files liegen.

Webmatrix

Wählen Sie den Ordner mit dem entpackten ZIP und klicken Sie auf „Ordner auswählen“. Danach klicken Sie in WebMatrix auf den Button „Ausführen“ um mit der Installation zu beginnen.

Installation

Nachdem Sie den Startscreen übersprungen und die Lizenzbedingungen akzeptierten, gelangen Sie zur Eingabemaske für die Datenbank-Konfiguration.

Umbraco Database Configuration

Falls Sie keinen eigenen SQL-Server besitzen können Sie Umbraco problemlos mit SQL CE 4 installieren. Für produktive Seiten empfiehlt es sich allerdings einen SQL Server einzusetzen (der gratis SQL Server Express genügt dabei in den allermeisten Fällen).

Bei einer erfolgreichen Installation sehen Sie folgenden Screen.

Umbraco Database Installed

 

Nachdem Sie sich einen User anlegten besteht nun die Möglichkeit einen Starterkit auszuwählen. Wie eingangs erwähnt, verzichten wir jedoch darauf.

Umbraco Starterkits 

Durch klicken auf „Set up your new website“ gelangen Sie nun in das Umbraco Backend und können mit dem Aufbau der Seite starten.

Aufbau

Im Wesentlichen besteht Umbraco aus Dokument-Typen, Templates und Logik-Elementen. Ich zeige Ihnen nun einen ganz einfachen Aufbau mit zwei Dokument-Typen und zwei Templates.

Dokumenttypen

Zuerst wechseln Sie in das Menu „Settings“ und klicken dort bei den „Document Types“ auf „Create“.

Umbraco Document Types

 

Diesen neuen Document Type nennen Sie „Main“ und entfernen das Häckchen „Create matching template“.

Umbraco Document Types 2

 

Dieser Typ ist ein Meta-Typ der nicht direkt mit einem Template in Verbindung steht. Von diesem Typ können die weiteren Typen erben. Somit entsteht die Möglichkeit an einer zentralen Stelle die auf allen Seiten verwendeten Elemente zu platzieren (typischerweise Meta- oder Title-Tags).

Die Dokumenttypen bestehen aus sogenannten Generic Properties (oben als Elemente bezeichnet). Properties sind Eingabefelder, um später die Website mit Inhalten füllen zu können. Diese können für eine bessere Übersicht in Tabs angeordnet werden.

Erstellen Sie mit „New tab“ einen neuen Tab mit der Bezeichnung „Meta-Tags“. Wir platzieren die allgemein und auf allen Seiten sichtbaren Elementen in Tabs die mit 100 und aufsteigend beginnen (Feld „100“).

Nach dieser Aktion sieht der Screen wie folgt aus:

Umbraco Document Types 3

Nachdem Sie die Tabs anlegt haben, können Sie die Properties erzeugen.

Der unten gezeigte Printscreen stellt die Eingabemaske eines Properties dar. Die meisten Felder sind selbsterklärend. Wie Sie sehen, können Sie einen Beschreibungstext eingeben. Dieser wird anschliessend dem Webseite-Editor angezeigt und kann eine grosse Unterstützung bei der Verwaltung der Webseite darstellen.

Umbraco Document Types 4

Nun legen wir einen weiteren Dokumenttyp an, der von „Main“ erbt.

Dazu klicken beim Dokument-Typ „Main“ auf „Create“. Dieses Mal erstellen Sie zudem ein Template.

Umbraco Document Types 5

Sie sehen nun, dass „Frontseite“ ein Unterelement von „Main“ ist.

Umbraco Document Types 6

Das bedeutet, dass wenn nun eine Seite vom Typ „Frontseite“ angelegt wird, alle Generic Properties von „Frontseite“ UND „Main“ angezeigt werden.

In diesem Dokumenttypen definieren wir nun als Eingabefelder ein Titel- und ein Inhaltselement.

Dazu kreieren wir zuerst ein Tab „Inhalt“. Anschliessend fügen wir zwei Generic Properties diesem Tab hinzu. Zum Schluss sollte Ihr Document Type so aussehen:

Umbraco Document Types 7
 
Im Tab „Structure“ lässt sich zudem definieren, dass dieser Typ als Root-Element einer Seite verwendet werden kann.

Umbraco Document Types 8

Im Tab „Info“ können Sie zudem ein Icon definieren, welches anschliessend im Inhaltsbaum angezeigt wird. Das hilft dem Editor während der Bearbeitung der Seite sich im System zurechtzufinden.

Umbraco Document Types 9

Nun können Sie beliebige weitere Dokumenttypen definieren (z.B. Inhaltsseite, Galerie, News, usw.). Anschliessend können Sie jeweils im Tab „Structure“ definieren welche Elemente wo angelegt werden können. Somit sind Sie in der Lage eine Struktur zu schaffen die langlebig und einheitlich ist.

Templates

Das während dem Anlegen des Dokument-Typen „Frontseite“ generierte Template beinhaltet nun den „Frontseite“ – spezifischen Code. Im Normalfall heisst das Template gleich wie der Document Type. Hier sind Sie als Entwickler jedoch völlig frei.

Wir erstellen normalerweise noch ein Main-Template mit dem Namen „Layout“. Dieses erstellen Sie unter Settings/Templates. Hier nehmen wir bewusst eine andere Bezeichnung als „Main“. Denn das „Haupt-“ Layout hat grundsätzlich nichts mit dem „Haupt-“ Document Type zu tun. So können Missverständnisse vermieden werden.

Um festzulegen, dass das Template „Frontseite“ innerhalb des Templates „Layout“ dargestellt werden soll, muss nun im Template „Frontseite“ in das Tab „Properties“ gewechselt werden und als Mastertemplate „Layout“ ausgewählt werden.

Umbraco Template

Im Normalfall bezeichnen wir alle Aliase mit englischen Namen.

 

Wie bei den Dokument-Typen wird auch nun in den Templates die hierarchische Beziehung in Form einer Baumstruktur gezeigt:

Umbraco Template 2

Im Template „Layout“ werden nun alle HTML-Elemente untergebracht die auf jeder Seite dieselben sind. Im einfachsten Fall ist das ein Standard-HTML-Konstrukt wie zum Beispiel das folgende:

Umbraco Template 3

Beispiel HTML:

<!doctype html>
<html lang=“de“>
<head>
<title>Umbraco Testseite</title>
<meta charset="utf-8">
</head>
<body>
@RenderBody()
</body>
</html>

Mit der Anweisung @RenderBody() wird angezeigt an welcher Stelle die Inhalte der untergeordneten Templates dargestellt werden soll.

Im Template „Frontseite“ wird nun nur noch derjenige HTML-Code ausgegeben der dieser speziellen Seite entspricht. Wir können zum Beispiel nun den Inhalt unseres zuvor eingerichteten RichTextEditors ausgeben. Dazu klicken Sie oben auf das Icon   „Insert umbraco page field“ und wählen den Alias des Generic Properties aus. In unserem Fall ist das „title“ und „content“.

Das Resultat könnte wie folgt aussehen:

Umbraco Template 4

Nun können Sie Ihre erste Seite anlegen. Dazu klicken Sie in der Section „Content“ auf die drei Punkte (Alternative: Rechtsklick auf „Content“)  und wählen „Frontseite“ aus.

Umbraco Content

Die angelegte Seite könnte nun zum Beispiel folgendermassen aussehen:

Umbraco Content 2

Sie sehen die Eingabefelder der Elemente des Dokumenttyps „Frontseite“ und im Tab „Meta-Tags“ werden die Elemente des Types „Main“ dargestellt.

Der Titel „Name der Node“ entspricht dem URL dieser Seite.

Fertig!

Resultat

Nun haben Sie Ihre erste auf Umbraco basierende Seite erstellt. Gratuliere!

Selbstverständlich gibt es noch vieles mehr kennenzulernen. Dazu gehört unter anderem das Hinzufügen von CSS- und Script-Dateien. Zum Thema Umbraco werden an dieser Stelle auch noch weitere Blog-Beiträge hinzukommen.

Um die Sicherheit zu erhöhen empfiehlt es sich zum Schluss den Ordner „Install“ im Root-Verzeichnis zu löschen.

Nun wünsche ich Ihnen viel Vergnügen und einen reibungslosen Start mit einem absolut bemerkenswerten CMS-System! Wenn Sie Fragen haben, können Sie uns diese gerne im Kommentar-Feld stellen. Ansonsten besuchen Sie einfach http://our.umbraco.org oder http://umbraco.tv um weitere Informationen zu erhalten.

Hier noch ein Verweis auf weitere Best Practices von Umbraco: http://our.umbraco.org/wiki/reference/umbraco-best-practices


kommentieren


0 Kommentar(e):