Learning WebMatrix: Part 1 of 3 Akber Alwani

Congratulations! You are part of a global community of thousands of web developers who attend Web Camps to keep their web development skills up-to-date Web Camps are run all over the world in 6 continents, 30 countries Join the community! Facebook Fan Page (search for Web Camps) on Twitter Find out more about events here: You are a Web Camper!

Today’s decks, demos and labs are available at (click on Web Camps Training Kit) Plus, there’s also content on ASP.NET MVC 3 HTML5 and IE9 jQuery Web Apps! It’s all FREE! Where do I get this content?

Part 1 What is WebMatrix? Razor Syntax Database Access WebGrid Part 2 Layouts Helpers Themes, Package Manager, Facebook and more Membership Routing Part 3 Building Helpers WebMatrix and OSS Web Apps Publishing your website or web app How to “grow up” to Visual Studio 2010 and ASP.NET MVC Agenda

Introducing WebMatrix Customize Publish Create

Introducing WebMatrix Web ServerDatabaseDevelopment Tool

What it actually consists of TemplatesTemplates Web Server: IIS Express Database: SQL Server Compact/MySQL Web App Gallery Programming Framework: ASP.NET/PHP

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

Web PI

Package installs

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

What is WebMatrix? Razor Syntax Database Access WebGrid Part 1 Summary

Q&A