Ahmad+Bilal

=toc= =SSE 698 Professional Seminar - Web Development=
 * Student:** Bilal Ahmad
 * Project :** 2
 * Reference:** __Beginning ASP.NET 3.5 In C# and VB__ by Imar Spaanjaars

= = =**Chapter 1 Getting Started with ASP.NET 3.5**=
 * Overview:** This course is very important for software engineers since technologies are changing constantly and the need to have a strong understanding of ASP.NET can provide engineers with the ability to hand web pages more securely and efficiently. The focus is on building ASP.NET web site, designing web pages, discussing types of controls and programming the ASP.NET web pages. The following chapters 1 to 5 will be covered to develop skills necessary for project 3.


 * Objective:** When a web address is typed into the web browser and the user press Enter, the browser sends a request to the web server at that address which is done through HTTP, the HyperText Transfer Protocol. HTTP is the protocol by which web browsers and web servers communicate. When the address is sent, the request goes to the server where the server accepts the request if it’s valid and it then sends the response back to the client browser.

=Example1= The following example contain ASP.NET Web page for the organization which facilitate employees in doing survey about the organization and allow management to view those comments on the web page. One of the benefits of building a web page for the organization is that it can be utilize in writing defects, writing comments about the status of current projects and it can be helpful when doing final reviews on the project.


 * Figure1-1 Organization Survey **

HTML language is utilized for creating web page and the angle brackets also called tags indicate how content should be displayed in the browser. The angle brackets are referred to as tags; a pair of tags holding some text is referred to as an element and in the example above, element is an opening tag and is a closing tag. This element signifies a heading at level one and any text between these opening and closing tags is displayed as a heading. The following figure 1-2 shows the code under source option with headers, , and etc:


 * Figure 1-2 Markup view **

In split view, Design View and Markup View can be observed at the same time as shown in figure 1-3:


 * Figure 1-3 Split View (Email Link added) **

The following code for Email link button link to external page for the user so they can further send feedback through their email.
 * Under Survey.aspx.cs**

protected void LinkButton1_Click( object sender, EventArgs e) { string link = "www.hotmail.com" ; System.Diagnostics. Process .Start(link); }

There are many tags available in HTML and the following list provides some of the tags that are utilized often in creating web pages.


 * **Tag** || **Description** || **Example** ||
 * || Used to denote the start and end of the entire page. || All other content goes here ||
 * || Used to start a special section of the page that contains data about the page, including its title. || Welcome to my site  ||
 * || Used for input forms that allow users of a website to submit information to the server ||  ||
 * || Used to embed images in a page ||  ||
 * || Used to denote the start and end of the body of the page || Page body goes here ||
 * Figure 1-3 Some HTML Elements **
 * Figure 1-3 Some HTML Elements **
 * Figure 1-3 Some HTML Elements **

Customizing the toolbox can assist in locating various tools when creating complex programs and tools can be deleted, modified or new tools can be added. The following figure1-4 shows a new category called HTML Fragments is added in tool box and under this category heading 1, 2,3 are added with each heading corresponds to the heading level.
 * Customizing the Toolbox**


 * Figure1-4: HTML Fragments added **

Heading 1 for example contains between the opening and closing as shown below: When different headings are required in a document in markup view, they can be selected easily from the toolbar and they can be placed anywhere in the document window.

=**Summary**= The focus of this chapter is to build and design a single web page with HTML and server controls, and further manage all the tools and windows that Visual Web Developer offers. HTML is understood by every web browser that exists and it uses the angle brackets to indicate how content should be displayed in the browser. The angle brackets are referred to as tags where a pair of tags holding some text is referred to as an element. This chapter provides a lot of ground to get started with ASP.NET 3.5 and VWD and it is important to understand how the page is processed to deliver the final HTML in the browser.

