Build a WordPress Blog and Photo Gallery Site in 60 Minutes!


Published on

WebMatrix makes it easy to create, customize, and publish your website. It’s an all-inclusive, simple web development tool from Microsoft that includes everything you need for website development. You can start with open source web applications, built-in web templates, or your own code. This talk will briefly introduce you to WebMatrix before diving into demos of how WebMatrix makes it easy for two potential users to create, customize, and publish a WordPress blog and a photo gallery site. You will learn how to use Razor syntax, set up membership, leverage useful helpers, and other tips and tricks to get these two different types of sites (one from the Web Gallery, one from a template) up and running. Get a head start by downloading WebMatrix here:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Build a WordPress Blog and Photo Gallery Site in 60 Minutes!

  1. 1. Build a WordPress Blog and Photo Gallery Site in 60 Minutes!<br />With WebMatrix<br />Alice Pang<br />Developer Evangelist, Microsoft<br /><br /><br />
  2. 2. How WebMatrix Came About<br />Web Server<br />Database<br />Development Tool<br />
  3. 3. WebMatrix Users<br />Peter<br />Eric<br />I want to build a web site for my photos with an easy to learn tool and framework<br />I need a blog, so I need a tool that makes it easier to configure, customize and publish it.<br />
  4. 4. Peter, the food blogger<br />
  5. 5. Peter’s to-do’s<br />set up a WordPress blog<br />customize some settings<br />Publish the blog<br />
  6. 6. DEMO<br />E<br />M<br />D<br />O<br />
  7. 7. Eric, the photographer<br />
  8. 8. Eric’s to-do’s<br />set up a photo gallery site<br />customize with Razor syntax<br />Set up admin<br />Add Facebook helper<br />Publish the photo gallery site<br />
  9. 9. Razor Syntax is Easy!<br />Web Forms (6 markup transitions):<br /><ul><br /><% for (int i = 0; i < 10; i++) { %><br /> <li><% =i %></li><br /><% } %><br /></ul><br /><ul><br /><?php<br />for ($i = 0; $i < 10; $i++) {<br />echo("<li>$i</li>");<br /> } <br /> ?><br /></ul><br />PHP(2 markup transitions & an echo):<br /><ul><br />@for (int i = 0; i < 10; i++) {<br /> <li>@i</li><br /> }<br /></ul><br />Razor (2 markup transitions):<br />
  10. 10. Commenting in Razor<br />@*<br /> <div><br /> Hello World<br /> </div><br />*@<br />Option 1:<br />Markup<br />@{ <br /> //var name = "John Doe”;<br /> //@name<br />}<br />Option 2:<br />Code<br />@*<br /> @{ <br />var name = "John Doe";<br /> //@name<br /> }<br />*@<br />Option 3:<br />Both<br />
  11. 11. Layouts make organizing your pages easier<br />Don’t repeat yourself!<br />Define one layout and use it across your website<br />Page 1<br />Layout.cshtml<br />Page 2<br />Page 3<br />
  12. 12. Layout Syntax<br />/Shared/_Layout.cshtml<br /><html><br />    <head><br />      <title>Simple Layout</title><br />    </head><br />    <body> <br />        @RenderBody()<br /> </body><br /></html><br />MyPage.cshtml<br />@{ <br /> Layout = "/Shared/_Layout.cshtml";<br />}<br /><p><br /> My content goes here<br /></p><br />
  13. 13. Use Sections to organize your pages<br />Sections allow you to define areas of content that change between pages but need to be included in a layout<br />/Shared/_Layout.cshtml<br />MyPage.cshtml<br /><html><br />    <head><br />      <title>Simple Layout</title><br />    </head><br />    <body> <br />@RenderSection("Menu")<br />        @RenderBody()<br /> </body><br /></html><br />@{ <br /> Layout = "/Shared/_Layout.cshtml";<br />}<br />@section Menu {<br /> <ulid="pageMenu"><br /><li>Option 1</li><br /><li>Option 2</li><br /> </ul><br />}<br /><p><br /> My content goes here<br /></p><br />
  14. 14. DEMO<br />E<br />M<br />D<br />O<br />
  15. 15. What is Membership?<br />Provides registration for users<br />Organize users into roles<br />Restrict access to pages on your website based on user or role<br />Some templates include Admin folder with all the pages required for membership<br />
  16. 16. Setting up Membership<br />Set up membership in one line of code<br />/_AppStart.cshtml<br />@{<br />WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);<br />}<br />StarterSite database<br />
  17. 17. DEMO<br />E<br />M<br />D<br />O<br />
  18. 18. What are Helpers?<br />Helpers make it easy to quickly add commonly used functionality into your websites<br />Helpers are designed to make your life easier<br />Some examples:<br />Facebook<br />Twitter<br />PayPal<br />UserVoice<br />OData<br />Windows Azure Storage<br />And many more…<br />
  19. 19. Two categories of Helpers<br />You can think of Helpers like this:<br />HTML Helpers<br />Make is faster and easier to render commonly used markup to the page.<br />Examples: Facebook, Twitter<br />API Helpers<br />Make is faster and easier to call complex APIs from your website.<br />Examples: PayPal, OData, Windows Azure Storage<br />
  20. 20. Make your website social<br />Add social capabilities to your website with the WebMatrix Helper for Facebook<br />There are many more helpers available for WebMatrix<br />@FacebookSocialPlugins.Comments()<br />
  21. 21. DEMO<br />E<br />M<br />D<br />O<br />
  22. 22. Next Steps<br />Download it here: <br /><br /><br />