virtual techdays INDIA │ 9-11 February 2011 Creating next generation websites Easier than ever, with WebMatrix Harish Ranganathan │ Developer Evangelist, Microsoft

Introducing WebMatrix Customize Publish Create

Introducing WebMatrix Web ServerDatabaseDevelopment Tool

Who is WebMatrix for? I <3 Web Apps. I just need a tool that makes them easier to configure, customize and publish them I want to build web sites myself with an easy to learn tool and framework I’m a professional software developer and I build complex, large scale web sites with a team of developers

A LAP AROUND WEBMATRIX Demonstration

The easiest way to code websites Easy to mix HTML and Code Lots of useful Helpers Introducing Razor

Razor is a cut above the (int i = 0; i < 10; i++) (int i = 0; i < 10; i++) } Razor (2 markup transitions): Web Forms (6 markup transitions): <?php for ($i = 0; $i < 10; $i++) { echo(" $i "); } ?> <?php for ($i = 0; $i < 10; $i++) { echo(" $i "); } ?> PHP (2 markup transitions & an echo):

Move from code to markup easily with var name = “John Doe”; Your var name = “John Doe”; Your var name = “John Your var name = “John Your } Option 3: Single line of output in markup Option 1: HTML var name = “John Doe”; Your var name = “John Doe”; Your } Option 2: Text Block

Commenting in Hello var name = "John } var name = "John } Option 3: Both Option 1: //var name = "John Doe”; //var name = "John Doe”; } Option 2: Code

RAZOR SYNTAX Demonstration

SQL Compact Edition – File-based, so it’s portable. Runs without a server. Easy to design, easy to code against Database var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); } Coding

DATABASE ACCESS Demonstration

Displays your data quickly and easily Lots of options to customize layout, appearance, paging etc. Display your data easily with var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new columns: grid.Columns( grid.Column("Name", "Product", style: "product"), ), grid.Column("Price", ) columns: grid.Columns( grid.Column("Name", "Product", style: "product"), ), grid.Column("Price", ) var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); }

WEBGRID Demonstration

Don’t repeat yourself! Define one layout and use it across your website Layouts make organizing your pages easier Layout.cshtml Page 1 Page 2 Page 3

1.Define your Layout 2.Reference it in your pages Layout Syntax Simple Simple Layout = "/Shared/_Layout.cshtml"; } My content goes Layout = "/Shared/_Layout.cshtml"; } My content goes here MyPage.cshtml

Sections allow you to define areas of content that change between pages but need to be included in a layout Use Sections to organize your pages Layout = "/Shared/_Layout.cshtml"; Menu { Option 1 Option 2 } My content goes Layout = "/Shared/_Layout.cshtml"; Menu { Option 1 Option 2 } My content goes here MyPage.cshtml

RenderPage() helps you reuse markup and code that doesn’t change Use RenderPage to organize pages that don’t change @RenderPage("/Shared/_Footer.cshtml") @RenderPage("/Shared/_Footer.cshtml") /Shared/_Layout.cshtml © 2010 Contoso © 2010 Contoso /Shared/_Footer.cshtml

LAYOUTS Demonstration

Helpers make it easy to quickly add commonly used functionality into your websites Helpers are designed to make your life easier Some examples: – Facebook – Twitter – PayPal – UserVoice – OData – Windows Azure Storage – And many more… What are Helpers?

You can think of Helpers like this: Helpers fit into two categories HTML Helpers API Helpers Make is faster and easier to render commonly used markup to the page. Examples: Facebook, Twitter Make is faster and easier to call complex APIs from your website. Examples: PayPal, OData, Windows Azure Storage

There are two ways to install Helpers in your website 1.Package Manager 2.Manual download Adding Helpers to your website

1.Create a blank website in WebMatrix 2.Run your website and visit _admin 3.Select and install Helpers Installing Helpers using Package Manager /_admin Facebook Helper installed

Add social capabilities to your website with the WebMatrix Helper for Facebook There are many more helpers available for WebMatrix Make your website

HELPERS Demonstration

Free & Popular – Large developer ecosystems with lots of widgets, plugins, templates and themes – Good community support through blogs and forums Gets you closer to a solution – CMS, eCommerce, Forum etc. Easy to configure Why use Open Source Apps?

WebMatrix builds on the success of the Web Platform Installer 2.5 Million Apps downloaded so far WebMatrix and OSS Apps Web Platform Installer WebMatrix Download Install (inc. dependencies) Customize SEO Analysis Publish

INSTALL A WEB APP Demonstration

It’s easy to find a host that fits your needs and budget Publishing your website is easy and pain free Faster and more secure If you make changes, you only upload the changes – not the entire website Publishing your website

Find the right host for you Quickly compare the best deals Windows Web Hosting Gallery

Easy to configure, preview and publish your website and database in one click Publishing in WebMatrix

PUBLISHING YOUR WEBSITE Demonstration

With a little luck, your web application will be successful and attract lots of users! 1.Congratulations 2.You need to ask yourself some questions: 1.Do I need more developers? 2.Is my code base still manageable? 3.Do I need to scale my web & database servers? With a successful application the answer will normally be “YES” to those questions Growing Your App

Visual Studio 2010 provides the best solution to your “growing” needs: – Powerful editing capabilities – Testing Frameworks – Source/Version Control Moving to Visual Studio 2010 is easy – The Razor Syntax is common across WebMatrix and ASP.NET MVC 3 – You can use Helpers in ASP.NET MVC 3 – Migration of database to IIS Express is easy to do Growing Your App

Provides registration for users Organize users into roles Restrict access to pages on your website based on user or role WebMatrix includes helpers & database that makes setting up membership easy Some templates include Admin folder with all the pages required for membership What is Membership?

Setup membership in one line of code Setting up WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", " ", true); WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", " ", true); } /_AppStart.cshtml StarterSite database

Some templates come with an admin folder containing membership pages ready to go Templates with Membership

You can control access to pages based on the following: – Is the user logged in? – Does the user have access to the page? – Does the user belong to the correct role? Controlling access to (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); ( Roles.IsUserInRole("admin")) { ! (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); ( Roles.IsUserInRole("admin")) { ! }

WebMatrix automatically provides “clean” URLs using Routing and removes the need to use QueryStrings Routing has the following benefits: – Easier to read for your users – Better for SEO Routing

virtual techdays THANKS │ 9-11 February 2011 │