=**Chapter 2 Building an ASP.NET Web Site**=
 * Objective:** This chapter introduces important topics that can help in building maintainable and structured ASP.NET web applications. Web sites utilize web pages with Code Behind or with inline code and they both don’t impact the entire site. As programs get complex, it is important to arrange files into appropriate folder; an important part of any web site are the links that connect the pages in the site which allows the visitors to go from one page to another. The following example will organize the files, connect pages and add tables and other markup for the organization.

=__Example 2-1__= The automotive industry would like to recognize their employee’s contribution for ever six months and maintain a website with employee’s names on them. This example will create folders for sales and design departments and add tables to the pages using the table menu. Moreover, the links are added to connect pages so that visitors can go from one page to another in the same site by using HTML  element.


 * Figure 2-1 Automotive Industry website **

The solution explorer contains two folders of sales and design department in which web page is added along with table menu; under sale department folder, two web pages are added since they both provide customer service. Figure 2-2 shows the solution explorer organized appropriately in which sales department include web pages.

When the first link is selected by the visitor, the page goes to Sales.aspx which includes the name of the employees in a table format. The following figure 2-3 shows the design view of the sales department below:
 * Figure 2-2 Solution Explorer **
 * Figure 2-3: Sales.aspx include Table menu **

A page can be assigned as the start page by right-clicking it in the solution explorer and choosing set as start page option. This is useful since when the page is view in the browser, it can start with the appropriate page and in this example it will browse the homepage of automotive industry. The following figure 2-4 shows the start options with a default.aspx page selected:


 * Figure 2-4 Start Options **

The following figure 2-5 shows the page in browser where notice (write comments) is highlighted with a red color and it include three links along with a text box for submitting comments to the organization:

Using the formatting toolbar buttons, like foreground color, VWD inserts the appropriate HTML and CSS code and in this case #FF3300 code is inserted in markup view which corresponds to red color. When visitor select another link to go to the service department web page, the current page connects to an appropriate page as shown below: =**Summary**= This chapter introduces some important topics that can facilitate in building maintainable and structured ASP.NET web applications. Since each file type serves a specific purpose, it’s important to realize what that purpose is. It is important to decide whether to build web pages with code behind or with inline code since it can be hard to work with inline code and in that case it is easy to add pages with code behind option instead. It is very important to know how to add markup to the page using the numerous menu options and toolbars since markup can be in HTML or ASP.NET server controls. Connecting pages can also make the website easier to follow and although there are many ways to connect pages, in this chapter the HTML  element is used instead.
 * Figure 2-5 Automotive industry homepage **

=**Chapter 3 Designing Your Web Pages**= =__Example3-1__= The following example will utilize CSS to change appearance of a header and other texts for the organization survey.
 * Objective:** The pages created in previous examples were plain since they lack styling information and default to the standard layout that the browser utilizes. The focus of this chapter is to introduce Cascading Style Sheets (CSS) language which facilitate in formatting and designing information on the web including ASP.NET web pages. CSS can change the appearance of the web pages and it offers a rich set of options to change every aspect of the web page including fonts, colors and background colors, etc.



**
 * Figure 3-1 Uses CSS language

The code is written in markup view and some style is being added to the section of the page. The tag is used to wrap a style sheet which is embedded in the page with its type attribute set to text/ css. A rule set between the curly brackets defines the appearance for all elements in the page and the h1 also called selector maps directly to an HTML element. The code is shown below in figure 3-2.



Properties are the part of the element that are applied with style sheet and the following table lists some of the common CSS properties and describe its uses.
 * Figure 3-2 CSS code**

=__Example 3-2__= The following example will use Style.css file from the Styles folder to change the size and location of the elements and the style sheet will be added to the page. The style information is applied when the page is viewed again in a browser. Once style.css is completed, it is then copied directly over the header section in design view. The following result shows the survey in a browser with style sheet added to the page.



