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
draws a box around the related elements
defines a caption for the <fieldset> element

Attribute <form>...</form>

Value

Description

name

Text

Specifies the name of a form

method

GET/POST

Specifies the HTTP method to use

when sending form-data

action

URL/nama file

Specifies where to send the form-data

when a form is submitted

Method GET/POST
GET

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!
http://localhost/form_login/proses_login.php?uname=nama_user&pwd=pass_user

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

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 <input> tag requires a name, the name of the <input> tag allows the
programmer to work with the data from the control

<INPUT name="..." type="..." value="...">

Attribute

Value

Description

name

Text

Specifies the name of the input tag

type

Type

Specifies the type of <input> element

value

Text

The default value

HTML Form - Input

Type Text

Define a single-line text field that a user can enter text into

<input type = "..." name="..." size="..." maxlength="...">

Attribute

Value

Description

size

Number

Width text field

maxlength

Text

Character limit

Nama : <input type="text" name="nama" size="20" maxlength="10">

HTML Form - Input

Type Password

Define a password field (characters are masked)

<input type = "..." name="..." size="..." maxlength="...">
Attribute

Value

Description

size

Number

Width text field

maxlength

Text

Character limit

Password : <input type=password" name="nama" size="20" maxlength="10">

HTML Form - Input

Type Reset

Define a reset button (resets all form values to default values)

<input type=reset" name="kosongkan" value="Reset"/>

Type Submit

Define a submit button

a button that sends the form data to the action.
<input type=submit" name="simpan_data" value="Simpan"/>

HTML Form - Input

Type Checkbox

a series of controls that allow multiple selections. Users pick their choices by
placing a check mark in the box.
<input type = "..." name="..." value="...">
Buah Fav. :
<input type=checkbox" name="buah" value="apel"> Apel
<input type="checkbox" name="buah" value="jeruk" checked> Jeruk
<input type="checkbox" name="buah" value="jambu"> Jambu
<input type="checkbox" name="buah" value="anggur"> Anggur

HTML Form - Input

Type Radio

a series of controls from which the user can select one choice.
<input type = "..." name="..." value="...">
Jenis Kelamin :
<input type=radio" name="jns_kelamin" value="p" checked> Perempuan
<input type=radio" name="jns_kelamin" value="l"> Laki-Laki

HTML Form - Input

Type Hidden

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.

<input type = "..." name="..." value="...">
<input type=hidden" name="angka value=rahasia />

Type File

Allows the user to browse to a file on their machine for submission to the web
site.
Gambar : <input type=file" name="upload" />

HTML Form - Input

Type Image

an image that sends the form data to the action

<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

Type Button

A clickable button, that activates a JavaScript when it is clicked

<input type=button" name="cek_data" value="Validasi" onclick="cek_data()">

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

<select name="..." size="..." multiple="multiple" >
<option value="..."> ... </option>
</select>
<select name="bulan">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Maret</option>
<option value="apr">April</option>
<option value="mei">Mei</option>
<option value="jun">Juni</option>
</select>

HTML Form Option Group

The <optgroup> 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.
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>

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.
<textarea name="..." rows="..." cols="..."> ... </textarea>
Attribute

Value

Description

rows

Number

Specifies the visible width of a text

area

cols

Number

Specifies the visible number of lines

in a text area

<textarea name="komentar" rows="7" cols="50">

Berikan komentar anda <!-- default teks -->
</textarea>

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 <?php and ends with ?>. A PHP script can
be placed anywhere in the document.

A PHP file must have a .php extension.

output text with PHP

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.

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
== != <> > >= < <=

Logical 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? $_GET["nama_var"];
Example :
login.php
proses_login.php

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? $_POST["nama_var"];

Example :
login.php

proses_login.php

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