Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web-Based Applications

Similar presentations


Presentation on theme: "Web-Based Applications"— Presentation transcript:

1 Web-Based Applications
14 Web-Based Applications C# Programming: From Problem Analysis to Program Design 2nd Edition C# Programming: From Problem Analysis to Program Design

2 Chapter Objectives Discover how Web-based applications differ from Windows applications Use ASP.NET to create Web applications Develop and configure Web Forms pages Learn about different types of controls that can be added to Web applications Add HTML and Web Forms server controls to Web applications C# Programming: From Problem Analysis to Program Design

3 Chapter Objectives (continued)
Add validation, custom, and composite controls to verify user input, display calendars, and connect to database tables Become aware of Web Services and their implications for distributed applications Learn how mobile applications are developed using the Compact Framework (optional) C# Programming: From Problem Analysis to Program Design

4 Web-Based Applications
Runs within an Internet browser Collection of one or more related files or components stored on a server Web server is software that hosts or delivers Web application Hardware at location where Web server software is loaded is often called a Web server It is the software that makes the equipment special and thus enables the computer to be called a server C# Programming: From Problem Analysis to Program Design

5 Web Programming Model MessageBox dialog boxes are not used with Web applications Output would be displayed on the server Output displayed through Label or other objects on Web page Each request to view a Web page requires round trip to the server Requests page via Hypertext Transfer Protocol (HTTP) Page sent back as Hypertext Markup Language (HTML) document C# Programming: From Problem Analysis to Program Design

6 Web Programming Model (continued)
Page is rendered – converted from HTML upon return to the browser Every postback trip to the server creates new object Causes Web pages to be stateless Pages do not retain their values from one trip to the Web server to the next C# Programming: From Problem Analysis to Program Design

7 Static Pages Client-side application
Provide no interaction with the user Does not require any processing on the client computer or by a Web server Precreated pages residing on the server's hard drive Delivered as HTML documents HTML file contains formatting markup tags C# Programming: From Problem Analysis to Program Design

8 Dynamic Pages Involve processing in addition to rendering the formatting HTML tags One programming model is to use traditional or classic Active Server Pages (ASP) Includes script code in the HTML file – client-side scripts Server-side scripts require processing to be done at the server level before page is delivered VBScript and JavaScript – scripting languages C# Programming: From Problem Analysis to Program Design

9 Dynamic Pages (continued)
Figure 14-2 Server-side processing of a dynamic Web page C# Programming: From Problem Analysis to Program Design

10 ASP.NET Newer model for Web development
Does not require writing code in a separate scripting language Includes a number of classes as part of the .NET Framework To identify an ASP from an ASP.NET Web application, look at file extensions ASP Web page ends with an .asp file extension ASP.NET Web page ends with an .aspx file extension C# Programming: From Problem Analysis to Program Design

11 ASP.NET (continued) Two options for developing ASP.NET applications
Use the new ASP.NET Development Server Available with Visual Studio 2005 and Visual Web Developer Preferred option for developing and testing applications from a directory on a local machine Second option: use Microsoft Internet Information Services (IIS) C# Programming: From Problem Analysis to Program Design

12 Visual Web Developer New product as part of Express line
Includes built-in ASP.NET development server WYSIWYG – drag-and-drop approach to design Includes features to publish applications Includes option to create a File-system Web site Store and run your Web application in any directory on your local machine Get same functionality included as part of Visual Studio 2005 C# Programming: From Problem Analysis to Program Design

13 IIS option To use this option, Microsoft Internet Information Services (IIS) must be installed IIS provides software tools for managing Web server IIS requires a server-like operating system IIS component should be installed before loading the .NET Framework C# Programming: From Problem Analysis to Program Design

14 ASP.NET – IIS Figure 14-3 Verifying installation of IIS
Install IIS first To develop ASP.NET applications using IIS, you must also have administrative debugging privileges Figure 14-3 Verifying installation of IIS C# Programming: From Problem Analysis to Program Design

15 Virtual Directories IIS assigns virtual name to directory that stores Web application Virtual name becomes part of the Web site's address Not a one-to-one correspondence between virtual name and actual physical location IIS manages mapping You can manually create virtual directories C# Programming: From Problem Analysis to Program Design

