KATA PENGANTAR

Bismillahirrahmanirrahim Assalamualaikum Wr.Wb

Puji syukur kami panjatkan kepada allah SWT yang telah melimpahkan segala rahmat-nya pada kami sehingga kami dapat menyelesaikan tugas kami seagai assisten laboratorium jurusan system informasi ITATS untuk menyusun uku panduan dan modul praktikum PSI (pemrograman system informasi) periode I.Praktikum pemrograman system informasi ini merupakan praktikum yang dilaksanakn oleh jurusan system informasi , sehingga materi yang disampaikan telah disesuwaikan dan masih merupakan perbaikan dan pengembangan. Kami sangat menyadari bahwa buku panduan dan modul ini masih jauh dari kesempurnaan sehingga kami memohon maaf kepada semua pihak yang mempergunakan buku ini sebagai panduan jika isinya tidak sesuwai harapan. Dengan catatan kami akan tetap berusaha agar kedepannya dapat membuat yang lebih baik lagi dengan melihat evaluasi-evaluasi sebelumnya.

Akhir kata kami selaku penyusun buku sekali lagi mohon maaf jika ada hal yang kurang berkenan di hati, atas perhatian serta partisipasinya disampaikan banyak terimah kasi.

Wassalamualaikum Wr. Wb

Surabaya, april 2015

LabPengenalan HTML & PHPHTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad atau FrontPage. Contoh kode HTML yang sangat sederhana :

Latihan Pertama

Selamat Belajar HTML

-Pasangan tag dan menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML

-Bagian yang terdapat dalam dan umumnya terbagi atas :1. kepala, ditandai dengan pasangan tag dan 2. badan, ditandai dengan pasangan tag dan

-Pada bagian kepala, bisa ditentukan judul dokumen HTML. Judul ini ditulis dalam pasangantag dan . Pada contoh di atas, judul dokumen HTML adalah Latihan

Pertama. Judul ini diletakkan di bagian atas jendela browser.

Cara Menuliskan TagNama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa spasi sama sekali. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan :

, , dianggap sama. Namun umumnya nama tag ditulis dengan huruf kecil saja atau huruf kapital saja.

Atribut dalam TagBeberapa tag mengandung atribut di dalamnya. Contoh :

Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, CENTER adalah nilai untuk atribut ALIGN.

Beberapa tag mengandung atribut di dalamnya. Contoh :

Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada umumnya, atribut melibatkan nilai. Pada contoh di atas, CENTER adalah nilai untuk atribut ALIGN.

Tag

Fungsi tag
adalah untuk membuat baris baru atau berpindah baris. Contoh :

Tag BR

selamat Belajar HTML
Semoga Sukses !

Tag

Tag digunakan untuk membuat paragraf. Contoh

Contoh Paragraf

Pesona Tanaman Hias

Keindahan tanaman hias

Membawa suatu pesona tersendiri

Warna-warni bunga

aneka rupa corak daun

membuat orang dengan senang hati mengoleksinya

Seperti halnya pada tag , tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah :

-LEFT (default), mengatur teks rata kiri terhadap halaman-RIGHT, mengatur teks rata kanan terhadap halaman-CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan-JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangatpanjang.

Contoh :

Atribut ALIGN

Pesona Tanaman Hias

Pesona Tanaman HiasPesona Tanaman Hias

Pesona Tanaman Hias

Tag

Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag

. Contoh :

Tag HR

Aneka Tanaman Hias

Aglaonema atau Sri rejeki

Begonia

Bromelia

dll

Daftar atribut tag AtributKeterangan

SIZEMenentukan ketebalan garis

WIDTHMenentukan lebar garis

ALIGNMenentukan peletakkan teks dalam baris

Contoh penggunaan atribut SIZE :

Atribut SIZE pada Tag HR

KEBUN PESONA

Jl. Solo Km 14
Yogyakarta
Indonesia

Tag Untuk menengahkan suatu teks, bisa juga digunakan tag . Tentu saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan

. Contoh :

Tag CENTER

Berbagai Jenis Keladi yang mempesona: Red Flash
Red Fire
Fannie Munson
Pink Beauty
Hilo Beauty
Jackie Suthers
*****

MENGATUR TEKSMengatur Teks Secara FisikDaftar tag untuk mengatur teks secara fisik

Pemakaian Tagketerangan

TeksTeks ditampilkan dalam keadaan ditebalkan

