Department of Information Technology Government Polytechnic for Girls, Surat Practical No: 01 AIM: OBJECTIVE: Learning Outcome: Getting acquainted with Visual Studio environment. It can be used to develop console application and graphical user interface application along with Windows form applications, Websites, Web applications and Web services. After this practical Students will be able learn: Installation and basic concepts of Visual studio and develop simple web page. Introduction to visual studio Microsoft visual studio is an integrated development environment (IDE) from Microsoft. It can be used to develop console and graphical user interface applications, and web services in both native code together with managed code for all platforms supported by Microsoft windows , windows phone ,windows CE ,.NET framework , .NET compact framework and Microsoft silver light .the latest version of visual studio is visual studio 2013 with framework v4.5.1(preview version ).Each version of visual studio is tied to a specific .NET framework. (Vs2008 is .NET 3.5, vs2005 is .NET 2.0, vs2003 is .NET 1.1) Integrated Development Environment(IDE) The visual studio product family shares a single integrated development environment (IDE) that is composed of several elements: The menu bar, standard toolbar, various tool windows docked or auto-hidden on the left, bottom , and right sides, as well as the editor space . The tool windows menus and toolbars available depend on the type of project or file you are working in. Figure 1 visual studio 2012 IDE Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Creating a new web project The first thing you do when you want to create a new application is to create a new project. You can create new project from file menu as shown in fig 2. Figure 2 create new project from file menu After selection of new project the “NEW PROJECT” window appears as shown below. Here you can select language you want to use to create web application. After selecting language, select web option in left pane, then select ASP.NET web application or ASP.NET empty web application in middle pane of new project window. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Figure 3 new project window In this window you will select an appropriate template based on what kind of application you want to create, and a name and a location for your project and solution. The most common applications are: Windows form application. Console application. WPF Application. ASP.NET web application. Silverlight application. You can also provide project location and name from this new project window. Opening an Existing Web Site You can open an existing website from the start page as shown in earlier figure 1.8. you can also open your existing web site by double clicking your project’s solution file .sln extension. Files that contain the .sln file extension are most commonly associated with the Microsoft Visual Studio software application. These SLN files contain information about the project environment and the state of the project when the SLN file was created. The SLN files that are created by the Microsoft Visual Studio software are stored in a text-based file format. When the Microsoft visual studio program opens a project file, the pre-solution and post-solution data for that file is read from the SLN file. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Building Web Sites In this part of the section, you will create a web site project and add a new page to it. You will also add HTML text and run the page in your web browser. Perform following steps to create a website. 1. Open Microsoft visual studio 2010 ultimate. Figure 4 default view of web page 1. On the file menu, click new web site. The new web site dialog box appears, as shown in fig 2. Under installed templates, click visual basic or c# and then select ASP.NET web site. When you create a website project, you specify a template. Each template creates a web project that contains different files and folders. 3. In the web location box, select file system, and then enter the name of the folder where you want to keep the pages of your web site. 4. Click OK. Visual studio creates a web project that includes prebuilt functionality for layout, as shown in fig 4. when a new page is created, by default visual studio displays the page in source view, where you can see page’s HTML elements. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Before running you project on web browser, you have to first build solution for your project. You can build solution for project from build menu build solution. After building solution of the project, you can run your project by pressing F5 function key or from debug menu of the visual studio IDE. Following figure shows the output of the default web application project provided by Visual Studio 2010 ultimate version. Figure 5 output of the default web application project Understanding IDE of VS 2010 Before you proceed with working on the page, it is useful to familiarize yourself with the visual studio development environment. The following illustration shows you the windows and tools that are available in visual studio 2010. Following are major components of visual studio IDE. Toolbars: Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in design view. Solution Explorer Window: Displays the files and folders in your web site. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Figure 6 solution explorer Document window/code window: Displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs. Properties window: Allow you to change settings for the page. HTML elements, controls, and other objects. Figure 7 property window Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat View tabs: Present you with different views of the same document. Design view is a nearWYSIWYG editing surface. Source view is the HTML editor for the page. Split view displays both the design view and the source view for the document. You will work with the design and source views later in this walkthrough. If you prefer to open web pages in design view, on the tools menu, click options, select the HTML designer node, and change the start pages in option. Toolbox: Provides controls and HTML elements that you can drag onto your page. Toolbox elements are grouped by common function. Figure 8 Toolbox Server Explorer/Database Explorer: Displays database connections. If server explorer is not visible, on the view menu, click server explorer or database explorer. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Figure 9 Server Explorer Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Installation of Visual Studio ultimate 2012 Let's look at the download process of Visual Studio IDE so that we can work with creating programs in the subsequent tutorials. Step:01 Go to the set up folder and double click on “vs_ultimate.exe” file. Agree on terms and conditions and click on “Next” button. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Step: 02 Select the required features from the list and click “Install” button. Web Programming Using ASP.NET(3351603) Department of Information Technology Government Polytechnic for Girls, Surat Step: 03.Setup will create “System Restore Point” before starting the installation process. Accept setup with yes once it’s done its start installation process. Step: 04 between setup will ask you to restart the system. Click on “Restart” button to restat your system. Step: 05 once setup is completed, you can launch Visual studio. Web Programming Using ASP.NET(3351603)