16 Virtual Directories (continued)
Figure 14-4 Manually creating a virtual directory C# Programming: From Problem Analysis to Program Design

17 StaticPage Virtual Directory
Physical location of ExampleHTML.htm Figure 14-5 Location of ExampleHTML.htm C# Programming: From Problem Analysis to Program Design

18 StaticPage Virtual Directory (continued)
StaticPage is the virtual name assigned using IIS Figure 14-6 File accessed using a virtual filename C# Programming: From Problem Analysis to Program Design

19 Web Forms Page System.Web.UI namespace
Namespace includes Control class, inherited by the HTMLControl and WebControl classes Namespace also includes Page class Web applications designed with event-driven model, but there are fewer events Web Forms page instead of Windows Forms Build an ASP.NET Web application; two separate files are created C# Programming: From Problem Analysis to Program Design

20 Web Forms Page (continued)
Web Forms page file Stores visual elements Container file from which the controls are displayed Contains static HTML tags Code-behind file Where the programming logic resides Stores event-handler methods C# Programming: From Problem Analysis to Program Design

21 Creating a Web Page Using IIS
By default, projects are created at when HTTP is selected Figure 14-7 Web application template for ASP.NET C# Programming: From Problem Analysis to Program Design

22 Creating a Web Page Using IIS (continued)
Files are physically stored at default home directory, C:\InetPub\wwwroot Figure 14-8 Virtual directory for DynamicWebSite C# Programming: From Problem Analysis to Program Design

23 Creating a Web Page Using IIS (continued)
Two solution files (same name as project, but end with .sln and .suo) stored at location configured to store all projects Figure 14-9 Physical location of DynamicWebSite solution files C# Programming: From Problem Analysis to Program Design

24 Creating a Web Page Using File System
Unlike sites created with IIS, you can select any directory location on local machine Files are not stored at localhost (c:\Inetpub\wwwroot) Create Web page using File > New > Web Site instead of File > New > Project Open existing Web page File > Open > Web Site C# Programming: From Problem Analysis to Program Design

25 Creating a Web Page Using File System (continued)
Selecting File System option enables you to specify where the Web site files are stored on your local machine Figure Opening an existing Web site C# Programming: From Problem Analysis to Program Design

26 Web Page File ending in .aspx holds the HTML tags
View and directly edit the HTML source Tags are automatically inserted for head, title, body, form, and div First two lines in the .aspx markup file are called page directives Page directives are delimited with and %> Language is identified and CodeFile name is listed AutoEventWireup attribute set to true Event handler methods in the class are used C# Programming: From Problem Analysis to Program Design

27 Web Page (continued) Figure 14-11 Web Application HTML document
Selected.aspx tab Figure Web Application HTML document C# Programming: From Problem Analysis to Program Design

28 Code-Behind File Initially looks similar to Windows applications, but it is different No Main( ) method Page_Load( ) event handler Contains many namespaces imported automatically Can debug and execute Web application from within the IDE Default Web browser is launched C# Programming: From Problem Analysis to Program Design

29 Code-Behind File (continued)
Auto-generated code not created for ASP.NET 2.0 applications until you run the application No hidden .designer.cs file as with Windows apps Default.aspx created and automatically opened in Source view when you first start building a Web site App_Data folder is automatically created Reserved for storing data files C# Programming: From Problem Analysis to Program Design

30 Code-Behind File (continued)
Selected.aspx.cs tab Figure Code-behind file C# Programming: From Problem Analysis to Program Design

31 HTML Document File Page object properties – fewer (and named differently) than available Windows Form object C# Programming: From Problem Analysis to Program Design

32 Controls HTML HTML server WebParts Validation Navigation Login Data
Crystal Reports C# Programming: From Problem Analysis to Program Design

33 Controls (continued) Beginning with Visual Studio 2005, see Toolbox controls in both Design and Source mode Drag and drop controls onto the .aspx Source (HTML) markup page as easily as you drop it on Design page Several different types of controls available in Toolbox Most Web Forms controls you will be using are stored under the Standard node on the Toolbox C# Programming: From Problem Analysis to Program Design

34 HTML Controls Client side controls
Can be added to your page using a WYSIWYG drag-and-drop approach Limited number of HTML controls – even fewer with Visual Studio 2005 Figure HTML controls C# Programming: From Problem Analysis to Program Design

