Post on 05-Oct-2015
IN021 Pemrograman Web 1 05- Form and Introduction to PHP
HTML FORM
Media for user to input data
Allow the user to send data to web sites
Example : registration, send messages, post
comment, post video, etc.
Need web scripting server side for data processing
Example : PHP, ASP, JSP, etc
HTML Form
Attribute ... Value
Text
GET/POST
URL/nama file
method
name
Description
action
Specifies the name of a form
Specifies the HTTP method to use when sending form-data
Specifies where to send the form-data when a form is submitted
draws a box around the related elements
defines a caption for the element
Method GET/POST
Useful for form submissions where a user want to bookmark the result
Display the form contents from the user
Have a limit to how much data you can place in a URL (varies between browsers)
Never use the "get" method to pass sensitive information!
GET
POST
More robust and secure than GET
Hide the form contents from the user
Form submissions with the "post" method cannot be bookmarked
Not have size limitations
http://localhost/form_login/proses_login.php?uname=nama_user&pwd=pass_user
http://localhost/form_login/proses_login.php
HTML Form-Input Used to select user information
Not require a closing tag for HTML
An input field can vary in many ways, depending on the type attribute
the tag requires a name, the name of the tag allows the programmer to work with the data from the control
Attribute Value
Text
Type
Text
type
name
Description
value
Specifies the name of the input tag
Specifies the type of element
The default value
HTML Form - Input
Define a single-line text field that a user can enter text into
Type Text
Attribute Value
Number
Text
size
Description
maxlength
Width text field
Character limit
Nama :
HTML Form - Input Type Password
Attribute Value
Number
Text
size
Description
maxlength
Width text field
Character limit
Password :
HTML Form - Input
Define a reset button (resets all form values to default values)
Define a submit button
a button that sends the form data to the action.
Type Reset
HTML Form - Input
a series of controls that allow multiple selections. Users pick their choices by
placing a check mark in the box.
Type Checkbox
Buah Fav. :
HTML Form - Input
a series of controls from which the user can select one choice.
Type Radio
Jenis Kelamin : Laki-Laki
HTML Form - Input
Define a hidden field (not visible to a user). A hidden field often store a default
value, or can have its value changed by a JavaScript.
Allows the user to browse to a file on their machine for submission to the web
site.
Type Hidden
Type File
Gambar :
HTML Form - Input
an image that sends the form data to the action
A clickable button, that activates a JavaScript when it is clicked
Type Image
Type Button
HTML Form Drop Down List Drop-down lists are a good method to deliver a large range of choices without
taking a lot of screen space.
A drop-down list allows multiple selections ...
Januari Februari Maret April Mei Juni
HTML Form Option Group The is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.
Volvo Saab Mercedes Audi
HTML Form - Textarea A text area can hold an unlimited number of characters, and the text renders
in a fixed-width font (usually Courier).
The size of a text area is specified by the cols and rows attributes.
...
Attribute Value
Number
Number
rows
Description
cols
Specifies the visible width of a text area
Specifies the visible number of lines in a text area
Berikan komentar anda
Introduction to PHP PHP : Hypertext Preprocessor
A server-side scripting language
Scripts are executed on the server
Supports many databases (MySQL, Informix, Oracle, Sybase, Solid,
PostgreSQL, Generic ODBC, etc.)
An open source software
XAMPP Local Web Server
Open Source
Interpreter PHP script and MySQL database
2 type of MySQL :
MySQL
MySQL with web server XAMPP (PHPMyAdmin)
XAMPP
Access XAMPP from browser http://localhost/xampp/
PHP File PHP code is not displayed when user view source from browser
Save PHP File in directory XAMPP/htdocs/directory_name
How to access PHP or HTML page in browser?
http://localhost/directory_name/file_name
example : http://localhost/form_login/login.php
PHP Syntax A PHP script always starts with . A PHP script can
be placed anywhere in the document.
A PHP file must have a .php extension.
Each code line in PHP must end with a semicolon. The semicolon is a separator and is used to distinguish one set of instructions from another.
output text with PHP
PHP Variables Rules for PHP variable names:
Variables in PHP starts with a $ sign, followed by the name of the variable
The variable name must begin with a letter or the underscore character
A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
A variable name should not contain spaces
Variable names are case sensitive (y and Y are two different variables)
Example :
Comments in PHP In PHP, we use // to make a one-line comment or /* and */ to make a
comment block
The Concatenation Operator
The concatenation operator (.) is used to put two string values together.
HTML in PHP
PHP Operators
Arithmetic Operators
+ - * / % ++ --
Assignment Operators
= += -= *= /= %=
Comparison Operators
== != > >= <
The $_GET Variable $_GET variable is used to collect values in a form with method="get
Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send.
How to get data?
Example :
login.php proses_login.php
$_GET["nama_var"];
When the user clicks the "Submit" button, the URL sent to the server could look something like this:
http://localhost/form_login/proses_login.php?uname=wenny&pwd=wenny
The $_POST Variable Used to collect values from a form sent with method="post
Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.
How to get data?
Example :
login.php proses_login.php
$_POST["nama_var"];
When the user clicks the "Submit" button, the URL will look like this:
http://localhost/form_login/proses_login.php
Exercise 1
Exercise 2 Buatlah tampilan form seperti dibawah ini. Ketika tombol Simpan ditekan,
tampilkan data yang telah dimasukan oleh user.
Field tahun hanya dapat diisi 4 karakter