© Anselm Spoerri Web Design Information Visualization Course Prof. Anselm Spoerri

Slides:



Advertisements
Similar presentations
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?
Advertisements

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.
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University
Video, audio, embed, iframe, HTML Form
Tutorial 6 Working with Web Forms
Form Basics CS Web Data  Most interesting web pages revolve around data  examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes  can.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Figure 1. Hit analysis in 2002 of database-driven web applications Hits by Category in 2002 N = 73,873 Results Reporting 27% GME 26% Research 20% Bed Availability.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
ECA 228 Internet/Intranet Design I Forms. ECA 228 Internet/Intranet Design I Forms forms are a way for a user to communicate with you – text fields –
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Lecture 3 – Data Storage with XML+AJAX and MySQL+socket.io
Advance Database Management Systems Lab no. 5 PHP Web Pages.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
HTML Forms What is a form.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
1 PHP and MySQL. 2 Topics  Querying Data with PHP  User-Driven Querying  Writing Data with PHP and MySQL PHP and MySQL.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Creating Dynamic Web Pages Using PHP and MySQL CS 320.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.
Website Development with PHP and MySQL Saving Data.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
© Anselm Spoerri Web Design Information Visualization Course Prof. Anselm Spoerri
ITCS373: Internet Technology Lecture 5: More HTML.
HTML FORMS GET/POST METHODS. HTML FORMS HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes,
CHAPTER 7 Form & PHP. Introduction All of the following examples in this section will require two web pages. The first page retrieves information posted.
Creating PHPs to Insert, Update, and Delete Data CS 320.
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.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
TJ 3043 – Web Application Development HTML Form. 2.0 Forms A form is the usual way to communicate information from a Web browser to a server HTML has.
1 HTML Forms
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
© Anselm Spoerri Web Design Information Visualization Course Prof. Anselm Spoerri
TJ 3043 – Web Application Development HTML Form. 2.0 Forms - A form is the usual way information is gotten from a browser to a server - HTML has tags.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Project 6 Creating Forms on a Web Page. Objectives Define terms related to forms Describe the different form controls and their uses Use the tag Create.
Creating Web Page Forms COE 201- Computer Proficiency.
Netprog CGI and Forms1 CGI and Forms A detailed look at HTML forms.
HTML Creating Forms on a Web Page. 2 Objectives  Discuss the process of creating a form  Distinguish between data input controls and text input controls.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
FORMS How to collect information f XX rom visitors Different kinds of form controls New HTML5 form controls.
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
HTML Elements: Forms and Controls Chapter 9 B. Ramamurthy.
HTML III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
Informatics Computer School CS114 Web Publishing HTML Lesson 4.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Validation and Building Small Apps
Web Development & Design Foundations with H T M L 5
Forms, cont’d.
Information Technologies Anselm Spoerri PhD (MIT)
Presentation transcript:

© Anselm Spoerri Web Design Information Visualization Course Prof. Anselm Spoerri

© Anselm Spoerri Lecture 11 – Overview Forms in HTML MySQL & PHP code Sample files have been uploaded to Sakai > Resources > PHP Files –Browse View –Gigapan (practiced in Short Assignment 2) | Photosynth | Video –Attach Hyperlink to Thumbnail to Link to Individual Item page –Individual Item based on supplied id –Gigapan | Photosynth | Video –Dynamic Browse Page based on supplied parameters in URL –SQL Query to support Browse page –How to Extract Parameters in URL –Dynamic Browse Page with Menus –Menus for specifying Query Parameters

© Anselm Spoerri HTML Forms ‒ Solicit feedback or information from visitors ‒ Collection of data entry fields, labels, buttons ‒ Processing script on server (PHP) ‒ Never assume anything about data

© Anselm Spoerri HTML Form – Form Tag 1. form elements 2.Inside tag –method attribute specifies way in which data is to be sent –method="get" (limited data amount) method="post" –action attribute specifies URL to which user data is to be sent 3.label and form element First Name:

© Anselm Spoerri HTML Form – Form Elements and Organization Form Elements Text Field Text Area text Password Radio Button Yes Checkbox Menu Kia Submit Button Reset Button name needed to reference input element Organize Form Elements Legend Text Form Elements

© Anselm Spoerri Form Example $actionString = "browseMenusLinks_spoerri.php" // this.form.submit is used that the page gets updated when the form is changed Campus All New Brunswick Newark Camden

© Anselm Spoerri SQL Query to support Browse page Want to be able to search by Type, Campus, Category How? Database Table: $db_table = 'whereru_all'; // description in Sakai Resources Select $query = "SELECT * FROM $db_table WHERE type='gigapan' AND campus='Newark' AND category='Architecture & History' ORDER BY date_created DESC ";

© Anselm Spoerri Dynamic Browse Page browse.php ? type=gigapan & campus=Newark & category=Athletics databaseConnect_browse_general_spoerri.php?type=gigapan&campus=New%20Brunswick&category=Athletics extract($_GET, EXTR_PREFIX_ALL, 'fromget'); if (!$fromget_type) { $fromget_type = 'gigapan'; } if (!$fromget_campus) { $fromget_campus = 'New Brunswick'; } if (!$fromget_category) { $fromget_category = 'Architecture & History'; } if (!$fromget_page) { $fromget_page = 1; } SQL Query: $query = "SELECT * FROM $db_table WHERE type= \" $fromget_type \" AND campus= \" $fromget_campus \" AND category= \" $fromget_category \" ORDER BY date_created DESC";

© Anselm Spoerri Dynamic Browse Page with Menus $actionString = "browseMenusLinks_spoerri.php"; // "browseMenusLinks_lastname.php"; extract($_GET, EXTR_PREFIX_ALL, 'fromget'); Use sanitizeString function to sanitize form data Convert $fromget_campus numerical code into campus name Specify WHERE string component of $query using IF statements Form element with action echo(" "); Read Comments in code