Static and Dynamic Web Pages CS 3870 Static and Dynamic Web Pages ASP.NET and IIS

Static Web Pages Original HTML documents Remaining the same after created and modified At all times and to all users All three pages of Prog1 are static

Static Web Pages Cannot be used for business operations No user input Cannot respond to different user requests

Dynamic Web Pages Interactive or Smart HTML pages User input and Server Response Web Applications Similar to Windows programs Prog2

Special HTML Controls To get user input Element INPUT Element BUTTON Element FORM …

Control Types Created with INPUT Text Password Checkbox Radio box Submit Reset Hidden Button File Image . . .

Controls to get user input MUST be inside HTML forms

HTML Controls and Forms Example View Source Code (Google Chrome, Edge F12)

HTML Standards by W3C

Scripts for Dynamic Web Pages User Input and Server Response Similar to Windows programs Need code to respond to user input Client Side Scripting Server Side Scripting Combination of above two approaches

Client Side Scripting HTML files and instruction files sent to client Client Script JavaScript: nothing to do with Java VBScript Java Applets Flash . . .

Issues with Client Side Scripting Different browsers may interpret instructions in different ways Database is normally at server site Users could view source code

Server Side Scripting Instruction files are at server site HTML files are generated according to user input Only HTML files are sent to clients

Issues with Server Side Scripting Most computing is done at the server Nothing will work when the server is down Powerful and expensive servers More internet traffic

Different Technologies for Server Side Scripting CGI (Common Gateway Interface) JSP (Java Server Pages) PHP (Personal Home Pages) ASP (Active Server Pages) ASP.NET . . .

ASP.NET A server-side technology for creating dynamic web pages Client-side scripting is incorporated (e.g., to check input) C#, VB.NET or any other language supported by .NET Working with MS IIS

Internet Information Services (IIS) IIS waits and takes client requests IIS sends static HTML files to the clients IIS passes client requests to ASP.NET when needed ASP.NET generates dynamic web pages IIS sends dynamic web pages to clients

Program 2 20 points Using C#, Not VB.NET Due 10 pm, Monday (Week 3), September 17

Creating Folder Solution Explore Right Click on Web Site New Folder Prog2

Creating Web Forms Solution Explorer Right clicking folder Prog2 Add Different Views Design Source: HTML code Split

Page Default.aspx Static page for Prog2 Similar to index.html

Page OrderingProduct.aspx Dynamic page for Prog2 Adding controls Three textboxes Two buttons Standard on Toolbox Not HTML

HTML Server Controls HTML Server Controls HTML server controls are HTML elements (or elements in other supported markup, such as XHTML) containing attributes that make them programmable in server code. We don’t use HTML Server Controls.

Web Server Controls Web server controls are a second set of controls designed with a different emphasis. Web server controls do not necessarily map one-to-one to HTML server controls. All Server Controls must be within a <form> tag. All Server Controls must have the runat="server" attribute. We use Web Server Controls!

Basic Control Properties <asp:TextBox ID="txtPrice" runat="server"</asp:TextBox> <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox> <asp:TextBox ID="txtTotal" runat="server" ReadOnly="True" > </asp:TextBox> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Compute" /> <asp:Button ID="Button2" runat="server" Text="Reset" />

Event Procedures Same as Windows programs C# Button Compute Button Reset

Button Compute protected void Button1_Click(object sender, EventArgs e) { float price = float.Parse(txtPrice.Text); int quantity = int.Parse(txtQuantity.Text); float total = price * quantity; txtTotal.Text = total.ToString(); txtPrice.ReadOnly = true; txtQuantity.ReadOnly = true; } Try one invalid input value

Button Reset protected void Button1_Click(object sender, EventArgs e) { txtPrice.Text = ""; txtQuantity.Text = ""; txtTotal.Text = ""; txtPrice.ReadOnly = false; txtQuantity.ReadOnly= false; } Try one invalid input value

Formatting Server Controls Style Source View CSS file Format Menu

Format Menu Go to Design view Click FORMAT on the menu bar New Style Selector HTML element Enter a style name Inline style Define in Specify the styles OK or Apply

Internal Style Sheets <head> <style type="text/css"> .theTitle { font-family: "Bell MT"; font-size: xx-large; font-weight: bold; color: #0000FF; text-decoration: underline; text-align: center; } </style> <h1> Web Protocols, Technologies and Applications </h1> </head>

Internal Style Sheets <head> <style type="text/css"> .theTitle { . . . } <title>CS3870 – Prog 2</title> </head> <body> <h1 class="theTitle">Web Protocols, Technologies and Applications</h1> </body> </html>

Inline Style Selecting Controls Position: relative or absolute z-index: auto Display: inline-box Text-align Width: 10% Margin-left: 10%

<br /> <br /> <asp:TextBox ID="txtPrice" runat="server" style="display: inline-block; position: relative; width: 10%; text-align: left; margin-left: 25%; z-index: auto;"></asp:TextBox> <asp:TextBox ID="txtQuantity" runat="server" style="margin-left: 10%; display: inline-block; position: relative; z-index: auto; width: 10%"></asp:TextBox> <asp:TextBox ID="txtTotal" runat="server" ReadOnly="True" z-index: auto; width: 10%"; text-align: right"></asp:TextBox>

Formatting Output Style in HTML source Properties Window C# functions String formatting txtTotal.Text = string.Format("{0:c}", total);

Checking Input Click event of button Compute Server site scripting Client site scripting should be better Should do it on both sites Control Validator

Validators ToolBox Validation Tab ControlToValidate RequiredFieldValidator RangeValidator CompareValidator Type Operator Value to compare

Validation Controls Validate input automatically We don’t check input in event procedures any more Must set button property CausesValidation to True!

Validation Controls Will check input data at both sides Placing validation controls Inline-box Margin could be negative

Program 2 You will lose five points for each late day! More to discuss next class!