SlideShare a Scribd company logo
23-Jul-24 Advanced Programming
Spring 2002
Web programming
Henning Schulzrinne
Dept. of Computer Science
Columbia University
23-Jul-24 Advanced Programming
Spring 2002
2
Web programming
 Web services vs. "classical" web
programming
 Client vs. server programming
 client: JavaScript, Java
 HTML-centric vs. program-centric
 HTML-centric: PHP, ASP
 cgi, fast-cgi
 (Java) servlet
 data model: Java servlet, database
23-Jul-24 Advanced Programming
Spring 2002
3
Web services vs. web
programming
 web services = remote procedure call
 we saw SOAP
 structured data (XML)
 methods and responses
 generally, for machine consumption
 web programming  generate HTML pages
 for humans
 often, database-driven
 replacement for IBM 3270 terminals ...
23-Jul-24 Advanced Programming
Spring 2002
4
Client vs. server
programming
 Execute code on client:
 download Java applet  self-contained
programming environment
 JavaScript (aka ECMAscript):
 modify and get values from HTML ("document
object model" – DOM)
 Execute code on server  generate
document
 state maintenance (HTTP stateless)
 login, shopping cart, preferences
23-Jul-24 Advanced Programming
Spring 2002
5
Taxonomy
embedded in HTML separate
server SSI, ASP, PHP, JSP,
CFM
server API (NSAPI),
cgi, servlets
client JavaScript Java applets, plug-in
23-Jul-24 Advanced Programming
Spring 2002
6
Example: JavaScript –
cookies
var expires = new Date()
var today = new Date()
function setCookie(name, value, hours) {
var expire = new Date();
expire.setTime (expire.getTime() + (1000 * 60 * 60 *
hours));
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" +
expire.toGMTString()))
}
function unsetCookie(name) {
var exp = new Date();
exp.setTime(today.getTime() - 10);
document.cookie = name + "=" + "; expires=" +
exp.toGMTString()
}
expires.setTime(today.getTime() + 86400*365)
23-Jul-24 Advanced Programming
Spring 2002
7
JavaScript – DOM
function tz (f,v) {
var t = -1;
switch (f[v].value) {
case "US": t=128; break;
case "CI": t=0; break;
case "GH": t=1; break;
..
}
if (t != -1) {
f.form.timezone.options[t].selected = true
}
}
23-Jul-24 Advanced Programming
Spring 2002
8
Web as RPC
 request = HTTP GET, PUT
 response (result): headers + body
 object identifier ~ URL
 typed data (XML) vs. HTML
 from constant  mostly constant 
completely on-demand
23-Jul-24 Advanced Programming
Spring 2002
9
Server-side include
 .shtml documents (or configured by default
for all .html documents)
 include in HMTL/XML comments
<!-- #element attribute=value
attribute=value ... -- >
 limited scripting: if/else, include, exec,
variables
 primarily for conditional inclusion, boilerplate
 security issues: exec
23-Jul-24 Advanced Programming
Spring 2002
10
SSI example
 Columbia CS home page
<html>
<head><TITLE>Computer Science: Welcome </TITLE>
<script language=javascript>
var section = "home";
var subsection = "home";
var subsectionID = "-1";
</script>
</head>
<!--#set var="SECTION" value="HOME" -->
<!--#include file="top.inc" -->
<!--#include file="home.txt" -->
</tr> </table>
<!--#include file="bottom.txt" -->
</html>
23-Jul-24 Advanced Programming
Spring 2002
11
SSI Example
<body>
<h1>SSI Test</h1>
The document was last modified on
<!-- #flastmod file="$DOCUMENT_NAME" 
and has <!-- #fsize
file="$DOCUMENT_NAME" -- > bytes.
<h2>Environment</h2>
<!-- #printenv 
</pre>
23-Jul-24 Advanced Programming
Spring 2002
12
Common gateway interface
(cgi)
 Earliest attempt at dynamic web content
 language-independent
 passes HTTP request information via
 command line (ISINDEX) – rarely used
 environment variables: system info + query string
(GET)
 request body (POST)  standard input
 return HTML or XML via standard output
 non-parsed headers (NPH) return complete
response
23-Jul-24 Advanced Programming
Spring 2002
13
cgi arguments
 application/x-www-form-urlencoded
format
 space characters  "+"
 escape (%xx) reserved characters
 name=value pairs separated by &
 GET:
foo.cgi?name=John+Doe&gender=male&family=5&city=kent
&city=miami&other=abc%0D%0Adef&nickname=J%26D
 POST: include in body of message
