How to Build your First Microsoft WebMatrix App

Once you have WebMatrix up and running, you’ll walk through the process of using it to create your first website. You will then use that site to explore the rest of the web stack. The following excerpt from the recent publication Introducing Microsoft WebMatrix elaborates on how to do so.

---

• Launch WebMatrix. You’ll get the WebMatrix welcome screen shown below.
  
  
  The WebMatrix welcome screen.
  
  
  
  
  
  
• Choose the Site From Template option. You’ll see a list of templates that come with WebMatrix. Templates are small, simple, sites-in-a-box that you can use to learn how to develop websites that use ASP.NET Web Pages. The templates shown below are included with WebMatrix. You might have a slightly different set.
  
  
  WebMatrix templates.
  
  
  
  
  
  
• My favorite is the Bakery template, so click that now and name your new site WebMatrixCh1, as shown above. Click OK when you’re done.
  
  WebMatrix will launch, and you’ll see the WebMatrix workbench.
  
  
• Click the Run button on the ribbon at the top of the WebMatrix window. The Bakery website will launch in your default browser and you will see the screen shown below.

This is an example of a dynamic site running server-side code in addition to the traditional markup that you see in a webpage. This means that the details for each of the store’s products are stored in a database—along with the description, price, and so on—and when a user selects a product, the dynamic site automatically generates the page content from that database content.

So, for example, if you click the Order Now button while viewing any product, you will be taken to an order detail page similar to the one shown below.




Notice how the URL shown in the browser’s address bar remains the same (except for the number at the end), regardless of which product you select. That’s because it is a dynamic page; the previous two figures actually show the same page, updated for every product. The number at the end of the URL tells the page which product to use. The page retrieves the selected product’s picture, its description, and the price from the database.