Web Programming

Information Systems and the World Wide Web

International School of New Media
University of Lübeck

Erik Wilde, UC Berkeley School of Information
2007-01-11
Creative Commons License

This work is licensed under a Creative Commons
Attribution-NonCommercial-ShareAlike 2.5 License.

Abstract

Web Programming can be loosely defined as any programming activity that somehow is related to the Web. This opens up a wide range of programming environment, but strictly speaking in many cases these programming environments lie outside of the Web's core. However, some programming tasks are an integral part of the Web, for example scripting code and Asynchronous JavaScript and XML (AJAX), the ability of scripting code to request servers. Using some examples, this final part of the course explores the whole range of Web programming activities.

Outline (Server-Side Web Technologies)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Example: HTML Forms

Outline (Static Web Pages)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

HTTP Service

Web Pages

Outline (Server-Side Includes (SSI))

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Server-Side Processing

Which Server?

SSI Configuration

Basic SSI

Processing Problems

Advanced SSI

Outline (Common Gateway Interface (CGI))

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Web Server Service

CGI Basics

CGI-Based HTML Forms

CGI Problems

FastCGI

Outline (Java and the Web)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Applications Anywhere

Server-Side Java

Servlet problems

Outline (Dynamic HTML (DHTML))

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

HTML is Static

DHTML is RIA

DHTML Problems

Outline (Asynchronous JavaScript and XML (AJAX))

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

AJAX = DHTML + HTTP

AJAX and DHTML

AJAX and XML

Outline (Server-Side Languages)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Server-Side Technologies

PHP

PHP Versions

PHP in Action

<?php phpinfo(); ?>

Request-Based Processing

Looking at the Request

<html>
 <head>
  <title>Browser Test</title>
 </head>
 <body>
  <p><?php
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla/5') === false ) {
 echo("That's just a Web browser");
} else {
 echo("That's a nice Web browser"); } ?>
 </p>
 </body>
</html>

Looking at the Headers

<html>
 <head>
  <title>Get Request Headers</title>
 </head>
 <body>
  <table>
  <?php
foreach ( $_SERVER as $index=>$value ) {
 if ( strpos($index, "HTTP_") === 0 ) {
 echo "<tr><th align='right' valign='top'>" . substr($index,5) . "</th><td>$value</td></tr>"; } } ?>
  </table>
 </body>
</html>

(try shift-reload vs. no-shift-reload)

Looking at the Server

<html>
 <head>
  <title>Get Request Headers</title>
 </head>
 <body>
  <table>
  <?php
foreach ( $_SERVER as $index=>$value ) {
 echo "<tr><th align='right' valign='top'>$index</th><td>$value</td></tr>"; } ?>
  </table>
 </body>
</html>

