WebMatrix+Orchard

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix + OrchardFirst Impact…

Eng. Giorgetti Alessandro

Software Artisan

SID s.r.l.

$C:\Users\pietrobr\Pictures\work\com.png$

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Two words about me

Graduated Engineer

Owner/co-founder of SID s.r.l.

Blog:http://www.primordialcode.com

Email: guardian@nablasoft.com

Twitter: @A_Giorgetti

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix

Eng. Giorgetti Alessandro

Software Artisan

SID s.r.l.

$C:\Users\pietrobr\Pictures\work\com.png$

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix

•WebMatrix is a free web developmenttool that includes everything you needto start developing your website.

•It is NOT a replacement for VisualStudio.

•It supports managing of webapplications and applicationframeworks (like WrodPress, Umbraco,Orchard…).

•Integrated with IISExpress to manageyour development websitesconfiguration.

•It has some built-in web templates orjust start writing code yourself.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix

•Create a website: starting from scratch orusing one of the available webapplications/templates to create yourstarting point.

•Websites are ‘self-hosted’ using IISExpressor IIS: ideal for developement.

•Customize your website: it has support fordifferent editors that makes easy to editdifferent aspect of the website (pages,css…)

•Publish the website: using an integratedwizard you can publish the website to yourdedicated hosting provider.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - setup

•Download and install: Microsoft WebPlatform Installer

•Look for: Microsoft WebMatrix and addit to the installation list

•All the dependecies will beautomatically installed if not alreadypresent on your PC

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - setup

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - site view

•It allows you to easily configure some IISExpress parameters(otherwise you’ll have to do it manually editing the configurationfiles)

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - file view

•It allows you to create and edit files related to the website, fromcode files to css styles with an integrated editor.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - database view

•It allows you to connect to a datasource and manage it: edit tablesand manage data.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - report view

•Analyze your website and find potential problems.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

WebMatrix - demo

How it works…

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard

Eng. Giorgetti Alessandro

Software Artisan

SID s.r.l.

$C:\Users\pietrobr\Pictures\work\com.png$

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard

•Orchard is a Web CMS, which essentiallyaims at helping you build web sites fromexisting pieces.

•Highly modular approach.

•It’s built upon ASP.NET MVC 3.

•Native persistence layer based onNHibernate.

•Can use different types of databases.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - setup

You have different options to setup orchard,from downloading and compiling thesource code to using precompiled zippackages or the WPI.

However we started with WebMatrix, so wekeep going down that side:

•Open the WebMatrix dashboard

•Select ‘Site from web Gallery’

•Choose Orchard from the application list.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - demo

Setup Orchard using WebMatrix

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - first run

It will ask you some info:

•Website name

•Administrator account

•Type of storage

•Template to use

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - first run

Here is what you get after the setupcompletes:

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - first run

And this is the dashboard:

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - demo

How it works…

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - concepts

Orchard is a highly modularized solution.

Each module/package can be broke up indifferent pieces that offer small featuresthat can be combined to obtain complexoperations.

To undestand how things work we need tofamiliarize with some terms anddefinitions the Orchard team uses:

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - concepts

Content

Everything is focused around content;content is everything that has anyinformation in it (a page, a blog post, acomment…we can have different kindsof content).

A content is not an atomic entity, it ismade of different parts, a singlecontent part is used to provide acoherent behavior that can be reusedby different contents:

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - content parts

•Admin Menu – management related functions

•Body – provide the content/information

•Comments – states if comments are available

•Common – provide common attributes (likethe owner and date timestamps)

•Containable – allows the item to be containedinside a list

•Container – provide support for containingitems

•Custom properties

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - content parts

•Identity

•Menu – allows the item to appear on themenu

•Publish Later – information related to thepubblication

•Route Part – used to locate the resource

•Tags Part – associates tags to theresource (allows for some sort ofcategorization, tagged contents areaccessible as a resource: ~/tags/tag-name)

•More parts can be added…

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - content fields

Content fields are pieces of information thatcan be added to a content item.

Content fields have a name and a type andare specific to a content type; there canbe several of each field type on any givencontent type.For example, a Product content type canhave a numeric field representing itsprice, and another numeric fieldrepresenting its weight.

You can also define custom content types.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - demo

How it works…

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - modules andfeatures

•All the functionalities exposed by Orchard areimplemented as Modules.

•A module is a set of extensions for Orchard thatare grouped in a sub-folder of the Modulesdirectory that can be found inside the Orchardweb site.

•A module can contain one or more Features: alogical grouping of functionality that can beenabled or disabled individually.

•To access the module management section:Dashboard -> Modules (here you caninstall/enable/disable/configure modules andfeatures)

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - demo

How it works…

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard – themes & composition

•Orchard enforces a clean separationbetween the content management and thevisual rendering of the content.

•Each featuare, part or content has its owngraphic representation.

