webmatrix 100-level presentation
DESCRIPTION
This version contains links to my MSDN blog posts for the demo portions. It is intendedTRANSCRIPT
Build a WordPress Blog and Photo Gallery Site in 60 Minutes!
With WebMatrix
Alice PangDeveloper Evangelist, Microsoft
http://blogs.msdn.com/alicerphttp://twitter.com/alicerp
How WebMatrix Came About
Web Server Database Development Tool
WebMatrix Users
I need a blog, so I need a tool that
makes it easier to configure, customize
and publish it.
I want to build a web site for my photos with an
easy to learn tool and framework
Peter Eric
Peter, the food blogger
Peter’s to-do’s
• set up a WordPress blog• customize some settings• Publish the blog
D
E M
O
DEMO
Eric, the photographer
Eric’s to-do’s
• set up a photo gallery site• customize with Razor syntax• Set up admin• Add Facebook helper• Publish the photo gallery site
Razor Syntax is Easy!
<ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %></ul>
<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> }</ul>
Razor (2 markup transitions):
Web Forms (6 markup transitions):
<ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?></ul>
PHP(2 markup transitions
& an echo):
Commenting in Razor
@* <div> Hello World </div>*@
@* @{ var name = "John Doe"; //@name }*@
Option 3:Both
Option 1:Markup
@{ //var name = "John Doe”; //@name}
Option 2:Code
Layouts make organizing your pages easier
Don’t repeat yourself!Define one layout and use it across your website
Layout.cshtml
Page 1
Page 2
Page 3
Layout Syntax
<html> <head> <title>Simple Layout</title> </head> <body> @RenderBody() </body></html>
/Shared/_Layout.cshtml
@{ Layout = "/Shared/_Layout.cshtml";}
<p> My content goes here</p>
MyPage.cshtml
Use Sections to organize your pages
Sections allow you to define areas of content that change between pages but need to be included in a layout
<html> <head> <title>Simple Layout</title> </head> <body> @RenderSection("Menu") @RenderBody() </body></html>
/Shared/_Layout.cshtml
@{ Layout = "/Shared/_Layout.cshtml";}
@section Menu { <ul id="pageMenu">
<li>Option 1</li><li>Option 2</li>
</ul>}<p> My content goes here</p>
MyPage.cshtml
D
E M
O
DEMO
What is Membership?
• Provides registration for users• Organize users into roles• Restrict access to pages on your
website based on user or role
Some templates include Admin folder with all the pages required for membership
Setting up Membership
• Set up membership in one line of code
@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);}
/_AppStart.cshtml
StarterSite database
D
E M
O
DEMO
What are Helpers?
• 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…
Two categories of Helpers
You can think of Helpers like this:
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
Make your website social
• Add social capabilities to your website with the WebMatrix Helper for Facebook
• There are many more helpers available for WebMatrix
@FacebookSocialPlugins.Comments()
D
E M
O
DEMO
Next Steps
Download it here: http://bit.ly/MSwebmatrix
• http://blogs.msdn.com/alicerp