1/16 Steven Leung Introduction to HTML/CGI/JavaScript Intro to HTML/CGI/JavaScript How the Web Works HTML: Basic Concept CGI: Basic Concept JavaScript:

Slides:

Advertisements

Similar presentations

© 2002 D & D Enterprises 1 Linking Images For Navigation & Clickable Image Maps.

Advertisements

1 Copyright © 2002 Pearson Education, Inc.. 2 Chapter 1 Introduction to Perl and CGI.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 9 Using Perl for CGI Programming.

Web forms and CGI scripts Dr. Andrew C.R. Martin

HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,

4. Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I

Tables Tables provide a means of organising the layout of data

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

Social Web Design 1 Darby Chang Social Web Design.

Molecular Biomedical Informatics Web Programming 1.

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.

CGI & HTML forms CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content.

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.

TCP/IP Protocol Suite 1 Copyright © The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 22 World Wide Web and HTTP.

1 Chapter 5 – Handling HTML Controls in Web Pages spring into PHP 5 by Steven Holzner Slides were developed by Jack Davis College of Information Science.

Server Side Programming Common Gateway Interface (CGI): Scripts generate Web pages or other files dynamically by processing form data and returning documents.

JavaScript Forms Form Validation Cookies CGI Programs.

Liang, Introduction to Java Programming, Sixth Edition, (c) 2005 Pearson Education, Inc. All rights reserved Chapter 34 Servlets.

World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.

1 Static Web Pages Websites on Servers (The Big Picture) –Apache Tomcat can support static web pages –Primarily intended to support servlets and JSP –Some.

CP476 Internet Computing Browser and Web Server 1 Web Browsers A client software program that allows you to access and view Web pages on the Internet –Examples.

Session 2 Tables and forms in HTML Adapted by Sophie Peter from original document by Charlie Foulkes.

CGI Programming: Part 1. What is CGI? CGI = Common Gateway Interface Provides a standardized way for web browsers to: –Call programs on a server. –Pass.

Tutorial 6 Forms Section A - Working with Forms in JavaScript.

Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

INTRODUCTION TO WEB DATABASE PROGRAMMING

1 Homework / Exam Exam 3 –Solutions Posted –Questions? HW8 due next class Final Exam –See posted schedule Websites on UNIX systems Course Evaluations.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.

1 HTML and CGI Scripting CSC8304 – Computing Environments for Bioinformatics - Lecture 10.

1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.

Comp2513 Forms and CGI Server Applications Daniel L. Silver, Ph.D.

Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.

Server-side Scripting Powering the webs favourite services.

Internet / Intranet Fall 2000 Class 7. Brandeis University Internet/Intranet Spring Class 7 Agenda Project / Homework Discussion Forms Validating.

Internet / Intranet CIS-536 Class 7. 2 HTML Forms A Method to Allow Users to Pass Information to a CGI Script Forms Allow Information to Be Entered Via:

1 HTML References: A HTML Tutorial: /HTMLPrimer.html

HTML - Forms By Joaquin Vila, Ph.D.. Form Tag The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a.

Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.

Hypertext Markup Language HTML Hypertext is vaguely defined as interconnecting pieces of information in a non-sequential but usually relational, manner.

Python CGI programming

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.

Active Server Pages  In this chapter, you will learn:  How browsers and servers interacted on the Internet when the Internet first became popular 

Website Development with PHP and MySQL Saving Data.

1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.

HTML - Forms By Joaquin Vila, Ph.D.. Form Tag The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a.

W orld W ide W eb Client/Server design using TCP/IP Incorporates Other Client/Server Systems –ftp –gopher –mail Server runs on port 80, named httpd, exchanges.

XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.

Introduction to Programming the WWW I CMSC Winter 2003.

WWW: an Internet application Bill Chu. © Bei-Tseng Chu Aug 2000 WWW Web and HTTP WWW web is an interconnected information servers each server maintains.

1 WWW. 2 World Wide Web Major application protocol used on the Internet Simple interface Two concepts –Point –Click.

HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.

HTML(Hyper Text Markup Language) ByNaveen. Introduction HTML or Hyper Text Markup Language is the standard markup language Its used to create the web.

Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 

Module: Software Engineering of Web Applications Chapter 2: Technologies 1.

©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.

Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.

Week 10: HTML Forms HNDIT11062 – Web Development.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.

Lesson 11. CGI CGI is the interface between a Web page or browser and a Web server that is running a certain program/script. The CGI (Common Gateway Interface)

University of Kansas Department of Electrical Engineering and Computer Science Dr. Susan Gauch April 21, 2005 I T T C Introduction to Web Technologies.

Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.

How to Write Web Forms By Mimi Opkins.

Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.

MapServer In its most basic form, MapServer is a CGI program that sits inactive on your Web server. When a request is sent to MapServer, it uses.

Presentation transcript:

1/16 Steven Leung Introduction to HTML/CGI/JavaScript Intro to HTML/CGI/JavaScript How the Web Works HTML: Basic Concept CGI: Basic Concept JavaScript: It Is Dying Example 1: Test CGI with printenv Some Server Stuffs Example 2: Sort Cell Statistics

2/16 Steven Leung Introduction to HTML/CGI/JavaScript The Evolution of HTTP In the beginning … process Inter-Process Communication Models Shared memory Message passing client server Client-Server Computing Model Client sends a request Server responds web browser http server HyperText Transport Protocol (HTTP)

3/16 Steven Leung Introduction to HTML/CGI/JavaScript IP_Adr[:Port] Browser-Server Interaction browser httpd (server) Protocol (ftp, file) content of request URL 1 2 htdocs/ “root” asic/ index.html cgi-bin/* will cause server to execute the file cgi-bin/ * Javascript makes the browser do extra things HTML

4/16 Steven Leung Introduction to HTML/CGI/JavaScript Summary HTML files are consumed by the browsers Markers (Tags) tell the browser how to present the materials with the built-in GUI widgets Text objects like tables, fonts, paragraphs Graphic images UI FORM widgets like selection, checkbox, radio, button, etc. Embedded URLs (links) enable browser to communicate w/ server CGI scripts work on the server side Invoked by the ‘cgi-bin/’ entry in the request part of the URL Additional information from FORM is passed to the server Server then passes the info to script thru a set of env variables The script generates responses sent back to the browser by the server JavaScripts are embedded in the HTML files and work on the browser side (initially) Example: Check of valid data in forms

5/16 Steven Leung Introduction to HTML/CGI/JavaScript Whatever  Most of the HTML constructs are shown up here HTML: Structure of Non-Frame Files Container-type of tags has the form … is an example of one of the few non-container tags Displays are controlled by tags. Multiple spaces are treated as just one space. The tag tells the browser just display the text as is.

6/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML: Structure of Frame Files Frame Example Note: Cannot have body in Frame Files unit: pixel

7/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML: Some General Tips General structure of tags Beginning tag: Optional ending tag: The “container” (nested) image: Apply intuitively/sensibly Keep in mind the picture of the 3 functions of the Browser Generate the webpage display – the bulk of HTML tags Accept user inputs – via the form elements Send request messages to servers – Link, Source Attribute, and Form Form combines all of the above 3 functions and it’s where the CGI scripts come into the picture Two very convenient reverse engineering tools View source in the browser Netscape Composer The Bare Bones Guide to HTML

8/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML Form Made Simple size=# maxlength=# Additional Attributes checked text radio checkbox checked … submit/reset options Options: … button (In 4.0: button becomes a form object itself)

9/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI (Common Gateway Interface) httpd (server) static html browser Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … executable when req starts with cgi-bin/* CGI Program returns a header: Content-type: text/html or Location: Header must end with a blank line. GET: Form data appended to URL, limited sizePOST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. var1 = val1 var2 = val2... FORM var1 = val1 var2 = val2... cgi-lib.pl perl script

10/16 Steven Leung Introduction to HTML/CGI/JavaScript Javascript Allow webpage internal data to be changed on the client side Problem: IE and Netscape have some slight differences browser HTML Netscape’s Document Object Model JS

11/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI: Printenv with Get Method

12/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI: Printenv with Post Method

13/16 Steven Leung Introduction to HTML/CGI/JavaScript Some Server Stuffs Mosaic  Netscape  Apache Installation using port 80 (default) requires root password Child server daemon httpd assumes uid of nobody User/Group configurable The root path / in URL received maps to the DocumentRoot dir. (in the httpd.conf file), not the machine’s root directory When the server executes the cgi script, it assumes the uid of nobody, which normally has the least access rights Symbolic links depend on the configuration setup On www1: /… On file server nfs05: /import/departments/ asic/ cgi-bin/ dev/

14/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Initial Page

15/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Sort By Area/Descending

16/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Sort with Data Plot

17/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI (Common Gateway Interface httpd (server) static html browser Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … executable when req starts with cgi-bin/* CGI Program returns a header: Content-type: text/html or Location: Header must end with a blank line. GET: Form data appended to URL, limited sizePOST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. var1 = val1 var2 = val2... FORM var1 = val1 var2 = val2... cgi-lib.pl perl script

18/16 Steven Leung Introduction to HTML/CGI/JavaScript Algorithm of sort_cell_stat_png Save header lines Insert Save the rest of the lines (table) Sort the table according to the user criteria and save the line index into Generate 2 png files: Write out the data files to /tmp Left-shift the line number as x-coordinates for plotting Write out the CMD files (Bulks of sub gen_png) Execute gen_png csh script to actually (at end of sub gen_png) Generate 2 png files Delete the data file Write out the saved header Write out the table according to the sorted line index order