Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms

Description:

Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms Yingcai Xiao * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Web ... – PowerPoint PPT presentation

Number of Views:1317
Avg rating:3.0/5.0
Date added: 13 May 2020
Slides: 90
Provided by: xiao
Learn more at: http://www.cs.uakron.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Chapter 5 Programming the Web Server-side Programming ASP .NET Web Forms


1
Chapter 5Programming the WebServer-side
ProgrammingASP .NET Web Forms
  • Yingcai Xiao

2
Server-side Programming
3
ASP.NET
HTTP
4
  • Web Application Servers

5
  • Web Server
  • Weber server hardware hosts the web server
    software.
  • Web server software listens to HTTP requests
    from the web port (80).
  • It processes the requested pre-deployed web
    page.
  • Microsoft web server IIS (Internet Information
    Server)
  • Deploying a Web Page on an IIS server.
  • IIS Internet Information Services
  • Deploying Directory C\Inetpub\wwwroot
  • Access URL (local on the server)
    http//localhost/ (case insensitive)
  • Access URL (remotely from a client)
    http//hostname/ (case insensitive)
  • Example
  • Deployment
  • C\Inetpub\wwwroot\xiaotest/calc.html
  • Access
  • http//localhost/xiaotest/calc.html
  • http//winserv1.cs.uakron.edu/xiaotest/calc.html

6
  • Application Server
  • Common Gateway Interface (CGI)
  • CGI applications write HTTP responses to
    standard output (stdout) on the server, which are
    then forwarded to the client browser by the web
    server.
  • CGI defines a low-level programmatic interface
    between Web servers and applications that run on
    Web servers.
  • CGI applications can be written in any
    programming language.
  • CGI applications read the input accompanying
    postbacks through server environment variables
    and standard input (stdin).
  • Slow, restarts a process on every request.

7
  • ISAPI
  • ISAPI Internet Server Application Programming
    Interface
  • ISAPI extensions are Windows DLLs hosted by
    IIS.
  • Theyre referenced by URL just like HTML files
    (for example, http//winserv1.cs.uakron.edu/xiaot
    est/calc.dll).
  • IIS forwards HTTP requests to an ISAPI DLL by
    calling a special function exported from the
    DLL.
  • The DLL generates HTTP responses.
  • Faster than CGI (run in the same process as
    IIS).
  • Once loaded, they remain in memory.
  • Theyre difficult to write.
  •  

8
  • Active Server Pages (ASP)
  • Active Server Pages (ASP)
  • Introduced in 1996.
  • Dynamically generates HTML on Web servers.
  • Allows HTML and scripts / languages to be mixed.
  • The embedded script code are between the lt and
    gt tags.
  • When an Active Server Page is requested, ASP
    server parses the page and executes any scripts
    contained inside it.
  • Scripts access the input by using the Request
    object.
  • Scripts write HTML to the HTTP response using the
    Response object, which is sent to the client by
    the Web server along with the static HTML.
  • ASP integrates with ActiveX Data Objects (ADO).
  • Interpreted, slow.
  • Lacks encapsulation.

9
  • Calc.asp

lt_at_ Language"VBScript" gt lthtmlgt ltbodygt
ltformgt ltinput type"text" name"op1"
value"lt Request ("op1") gt"/gt
ltinput type"text" name"op2" value"lt Request
("op2") gt" /gt ltinput type"submit" value"
" /gt lt If Request ("op1") ltgt ""
And Request ("op2") ltgt "" Then a
CInt (Request ("op1")) b CInt
(Request ("op2")) Response.Write
(CStr (a b)) End If gt lt/formgt
lt/bodygt lt/htmlgt
10
  • APS.NET
  • ASP
  • Microfofts equivalent of JSP
  • Code on the server that dynamically generates
    HTML for the clients at runtime.
  • JSP Java Server Page
  • Java code on the server that generates HTML for
    the clients.
  • HTML contents can be dynamically generated at
    runtime
  • ASP.NET
  • ASP based on the .NET framework, one of the most
    popular web programming techniques. Code on the
    server that dynamically generates HTML for the
    clients at runtime.
  • http//www.asp.net/get-started
  • http//www.w3schools.com/aspnet/
  • https//mva.microsoft.com/en-US/training-courses/i
    ntroduction-to-aspnet-5-13786
  • https//mva.microsoft.com/en-US/training-courses/i
    ntroduction-to-asp-net-mvc-8322?lnKZwZ8Zy_3504984
    382

11
  • Enabling IIS

