Thursday, 25 August 2011

Create an ASP.NET website from scratch

Introducing WebMatrix

Seamless, simple, small, and best of all, free, WebMatrix includes a complete collection of web development tools that installs in minutes. It elegantly integrates a web server with database and programming frameworks to create a single, integrated experience.  Use WebMatrix to streamline the way you code, test, and publish your own ASP.NET or PHP website. Or start a new site using the world's most popular open source apps, like DotNetNuke, Umbraco, WordPress, or Joomla. With WebMatrix on your desktop, you're using the same powerful web server, database engine, and frameworks that will run your website on the internet, which makes the transition from development to production smooth and seamless.
image01a

Getting WebMatrix

To install WebMatrix, you can use Microsoft's Web Platform Installer (Web PI 3.0), which is a free application that makes it easy to install and configure web-related technologies. You can install the Web Platform Installer from the WebMatrix download page.
On the download page, click Install Now. At the security warnings, click Run. On the Web Platform Installer page, click Install.
image01
On the Web Platform Installation screen, WebMatrix displays a list of additional required components. Click I Accept. The install begins.

Creating Your First Website

Right out of the box, WebMatrix gives you a number of options for how to create sites. You can create a site from a template or from a folder that already contains ASP.NET web pages. Or you can download an open-source application from the gallery as the basis for your site.
image02
For this walkthrough, click Site From Template to see a list of available templates.
image03
Select the Empty Site template to create a new site from scratch, and name it WebMatrixDemo. Click OK.
image04
Before moving on, let's take a quick look around the WebMatrix user interface. In the lower-left part of the page you see that you can select one of four workspaces. When you open WebMatrix and select a site, you start off in the Site workspace, which lets you perform tasks like specifying site settings (for example, designating a default web page) and monitoring HTTP requests.
To create, delete, and update files such as web pages, select the Files workspace. The site's folder structure appears in the left pane, and when you select a file, you can edit it in the content pane on the right.
image05
To add a database to your site and then add tables and data to it, select the Databases workspace. You get a list of databases in the left pane, and the content pane changes depending on what you want to do with a selected database.
image06
Finally, to get information about how to help your site rank high in search engine results, select the Reports workspace. Once you've run some reports, you'll see them listed on the left, and when you select one, you'll see the reports contents on the right.
image07
You might have noticed that across the top of the page is a Quick Access Toolbar and a ribbon, like in Microsoft Office 2010. Some of the buttons on the ribbon's Home tab are different in each workspace, but the buttons in the Site group are always the same.
image08
You use My Sites to choose a site to work on, Publish to make the site publicly available, Run to test the site in a browser, and Start/Stop/Restart to work with the web server that you'll use in WebMatrix to test your website (IIS Express).  You'll learn more about IIS Express in a minute.

Adding an ASP.NET Web Page to Your Site

To get a feel for how to work in WebMatrix and what you can do with it, begin by creating a web page. Select the Files workspace and then click New. You get a list of templates to choose from for various file types.
image09
Select the CSHTML template and call the new page Default.cshtml. The extension .cshtml indicates that this is an ASP.NET Web page. It can contain HTML, JavaScript, and CSS, just like a normal HTML page, and you can make the page dynamic by adding special code that runs on the server.
Click OK.
The CSHTML template creates a new page with some basic HTML.
image10
As you can see, this is ordinary HTML markup.  Add some simple "Hello World" HTML to it.
image11
Now click the Default.cshtml file in the navigation pane and then click the Run button to see this page in the browser.
image12


No comments:

Post a Comment