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

2. Introducing WebMatrix Customize Publish Create

3. Introducing WebMatrix Web ServerDatabaseDevelopment Tool

4. 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

5. A LAP AROUND WEBMATRIX Demonstration

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

7. Razor is a cut above the rest @for (int i = 0; i < 10; i++) { @i } @for (int i = 0; i < 10; i++) { @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):

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

9. Commenting in Razor @* Hello World *@ @* Hello World *@ @* @{ var name = "John Doe"; @name } *@ @* @{ var name = "John Doe"; @name } *@ Option 3: Both Option 1: Markup @{ //var name = "John Doe”; //@name } @{ //var name = "John Doe”; //@name } Option 2: Code

10. RAZOR SYNTAX Demonstration

11. SQL Compact Edition – File-based, so it’s portable. Runs without a server. Easy to design, easy to code against Database Designing @{ 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

12. DATABASE ACCESS Demonstration

13. Displays your data quickly and easily Lots of options to customize layout, appearance, paging etc. Display your data easily with WebGrid @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid(data); } @grid.GetHtml(); @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid(data); } @grid.GetHtml(); @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.Price ) ) @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.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); }

14. WEBGRID Demonstration

15. 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

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

17. 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 Simple Layout @RenderSection("Menu") @RenderBody() Simple Layout @RenderSection("Menu") @RenderBody() /Shared/_Layout.cshtml @{ Layout = "/Shared/_Layout.cshtml"; } @section Menu { Option 1 Option 2 } My content goes here @{ Layout = "/Shared/_Layout.cshtml"; } @section Menu { Option 1 Option 2 } My content goes here MyPage.cshtml

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

19. LAYOUTS Demonstration

20. 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?

21. 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

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

23. 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

24. Add social capabilities to your website with the WebMatrix Helper for Facebook There are many more helpers available for WebMatrix Make your website social @FacebookSocialPlugins.Comments()

25. HELPERS Demonstration

26. 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?

27. 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

28. INSTALL A WEB APP Demonstration

29. 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

30. Find the right host for you Quickly compare the best deals www.microsoft.com/web/hosting Windows Web Hosting Gallery

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

32. PUBLISHING YOUR WEBSITE Demonstration

33. 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

34. 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

35. 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?

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

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

38. 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 pages @if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } @if ( Roles.IsUserInRole("admin")) { Welcome @WebSecurity.CurrentUserName ! } @if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } @if ( Roles.IsUserInRole("admin")) { Welcome @WebSecurity.CurrentUserName ! }

39. 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

40. virtual techdays THANKS │ 9-11 February 2011 @ranganh@ranganh │ http://geekswithblogs.net/ranganh http://geekswithblogs.net/ranganh