WebMatrix: Advanced Web Development Made Simple

  • submit to reddit

WebMatrix

Advanced Web Development Made Simple

By James Sugrue

13,681 Downloads · Refcard 136 of 202 (see them all)

Download
FREE PDF


The Essential WebMatrix Cheat Sheet

WebMatrix is a free lightweight web development tool from Microsoft that requires no registration to download. It is a powerful, task-focused tool that is designed to make it really easy to create, customize and publish websites based on open source technologies like Drupal, Joomla, and DotNetNuke. Theres no need to build a web application from scratch when WebMatrix integrates and streamlines the database and web server setup, allowing developers to just get the job done. This Refcard will walk through the website setup, final publishing, database management, and reporting.
HTML Preview
WebMatrix: Advanced Web Development Made Simple

WebMatrix:Advanced Web Development Made Simple

By James Sugrue

ABOUT WEBMATRIX

Microsoft WebMatrix is a web development tool that provides straightforward functionality for development, testing and deployment of websites. WebMatrix integrates a complete stack– including server, database and programming frameworks—in one place. This tool provides web developers with the ability to deploy their applications onto Windows-hosting service providers.

WebMatrix lowers the barrier for website development for web developers and provides the possibility to create websites from scratch, using templates or existing open-source applications.

This DZone Refcard covers the installation process for WebMatrix and focuses on site creation, supported databases, reporting and some of the helpers available. Users of WebMatrix should be familiar with IIS, SQLServer and ASP.NET.

INSTALLATION

A simple installation for WebMatrix is provided at http://www.microsoft.com/web/webmatrix/ via Microsoft’s Web Platform Installer, which will also guide you through the installation of dependencies such as ASP.Net Pages, SQL Server Compact 4.0 and Microsoft.NET Framework 4.

Installation is as simple as clicking on Spotlight from the Web Platform installer and clicking Add for the components you wish to install.

web settings 1

Additional products and applications can be installed through the same installer.

web settings 2

Once installed, the WebMatrix quick start screen gives a choice of four options.

web settings 3

The following table describes each of the site creation methods available.

Creation Method Description
Site From Web Gallery Create a site from a list of open-source ASP.NET and PHP web applications that you can freely use.
Site From Template Create an empty site or choose from one of the customizable templates.
Site From Folder Create a site from a folder of pre-existing web files.

Using the Web Gallery

When you choose to create a site from the web gallery, you will be presented with a number of well known applications such as WordPress, Drupal, Joomla and many more.

WebMatrix guides you through the process and downloads all dependencies required for the application such as any required databases.

IIS EXPRESS

IIS Express is a lightweight, self-contained version of IIS optimized for developers and is included with WebMatrix.

It has all the core capabilities of IIS 7 as well as additional features designed to ease website development including:

  • It doesn’t run as a service or require administrator user rights to perform most tasks.
  • IIS Express works well with ASP.NET and PHP applications.
  • Multiple users of IIS Express can work independently on the same computer.

Further information on the differences between IIS and IIS Express is available on http://learn.iis.net/page.aspx/868/iisexpress- overview/

SQLSERVER COMPACT

SQL Server Compact is a free, lightweight, file-based database that can be embedded within your ASP.NET application. It supports a rich subset of Transact-SQL syntax and SQL Server data types. Because it’s an in-process database, it requires no interprocess communication.

SQL Server Compact also provides a smooth migration to SQL Server when your application needs to handle larger amounts of data or high concurrent loads.

CREATING CUSTOM SITES

WebMatrix consists of a number of different workspaces, each focused on particular aspects of your website. These can be accessed through the Workspace Selector in the bottom left corner.

web settings5

WebMatrix Site Workspace

After you choose to create a site, the site workspace is automatically displayed, providing a screen for the configuration of website settings.

web settings 4

The site settings ribbon along the top of the application provides the following functionality.

Button Description
My Sites Lists sites that you have created.
Publish Publish your site. During the first time you publish you will be prompted to configure the site publish settings.
Run Runs the site or selected file in the browser.
Start Starts IIS Express.
Stop Stops IIS Express.
Restart Stops IIS Express, releases resources and restarts IIS Express.
Requests Displays the local requests of the site.

The following table lists the tasks available to manage the site settings:

