Learning WebMatrix – Part 3: Demo

Demo OverviewThis demo shows how to create custom helpers, how to Install a WebApp with WebMatrix Installer, and how to publish a Web site.

Features Demo Flow

Prerequisites Duration Microsoft WebMatrix 20 mins

Page | 1

Web MatrixWeb PublisherWeb Application installerDotNetNukeSEO Reports

RazorInline Helpers

Section1Creating Custom Helpers

Section 2Using WebApp Installer for DotNetNuke

Section 3Generating SEO Reports

Section 4Publishing a Web Site

This demo will show how to create custom helpers using Razor syntax. In the first part, we will show how to create a helper that will render an email address. Then, we will create an inline C# helper to render a formatted date.

Talking Points Demo steps Screenshots

Creating an inline CSHTML helper Now we will create a custom

helper that will render an e-mail address as a link.

To create a helper, we place a cshtml file in App_Code folder.

We define @helper methods inside that file.

To use the helper, we just need to write “@filename.helpername”.

1. Open the Web site HelpersEmail2. Open App_Code/MyHelpers.cshtml and highlight

the helper code:@helper ShowEmail(string email){ <a href="@email">@email</a>}

3. Pause on @helper

4. Open Page.cshtml to show how the helper is used

5. Highlight this line:@MyHelpers.ShowEmail("john.s@hotmail.com")

6. Run the Web site

Screenshot 1: E-mail addresses

Page | 2

Section1Creating Custom Helpers

Creating an inline C# helper using @functions

This approach is an enhancement of Razor Inline code helpers

It is useful to include .NET framework functionality.

In this example we will use .net string formatting to show the current date.

To create an inline helper in c#, we have to define static methods inside a @functions code block.

C# helper methods are called in the same way as the inline razor helpers.

1. Open the helper file App_Code/MyInlineHelpers.cshtml and highlight FormatDate method:@functions{ public static string FormatDate(string format) { return String.Format(format, DateTime.Now); } }

2. Pause on @functions block.

3. Open Page2.cshtml to show how the helper is consumed.

4. Highlight the line :<p>Long date: @MyInlineHelpers.FormatDate("{0:D}")</p> <p>Short time: @MyInlineHelpers.FormatDate("{0:t}")</p>

5. Run the Web site

Screenshot 2: Inline C# helpers example

Page | 3

This demo will show how to integrate DotNetNuke with WebMatrix, and easily customize the site before publishing it.

Talking Points Demo steps Screenshots

DotNetNuke is a content management platform (CMS) for building professional websites with dynamic content and interactive features.

By using CMS platforms, any authorized user can edit the content and create new pages without the need of programming skills.

DotNetNuke has features for commercial websites, community portals and intranets as well.

Setup: Installing DotNetNuke

Note: Before executing this demo, make sure you’ve installed the Web Platform Installer 3

It is recommended to execute these steps before presenting demo in order to have DotNetNuke already downloaded in the computer that will be used. This will prevent the download delay time.

1. Create New Site from Web Gallery2. Select DotNetNuke Community Edition and click

Next3. In the EULA Dialog Box, click on I Accept4. Only for users of Windows Vista/7 without

administration privileges: click Yes on the message dialog “Do you want to allow the following program from an unknown publisher to make changes on this computer”?

5. After this step, DotNetNuke will be downloaded.When the installation ends, WebMatrix will create a new DotNetNuke web site.

6. Pause on files and show the project structure

Screenshot 1: DotNetNuke successfully installed

Screenshot 2: The DotNetNuke project created by

Page | 4

Section2Using WebApp Installer for DotNetNuke

WebMatrixRunning DotNetNuke for the first time

Now we will run and set up DotNetNuke

Choose automatic installation

1. Run the site for the first time. You will load a Web page with DotNetNuke Installation Wizard.

2. In the dialog box Select Installation Method, choose Auto and click Next

3. In the Installation results page, click on Click here to access your portal to load home page.

4. Pause on the portal page.

Screenshot 3: DotNetNuke Install Wizard

Screenshot 4: A successful set up

Screenshot 5: DotNetNuke home page

Page | 5

Customizing the portal WebMatrix integration makes

easier to edit the templates offline, before publishing.

We can create many DotNetNuke portals for testing purposes in minutes, and have local copies of it.

1. Click on Login, and enter admin for the user and dnnadmin for the password.

2. The portal will ask to change your password. Write 12345678 as the new password and login again.

3. Pause on the portal. Walk through the main tasks such as creating a new page.

Screenshot 7: adding a new page

Page | 6

This demo will show how to take advantage of the Search Engine Optimization Reports Workspase included in WebMatrix.

Talking Points Demo steps Screenshots

SEO Reports will check and identify issues, such as broken links or HTML errors, that could make your site less visible for search engines.

After repairing those issues your site will be more discoverable.

In Advanced Settings, we can specify the maximum urls to crawl and the maximum download size