23-Jul-24 Advanced Programming
Spring 2002
14
cgi forms
 single form per submission
<form action=scripturi method=GET|POST>
form fields:
<input type="text" name="text1" size=10
maxlength=15 value="Initial text">
<input type="hidden" name="state"
value="secret">
<input type=radio name=radio value=WNYC
checked>
<input type=radio name=radio value=KQED>
<input type=submit value="Submit">
23-Jul-24 Advanced Programming
Spring 2002
15
Web state
 State:
 stateless
 state completely stored on client
 state referenced by client, stored on server
(most common)
 Mechanisms:
 hidden form fields
 URL parameters
 cookies (HTTP headers)
23-Jul-24 Advanced Programming
Spring 2002
16
cgi mechanics
 either called .cgi in HTML directory or
stored in cgi-bin
 in CS, both /home/alice/html/foo.cgi or
/home/alice/secure_html/foo.cgi work
 executable (script file)
 runs as nobody or as owning user
(~user/mycgi.cgi)
 store secret data off the document tree!
23-Jul-24 Advanced Programming
Spring 2002
17
SQL interface
 Most common web model:
 cgi script (or Java servlet) accesses
database
 database via TCP connection (ODBC, JDBC,
script)
 n-tier model:
 delegate "business logic" to RPC-based
server
 XML-based model:
 generate XML, render via XSLT
23-Jul-24 Advanced Programming
Spring 2002
18
Tcl cgi example
set env(LD_LIBRARY_PATH) /home/hgs/sun5/lib
load $env(LD_LIBRARY_PATH)/libfbsql.so
lappend auto_path /home/hgs/html/edas3
lappend auto_path /home/hgs/lib
package require cgi
cgi_debug –on
cgi_eval {
sql connect dbhost.columbia.edu dbuser secret
cgi_body {
...
}
sql disconnect
}

More Related Content

Similar to web programming basics(Web programming basics).ppt (20)

PDF
spring Boot Tutorial Part 1(JPA&Hibernate)
abdelr7man3mad2004
 
PPT
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
PPTX
World wide web architecture presentation
ImMe Khan
 
PDF
Unit 02: Web Technologies (2/2)
DSBW 2011/2002 - Carles Farré - Barcelona Tech
 
PPTX
SCWCD : The web client model : CHAP : 1
Ben Abdallah Helmi
 
PDF
Internet programming lecture 1
Mohammed Hussein
 
PPTX
CS8651 IP Unit 3.pptx
Vigneshkumar Ponnusamy
 
PPT
introduction to web application development
FLYMAN TECHNOLOGY LIMITED
 
PPT
21. Application Development and Administration in DBMS
koolkampus
 
PPTX
Languages and tools for web programming
alamelumani
 
PPTX
Languages and tools for web programming
Alamelu
 
PDF
Unit v
APARNA P
 
DOCX
Unit 1st and 3rd notes of java
Niraj Bharambe
 
PPTX
Ethical hacking Chapter 10 - Exploiting Web Servers - Eric Vanderburg
Eric Vanderburg
 
PPTX
SCWCD : The web client model
Ben Abdallah Helmi
 
PPTX
Common Gateway Interface ppt
OECLIB Odisha Electronics Control Library
 
PPT
Ecom 1
Santosh Pandey
 
PPT
Servlet
Rajesh Roky
 
PPT
Ch-1_.ppt
berihunmolla2
 
PPT
Server side
philipsinter
 
spring Boot Tutorial Part 1(JPA&Hibernate)
abdelr7man3mad2004
 
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
World wide web architecture presentation
ImMe Khan
 
Unit 02: Web Technologies (2/2)
DSBW 2011/2002 - Carles Farré - Barcelona Tech
 
SCWCD : The web client model : CHAP : 1
Ben Abdallah Helmi
 
Internet programming lecture 1
Mohammed Hussein
 
CS8651 IP Unit 3.pptx
Vigneshkumar Ponnusamy
 
introduction to web application development
FLYMAN TECHNOLOGY LIMITED
 
21. Application Development and Administration in DBMS
koolkampus
 
Languages and tools for web programming
alamelumani
 
Languages and tools for web programming
Alamelu
 
Unit v
APARNA P
 
Unit 1st and 3rd notes of java
Niraj Bharambe
 
Ethical hacking Chapter 10 - Exploiting Web Servers - Eric Vanderburg
Eric Vanderburg
 
SCWCD : The web client model
Ben Abdallah Helmi
 
