Sunday, December 23, 2012

Starting Web Development with Microsoft WebMatrix


What Will I Learn?

This series of exercises takes you from starting with one of the simple templates included with WebMatrix all the way to creating a practical and interactive website that incorporates a range of typical web technologies and techniques. These include the following:
  • How WebMatrix provides a complete development environment for building websites and web applications that incorporate server-side code (code that runs on the server to create the HTML pages that visitors see in their browser).
  • How you can generate HTML and other content in your pages using server-side code.
  • How you can specify the styles, colors, and layout for the content of your site using style sheets.
  • How you can use a database to power your website. This includes displaying stored information to visitors and collecting input from visitors that you store in the database.
  • How you can support specialist types of browsers (called user agents) that are designed to make it easier for visually-impaired visitors to use the web.
  • How you can add client-side code that runs inside the visitor's browser to make the pages you display more interactive, and to reduce network traffic between the browser and your server.
  • How you can identify visitors and store information specific to each one that personalizes the website for them, and allows specific sets of visitors such as administrators to interact with the site in different ways.
  • How you can use the useful helper classes included in WebMatrix to reduce and simplify the code that you need to write.

What Do I Need to Know Before I Start?

To use these exercises, you need to have some prior knowledge. This is not a primer in web development or programming. However, the exercises do include helpful explanations of the code and the HTML they use, and provide links to where you can get more information. The basic techniques you should know about are:

What Will I Be Building?

The guidance is divided into separate exercises, each of which builds on the previous ones to create a fully working web application. You start with a new website created from one of the basic WebMatrix templates, and end with an application aimed at soccer clubs (or similar groups) that allows visitors to see news, upcoming match schedules, past results, league tables, and details of each match played. It also allows members to register for and organize rides to away matches and keep in contact with each other. Figure 1 shows a view of the completed application. Figure 2 shows the wireframe view of the application and the navigation links between the pages.

Hh145669.937a5cf4-de52-407e-8df1-31d173a30393(en-us,VS.99).png
Figure 1 
The completed Soccer website
Hh145669.050025a6-be96-4b6d-979a-191658ab38ab(en-us,VS.99).png
Figure 2 
The complete application showing the pages it contains and the navigation links between them.
Each exercise includes a series of individual hands-on tasks that you can work through following the step-by-step instructions. The exercises also include descriptions of each task, and explanation of the way that the code you write works so that you will learn about web programming and gain the experience you need to write your own applications.

What Topics Does Each Exercise Cover?

The exercises included in this guidance are:
  • Exercise 1 - Creating the base application from a template. In this exercise you will create a new web site using a WebMatrix template and then modify the outline style and appearance. You will also add a section to the home page that displays items of news about the club. Along the way you will learn how to add tables to the database that WebMatrix includes in your application, and how you can use jQuery to animate the user interface.
  • Hh145669.4324d56c-5bda-49a7-b920-d085da3d9a85(en-us,VS.99).png
  • Exercise 2 - Displaying upcoming matches and league tables. In this exercise you will add tables to the database that contains details of upcoming and played matches; and the league table data for two seasons. You will then create a page to display all of this data, culminating in the use of asynchronous partial page refresh for the league table data. Along the way you will learn how to filter data and display it in HTML tables, how you can use HTML forms to collect information from visitors, how you can provide optimum accessibility for visually-impaired visitors, and how you can use jQuery to load pages in the background and update the currently displayed page.
  • Hh145669.4b1af258-d454-48ba-af80-d99878f2b958(en-us,VS.99).png
  • Exercise 3 - Displaying match details from linked tables. In this exercise you will add tables to the database that list the club members, and then link those members that are players in the team to the matches in which they played. You will then create a page to display full details of an individual match, including the members of the team and the reserve players, which will be displayed when the user selects a specific match in the "results" page you created in the previous exercise. Along the way you will learn how to link database tables and select compound information from these tables. You will also learn about using a style of URL called Representational State Transfer (REST), displaying loading indications, and passing values between partial pages.
  • Hh145669.e2057e9c-837a-47ec-8e5e-4051eab5a111(en-us,VS.99).png
  • Exercise 4 - Registration, Membership, and Rides. In this exercise you will take advantage of the default membership mechanism included in the website template you used to create the site. This will allow you to determine if the current user has registered and logged into the site, or is an "anonymous" (unknown) visitor. Using this mechanism means that you can control which users can access specific pages. You will take advantage of this to add the feature where members can offer and accept rides to away matches. Along the way you will learn how the membership mechanism works, how you can change its behavior, how you log users into the site, and how you can enforce user permissions for specific pages and operations. You will also learn how you can modify the data held in the database as users interact with the site.
  • Hh145669.0abe49e3-59ae-4ac8-b6e9-57d8e2a558a2(en-us,VS.99).png
  • Exercise 5 - Roles and site administration. In this exercise you will create pages that allow visitors to enter and update information stored in your database tables. This is typically a vital requirement to allow the site to be updated remotely. You will build pages to add new data and edit existing data in a database. Along the way you will learn about roles, the differences between authentication and authorization, how to update data stored in database tables, and generally maintain the information used in a web site.
  • Hh145669.82aaf77a-114f-40e0-b046-52cc687f3166(en-us,VS.99).png