ASP.NET needs to be installed on the host server
with IIS enabled. Enabling IIS for Win8
10 https//www.youtube.com/watch?vfVHwyiy_LgA
http//www.howtogeek.com/112455/how-to-install-iis
-8-on-windows-8/ for Win7 2003 Win
Server http//windows.microsoft.com/en-us/windows
7/install-internet-information-services-iis-7-5 ht
tps//msdn.microsoft.com/en-us/library/ms18105228
vvs.8029.aspx
12
  • Install ASP.NET

For Windows http//docs.asp.net/en/latest/getting
-started/installing-on-windows.html https//www.yo
utube.com/watch?vRjPwAV1RVMQ For Windows
Servers https//technet.microsoft.com/en-us/librar
y/hh831475.aspx
13
  • ASP.NET Application Deployment and Access

Application Deployment C\Inetpub\wwwroot\xiaotes
t/calc.aspx Access http//localhost/xiaotest/calc
.html http//winserv1.cs.uakron.edu/xiaotest/calc.
aspx
14
Calc.aspx
lthtmlgt ltbodygt ltform RunAt"server"gt
ltaspTextBox ID"op1" RunAt"server" /gt
ltaspTextBox ID"op2" RunAt"server" /gt
ltaspButton Text" " OnClick"OnAdd"
RunAt"server" /gt ltaspLabel ID"Sum"
RunAt"server" /gt lt/formgt
lt/bodygt lt/htmlgt ltscript language"C"
RunAt"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() lt/scriptgt
15
  • ASP.NET Web Forms

16
Web Forms
  • Web Forms are GUI-based EDP web pages built
    around controls and event handlers.
  • .NET web forms are processed on the server side
    by the ASP.NET application server.
  • Web forms use HTML, HTTP and IP to transmit and
    display GUI into a client web-browser.

17
  • ASP.NET Web Forms
  • ASP.NET Web Forms
  • GUI for Web applications
  • Object-oriented (encapsulation, inheritance,
    polymorphism)
  • Event driven (EDP)
  • Server-side processing (dynamic generation of
    HTML)
  • Compiled code, faster
  • HTML embedding tag ltasp \gt
  • (processed on the server side)
  • File extension .aspx
  • To deploy on winserv1
  • copy Examples/c5/calc.aspx to
  • C\Inetpub\wwwroot\xiaotest
  • To access
  • http//winserv1.cs.uakron.edu/xiaotest/calc.aspx

18
ASP.NET
HTTP
19
Calc.aspx
lthtmlgt ltbodygt ltform RunAt"server"gt
ltaspTextBox ID"op1" RunAt"server" /gt
ltaspTextBox ID"op2" RunAt"server" /gt
ltaspButton Text" " OnClick"OnAdd"
RunAt"server" /gt ltaspLabel ID"Sum"
RunAt"server" /gt lt/formgt
lt/bodygt lt/htmlgt ltscript language"C"
RunAt"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() lt/scriptgt
20
  • When Calc.aspx is accessed by a client
  • An ASP.NET server page contains two parts static
    HTML code and dynamic embedded APS.NET code.
  • ASP.NET-enabled web server processes the ASP.NET
    code in the server page. (Tomcat does not support
    ASP.NET but Mono does)
  • It instantiates TextBox, Button, and Label
    objects (the classes are defined in
    System.Web.UI.WebControls).
  • Each object dynamically renders itself into
    HTML.
  • The dynamically generated HTML is merged into
    the static HTML.
  • The resulting HTML is returned to the client as
    an HTTP response.

21
  • Calc.aspx as seen by the client

lthtmlgt ltbodygt ltform name"_ctl0"
method"post" action"calc.aspx" id"_ctl0"gt
ltinput type"hidden" name"__VIEWSTATE"
value"dDwxOTE0NDY4ODE2Ozs" /gt ltinput
name"op1" type"text" id"op1" /gt
ltinput name"op2" type"text" id"op2" /gt
ltinput type"submit" name"_ctl1" value "
/gt ltspan id"Sum"gtlt/spangt lt/formgt
lt/bodygt lt/htmlgt note there are also hidden
and div (section) tags.
22
  • When Calc.aspx is accessed by a client

