PrimordialCode WebMatrix + Orchard First Impact… Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

PrimordialCode Two words about me Graduated Engineer Owner/co-founder of SID s.r.l. Blog:

PrimordialCode WebMatrix Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

PrimordialCode WebMatrix WebMatrix is a free web development tool that includes everything you need to start developing your website. It is NOT a replacement for Visual Studio. It supports managing of web applications and application frameworks (like WrodPress, Umbraco, Orchard…). Integrated with IISExpress to manage your development websites configuration. It has some built-in web templates or just start writing code yourself.

PrimordialCode WebMatrix Create a website: starting from scratch or using one of the available web applications/templates to create your starting point. Websites are ‘self-hosted’ using IISExpress or IIS: ideal for developement. Customize your website: it has support for different editors that makes easy to edit different aspect of the website (pages, css…) Publish the website: using an integrated wizard you can publish the website to your dedicated hosting provider.

PrimordialCode WebMatrix - setup Download and install: Microsoft Web Platform Installer Look for: Microsoft WebMatrix and add it to the installation list All the dependecies will be automatically installed if not already present on your PC

PrimordialCode WebMatrix - setup

PrimordialCode WebMatrix - site view It allows you to easily configure some IISExpress parameters (otherwise you’ll have to do it manually editing the configuration files)

PrimordialCode WebMatrix - file view It allows you to create and edit files related to the website, from code files to css styles with an integrated editor.

PrimordialCode WebMatrix - database view It allows you to connect to a datasource and manage it: edit tables and manage data.

PrimordialCode WebMatrix - report view Analyze your website and find potential problems.

PrimordialCode WebMatrix - demo How it works…

PrimordialCode Orchard Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

PrimordialCode Orchard Orchard is a Web CMS, which essentially aims at helping you build web sites from existing pieces. Highly modular approach. It’s built upon ASP.NET MVC 3. Native persistence layer based on NHibernate. Can use different types of databases.

PrimordialCode Orchard - setup You have different options to setup orchard, from downloading and compiling the source code to using precompiled zip packages or the WPI. However we started with WebMatrix, so we keep going down that side: Open the WebMatrix dashboard Select ‘Site from web Gallery’ Choose Orchard from the application list.

PrimordialCode Orchard - demo Setup Orchard using WebMatrix

PrimordialCode Orchard - first run It will ask you some info: Website name Administrator account Type of storage Template to use

PrimordialCode Orchard - first run Here is what you get after the setup completes:

PrimordialCode Orchard - first run And this is the dashboard:

PrimordialCode Orchard - demo How it works…

PrimordialCode Orchard - concepts Orchard is a highly modularized solution. Each module/package can be broke up in different pieces that offer small features that can be combined to obtain complex operations. To undestand how things work we need to familiarize with some terms and definitions the Orchard team uses:

PrimordialCode Orchard - concepts Content Everything is focused around content; content is everything that has any information in it (a page, a blog post, a comment…we can have different kinds of content). A content is not an atomic entity, it is made of different parts, a single content part is used to provide a coherent behavior that can be reused by different contents:

PrimordialCode Orchard - content parts Admin Menu – management related functions Body – provide the content/information Comments – states if comments are available Common – provide common attributes (like the owner and date timestamps) Containable – allows the item to be contained inside a list Container – provide support for containing items Custom properties

PrimordialCode Orchard - content parts Identity Menu – allows the item to appear on the menu Publish Later – information related to the pubblication Route Part – used to locate the resource Tags Part – associates tags to the resource (allows for some sort of categorization, tagged contents are accessible as a resource: ~/tags/tag-name) More parts can be added…

PrimordialCode Orchard - content fields Content fields are pieces of information that can be added to a content item. Content fields have a name and a type and are specific to a content type; there can be several of each field type on any given content type. For example, a Product content type can have a numeric field representing its price, and another numeric field representing its weight. You can also define custom content types.

PrimordialCode Orchard - demo How it works…

PrimordialCode Orchard - modules and features All the functionalities exposed by Orchard are implemented as Modules. A module is a set of extensions for Orchard that are grouped in a sub-folder of the Modules directory that can be found inside the Orchard web site. A module can contain one or more Features: a logical grouping of functionality that can be enabled or disabled individually. To access the module management section: Dashboard -> Modules (here you can install/enable/disable/configure modules and features)

PrimordialCode Orchard - demo How it works…

