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