1. Build a WordPress Blog and
Photo Gallery Site in 60 Minutes!
With WebMatrix
Alice Pang
Developer Evangelist, Microsoft
http://blogs.msdn.com/alicerp
http://twitter.com/alicerp
3. WebMatrix Users
Peter Eric
I want to build a
I need a blog, so I web site for my
need a tool that photos with an easy
makes it easier to to learn tool and
configure, customize framework
and publish it.
8. 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
9. Razor Syntax is Easy!
Web Forms <ul>
(6 markup transitions): <% for (int i = 0; i < 10; i++) { %>
<li><% =i %></li>
<% } %>
</ul>
PHP <ul>
<?php
(2 markup transitions for ($i = 0; $i < 10; $i++) {
& an echo): echo("<li>$i</li>");
}
?>
</ul>
Razor <ul>
@for (int i = 0; i < 10; i++) {
(2 markup transitions): <li>@i</li>
}
</ul>
10. Commenting in Razor
@*
<div>
Option 1: Hello World
Markup </div>
*@
@{
//var name = "John Doe”;
Option 2: //@name
Code }
@*
Option 3: @{
var name = "John Doe";
Both //@name
}
*@
11. Layouts make organizing your
pages easier
Don’t repeat yourself!
Define one layout and use it across your website
Page 1
Page 2
Layout.cshtml
Page 3
13. 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
/Shared/_Layout.cshtml
MyPage.cshtml
<html>
<head> @{
<title>Simple Layout</title> Layout = "/Shared/_Layout.cshtml";
</head> }
<body>
@RenderSection("Menu") @section Menu {
@RenderBody() <ul id="pageMenu">
</body> <li>Option 1</li>
</html> <li>Option 2</li>
</ul>
}
<p>
My content goes here
</p>
15. 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
16. Setting up Membership
• Set up membership in one line of code
/_AppStart.cshtml
@{
WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email",
true);
}
StarterSite database
18. 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…
19. Two categories of Helpers
You can think of Helpers like this:
Make is faster and easier to render
commonly used markup to the page.
HTML Helpers
Examples: Facebook, Twitter
Make is faster and easier to call
complex APIs from your website.
API Helpers Examples: PayPal, OData, Windows
Azure Storage
20. 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()
WebMatrix evolved from a number of things that Microsoft was working on, including IIS Developer Express, SQL Server CE, and ASP.NET Razor syntax. Razor syntax is an easy way to mix HTML and code like C# and VB, but it’s also used on other platforms such as MVC. File extensions are .cshtml and .vbhtml
Introduce two users: (1) the foodie who wants to get a food recipes and food adventures blog up quickly and easily by using the app gallery and (2) the photographer who wants to be more hands-on with customizing his site
We’re going to help Peter do these three things. We will show him how to customize in WordPress and with PHP code in WebMatrix. We’ll also show off some cool PHP IntelliSense in the process.
Set up WordPress blog, change theme, PHP customization, publish: http://blogs.msdn.com/b/alicerp/archive/2011/09/30/get-your-wordpress-blog-up-and-running-and-customize-it-in-25-minutes.aspx
Moving on to the photographer
We will set up a photo gallery site from the template, introduce ASP.NET Razor syntax and add a Page Footer with Razor syntax, set up administrator role and use Razor to restrict access to a page, add a Facebook (or Twitter) helper through both the NuGet gallery and ASP.NET Web Pages administration, publish
Reduces the number of keystrokes and is intuitive for programmers.
Option 1:You can comment a block by using @* … *@Please note that this method could not be recursive (you could not have a @* inside another @*)Option 2:You can comment lines by using // (in C#) the same way you do in your code files.Option 3:If you need to comment a whole razor block, you should add a @* before the beginning of the code block and a *@ after it’s finish.
Inject code, like ASP.NET Master Pages
Create photo gallery, show off reports, UI in WebMatrix, add photo/comment/user account to show off databases, create new file for PageFooterhttp://blogs.msdn.com/b/alicerp/archive/2011/10/13/create-a-consistent-look-to-your-website-and-get-started-with-asp-net-razor-syntax-by-adding-a-page-footer.aspx
The StarterSite Template comes with membership configured, and with a Database ready to be filled with users as well as their roles in the website.First, you have to uncomment the WebSecurity.InitializeDatabaseConnection and fill the parameters with a userProfile and userId to be defined in the database.
Show off reCaptcha.net code that is added but commented out by default in this template, add administrator role, assign user to this role, and create an AdminOnly and AdminError page to restrict access.http://blogs.msdn.com/b/alicerp/archive/2011/10/30/membership-roles-made-easy-with-razor-syntax-in-webmatrix.aspx
WebMatrix Helpers help you add common functionality to your Web site. They can be used to solve a specific web site tasks. You can think of them as bricks that are used/reused and interconnected to build a site. Nothing stops you from creating a helper and reusing it on different pages of your site, or even in different sites. And you can use helpers created by others. Here is a sample of existing helpers.
HTML Helpers focus in look & feel and simple connection with other sites, like Facebook and Twitter.API Helpers are more complex helpers, conceived to interact with external services. Their focus is not based on the user interface, but the service integrity, for instance how to secure a transaction in PayPal or registering an order to update your storage in a Windows Azure Account.
If people like something on your site, they often want to share it with friends. For instance, to comment on Facebook, you can download the FacebookSocialHelper and then add the @FacebookSocialPlugins.Comments() in your page to show the Facebook comments’ controls.
Show adding helper from both NuGet gallery and ASP.NET web pages administration. Add Facebook, Twitter, or your favorite helper and demonstrate how easy it is to use Razor and IntelliSense to add a helper and show that the packages is automatically populated when you add a helper. http://blogs.msdn.com/b/alicerp/archive/2011/10/13/make-your-website-more-social-with-helpers.aspx