Task Action
View Site Settings Click Settings in the navigation pane.
Set the URL and port number Enter a URL and an optional port number. This setting is preconfigured by WebMatrix and you typically do not need to change it.
If changing from localhost, ensure the domain is registered in the hosts file or DNS server.
Enable encrypted connections using SSL Select Enable SSL. This enables you to test SSL using a selfsigned certificate with IIS Express.
This setting is not included when you publish your site.
Set the .NET Framework version Select a version from the list (typically the latest version, unless you want to make the site backward compatible).
The setting is included when the site is published if the hosting provider allows it.
To apply to a remote site click Publish and Check Compatibility.
Enable PHP support Under PHP Settings, select Enable PHP. If PHP is not already installed, WebMatrix will guide you through the installation process.
Note that the .NET Framework version must be set to none. Not included when site is published.
Manage default pages Pages listed in the content pane are those that IIS will try to run when the request URL does not point to a specific page. Pages can be added, reordered or deleted.
Site Requests
web settings 6

The site requests tab provides the following functionality.

Button Description
Clear All Clears the list of all requests.
Only Errors Displays requests that results in errors.
Ignore Images Removes requests that get images from the list.
Capture Requests Turns request monitoring on or off.

The following tasks are available from the site requests view.

Task Action
View Requests Click Requests in the View group in the ribbon. Select an individual request to see details.
Search for a specific request Enter the text to find at the top of the content pane.
View errors Click Only Errors on the ribbon. Select an error in the content pane for details.
Clear existing requests Click Clear All in the ribbon.
Stop capturing requests Click Capture Requests in the ribbon.

The following values indicate the status of requests, all of which are standard HTTP response codes:

Status Code Description
2xx Success
3xx Informational (e.g. Redirect)
4xx Error on the client
5xx Error on the server

WebMatrix Files Workspace

The Files Workspace allows you to manage the files and folders of your website. This can be accessed via the Files link in the workspace selector.

Hot Tip

File Types
WebMatrix allows you to add a number of different file types to your web site. In addition to HTML, CSS, JScript, classic ASP and .NET files, you can add PHP and SQL scripts.

You can also click on the Visual Studio button to launch the website as a Visual Studio project in Visual Web Developer Express.

DATABASE INTEGRATION

WebMatrix Database Workspace

The Database Workspace provides functionality for the management of databases and allows you to run queries.

web settings 7
Database Ribbon Functions
Button Description
New Database Creates a new SQL Server Compact database.
New Connection Creates a new connection to either one of SQL Server, SQL Server Compact or MySQL databases.
New Table Creates a new database table.
New Query Creates a new database query.
Execute Run a database query.
Migrate Migrates an SQL Server Compact database to SQL Server.
Install Installs SQL Server Express.
web settings 8
Table Ribbon Functions
Button Description
New Table Creates a new table.
Definition Creates and modify a table schema.
Data Displays table data.
New Column Adds a column to the table.
Delete Column Deletes a column from the table.
New (Relationship) Creates a new relationship between tables.
View (Relationship) Displays existing relationships between tables.
Delete (Relationship) Deletes a relationship between tables.
New (Indexes) Creates a new index.
View (Indexes) Displays existing indexes.
Delete (Indexes) Deletes an index from a table.
Refresh Refreshes table data.
Delete Row Deletes a single row from the table.

Connecting to a Database

WebMatrix includes SQL Server Compact, a lightweight version of SQL Server, which creates .sdf files in the App_Data folder of your website. Deployment is as simple as publishing this .sdf file.

You can also connect to SQL Server, SQL Server Express, or existing MySQL instances. Choose the type of database that you are using in the Database Type dropdown in the New Connection dialog box.

web settings 9

If the connection is successful, the database will appear in the Databases workspace.

settings 1

DATABASE MIGRATION

You can migrate from SQL Server Compact to either SQL Server Express or SQL Server. SQL Server has many useful features, including stored procedures, handling over 256 concurrent connections and handling databases that are larger than 4GB.

From the databases workspace, select the database that you want to migrate and click on the Migrate button.

settings 2

The default migration will be to a local instance of SQL Server Express. Change the settings if you are migrating to SQL Server or to SQL Server Express on another computer.

Using the Database in Your Website

The following section provides a quick reference for the usage of databases in your application code.