When the button is clicked, the input
from op1 and op2 are posted to the server and
directed to calc.aspx (since action"calc.aspx").
On the server side, ASP.NET notifies the
Button object in calc.aspx and the Button
responds by firing a Click event. ASP.NET
receives the event and subsequently invokes its
handler OnAdd ( ). Sum.Text (a
b).ToString () renders the result into the
Sum label in ltspan id"Sum"gtlt/spangt as HTML.
The dynamically generated HTML is merged with the
static HTML (parts not in server side tags).
The resulting HTML is sent to the client
browser. Use the client browsers View-gtPage
Source menu to see the final HTML code received
by the client. (Mac/Crome View-gtDeveloper-gtView
Page Source
23
  • ASP.NET Controls
  • Two types Web Controls and HTML Controls
  • Web Controls
  • Class names are prefixed with asp.
  • Classes are from System.Web.UI.WebControls.
  • The name of the object is defined by the ID
    attribute.
  • ASP Web controls are rendered into HTML.
  • ASP Web controls are highly programmable.
  • They support methods, properties, events.
  • ltaspTextBox Text"2" ID"op1" runat"server" /gt
  • This web control initializes the textbox to
    display 2. Any public property of a control can
    be used this way.

24
  • ASP.NET Controls

Control properties can be accessed from
server-side scripts (code between the ltscriptgt
and lt/scriptgt tags). Read a control property by
scripts int a Convert.ToInt32
(op1.Text) Write a control property by scripts
Sum.Text (a b).ToString () Event-driven
programming. Controls fire events when users
click on them. Wiring an event to an event
handler is accomplished by prefixing the event
name with On. ltaspButton Text" "
RunAt"server" OnClick"OnAdd" /gt
25
  • ASP.NET Controls

Exception handling can be added in the
handlers. void OnAdd (Object sender, EventArgs
e) try int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() catch (FormatException)
Sum.Text Format Error"
26
  • The Web Forms Programming Model

Three principles of the Web Forms programming
model A Web forms user interface is
declared using a combination of HTML and
server controls. Server controls fire events
that can be handled by server-side scripts.
Server-side scripts in ASP.NET are compiled to
CIL and executed by the CLR on the
server. RunAtserver must be used in every tag
that ASP.NET is to process
27
  • Web Controls

AdRotator Displays rotating banners in Web forms
Button Generates submit buttons
Calendar Displays calendars with selectable dates
CheckBox Displays a check box in a Web form
CheckBoxList Displays a group of check boxes
CompareValidator Validates user input by comparing it to another value
CustomValidator Validates user input using the algorithm of your choice
28
  • Web Controls

DataGrid Displays data in tabular format
DataList Displays items in single-column or multicolumn lists using HTML templates
DropDownList Generates HTML drop-down lists
HyperLink Generates hyperlinks
Image Displays images in Web forms
ImageButton Displays graphical push buttons
Label Generates programmable text fields
LinkButton Generates hyperlinks that post back to the server
29
  • Web Controls

ListBox Generates HTML list boxes
Literal Generates literal text in a Web form
Panel Groups other controls
RadioButton Displays a radio button in a Web form
RadioButtonList Displays a group of check boxes
RangeValidator Verifies that user input falls within a specified range
RegularExpressionValidator Validates user input using regular expressions
Repeater Displays items using HTML templates
30
  • Web Controls

RequiredFieldValidator Verifies that an input field isnt empty
Table Generates HTML tables
TextBox Generates text input fields
ValidationSummary Displays a summary of validation errors
Xml Displays XML documents and optionally formats them using XSLT
31
  • HTML Controls
  • ASP.NET HTML controls mimic the original HTML
    tags. (They are processed on the server side.
    They are not HTML tags which are processed by the
    client browser.)
  • e.g. ltinput type"text" RunAt"server" /gt
  • HTML controls are used like HTML tags.
  • An HTML control is an instance of
    System.Web.UI.HtmlControls.HtmlInputText.
  • ASP.NET sees the RunAtserver attribute and
    creates an HtmlInputText object.
  • The HtmlInputText object, in turn, emits an
    ltinput typetextgt tag thats ultimately
    returned to the browser.
  • HTML controls (server side) have properties and
    can generate events which make them more
    powerful than HTML tags (client side).
  • Without RunAt"server, HTML controls become
    HTML tags.

32
  • HTML Controls

Tag Corresponding HTML Control
lta runatservergt HtmlAnchor
ltbutton runatservergt HtmlButton
ltform runatservergt HtmlForm
ltimg runatservergt HtmlImage
ltinput typebutton runatservergt HtmlInputButton
ltinput typereset runatservergt HtmlInputButton
ltinput typesubmit runatservergt HtmlInputButton
33
  • HTML Controls

ltinput typecheckbox runatservergt HtmlInputCheckBox
ltinput typefile runatservergt HtmlInputFile
ltinput typehidden runatservergt HtmlInputHidden
ltinput typeimage runatservergt HtmlInputImage
ltinput typeradio runatservergt HtmlInputRadioButton
ltinput typepassword runatservergt HtmlInputPassword
ltinput typetext runatservergt HtmlInputText
ltselect runatservergt HtmlSelect
34
  • HTML Controls

lttable runatservergt HtmlTable
lttd runatservergt HtmlTableCell
ltth runatservergt HtmlTableCell
lttr runatservergt HtmlTableRow
lttextarea runatservergt HtmlTextArea
Any other tag with runatserver HtmlGenericControl
35
  • The HTML controls version of Calc.aspx

lthtmlgt ltbodygt ltform runat"server"gt
ltinput type"text" id"op1" runat"server" /gt
ltinput type"text" id"op2"
runat"server" /gt ltinput type"submit"
value" " OnServerClick"OnAdd" runat"server"
/gt ltspan id"Sum" runat"server" /gt
lt/formgt lt/bodygt lt/htmlgt ltscript language"C"
runat"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Value) int b Convert.ToInt32
(op2.Value) Sum.InnerText (a b).ToString
() lt/scriptgt
36
  • The Inner Working of ASP.NET

37
  • How does an ASP.NET enabled server process an
    ASPX file?
  • When ASP.NET processes the first HTTP request for
    an ASPX file
  • It creates class representing the dynamic code of
    the file.
  • It compiles it, loads it, creates an object for
    it.
  • The object initializes itself and processes
    page-level events.
  • The object generates HTML output to be sent to
    the client.
  • The object remains in the server memory to
    process further requests to the page.
  • When the ASPX file is modify, ASP.NET
    automatically repeats steps 1-4.

38
  • How does a ASP.NET enabled server process an ASPX
    file?
  • (Details)
  • When ASP.NET processes the first HTTP request for
    an ASPX file
  • 1. It creates a Page class deriving from class
    System.Web.UI.Page.
  • 2. It copies the code in the ASPX file to the
    Page-derived class.
  • 3. A method (e.g. OnAdd) in a ltscriptgt block
    becomes a member method of the derived class.
  • ASP.NET compiles the derived class and
    places the resulting DLL in a system folder and
    caches it there.
  • C\Windows\Microsoft.NET\Framework\vn.
    n.nnnn
  • \Temporary ASP.NET Files.
  • 5. ASP.NET instantiates an object of the derived
    Page class and executes it by calling a series
    of methods on it.
  • 6. The Page object instantiates any controls
    declared inside it and solicits their output.

39
  • Page-Level Events
  • As the Page object executes, it fires a series of
    events (page-level events) that can be processed
    by server-side scripts
  • Init, which is fired when the page is first
    instantiated (for this and other future clients.)
  • Load, which is fired after the pages controls
    are initialized but before the page renders any
    output (for each client).
  • Implicit wiring of Page events to handlers by
    defining handlers names as Page_EventName.
  • ltaspDropDownList ID"MyList" RunAt"server" /gt
  • . . .
  • ltscript language"C" runat"server"gt
  • void Page_Load (Object sender, EventArgs e)
  • if (!IsPostBack) // if it is not from the
    client (first load)
  • for (int i0 ilt5 i) // list 5 days
  • DateTime date
  • DateTime.Today new TimeSpan
    (i, 0, 0, 0)
  • MyList.Items.Add (date.ToString ("MMMM dd,
    yyyy"))
  • lt/scriptgt

40
  • ASP.NET Compilation Directives _at_ 

Must be positioned at the top of an ASPX file.
_at_ Page Defines general attributes and compilation settings for ASPX files (e.g. Language)
_at_ Control Defines general attributes and compilation settings for ASCX files
_at_ Import Imports a namespace
_at_ Assembly Enables linkage to assemblies, not linked to by default
_at_ Register Registers user controls and custom controls for use in a Web form
_at_ OutputCache Exerts declarative control over page caching and fragment caching
_at_ Reference Adds a reference to an external ASPX or ASCX file
_at_ Implements Identifies an interface implemented by a Web page
41
  • Separating Static Code from Dynamic Code
  1. ASPX files are text files, anyone can read it.
  2. When a company sells its ASPX server programs, it
    does not want people to see their source code.
  3. Code-behind is designed to protect source code.
  4. For the static code in HTML, we cant do anything
    about it.
  5. Dynamic code in C or other .NET languages can be
    separated out and compiled into DLLs.
  6. Only the static HTML code and the DLLs are
    delivered to the customs.
  7. The DLLs can be written in any server-side
    programming languages supported by .NET.

42
  • Code-behind with C
  • 1. Create a CS file (e.g. Examples/C5/Lander/Lande
    rDLL.cs) containing code that would normally
    appear between ltscriptgt and lt/scriptgt tags. Make
    each of these source code elements members of a
    class (e.g. LanderPage) derived from
    System.Web.UI.Page.
  • 2. In your Page-derived class, declare protected
    fields whose names mirror the IDs of the controls
    declared in the ASPX file (e.g. LanderCB.aspx).
    At run time, ASP.NET maps these fields to the
    controls of the same names.
  • Compile the CS file into a DLL.
  • In a Visual Studio Command Prompt window, run the
    following
  • csc /targetlibrary Lander.cs

43
  • Code-behind in Web forms coded in C

4. Place the HTML portion of the Web
formeverything between the lthtmlgt and lt/htmlgt
tagsin an ASPX file (e.g. LanderDLL.aspx).
5. Include in the ASPX file an _at_ Page directive
containing an Inherits attribute that identifies
the Page-derived class in the DLL. When a request
arrives for that page at run-time, ASP.NET
derives a child class from this class to create
the form. e.g. lt_at_ Page Inherits"LanderPagegt 7.
Code embedded have to be in C, VB .NET, or
JScript. Code-behind can be in any other language
supported by .NET.
44
  • Code-behind in Web forms coded in C
  • To deploy the program
  • move the ASPX file to Inetpub/wwwroot/xiaotest/L
    ander
  • (or your publishing directory
    inetpub/wwwroot/semester/yourID)
  • and
  • the DLL to Inetpub/wwwroot/xiaotest/Lander/bin.
  • (inetpub/wwwroot/semester/yourID)
  • The program can be accessed the same way as other
    ASP.NET programs
  • http//winserv1.cs.uakron.edu/xiaotest/Lander/La
    nderDLL.aspx
  • (http//winserv1.cs.uakron.edu/
    semester/yourID/LanderDLL.aspx)

45
  • Code-behind in Web forms coded in C
  • In order for
  • http//winserv1.cs.uakron.edu/xiaotest/Lander/Lan
    derDLL.aspx
  • to work, the Lander directory has to be
    converted to a Web Application, which instructs
    ASP.NET to find Lander.dll under the
    applications bin directory. (This is done for
    your home directory on winserv1
    inetpub/wwwroot/semester/yourID)
  • )

46
  • Code-behind in Web forms coded in C
  • To use the source code without recompiling during
    development
  • Copy Lander.cs to LanderSRC.cs
  • Rename the class in it from LanderPage to
    LanderSRCPage
  • public class LanderSRCPage Page
  • Copy LanderDLL.aspx to LanderSRC.aspx
  • Rename the class to inherit and add the source
    file.
  • lt_at_ Page Inherits"LanderSRCPage"
    Src"LanderSRC.cs" gt
  • You have to rename the class otherwise it would
    conflict the class name in code behind and get an
    error
  • BC30456 'InitializeCulture' is not a member of
    ...
  • http//winserv1.cs.uakron.edu/xiaotest/Lander/Land
    erSRC.aspx

47
  • Setting Up a Folder for Web Access

  • Right click on the folder in File Explorer,
    select Properties
  • Select the Security Tab
  • Edit -gt Add
  • IUSR (cslabs.cs.uakron.edu)
  • IIS_IUSRS (WINSERV1)
  • Give them the following permissions
  • Read execute
  • List folder content
  • Read
  • In order to support Code Behind, a folder needs
    to be converted into an Web Application, so that
    ASP.NET knows where to find DLLs in the its bin
    directory.

48
  • Create a Web Application in IIS


You need to be an administrator to use IIS
  • Login to the server (WINSERV1) as a system
    administrator
  • Start-gtAdministrative Tools-gtServer Manager (of
    the OS)
  • Server Manager (WINSERV1)-gtRoles-gtWeb
    Server(IIS)-gt Internet Information Service
    (IIS) Manager
  • Connections-gt WINSERV1 (CS\xiao) -gt Sites -gt
    Default Web Site
  • Select an application folder (xiaotest\Lander)
  • Right-click-gtConvert to Application
  • Alias Lander
  • Application pool defualtAppPool
  • Physical path C\inetpub\wwwroot\xiaotest\Lander
  • URL http//winserv1.cs.uakron.edu/xiaotest/Lande
    r

49
  • Web Forms and Visual Studio .NET
  • Development of Web forms using Visual Studio .NET
  • Create a Web Application project
  • Set the URL for publishing
  • Use forms designer to design forms by
    drag-and-drop controls from a palette onto the
    forms.
  • Edit the HTML.
  • Write event handlers by double-clicking controls
    and filling in empty method bodies.
  • Compile and run applications by executing simple
    menu commands.

50
Under the Hood of IIS
  • Yingcai Xiao

51
What is the Internet?
52
Programming the Internet
  • The Internet is a network of Computers connected
    via the Internet Protocols (IP) Internet
    interconnected network
  • The Internet can be treated as a Computer.
  • Every computer on the Internet is a CPU.
  • Transmitting data over the Internet is the Key.
  • Analogy of Internet Protocols
  • IP (Internet Protocol)
  • gt Binary (low-level Internet transmission
    protocol)
  • HTTP (Hyper Text Transport Protocol)
  • gt Intermediate Language (high-level
    Internet transmission protocol)
  • HTML (Hyper Text Markup Language)
  • gt High Level Language (for writing web-pages
    in)

53
What is the Internet Protocol?
54
Internet Protocol
  • IP Internet Protocol
  • The data transmission protocol (standard) for the
    Internet.
  • DARPA Vint Cerf and Bob Kahn in 1974
  • The Internet is a computer network based on the
    Internet Protocol.
  • Each device on the Internet is identified by its
    Internet Address 130.101.10.31 or
    winserv1.cs.uakron.edu
  • Data transmitted between computers as packets.
  • Each packet has an IP header followed by data.
  • The first 2 entries in an IP header are the
    receivers address and the senders address. IP
    is similar to postal mailing (Packet Switching),
    not phoning (Circuit Switching).
  • Routers/Gateways forward packets based on network
    topology and traffic.
  • IPv4 (32bit addressing, 4B), IPv6 (48bit
    addressing, 256T)
  • The headers are in the standard IP format,
    platform-independent.
  • Data (any type) is transmitted over the Internet
    bit-by-bit. No restrictions on what can be
    transmitted.

55
Internet Protocol
  • More on IP
  • Any IP device can join and drop off the Internet
    at anytime. (Not so for IBMs token ring
    networks.)
  • Packets received may not in the order they were
    sent.
  • Wait and send again if network is busy.
    Transmission speed decreases as traffic
    increases. DoS attacks.
  • Binary data are platform-dependent. Binary data
    transmitted from one computer to another computer
    may not be readable by the receiver if it has a
    different binary data format than the sender.

56
What is the World Wide Web?
57
Hypertext Transfer Protocol
  • Can we make the data platform-independent?
  • The World Wide Web is an application built on the
    Internet using the Hypertext Transfer Protocol in
    which only text is permitted to be transmitted.
  • HTTP (Hypertext Transfer Protocol)
  • Tim Berners-Lee ("father of the Web") and RFC
    2068
  • (www.w3.org/Protocols/rfc2068/rfc2068). 1989.
  • Entirely text based ASCII (8-bits) or Unicode
    (16-bits).
  • Platform independent
  • Defines how Web browsers and Web servers
    communicate.
  • 7 instructions defined in HTTP 1.1. GET, POST,
  • Transmitted over TCP/IP (Transport Control
    Protocol/Internet Protocol).
  • Web applications are implemented over the
    Internet using HTML and other Web languages.

58
Internet Browser
  • GET HTML pages from servers
  • Display the HTML pages at the clients.
  • Tim Berners-Lee The first web browser, 1990, was
    called WorldWideWeb
  • Robert Cailliau Erwise, the first commonly
    available web browser with a graphical user
    interface.
  • Marc Andreessen Mosaic, the first popular
    browser, 1993, Netscape 1994

59
HTML
  • HTML (Hypertext Markup Language)
  • Defines syntax and semantics of the Web
    language.
  • Entirely text based (platform independent)
  • Hypertexts are tagged in lt gt, not to be
    displayed. They are metadata describing regular
    text. (http//www.w3schools.com/tags/)
  • Browsers are GUI-based HTML interpreters.
  • HTML 4.01 became XHTML 1.0 in 2000
  • simple.html
  • lthtmlgt
  • ltbodygt
  • Hello, world
  • lt/bodygt
  • lt/htmlgt

60
Computing over the Internet
61
Computing over the Internet
  • Client-Side
  • Thick client
  • Client program installed prior, no need to
    download at runtime.
  • Runs like any other program on the client, but
    can talk to the server when needed.
  • .NET Remoting, Windows Communication Foundation
    (WCF),
  • Java's Remote Method Invocation (RMI)
  • Common Object Request Broker Architecture (CORBA)

62
Computing over the Internet
  • Client-Side
  • Thin client
  • Only a browser is needed.
  • The browser renders a html page on the client
    computer.
  • HTML (static), DHTML (dynamic), HTML5 (dynamic
    and multi-medium).
  • Programming with embedded scripts JavaScript, .
    Dynamic and computational.
  • Ajax (asynchronous JavaScript XML)
    asynchronous.
  • Plugins VRML (3D Web)
  • Java Applet transmit the application to the
    client and run it there. Too much to transmit for
    large distribution lists.

63
Computing over the Internet
  • Server-Side
  • Web pages are generated by server side programs
    at runtime. Dynamic contents and heavy-duty
    computing.
  • Server Scripts
  • Perl, PHP, .
  • Does not scale well. (each client needs a process
    to service)
  • Server VMs
  • .NET ASP (Active Server Page), JSP (Java Server
    Page),
  • All clients are served by a single process. The
    process will create a thread to serve each
    client.

64
Computing over the Internet
  • Server-Side
  • CMS (Content Management Systems) web contents
    are managed at server side on demand.
  • Dejango CMS, Joomla.
  • Server-Client Communication
  • Important for Internet based computing.
  • HTTP channel (slower, works for both thin and
    thick clients).
  • TCP/IP channel (faster, works only for thick
    clients).
  • HTTP next, TCP/IP later.

65
Web Client-Server Communications over the
Internet
66
What happens when browsing a web page on a
server?
  • http//winserv1.cs.uakron.edu/xiaotest/calc.html
  • Start a client (a browser).
  • Type in the URL (Unified Resource Locator).
  • Internets Domain Name System (DNS) converts
  • winserv1.cs.uakron.edu into an IP
    address (130.101.10.31).
  • The browser opens a socket (IP) connection to
    the server using default port 80
  • winserv1.cs.uakron.edu80

67
  • What happens when browsing a web page on a
    server?
  • The browser transmits an HTTP request to the
    server.
  • GET /xiaotest/calc.html HTTP/1.1
  • Accept /
  • Accept-Language en-us
  • Accept-Encoding gzip, deflate
  • User-agent Mozilla/4.0.(compatible MSIE.6.0
    Windows NT 5.1)
  • Host winserv1.cs.uakron.edu/
  • Connection Keep-Alive
  • blank line

68
  • What happens when browsing a web page on a
    server?
  • The server software (e.g. IIS, Tomcat) processes
    client requests from the designated port (80 by
    default).
  • Locates the file under the servers web root
    directory
  • (c\Inetpub\wwwroot)
  • Returns Server Error 404 if file not found.
  • Otherwise returns the contents of the file as
    text to the client with a text header.

69
  • What happens when browsing a web page on a
    server?

The server transmits an HTTP response
back. HTTP/1.1 200 OK Server Microsoft-IIS/5.0 D
ate Wed, 24 Oct 2014 141237 GMT Content-Type
text/html Accept-Ranges bytes Last-Modified
Wed, 24 Oct 2014 140053 GMT ETag
"d02acf81975cc11a78" Content-Length 4800 blank
line lthtmlgt ltbodygt lt/bodygt lt/htmlgt
70
  • What happens when browsing a web page on a
    server?
  • Upon receiving the response, the browser parses
    the HTML and displays the resulting Web page.
  • To compute, we need to obtain data from the
    client user.
  • A client form is needed. HTML form serves the
    purpose.

71
  • HTML Forms

http//winserv1.cs.uakron.edu/xiaotest/calc.html lt
htmlgt ltbodygt ltform methodpostgt
ltinput type"text" name"op1" /gt
ltinput type"text" name"op2" /gt ltinput
type"submit" value" " /gt lt/formgt
lt/bodygt lt/htmlgt
72
  • Whats happening?

No action to send anything to the server when the
user types values in the text fields. But when
the submit button (ltinput typesubmitgt) is
clicked, the browser submits the form along with
any input in the forms controls. POST
/xiaotest/calc.html HTTP/1.1 Content-Length
11 blank line op12op22
73
Web ApplicationClient-Server Communications
over the Internet
74
ASP.NET
HTTP
75
  • Server

winserv1
web server H/W
web server S/W
IIS (Internet Information Services)
76
  • Server

winserv1
IIS
IP port 80
HTTP
77
  • Client

Client Machine
5.
Open port 80 on 130.101.10.31
6.
Send the packet of HTTP request
Web Browser
URL winserv1.cs.uakron.edu/ xiaotest/calc.html
Add http// as default
1.
Client Computer
2.
Add port num80 as default
3.
Get the IP address from the DNS 130.101.10.31
IP packet of HTTP request
Create an IP packet
4.
Server Computer
78
  • Server

winserv1
IIS
IP Port 80
HTTP
HTTP request from the Client
1.
IIS retrieves xiaotest/calc.html
2.
IIS forms a HTTP response packet
79
  • Server

winserv1
IIS
IP port 80
HTTP
HD
C/inetpub/wwwroot/
80
  • Server

winserv1
lthtmlgt ltbodygt ltform methodpostgt
ltinput type"text" name"op1" /gt
ltinput type"text" name"op2" /gt ltinput
type"submit" value" " /gt lt/formgt
lt/bodygt lt/htmlgt
IIS
IP port 80
HTTP
HD
C/inetpub/wwwroot/xiaotest/calc.html
81
  • Server

3.
IIS server creates an IP packet to of HTTP
response.
130.101.10.08
130.101.10.31
IP packet
HTTP Header
http
html
HTML text in calc.html
82
  • Server

winserv1
Server sends the IP packet of HTTP response
back to the Client
IIS
Port 80
HTTP
130.101.10.08
IP Packet of HTTP Response
HD
130.101.10.31
IP Packet
C/inetpub/wwwroot/xiaotest/calc.html
HTTP Header
http
HTML text in calc.html
html
83
  • Client

Client Machine
5.
Opens port 80 on 130.101.10.31
6.
Sends the packet as http request
Web Browser
Receives the HTTP response IP packet from the
Server
7.
winserv1.cs.uakron.edu/ xiaotest/calc.html
Adds http// as default
1.
8.
Interprets HTML and displays
2.
Adds port num80
Gets the IP Address from DNS 130.101.10.31
3.
9.
The user enters the input and hits the submit
button.
4.
IP packet
The browser creates another packet with the
input.
10.
11.
The browser sends the new packet to the server
again
84
  • Server

winserv1
ASP.NET
IIS
85
  • Server

winserv1
CLR VM
ASP.NET
IIS
IP port 80
HTTP
HD
C/inetpub/wwwroot/
86
  • Server

lthtmlgt ltbodygt ltform RunAt"server"gt
ltaspTextBox ID"op1" RunAt"server" /gt
ltaspTextBox ID"op2" RunAt"server" /gt
ltaspButton Text"" OnClick"OnAdd"
RunAt"server" /gt ltaspLabel ID"Sum"
RunAt"server" /gt lt/formgt
lt/bodygt lt/htmlgt ltscript language"C"
RunAt"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() lt/scriptgt
Calc.aspx
winserv1
CLR VM
ASP.NET
IIS
IP port 80
HTTP
HD
C/inetpub/wwwroot/
87
  • Server

winserv1
CLR VM
ASP.NET
1.
IIS retrieves xiaotest/calc.aspx sends it to
ASP.NET
2.
html
.aspx
3.
  • ASP.NET
  • processes .aspx
  • which dynamically generates an html
  • The html is sent back to IIS

IIS
Internet Port
HTTP 80
HD
HTTP request from Client
C/inetpub/wwwroot/
C/inetpub/wwwroot/xiaotest/calc.html
88
  • Client

Client Machine
5.
Opens port 80 on 130.101.10.31
6.
Sends the packet of http request
Web Browser
7.
Receives the HTTP response packet from Server
winserv1.cs.uakron.edu/ xiaotest/calc.html
Adds http// as default
1.
8.
Interprets HTML and displays
2.
Adds port num80
8
8
Gets IP Address DNS 130.101.10.31
16
3.
9.
The user enters the input and hits submit button
4.
IP packet
10.
The browser creates another packet with the
input. The browser sends the packet to the
server again IIS-gtASP.NET-gtButton create Click
event-gtOnClick() invoked-gtResult-gtHTML-gtIIS-gt
HTTP-gt Client-gtBrowser Displays.
11.
12.
89
  • Summary
  • Web Programming, Client Side, Server Side, HTTP,
    HTML, HTML Forms, CGI, ISAPI, ASP, ASP.NET,
    ASP.NET Forms, ASP.NET Controls, IIS, Web Forms
    Programming Model, Page-Level Events, Code
    Behind.
  • Principles
  • What are they?
  • How do they work? (internals, static structures,
    dynamic data/event flow.)
  • Practice
  • Explain the logic, output, and internal working
    of given code.
  • Find errors in a given code segment.
  • Write a simple program to perform a given task.
About PowerShow.com