How Do I Set Up My Computer?

Before your start working with this guidance, you must download and install WebMatrix. You will use the Microsoft Web Platform Installer for this. It is a small program that you download and run on your computer. This program checks that you have all of the required prerequisite software correctly installed, and helps you to install any items that are missing. Then it downloads and installs WebMatrix for you.
To download and install WebMatrix:
  1. Open the URL http://www.microsoft.com/web/webmatrix in your web browser and click the Install WebMatrix button. This opens the Web Platform Installer page. Read the System requirements section to ensure that your computer is compatible with WebMatrix.
  2. Click the Install Now link. When prompted, click Run in the download dialog. You may see the screen darken and a dialog that asks for permission to run this file. Enter your administrator credentials if prompted, and then click Yes to allow the application to run.
  3. The Web Platform Installer dialog appears. Click the Install button. The Web Platform Installation dialog appears next, showing a list of the items that will be installed. You can click the View license terms link for each one to read the terms and conditions of use before you start the installation.
  4. Click the I Accept button. This starts the download and installation process. This may take a few minutes as there are likely to be several prerequisites to install in addition to WebMatrix.
  5. When the installation is complete, click Finish. WebMatrix will start automatically.
  6. Click the Close button at the right of the WebMatrix window title bar to close it. The Web Platform Installer dialog now shows a list of optional products and applications that you can install. These are all of the products that the Web Platform Installer can install for you. However, you do not require any of these at the moment, so just click the Exit button to close the Web Platform Installer.
Hh145669.note(en-us,VS.99).gifNote:
There is a host of information about WebMatrix available from the official Microsoft ASP.NET WebMatrix site at http://www.asp.net/WebMatrix, including videos and other resources to help you learn about WebMatrix and how you can use it to build web applications. A full description of the installation process for WebMatrix can be found at "Getting Started with WebMatrix and ASP.NET Web Pages" on the ASP.NET website at http://www.asp.net/webmatrix/tutorials/1-getting-started-with-webmatrix-and-asp-net-web-pages.

How Do I Install and Use the Code Examples?

The first step is to download and install the samples for this guidance. These contain start and end versions of the site for each exercise, and some resources that you will need as you build your site. You can obtain the examples from the [name?] website.
To install the sample files for this guidance:
  1. Download and unzip the following example code
  2. Open Windows Explorer and navigate to the folder where the unzipped files are.
  3. Refer to the next section below on how to open a WebMatrix project.
Each of the exercises for this guidance is contained in a separate subfolder within the main sample folder created by the previous procedure. Within each of the subfolders you will find the document that describes the exercise; and subfolders named Begin and End containing the start and final implementation of the solution for that exercise. You can open these solutions to see the results of each exercise if you wish, or if you have not completed all of the previous exercises. However, we encourage you to work through them all in order so that you understand how each one builds upon the earlier exercises.
Hh145669.note(en-us,VS.99).gifNote:
There is no Begin solution for Exercise 1 because you start with a WebMatrix default template.
This code is only intended to run in the WebMatrix tool, not in Visual Studio.
Each exercise subfolder also contains a Resources folder where you will find files such as images that you add to your solution as you work through the exercises. TheResources folder also contains new versions of the database that contains data for the application at each stage of development. This means that you do not have to manually enter the data yourself to see how the application uses this data.
l
Hh145669.note(en-us,VS.99).gifNote:
WebMatrix maintains an internal list of the website projects you open, and will not allow you to have two solutions with the same name. When you open a solution that has the same name as a solution you opened previously, WebMatrix appends a number to the end of the name. For this reason, each solution we provide has a name that reflects the exercise number and whether it is a "begin" or an "end" solution.

How Do I Open an Existing Website in WebMatrix?

As you work through the exercises, you will need to re-open the website you create. When you install WebMatrix, it adds an entry to the context menu in Windows Explorer that allows you to quickly open a website folder into WebMatrix. You can use this feature to open any of the example solutions we provide. Simply navigate to the root folder of the solution in Windows Explorer, right-click on it, and click Open as a Web Site with Microsoft WebMatrix (as shown in Figure 3).
Hh145669.c537c1b0-d0dc-4cc7-9eca-421cf6f16140(en-us,VS.99).png
Figure 3 
Opening a website folder into WebMatrix

How Do I Deploy My WebMatrix Website?

After your website is complete, you can deploy it using the features built into WebMatrix. You can also use WebMatrix to maintain and modify your site. Click the Sites option in the lower-left pane of WebMatrix to display a series of links that allow you to find a web hosting provider that supports ASP.NET and WebMatrix, and set up your application for remote publishing.
You can publish to a web host that supports the WebMatrix Web Deploy mechanism, or to a web host that supports only File Transfer Protocol (FTP) publishing. You can also download your entire site after publishing it, and republish it using WebMatrix.

2 comments:

  1. Hello!

    I would like if you can assist me.

    Where are the tutorials and the code example files located?

    Thanks

    Ray

    ReplyDelete
  2. Hello!

    I would like if you can assist me.

    Where are the tutorials and the code example files located?

    Thanks

    Ray

    ReplyDelete