Umbraco 7 Grundkurs

Content-Management-Systeme

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein Content-Management-System ermöglicht es, Daten und Texte, welche von Anwendern erstellt wurden, zu erfassen, und stellt diese durch die Verwendung von Templates in sinnvoller Form als HTML dar.

Transkript

Ich möchte einmal klären, was ich unter dem Begriff "Content-Management-System" verstehe. Ein Content-Management-System ist eine Webseite, die quasi janusköpfig ist. Das heißt, sie hat zwei Gesichter. Das eine Gesicht ist das, was die Anwender im Internet sehen, also was die Öffentlichkeit sieht. Ich habe jetzt hier eine von meinen Webseiten, also das, was die Öffentlichkeit von meiner Webseite sieht. Das zweite Gesicht der Webseite benötigen wir zum Verwalten. Hier geben wir die Dinge ein, die dann auf dieser anderen Ansicht erscheinen. Es hat sich begrifflich eingebürgert, dass das, was die Öffentlichkeit sieht, als "Frontend" bezeichnet, und das, wo wir unsere Dokumente eingeben, das "Backend". Es gibt einen Zusammenhang zwischen dem, was wir im Backend eingeben und dem, was man im Frontend sieht. Man sieht zum Beispiel diesen Text, "Komfortable Persistenz für .NET" und diesen Text kann ich hier editieren. Das, was ich editiere und dann veröffentliche, ist als Text hier im Frontend zu sehen. Aber es ist noch mehr. Sie sehen hier zum Beispiel dieses Menü. Das besteht aus "Home", "Download", "Wie funktioniert NDO?", "Service" und "Support". Wenn man wieder im Backend schaut, dann entspricht es genau diesen hier angegebenen Seiten. "Home", "Download, "Wie funktioniert NDO?", "Service" und "Support". Nebst diesen Seiten, die man öffentlich sieht, gibt es hier noch ein paar Elemente mehr. Hier hat es zum Beispiel noch einmal so eine Seite "Suche" und in dieser gibt es eine Seite "Suchresultate. Jetzt ist eben die Frage, warum diese Seite "Suche", obwohl sie doch auf der gleichen Ebene wie "Download", "Wie funktioniert NDO?" liegt, nicht im Menü erscheint. Das liegt an den Einstellungen, die wir hier im Backend vornehmen. Da habe ich so ein Häkchen, "Seite in der Navigation verbergen", was der Grund ist, warum diese Seite im Frontend nicht erscheint. Das heißt, hier geben wir gewisse Daten und Eigenschaften ein, die wiederum steuern, was im Frontend erscheinen soll. Das kann man auch schematisch zeigen: Wir haben das, was wir im Backend eingeben, das ist unser "Dokument", unsere Daten oder aus der Sicht des Konzepts, das "Model". Dann haben wir eine Verarbeitungsvorschrift, wie diese Daten in HTML umgesetzt werden sollen. In Umbraco nennt sich so etwas "Template" und in der darunter liegenden Technologieschicht, dem ASP.NET MVC, nennt sich so etwas "View". Das heißt, das Model wird über das View zu einem HTML-Code transformiert. In Umbraco gibt es hier bei den Einstellungen die Templates, und wenn ich mir so ein Template einmal anschaue, also zum Beispiel das für die Text page, dann sehen wir diese Verarbeitungsvorschrift. Diese Sprache, in der das hier formuliert ist, nennt sich Razor, was eine Mischung aus C# und HTML ist. Dabie sieht es so aus, dass überall, wo hier ein At-Zeichen steht, C#-Code beginnt, das heißt, das hier ist alles C#. Und dann können wir innerhalb von C# mit einer spitzen Klammer HTML-Text anfangen können. und zwar eigentlich an jeder Stelle. Damit sind wir in HTML. Nun ist es so, dass wir jederzeit zu C# zurückswitchen können, indem wir dieses At-Zeichen verwenden. Das heißt, hier ab dem "@" beginnt dieser C#-Code, das ist eine ganz normale "foreach"-Schleife, die hier ein paar Dinge berechnet, um dann innerhalb der "foreach"-Schleife wiederholt so ein "DIV"-Element auszugeben. Das ist also unser View, unsere Verarbeitungsvorschrift, und die sorgt dafür, dass das, was wir hier in dem Dokument erfassen, in HTML umgesetzt wird. Wir sehen in diesem konkreten Backend einen Ordner "Metaseiten". Wir sehen, da sind zwei Dinge darin, "Kontakt" und "Impressum" Wenn wir jetzt auf unsere Seite gehen, wir gehen einmal ganz nach unten, dann sehen wir, dass hier eine Metanavigation erscheint mit dem "Kontakt" und "Impressum" erscheint. Wenn ich jetzt einmal auf eine andere Seite hinübergehe, dann erscheint es wieder an der selben Stelle. Das heißt, es sind seitenunabhängige Elemente. Das haben wir hier fein säuberlich in einem Ordner versteckt. Da haben wir Elemente, auf die dann diese Seiten jeweils wieder zugreifen können. Hier sieht man zum Beispiel den Header, in dem wir ein "Logo" und eine "Navigation" haben. Hier sehen wir den Footer, der hier diese Metanavigation hat. Die Metanavigation zieht sich dann ihrerseits aus diesem Ordner alles, was darin liegt. Wenn ich jetzt hier eine weitere Seite anlegen würde, wie zum Beispiel "Anfahrt", ich speichere das einmal, wenn ich jetzt hier auf die Seite gehe und "F5" drücke, dann haben wir direkt hier die Seite "Anfahrt". Okay, insofern haben wir also einen ganz engen Zusammenhang zwischen dem, was hier im Backend eingegeben wird, und was im Frontend erscheint. Alles, was wir jetzt tun müssen, ist zu lernen, wie wir mithilfe dieses Razor-Codes das, was wir hier eingeben, umsetzen. Ich möchte noch eine Kleinigkeit dieser Seite zeigen, die sehr speziell ist, Das ist ja jetzt eine ganz simple CMS-Funktionalität, aber wir können hier die Seite "Support" sehen, und auf dieser Seite gibt es den Menüpunkt "Change Tickets". Das ist ein Dokument, in dem ein spezifischer Code von uns auf die Datenbank von unserem Issue-Tracking-System zugreift, sich die Daten holt und entsprechend in dieser Tabelle darstellt. Wenn man jetzt einen kleinen Blick in den Code hineinwirft, haben wir hier die Seite "Support". Dann haben wir die Seite "Change Tickets". Das ist das, was wir im Frontend gerade gesehen haben. Wir sehen, da ist so ein Element darin, das nennt sich "FF Readmine Overview". Dieses Element ist wiederum mit einem Template programmiert, das wir hier in den PartialViews finden. Hier haben wir es. Da ist das Template. Es ist schon erstaunlich, dass wir relativ wenig Code brauchen, um von dieser fremden Datenbank Daten zu ziehen und in eine simple Tabelle in HTML umzusetzen. Dieser Code, den Sie hier sehen, produziert genau diese Tabelle und das ist schon allerhand. Okay, soweit zum Thema CMS, vielleicht eine Kleinigkeit, die ich im Bereich CMS noch zeigen möchte. Um besser zu verstehen, was ich gerade gezeigt habe, habe ich hier so eine kleine Übersichtstabelle vorbereitet. Wir haben jetzt hier den Zusammenhang gesehen zwischen dem Backend und dem Frontend. Wir haben gesehen, dass der Razor-Code die Frontend-Darstellung zeigt. Das heißt, wir haben hier Code, der auf der Technologie ASP .NET MVC basiert mit dieser Razor-Sprache und das produziert mir dann den HTML-Code für das Frontend. Wenn wir dann das Frontend als Benutzer sehen, lässt sich die User Experience des Frontends wesentlich verbessern durch Scripting. Mit dem Scripting können wir dann jQuery oder Angular verwenden oder Bootstrap, um die Seiten besser darzustellen. So etwas ähnliches gibt es dann auch für das Backend. Das Backend von Umbraco allerdings basiert ganz auf AngularJs. Das ist eine sehr leistungsfähige Bibliothek, die JSON-Daten in HTML umsetzt. Das bedeutet, dass wir keinen HTML-Code an das Backend schicken, sondern über sogenannte "ASP .NET Web API" schlichtweg nur noch Daten verschickt werden. Daten im JSON-Format, das ist die JavaScript Object Notation. Im Backend ist es das C#, der uns diesen JSON-Code produziert, und der wird mit AngularJs in das umgesetzt, was wir im Backend sehen können. Die gleiche Technologie können wir natürlich auch für das Frontend verwenden, das bleibt uns ungenommen. Soweit zu den Begriffsbestimmungen zum Thema "CMS" und zur Einordnung dieser Begriffe in diese Technologietabelle.

Umbraco 7 Grundkurs

Lernen Sie das mächtige Content Management System zu bedienen und steigen Sie in die Entwicklung dafür ein.

3 Std. 16 min (32 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Umbraco Umbraco 7
.NET .NET 4.6
Exklusiv für Abo-Kunden
Erscheinungsdatum:07.09.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!