From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Joomla! Day Los Angeles 2011 WebMatrix
1. Build a Joomla! Site and Photo
Gallery Site in 30 Minutes
With WebMatrix
Alice Pang
Developer Evangelist, Microsoft
http://blogs.msdn.com/alicerp
Twitter: @alicerp
3. WebMatrix Users
Peter Eric
I want to build a
I need a CMS. I want web site for my
a tool that makes it photos with an easy
easier to to learn tool and
configure, customize framework
and publish my food
site.
8. Eric’s to-do’s
• set up a photo gallery site
• customize with Razor syntax
• Add a Twitter 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. 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. 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…
14. 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
15. 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()
17. Next Steps
Download:
http://bit.ly/MSwebmatrix
Learn:
http://blogs.msdn.com/alicerp
Notas del editor
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 CMS 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 Joomla! and with PHP code in WebMatrix. We’ll also show off some cool PHP IntelliSense in the process.
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.
Inject code, like ASP.NET Master Pages
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.
Aside from the ease with which you can get started, customers can open the doors to businesses running Microsoft technology. It has full support for .net languages such as C#, VB.net plus IronPython and IronRuby and has easy to use APIs that work seamlessly from Visual Studio.