Welcome web development and programming v22 0061 section 1
1 / 41

Welcome Web Development and Programming V22.0061 - section 1 - PowerPoint PPT Presentation

  • Uploaded on

Welcome! Web Development and Programming V22.0061 - section 1. Professor: Sana’ Odeh [email protected] Office hours: Mon. 3pm - 4 pm in room 418 in WWH. Course Description. Web Development and Programming Focuses on: Foundation of the web Client-Side programming

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Welcome Web Development and Programming V22.0061 - section 1' - hadassah

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Welcome web development and programming v22 0061 section 1

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

Professor: Sana’ Odeh

[email protected]

Office hours: Mon. 3pm - 4 pm in room 418 in WWH

Course Introduction

Course description
Course Description

  • Web Development and Programming

    • Focuses on:

      • Foundation of the web

      • Client-Side programming

      • Server-Side programming

      • Server technologies

      • XML technologies

Course Introduction

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

Administrative matters

Administrative Matters

Course Introduction


  • 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

    Text books http www cs nyu edu courses fall07 v22 0061 001
    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

    Required text books
    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

    Lecture notes
    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

    Computer accounts
    Computer Accounts

    • Most development will be performed on the UNIX


    • For Development, we will be using:

      • Any Text Editor you like, e.g. vi, pico, etc.

    Course Introduction

    I5 accounts
    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

    Exams and grading
    Exams and Grading

    • Grade Distribution:

      • 6- 7 Assignments (50%)

      • Midterm exam (20%)

      • Group Project (30%)

      • No Final exam

    Course Introduction

    A word about cheating
    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

    Student civility
    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

    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

    Course web site
    Course Web Site

    • The Course Web Site is available at:


    • Let’s check it out…

    Course Introduction


    • Available online at the course web site.

    • Let’s take a look at what we will be covering….

    Course Introduction

    Foundations of the web

    Foundations of the Web

    Course Introduction

    Foundations of the web1
    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

    History of the web
    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


    • 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

    Html preview a sample form
    HTML Preview: A Sample Form

    <FORM ACTION="http://www.nyu.com/servlet/coreservlets.ShowParameters" METHOD="POST">

    First Name:



    Last Name:








    Course Introduction


    • 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

    Client side programming javascript

    Client Side programmingJavaScript

    Course Introduction


    • 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

    Sample javascript

    Sample JavaScript





    <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];




    Course Introduction

    How client side and server side applications interact
    How Client-side and server-side applications interact









    (Client side processing)



    Java Applets





    Course Introduction

    Server technologies

    Server Technologies

    Course Introduction

    Server technologies1
    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

    Server side technologies ssi perl cgi

    Server side TechnologiesSSI & Perl-CGI

    Course Introduction

    Common gateway interface cgi
    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

    Example 3
    Example 3

    PHP example




    <title>PHP test 3 </title>




    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>.";




    Course Introduction

    Server side includes ssi
    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

    Sample ssi file
    Sample SSI file



    <title> SSI to print Date</title>



    SSI to print date when index.html was last modified:

    <!--#config timefmt="%B %Y" -->

    <!--#flastmod virtual="index.html" -->


    When this script was last modified:

    <!--#config timefmt="%B %Y" -->

    <!--#flastmod virtual="modssi.shtml" -->



    Course Introduction

    Sample CGI script processing data from the web via a form



    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 "



    <TITLE>Thank You</TITLE>

    <H3>We will process your order as soon as possible! <br>

    Please stop by again!</H2> </center>


    <h2> Here is your information: </h2>


    <li> <p>$fname


    <li> <p>$choice[0]

    <li> <p>$topp[0]

    <li> <p>$cc


    </HTML> ";

    Course Introduction

    Xml technologies dtd and xls

    XML TechnologiesDTD and XLS

    Course Introduction

    Extensible markup language
    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

    Applications of xml
    Applications of XML

    • Widely used today in major applications:

      • Search Engines

      • News Distribution

      • E-Commerce

      • Real Estate

      • Genetics

      • Defense Department Applications

    Course Introduction

    Xml topics
    XML Topics

    • We will cover XML extensively:

      • Introduction to XML and its applications

      • Document Type Definitions (DTDs)

      • XSL: Extensible Stylesheet language

    Course Introduction

    Sample of xml document encoding cd catalog
    Sample of xml document encoding CD Catalog

    <?xml version="1.0"?>



    <TITLE>Empire Burlesque</TITLE>

    <ARTIST>Bob Dylan</ARTIST>







    <TITLE>Hide your heart</TITLE>

    <ARTIST>Bonnie Tylor</ARTIST>







    <TITLE>Unchain my heart</TITLE>

    <ARTIST>Joe Cocker</ARTIST>







    Course Introduction

    Live xml demo
    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

    Good luck!

    Please speak to me if you have questions!

    Course Introduction