TeksTeks ditampilkan dengan ukuran lebih besar dari

TeksTeks ditampilkan dalam keadaan miring

TeksTeks ditampilkan dengan ukuran lebih kecil dari

TeksTeks ditampilkan sebagai subskrip

TeksTeks ditampilkan sebagai superskrip

TeksTeks ditampilkan dalam bentuk seperti ketikan

TeksTeks ditampilkan dengan diberi garis bawah

Contoh :

Memformat Secara Fisik

Teks dengan Tag BIG

Teks Normal
Teks dengan tag B
Teks dengan tag I

NormalTeks dengan tag SUB

Normal Teks dengan tag SUP

Seperti ketikan mesin ketik
Teks diberi garis bawah
Tebal, miring, dan diberi garis bawah

UKURAN FONTUntuk font ditentukan oleh atribut SIZE. Contoh :

Ukuran Font

Normal: 012345ABCD

SIZE 1: 012345ABCD

SIZE 2: 012345ABCD

SIZE 3: 012345ABCD

SIZE 4: 012345ABCD

SIZE 4: 012345ABCD

SIZE 4: 012345ABCD

Normal

SIZE +1: 012345ABCD

SIZE +2: 012345ABCD

Normal

SIZE -1: 012345ABCD

Atribut pada tag yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag dengan properti berupa BGCOLOR. Tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen.

Daftar nama warna pada atribut penentu warna

Nama WarnaRGBNama WarnaRGB

aqua00FFFFnavy000080

black000000olive808000

blue0000FFpurple800080

fuchsiaFF00FFredFF0000

gray808080silverC0C0C0

green008000teal008080

lime00FF00yellowFFFF00

maroon800000whiteFFFFFF

Contoh :

Warna Bagian 1

Normal

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

yellow

Contoh penggunaan atribut BGCOLOR dan TEXT pada tag BODY :

Warna Bagian 2

Normal

Warna Biru

Warna Hijau

Warna Merah

Warna Biru

Warna Kuning

Membuat Link

Hyperlink ke Halaman Web

Untuk membuat link ke halaman lain, digunakan pasangan tag atau yang biasa yang disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut :

Label

Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen Web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP).

Untuk mempraktikan link, buatlah terlebih dulu dua buah berkas HTML bernama halx.htm dan

haly.htm.

File halx.htm :

Halaman X

Halaman X

File haly.htm :

Halaman Y

Halaman Y

Sekarang marilah membuat kode HTML yang menyediakan link ke dua buah kode HTML di depan.

File halutama.htm :

Halaman Utama

Halaman Utama

Silahkan klik pada link-link berikut:

Halaman X

Halaman Y

Link ke Situs Web Lain

Hyperlink tak terbatas ke halaman-halaman Web yang berada pada sistem yang sama. Hyperlink seringkali ditujukan ke situs Web yang lain yang berada di sembarang Web server. Contoh :

Menggunakan Tabel

Tag-tag yang terkait dengan pembuatan table :TagKeterangan

Mengawali dan mengakhiri sebuah table

Menentukan judul pada table

Membuat sebuah baris dalam table

Membuat judul kolom

Membuat sebuah sel data

Contoh : Memberikan Garis Pada Tabel

Bentuk :

Kalau BORDER tidak disertakan dalam tag , nilai untuk BORDER dianggap sama dengan nol, dengan akibat garis tidak ditampilkan. Dengan kata lain,

identik dengan

Contoh :

Menentukan Warna Latar Belakang Tabel

Untuk menambahkan warna latar belakang table, digunakan atribut BGCOLOR pada tag

.

ContohMengatur Peletakkan Tabel dalam Halaman

Atribut ALIGN pada , , dan Contoh :Mengatur Tinggi Sel

Untuk mengatur tinggi table, digunakan atribut HEIGHT pada tag . Contoh :

Contoh berikut menunjukkan pengaturan tinggi pada sel tertentu saja. Caranya adalah dengan menggunakan atribut HEIGHT pada tag .

Pengaturan Teks pada Posisi Vertikal

Di dalam sebuah sel, teks dapat diatur menurut posisi vertical apakah akan diletkkan di atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut VALIGN pada tag seperti , , atau .

Nilai untuk atribut VALIGNNilai VALIGNKeterangan

TOPTeks diletakkan di bagian atas pada sel