Common Gateway Interface ppt
OECLIB Odisha Electronics Control Library
 
Servlet
Rajesh Roky
 
Ch-1_.ppt
berihunmolla2
 
Server side
philipsinter
 

Recently uploaded (20)

PPTX
www ecommerce web based architecture.pptx
revathi148366
 
PPTX
Introduction_to_GD&T_Complete.pptx_growww
rajkumarsingh764766
 
PPTX
presentation1-150706090530-lva1-app6892.pptx
sachidanacabel
 
PDF
inbound6040378307114221962.pdf.dowload...
kayesetinasan
 
PPTX
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
DOCX
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
 
PPTX
PTC '25.pptx VXFGHDZDGDRYRIYUUOIUOPIO'KL
JorrehtyMRegondola
 
PPTX
BOILER STEAM bana M ntpc kahalgaon boiler .pptx
didikesaadi1108
 
PDF
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
PPTX
The Costly Mistakes Homeowners Make in Dining Room Renovations
anurag anand
 
PDF
HISTORY OF Ethiopia and Horn of African
dereab29
 
PPTX
Turn prompts into brochures - AI Brochure Generator
Venngage AI Infographic Generator
 
PDF
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
PPTX
ai teaching assistant for visual learning.pptx
jamesmay2663
 
PDF
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
PPTX
assignmesmcnjjanckujeckusent2-summit1.pptx
DoanHoaiAnhDuongK18C
 
PPTX
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
PPTX
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
PDF
ABS system PPT 2025 for used automatic backing system .pdf
altron1331
 
PPTX
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
www ecommerce web based architecture.pptx
revathi148366
 
Introduction_to_GD&T_Complete.pptx_growww
rajkumarsingh764766
 
presentation1-150706090530-lva1-app6892.pptx
sachidanacabel
 
inbound6040378307114221962.pdf.dowload...
kayesetinasan
 
Round 1 Final Assessment-Chelsea Black.pptx
indiapoliticscom
 
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
 
PTC '25.pptx VXFGHDZDGDRYRIYUUOIUOPIO'KL
JorrehtyMRegondola
 
BOILER STEAM bana M ntpc kahalgaon boiler .pptx
didikesaadi1108
 
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
The Costly Mistakes Homeowners Make in Dining Room Renovations
anurag anand
 
HISTORY OF Ethiopia and Horn of African
dereab29
 
Turn prompts into brochures - AI Brochure Generator
Venngage AI Infographic Generator
 
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
ai teaching assistant for visual learning.pptx
jamesmay2663
 
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
assignmesmcnjjanckujeckusent2-summit1.pptx
DoanHoaiAnhDuongK18C
 
Project Report on Corrosion (1).pptxkkkk
kaushikpkrishna2024
 
Robotic Arm Control System for help of robots you can easily operate things t...
altron1331
 
ABS system PPT 2025 for used automatic backing system .pdf
altron1331
 
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
Ad