The report returns 8 warnings, related to <meta> tag description. Search engines use the meta tag to know about the page.

The more information we provide in the meta tag, the better the page ranks.

1. Create a new site from template choosing Bakery2. Go to Reports, and create a new report.3. Run the report for the Bakery site. The report should

return 8 warnings.4. Expand the issues and pause on the warning

message

Screenshot 1: New SEO report

Page | 7

Section 3Generating SEO Reports

Screenshot 2: Issue list

Screenshot 3: Issue list expanded To fix the issues, we will have to

include meta description tag in _SiteLayout.cshtml, where head is defined.

After running again the report, we will see there are no issues

Fixing the warning and generating the reports:1. Open _SiteLayout.cshtml2. Add the tag

<meta name="description" content="Fourth Coffee store – Cupcakes, European bakery, chocolate cakes and hot drinks"> immediately after the head tag <head>.

3. Save and rerun the report for Bakery.4. Pause on results

Screenshot 4: Description meta tag added

Screenshot 5: No issues

Page | 8

This demo will show how to publish a Web site using a Webmatrix

Talking Points Demo steps Screenshots

1. Open the app we had been writing from scratch2. Show the hosting gallery, talking points – lots of

cheap hosting providers to choose from3. Prep work for presenter – sign up with a host and

make a note of the credentials. Remove any old app demos from the host prior to the demo.

4. Publish the application, show the publishing progress.

5. Make one change.6. Republish – highlight that we only publish the

changed file.

In this demo, we will learn how to publish a site in a hosting provider.

There are lots of inexpensive and free hosting providers for WebMatrix.

You need to sign up with one of them and then use WebMatrix to publish your site.

Page | 9

Section 4Publishing a Web Site

We will use an existing site to focus on the deployment process.

First of all, we’ll see the current site working

1. Open WebMatrix and select New Site -> Site from Folder

2. Select Source\Code and then WebGrid3. Run the site to view the WebGrid showing products from

the database.

Publishing Site hosting options. Review the hosting gallery. Select a provider and explain that

we have a user already signed up for demo purposes.

1. Click on the Publish menu and select Find Web Hosting2. Review the Web Hosting list. Mention that there are a

lot of options in http://www.asp.net/webmatrix/hosts. We will use Adhost for this demo, but any of the hosts listed could be used as well.

3. Explain that before publishing a site, we have to sign up to a hosting provider. Adhost would ask for a Name, Last Name and Email Address and would send a registration confirmation email with more instructions.

Publishing the site

Entering the credentials Select the Database for the first

deployment. Proceeding to publish the site

1. Click on the Publish menu and select Settings.2. A Publishing Settings window pops up. Select the Web

Deploy Protocol and enter the following data:Server: https://20474rdjv4.adhostbeta.comUsername: farm1\20474Password: Lp6$8vA@Sitename: 20474rdjv4.adhostbeta.com/YourApplicationDestination URL: http://20474rdjv4.adhostbeta.com/YourApplication

3. Select Save Password and click on Validate Connection to check it.

4. Click on Publish5. A Publish Compatibility dialog will appear to ask

permission for testing if your site is compatible with the server. This test will upload a few files and delete them after the test, but it is not necessary to run it. Click No.

6. The Publish Preview window shows the list of files to be copied. Because this is the first deploy, make sure that

Page | 10

Bakery.sdf database is checked so it is copied to the site and click Continue.

7. A status bar will indicate that the site is being published.

Verifying site publication After the publication process

finishes, the site can be viewed in the hosting provider.

1. The process shows you a message indicating that the publication process is finished.

2. Click on the link and view the site published in your hosting provider

3. Highlight that the URL includes the site of the provider.

Editing your site content and publishing it. During the lifecycle of your sites

you will need to introduce changes, new functionalities and enhancements.

With WebMatrix we are only publishing what we have modified, using less time and less bandwitdth. Local testing: Explain that it is not a good idea to publish your changes directly as we are going to do in this demo step. It’s a good practice to perform a local test before uploading.

1. Open the default.cshtml file in the Files view.2. Uncomment the following line to alternate colors of

the rows in the grid@*.alt { background-color: #E8E8E8; color: #000; }*@

3. Save the File and click on the Publish menu4. The Publish Preview window shows the files that

had changed.5. Because this file is the one we modified, accept the

changes and click on Continue6. Highlight that this second deploy took less time.7. Mention to be carefull with uploading the local and

the remote dababase. Local database shouldn’t be copied.

8. Verify that the changes were applied by browsing the publishing page: http://20469xsiv4.adhostbeta.com/YourApplication

Page | 11

To find an Adhost account working with the site already uploaded, you can check:Server: https://20469xsiv4.adhostbeta.comUsername: farm1\20469Password: Eh1$7xH@Sitename: 20469xsiv4.adhostbeta.com/YourApplicationDestination URL: http://20469xsiv4.adhostbeta.com/YourApplication

End Demo

Page | 12