WebMatrix 100-level presentation
Download as PPTX, PDF0 likes657 views
This document provides an overview of how to build a WordPress blog and photo gallery site in 60 minutes using WebMatrix. It discusses how WebMatrix allows users like Peter and Eric to easily configure, customize, and publish their sites. The document demonstrates Razor syntax, layouts, sections, membership, and helpers - features in WebMatrix that make developing sites faster and easier.
WebMatrix 100-level presentation
- 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
- 2. How WebMatrix Came About Web Server Database Development Tool
- 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.
- 4. Peter, the food blogger
- 5. Peter’s to-do’s • set up a WordPress blog • customize some settings • Publish the blog
- 6. DEMO E M D O
- 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
- 12. Layout Syntax /Shared/_Layout.cshtml <html> <head> <title>Simple Layout</title> MyPage.cshtml </head> @{ <body> Layout = "/Shared/_Layout.cshtml"; @RenderBody() } </body> </html> <p> My content goes here </p>
- 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>
- 14. DEMO E M D O
- 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
- 17. DEMO E M D O
- 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()
- 21. DEMO E M D O
- 22. Next Steps Download it here: http://bit.ly/MSwebmatrix • http://blogs.msdn.com/alicerp
Editor's Notes
- #3: 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
- #4: 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
- #6: 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.
- #7: 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
- #8: Moving on to the photographer
- #9: 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
- #10: Reduces the number of keystrokes and is intuitive for programmers.
- #11: 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.
- #13: Inject code, like ASP.NET Master Pages
- #15: 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
- #17: 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.
- #18: 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
- #19: 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.
- #20: 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.
- #21: 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.
- #22: 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