Welcome! Web Development and Programming V22.0380 - section 1

1
Welcome!Web Development and Programming
V22.0380 - section 1

• Professor Sana Odeh
• odeh_at_cs.nyu.edu
• Office hoursThursday 12-1pm, room 418 in WWH

2
Course Description

• Web Development and Programming
• Focuses on
• Foundation of the web
• Client-Side programming
• Server-Side programming
• Server technologies
• XML technologies

3
Course Description

• The course focus is building dynamic and
  interactive web-based sites that can be used for
  E-commerce using the following applications
• Client- side applications HTML, JavaScripts,
  Java Applets
• Server side applications Per- CGI, Server Side
  Includes (SSI)
• Server technologies installations,
  configurations and security
• XML technologies

4
Administrative Matters
5
Prerequisites

• Computers in Principle Practice I - V22.0004
• and
• One semester of programming in C, or equivalent
  programming experience such as Java or Pascal.
• You must be familiar with programming and HTML

6
Text Bookshttp//www.cs.nyu.edu/courses/fall05/V2
2.0380-001/textbooks.htm

• I couldnt find one text book that covered all
  the material.
• All are now available at the NYU Bookstore,
  Barnes Noble, Amazon.com, etc.

7
Required text books

• 1. Javascript for the World Wide Web
• Visual Quickstart Guide
• by Tom Negrino and Dori Smith
• Peachpit Press
• 2. Perl and CGI for the World Wide Web Visual
  QuickStart Guide, Second Edition
• Author Elizabeth Castro
• Peachpit Press
• 3. XML for the World Wide Web Visual QuickStart
  Guide
• By Elizabeth Castro
• Peachpit Press

8
Lecture Notes

• Most lecture notes will be available as Power
  Point Slides
• You can easily download these from the course web
  site (more later)

9
Computer Accounts

• Most development will be performed on the UNIX
• i5.nyu.edu
• For Development, we will be using
• Any Text Editor you like, e.g. vi, pico, etc.

10
I5 Accounts

• If you are registered for this course, you
  already have an i5 account.
• Your i5.nyu.edu system uses NYUHome NetID as
  their username, and their central NYU single
  sign-on password to log in.
• You need an active NYUHome account to login to
  your i5 account.
• To set, or change this password, go to
  http//start.nyu.edu

11
Exams and Grading

• Grade Distribution
• 8 Assignments (50)
• Midterm exam (20)
• Final exam (30)

12
A Word About Cheating

• For the purposes of this class, cheating is
  defined as
• Copying all or part of another student's
  homework, project or exam.
• Allowing another student to copy all or part of
  your homework, project, or exam.
• Discussing homework concepts is fine, but you
  must submit your own work
• If you are caught cheating, you will receive an
  immediate FAILURE for the course.

13
Student Civility

• In an effort to make this class enjoyable for
  everybody
• Please be on time to class!
• Please do not talk to your friends and neighbors
  in class!
• It disturbs everyone, and makes it hard to
  concentrate.
• If you have a question, just ask me!
• Please turn your pagers and cell-phones off!

14
Getting Help Whenever you have a question about
the course material, please feel free to drop by
during my office hours or write me an email
message. If at any time you feel that you are
falling behind or are overwhelmed by the
material, let me know I will be very happy to
help you.

• Help is always available!
• Option1 Come to my Office Hours
• Thursday. , 12pm 100 pm
• Location Room 418 Warren Weaver Hall
• I get bored when nobody visits!
• If you cannot make my office hours, I will be
  happy to make an appointment with you.
• Please try to give me advance warning when you
  need an appointment.
• Option 2 Go see class tutor or write to class
  e-tutor for help

15
Course Web Site

• The Course Web Site is available at
• http//www.cs.nyu.edu/courses/fall05/V22.0380-001
  /index.html
• Lets check it out

16
Syllabus

• Available online at the course web site.
• Lets take a look at what we will be covering.

17
Foundations of the Web
18
Foundations of the Web

• To build Web applications, you first need to
  understand the foundations of the web
• History of the Internet and the Web
• HyperText Markup Language (HTML)
• Web protocols (HTTP)

19
History of the Web

• To understand the future, you have to understand
  the past.
• By understanding history, you also gain a much
  better understanding of the technology.
• We will focus on
• Origins of the Web
• Revolutionary Ideas of the Web
• Historical battle over web standards

20
HTML

• Most students are probably already familiar with
  HTML, but we will spend two weeks to cover the
  basics.
• HTML is the language of the web.
• Used to create simple to very complex web pages.
• Focus on HTML Tables, Forms, Multimedia, HTML
  Standards, HTML in the Real World,
  Accessibility, and Performance.

21
HTML Preview A Sample Form

• ltFORM ACTION"http//www.ecerami.com/servlet/cores
  ervlets.ShowParameters" METHOD"POST"gt
• First Name
• ltINPUT TYPETEXT NAMEfirst SIZE20 MAXLENGTH20gt
• ltBRgt
• Last Name
• ltINPUT TYPETEXT NAMElast SIZE20 MAXLENGTH20gt
• ltBRgt
• Password
• ltINPUT TYPEPASSWORD NAMEpassword SIZE20
  MAXLENGTH20gt
• ltBRgt
• ltINPUT TYPESUBMIT VALUE"Submit"gt
• lt/FORMgt

22
HTTP

