Web Development Laboratory - Microsoft Visual Studio 2010, Study notes of Approximation Algorithms

Download Web Development Laboratory - Microsoft Visual Studio 2010 and more Study notes Approximation Algorithms in PDF only on Docsity! Page 1 Hands-On Lab Web Development in Visual Studio 2010 Lab version: 1.0.0 Last updated: 12/10/2010 Page 2 CONTENTS OVERVIEW ............................................................................................................................................. 3 EXERCISE 1: USING HTML CODE SNIPPETS IN VISUAL STUDIO 2010 ............................................. 6 Task 1 – Adding a New ListView to an HTML Page Using an HTML Code Snippet .............................. 6 Task 2 – Creating a Custom HTML Snippet ..................................................................................... 10 Exercise 1: Verification 16 EXERCISE 2: TRANSFORMING A WEB.CONFIG FILE FOR DEPLOYMENT ...................................... 19 Task 1 – Creating a Staging Configuration in Visual Studio 2010 ..................................................... 19 Task 2 – Adding Code to Populate Text Value of EnvName from a Value in the web.config ............ 22 Task 3 – Adding a Logging Database Connection String to the web.config File ................................ 24 Task 4 – Writing a Transform to Change the Environment and Logging Connection Strings in the Staging web.config ......................................................................................................................... 25 Task 5 – Generating a Transformed web.config File from the Command Line ................................. 26 Task 6 – Generating a Transformed web.config File from Visual Studio .......................................... 28 Exercise 2: Verification 31 EXERCISE 3: PACKAGING AND DEPLOYING WEB APPLICATIONS FOR THE VISUAL STUDIO DEVELOPMENT WEB SERVER ........................................................................................................... 32 Task 1 – Opening the Project Properties Publish Page and Creating a Package. .............................. 32 Task 2 – Preparing the Web Server for Deployment ....................................................................... 34 Task 3 – Deploying the Package ..................................................................................................... 37 Exercise 3: Verification 42 EXERCISE 4: PACKAGING AND DEPLOYING WEB APPLICATIONS FOR INTERNET INFORMATION SERVER (IIS) ........................................................................................................................................ 43 Task 1 – Opening and the Project Properties Publish Page, Setting the Web Application to Use IIS and Create a Package. .................................................................................................................... 44 Task 2 –Deploying the Package ...................................................................................................... 46 Exercise 4: Verification 51 SUMMARY ............................................................................................................................................ 52 Page 5 Note: For each exercise, there is an End folder which contains the resulting solution you should obtain after completing that exercise. Note: User will perform appropriate name value replacement in all path references containing <Username> tag. Note: To verify that each step is correctly performed, it is recommended that you build the solution at the end of each task. Next Step Exercise 1: Using HTML Code Snippets in Visual Studio 2010 Page 6 Exercise 1: Using HTML Code Snippets in Visual Studio 2010 In this exercise, you will learn how to use HTML code snippets in Visual Studio 2010. You will also learn how to create your own custom HTML snippets. Task 1 – Adding a New ListView to an HTML Page Using an HTML Code Snippet In this task, you will open an existing ASP.NET web application and use a snippet to add a ListView control to an existing webpage. 1. Navigate to Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010. Select the File | Open | Project/Solution… menu command. In the Open Project dialog, navigate to \Source\Ex01-HTMLCodeSnippets\begin\C#\HTMLLab and select HTMLLab.sln file. 2. Open the Default.aspx file by double-clicking on the file in the Solution Explorer. Examine the code present on the page. Note that the page contains a GridView control with an ID of Products. Page 7 Figure 1 Existing Grid View control in Default.aspx 3. On the Default.aspx page, you will add a ListView control. Place the cursor after closing GridView tag (</asp:GridView>) and press the ENTER key. Press the “<” key to invoke the completion list. Page 10 By selecting the ASP.NET folder and pressing the TAB key, you will see a list of the ASP.NET specific snippets: You can abort this action by pressing the ESC key. Do not add any more controls to this page at this time. Task 2 – Creating a Custom HTML Snippet In this task, you will create a custom HTML snippet for use inside of the Visual Studio 2010 IDE. The new code snippet will create a label control with the preset default values. Any custom Snippets implemented are stored as XML files in a well-known directory. 1. In Visual Studio 2010 select File | New | File… from the menu to open the New File dialog. In the New File dialog select General from Categories, XML File from Templates and click Add. 2. To create the structure of the snippet you will use an existing snippet. In the XML file editor, press CTRL + K, CTRL + X to display the snippets list. Page 11 Figure 5 Snippets list 3. Select Snippet from the list. An XML code snippet will be inserted in the file. Figure 6 XML definition of a code snippet list Page 12 4. Supply the following values for the indicated XML elements: Field Value Title “Address Block” Shortcut “AddrBlock” Description “XML snippet to create a quick address block.” Snippet picker uses the Title value to display the name of the snippet. Completion list uses the Shortcut value to select the snippet. 5. Under the <SnippetTypes> node, delete the first <SnippetType> XML element containing the value SurroundsWith. Be sure to leave the <SnippetType> XML element that contains the value Expansion. 6. Delete the entire Declarations XML node. 7. Delete the Code XML node, including the CDATA value within it from the Snippet XML element. Delete the XML element at the top of the file. When finished with these steps, your snippet should look like this: XML <CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <Header> <Title>Address Block</Title> <Author>author</Author> <Shortcut>AddrBlock</Shortcut> <Description>XML Snippet to create a quick address block.</Description> <SnippetTypes> <SnippetType>Expansion</SnippetType> </SnippetTypes> </Header> <Snippet> </Snippet> </CodeSnippet> Note: The items removed from the snippet provide functionality that the snippet will not need. To learn more about the attributes of a snippet, refer to the following MSDN article: http://msdn.microsoft.com/en-us/library/ms171418.aspx. 8. In the Snippet element, add the following code (enclosing Snippet tags shown for guidance). XML Page 15 Figure 8 Add a code snippets folder 13. In the Code Snippet Directory dialog, navigate to the folder you created (C:\Users\<Username>\Documents\Snippets\) and click the Select Folder button. The Snippets folder appears in the list of snippet locations. Page 16 Figure 9 Snippets folder added to list of snippet locations Next Step Exercise 1: Verification Exercise 1: Verification You will verify that you can use the custom HTML snippet from Visual Studio 2010 and that the snippet renders the Label control correctly. 1. Open the source view of the Default.aspx page in the HTMLLab Web Application. 2. Place the cursor at the end of XML tag of the ListView with the Id Listview1 and press ENTER to create a new line. Page 17 3. Use the CTRL + K, CTRL + X shortcut to open the snippets list. Notice that the Snippets folder you included in the Code Snippets Manager is now also in the list. Figure 10 Snippets list with the Snippets folder included 4. Using the mouse or the down arrow, select Snippets from the list and press the TAB key to see the list of snippets available in that folder. Figure 11 List of snippets in the Snippets folder 5. Using the mouse or the down arrow key, select the Address Block snippet and press the TAB key. The snippet will expand and add your Address Book element to the page: Page 20 Figure 13 Configuration Manager 3. Select <New…> from the Active solution configuration dropdown list to bring up the New Solution Configuration dialog. Figure 14 New Solution Configuration 4. In the Name field type “Staging” and from the Copy setting from dropdown list box select Release. Leave the Create new project configurations checkbox checked. Your dialog should look similar to the figure below: Page 21 Figure 15 New Solution Configuration for the new Staging configuration 5. Click the OK button. Click the Close button to close the Configuration Manager. 6. In the Solution Explorer, notice that there is an expandable node next to the web.config file. Click the node to expand the tree view. Notice that there are two files under web.config that follow a web.<configuration>.config naming convention. Figure 16 Debug and Release configuration files The changes between the environments are stored in these delta files. By default, all web applications start with a Debug and Release configuration file. Visual Studio can add a new transformation for new configurations that developers create. Right click on the web.config and from the menu select Add Config Transforms. Notice that new Staging configuration file is automatically added: Page 22 Figure 17 Staging configuration added Note: If from the right-click menu the Add Config Transforms is disabled, do a full rebuild of the application. Task 2 – Adding Code to Populate Text Value of EnvName from a Value in the web.config Before we start this task you will need to add a label to the default.aspx page to contain an environment variable. Here’s what the label should look like when you are done. XML Current Environment: <asp:Label ID="EnvName" Text="Environment Name" runat="server" /> Figure 18 Label in Default.aspx Page 25 XML <connectionStrings> <add name="LoggingConnectionString" connectionString="server=(local);database=Logger;Integrated Security=SSPI;" providerName="System.Data.SqlClient"/> </connectionStrings> 3. Save web.config file changes. Task 4 – Writing a Transform to Change the Environment and Logging Connection Strings in the Staging Web.config In this task, you will create a transformation to update web.config sections when the application is deployed with MSDeploy. In the web.config file you will update the value of the Environment to “Staging” and change the server name value in the connection string to reflect QA server. 1. To display the configuration specific transformation files, click the plus sign next to the web.config file. Open Web.Staging.config. 2. The transform file is an XML file that you use to specify the actions (add, delete, update) which Visual Studio should perform on nodes, sections, and attributes. The file contains a reference to the XML Document Transform namespace (http://schemas.microsoft.com/XML-Document- Transform). There are two attributes in this schema: Transform and Locator. Transform will make changes to nodes and attributes, while the Locator provides methods to find the specific transformation node and attributes in the web.config. Note: Check MSDN for the complete reference for the Transform and Locator attributes. The Staging configuration transform file will already have a node indicating changes to the system.web section of the web.config file, specifically removing the debug attribute. XML <?xml version="1.0"?> <configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document- Transfrom"> ... <system.web> <compilation xdt:Transform="RemoveAttributes(debug)" /> </system.web> </configuration> Page 26 Below the system.web node, add the following code. XML <appSettings> <add key="EnvironmentName" value="Staging" xdt:Transform="SetAttributes(value)" xdt:Locator="Match(key)" /> </appSettings> When deployed, the transform above will instruct MSBuild process to locate the EnvironmentName node in the appSettings XML node and replace the value attribute with the one defined here: “Staging.” 3. Transform connection string XML in a similar matter by adding the following code: XML <connectionStrings> <add name="LoggingConnectionString" connectionString="Server=QADatabaseServer;Database=Logging;Integrated Security=SSPI" providerName="System.Data.SqlClient” xdt:Transform="Replace" xdt:Locator="Match(name)" /> </connectionStrings> In this code connectionString is transformed from using (local) server to the QADatabaseServer for logging. Note: xdt:Transform=”Replace” replaces the first matched node. xdt:Transform=”SetAttribute(attributeName)” creates or changes values of the existing attributes. Task 5 – Generating a Transformed Web.config File from the Command Line In this task, you will use the MSBuild command line tool to create a build and transform the web.config file based on the Staging configuration as part of the build process. 1. Navigate to Start | All Programs | Microsoft Visual Studio 2010 | Visual Studio Tools. To open the Visual Studio Command Prompt, click on Visual Studio 2010 Command Prompt. 2. Change directory to the HTMLLab project directory. For example, if you are still using the begin solution for Exercise 1, type: Page 27 cd %TrainingKitInstallFolder%\Labs\WebDevelopment\Source\Ex01- HTMLCodeSnippets\begin\C#\HTMLLab 3. At the command prompt, invoke MSBuild by typing: MSBuild HTMLLab.csproj /t:TransformWebConfig /p:Configuration=Staging , and hit ENTER. MSBuild builds the application and transforms the web.config file according to the Staging transform rules. The output files placed in the HTMLLab\obj\Staging\TransformWebConfig\ folder. Figure 20 MSBuild output Page 30 This is the directory where Visual Studio will create the package that contains the deployable image for the Web application, including the modified web.config file. 5. Using Windows Explorer, navigate to the HTMLLab\obj\Staging\TransformWebConfig folder. Delete the web.config file located there, if exists. 6. In Visual Studio, select the Project menu and click Package -> Build Deployment Package. Visual Studio will re-build and create a deployment package for the web application. Figure 24 Build Deployment Package Next Step Exercise 2: Verification Page 31 Exercise 2: Verification In order to verify that you have correctly performed all steps of the exercises, proceed as follows 1. In Visual Studio 2010 select File | Open | File from the menu to open File dialog. Navigate to the HTMLLab project directory and then to obj\Staging\TransformWebConfig folder. Select the web.config file and click Open. 2. Notice that in the web.config file the value for EnvironmentName has been changed to Staging. XML <appSettings> <add key="EnvironmentName" value="Staging" /> </appSettings> 3. Locate connection string in the web.config file and verify that the database server name has been updated to QADatabaseServer. XML <connectionStrings> <add name="LoggingConnectionString" connectionString="Server=QADatabaseServer;Database=Logger;Integrated Security=SSPI;" providerName="System.Data.SqlClient"/> </connectionStrings> 4. Close the web.config file. Next Step Exercise 3: Packaging and Deploying Web Applications for the Visual Studio Development Web Server Page 32 Exercise 3: Packaging and Deploying Web Applications for the Visual Studio Development Web Server Most web sites need a lot of artifacts and resources to function properly. Deploying all of these correctly is not a trivial task. Visual Studio 2010 contains a new feature which allows you to create a ZIP file called Web Package which is a self-describing entity containing all the assets and resources that should be deployed to the server by MSDeploy. In this exercise, you will use this new feature to deploy the web application to the VS Development Web Server. Note: To complete the tasks in this exercise, you must have completed all the tasks in Exercise 2, or use the solution from the %TrainingKitInstallFolder%\Labs\WebDevelopment\Source\Ex03- PackageDeployDevServer\begin\C#\HTMLLab folder. Task 1 – Opening the Project Properties Publish Page and Creating a Package. In this task, you will open the product properties page and examine some of the features and settings available. 1. Open project property pages by right clicking the HTMLLab project and selecting Properties from the menu. Click the Package/Publish Web tab. 2. Verify that the active build configuration is set to Staging from the build option menu. Figure 25 Verifying the Active Build Configuration 3. Select the Create web package as a ZIP file option, if it is not already selected. Note the path in Package Location. This is where the package will be placed after it is built. Page 35 2. Browse to Start | All Programs | Accessories, and click run. In the run box type: “inetmgr” and press ENTER to bring up Internet Information Services Manager. 3. In the Connections pane, located on the left, expand the node for the local machine. Within that node, expand the node for Sites. You should now see a list of web sites: Figure 29 List of local web sites 4. Right-click the Default Web Site and select Add Application. 5. In the Add Application dialog set the Alias to HTMLWebApp, and the Physical path to C:\HTMLWebApp. Take note of the Physical path as you will be deploying the package there. Click the OK button to close the dialog. Figure 30 List of local web sites Page 36 6. In IIS Manager, right-click the HTMLWebApp Web Application and select Manage Application | Advanced Settings from the menu. The Advanced Settings dialog will be displayed. Figure 31 Web application Advanced Settings Note that the Application Pool is set to DefaultAppPool. 7. Click Application Pool, and then click the glyph next to the DefaultAppPool to bring up the Select Application Pool dialog. Figure 32 Select Application Pool 8. Using the dropdown list box labeled Application pool select ASP.NET v4.0. Click OK to close the Select Application Pool dialog. Click OK to close the Advanced Settings dialog. Page 37 Note: Watch Out If IIS was not enabled during the Visual Studio 2010 installation you may need to install ASP.NET into IIS by running the following command from an Administrator Visual Studio 2010 command prompt aspnet_regiis.exe -iru If you do not see a Deploy menu option it could mean that IIS Web Deployment Tool is not installed or may need to be reconfigured. To fix this you should do the following Download the IIS Web Deployment tool from http://www.iis.net/extensions/WebDeploymentTool Start the setup If setup shows you the change /repair / remove screen, select change and install the IIS Manager UI module Task 3 – Deploying the Package In this task, you will deploy the package to the web application created in the previous task. 1. To deploy the package to the earlier specified physical location, you will need to change the HTMLLab.SetParameters.xml file. In Windows Explorer select the HTMLLab.SetParameters.xml file and open it with Visual Studio. The current file content should appear similar to the following. XML <?xml version="1.0" encoding="utf-8"?> <parameters> <setParameter name="IIS Web Application Name" value="Default Web Site/HTMLLab_deploy" /> <setParameter name="ConnectionString LoggingConnectionString" value="Server=QADatabaseServer;Database=Logging;Integrated Security=SSPI" /> </parameters> Replace the ISS Web Application Name element with the following: XML <setParameter name="IIS Web Application Name" value=" Default Web Site/HTMLWebApp" /> Page 40 MSDeploy has added five additional files to the specified location. 7. Execute the deployment by re-running this HTMLLab.deploy.cmd batch file. In this instance remove the /t (trail) flag and replace it with the /y (for Yes) flag by typing: "%TrainingKitInstallFolder%\Labs\WebDevelopment\Source\Ex01- HTMLCodeSnippets\begin\C#\HTMLLab\obj\Staging\Package\HTMLLab.deploy.cmd" /y Figure 35 Executing the deployment command batch file in Yes mode 8. Examine the output of the deployment. Page 41 Figure 36 Executing the deployment command batch file in Yes mode MSBuild has deployed the package to the specified physical location. Figure 37 Deployed web application package Next Step Exercise 3: Verification Page 42 Exercise 3: Verification In this verification, you will validate successful deployment of the web application. 1. In IIS Manager, right click on the HTMLWebApp Web Application and select Switch to Content View from the menu. The content view for the HTMLWebApp appears. Figure 38 HTMLWebApp contents view 2. Right-click the Default.aspx file, and select Browse from the menu. 3. Verify that the Default.aspx page for the HTMLWebApp loads. Page 45 Figure 41 IIS settings is enabled Checking this box ensures that all of the IIS settings for your web application are packaged by MSBuild. 7. Check the Include all the IIS settings for this web project as configured in IIS Manager checkbox and the Include Application Pool settings. 8. Check the Create web package as a ZIP file checkbox. Note the path in the Package Location textbox. This is where the build process will create the package. 9. Set C:\HTMLLab\ as Destination Application Physical Path Figure 42 Create package as ZIP file and output path 10. Make sure that the active configuration is set to Staging and select the Project menu and click Package -> Build Deployment Package. In the Output window observe that the build and publish process succeeded. Page 46 Figure 43 Successful build and publish 11. Using Windows Explorer, navigate to the relative path in the Package Location textbox referenced above. For example, if you are still using the HTMLLab project from exercise one, navigate to the %TrainingKitInstallFolder%\Labs\WebDevelopment\Source\Ex01- HTMLCodeSnippets\begin\C#\HTMLLab\obj folder. 12. Note that a folder for the selected configuration (Staging) has been created. Double click on it. Within that folder, a new folder Package is created. Double click on Package folder to open it. Figure 44 Packaged web application Note that this folder contains the same items as in the previous exercise. Task 2 –Deploying the Package In this task, you will deploy the package to the web application created in the previous task. Page 47 1. Navigate to Start | All Programs | Accessories and click run. In the run box type: “inetmgr” and click OK to bring up Internet Information Services Manager. 2. In the Connections tree view on the left, expand the node for the local machine. Within that node, expand the node for sites. Figure 45 List of local web sites 3. Expand the Default Web Site Node. Verify that the HTMLLab Web Application is listed (this was created when you clicked the Create Virtual Directory button in the previous task.) Figure 46 HTMLLab virtual directory created 4. Next you will deploy the application in Trial mode. Note: Trial or What If mode does not actually perform the deployment, but shows you what will happen if you install the package. This is very useful in situations where you are handing off your package to a deployment team or server administrator. The team or administrator can then run the package in Trial mode to see the impact on the server. Page 50 Figure 49 Executing the deployment command batch file in Yes mode 9. Examine the output of the deployment. Figure 50 Executing the deployment command batch file in Yes mode Page 51 MSBuild deployed the package to the specified physical location. Next Step Exercise 4: Verification Exercise 4: Verification In this verification, you will verify the successful deployment of the web. 1. In IIS Manager, select Default Web Site and click Refresh in the Actions pane on the right of the window. 2. You should now see an HTMLLab_deploy directory under Default Web Site. 3. Right click on the HTMLLab_deploy application and select Switch to Content View from the menu. The content view for the HTMLLab_deploy application should now be visible: Figure 51 HTMLLab contents view 4. Right click the Default.aspx file and select Browse from the menu. 5. Verify that the default page for the HTMLLab_deploy application appears. Page 52 Figure 52 Deployed web application Next Step Summary Summary