Kata Pengantar

Kata Pengantar

Puji syukur kami ucapkan kepada Allah SWT karena berkat bimbinan-Nya modul Perancangan Web
dapat terselesaikan tepat pada waktunya. Modul Perancangan Web dibuat dalam rangka membantu
mahasiswa STMIK Bina Sarana Global dalam menempuh praktikum Perancangan Web Dengan
modul ini diharapkan mahasiswa dan dosen pengampu mata kuliah Perancangan Web mempunyai
pegangan dan petunjuk dalam praktikum mata kuliah Perancangan Web, sehingga diperoleh adanya
keseragaman dalam penyampaian materi.

Modul ini memuat tentang Dasar-dasar Web, Pengenalan JavaScript, Dasar PHP, Statement
Input/Output, Sruktur Kontrol, Fungsi, Array, dan Operasi String, Pengenalan Cookies dan Session.
Modul ini disusun dengan secara ringkas, padat dan jelas, sehingga diharapkan mahasiswa
memahami materi-materi yang diberikan dalam mata kuliah Perancangan Web

Kami menyadari bahawa modul ini masih jauh dari kesempurnaan, maka dari itu kami membuka kritik
dan saran dari pembaca, agar modul ini dapat mendekati dari kesempurnaan sesuai yang diharapkan,
sehingga lebih memudahkan mahasiswa STMIK Bina Sarana Global dalam mempelajari ilmu
informatika.

Akhir kata kami ucapkan terima kasih, semoga modul ini bermanfaat bagi kita semua, Amin

Wassalam

Tim Penyusun

i. i
 STMIK Bina Sarana Global Daftar Isi
Daftar Isi

Daftar Isi Halaman

Kata Pengantar............................................................................................................................. i
Daftar Isi ....................................................................................................................................... ii
Bab I Dasar-Dasar Web................................................................................................................ 1
A. Konsep Dasar Web............................................................................................................ 1
B. Arsitektur Web................................................................................................................... 1
C. HTTP ................................................................................................................................ 2
D. Client Side Programming .................................................................................................. 2
E. Server Side Programming ................................................................................................. 3
F. Web Server Software ........................................................................................................ 3
G. Instalasi Web Server Xampp............................................................................................. 3
H. Konsep HTML ................................................................................................................... 5
I. Tag HTML ......................................................................................................................... 6

Bab II Java Script ......................................................................................................................... 16

A. Tentang Java Script........................................................................................................... 16
B. Sintaks Java Script .......................................................................................................... 17

Bab III Dasar PHP......................................................................................................................... 29

A. Konsep PHP ..................................................................................................................... 29
B. Tag PHP............................................................................................................................ 30
C. Variabel ............................................................................................................................ 30
D. Tipe Data .......................................................................................................................... 31
E. Operator ........................................................................................................................... 32

Bab IV Statement Input / Output.................................................................................................. 35

A. Memahami Struktur Input Output ...................................................................................... 35
B. Penggunaan Web Form..................................................................................................... 35
C. Komponen Interaktif Input Output .................................................................................... 36

Bab V Struktur Kontrol................................................................................................................. 40

A. Struktur Berurutan ............................................................................................................. 40
B. Struktur Seleksi (kondisi) .................................................................................................. 40
C. Struktur Perulangan .......................................................................................................... 42

Bab VI Fungsi, Array, dan Operasi String.................................................................................. 46

A. Fungsi................................................................................................................................ 46
B. Array.................................................................................................................................. 49
C. Operasi String ................................................................................................................... 49

Bab VII Cookies dan Session...................................................................................................... 55

A. Cookies ............................................................................................................................. 55
B. Session ............................................................................................................................. 56

Studi Kasus I Form Interaktif....................................................................................................... 60

ii. ii
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
Bab I
Dasar-Dasar Web dan HTML

I. Kompetensi
- Dasar-dasar web
- HTML

II. Tujuan Praktikum

- Mahasiswa dapat menerangkan dasar-dasar web
- Mahasiswa dapat menyebutkan contoh web server dan melakukan instalasi.
- Mahasiswa dapat membuat web sederhana dengan tag HTML.

III. Teori Dasar

A. Konsep Dasar Web
Perkembangan dunia internet telah melahirkan suatu fasilitas layanan baru, yaitu web,
yang merupakan layanan terpenting dalam internet. Dewasa ini, fasilitas web
mengizinkan pengakses untuk mengakses dan berinteraksi dengan teks, grafik, animasi,
foto, suara, dan video. Web secara fisik adalam kumpulan computer pribadi, web
browser, koneksi ke ISP, computer server, router, dan switch yang digunakan untuk
mengalirkan informasi dan menjadi wahana pertama berbagai pihak terkait.Web dapat
dikategorikan menjadi dua, yaitu :
a. Web Statis
Web yang menampilkan informasi-informasi yang sifatnya statis (tetap), misalnya :
web profil perusahaan.
b. Web Dinamis
Web yang menampilkan informasi serta dapat berinterkasi dengan user yang
bersifat dinamis, misalnya : web e-comerse.
Web merupakan singkatan dari WWW yaitu world Wide Wide adalah suatu ruang
informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global
yang disebut Uniform Resource Identifier (URI).

B. Arsitektur Web
a. Browser
Perangkat lunak di sisi klien yang digunakan untuk mengakses informasi Web,
Contoh : Internet Explorer, Mozila Firefox, dan lain-lain.
b. Web Server
Server yang melayani permintaan klien terhadap halaman web, contoh : Apache,
IIS (internet information server), dan Xitami.
c. Middleware
Perangkat lunak yang bekerja sama dengan Web Server dan berfungsi
menerjemahkan kode-kode tertentu, menjalankan kode-kode tersebut, dan
memungkinkan berinteraksi dengan basis data.
Contoh : PHP, ASP, dan PERL
d. Database
Perangkat Lunak yang berfungsi sebagai penyimpanan data.
Contoh : Mysql, Access, Sql Server dan lain sebagainya.

1
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

Gambar 1.1. Arsitektur Web

C. HTTP
Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam
meminta dan mengambil suatu dokumen dan oleh web server dalam menyediakan
dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang
digunakan untuk mengakses dokumen HTML.

Gambar 1.2. Cara kerja HTTP

D. Client Side Programming

Secara umum, suatu client adalah satu aplikasi komputer, seperti web browser yang
berjalan pada satu komputer lokal dari pengguna atau workstation, dan terhubung ke
suatu server. Client-side programming adalah program komputer pada web yang
dijalankan pada sisi client, oleh web browser; Hal ini berlawanan arti dengan Server-side
scripting. Operasi dapat dilakukan oleh client-side karena operasi tersebut membutuhkan
akses ke informasi atau fungsi yang tersedia pada client tetapi tidak pada server, karena
pengguna membutuhkan observasi terhadap operasi tersebut atau menyediakan input,
atau server kekurangan kekuatan pememrosesan untuk melakukan operasi yang tepat
waktu untuk seluruh client yang harus dilayaninya. Sebagai tambahan, jika operasi dapat
dilakukan oleh client tanpa mengirim data melalui jaringan, maka hal itu memakan waktu
lebih sedikit, menggunakan lebih kecil bandwidth dan mengurangi resiko keamanan.
Client-side Script seringkali dimasukkan (embedded) di dalam dokumen HTML, tetapi
dapat juga berada di dalam file terpisah, yang direferensikan oleh dokumen yang
menggunakannya. Atas sebuah request, file yang diperlukan dikirimkan oleh web server
kepada komputer user. Web browser milik user melakukan eksekusi terhadap Script, lalu
menampilkan dokumen, termasuk output yang dapat terlihat dari Script.
Client-side Script juga dapat berisikan perintah yang harus diikuti oleh web browser jika
user berinteraksi dengan dokumen dengan cara tertentu, contohnya klik sebuah tombol.

2
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
E. Server Side Programming
Terminologi Server-side memiliki arti operasi yang dilakukan oleh server didalam sebuah
client-server relationship. Umumnya, sebuah server adalah program, seperti web server,
yang berada pada sebuah remote server, yang dapat dijangkau oleh komputer lokal milik
user. Operasi dilakukan pada sisi Server, karena memerlukan akses atas informasi atau
fungsi yang tidak tersedia pada client, atau pada aplikasi yang tidak dapat dilakukan pada
Client-side.
Operasi Server-side juga meliputi proses dan penyimpanan data dari client ke suatu
server, yang dapat dilihat oleh sekelompok Client. Server-side Scripting adalah teknologi
Web Server dimana request oleh user dipenuhi dengan cara menjalankan script langsung
pada web server untuk menghasilkan halaman HTML dinamis. Umunya menyediakan
website interaktif pada database dan penyimpanan data lainnya.
Keuntungan utama dari Server-side Script adalah kemampuan untuk mengatur response
berdasarkan keperluan user, hak akses, atau query ke dalam data store.

F. Web Server Software

Web Server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan
HTTP atau HTTPS dari Client yang dikenal dengan web browser dan mengirimkan
kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk
dokumen HTML. Server web yang terkenal diantaranya adalah:
a. Apache, web server antar platform
 XAMPP
 PHPTriad; discontinued
 Apache2Triad
b. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS
Windows

G. Instalasi Web Server Xampp

a. Klik dua kali file xampp-win32-1.7.0. installer, sehingga muncul tampilan seperti
gambar dibawah ini.

b. Kemudian klik tombol Next, sehingga akan muncul tampilan seperti berikut ini.

c. Jika sudah yakin bahwa folder xampp ini di simpan di direktori C, Selanjutnya klik
tombol Next, sehingga akan muncul tampilan berikut ini.

3
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

d. Kemudian klik tombol next, untuk melanjutkan ke langkah berikutnya sperti

gambar dibawah ini, dan tunggu hingga proses instalasi selesai

e. Kemudian Klik tombol Finish

f. Selanjutnya klik tombol Yes, untuk melihat control panel xampp.

g. Pastikan status fasilitas Apache dan Mysql telah Runing, seperti gambar dibawah
ini.

4
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

Untuk memastikan xampp telah berhasil diinstal, ketik http://localhost, pada

browser, sehingga akan muncul tampilan phpmyadmin seperti gambar berikut.

Berikut ini adalah struktur folder dari xampp, dimana folder inti dari dari xampp ini
adalah folder htdocs yang berfungsi sebagai penyimpanan file web baik html
maupun php, dan folder mysql, yang berfungsi sebagai untuk penyimpanan
database mysql.

H. Konsep HTML
Adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web
dan menampilkan berbagai informasi di dalam sebuah Web Browser. Bermula dari
sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan
yang disebut dengan SGML,
HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman
web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World
Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 4.01, meskipun
saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