web programming basics(Web programming basics).ppt

  • 1. 23-Jul-24 Advanced Programming Spring 2002 Web programming Henning Schulzrinne Dept. of Computer Science Columbia University
  • 2. 23-Jul-24 Advanced Programming Spring 2002 2 Web programming  Web services vs. "classical" web programming  Client vs. server programming  client: JavaScript, Java  HTML-centric vs. program-centric  HTML-centric: PHP, ASP  cgi, fast-cgi  (Java) servlet  data model: Java servlet, database
  • 3. 23-Jul-24 Advanced Programming Spring 2002 3 Web services vs. web programming  web services = remote procedure call  we saw SOAP  structured data (XML)  methods and responses  generally, for machine consumption  web programming  generate HTML pages  for humans  often, database-driven  replacement for IBM 3270 terminals ...
  • 4. 23-Jul-24 Advanced Programming Spring 2002 4 Client vs. server programming  Execute code on client:  download Java applet  self-contained programming environment  JavaScript (aka ECMAscript):  modify and get values from HTML ("document object model" – DOM)  Execute code on server  generate document  state maintenance (HTTP stateless)  login, shopping cart, preferences
  • 5. 23-Jul-24 Advanced Programming Spring 2002 5 Taxonomy embedded in HTML separate server SSI, ASP, PHP, JSP, CFM server API (NSAPI), cgi, servlets client JavaScript Java applets, plug-in
  • 6. 23-Jul-24 Advanced Programming Spring 2002 6 Example: JavaScript – cookies var expires = new Date() var today = new Date() function setCookie(name, value, hours) { var expire = new Date(); expire.setTime (expire.getTime() + (1000 * 60 * 60 * hours)); document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())) } function unsetCookie(name) { var exp = new Date(); exp.setTime(today.getTime() - 10); document.cookie = name + "=" + "; expires=" + exp.toGMTString() } expires.setTime(today.getTime() + 86400*365)
  • 7. 23-Jul-24 Advanced Programming Spring 2002 7 JavaScript – DOM function tz (f,v) { var t = -1; switch (f[v].value) { case "US": t=128; break; case "CI": t=0; break; case "GH": t=1; break; .. } if (t != -1) { f.form.timezone.options[t].selected = true } }
  • 8. 23-Jul-24 Advanced Programming Spring 2002 8 Web as RPC  request = HTTP GET, PUT  response (result): headers + body  object identifier ~ URL  typed data (XML) vs. HTML  from constant  mostly constant  completely on-demand
  • 9. 23-Jul-24 Advanced Programming Spring 2002 9 Server-side include  .shtml documents (or configured by default for all .html documents)  include in HMTL/XML comments <!-- #element attribute=value attribute=value ... -- >  limited scripting: if/else, include, exec, variables  primarily for conditional inclusion, boilerplate  security issues: exec
  • 10. 23-Jul-24 Advanced Programming Spring 2002 10 SSI example  Columbia CS home page <html> <head><TITLE>Computer Science: Welcome </TITLE> <script language=javascript> var section = "home"; var subsection = "home"; var subsectionID = "-1"; </script> </head> <!--#set var="SECTION" value="HOME" --> <!--#include file="top.inc" --> <!--#include file="home.txt" --> </tr> </table> <!--#include file="bottom.txt" --> </html>
  • 11. 23-Jul-24 Advanced Programming Spring 2002 11 SSI Example <body> <h1>SSI Test</h1> The document was last modified on <!-- #flastmod file="$DOCUMENT_NAME"  and has <!-- #fsize file="$DOCUMENT_NAME" -- > bytes. <h2>Environment</h2> <!-- #printenv  </pre>
  • 12. 23-Jul-24 Advanced Programming Spring 2002 12 Common gateway interface (cgi)  Earliest attempt at dynamic web content  language-independent  passes HTTP request information via  command line (ISINDEX) – rarely used  environment variables: system info + query string (GET)  request body (POST)  standard input  return HTML or XML via standard output  non-parsed headers (NPH) return complete response
  • 13. 23-Jul-24 Advanced Programming Spring 2002 13 cgi arguments  application/x-www-form-urlencoded format  space characters  "+"  escape (%xx) reserved characters  name=value pairs separated by &  GET: foo.cgi?name=John+Doe&gender=male&family=5&city=kent &city=miami&other=abc%0D%0Adef&nickname=J%26D  POST: include in body of message
  • 14. 23-Jul-24 Advanced Programming Spring 2002 14 cgi forms  single form per submission <form action=scripturi method=GET|POST> form fields: <input type="text" name="text1" size=10 maxlength=15 value="Initial text"> <input type="hidden" name="state" value="secret"> <input type=radio name=radio value=WNYC checked> <input type=radio name=radio value=KQED> <input type=submit value="Submit">
  • 15. 23-Jul-24 Advanced Programming Spring 2002 15 Web state  State:  stateless  state completely stored on client  state referenced by client, stored on server (most common)  Mechanisms:  hidden form fields  URL parameters  cookies (HTTP headers)
  • 16. 23-Jul-24 Advanced Programming Spring 2002 16 cgi mechanics  either called .cgi in HTML directory or stored in cgi-bin  in CS, both /home/alice/html/foo.cgi or /home/alice/secure_html/foo.cgi work  executable (script file)  runs as nobody or as owning user (~user/mycgi.cgi)  store secret data off the document tree!
  • 17. 23-Jul-24 Advanced Programming Spring 2002 17 SQL interface  Most common web model:  cgi script (or Java servlet) accesses database  database via TCP connection (ODBC, JDBC, script)  n-tier model:  delegate "business logic" to RPC-based server  XML-based model:  generate XML, render via XSLT
  • 18. 23-Jul-24 Advanced Programming Spring 2002 18 Tcl cgi example set env(LD_LIBRARY_PATH) /home/hgs/sun5/lib load $env(LD_LIBRARY_PATH)/libfbsql.so lappend auto_path /home/hgs/html/edas3 lappend auto_path /home/hgs/lib package require cgi cgi_debug –on cgi_eval { sql connect dbhost.columbia.edu dbuser secret cgi_body { ... } sql disconnect }