The style Builder facilitate in selecting CSS properties and in changing their values. The universal selector is indicated by an asterisk and it applies to all elements in the page. The type selector such as h1 points to a specific HTML element where all HTML elements of that type will be styled appropriately. The following figure 3-4 shows the code in Styles.css file from the Styles folder created for changing the size and location of these elements:
 * Figure 3-4: Styles.css file **

The style sheet is linked in the head of the page to notify the browser which tells the browser to look in Styles folder for a file called Styles.css and apply all rules in that file to the current document. < link href ="../Styles/Styles.css" rel ="stylesheet" type ="text/css" /> The following figure shows the Style builder which is very useful in selecting CSS properties and it also allow the values to be changed: When working with a page in design view, sometimes minor changes might make a difference such as, applying a border to an element or styling a piece of text. VWD can facilitate in creating an inline, an embedded or an external style sheet. =__Example 3-3__= The following example shows inline and embedded style sheets created on the organization survey where an additional line will be added with a different look to make it stand out from other paragraphs.
 * Figure 3-5: Style Builder**



In the figure above notice a new line is added above the organization survey and it is in different font than the rest of the survey. The following figure 3-7 shows the new style dialog box where to give each browser the same setting, the padding is reset to 0 and the top, right and left are also set to 0. The bottom text box is set to 10; the following code gets added under page wrapper in markup view as shown below:



Using the CSS properties, the color can be selected for the new line and in this case the dark blue color is used to display the line. The embedded style sheet code gets added in the section under markup view as shown below:
 * Figure 3-7: New Style dialog box with padding and margin settings **

=**Summary**= The focus of this chapter is to introduce Cascading Style Sheets (CSS) language which facilitate in formatting and designing information on the web including ASP.NET web pages. CSS over comes the limitations of HTML with respect to styling web pages and it provide control over the looks of the page. It is important to understand the terminology such as, a rule set which is a combination of a selector. The organization survey takes advantage of CSS and other style sheet such as embedded and an inline style sheet which was created easily. Moreover, CSS properties list is used to select the color for the new line added in the organization survey.

=**Chapter 4 & 5: Working and Programming with ASP.NET Controls**=
 * Objective:** These chapters focus on working with controls which consist of ASP.NET server controls and how server controls are able to maintain their state post back. Although many smart server controls are available, but it is important to be able to code appropriately to make the programs more meaningful such as building a web based calculator.

=Example4-1= The following example adds a calendar and other controls on the page. These controls demonstrate inner workings of ASP.NET including postbacks which can be useful in programs when modifications to the web page are necessary.



The button can be programmed to display the current day by replacing the label on the browser. The postback button’s enable view state is set to false which will replace the day with label. The HTML element is used to allow a user to submit information from the browser where a user can enter information using controls like text boxes, check boxes and so on. When a control post back button is clicked, it causes post back to the server and during this postback, all the important information is sent back to the server to rebuild the page. The following figure 4-2 shows the result when a visitor clicks on Date Option button:







=Example 5-1= The following example will obtain employees number of hours for one week through text box and it will give calculate and provide the average hour’s employee worked in a week. This program shows the benefit of adding code in a button using C#. As program gets more complex, the coding can facilitate in providing accurate and meaningful results.

Now the visitor adds number of hours in the site and when take average button is pressed, it shows the average instead of label as shown below:
 * Figure 5-1: Perform Calculation **

The main code is under the Take Average button as shown below:
 * Figure 5-2: Provides the average of one week hours **

=**Summary**= These chapters are geared toward programming the pages within the .Net Framework. Programming can get really complex, but to able to write applications, each programming language defines data types. Beside data types, statements are another important part of a programming language. Utilizing functions and subroutines can also make code easier to maintain. The tools in chapter 4 makes the program easier to maintain and can facilitate in developing better websites. The standard category of the Toolbox contains the controls like button, drop down list, label and hyperlink. These controls allow users to enter data in variety of ways and all this information can then be submitted to the server.