Action Code
Open Database var db = Database.Open();
Run Query db.Query(<query string>);
db.QuerySingle(<query string>);
Loop Through Results foreach(var row in db.Query(
query string>)

The Database.Open method allows you to open a .sdf file to access SQL Server Compact databases. However, you can also pass through a connection string, which is stored in a web.config file as follows.


<?xml version=”1.0” encoding=”utf-8” ?>
<configuration>
  <connectionStrings>
	<add
	  name=”SQLServerConnectionString”
	  connectionString= “server=myServer;database=myDatabase;uid=user
name;pwd=password”
	  providerName=”System.Data.SqlClient” />
  </connectionSt
</configuration>

REPORTS

WebMatrix Report Workspace

The Reports Workspace provides functionality to run site analysis reports and review any errors found by WebMatrix. settings 3

Report Ribbon Functions
Button Description
New Creates a new report.
Re-run Creates a new report based on an existing report.
Delete Removes an existing report.
Export Saves the results of a report to a CSV file.
Performance Filters to show only performance-related violations and the load time for all site pages.
SEO Filters to show only search engine optimization (SEO) violations.
All Displays all violations.
URL Groups violations by the URL in which they were found.
Issue Type Groups violations by the name of the issue.

Reports can be created on local or live sites through the New button. Enter a name for the report and a URL to start analysis from.

Search Engine Optimization

Once you have run an analysis report on your site, clicking on the SEO button will show all the SEO related issues.

Clicking on each individual issue will display details of the violation as well as recommendations on how to fix the issue.

settings 4

Clicking on the Edit this page link will bring you to the file editor so that you can address the violation.

Once you have fixed an errors found, re-run the report to ensure the fixes are successful.

Hot Tip

IIS Search Engine Optimization Toolkit
For more detailed analytics and queries, you can use the IIS Search Optimization Toolkit against any website you have created simply by providing the address of the site in the initial dialog.

PUBLISHING YOUR SITE

The .PublishSettings File

A .PublishSettings file contains all the information needed to publish your website, including server name, login details, the destination path for your website and the protocol you are using to publish the site.

Finding a Hosting Provider

Click on the Publish button and choose Find Web Hosting… This brings you to a page on Microsoft’s Web site with hosting options and the ability to narrow the results by price, location and other factors. Some hosting providers will send you a .PublishSettings file containing the settings you require. Spotlight offers can be found at http://www.microsoft.com/web/Hosting/.

Configure WebMatrix for Hosting

Choose the Settings… option from the Publish menu.

settings 5

If you already have a .PublishSettings file, you can import it here. Otherwise, just enter the required settings.

Setting Description
Server Enter the “Service URL” or “Server Name” provided by the hosting company.
User name / Password Enter the credentials provided by the hosting provider for your account. Note that if the database may have a different username/password.
Site Name Enter the “Site” or “Site/Application” value from the hosting company.
Destination URL The URL that people will use to access your site over the internet.

If you are using a database other than SQL Server Compact, you will need to provide the connection string to your database.

Hot Tip

Check Compatibility The Publish menu provides a Check Compatibility option where you can ensure that all the features that work locally will work on your published site.

Click on the Publish… menu option to deploy the site to your hosting provided. A useful preview screen is displayed where you can review the files that will be transferred, including the database.

Editing a Published Site

Editing a Published Site If you wish to make further changes to your site, the Download Published Site… menu option allows you to copy down the website from your hosting provider. Once all changes are made you can redeploy the site using the Publish… option.

SECURITY

Testing SSL in WebMatrix

If your site contains any sensitive information, you will need to provide the ability to access pages through https://, or the secure sockets layer.

In the sites workspace, choose Settings. Under SSL Connection click on Enable SSL.

settings 6

WebMatrix will then create a self-signed certificate for local testing. Once you publish your site, you will need to get a certificate for your website. Your hosting provider may have this included in your plan.

RAZOR SYNTAX REFERENCE

ASP.NET server code can be added to your pages using the Razor syntax, based on .NET.

Razor Syntax Reference [using C#]

Type Example
Statement block @{ var myMessage = “Hello World”; }
Inline expression <p>The value of myMessage is: @myMessage</p>
Adding text to code @if(condition){<text> normal text</text>}
Expression and text @myMessage, @name
Server Side Comment @* Comment *@
Escape @symbol @@myMessage

Helpers

A helper is a component that simplifies common tasks, such as Twitter and Facebook integration. A number of helpers are available. These can be installed through the ASP.NET Web Pages Administration tool in the site workspace. This brings you to a package manager containing a list of available add-on packages.

You can install helpers by going to the administration page of your site http://localhost:<port>/admin and following the instructions through the Package Manager.

Adding Search Using the Bing Helper

The following code snippets show how to use the Bing Helper to add search to your site.

Set up the site to search:


@{
	Bing.SiteUrl = “www.dzone.com “;
	Bing.SiteTitle = “DZone Custom Search”;
}

Display a simple search box that will open results in a new browser window:


@Bing.SearchBox()

Display an search box that will show results in the same window:


@Bing.AdvancedSearchBox(
	boxWidth: “300px”,
	resultWidth: 600,
	resultHeight: 900,
	themeColor: “Green”,
	locale: “en-US”)

Social Networking

The Twitter helper allows you to embed Twitter feeds on your webpage.

Display a list of tweets from your profile use :


Twitter.Profile(“username”)

Display a Twitter search area:


@Twitter.Search(“<Insert search criteria here>”)

The Facebook helper provides the capability to add a Like button to your website.

Display a Like button for the current page:


@Facebook.LikeButton()

Display a Like button for a specific page:


@Facebook.LikeButton(
	  href: “http://refcardz.dzone.com”,
	  action: “recommend”,
	  width: 250,
	  buttonLayout: “button_count”,
	  showFaces: true,
	  colorScheme: “dark”)

Adding Email

The WebMail helper makes it easy to send emails from your website.

Email information is set through a number of variables.


@{
	WebMail.SmtpServer = “your-SMTP-host”;
	WebMail.SmtpPort = 25;
	WebMail.EnableSsl = true;
	WebMail.UserName = “your-user-name-here”;
	WebMail.From = “your-email-address-here”;
	WebMail.Password = “your-account-password”;
}

Sending the email is done using the Send method. Note this should be done with a try-catch block in case of failure.


@{
  WebMail.Send(to: “me@dzone.com”,
	subject: “Email subject”,
	body: bodyContent
	
}


Caching Information

The WebCache helper provides caching functionality for your website.

Items are stored in the cache using a key.


@{
	WebCache.Set(“myKey”, @DateTime.Now, 1, false);
}

Items are later retrieved using the same key.


@{
	WebCache.Get(“myKey”);
}

Hot Tip

Creating Your Own Helpers
You can also create your own Helpers for use in your websites using the @helper or @function Razor syntax.

Debugging Tips

WebMatrix provides two helpers to assist with debugging: ServerInfo and ObjectInfo.

ServerInfo provides four separate views of information about the server environment.

Type Example
Server Configuration Information about the hosting web server, including the version of ASP.NET.
ASP.NET Server Variables Details of HTTP variables, and values that are part of each web page request.
HTTP Runtime Variables Details about the version of the .NET Framework that is running.
Environment Variables ll the local environment variables and their values on the web server.

ObjectInfo displays the type and value of each object that is passed through to its print method:


ObjectInfo.Print (variable)

For further debugging, you can use Internet Explorer Developer Tools or FireBug.

About The Authors

By James Sugrue

James Sugrue

James Sugrue has been editor at both Javalobby and Eclipse Zone for over two years and loves every minute of it. By day, James is a software architect at Pilz Ireland, developing killer desktop software using Java and Eclipse all the way. While working on desktop technologies such as Eclipse RCP and Swing, James also likes meddling with up-and-coming technologies such as Eclipse e4. His current obsession is developing for the iPhone and iPad, having convinced himself that it’s a turning point for the software industry.

Recommended Book

ASP.NET 4

ASP.NET 4 is the latest version of Microsoft’s revolutionary ASP.NET technology. It is the principal standard for creating dynamic web pages on the Windows platform. Pro ASP.NET 4 in C# 2010 raises the bar for high-quality, practical advice on learning and deploying Microsoft’s dynamic web solution.

Share this Refcard with
your friends & followers...

DZone greatly appreciates your support.


Your download should begin immediately.
If it doesn't, click here.