5
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
HTML berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet
Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan
program lain yang memiliki kemampuan browser.
Secara garis besar, terdapat 4 jenis elemen dari HTML:
a. Structural
Tanda yang menentukan level atau tingkatan dari sebuah teks (contoh,
<h1>Golf</h1> akan memerintahkan browser untuk menampilkan "Golf" sebagai
teks tebal besar yang menunjukkan sebagai Heading 1
b. Presentational.
Tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari
teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda
presentational saat ini sudah mulai digantikan oleh CSS dan tidak
direkomendasikan untuk mengatur tampilan teks.
c. Hypertext
tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke
dokumen lain (contoh, <a href="http://www.wikipedia.org/">Wikipedia</a> akan
menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu).
d. Elemen widget,
yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis
horizontal (<hr>).

I. Tag HTML
Buatlah folder baru dengan nama latihan_html pada folder htdocs, kemudian buatlah file
html dengan menggunakan editor Notepad.
a. Element dasar html, simpan file dengan lat1.html

Kemudian buka browser, dan ketik http://localhost/latihan_html/lat1.html pada

kotak URL browser.
b. Tag pengaturan teks, kemudian simpan dengan nama lat2.html

c. Tag pengaturan paragraph, simpan dengan dengan nama lat3.html

6
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

d. Tag list / teks bernomor, simpan dengan nama lat4.html

e. Tag Table

7
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
Untuk membuat suatu tabel dalam suatu halaman web site, maka tag yang dipakai
adalah <table> dan </table>, <tr> dan </tr> yang berarti table row, <td> dan
</td> yang berarti tabel data.
Bentuk dari tabel adalah seperti berikut :

Untuk membuat sebuah tabel, maka skrip yang harus ditulis adalah sebagai berikut
: Nama file : Tag_table.html

f. Tag Image
Untuk memperbagus tampilan html, maka kadang diperlukan gambar baik gambar
yang tetap atau yang animasi. Tag yang dipakai untuk menampilkan gambar
adalah tag <img>. Beberapa atribut yang sering digunakan dalam tag ini adalah :
a. src : menunjukan lokasi file gambar
b. border : tebal bingkai gambar
c. width : lebar gambar
d. height : tinggi gambar
e. align : peletakan gambar
Contoh, kemudian simpan dengan nama file tag_gambar.html :
Sebelum mengetik script dibawah ini, carilah 3 (tiga) buah (bebas sesuai selera)
gambar yang berekstension/format JPG, BMP, GIF, kemudian simpan ketiga
gambar tersebut pada :
a. JGP E:\ nama_nim\webdev1\
b. BMP  E:\ nama_nim\webdev1\gambar
c. GIF E:\ nama_nim\webdev1\gambar\gif

8
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

g. Tag Link
Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link
dari satu teks dan atau gambar menuju ke dokumen atau bagian lain dalam suatu
dokumen. Browser akan menyorot (highlight) teks atau gambar yang diidentifikasi
sebagai link dengan warna dan atau garis bawah untuk menunjukkan bahwa itu
adalah hyperteks link.
Untuk membuat sebuah link, maka tag yang dipakai adalah tag <a> dan </a>.
Atribut-atribut dari tag ini adalah :
a. href : lokasi yang dituju, bisa alamat internet, file atau folder
b. target : lokasi link tersebut ditampilkan. Gunakan _blank jika ingin
menampilkan link yang dituju di browser baru
Contoh script :

h. Tag Form
Kadang-kadang ketika kita berjalan-jalan / surfing, kita diminta untuk mengisikan
suatu data yang akan dikirim ke penyedia web site. Data-data tersebut bisa berupa
data nama, alamat, no kartu kredit, gambar, atau file. Untuk membuat suatu form
yang dapat berinteraksi dengan visitor, maka pengembang web harus membuat
suatu form dalam dokumen html-nya. Untuk membuat suatu form dalam dokumen
html, tag yang digunakan adalah <form> </form>. Di antara kedua tag tersebut,
elemen-elemen form dituliskan.
Perintah umum tag form adalah
<form name=”namaform” method="jenismethod" action="fileeksekusi">
disinilah elemen-elemen form ditulis
</form>

Atribut name diisi dengan nama dari form tersebut.

Atribut method diisi dengan GET atau POST
Atribut action diisi dengan nama file yang akan dieksekusi ketika tombol submit
ditekan.

9
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
Ada beberapa jenis elemen form yang dapat digunakan diantaranya ;

10
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML
IV. Latihan Praktikum
1. Uninstall xampp, kemudian install kembali xampp
2. Buatlah folder latihan_soal pada folder htdocs
3. Buatlah file html yang tampilannya seperti dibawah ini
a. soal1.html

b. soal2.html

c. Tag Table
 Border (nama file : tbl_with_border.html)

 Tanpa border (nama file : without_border.html)

11
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

 Align (nama file : align.html)

 Cellspacing

 Cellpadding (nama file : cellpadding.html)

 Membuat header (nama file : header.html)

12
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

 Lebar tabel (nama file : table_width.html)

 Lebar kolom

 Colspan

 Rowspan

13
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

 Warna (file nama : warna_latar_tabel.html)

c. Tag Image
 Latihan gambar 1 (nama file : lat_gab1.html)

 Latihan gambar 2

d. Tag Link

14
STMIK Bina Sarana Global Dasar-Dasar Web dan HTML

d. Tag Form

V. Latihan Soal
A. Lat_soal1.html

B. Lat_soal2.html

VI. Tugas
Membuat website sederhana tentang biodata anda

VII. Daftar Pustaka

Pemograman Web Dinamis dengan PHP 5, Teguh Wahyono, Elex Media Komputindo, 2005.

15
STMIK Bina Sarana Global JavaScript
BAB II
JavaScript

I. Kompetensi
Pemahaman JavaScript

II. Tujuan Praktikum

- Mahasiswa memahami konsep JavaScript
- Mahasiswa mampu membuat program sederhana menggunakan JavaScript

III. Teori Dasar

A. Tentang JavaScript
JavaScript adalah bahasa script (bahasa pemrograman yang dapat memegang kontrol
aplikasi) yang berbasis pada bahasa pemrograman Java, namun JavaScript bukanlah
bagian teknologi Java dari Sun. Java merupakan bahasa pemrograman berorientasi
objek murni sedangkan JavaScript digunakan secara prosedural. Cara kerja JavaScript
adalah mengakses elemen pada HTML dan membuat aksi-aksi elemen-elemen HTML itu
mengalami perubahan, misalnya b2erubahnya warna halaman web begitu sebuah tombol
diklik. JavaScript membuat sebuah halaman web menjadi lebih dinamis. JavaScript yang
digunakan pada halaman web merupakan client side
scripting yang berarti bahwa web browser mengidentifikasi dan menjalankan skrip
program yang disisipkan dalam dokumen web (yang diterima dari server), dan mungkin
memperbarui tampilan halaman di komputer pemakai (user) tanpa mengirimkan
permintaan (request) baru kepada web server. Karena JavaScript pada halaman web
adalah client side scripting maka kode JavaScript yang ditulis satu file dengan dokumen
HTML akan ditampilkan ketika sebuah halaman web dilihat source code-nya.

JavaScript merupakan bahasa yang case sensitive seperti halnya bahasa pemrograman
Java yaitu membedakan penulisan dengan. huruf kecil dan huruf besar memiliki arti yang
berbeda.

JavaScript dapat ditulis secara inline atau satu file dengan dokumen HTML atau dapat
juga ditulis pada file terpisah dengan ekstensi .js. JavaScript yang ditulis satu file dengan
dokumen HTML dapat ditulis sebagai berikut:
<html>
<head>
…………………
</head>
<script type="text/javascript" language="JavaScript">
/* kode dengan menggunakan JavaScript disini */
</script>
<body>
…………………………..
</body>
</html>

atau dapat juga ditulis di tengah tag body sebagai berikut:

<html>
<head>
………………………………..
</head>
<body>
<script type="text/javascript" language="JavaScript">

. 16
STMIK Bina Sarana Global JavaScript
/* kode dengan menggunakan JavaScript disini */
</script>
…………………………………..
</body>
</html>

sedangkan jika JavaScript ditulis pada file terpisah dengan dokumen HTML maka kode
dapat ditulis sebagai berikut:
<html>
<head>
……………………………………
</head>
<script type="text/javascript" language="JavaScript" 3r; = "nama_file.js">
……………………………………….
</script>
<body>
……………………………………………….
</body>
</html>

Untuk lebih memudahkan pemeliharaan halaman web maka sebaiknya kode JavaScript
ditulis terpisah dengan dokumen HTML sehingga jika kode JavaScript perlu dilakukan
perubahan, dokumen HTML tidak perlu diubah.

B. Sintaks JavaScript
Beberapa sintaks pada JavaScript mirip dengan sintaks pada bahasa pemrograman Java
seperti pada sintaks perulangan dan percabangan icondisi, namun JavaScript bukanlah
Java. Cara kerja JavaScript biasanya lebih mengarah pada membuat aksi jika sebuah
elemen HTML mengalami perubahan, misalnya ketika mouse diklik.

1. Variabel dan Tipe Data

Variabel pada JavaScript ditulis sebagai berikut:

var nama_variabel = nilai_variabel;

misalnya sebagai berikut:

var text;
var count = 1 ;
var ErrorMessage = "Koneksi Gagal.";
var daysLeft = 5.7; var bool = true;

Variabel pada JavaScript berlaku untuk semua nilai. Nilai-nilai yang diizinkan pada
variabel JavaScript sebagai berikut:
- bilangan bulat atau integer
- bilangan desimal atau float
- string, dengan karakter escape sebagai berikut:
Karakter Keterangan
\n baris baru
\t tab
\" tanda petik dua
\’ tanda petik satu
w garis miring
. 17
STMIK Bina Sarana Global JavaScript

fungsi-fungsi standar string sebagai berikut:

Fungsi Standar Keterangan

big sama dengan tag HTML
<big>foo</big>
contoh:
"foo".big()
bold sama dengan tag HTML
<b>foo</b>
contoh:
"foo" .bold()
fontcolor sama dengan tag HTML
<font color="warna">foo</font>
contoh:
"foo".fontcolor("green")
fontsize sama dengan tag HTML
<font fontsize="ukuran">foo</font >
contoh:
"foo".fontsize(-1)
italics sama dengan tag HTML
< i>foo</i>
contoh:
"foo".italics()
Link sama dengan tag HTML
<a href="linktext">...</a>
contoh:
"foo".link("linktext")
small sama dengan tag HTML
<small>foo</small> contoh:
"foo".small()
sub sama dengan tag HTML
_foo
contoh:
"foo".sub ()
sup sama dengan tag HTML
^foo
contoh:
"foo".sup()
toLowerCase mengubah huruf menjadi huruf kecil semua
contoh:
"UPPERcase".toLowerCase()
toUpperCase mengubah huruf menjadi huruf besar semua
contoh:
"UPPERcase".toUpperCase()
charAt mengembalikan karakter pada indeks masukan
contoh:
"foo".charAt(0)
indexOf mengembalikan nilai indeks dari string masukan
contoh:

. 18
STMIK Bina Sarana Global JavaScript
"foo".indexOf("scape")
mengembalikan nilai indeks dari string masukan,
pencarian dimulai dari indeks masukan
contoh:
"foo".indexOf("n",2)
lastlndexOf mengembalikan indeks terakhir munculnya karakter
masukan
contoh:
"foo".lastlndexOf("a")
mengembalikan indeks terakhir munculnya karakter
masukan, pencarian dimulai dari indeks masukan
contoh:
"foo".lastlndexOf("a", 12)
substring mengembalikan string yang dimulai dari indeks awal
masukan sampai indeks akhir masukan
contoh:
"foo".substring(0,2)
length mengembalikan nilai panjang string
contoh:
"foo".length
"foo".substring(0,7).length

2. Operator
Operator pada JavaScript berbasis pada bahasa pemrograman Java sehingga mirip
dengan operator bahasa pemrograman Java seperti misalnya sebagai berikut:
total += 4 ;
i++
msg = "Error code " + code;

3. Komentar
Pernilisan komentar pada JavaScript sama dengan penulisan i: mentar pada bahasa
pemrograman Java yaitu sebagai berikut:
• // komentar
untuk satu baris komentar
• /* komentar */
untuk lebih dari satu baris komentar

4. Array
Array pada pemrograman berfungsi seperti halnya sebuah tabel yang diakses
elemennya menggunakan indeks. Penulisan kode array pada JavaScript sebagai
berikut:
var x = new Array();
var x = new Array("red","yellow","green",1, 5 , 8) ;
var x = new Array(6);
var x = ["red","yellow","green",1,5,8];

dengan cara pengaksesan elemen array sebagai berikut:

var str = x [indeks] ;

5. Kondisi Percabangan

. 19
STMIK Bina Sarana Global JavaScript
Kondisi percabangan pada JavaScript juga sama dengan pada bahasa pemrograman
Java yaitu sebagai berikut:
 untuk statemen if
If (kondisi) {
aksi_1
} else {
aksi_2
}

 untuk statemen depend on

switch(nama_variabel){
case nilai_variabel_1 :
aksi_1
break;
case nilai_variabel_2
aksi_2
break;
case nilai_variabel_n
aksi_n
break;
default :
aksi_default
break;
}

6. Perulangan
Perulangan pada JavaScript juga sama dengan pada bahasa pemograman Java yaitu
sebagai berikut:
 for (nama_variabel=nilai_awal;nama_variabel++{
operator_relasi ;namii_variabel++) {
//proses
………………………………………….
 while (kondisi_perulangan) {
// proses
………………………………………….
// iterasi kondisi terminasi

 do{
.// proses
………………………………………..
// iterasi
} while(kondisi _perulangan) 4;

7. Fungsi
Karena JavaScript bukanlah bahasa pemrograman Java, maka JavaScript bukanlah
bahasa murni berorientasi objek seperti bahasa rograman Java. Pada JavaScript
diizinkan penulisan fungsi-fungsi seperti halnya pada bahasa pemrograman
prosedural. Penulisan kode fungsi pada JavaScript sebagai berikut:

function nama_fungsi(masukan1, masukan2, …..) {

. 20
STMIK Bina Sarana Global JavaScript
// isi fungsi
……………………
}
dan cara pengaksesan fungsi sebagai berikut:
nama_fungsi(masukan1, masukan2, ….. );

Sebuah fungsi pada JavaScript tidak wajib mengembalikan sebuah nilai, karena juga
dapat digunakan sebagai prosedur, namun sebuah fungsi pada JavaScript juga dapat
mengembalikan sebuah nilai. misalnya sebagai berikut:

function tambaht(x, y)
{
return (x+y);
}
var hasil = tambah(3, 4);

JavaScript juga memiliki fungsi-fungsi standar, berikut adalah beberapa fungsi standar
pada JavaScript:
Fungsi Standar Keterangan
Fungsi Matematika
abs menjadikan bilangan masukan sebagai bilangan absolut (positif)
contoh:
Math.abs(-79)
acos menghitung arcus cosinus bilangan masukan
contoh:
Math.acos(.5)
asin menghitung arcus sinus bilangan masukan
contoh:
Math.asin(1)
atan menghitung arcus tangent bilangan masukan
contoh:
Math.atan(.5)
cos untuk menghitung cosinus bilangan masukan
contoh:
Math.cos(.4)
exp untuk menghitung ebil-masukan di mana e adalah bilangan natural
contoh:
Math.exp(8)
log untuk menghitung logaritma naturalis (berbasis e) dari bilangan
masukan
contoh:
Math.log(5)
max untuk menentukan bilangan terbesar antara bilangan masukan
contoh:
Math.max(1 , 700)
min untuk menentukan bilangan terkecil antara bilangan masukan
contoh:
Math.min(1 , 700)
pow untuk menghitung hash masukan pertama pangkat masukan kedua
contoh:
Math.pow(6,2)
random mengembalikan bilangan acak antara o dan l
contoh:
Math.random()
round membulatkan bilangan ke bilangan bulat terdekat
contoh:
Math.round(.567)

. 21
STMIK Bina Sarana Global JavaScript
sin untuk menghitung sinus dari bilangan masukan
contoh:
Math.sin(Math.PI)
sqrt Untuk menghitung akar pangkat dua dari suatu bilangan positif
contoh:
Math.sqrt(9801)
tan untuk menghitung tangent bilangan masukan
contoh:
Math.tan(1.5*Math.PI)
Fungsi Tanggal dan Waktu
getDate mengembalikan nilai tanggal
contoh:
today.getDate()
getDay Mengembalikkan nilai hari
Contoh :
yesterday.getDay()
getHours Mengembalikkan nilai jam
Contoh :
today.getHours()
getMinutes Mengembalikkan nilai menit
Contoh :
today.getMinutes
getMonth mengembalikan nilai bulan
contoh:
year.getMonth()
getSeconds mengembalikan nilai detik contoh:
time.getSeconds()
getTime mengembalikan nilai waktu
contoh:
now.getTime()
getTimeZoneo mengembalikan perbedaan waktu antarwaktu lokal dan waktu GMT
ffset contoh:
today. getTimeZoneoffset()
getYear mengembalikan nilai tahun
contoh:
now.getYear()
mengembalikan waktu dalam milidetik dimulai dari tanggal 1 Januari
1970 waktu GMT sampai tanggal masukan
contoh:
Date.parse(July 1, 1996)
setDate mengeset tanggal
contoh:
now.setDate(6)
setHours mengeset jam
contoh:
now.setHours(14)
setMinutes mengeset menit
contoh:
now.setMinutes(50)
setMonth mengeset bulan
contoh:
today.setMonth(7)
setSeconds mengeset detik
contoh:
today.setSeconds(7)
setTime mengeset waktu
contoh:
today.setTime
(yesterday.getTime())
setYear mengeset tahun
contoh:

. 22
STMIK Bina Sarana Global JavaScript
today.setYear(88)
toGMTString mengubah penulisan waktu menjadi bentuk standar waktu GMT,
misalkan Sat, Feb 24 1996 14:28:15 GMT
contoh:
yesterday.toGMTString()
toLocalestring mengubah penulisan waktu menjadi bentuk standar waktu lokal,
misalkan 2/25/96 14:28:15
contoh:
today.toLocaleString()

8. Event Handler
Event adalah aksi di luar program yang berpengaruh pada sebuah program komputer
yang lain. Sebuah event ditangkap oleh sebuah handler sehingga cara kerja sebuah
event handler adalah menangkap sebuah event dan menghasilkan sebuah aksi.
Fungsi-fungsi yang meat dengan menggunakan JavaScript dipanggil pada dokumen
HTML dengan menggunakan event handler misalnya sebagai berikut:

<a href="halaman2.html" onClick="tambah()">Selanjutnya</a>

berarti pada saat link selanjutnya diklik maka fungsi tambah akan dijalankan. Berikut
adalah event handler yang dapat digunakan pada tag-tag HTML:
Tag Event Handler Keterangan
<a> onClick dipanggil ketika pemakai (user) mengeklik
onMouseOver dipanggil ketika pointer mouse berada di atas
link
onMouseOut dipanggil ketika pointer mouse diangkat dari
link
<body> onBlur dipanggil ketika jendela atau frame tidak
dalam fokus
onFocus dipanggil ketika jendela atau frame dalam
fokus
onLoad dipanggil ketika halaman web selesai di-
Zoacf
onUnload dipanggil ketika halaman ditutup

<forrn> onReset dipanggil ketika tombol reset diklik

onSubmit dipanggil ketika tombol submit diklik

<img> onAbort dipanggil ketika load gambar dihentikan oleh

pemakai (user)
onLoad dipanggil ketika gambar selesai di-Zoad
onError dipanggil ketika muncul error saat gambar di-
load
<input> onclick dipanggil ketika mouse diklikkan pada elemen
dengan type button,
checkbox, radio,
atau reset
<input> dengan onBlur dipanggil ketika elemen tidak dalam fokus
type text atau onChange dipanggil ketika teks dalam elemen diubah
textarea onFocus dipanggil ketika elemen dalam fokus
onSelect dipanggil ketika teks dalam elemen diblok

<input> onBlur dipanggil ketika elemen tidak dalam fokus

dengan type select onChange dipanggil ketika pemakai (user) mengubah
pilihan
onclick dipanggil ketika pemakai (user) mengeklik

. 23
STMIK Bina Sarana Global JavaScript
salah satu pilihan
onFocus dipanggil ketika elemen dalam fokus

9. Alert
Alert pada JavaScript adalah jendela kecil yang muncul untuk menyampaikan sebuah
pesan. Jenis alert sebagai berikut:
 alert()
Jendela alert sebagai berikut

Gambar Jendela Alert

Cara memanggil sebuah alert sebagai berikut:

onClick="alert(‘Press OK to continue')"

atau
<script language=”JavaScript”>
………………………………………
Alert (“Press OK to Continue”);
………………………………………
</script>

 confirm()
Jendela confirm sebagai berikut :

Gambar Jendela Confirm

Cara memanggil confirm adalah sebagai berikut :

…………………………………………………..
If(confirm(“continue”?))
{
// jika tombol OK ditekan
………………………….
}else
{
// jika tombol Cancel ditekan
………………………………….
}

 prompt()
jendela prompt sebagai berikut

. 24
STMIK Bina Sarana Global JavaScript

Gambar Jendela Prompt

Cara memanggil prompt sebagai berikut :
…………………………………………………
// Terus meminta masukan dari user yang benar
while (prompt(‘please enter your name’, “”) == “”)
{
alert (‘try again’);
}
…………………………………………………

IV. Latihan Praktikum

A. Object Text
<HTML>
<HEAD><TITLE>Percabangan IF-ELSE 2</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function hitungtotal()
{
var nama = (document.fform.inama.value);
var tujuan = (document.fform.itujuan.value);
var jumlahtiket = parseFloat(document.fform.ijumlah.value);
var ht = 0.0;
var sub = 0.0;
var diskon =0.0;
var total =0.0;

if (tujuan=="Jakarta")
{ ht =100000; }
else if (tujuan=="Cirebon")
{ ht =150000; }
else
{ ht =200000; }

sub = jumlahtiket*ht;

if (document.fform.imember.checked==true)
{ diskon =0.10*sub; }
else
{ diskon=0.0; }

total = sub-diskon;
document.fform.otiket.value=eval(ht);
document.fform.osub.value=eval(sub);
document.fform.odiskon.value=eval(diskon);

. 25
STMIK Bina Sarana Global JavaScript
document.fform.ototal.value=eval(total);
}

//--></SCRIPT>

<FORM NAME ="fform">

<table border="1" align="center"width="46%">
<tr><td colspan="2"><H2 ALIGN="center">Travel BintangAbadi</H2></td></tr>
<tr><td width="50%" height="194"><PRE>
<p>Nama : <input type="text" size="20" name="inama">
Tujuan : <select name="itujuan" size=1>
<option value="Jakarta">Jakarta</option>
<option value="Cirebon">Cirebon</option>
<option value="Tasikmalaya">Tasikmalaya</option>
</select>
Jumlah Tiket : <input type="text" size="11" name="ijumlah">
Member : <input type="checkbox" name="imember">Ya
</p></pre></td>
<td width="50%" colspan="2"><pre>
<pre>Harga Tiket : <input type="text" size="10" name="otiket">
Sub Total : <input type="text" size="10" name="osub">
Diskon : <input type="text" size="10" name="odiskon">
Total Bayar : <input type="text" size="10" name="ototal">
</pre><pre></td>
</tr>
<tr><td colspan="2">
<center>
<INPUT TYPE="button" value="Hitung" onClick="hitungtotal()">
<INPUT TYPE="reset" value="Ulang">
</center></td> </tr>
</table>
</FORM>
</BODY>
</HTML>

B. Object Radio
<html>
<head><title>Latihan Dengan Objek Radio</title></head>
<body>
<script languange ="JavaScript">
<!--
function radio_box(form)
{
var ket = "";
if (form.wanita.checked == true)
{ ket = "Wanita"; }
else
{ ket = "Pria"; }
alert('Anda adalah seorang ' +ket);
}
//-->

. 26
STMIK Bina Sarana Global JavaScript
</script>
<form>
<H1> Memasukkan Data Dengan Objek Radio</H1><hr>
<p><input type="radio" value="wanita" name="wanita">Wanita</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>

C. Object CheckBox
<html>
<head><title>Latihan Dengan Objek Checkbox</title></head>
<body>
<script languange ="JavaScript">
<!--
function radio_box(form)
{
var ket = "";
var ket1 ="";
if (form.bola.checked == true)
{ ket = "Nonton Bola"; }

if (form.tv.checked == true)
{ ket1 = " Nonton Tv"; }

alert('Hobby anda ' +ket+''+ket1);

}
//-->
</script>
<form>
<H1> Memasukkan Data Dengan Objek Checkbox</H1><hr>
<p>Hobby anda :
<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola
<input type="checkbox" value="ON" name="tv">Nonton televisi</p>
<hr>
<p><input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>

D. Object Select
<html>
<head><title>Latihan Dengan Objek Select</title></head>
<body>
<script languange ="JavaScript">
<!--
function tekan()
{

. 27
STMIK Bina Sarana Global JavaScript
var jurusanstr = (document.fform.Jurusan.value);
document.fform.Ojurusan.value = jurusanstr;
}
//-->
</script>
<form name ="fform">
<H1> Penggunaan Objek Select</H1><hr>
<h3>Masukan :<h3>
Jurusan Di UNIKOM :<select name="Jurusan" Size="1">
<option value ="Teknik Informatika"> Teknik Informatika </option>
<option value ="Manajemen Informatika"> Manajemen Informatika </option>
<option value ="Teknik Komputer"> Teknik Komputer </option>
<option value ="Teknik Industri"> Teknik Industri </option>
<option value ="Teknik Elektro"> Teknik Elektro </option>
<option value ="Teknik Sipil"> Teknik Sipil </option>
<option value ="Teknik Arsitektur"> Teknik Arsitektur </option>
<option value ="Teknik Perencanaan Wil. Kota "> Perencanaan Wil. Kota
</option>
</select>
<p><input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output jurusan :</H3>
<input type="text" name="Ojurusan" size="30">
</form>
</body>
</html>

V. Latihan soal
Buatlah halaman seperti berikut, yang mencakup semua materi yang terdapat pada modul ini.
1. Input berupa : NIM, NAMA, JENIS KELAMIN, AGAMA, STATUS, JURUSAN, KOMENTAR.
(SESUAIKAN OBJEK YANG DIPAKAI) Gambar 1
2. Proses terjadi ditombol KIRIM
3. Output : lihat pada gambar 2
4. Isi dengan NIM, NAMA ANDA
Tugas individu, dikumpulkan ke asistan lab dalam

VI. Daftar Pustaka

. 28
STMIK Bina Sarana Global Dasar PHP
Bab III
Dasar PHP

I. Kompetensi
- Konsep PHP
- Tag PHP
- Tipe Data, Variabel, Nilai
- Operator
- Modularitas

II. Tujuan Praktikum

- Mahasiswa dapat memahami konsep PHP
- Mahasiswa dapat memahami dan menggunakan tag dasar PHP.
- Mahasiswa dapat memahami dan menggunakan varibel, tipe data, operator,
- Mahasiswa dapat struktur kontrol PHP

III. Teori Dasar

1. Konsep PHP
Berdasarkan informasi dari situs resmi PHP, “PHP.net”, PHP (PHP: Hypertext
Prepocessor) merupakan bahasa pemrograman web yang dapat disisipkan dalam script
HTML. Banyak sintaks di dalamnya yang mirip dengan bahasa C, Java dan Perl. Tujuan
dari bahasa ini adalah membantu para pengembang web untuk membuat web dinamis
dengan cepat.
Ketika seseorang mengunjungi web berbasis PHP, web server akan memproses
code-code PHP. Beberapa perintah atau code dari PHP tersebut selanjutnya ada yang
diterjemahkan ke dalam HTML dan beberapa ada yang disembunyikan (misalnya proses
kalkulasi dan operasi). Setelah diterjemahkan ke dalam HTML, web server akan
mengirim kembali ke web browser pengunjung tersebut.

Apa yang bisa dilakukan dengan PHP

 Mengurangi waktu untuk membuat web berskala besar
 Mampu menciptakan web interaktif
 Menciptakan berbagai tool untuk keperluan online
(http://www.hotscripts.com/PHP/Scripts_and_Programs/)
 Mendukung e-commerce (shopping carts)

Aplikasi yang diperlukan

Untuk dapat bekerja dengan PHP, berikut ini adalah beberapa aplikasi yang diperlukan:
 Web server (Apache, IIS, Personal Web Server/PWS)
 PHP server (dapat didownload di PHP.net)
 Database server (MySQL, Interbase, MS SQL, dll)
 Web Editor (Dreamweaver, Frontpage, dll)
Anda dapat pula menggunakan tool aplikasi yang di dalamnya sudah terdapat web server
(Apache), PHP server, dan MySQL yang terintegrasi menjadi satu. Tool tersebut dapat
diinstal di PC sebagai sarana belajar PHP. Beberapa contoh tool tersebut diantaranya
adalah Xampp, Easyphp (Easyphp.org), PHPTriad, AppServe, dll.
PHP server dapat berjalan dengan baik di beberapa OS seperti Windows, Linux, dan
Macintosh.

. 29
STMIK Bina Sarana Global Dasar PHP
2. TAG PHP
Seperti telah disebutkan sebelumnya , bahwa parser PHP akan membaca file html
sampai ditemukan tag spesial yang memberitahukan untuk menterjemahkan teks
berikutnya sebagai code php. Parser php akan menjalankan semua kode yang dibacanya
dari tag awal tadi sampai ditemukan tag penutup kembali.
Dengan cara inilah maka code script php dapat ditempelkan pada document html(html-
embedded). Semua teks yang berada diluar tag awal dan akhir php akan dianggap
sebagai teks html biasa dan akan dikirimkan
langsung ke browser client untuk ditampilkan.
Ada 4 pasangan tag yang dapat digunakan untuk menyatakan sebuah blok code php,
yaitu :
a. <? echo "Program PHP Anda Disimpan Di Antara Tag Ini" ?>
b. <?php echo " Program PHP Anda Disimpan Di Antara Tag Ini " ?>
c. <script language="php">
echo " Program PHP Anda Disimpan Di Antara Tag Ini ";
</script>
d. <% echo " Program PHP Anda Disimpan Di Antara Tag Ini " %>

Contoh :
<html>
<head><title>Halaman PHP pertamaku</title></head>
<body>
<?php
echo "Hello World!";
?>
</body>
</html>

Semicolon(;)
Apabila Anda perhatikan contoh sebelumnya, maka terdapat tanda titik koma (semicolon)
pada akhir perintah echo. Tanda semicolon merupakan penanda akhir dari statement
PHP dan harus ada.

<html>
<head><title>Halaman PHP pertamaku</title></head>
<body>
<?php
echo "Hello World! ";
echo "Hello World! ";
echo "Hello World! ";
echo "Hello World! ";
echo "Hello World! ";
?>
</body>
</html>

3. Variabel
Variable merupakan penampung sebuah data dan memiliki sifat datanya dapat berubah-
ubah. Pada PHP semua variable dituliskan dengan tanda $ di belakang nama variable.
Aturan penamaan variable sama dengan aturan penulisan variable pada bahasa lainnya
yaitu :

. 30
STMIK Bina Sarana Global Dasar PHP
 Nama variable bisa terdiri dari angka,huruf dan underscore. Selain itu tidak boleh
digunakan.
 Huruf pertama nama variable tidak boleh berupa angka.
 Pada PHP nama variable bersifat case-sensitive yaitu memperhatikan huruf besar
dan kecil.

Contoh :

//penamaan berikut benar

$nama = "Yusuf";
$test123 = "Test";
$_TEST = "Test";
$Test123 = "Test";

//penamaan yang salah

$1Huruf = "A"; //diawali dengan angka
$sw3ar-it = "Again"; //menggunakan karakter "-"
$Tom&Jerry = "Kucing"; // menggunakan karakter "&"

Yang perlu diingat deklarasi tipe variable biasanya tidak ditentukan oleh programmer.
PHP akan secara otomatis mengubah atau memberi tipe data berdasarkan kontek
penggunaannya.

Contoh :
$nama = "Ini tipe String" ; //deklarasi tipe string;
$numeric = 123 ; //deklarasi integer
$numeric = 456.123 ; //Sekarang $numeric bertipe float
$bollean = true ; // deklarasi tipe Boolean

4. Tipe Data
Terdapat dua kelompok tipe data yang ada pada PHP, yaitu tipe data Saklar dan tipe
data Compound.
1. Tipe Data Skalar
PHP mengenal empat tipe data saklar, yaitu : integer, floating point, string, dan
Boolean.

Tipe Data Integer

Tipe data integer merupakan tipe yang menyatakan bilangan bulat dengan range
antara -2 milyar sampai +2 milyar.
Contoh :
$a = 1234; // desimal

. 31
STMIK Bina Sarana Global Dasar PHP
$a = -123; // negatif desimal
$a = 0123; // octal (sama dengan 83 dalam desimal)
$a = 0x1A; //hexadecimal (sama dengan 26 dalam desimal)

Tipe Data Floating point (Float)

Tipe data floating point ini menyatakan bilangan riil atau pecahan.
Contoh :
$a = 1.234;
$a = 1.2e3;
$a = 7E-10;

Tipe Data String

Tipe data string merupakan tipe data yang menyatakan tipe data teks yang berisi
kumpulan karakter.
Contoh :
$untai = 'Ini merupakan untaian karakter';
$rantai = "ini juga berupa string";

Tipe Data Boolean

Tupe data ini muncul sejak PHP 4 dan merupakan tipe data yang hanya memiliki
nilai TRUE atau FALSE.
Contoh :
$bol = TRUE;

2. Tipe Data Compound

Ada dua tipe data compound yang dikenal oleh paket ini adalah array dan object.

Array
Array merupakan tipe data terstruktur untuk menyimpan sejumlah data yang
bertipe sama, dan dapat diindek berdasarkan numerik atau string.
Contoh :
$hari=array(“Senin”, “Selasa”, “Rabu”, “Kamis”, “Jumat”, Sabtu”, “Minggu”);
Object
Merupakan inisialisasi suatu class. Objek dapat diinisialisasi menggunakan
statement new. Penjelasan lebih lengkap mengenai objek akan dibahas pada
bagian tersendiri.

5. Operator
Operator digunakan untuk melakukan suatu operasi. Operator-operator yang dapat
digunakan diantaranya :
1. Operator Aritmatika
Operator ini berhubungan dengan operasi aritmatik

2. Operator Assignment
Operator ini digunakan untuk memberikan/mendefinisikan nilai ke sebuah variabel.

. 32
STMIK Bina Sarana Global Dasar PHP

3. Operator Bitwise
Operator ini digunakan untuk operasi-operasi bilangan biner.

4. Operator Perbandingan
Operator ini digunakan untuk melakukan suatu operasi perbandingan dan biasanya
diletakkan di struktur control program sperti if, elseif.

5. Operator Logika
Operator ini digunakan untuk melakukan sutu operasi logika.

6. Operator Increment dan Decrement

Opertor ini diadopsi dari baha C++. Digunakan untuk menambahkan atau
mengurangi nilai suatu variabel dengan 1.

. 33
STMIK Bina Sarana Global Dasar PHP
IV. Latihan Praktikum
Ketiklah script dibawah ini dengan menggunakan notepad kemudian simpan file di folder
htdocs/latihan_php dan perhatikan hasilnya!
1. Latihan penggunaan variabel, kemudian simpan dengan nama file variabel.php

2. Latihan penggunaan operator, kemudian simpan dengan nama file operator.php

. 34
STMIK Bina Sarana Global Struktur Input Ouput
Bab IV
Struktur Input Output

I. Kompetensi
Pemahaman Struktur Input Output

II. Tujuan Praktikum

- Mahasiswa mampu memahami struktur input output

III. Teori Dasar

A. Memahami Struktur Input Output
Struktur paling dasar dalam sebuah pemrograman adalah struktur input-output.
Perhatikan bagan berikut :

Dari bagan diatas terlihat input merupakan interface untuk memasukkan data, kemudian
data diolah, selanjutnya hasil pengolahan ditampilkan pada komponen output. Proses
merupakan langkah-langkah yang diperlukan untuk melakukan tranformasi input menjadi
output. Sedangkan output dalam konteks ini merupakan hasil akhir proses pengolahan
data input. Hasil pengolahan ini akan ditampilkan melalui device yang menangani
masukan dan keluaran, seperti printer, floppy, layar monitor, file dan sebagainya.

B. Penggunaan Web Form

Suatu situs dapat dikatakan dinamis jika di dalamnya mampu melakukan interaksi user.
Salah satu ciri interaksi yang dapat digunakan salah satunya menggunakan form web,
pengunjung situs dapat mengirimkan data melalui masukan form web tersebut kemudian
memperoleh respon halaman tertentu sesuai masukan yang diberikan.
Tag yang berperan dalam pembuatan form adalah tag <FORM>.
Dalam tag <FORM> terdapat atribut action yang nilainya berupa nama file yang akan
diakses dan atribut method yang mempunyai pilihan nilai GET dan POST. Method GET
digunakan untuk mengirimkan data kepada server sebagai satu kesatuan dengan string
URL-nya, sedang methode POST data dari web form akan dikirim ke server secara
terpisah dari string URL. Method GET mengandung banyak kelemahan, data yang dikirim
user ke server akan dimunculkan bersamaan dengan URL, jika informasi yang dikirimkan
berupa data rahasia, misalkan informasi password, keamanan menjadi lemah, selain itu
method GET tidak dapat digunakan untuk mengirimkan data ke server dalam jumlah
yang besar.
Dibawah ini adalah contoh web form :
Nama file :form_contoh01.html

Sedang file yang akan dijalankan ialah :

. 35
STMIK Bina Sarana Global Struktur Input Ouput
Nama file : contoh01.php

Dari contoh di atas kita bisa lihat, untuk mengambil data dari form yang menggunakan
methode GET digunakan variabel $_GET. Variabel $_GET sudah diset oleh PHP untuk
mengambil semua data GET.
Untuk data dalam bentuk POST, variabel yang digunakan adalah $_POST. Baik variabel
$_GET maupun variabel $_POST, keduanya mempunyai tipe array, index dari variabel
itu adalah semua data yang dikirim ke server, sedang elemennya adalah nilai dari data
yang dikirimkan.

Perhatikan contoh dibawah ini :

Nama file : form_contoh02.html

Sedang file yang akan dijalankan ialah :

Nama file : contoh02.php

C. Komponen Interaktif Input/Output

Beberapa komponen interaktif tersebut adalah textbox, combo box, commad button dan
sebagainya. Pembuatan komponen interaktif bias menggunakan kode-kode pembuatan
form yang ada pada HTML dan selanjutnya form akan dihubungkan dengan kode-kode
pemrosesan menggunakan PHP.
a. Text Box
Berikut akan dibuat contoh pemakaian textbox pada HTML yang akan dihubungkan
dengan program dari PHP. Buka editor (notepad atau yang lainnya) dan ketikkan
kode skrip berikut :
Nama file : io_tbox.html

. 36
STMIK Bina Sarana Global Struktur Input Ouput
Simpan skrip diatas di folder yang telah (kalian) dibuat dengan nama io_tbox.html.
Selanjutnya jalankan pada browser.
Tombol kirim pada tampilan diatas belum bias diproses, karena masih harus
membuat program lain di luar HTML, yaitu io_tbox.php terlebih dahulu. Program ini
adalah program yang akan dieksekusi jika dilakukan penekanan tombol kirim.
Nama file : io_tbox.php

Simpan program diatas dan jalankan tombol kirim pada form yang dibuat dengan
HTML tadi.

b. Combo Box
Selanjutnya akan dibuat contoh pemakaian objek interaktif combo box pada HTML
yang akan dihubungkan dengan kode program dari PHP.
Nama file : io_combo.html

. 37
STMIK Bina Sarana Global Struktur Input Ouput
Simpan skrip diatas ke dalam localhost dan buka di internet browser, dan hasilnya
akan terlihat seperti gambar berikut :

Pada form tampilan diatas, klik tombol OK yang terhubung ke file io_combo.php.
Adapun script file tersebut adalah :

Nama file : io_combo.php

c. Radio Button
Berikut akan membuat contoh pemakaian objek interaktif radio button pada HTML
yang akan dihubungkan dengan kode program PHP. Terlebih dahulu buat kode
HTML.
Nama file : io_radio.html

Nama file : io_radio.php

. 38
STMIK Bina Sarana Global Struktur Input Ouput
IV. Latihan Praktikum
Kerjakanlah setiap script Input Output pada bagian Teori Dasar

V. Latihan Soal
1. Buatlah skrip yang akan digunakan untuk memasukkan dan menampilkan data berikut:
 Input: Nama, Alamat, Nilai 1, Nilai 2, Nilai 3
 Output: Mama, Alamat, Total Nilai dan Rata-rata Nilai
2. Buatlah skrip yang bisa digunakan untuk menghitung luas sebuah segitiga dengan rumus
1/2 alas X tinggi. Input dibuat dengan FORM menggunakan kode-kode HTML, dan proses
dilakukan dengan PHP.
3. Buatlah skrip untuk melakukan konversi mata uang dari rupiah ke GS Dolar, Yen dan Peso
dengan kurs berikut:
 1 CISD = Rp. 10.000,-
 1 Yen = Rp. 3500,-
 1 Peso = Rp.2500,-
Jadi inputnya adalah Rupiah dan outputnya adalah konversi rupiah dalam tiga mata uang
tersebut.
4. Dengan cara yang sama seperti soal nomor 3, buatlah skrip yang bisa melakukan konversi
suhu dari derajat celcius ke Reamur dan Fahrenheit.

VI. Daftar Pustaka

Pemograman Web Dinamis dengan PHP 5, Teguh Wahyono, Elex Media Komputindo, 2005.

. 39
STMIK Bina Sarana Global Struktur Kontrol
Bab V
Struktur Kontrol

I. Kompetensi
- Runtunan
- Pemilihan
- Perulangan

II. Tujuan Praktikum

- Mahasiswa mampu mengetahui konsep Runtunan, Pemilihan dan Perulangan
- Mahasiswa mampu membuat program sederhana menggunakan Runtunan, Pemilihan dan
Perulangan.

III. Teori Dasar

Selain statemen sederhana yang telah dipelajari pada bab sebelumnya terdapat beberapa
statemen yang digunakan untuk proses khusus. Lebih detail lagi dalam PHP seperti bahasa C
maupun java memiliki beberapa strukur control program. Dengan menggunakan struktur-
struktur ini maka jalanya program tidak selalu berurutan sesuai dengan kondisi yang ditemui.

1. Struktur Berurutan
Struktur ini merupakan struktur yang paling sederhana. Program akan dijalankan secara
urut dari awal program ke akhir program.
Contoh :
<?php
echo “Statment1”;
echo “Statment2”;
echo “Stament3”;
?>

2. Struktur Seleksi (kondisi)

Struktur pemrograman logika, berhubungan erat dengan seleksi sebuah kondisi. Struktur
ini membawa seseorang pada suatu keputusan dari beberapa pilihan yang ada. Seperti
misalnya benar atau salah, laki-laki atau perempuan, lulus atau tidak lulus, dan lain
sebagainya.

Struktur ini digunakan untuk mengatur aliran program berdasarkan kondisi tertentu yang
ditetapkan.
Struktur ini terdiri dari struktur if …. else dan switch
a. If … else
Struktur ini digunakan untuk masalah perbangan proses.
Sintak if…else :
If (syarat/kondisi)
{
Operasi yang dijalankan;
}
else
{
Operasi yang dijalankan;
}

. 40
STMIK Bina Sarana Global Struktur Kontrol
Nilai dari syarat/kondisi adalah true atau false. True jika syarat terpenuhi dam false
jika syarat tidak terpenuhi. Dan operator pada struktur ini menggunakan operator
perbandingan.

Contoh :
<?php
$nilai = 60;
If ($nilai >= 50)
echo "Anda Lulus";
else
echo "Anda tidak lulus";
?>

Hasilnya : Anda Lulus

b. Sintak if … elseif …else :

if ($syarat 1)
{
proses 1
}
elseif ($syarat 2)
{
proses 2
}
else
{
proses 3
}

c. Switch
Untuk seleksi dengan alternative banyak digunakan struktur switch.

Sintak:
switch(variable)
{
case nilai 1 : perintah yang dijalankan ; break;
case nilai 2 : perintah yang dijalankan ; break;
…..
default : perintah yang dijalankan ; break;
}

Contoh :

<?php
$hari = 2;
switch ($hari)
{
case 1 : echo "Senin"; break;
case 2 : echo "Selasa"; break;
case 3 : echo "Rabu"; break;

. 41
STMIK Bina Sarana Global Struktur Kontrol
case 4 : echo "Kamis"; break;
case 5 : echo "Jumat"; break;
case 6 : echo "Sabtu"; break;
case 7 : echo "Minggu"; break;
}
?>

Hasilnya :
Selasa

3. Struktur Perulangan
Perulangan adalah sebuah proses eksekusi operasi program secara berulang-ulang sampai
ditemui kondisi untuk mengakhiri ekseskusi tersebut.

a. Perulangan While
Operasi program akan dieksekusi terus-menerus selama syarat bernilai true. Bagian blok
while mungkin dapat tidak dieksekusi jika pada awal looping syarat telah bernilai false.

Sintak :
While (syarat)
{
Operasi program;
}

Contoh :
<?php
$a = 0;
While($a < 5)
{
echo $a;
$a++;
}
?>

Hasilnya :
01234

b. Perulangan Do – While
Proses program minimal dijalankan sekali karena pengujjian syarat dilakukan diakhir
struktur. Blok do-while akan dieksekusi lagi jika syarat bernilai true;

Sintak :
do
{
proses program ;

}
while($syarat);
Contoh :

. 42
STMIK Bina Sarana Global Struktur Kontrol
$a = 0;
do
{
echo $a;
$a++;
} while ($a < 5);

Hasilnya :
01234

c. Perulangan FOR
Pada keadaan ini pengulangan akan berhenti jika sudah bernilai false, atau dengan kata
lain selama bernilai True maka pengulangan akan terus berjalan.
Sintak :
for( nilai awal loop; syarat ; penambahan )
{
operasi program ;
}

Contoh :
for ( $a = 0 ; $a < 5 ; $a++ )
{
echo $a ;
}

Hasilnya :
01234

IV. Latihan Praktikum

- Latihan penggunaan if .. else, kemudian simpan dengan nama file if_else.php

- Latihan penggunaan if…elseif…else, kemudian simpan dengan nama file

if_elseif_else.php

. 43
STMIK Bina Sarana Global Struktur Kontrol

- Latihan penggunaan switch case, kemudian simpan dengan nama file switch_case.php

- Latihan penggunaan while, kemudian simpan dengan nama file while.php

- Latihan penggunaan FOR, kemudian simpan dengan nama file for.php

. 44
STMIK Bina Sarana Global Struktur Kontrol
V. Latihan Soal
- Lat_soal1.html
Toni pergi ke supermarket, dan ia membeli beberapa barang diantaranya
2 botol air mineral dengan harga satuan Rp. 2000 /perbotol, 4 buah Roti dengan harga
satuan Rp. 2500, dan membeli Mie Instan sebanyak 10 bungkus dengan harga satuan
Rp.1000.
Pada supermarket tersebut mempunyai ketentuan diskon, yaitu jika total bayar diatas Rp.
20.000, maka akan mendapatkan diskon sebesar 2% dari total bayar.
Buatlah program perhitungan total harga tiap barang dan total bayar setelah dikurangi
diskon.
- Lat_soal2.html
Buatlah program SPBU dengan menggunakan pengulangan (bebas) seperti dibawah ini :
Daftar Harga Premium
1 liter = Rp. 4500,-
2 liter = Rp. 9000,-
3 liter = Rp. 13500,-
4 liter = Rp. 18000,-
5 liter = Rp. 22500,-
6 liter = Rp. 27000,-
7 liter = Rp. 31500,-
8 liter = Rp. 36000,-
9 liter = Rp. 40500,-
10 liter = Rp. 4500,-

VI. Daftar Pustaka

Pemograman Web Dinamis dengan PHP 5, Teguh Wahyono, Elex Media Komputindo, 2005.

. 45
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

Bab VI
Fungsi, Array,
dan Operasi String

I. Kompetensi
- Penggunaan Fungsi
- Penggunaan Array
- Operasi String

II. Tujuan Praktikum

- Mahasiswa dapat memahami Fungsi
- Mahasiswa dapat memahami dan menggunakan Array
- Mahasiswa dapat memahami dan menggunakan Operasi String
-
III. Teori Dasar
A. Fungsi
Fungsi (function) atau ada yang menyebutnya sebagai prosedur (procedure), merupakan
bagian suatu program yang berisi kumpulan beberapa statement yang melaksanakan
tugas tertentu dalam batang tubuh program. Menggunakan prosedur atau fungsi, kode
script akan lebih sederhana dan terstruktur, karena jika fungsi telah dibuat dan berhasil,
dapat digunakan kapan saja.
Apabila program yang telah dibuat terlalu panjang. Sehingga sulit dimengerti dan
dipahami, lebih baik jika memecah program menjadi program-program kecil. Program-
program kecil ini biasa disebut dengan prosedur, fungsi, atau ada yang menyebutnya
modul.
Berikut gambaran suatu ilustrasi penggunaan fungsi pada program utama.
Function X Program Utama
(………………………………………………
(……………………
…………………………………………………
…………………… …………………………………………………
…………………………………………………
……………………
…………………………………………..
…………………..) #panggil fungsi x
…………………………………………………
………………………………………………)
a. Fungsi Tanpa Parameter
Fungsi tanpa parameter berarti pembuatan dan pemanggilan fungsi dilakukan
tanpa harus mengirimkan parameter, tetapi cukup mengetikan nama fungsi
tersebut.
Function Namafungsi( )
{
Function body
}

Dari contoh diatas dapat dilihat baris pertama merupakan deklarasi fungsi.
Deklarasi fungsi berisi ;
 Keyword Function
Merupakan kata “function” yang harus selalu dituliskan diawal fungsi.
 Nama Fungsi

. 46
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

o Tidak boleh sama dengan fungsi yang telah ada dalam PHP
o Hanya boleh terdiri dari huruf dan angka, dan garis bawah(underscore).
o Tidak boleh diawali dengan angka.
 Function Body berisikan statement yang akan diproses dalam fungsi.
Sedangakan fungsi akan dipanggil dalam skrip utama dari program yang dibuat.
Cara memanggilnya cukup dengan mengetikan nama fungsi dan diakhiri dengan
tanda “ ; ” atau titik koma.
Jadi memanggil funsi cukup mengetikan :
namafungsi( );

Untuk lebih jelasnya, perhatikan contoh penulisan dan pemanggilan fungsi yang
tidak menggunakan parameter, yang terdapat terdapat latihan praktikum dibawah.

b. Fungsi Dengan Parameter

Parameter adalah nilai yang dimaksukkan ke dalam fungsi untuk diproses
sehingga menghasilkan output.
Fungsi dengan parameter bisa dituliskan seperti berikut :
Function namafungsi ($parameter)
{
Peryataan/statement;
}

Dari struktur dasar yang dibahas di atas, perhatikan contoh penerapannya berikut
ini :
Function tambah_angka($x, $y)
{
z= x + y ;
echo(z);
}

Dari sisi logika fungsi yang dibuat diatas, dapat dijelaskan sebagai berikut :
 Function body diawali oleh tanda “{“ dan diakhiri oleh tanda “}”. Statement
dalam tanda tersebut berisi instruksi yang harus dilakukan computer untuk
menghasilkan output yang diinginkan.
 Baris 3 menyuruh computer membuat suatu variabel bernama z yang isinya
adalah hasil penjumlahan x dan y . x dan y didapat dari input yang diberikan
user.
 Baris ke 4 menyuruh komputer menampilkan hasil perhitunga ke layar.

Fungsi yang telah memiliki parameter dapat dipanggil dengan cara berikut :
Namafungsi(nilaiparameter);

Sebagai contoh dapat dilihat pada latihan praktikum dibawah.

c. Varibel Global dan Lokal

Dalam lingkup fungsi juga dikenal adanya variabel local dan global adalah variabel
yang nilainya hanya diakui dalam lingkup local dalam prosedur saja.
Perhatikan contoh skrip berikut ini :

. 47
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

Jika skrip diatas dijalankan menggunakan browser, hasil yang akan Nampak sperti
berikut ini ;

Kenapa nilai variabel nama tidak bisa ditampilkan? Jawabnya adalah karena
variabel yang dalam fungsi merupakan variabel local.
Jadi dalam konteks diatas, variabel $nama dalam fungsi merupakan variabel local
yanh hanya digunakan dalam lingkup fungsi itu saja. Variabel ini berbeda dengan
variabel $nama yang berada diluar fungsi (dalam skrip utama).
Selanjutnya bandingkan skrip diatas dengan skrip dibawah ini.

Jika skrip diatas dijalankan, hasilnya terlihat seperti gambar dibawah ini . Dari
gambar ini terlihat variabel $nama sudah terisi dengan data global yang dituliskan
di luar fungsi. Hal ini terjadi karena pendeklarasian variabel nama sebagai variabel
global.

. 48
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

B. Array
Array adalah suatu rangkaian elemen (variabel) bertipe sama yang menempati memori
secara teratur yang dapat diacu/diakses secara individu dengan menambahkan suatu
index (subscript) kepada suatu nama unik. Array sering disebut larik.
PHP mendukung penggunaan array untuk berbagai tipe data. PHP akan mengidentifikasi
secara otomatis tipe data yang sesuai tanpa harus dideklarasi sebelumnya.
Cara penulisan array adalah :
$nama_var_array = array(value1, value2,……);
Contoh penerapannya adalah :
$hari = (“Senin”, “Selasa”, “Rabu”, “Kamis”, “Jumat”, “Sabtu”, Minggu”);

Untuk lebih jelasnya penggunaan array dapat dilihat pada latihan praktikum.

C. Operasi String
String adalah sekelompok karakter (character) yang berkumpul menjadi satu. Pada PHP,
sebuah karakter sama dengan satu byte, yang terdiri dari 256 karakter yang
memungkinkan. Ini memiliki implikasi bahwa PHP tidak mendukung native support dari
Uniceode.
1. Menampilkan String dengan Keyword Echo
Salah satu cara menampilakn string dilayar adalah menggunakan keyword echo.
Dengan keyword echo, bisa langsung mengetikan string yang akan ditampilkan
dengan diawali dan diakhiri dengan tanda petik satu (‘) atau single quoted.
echo ‘Ini contoh string sederhana’;

2. Menampilkan String dengan Keyword Print()

Selain menggunakan echo, string juga bisa ditulis dengan format print. Cara
penulisannya hamper sama dengan penulisan menggunakan echo. Perhatikan
contoh ;
Print “Ini contoh string string sederhana”;

3. Mengatur Format dengan Keyword Printf()

Cara ketiga selain menggunakan perintah echo dan print, adalah menggunakan
statement printf. Perhatikan contoh berikut ini :

. 49
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

Hasilnya akan terlihat pada gambar dibawah ini :

Perhatikan format skrip penulisan string menggunakan printf :

Printf(“string format_string”, argument);
Setiap bagian bisa dijelaskan sebagai berikut ;
 String : tulisan yang akan ditampilkan.
 Format String : format % yang digunakan, yaitu :
o % s : format string
o %d : bilangan bulat
o %b : bilangan biner
o %o : bilangan octal
o %x : heksa decimal
o %c : kode ASCII
 Argumen : variabel yang akan dicetak.

4. Fungsi dasar String

Fungsi string yang dimaksud pada bagian ini adalah fungsi-fungsi yang disediakan
PHP untuk melakukan manipulasi string. Dengan fungsi-fungsi ini dapat
memudahklan dalam mengolah string. Seperti case string, memotong string,
menggabung string dan sebagainya.
a. Fungsi chr()
Fungsi chr() digunakan mencetak karakter pada kode-kode ASCII.
Daftar kode ASCII dapat dilihat pada situs http://www.asccitable.com.
b. Fungsi CR32()
Fungsi CR32 digunakan untuk melakukan kalkulasi terhadap sejumlah karakter
string dengan polynomial CR32.

. 50
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

c. Fungsi Crypt()
Fungsi Crypt digunakan untuk melakukan penyandian encryption (hashing).
d. Fungsi Itrim
Fungsi Itrim digunakan untuk menghapus whitespace (spasi putih) yang
terdapat pada bagian awal sebuah teks.
e. Fungsi md5
Fungsi md5 digunakan untuk menghitung sekumpulan karakter string
menggunakan RSA data security MD5. MD5 adalah Message-Digest Algorithm
yang biasa digunakan untuk melakukan pembuatan password dalam menjamin
keamanan data.
f. Fungsi number_format
Fungsi number_format digunakan untuk melakukan format angka sehingga bisa
memformat jumlah desimal, pemisah desimal, dan pemisah ribuan.
g. Fungsi merubah huruf string
Merubah huruf string yang dimaksud adalah merubah huruf dari kapital ke huruf
kecil atau sebaliknya. Fungsi yang dapat digunakan seperti :
strtoupper  merubah menjadi huruf capital
strtolower  merubah menjadi huruf kecil
ucfirst  merubah huruf awal string menjadi huruf capital
ucwords  merubah huruf awal setiap kata pada suatu string menjadi
huruf capital
h. Fungsi menghitung panjang string (strlen)
Fungsi ini digunakan untuk menghitung jumlah karakter pada suatu string,
fungsi yang digunakan adalah strlen.

Contoh pengunaan Fungsi-fungsi string diatas dapat dilihat pada latihan praktikum.

IV. Latihan Praktikum

A. Fungsi
a. Fungsi tanpa parameter, nama file fungsi_non_parameter.php

b. Fungsi dengan parameter, nama file fungsi_parameter.php

. 51
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

B. Array
a. Contoh penggunaan dan pemanggilan array, nama file : array.php

b. Array dua dimensi

Misalnya terdapat data siswa sebagai berikut :
Nomor Nama Alamat
1 Wisnu Klaten
2 Rina Solo
3 Hasyim Klaten
4 Joko Solo
5 Bambang Sragen
6 Heni Klaten
7 Rika Solo
8 Yosua Sragen

Kemudian buat kelompok siswa berdasarkan kota, seperti :

 Klaten : Wisnu, Hasyim, Heni.
 Solo : Rina, Joko, Rika
 Sragen : Bambang, Yosua
Maka pembuat skrip aray kasus diatas adalah sebagai berikut, simpan dengan
nama file array_2D.php

. 52
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

. 53
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

C. Operasional String

. 54
STMIK Bina Sarana Global Fungsi, Array, dan Operasi String

V. Latihan Soal
A. lat_soal4_1.php
Terdapat suatu teks yang bertuliskan Saya Sedang Belajar PHP, Buatlah program untuk
menampilkan :
 Menampilkan seluruh teks
 Menampilkan hasil konversi dengan fungsi md5
 Hitung jumlah huruf/karakter pada teks tersebut
 Merubah semua karakter menjadi huruf besar/capital

B. Lat_soal4_2.php
Terdapat beberapa data nilai yang tersimpan pada suatu variabel nilai yang merupakan
suatu array, berikut data yang tersimpan pada array nilai:
Nilai : {68, 90, 84, 70, 92, 56}
Buatlah suatu program yang berisi :
 Menampilkan semua data yang ada pada array
 Mencari nilai maksimum
 Mencari nilai minimum
 Mencari nilai rata-rata

VI. Tugas
Buatlah web tentang Fungsi String lainnya (selain dari materi string yang ada pada modul ini)
minimal 10 fungsi kemudian buatlah Paper yang berisi kesimpulan dari fungsi string yang Anda
temukan.
.
VII. Daftar Pustaka
Pemograman Web Dinamis dengan PHP 5, Teguh Wahyono, Elex Media Komputindo, 2005.

. 55
STMIK Bina Sarana Global Cookies dan Session
Bab VII
Cookies dan Session

I. Kompetensi

II. Tujuan Praktikum

III. Teori Dasar
A. Cookies
1. Mengenal Cookies
Ketika baru mengenal internet kurang lebih sepuluh tahun yang lalu, penulis masih
ingat ketika itu terheran-heran oleh hebatnya sebuah situs e-commerce. Pada saat
penulis berusaha mengakses salah satu situs (kalau tidak salah
www.amazon.com), tiba-tiba muncul pesan "Hello Tubagus, Welcome to our site.".
Yang membuat penulis heran waktu itu adalah bagaimana cara situs tersebut
mengenali saya? Atau jika sudah pernah kenal, bagaimana situs tersebut
mengingat nama saya? Waktu itu saya belum tahu, bahwa cookies-lah yang
membuat situs tersebut bisa mengenali dan mengingat nama pengunjungnya.
Apakah yang dimaksud dengan cookies? Cookies adalah fasilitas yang digunakan
untuk menyimpan sebuah nilai secara temporer, yang kemudian nilai ini dapat
dipakai lagi sebagai indentifier. Sebagai contoh, saat kita membuka sebuah
halaman website, browser kita akan menyimpan informasi yang dibuat si Pembuat
website dalam cookies. Kemudian jika kita mengunjungi website itu lagi, informasi
yang tersimpan dalam cookies akan dipakai untuk mengenali identitas kita.
Jika diaplikasikan dalam program e-commerce, cookie dapat digunakan untuk
menyimpan nama pengunjung, merekam daftar barang yang akan dibeli
pengunjung, menyimpan pilihan yang pernah diatur sebelumya oleh pengunjung.
Cookies juga bisa digunakan untuk menyimpan sesi yang memungkinkan
pengguna masuk ke halaman lain tanpa perlu melakukan login kembali.
Banyak orang yang mempunyai anggapan bahwa cookies ber-bahaya. Tetapi
sebenarnya bukanlah demikian. Cookies bukanlah spyder yang akan memata-
matai situs Anda. Karena meskipun cookie memberikan kemampuan webserver
untuk menyimpan informasi ke klien, tetapi tentunya memiliki keterbatasan. Satu
klien hanya mampu menampung cookie di dalam hardisknya sampai maksimal 1,2
MB yang terdiri 300 cookies dengan ukuran masing-masing sampai 4 kilobyte.

2. Membuat Cookies
Untuk membuat cookies pada PHP, sintaks penulisannya adalah:

setcookie (name, value, expire, path , stringdomain, secure)

 name : merupakan nama cookie. Misalnya, 'namacookie' dapat dipanggil

sebagai $_COOKIE['namacookie'].
 value : merupakan nilai cookie. Nilai ini dikirim pada client komputer dan
disimpan dalam namacookie. Sebagai contoh, jika diasumsikan nama cookie-
nya adalah 'cookiename', nilai ini akan dipanggil sebagai
$_COOKIE['cookiename'].
 expire : merupakan waktu cookie kedaluwarsa. Secara default, cookie hanya
berlaku sampai browser ditutup. Sebagai contoh, time()+60*60*24*25 akan
mengeset cookie untuk expire selama 25 hari.
 path : merupakan path pada server yang menentukan direktori yang dapat
menggunakan cookies. Jika informasi path dan CIRL yang diinginkan tidak

. 56
STMIK Bina Sarana Global Cookies dan Session
sesuai, klien tidak akan mengirim-kan cookies. Jika nilai path berupa "/", berarti
cookie valid pada semua direktori pada web server.
 domain : merupakan domain server yang menunjukkan tempat cookie berada.
Klien tidak akan mengirim cookie jika ternyata domain yang sedang dibuka
tidak cocok dengan domain tersebut.
 secure : mengindikasikan bahwa cookie hanya akan dikirim -kan jika koneksi
HTTPS-nya aman (secure).

Perhatikan contoh berikut:

setcookie ("TestCookie","Navida Wahyu Ananda" );

Perintah ini digunakan untuk membuat variabel dengan nama "Testcookie" yang
akan diisi dengan value "Navida Wahyu Ananda".
Anda juga bisa memperhatikan contoh berikut ini.
setcookie ("TestCookie", "Eni Endarti", time ()+3600) ;

Contoh ini akan membuat variabel dengan nama "Testcookie" yang akan diisi
dengan value "Eni Endarti" dan akan expired dalam waktu 1 jam (3600 detik).

3. Menghapus dan Mengganti Cookies

Untuk melakukan penghapusan isi cookies, Anda bisa mengguna-kan setcookies
dengan menuliskan nama cookie tanpa disertai dengan string isi cookies.
Sintaks:
setcookie ( namacookies");

4. Cookies dan Array

Cookies juga bisa dibuat menggunakan variabel array. Fungsinya adalah untuk
mempermudah penyimpanan data berindeks.
Sintaks:
setcookie ("cookie-name[index]", "cookie-value");
B. Session
1. Mengenal Session
Pada bagian sebelumnya Anda sudah mempelajari tentang cookies yang
merupakan fasilitas untuk menyimpan sebuah nilai secara temporer, yang
kemudian nilai tersebut dapat dipakai lagi sebagai indentifier.
Sebenarnya secara prinsip, session hampir sama dengan cookies. Perbedaannya
terletak pada lamanya nilai yang dapat dipakai lagi. Misalnya kita membuat sebuah
cookies pada halaman ke-1. Cookies ini bisa kita ambil isinya pada halaman ke-2.
Namun jika kita ingin ambil isi cookies tersebut di halaman ke-3, pada halaman ke-
2 cookies harus dideklarasikan ulang. Lain halnya dengan session. Jika kita buat
session pada halaman ke-1, ke halaman berapapun kita masih dapat mengambil
isi session, selama session belum dimatikan.
Perbedaan lain antara cookies dengan session adalah jika Anda menggunakan
cookies, penyimpanan data dilakukan pada komputer client, sedangkan pada
session penyimpanan data dilakukan pada komputer server. Hal ini menyebabkan
tidak diperlukannya lagi komunikasi antara web server dengan klien ketika
webserver membutuhkan data tersebut.
Selanjutnya setiap kali suatu session dibentuk, akan terdapat referensi yang
menunjuk ke session yang bersangkutan. Referensi ini dikenal dengan nama SID
atau Session Identifier.

. 57
STMIK Bina Sarana Global Cookies dan Session
2. Memulai Session
Untuk memulai session pada PHP, Anda harus melakukannya dengan menuliskan
"session_start".
Sintaks:
Session_start();

3. Memberikan Nilai pada Session

Untuk memberikan nilai pada session di PHP, kita harus menggunakan bantuan
variabel.
Sintaks:
Session_register(isil, isi2, isi3, dst);
Sedangkan untuk mengambil nilai session pada PHP, kita hanya perlu panggil isi
session sebagai sebuah variabel.

4. Mematikan Session
Untuk mematikan session pada PHP, Anda dapat menggunakan sintak berikut:
Session_destroy();

IV. Latihan Praktikum

A. Cookies
1. Latihan cookies_1.php (membuat Cookies)
<?php
$nilai = 'STMIK Bina Sarana Global';
/* Set di bawah ini untuk membuat variabel Testcookie */ setcookie ("TestCookie",
$nilai);
/* Set di bawah ini akan expire dalam waktu 1 jam */ setcookie ("TestCookie",
$nilai,time{)+3600);
echo "Telah tercipta TestCookie <BR>";
echo "Yang diisi dengan value 'Navida Wahyu Ananda' <BR>"; echo "Dengan
waktu expire 1 jam <BR>";
?>

2. Latihan cookies_2.php (memanggil Cookies)

<?php
echo "Mengambil isi cookie :";
echo $TestCookie;
?>

3. Latihan cookies_3.php (menghapus Cookies)

<?
//Isi cookies sebelum dihapus
echo "Isi cookie sebelum hapus : ";
echo $TestCookie, "<BR>";
//Menghapus isi cookies
setcookie ("TestCookie");
//Isi cookies setelah dihapus
echo "Isi cookie setelah hapus : ";
echo $TestCookie, "<BR>";
?>

. 58
STMIK Bina Sarana Global Cookies dan Session

4. Latihan cookies_4.php (mengganti Cookies)

<?php
$nilai = 'Eni Endarti';
/* Set di bawah ini untuk membuat variabel Testcookie */ setcookie ("TestCookie",
$nilai);
/* Set di bawah ini akan expire dalam waktu 1 jam */ setcookie ("TestCookie",
$nilai,time()+3600);
echo "Isi TestCookie telah diganl i <br>",
echo "Dengan value $nilai<BR>";
echo "Dengan waktu expire 1 jam <BR>";
?>

5. Latihan cookies_5.php (Cookies dengan array)

<?php
// set cookies menggunakan array setcookie ("cookie[three]", "Teguh Wahyono");
setcookie ("cookie[two]", "Eni Endarti"); setcookie ("cookie[one]", "Navida
Wahyu Ananda");
// Cetak Isi dengan array
if (isset($_COOKIE['cookie'])) {
foreach ($_COOKIE['cookie'] as Sname => $value) { echo "$name : Svalue
<br />\n";
}
}?>
B. Session
1. Latihan session_1.php (membuat Session)
<?php
// session dibuka
echo{"Setelah sesi dibuka<BR>") ;
session_start();
print("Id session : " . session_id() . "<BR>\n");
echo "<BR> <BRXBR>";
// session ditutup session_destroy();
print("Setelah sesi ditutup<BR>\n");
print("Id session : " . session_id() . "<BR>\n");
?>

2. Latihan session_2.php (mengisi nilai pada Session)

<?
// Mengisi Variabel Session_start();
// Mendaftarkan variabel Session_register("nama", "alamat") $nama = "Navida
Ananda"; $alamat = "Semarang";
// Mengakses Variabel
Echo "Halo " . $nama . "<br>";
Echo "Alamat Anda di " . $alamat;
?>

3. Latihan session_3.php (mematikan Session)

<?
Session_start();
// Saat session aktif

. 59
STMIK Bina Sarana Global Cookies dan Session
Echo "Saat session aktif :<BR>";
Echo "Halo " . $nama . "<br>";
Echo "Alamat Anda di " . $alamat . "<br><BR>";
Session_destroy();
// Setelah varibel dimatikan Echo "Saat session dimatikan :<BR>"; Echo "Halo " .
$nama . "<br>"; Echo "Alamat Anda di " . $alamat;
?>

V. Daftar Pustaka
Pemograman Web Dinamis dengan PHP 5, Teguh Wahyono, Elex Media Komputindo, 2005.

. 60
STMIK Bina Sarana Global Studi Kasus I
Studi Kasus I
Form Interaktif
I. Kompetensi
Membuat Form interaktif menggunakan HTML, JavaScript dan PHP

II. Tujuan Praktikum

1. Mahasiswa mampu mengimplementasikan materi HTML
2. Mahasiswa mampu mengimplementasikan materi JavaScript
3. Mahasiswa mampu mengimplementasikan materi PHP

III. Studi Kasus

A. Soal Kasus
Studi kasus yang diberikan adalah bagaimana membuat script untuk menghitung rata-
rata n buah bilangan yang diinputkan melalui form. Dalam hal ini user pertama kali
diminta memasukkan nilai n (banyaknya bilangan yang ingin dimasukkan) terlebih
dahulu. Selanjutnya akan muncul sebuah form yang di dalamnya terdapat komponen
textbox sejumlah n buah. Setelah user memasukkan bilangan ke dalam komponen-
komponen tersebut, selanjutnya akan tampil output berupa rata-rata bilangannya.

B. Penyelesaian Kasus

form1.htm
<h1>Cari Rata-rata Bilangan</h1>
<form method="post" action="form2.php">
Masukkan Banyaknya Bilangan <input type="text" name="n" />
<input type="submit" name="submit" value="Submit" />
</form>

form2.php
<h1>Cari Rata-rata Bilangan</h1>

<?php
$n = $_POST['n'];

echo "<form method='post' action='proses.php'>";

echo "<table>";
for ($i = 0; $i <= $n-1; $i++)
{
echo "<tr><td>Bil ke-".($i+1)."</td><td><input type='text'
name='data".$i."' /></td></tr>";
}
echo "<tr><td></td><td><input type='submit' name='submit'
value='Submit' /></td></tr>";
echo "<tr><td></td><td><input type='hidden' name='n'
value='".$n."' /></td></tr>";
echo "</table>";
echo "</form>";
?>

. 61
STMIK Bina Sarana Global Studi Kasus I
proses.php

<h1>Cari Rata-rata Bilangan</h1>

<?php

// membaca jumlah komponen dari hidden textbox

$n = $_POST['n'];

// membaca value dari masing-masing komponen textbox dan

menjumlahkannya

$jumlah = 0;

for ($i=0; $i <= $n - 1; $i++)

{
$bilangan[$i] = $_POST['data'.$i];
$jumlah += $bilangan[$i];
}

// hitung rata-rata

$rataRata = $jumlah/$n;

echo "Rata-ratanya adalah : ".$rataRata;

?>

. 62