CS380 1
WEB PROGRAMMING
Instructor: Ahmed Anter
Course Objectives
2
At the end of this class you will be able to:
Design and implement a professional website
Author web pages using HTML
Make stylistic decisions with CSS
Create interactive websites with JavaScript and jQuery
Enhance interactive websites with AJAX and XML
Work with JSON data for exchange
Use ASP.net for Web server programming based on IIS
Course Objectives (cont.)
3
At the end of this class you will be able to:
Understand the client-server programming model and
apply this to your designs
Create your own interactive web programming
portfolio
Speak the web programming lingo
Have fun with web programming!
Lectures
6
Lectures will be interactive. This means:
You will need to study the new material before every
lecture (slides, book, and online material)
We will have a lab on every lecture, so you will need to
code in almost every lecture
You will post your questions on the discussion board
before each lecture. If you do not post any questions, I
assume you have understood everything. Therefore…
You may be called in class to explain the material to
your classmates
Textbook
7
Use the textbook:
“Web Programming Step by Step”
by Marty Stepp, Jessica Miller,
Victoria Kirst
CS380
Grading
8
Quizzes & Homework 10%
Project 20%
MidTerm 20%
Final exam 50%
Total 100%
Homework and Programming projects will be posted
online on the class webpage with you TA.
CS380
Programming Project
9
Your project should have five out of the following
features (choose and document these):
1. Use a Server-Side Framework - use a technology
other than HTML/CSS on the server.
2. AJAX - use AJAX to turn your web pages into dynamic
web applications.
3. Web Service - use an external web service, mashed up
with your own application to create something even
better.
Programming Project
9
4. Design & Evaluate - think carefully about how users
will use your site, design a great interface, and evaluate
it with real people.
5. Go Mobile - create a version of your project designed
to go mobile.
6. Server-Side Processing - do processing on the server
to prepare for user requests in advance.
7. Multimedia – use sound or video to enhance the user
experience.
Homework
9
It will involve:
Applying what we learned in class
Clean design and coding
Clear documentation
Homework will be completed individually
15 The INTERNET… and a bit of history
What is the internet?
11
A collection of computer networks that use a
protocol to exchange data
Is the World Wide Web (WWW) and the internet
the same?
Brief history
12
Began as a US Department of Defense
network called ARPANET (1960s-70s)
Packet switching (in the 60s)
E-mail is born on 1971
TCP/IP beginning on 1974 (Vinton Cerf)
USENET (1979)
By 1987: Internet includes
nearly 30,000 hosts
Brief history (cont.)
13
WWW created in 1989-91 by Tim Berners-Lee
Popular web browsers released:
Netscape 1994
IE 1995
Amazon.com opens in 1995
Google January 1996
Wikipedia launched in 2001
MySpace opens in 2003
Facebook February 2004
Wikipedia launched in 2001
MySpace opens in 2003
Facebook February 2004
14 CS380
The future of the internet?
15
CS380
Key aspects of the internet
16
Sub-networks are independent
Computers can dynamically join and leave the
network
Built on open standards
Lack of centralized control (mostly)
Everyone can use it with simple, commonly available
software
People and organizations
17
Internet Engineering Task Force (IETF): internet
protocol standards
Internet Corporation for Assigned Names and
Numbers (ICANN): decides top-level domain names
World Wide Web Consortium (W3C): web
standards
Layered architecture
18 CS380
Internet Protocol (IP)
19
Simple protocol for data exchange between
computers
IP Addresses:
32-bitfor IPv5
128-bit for IPv6
CS380
Transmission Control Protocol (TCP)
20
Adds multiplexing, guaranteed message delivery on
top of IP
Multiplexing: multiple programs using the same IP
address
Port: a number given to each program or service
port 80: web browser (port 443 for secure browsing)
port 25: email
port 22: ssh
Some programs (games, streaming media programs)
use simpler UDP protocol instead of TCP
CS380
Web Servers
21
Web server: software that listens for web page
requests
Apache
Microsoft Internet
Information Server (IIS)
CS380
Application Server
22
Software framework that provides an environment
where applications can run
Apache
Glassfish
WebSphere
WebLogic
CS380
Web Browser
23
Web browser: fetches/displays documents from
web servers
Mozilla Firefox
Microsoft Internet Explorer (IE)
Apple Safari
Google Chrome
Opera
Domain Name Server (DNS)
24
Set of servers that map written names to IP
addresses
Example: ju.edu → 204.29.160.73
Many systems maintain a local cache called a hosts
file
Windows: C:\Windows\system32\drivers\etc\hosts
Mac: /private/etc/hosts
Linux: /etc/hosts
Uniform Resource Locator (URL)
25
Identifier for the location of a document on a web
site
Example: http://dept.ju.edu/cs/index.html
Upon entering this URL into the browser, it would:
ask the DNS server for the IP address of dept.ju.edu
connect to that IP address at port 80
ask the server to GET /cs/index.html
display the resulting page on the screen
Hypertext Transport Protocol (HTTP)
26
Set of commands understood by a web server and
sent from a browser
Some HTTP commands (your browser sends these
internally):
GET filename : download
POST filename : send a web form response
PUT filename : upload
Exercise: simulate a browser with a terminal window
HTTP Error Codes
27
When something goes wrong, the web server
returns a special "error code" number
Common error codes:
Number Meaning
200 OK
page has moved (permanently or
301-303
temporarily)
you are forbidden to access this
403
page
404 page not found
500 internal server error
Internet Media (“MIME”) types
28
MIME type file extension
text/html .html
text/plain .txt
image/gif .gif
image/jpeg .jpg
video/quicktime .mov
application/octet-stream .exe
Web Languages
29
Hypertext Markup Language (HTML): used for
writing web pages
Cascading Style Sheets (CSS): stylistic info for web
pages
PHP Hypertext Processor (PHP): dynamically create
pages on a web server
JavaScript: interactive and programmable web
pages
Web Languages(cont.)
30
Asynchronous JavaScript and XML (Ajax): accessing
data for web applications
eXtensible Markup Language (XML): metalanguage
for organizing data