MIDDLETeks diletakkan di bagian tengah pada sel

BOTTOMTeks diletakkan di bagian bawah pada sel

Contoh :

Mengatur Lebar Tabel dan Sel

Atribut WIDTH pada tag dapat digunakan untuk mengatur lebar table tanpa tergantung oleh ukuran jendela browser. Contoh :

Contoh berikut menunjukkan penggunaan lebar dalam satuan persen :

WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkannya pada tag

atau . ContohNilai WIDTH pada tag juga bisa berupa %. Contoh :Menambahkan Gambar

Mengatur Gambar Latar Belakang

Terkadang kita jumpai halaman Web dengan latar belakang berupa suatu gambar. Latar belakang seperti itu kadangkala mempercantik tampilan halaman Web. Untuk menyertakan suatu gambar sebagai latar belakang, dapat digunakan atribut BACKGROUND pada tag . Bentuknya sebagai berikut :

Contoh :

Menampilkan Gambar

Untuk menampilkan gambar, digunakan tag . Bentuk paling sederhana dari tag

:

Contoh :

Menggunakan FORM

Dasar Penggunaan FormForm dibentuk dengan menggunakan pasangan tag dan . Dua atribut yang umum digunakan pada tag berupa ACTION dan METHOD.

ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri.

METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan

dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL.

Contoh penggunaan pasangan tag dan :

Memasukkan Data dengan INPUT

Tag digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag dan . Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET.

Atribut pada tag INPUT

Atributketerangan

NAMEMenentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecualiSUBMIT dan RESET

SIZEMenentukan ukuran kotak masukan yang tertampil untuk teks dan password

MAXLENGTHMenentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan kotak teks

VALUEMenentukan nilai awal untuk kotak masukan

CHECKEDMengatur agar kotak cek dalam keadaan terpilih pada keadaan awal

TYPEMenentukan tipe kotak masukan

Tipe TEXT

Tipe TEXT bermanfaat untuk memasukkan data seperti nama orang atau alamat seseorang. Contoh pemakaian :

Dengan menggunakan atribut VALUE pada tag , field teks dapat diberi nilai bawaan. Contoh :

Tombol SUBMIT dan RESET

Tipe SUBMIT pada tag akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana :

Jika tulisan pada tombol tidak berisi Submit, perlu disebutkan pada atribut VALUE. Contoh :

Tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.

Contoh penggunaan formulir yang melibatkan field teks, tombol Submit, dan tombol Reset :

File info.htm :

Perbedaan GET dan POST

Tipe PASSWORD

Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai). Contoh:

Tipe CHECKBOX

Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.

Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang. Contoh :

Tombol Radio

Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag dengan atribut TYPE diberi nilai RADIO. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Atribut

VALUE untuk menentukan nilai terhadap nama data sekiranya tombol tersebut diklik. Contoh :MODUL 1Variable dan operator

Variabel adalah suatu tempat untuk menampung data yang nilainya selalu berubah. Sedangkan, Konstanta adalah suatu tempat untuk menampung data yang nilainya selalu tetap dan tidak pernah berubah.

Variabel digunakan sebagai tempat penyimpanan data sementara. Data yang disimpan dalam variabel akan hilang setelah program selesai dieksekusi. Untuk penyimpanan data yang permanen, kita dapat menyimpan data di database atau di disk.Dalam defenisi bebasnya, variabel adalah kode program yang digunakan untuk menampung nilai tertentu. Nilai yang disimpan di dalam variabel selanjutnya dapat dipindahkan ke dalam database, atau ditampilkan kembali ke pengguna.

Nilai dari variabel dapat di isi dengan informasi yang diinginkan dan dapat dirubah nilainya pada saat kode program sedang berjalan. Sebuah variabel memiliki nama yang digunakan untuk mengakses nilai dari variabel itu. Jika anda memiliki pengetahuan dasar tentang bahasa pemograman, tentunya tidak asing dengan istilah variabel.

Sama seperti variabel dalam bahasa pemograman lainnya, variabel dalam PHP digunakan untuk menampung nilai inputan dari user, atau nilai yang kita definisikan sendiri. Namun PHP memiliki beberapa aturan tentang cara penggunaan dan penulisan variabel.Cara penulisan variable di php Variabel di dalam PHP harus diawali dengan dollar sign atau tanda dollar ($).Setelah tanda $, sebuah variabel PHP harus diikuti dengan karakter pertama berupa huruf atau underscore (_), kemudian untuk karakter kedua dan seterusny bisa menggunakan huruf, angka atau underscore (_). Dengan aturan tersebut, variabel di dalam PHP tidak bisa diawali dengan angka.