PrimordialCode Orchard – themes & composition Orchard enforces a clean separation between the content management and the visual rendering of the content. Each featuare, part or content has its own graphic representation. Orchard has a mechanism that is able to compose these eterogenous entities in a single consistent whole. UI composition in Orchard is quite complex to understand at first, this is mainly due the high level of flexibility and customization.

PrimordialCode Orchard - theme A theme is a packaged look and feel for an Orchard site. It can consist of any combination of style sheets, images, layouts, templates and even custom code. It is possible to create a theme that inherits from another (it’s easy to make small modifications on an existing theme).

PrimordialCode Orchard - layout A layout is a file in a theme that defines the general organization of the pages of the site that use it. A layout typically defines a set of zones where contents or widgets can be inserted. You can have only one basic layout per site. You can customize how the pages render using combinations of different layers (more in the next slides).

PrimordialCode Orchard - layout (example)

PrimordialCode Orchard - zones & widgets Zones are specific parts of a layout that can be customized by inserting elements or widgets. Zones can be collapsible, which means that they disappear if they contain no active element or widget. A Widget is a small fragment of UI that can be added to some or all pages of the site. Examples of widgets are tag clouds, maps, archives, etc… they can be implemented as features in modules.

PrimordialCode Orchar - layer A layer is a group of widgets (with their specific configuration) that is activated by a specific rule. You can define different kinds of rules. When more than one layer is active on any given page (because it matches more than one rule), all the widgets from all those layers get displayed at the same time. To define more layers: Dashboard -> Widgets

PrimordialCode Orchard - layer The Layer Rule value is an expression that can be either true or false. Rules syntax: SyntaxDescription url(" ")True if the current URL matches the specified path. If you add an asterisk (*) to the end of the path, all pages found in subfolders under that path will evaluate to true (for example,url("~/home*")). authenticatedTrue if the user is logged in. notLogical NOT. andLogical AND. orLogical OR. You can build complex expressions: (not authenticated and url("~/about")) or authenticated

PrimordialCode Orchard - template Each content need to be represented graphically to the user. We need a way to convert the data of the content to HTML to be rendered by the browsers. Basically a template is an HTML file with placeholders for data and code to be executed ).

PrimordialCode Orchard - shape Before being rendered using the templates each object is transformed into a ‘Shape’. A Shape is an object that contains all the informations required to display it. Everything in a page is mapped to a tree of shapes that is an abstract representation of the page itself (like the WPF/Silverlight/WP7 visual and logical tree representation of xaml forms). This approach allows for trasformations of each object before the actual rendering.

PrimordialCode Orchard - placement When rendering a page Orchard needs to know where to put each piece and in what order to do so. Placement.info files are XML files that describe rules that can be used to determine what shapes go into what zones and in what order.

PrimordialCode Orchard - demo

PrimordialCode Orchard - security It supports Users and Roles management. It comes with a predefined sets of roles you can assign to users. You can create new roles. Each role has its own permission set. Permissions are granted to roles but are not explicitly denied (if a user belongs to any role that has a given permission, he has that permission) Some permissions are “effectively granted” (it means that they are implied by other permissions, ex: site owner…) Each feature can expose it’s own set of permissions. Users & permission management: Dashboard -> Users

PrimordialCode Orchard – advanced topics Eng. Giorgetti Alessandro Software Artisan SID s.r.l.

PrimordialCode Orchard - searching & indexing Features provided through modules: Indexing – provide the indexing feature Lucene – specific indexing implementation Search – provide the ability to query New options are added to the configuration settings of the dashboard (to select which part of the content to index and to schedule the indexer task) A new widget is provided (SearchForm) to offer the users a UI with which perform queries and search.

PrimordialCode Orchard – custom content types You can create your custom types to represent specific contents in your site (such as an ‘Event’ or a ‘Sponsor’ for exmaple). Custom types can be made of: Parts – predefined block of properties that defines specific behaviors Fields – custom piece of information specific to your type (you have different kinds of fields and more can be created). Custom types can have different behaviors related to the Parts you use to build them up (so you can render them as lists, single pages, index them, display them on the menu, etc…)

PrimordialCode Orchard – content lists You can organize content items in lists. Edit an existing type or create a custom one and add the following Parts: Common – gives the object a basic set of properties (owner, creation date, container, version, etc…) Containable – states that this type can be attached to a list and enables dashboard to manage the relationship between the items and lists. Next you need to create a List that will contain your types: Dashboard  New  List

PrimordialCode Orchard – content lists To display a list: Attach the list to a menu item and display it as a full page Use a “Container Widget” and anchor it to a zone of your layout.

PrimordialCode Questions ?

PrimordialCode Thanks for attending!