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

1. Welcome!Web Development and Programming V22.0061 - section 1 Professor: Sana’ Odeh odeh@courant.nyu.edu Office hours: Mon. 3pm - 4 pm in room 418 in WWH Course Introduction

2. Course Description • Web Development and Programming • Focuses on: • Foundation of the web • Client-Side programming • Server-Side programming • Server technologies • XML technologies Course Introduction

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 • Server side applications: PHP, Server Side Includes (SSI) • Server technologies: installations, configurations and security • XML technologies Course Introduction

4. Administrative Matters Course Introduction

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 Course Introduction

6. Text Bookshttp://www.cs.nyu.edu/courses/fall07/V22.0061-001/ • I couldn’t find one text book that covered all the material. • All are now available at the NYU Bookstore, Barnes & Noble, Amazon.com, etc. Course Introduction

7. Required text books 1. Javascript for the World Wide Web ** Visual Quickstart Guide by Tom Negrino and Dori Smith Peachpit Press 2. PHP for the World Wide Web: Visual QuickStart Guide (2nd edition)
Author: by Larry Ullman
Peachpit Press 
ISBN-10: 0321245652
ISBN-13: 978-0321245656 3. XML for the World Wide Web: Visual QuickStart Guide By Elizabeth Castro Peachpit Press Course Introduction

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…) Course Introduction

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. Course Introduction

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 Course Introduction

11. Exams and Grading • Grade Distribution: • 6- 7 Assignments (50%) • Midterm exam (20%) • Group Project (30%) • No Final exam Course Introduction

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. Course Introduction

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! Course Introduction

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 • Mon. 3pm - 4 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 Course Introduction

15. Course Web Site • The Course Web Site is available at: http://www.cs.nyu.edu/courses/fall07/V22.0061-001/index.html • Let’s check it out… Course Introduction

16. Syllabus • Available online at the course web site. • Let’s take a look at what we will be covering…. Course Introduction

17. Foundations of the Web Course Introduction

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) Course Introduction

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 Course Introduction

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. Course Introduction

21. HTML Preview: A Sample Form <FORM ACTION="http://www.nyu.com/servlet/coreservlets.ShowParameters" METHOD="POST"> First Name: <INPUT TYPE=TEXT NAME=first SIZE=20 MAXLENGTH=20> <BR> Last Name: <INPUT TYPE=TEXT NAME=last SIZE=20 MAXLENGTH=20> <BR> Password: <INPUT TYPE=PASSWORD NAME=password SIZE=20 MAXLENGTH=20> <BR> <INPUT TYPE=SUBMIT VALUE="Submit"> </FORM> Course Introduction

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 Course Introduction

23. Client Side programmingJavaScript Course Introduction

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. Course Introduction

25. Sample JavaScript <html> <head> </head> <body> <h1><center>Image swapping</center></h1> <img src="nyc1.gif" name=image1> <script language=JavaScript> // 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 = manyimages[imageindex]; </script> </body> </html> Course Introduction

26. How Client-side and server-side applications interact CGI SSI Servlet PHP JSP ASP Web Browser (Client side processing) HTML JavaScript Java Applets Web Server HTTP Databases Course Introduction

27. Server Technologies Course Introduction

28. 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. Course Introduction

29. Server side TechnologiesSSI & Perl-CGI Course Introduction

30. 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 ) Course Introduction

31. Example 3 PHP example #!/usr/local/bin/php <HTML> <head> <title>PHP test 3 </title> </head> <body> <?php print("<b>Hello</b>, <i>World</i>!"); print("<h5><font color='#FF0000'>This is a sample page using PhP.</font></h5>"); /* You can write comments the way you would in C as well. Next we will look at examples using variables to store strings. */ $first_name = "Harry"; $last_name = "Potter"; $first_book = "The Sorcerer's Stone"; $second_book= "The Chamber of Secrets"; // Print some values of the variables: echo "The book <i>$first_book</i> is about $first_name $last_name."; echo "<br>The second book in the series is <i>$second_book</i>."; ?>  </body> </html> Course Introduction

32. 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 Course Introduction

33. Sample SSI file <html> <head> <title> SSI to print Date</title> </head> <body> SSI to print date when index.html was last modified: <!--#config timefmt="%B %Y" --> <!--#flastmod virtual="index.html" --> <P> When this script was last modified: <!--#config timefmt="%B %Y" --> <!--#flastmod virtual="modssi.shtml" --> </body> </html> Course Introduction

34. Sample CGI script processing data from the web via a form =========================================== #!/usr/local/bin/perl use CGI "param"; $fname = param('fullname'); $addr = param('address'); @choice = param('flavor'); @topp = param('topping'); $cc = param('creditCard'); print "Content-type: text/html \n"; print "\n"; print " <HTML> <HEAD> <TITLE>Thank You</TITLE> <H3>We will process your order as soon as possible! <br> Please stop by again!</H2> </center> <hr> <h2> Here is your information: </h2> <ul> <li> <p>$fname <li><p>$addr <li> <p>$choice[0] <li> <p>$topp[0] <li> <p>$cc </BODY> </HTML> "; Course Introduction

35. XML TechnologiesDTD and XLS Course Introduction

36. 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. Course Introduction

37. Applications of XML • Widely used today in major applications: • Search Engines • News Distribution • E-Commerce • Real Estate • Genetics • Defense Department Applications Course Introduction

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

39. Sample of xml document encoding CD Catalog <?xml version="1.0"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tylor</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Unchain my heart</TITLE> <ARTIST>Joe Cocker</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>EMI</COMPANY> <PRICE>8.20</PRICE> <YEAR>1987</YEAR> </CD> </CATALOG> Course Introduction

40. 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. Course Introduction

41. Good luck! Please speak to me if you have questions! Course Introduction