j day la 2011 webmatrix
TRANSCRIPT
Build a Joomla! Site and Photo Gallery Site in 30 Minutes
With WebMatrix
Alice PangDeveloper Evangelist, Microsoft
http://blogs.msdn.com/alicerpTwitter: @alicerp
The Evolution of WebMatrix
Web Server Database Development Tool
WebMatrix Users
I need a CMS. I want a tool that makes it easier to configure,
customize and publish my food site.
I want to build a web site for my photos with an
easy to learn tool and framework
Peter Eric
Peter, the foodie
Peter’s to-do’s
• set up a Joomla! site• customize some settings• Publish the food site
D
E M
O
DEMO
http://bit.ly/MSwebmatrix
Eric, the photographer
Eric’s to-do’s
• set up a photo gallery site• customize with Razor syntax• Add a Twitter 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):
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
D
E M
O
DEMO
http://bit.ly/MSwebmatrix
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
http://bit.ly/MSwebmatrix
Next Steps
Download: http://bit.ly/MSwebmatrix
Learn: http://blogs.msdn.com/alicerp