Minimal panjang variabel adalah 1 karakter setelah tanda $.

Berikut adalah contoh penulisan variabel yang benar dalam PHP:1

2

3

4

5

6

7

Operator Operator membuat suatu nilai menjadi penting. Ada beberapa jenis operator yang berguna dalam pemrogaman menggunakan PHP. Ada operator matematika, assignment,perbandingan, logika, increment, decrement.Operator matematika ini layaknya anda berhitung menggunakan matematika, mulai dari pengurangan, penjumlahan, perkalian, pembagian. Operator assignment Operator assignment merupakan operator yang berguna untuk memasukkan nilai kedalam suatu variable. Dan jangan lupa, setiap baris code harus di tutup dengan ';' atau script anda akan error.pada PHP operator digunakan untuk memanipulasi atau melakukan proses perhitungan pada suatu nilai. Pada PHP terdapat beberapa jenis operator, yaitu operator aritmatik, operator perbandingan, dan operator gabungan dari aritmatik dan assignment.

1. Operator Aritmatik Operator aritmatik di sini digunakan untuk perthitungan aritmatik seperti penjumlahan, pengurangan, perkalian, pembagian, dan juga modulus. Berikut adalah tabel operator aritmatik :OperatorContohMakna

+5+9Penjuamlahan

-9-2Pengurangan

*3*4Perkalian

/9/3Pembagian

%10%3Modulus

Contoh penggunaan operator aritmatik :

1. Operator Perbandingan Operator perbandingan digunakan untuk membandingkan/menguji hubungan antara beberapa nilai dan juga variabel yang selalu menghasilkan nilai TRUE atau FALSE. Berikut adalah tabel operator perbandingan dengan contoh perbandingan antara 2 variabel (misal $a=3, $b=4) :OperatorContohMaknaHasil

==$a==$bSama denganFalse

!=$a!=$bTidak sama denganTrue

$bLebih besar dariFalse

=$bLebih besar atau sama dengan dariFalse

2. Operator Gabungan dari aritmatik dan assignmentOperator gabungan dari aritmatik dan assignment di sini merupakan gabungan dari operator aritmatik dan assignment yang menghasilkan satu perintah singkat. Kok gabungan dari 2 operator bisa menghasilkan satu perintah singkat ya?saya juga sempat kagum sebelumnya, tapi memang inilah salah satu kelebihan dari bahasa pemrograman. Misalnya kita menginginkan proses panambahan/increment dengan perintah $jumlah=$jumlah+2; , dengan kombinasi dari 2 operator yaitu operator aritmatik(+) dan assignment(=) maka proses panambahan/increment tadi dapat ditulis dengan perintah $jumlah += 2. Untuk lebih jelasnya silakan coba source code di bawah ini :

Berikut adalah tabel beberapa operator gabungan dari aritmatik dan assignment :

OperatorContohOperasi yang ekuivalen

+=$jumlah += 2$jumlah = $jumlah+2

-=$jumlah -= 2$jumlah = $jumlah-2

*=$jumlah *= 2$jumlah = $jumlah*2

/=$jumlah /= 2$jumlah = $jumlah/2

%=$jumlah %= 2$jumlah = $jumlah%2

.=$string .= oke$string = $string.oke

Contoh operator ;

Operator & Variabel

Penjumlahan

Input nilai 1 :

Input nilai 2 :

MODUL II

PENGUJIAN (if) Fungsi IF

If digunakan untuk satu kondisi saja. Jika pernyataan benar (terpenuhi) maka akan dijalankan, jika salah (tidak terpenuhi) maka abaikan. Fungsi if biasanya digunakan sebagai pernyataan suatu kondisi.

Fungsi IF ELSE

Adakalanya dalam mengeksekusi suatu program kita ingin melakukan dua kali perintah sekaligus,fungsi else akan melakukan perintah setelah perintah pertama gagal,pada fungsi if apabila perintah bersifat true maka akan diproses,tetapi jika bersifat tidak true atau false maka perintah tadi akan diabaikan dan dilanjutkan pada perintah Contoh pengujian ;

Pengujian

Pengujian

Input nilai 1 :