• HyperText Transfer Protocol The defined
  standard of communication between web browsers
  and web servers.
• We will learn how it works and how does it
  affect web applications

23
Client Side programmingJavaScript
24
JavaScript

• A very effective for building interactive web
  applications.
• Is a semi-object-oriented scripting language for
  creating dynamic and interactive content for the
  world wide web.
• We will write javascript programs
• to validate forms
• performs a browser check
• We will use the Document Object model (DOM) to
• Manipulates frames, images, and text to create
  dynamic websites.

25
Sample JavaScript

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• lth1gtltcentergtImage swappinglt/centergtlt/h1gt
• ltimg src"nyc1.gif" nameimage1gt
• ltscript languageJavaScriptgt
• // Create an image array containing two images to
  swap with an image already loaded nyc1.gif
• var manyimages new Array("nyc2.gif","nyc3.gif")
  
• var imageindex prompt("Please enter image number
  0 or 1 to swap the image on page with a different
  one","")
• // Use the number entered above to change the
  image on the page
• document.images"image1".src
  manyimagesimageindex

26
Server Technologies
27
Server Technologies

• Server is a a specialized software that allows a
  computer connected to the Internet to store and
  serve documents such as text, images, sound video
  and so on.
• When you develop web projects you must understand
  how the server will be effected by your
  applications such as security and load.
• Server installation , configuration and
  security
• The course provides an overview of
• popular server applications
• Server installation, and configuration.
• We will focus on the Apache server which is the
  most popular and secure server used today.
• Students learn to access Apache server data and
  logs.

28
Server side TechnologiesSSI Perl-CGI
29
Common Gateway InterfaceCGI

• A generic framework for building dynamic web
  applications.
• Usually written in Perl.
• For example
• User submits a search keyword.
• Perl program searches file system and returns
  matches.
• Students will write code to process, search, list
  and sort data from and into the web and from and
  into a simple database file
• Java Servlets is also an effective framework for
  building interactive frames. It is more
  complicated (need to be advance in JAVA )

30
Server Side includes (SSI)

• Server-Side Includes are commands which include
  external data in your HTML document.
• Manipulate environmental server variables to use
  in your programs

31
Sample SSI file

• lthtmlgt
• ltheadgt
• lttitlegt SSI to print Datelt/titlegt
• lt/headgt
• ltbodygt
• SSI to print date when index.html was last
  modified
• lt!--config timefmt"B Y" --gt
• lt!--flastmod virtual"index.html" --gt
• ltPgt
• When this script was last modified
• lt!--config timefmt"B Y" --gt
• lt!--flastmod virtual"modssi.shtml" --gt
• lt/bodygt
• lt/htmlgt

32

• Sample CGI script processing data from the web
  via a form
• !/usr/local/bin/perl
• use CGI "param"
• fname param('fullname')
• addr param('address')
• _at_choice param('flavor')
• _at_topp param('topping')
• cc param('creditCard')
• print "Content-type text/html \n"
• print "\n"
• print "
• ltHTMLgt
• ltHEADgt
• ltTITLEgtThank Yoult/TITLEgt
• ltH3gtWe will process your order as soon as
  possible! ltbrgt
• Please stop by again!lt/H2gt lt/centergt
• lthrgt

33
How Client-side and server-side applications
interact
CGI SSI Servlet PHP JSP ASP
Web Browser (Client side processing) HTML JavaScri
pt Java Applets
Web Server
HTTP
Databases
34
XML TechnologiesDTD and XLS
35
eXtensible Markup Language

• A new standard for creating data formats on the
  web.
• Unlike HTML which has a fixed set of tags, XML
  enables you to create new tags and new data
  formats.
• XML is maturing, and is now considered essential
  for web development.

36
Applications of XML

• Widely used today in major applications
• Search Engines
• News Distribution
• E-Commerce
• Real Estate
• Genetics
• Defense Department Applications

37
XML Topics

• We will cover XML extensively
• Introduction to XML and its applications
• Document Type Definitions (DTDs)
• XSL Extensible Stylesheet language

38
Sample of xml document encoding CD
Cataloghttp//www.nyu.edu/classes/odeh/xml/cd_cat
alog.xml

• lt?xml version"1.0"?gt
• ltCATALOGgt
• ltCDgt
• ltTITLEgtEmpire Burlesquelt/TITLEgt
• ltARTISTgtBob Dylanlt/ARTISTgt
• ltCOUNTRYgtUSAlt/COUNTRYgt
• ltCOMPANYgtColumbialt/COMPANYgt
• ltPRICEgt10.90lt/PRICEgt
• ltYEARgt1985lt/YEARgt
• lt/CDgt
• ltCDgt
• ltTITLEgtHide your heartlt/TITLEgt
• ltARTISTgtBonnie Tylorlt/ARTISTgt
• ltCOUNTRYgtUKlt/COUNTRYgt
• ltCOMPANYgtCBS Recordslt/COMPANYgt
• ltPRICEgt9.90lt/PRICEgt
• ltYEARgt1988lt/YEARgt
• lt/CDgt
• ltCDgt

39
Live XML Demo

• Go to http//w.moreover.com/dev/xml/
• Click on one of the XML Links.
• These represent live news feeds that have been
  encoded in XML.
• Used last year as part of the final programming
  project.

40
Good luck! Please speak to me if you have
questions!