35 HTML Controls (continued)
HTML controls do not maintain state Values in text boxes lost when Submit clicked Figure Submit button clicked C# Programming: From Problem Analysis to Program Design

36 Running HTML Controls as Server Controls
Right-click on the HTML control Appends runat="server“ to the HTML tag of the control Figure Converting an HTML control to HTML server control C# Programming: From Problem Analysis to Program Design

37 Server Control Events private void btnSubmit_ServerClick(object sender, EventArgs e) { this.lblResult.Text = "Thanks!! " + this.txtFirst.Value + " " + this.txtLast.Value + " Information will be forwarded to: " + this.txt .Value; } Text property used with Label Value property used with Text Field C# Programming: From Problem Analysis to Program Design

38 Server Control Events (continued)
Number in address bar following localhost (as the port number) is a relatively random number, placed there when you specify the Location as File System Figure Web page after postback C# Programming: From Problem Analysis to Program Design

39 Web Forms Server Controls
Can mix and match HTML and Standard controls on your page Web Forms Server Controls referred to as Standard controls Also referred to as Web Server controls, Web controls, ASP server controls, or simply Web Forms controls C# Programming: From Problem Analysis to Program Design

40 Web Forms Server Controls (continued)
Standard Controls have more built-in features than HTML controls Look and act like their Windows counterparts (Fewer controls & fewer events to program) Use object-oriented model Web Forms controls do not map straight to HTML Often it may take several HTML tags to represent one Web Forms control C# Programming: From Problem Analysis to Program Design

41 Web Forms Server Controls (continued)
Figure Web Forms server standard controls C# Programming: From Problem Analysis to Program Design

42 Web Forms Server Controls (continued)
Visual Studio prefixes the control name with <asp:control and ends the tag with /asp:control> Also runat= "server " appended <asp:control attributes runat="server " /asp:control> Stored in HTML document – file ending with .aspx extension C# Programming: From Problem Analysis to Program Design

43 Web Forms Server Controls (continued)
Fewer properties found with Web Forms types of controls than you find with their Windows Forms counterparts Control’s properties, like Windows apps, can be set using the Properties window in Visual Studio Settings (visual) are stored in the HTML document – the file ending with the .aspx extension C# Programming: From Problem Analysis to Program Design

44 Events and Controls Comparison of Windows Forms button with Web Forms Standard button control object Windows Forms button control: 50 properties Web Forms Standard button control: 26 properties Web Forms Standard button control: 8 events Windows Forms button: 58 events C# Programming: From Problem Analysis to Program Design

45 ASP.NET 2.0 Changes With ASP.NET 2.0, you do not need to define and instantiate control variables Will not find special auto-generated section that holds control variable declarations (like previous versions) ASP.NET runtime automatically inserts the required declaration and event wiring code into the final compiled file Runtime creates another partial class dynamically from the .aspx page and merges it with the code behind partial class C# Programming: From Problem Analysis to Program Design

46 Web Forms Server Controls Events
By default, only a few events trigger postback to the server Buttons click, events do Changes in selections to ListBox, RadioButton, RadioButtonList, CheckBox, CheckBoxList, and DropDownList do not AutoPostBack property can be set to true to automatically trigger a postback to the server Be judicious with changes to AutoPostBack property C# Programming: From Problem Analysis to Program Design

47 Label, Button, RadioButton, ListBox Objects
Figure Web site after adding server controls C# Programming: From Problem Analysis to Program Design

48 Wiring Event-Handler Methods
All three radio buttons wired to the same event-handler method Figure Wiring the same event to three RadioButton objects C# Programming: From Problem Analysis to Program Design

49 RadioButton Event-Handler Method
private void radioButton_CheckedChanged(object sender, System.EventArgs e) { if (this.radBtnFresSop.Checked) this.lblClassif.Text = "Freshmen & Sophomores "; } else if (this.radBtnJrSr.Checked) // More statements C# Programming: From Problem Analysis to Program Design

