1 csc317/318 internet programing / dynamic web application development siti nurbaya ismail faculty...
TRANSCRIPT
![Page 1: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/1.jpg)
1
CSC317/318INTERNET PROGRAMING /
DYNAMIC WEB APPLICATION DEVELOPMENTCHAPTER:
HyperText Markup LanguageHTML
(Continue)(Form Processing)
Siti Nurbaya Ismail
Faculty of Computer & Mathematical Sciences,
Universiti Teknologi MARA (UiTM), Kedah
| A2-3039 | [email protected] | 019-5710562 |
![Page 2: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/2.jpg)
Hypertext Markup Language
Objects & Images:
Adding image, applets, audio, video, animation & virtual reality on the Web Frames Marquee Labels & Controls Input Elements, Dropdown List, Text Area Using Fieldsets
2
Upon completion of this chapter, you will learn:
![Page 3: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/3.jpg)
3
Hypertext Markup Language
Form Processing
Introduction to Form Processing Adding HTML Input Fields Passing a form as a parameter
![Page 4: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/4.jpg)
4
Hypertext Markup Language
Introduction to Form Processing
HTML form is used to capture user inputs, before sending the inputs to the database, or, display the outputs to user
HTML form may contains:– Text field– Dropdown list/combo box– Text area– Checkbox– Radio button– Button
![Page 5: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/5.jpg)
5
Hypertext Markup Language
Introduction to Form Processing
It (may|should) has:– Server-side scripting: ASP, PHP, CFM, JSP, etc– Client-side scripting: Javascript, AJAX, etc
Speaking about form processing, it has:
Input Process Output
![Page 6: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/6.jpg)
Hypertext Markup Language
Introduction to Form Processing
Process
6
password
username
submit
Welcome Siti!
Input Process Output
![Page 7: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/7.jpg)
Hypertext Markup Language
An example of form processing layout
7
Text field
Radio button
Button
Dropdown list
Checked box
![Page 8: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/8.jpg)
8
Hypertext Markup Language
Introduction to Form Processing
How to create HTML form?
![Page 9: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/9.jpg)
9
Hypertext Markup Language
Introduction to Form Processing
Tag Description
name Defines unique name for the form
method HTTP method for sending data to the action URL.
The value either post or get
action A URL that defines where to send the data when the submit button is clicked
HTML form attributes
Therefore, a complete HTML form look like this (please refer to the next slide)
![Page 10: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/10.jpg)
10
Hypertext Markup Language
Introduction to Form Processing
![Page 11: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/11.jpg)
11
Hypertext Markup Language
Adding HTML Input Fields
Adding text field in HTML form
![Page 12: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/12.jpg)
12
Hypertext Markup Language
Adding HTML Input Fields
Adding textarea in HTML form
![Page 13: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/13.jpg)
13
Hypertext Markup Language
Adding HTML Input Fields
Adding dropdown list in HTML form
![Page 14: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/14.jpg)
14
Hypertext Markup Language
Adding HTML Input Fields
Adding checkbox in HTML form (for multiple choices)
![Page 15: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/15.jpg)
15
Hypertext Markup Language
Adding HTML Input Fields
Adding radio button in HTML form (single choice)
![Page 16: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/16.jpg)
16
Hypertext Markup Language
Adding HTML Input Fields
An HTML form with common elements and buttons
![Page 17: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/17.jpg)
17
Hypertext Markup Language
Adding HTML Input Fields
An HTML form with common elements and buttons– 3 types of buttons
• submit to allow data in the form to be submitted into the database or to another page
• reset to clear all data in the form/to reset the form
• button user-defined action. Programmer writes a code to trigger specific action once the button is clicked
![Page 18: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/18.jpg)
18
Hypertext Markup Language
Parsing a form as parameter
How to process inputs from HTML form?
Make sure you have created a complete HTML form (plus with input fields and a button)
We have two ways to process the inputs:– Client-side Scripting
• The best example is using JavaScript (which you will learn in the next lesson)• JavaScript able to do input validation, display the outputs, process the inputs
like doing calculation, and so on• BUT, JavaScript cannot send the inputs to the database!
– Server-side Scripting• You will learn to process the inputs using Active Server Page (ASP)• It is able to do what JavaScript can do• It can send the inputs to the database!
![Page 19: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/19.jpg)
19
Hypertext Markup Language
Parsing a form as parameter
How to process inputs from HTML form?
You need to complete JavaScript lesson first before you can start to code how to process the inputs
BUT, I suggest you to learn by yourself first, we have sample in the text book and on the Internet
![Page 20: 1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi](https://reader035.vdocuments.net/reader035/viewer/2022062309/56649f155503460f94c2acda/html5/thumbnails/20.jpg)
Hypertext Markup LanguageForm
Bibliography (Book)• Knuckles (2001). Introduction to Interactive Programming on the Internet
using HTML & Javascript. John Wiley & Sons, Inc.
Bibliography (Websites)• http://www.w3schools.com/html/default.asp• http://www.quackit.com/html/• http://www.htmlcodetutorial.com/• http://www.pagetutor.com/html_tutor/index.html
20