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

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

http://blogs.msdn.com/alicerp

http://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

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

Technology

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