50 Button Event-Handler Method (continued)
private void btnSubmit_Click(object sender, System.EventArgs e) { this.lblSubmit.Text = "Thanks " + this.txtBxFname.Text + "! You will be contacted... "; if (lstBxInterests.SelectedIndex > -1) this.lblSubmit.Text += " to discuss joining" + " the \"" + this.lstBxInterests.SelectedItem.Text + "\" team."; } Retrieve values from TextBox and selections from ListBox Retrieve from TextBox and selections from ListBox C# Programming: From Problem Analysis to Program Design

51 Validation, Custom, and Composite Controls
C# Programming: From Problem Analysis to Program Design

52 Validation Controls Treat validation control objects like any other control Properties ControlToValidate Tie the validation control to a specific form control object ErrorMessage Set to the message you want displayed when the input control does not pass the validation C# Programming: From Problem Analysis to Program Design

53 Validation Controls (continued)
RequiredField-Validator control is placed beside the object it is validating Figure Adding a RequiredFieldValidator control C# Programming: From Problem Analysis to Program Design

54 Page Validation Every control field on the page that has an associated validation control is checked when the page is posted CausesValidation property of Button(s) can be set to false By default, every Button object's CausesValidation property is set to true C# Programming: From Problem Analysis to Program Design

55 Calendar Control Display calendar months on a Web page Properties
Calendar is live Can view and select dates Properties SelectedDate Used to pick the month, day, and year for display Initially set to the current date; date can be set programmatically Customize with gridlines, borders; change font, background, foreground colors; set cell padding and spacing C# Programming: From Problem Analysis to Program Design

56 Calendar Control (continued)
Click here to view “code behind” file Current selection (.aspx file) Use Page_Load( ) event-handler method to set the date with program statements Click here to view HTML tags Current design view Figure Switching between .aspx and .aspx.cs files C# Programming: From Problem Analysis to Program Design

57 Calendar Control (continued)
C# Programming: From Problem Analysis to Program Design

58 Calendar Control (continued)
C# Programming: From Problem Analysis to Program Design

59 Using a Calendar Control in Applications
private void btnShowCalendar_Click(object sender, System.EventArgs e) { Calendar1.SelectedDates.Clear( ); meetingDate = new DateTime (DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 8,0,0); meetingDate = meetingDate.AddDays(7); if (meetingDate.DayOfWeek.ToString() == "Sunday") meetingDate = meetingDate.AddDays(1); } C# Programming: From Problem Analysis to Program Design

60 Using a Calendar Control in Applications (continued)
Calendar1.SelectedDate = meetingDate; this.lblMsg.Text = ("Meeting " + "next week: " meetingDate.DayOfWeek + ", " + meetingDate.Month + "/" + meetingDate.Day + " at " + meetingDate.Hour + " P.M."); } // end of btnShowCalendar_Click ( ) method C# Programming: From Problem Analysis to Program Design

61 Calendar Control (continued)
Displayed date Figure Calendar showing different dates selected C# Programming: From Problem Analysis to Program Design

62 DataGrid and GridView Controls
Display data in a tabular format Can bind data to a data source, such as a database Common data source classes used to bind DataGrid objects to the actual data DataReader DataSet C# Programming: From Problem Analysis to Program Design

63 GridView Control New with .NET 2.0 GridView features
GridView is a little more sophisticated than DataGrid GridView features Automatic data binding Auto-generation of buttons for selecting, editing, and deleting Automatic sorting Automatic paging C# Programming: From Problem Analysis to Program Design

64 Using a DataGrid Control in Applications
Use OleDB Data Provider for Access database Connection string identifies the provider as an Access database and specifies the name of the database Follow same guidelines/steps used to connect to database using Windows application Minor change needed for Web application DataBind( ) method call is different for Web applications C# Programming: From Problem Analysis to Program Design