(try adding a query string to the script's URI)

PHP ↔ System

<pre>
<?php system("ls -lasg"); ?>
</pre>
<pre>
<?php system("ls -" . $_SERVER['QUERY_STRING']); ?>
</pre>

PHP ↔ Applications

Simple Service Chain

<?php
include("HttpClient.class.php");
$pageContent = HttpClient::quickGet('http://www.isnm.de/');
$highlightedContent = str_replace($_SERVER['QUERY_STRING'], "<span style='background-color : yellow'>" . $_SERVER['QUERY_STRING'] . "</span>", $pageContent);
echo $highlightedContent;
?>

Outline (Declarative Approaches)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

HTML Form Problems

XForms for XML-oriented Web Forms

Outline (XForms Deployment)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

XForms Browsers

Server-Side XForms

Client-Side XForms

Outline (XForms Architecture)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Data and Forms

Hello World in XForms

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
 <head>
  <title>Hello World XForms</title>
  <xf:model>
   <xf:instance>
    <first-name xmlns="" />
   </xf:instance>
  </xf:model>
 </head>
 <body>
  <p>Please enter your first name:
   <xf:input ref="/first-name" incremental="true" />
  </p>
  <p>
   <xf:output value="if (normalize-space(/first-name) = '') then '' else concat('Hello, ', /first-name, '!')" />
  </p>
 </body>
</html>

Submission

<model><instance><data xmlns=""><accountnumber/><name/><address/></data></instance>
 <submission method="get" action=".../prefill" id="prefill" replace="instance"/>
 <submission method="put" action=".../change" id="change" replace="none"/>
</model>
...
<input ref="accountnumber"><label>Account Number</label></input>
<submit submission="prefill"><label>Find</label></submit>
<input ref="name"><label>Name</label></input>
<textarea ref="address"><label>Address</label></textarea>
<submit submission="change"><label>Submit</label></submit>

User Friendliness

Models

Bindings

   <xf:bind nodeset="/data/one" id="one" type="xs:integer" />
   <xf:bind nodeset="/data/one" relevant="/data/two != 42" />
   <xf:bind nodeset="/data/two" id="two" type="xs:integer" />
   <xf:bind nodeset="/data/two" readonly="/data/one = 42" />
   <xf:bind nodeset="/data/three" id="three" calculate="/data/one + /data/two" />
   <xf:bind nodeset="/data/four" id="four" required="/data/three = 42" relevant="/data/three = 42" type="xs:date" constraint="starts-with(text(), '2007')"/>

Outline (Controls)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

User Interface Elements

Input

   <xf:input bind="one" incremental="true" />
   <xf:input bind="two" incremental="true" />
   <xf:input bind="three" incremental="true" />
   <xf:input bind="four" incremental="true" />

Secret

   <xf:secret bind="four" incremental="true" />

Textarea

   <xf:textarea bind="one" incremental="true" />
   <xf:textarea bind="two" incremental="true" />
   <xf:textarea bind="three" incremental="true" />
   <xf:textarea bind="four" incremental="true" />

Output

   <xf:output bind="one" incremental="true" />
   <xf:output bind="two" incremental="true" />
   <xf:output bind="three" incremental="true" />
   <xf:output bind="four" incremental="true" />
   <xf:output bind="four" value="string-length(.)" incremental="true" />

Upload

   <xf:upload ref="/data/five">
    <xf:label>General Upload: </xf:label>
    <xf:filename ref="@filename"/>
    <xf:mediatype ref="@filename"/>
   </xf:upload>
   <xf:upload ref="/data/five" mediatype="image/*">
    <xf:label>Image Upload: </xf:label>
    <xf:filename ref="@filename"/>
    <xf:mediatype ref="@filename"/>
   </xf:upload>
   <xf:upload ref="/data/five" mediatype="audio/*">
    <xf:label>Audio Upload: </xf:label>
    <xf:filename ref="@filename"/>
    <xf:mediatype ref="@filename"/>
   </xf:upload>

Range

   <xf:range bind="one" start="0" end="10" incremental="true"><xf:label>0-10</xf:label></xf:range>
   <xf:range bind="one" start="0" end="50" incremental="true"><xf:label>0-50</xf:label></xf:range>
   <xf:range bind="one" start="0" end="100" step="10" incremental="true"><xf:label>0-100@10</xf:label></xf:range>

Trigger and Submit

   <xf:trigger bind="one"><xf:label>Button</xf:label></xf:trigger>
   <xf:trigger bind="six"><xf:label>Button42</xf:label></xf:trigger>
   <xf:submit submission="save"><xf:label>Save as...</xf:label></xf:submit>

Select1

   <xf:select1 bind="one">
    <xf:label>Default: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select1>
   <xf:select1 bind="one" appearance="full">
    <xf:label>Full: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select1>
   <xf:select1 bind="one" appearance="compact">
    <xf:label>Compact: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select1>
   <xf:select1 bind="one" appearance="minimal">
    <xf:label>Minimal: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select1>

Select

   <xf:select bind="one">
    <xf:label>Default: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select>
   <xf:select bind="one" appearance="full">
    <xf:label>Full: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select>
   <xf:select bind="one" appearance="compact">
    <xf:label>Compact: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select>
   <xf:select bind="one" appearance="minimal">
    <xf:label>Minimal: </xf:label>
    <xf:item><xf:label>One</xf:label><xf:value>1</xf:value></xf:item>
    <xf:item><xf:label>Two</xf:label><xf:value>2</xf:value></xf:item>
    <xf:item><xf:label>Three</xf:label><xf:value>3</xf:value></xf:item>
    <xf:item><xf:label>Four</xf:label><xf:value>4</xf:value></xf:item>
   </xf:select>

Common Controls

   <xf:textarea bind="data" incremental="true">
    <xf:label>Your Message (characters remaining: <xf:output bind="length"/>)</xf:label>
    <xf:help>Enter the message text you wish to send as an SMS message.</xf:help>
    <xf:hint>Message text</xf:hint>
    <xf:alert>Additional characters will be truncated!</xf:alert>
   </xf:textarea>

Outline (Actions and Events)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Beyond Static Forms

Events

Declarative Calculator

Calculator Code

     <screen>0</screen>
     <screenbuffer>0</screenbuffer>
     <first>0</first>
     <second>0</second>
     <memory>0</memory>
     <result />
     <xf:trigger>
      <xf:label>4</xf:label>
      <xf:action ev:event="DOMActivate">
       <xf:setvalue ref="/equation/screenbuffer" value="/equation/screenbuffer * 10 + 4" />
       <xf:setvalue ref="/equation/screen" value="/equation/screenbuffer" />
      </xf:action>
     </xf:trigger>
     <xf:trigger>
      <xf:label>+</xf:label>
      <xf:action ev:event="DOMActivate">
       <xf:setvalue ref="/equation/first" value="/equation/screen" />
       <xf:setvalue ref="/equation/screenbuffer" value="0" />
       <xf:toggle ev:event="DOMActivate" case="add" />
      </xf:action>
     </xf:trigger>
     <xf:switch>
      <xf:case id="add">
       <xf:trigger>
        <xf:label>=</xf:label>
        <xf:action ev:event="DOMActivate">
         <xf:setvalue ref="/equation/second" value="/equation/screenbuffer" />
         <xf:setvalue ref="/equation/result" value="/equation/first + /equation/second" />
         <xf:setvalue ref="/equation/screen" value="/equation/result" />
         <xf:setvalue ref="/equation/screenbuffer" value="0" />
        </xf:action>
       </xf:trigger>
      </xf:case>

Outline (Conclusions)

  1. Server-Side Web Technologies [17]
    1. Static Web Pages [2]
    2. Server-Side Includes (SSI) [6]
    3. Common Gateway Interface (CGI) [5]
    4. Java and the Web [3]
  2. Dynamic HTML (DHTML) [3]
  3. Asynchronous JavaScript and XML (AJAX) [3]
  4. Server-Side Languages [11]
  5. Declarative Approaches [26]
    1. XForms Deployment [3]
    2. XForms Architecture [6]
    3. Controls [11]
    4. Actions and Events [4]
  6. Conclusions [1]

Great Variability