•Orchard has a mechanism that is able tocompose these eterogenous entities in asingle consistent whole.

•UI composition in Orchard is quite complexto understand at first, this is mainly due thehigh level of flexibility and customization.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - theme

•A theme is a packaged look and feel foran Orchard site.

•It can consist of any combination ofstyle sheets, images, layouts, templatesand even custom code.

•It is possible to create a theme thatinherits from another (it’s easy to makesmall modifications on an existingtheme).

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - layout

•A layout is a file in a theme that defines thegeneral organization of the pages of thesite that use it.

•A layout typically defines a set of zoneswhere contents or widgets can beinserted.

•You can have only one basic layout persite.

•You can customize how the pages renderusing combinations of different layers(more in the next slides).

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - layout (example)

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - zones & widgets

•Zones are specific parts of a layout thatcan be customized by insertingelements or widgets.

•Zones can be collapsible, which meansthat they disappear if they contain noactive element or widget.

•A Widget is a small fragment of UI thatcan be added to some or all pages ofthe site.

•Examples of widgets are tag clouds,maps, archives, etc… they can beimplemented as features in modules.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchar - layer

•A layer is a group of widgets (with theirspecific configuration) that is activatedby a specific rule.

•You can define different kinds of rules.

•When more than one layer is active onany given page (because it matchesmore than one rule), all the widgetsfrom all those layers get displayed atthe same time.

•To define more layers: Dashboard ->Widgets

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - layer

The Layer Rule value is an expression that can beeither true or false.

Rules syntax:

Syntax

Description

url("<url path>")

True if the current URL matches the specified path. If you add anasterisk (*) to the end of the path, all pages found in subfolders underthat path will evaluate to true (for example,url("~/home*")).

authenticated

True if the user is logged in.

not

Logical NOT.

and

Logical AND.

Logical OR.

You can build complex expressions:

(not authenticated and url("~/about")) or authenticated

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - template

•Each content need to be representedgraphically to the user.

•We need a way to convert the data of thecontent to HTML to be rendered by thebrowsers.

•Basically a template is an HTML file withplaceholders for data and code to beexecuted(<h2>@Model.Title</h2>).

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - shape

•Before being rendered using thetemplates each object is transformedinto a ‘Shape’.

•A Shape is an object that contains allthe informations required to display it.

•Everything in a page is mapped to atree of shapes that is an abstractrepresentation of the page itself (likethe WPF/Silverlight/WP7 visual andlogical tree representation of xamlforms).

•This approach allows for trasformationsof each object before the actualrendering.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - placement

•When rendering a page Orchard needs toknow where to put each piece and in whatorder to do so.

•Placement.info files are XML files thatdescribe rules that can be used todetermine what shapes go into what zonesand in what order.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - demo

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - security

•It supports Users and Roles management.

•It comes with a predefined sets of roles you canassign to users.

•You can create new roles.

•Each role has its own permission set.

•Permissions are granted to roles but are notexplicitly denied (if a user belongs to any role thathas a given permission, he has that permission)

•Some permissions are “effectively granted” (itmeans that they are implied by other permissions,ex: site owner…)

•Each feature can expose it’s own set ofpermissions.

•Users & permission management: Dashboard ->Users

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard – advanced topics

Eng. Giorgetti Alessandro

Software Artisan

SID s.r.l.

$C:\Users\pietrobr\Pictures\work\com.png$

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard - searching &indexing

•Features provided through modules:Indexing – provide the indexing featureLucene – specific indexingimplementationSearch – provide the ability to query

•New options are added to theconfiguration settings of the dashboard(to select which part of the content toindex and to schedule the indexer task)

•A new widget is provided (SearchForm) tooffer the users a UI with which performqueries and search.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard – custom contenttypes

•You can create your custom types to representspecific contents in your site (such as an ‘Event’or a ‘Sponsor’ for exmaple).

•Custom types can be made of:Parts – predefined block of properties thatdefines specific behaviorsFields – custom piece of information specific toyour type (you have different kinds of fields andmore can be created).

•Custom types can have different behaviorsrelated to the Parts you use to build them up (soyou can render them as lists, single pages, indexthem, display them on the menu, etc…)

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard – content lists

You can organize content items in lists.

•Edit an existing type or create a custom oneand add the following Parts:Common – gives the object a basic set ofproperties (owner, creation date, container,version, etc…)Containable – states that this type can beattached to a list and enables dashboard tomanage the relationship between the itemsand lists.

•Next you need to create a List that will containyour types:Dashboard  New  List

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Orchard – content lists

To display a list:

•Attach the list to a menu item anddisplay it as a full page

•Use a “Container Widget” and anchorit to a zone of your layout.

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Questions ?

$C:\Users\pietrobr\Pictures\work\msdn.png$

$C:\Users\pietrobr\Pictures\work\technet.png$

PrimordialCode

http://www.primordialcode.com

Thanks for attending!