65 WebControls Application – Database Access
private void btnShowMembers_Click(object sender, System.EventArgs e) { lblMembers.Visible = true; try { string sConnection = "Provider= Microsoft.Jet.OLEDB.4.0;" + "Data Source=" + "C:\\CSharpProjects\\WebControls\\member.mdb"; OleDbConnection dbConn = new OleDbConnection(sConnection); string sql = "Select FirstName, LastName From memberTable " + " Order By LastName Asc, FirstName Asc;"; C# Programming: From Problem Analysis to Program Design

66 // Catch clause goes here
OleDbCommand dbCmd = new OleDbCommand( ); dbCmd.CommandText = sql; dbCmd.Connection = dbConn; OleDbDataAdapter memberDataAdap = new OleDbDataAdapter( ); memberDataAdap.SelectCommand = dbCmd; memberDS = new DataSet( ); // DataSet declared as protected class member memberDataAdap.Fill(memberDS, "memberTable"); // Binding is only change needed from the Windows app this.dataGrid1.DataBind( ); } // Catch clause goes here C# Programming: From Problem Analysis to Program Design

67 AccessDataSource Can use the data visual configuration tools and have these statements automatically generated for you Instead of writing the program statements .NET 2.0 includes two new data source classes These classes reduce the need for accessing individual Data Provider classes AccessDataSource and SqlDataSource All providers (SQL Server, Oracle, ODBC, and OLEDB) can use SqlDataSource. C# Programming: From Problem Analysis to Program Design

68 AccessDataSource (continued)
AccessDataSource inherits from the SqlDataSource Use SQL queries to perform data retrieval Includes large number of properties and methods Do not have to set the Connection String property Just identify the location of the Access .mdb file using the DataFile property Can provide relative path to the data base Use visual configuration tools to connect C# Programming: From Problem Analysis to Program Design

69 Use Visual Tools to Connect
New Data Source GridView object dragged to form Smart tag Figure Binding data source to the GridView C# Programming: From Problem Analysis to Program Design

70 Use Visual Tools to Connect (continued)
Figure Connecting to Access database C# Programming: From Problem Analysis to Program Design

71 Use Visual Tools to Connect (continued)
Place database in the reserved App_Data directory Figure Relative address for the Access database C# Programming: From Problem Analysis to Program Design

72 Use Visual Tools to Connect (continued)
Figure AccessDataSource Object C# Programming: From Problem Analysis to Program Design

73 Use Visual Tools to Connect (continued)
Figure Identify what data to retrieve C# Programming: From Problem Analysis to Program Design

74 Modifying the Data By default, DataGrid control displays data in read-only format To allow users to edit data, use Advanced tab from the Data Source Configuration tool to configure the select statement This generates the additional Insert, Delete, and Update SQL statements All primary key values must be retrieved as part of the select statement Key columns can be removed using the smart tag once the configuration is complete C# Programming: From Problem Analysis to Program Design

75 Use Visual Tools to Connect (continued)
Figure GridView tasks C# Programming: From Problem Analysis to Program Design

76 Use Visual Tools to Connect (continued)
When application runs, columns display Edit and Delete Clicking the Edit button causes the row of data to be displayed in an editable format Figure Modifying data table C# Programming: From Problem Analysis to Program Design

77 Other Controls Navigation Master Pages Data
Can now add site navigation by defining a site map TreeView and SiteMapPath controls Master Pages Consistent layout for multiple-page Create content pages that are displayed using the master page as the template Data New with 2.0 are DetailsView and FormView controls C# Programming: From Problem Analysis to Program Design

78 Other Controls (continued)
Login New security controls that enable you to authenticate users PasswordRecovery control helps users change or remember passwords LoginStatus control lets you present a Login or Logout button C# Programming: From Problem Analysis to Program Design

79 C# Programming: From Problem Analysis to Program Design

80 Transport ASP.NET Application from One Web Server to Another
On destination computer (that has IIS installed), create ASP.NET project or ASP.NET Web Service project Use EXACTLY the same name as original Close the project and close Visual Studio Using MyComputer or Windows Explorer, copy original files from the original target folder into C:\Inetpub\wwwroot\projectName subdirectory During copy, when prompted about replacing existing files, select “Yes to All” C# Programming: From Problem Analysis to Program Design

81 Web Services Enable exchange of data from one computer to another, over the Internet or an intranet Applications that return data Does not involve presentation layer Uses standard protocols Hypertext Transfer Protocol (HTTP) Extensible Markup Language (XML) Simple Object Access Protocol (SOAP) Web Services Description Language (WSDL) C# Programming: From Problem Analysis to Program Design

82 Web Services (continued)
Messages are sent as XML from one method to another Data is physically returned as part of an XML message XML uses tags to provide format for describing data like HTML HTML tags tell browser how to display data in different formats XML is readable XML uses tags to describe the data being exchanged C# Programming: From Problem Analysis to Program Design

83 Building a Web Service Figure 14-34 Predefined WebMethod
After you select the template to create the ASP.NET Web Service, a code window appears This example Web service returns "Hello World" Figure Predefined WebMethod C# Programming: From Problem Analysis to Program Design

84 Building a Web Service (continued)
Running the application produces this output Figure User interface for testing the Web service C# Programming: From Problem Analysis to Program Design

85 Building a Web Service (continued)
Clicking the Service Description link shows the XML tags generated for the WSDL service agreement Figure WSDL service description C# Programming: From Problem Analysis to Program Design

86 Testing a Web Service Call up and test the Web service Test page also shows a sample SOAP request and response Figure Test of Web service HelloWorld method operation C# Programming: From Problem Analysis to Program Design

87 Testing a Web Service (continued)
When HelloWorld Web service method is executed, the string “Hello World” is embedded within XML tags Figure XML produced from Web service call C# Programming: From Problem Analysis to Program Design

88 Using or Consuming Web Services
Once the Web service is created, applications can use it by adding a reference to it Use the Solutions Explorer window and select Add Web Reference Figure Adding Web reference C# Programming: From Problem Analysis to Program Design

89 Calling the Web Service Method
Locate or type the URL for the Web service Instantiates an object of the Web service class Using that object, invoke the method(s) private void Button1_Click(object sender, System.EventArgs e) { localhost.Service1 obj = new localhost.Service1( ); this.Label1.Text = obj.HelloWorld( ); } C# Programming: From Problem Analysis to Program Design

90 Using or Consuming Web Services (continued)
Figure Web services called C# Programming: From Problem Analysis to Program Design

91 Smart Device Applications (Optional)
Template for developing applications for smart devices is available with Visual Studio Uses .NET Compact Framework Applications can be created without a PDA Emulator that simulates device is included Graphical user interfaces are less sophisticated Fewer controls and events C# Programming: From Problem Analysis to Program Design

92 Create Smart Device Application
Create new project Select Device Application as the Project type Select Pocket PC as the Template type Blank miniature form that looks like a Pocket PC is displayed with a main Menu control Using the WYSIWYG approach, drag and drop controls to the form C# Programming: From Problem Analysis to Program Design

93 Create Smart Device Application (continued)
Figure Adding controls to the smart device application C# Programming: From Problem Analysis to Program Design

94 Create Smart Device Application (continued)
Set properties Use Format alignment tools Drag menu onto Pocket PC Menus displayed from the lower-left corner of the interface Once the text is added to menu, double-click on text to register event-handler methods Figure Adding a menu to a smart device application C# Programming: From Problem Analysis to Program Design

95 Create Smart Device Application (continued)
Only programming statements added were those included in the event-handler methods private void btnCompute_Click (object sender, System.EventArgs e) { this.lblResult.Text = (double.Parse(this.txtBxV1.Text)* double.Parse(this.txtBxV2.Text)).ToString( ); } private void menuExit_Click (object sender, System.EventArgs e) this.Close( ); C# Programming: From Problem Analysis to Program Design

96 Create Smart Device Application (continued)
Clicking Start Without Debugging on the Debug menu displays the message asking for the type of device to target for the deployment Figure Choosing a device as a target for deployment C# Programming: From Problem Analysis to Program Design

97 Create Smart Device Application (continued)
Figure Pocket PC emulator created Figure Smart device application output C# Programming: From Problem Analysis to Program Design

98 Chapter Summary Web site Protocols ASP.NET Visual Web Developer
Static versus dynamic pages Protocols HTML, HTTP, XHTML ASP.NET Visual Web Developer IIS versus File based applications Virtual directories Web Forms page Creating Web page C# Programming: From Problem Analysis to Program Design

99 Chapter Summary Web-based versus Windows applications Controls
HTML, HTML server, Standard controls Validation, navigation, login, data Calendar Connect to database tables Programmatically Use visual configuration tools Web Services Mobile applications and Compact Framework (optional) C# Programming: From Problem Analysis to Program Design


Download ppt "Web-Based Applications"

Similar presentations


Ads by Google