Upload
mas-uyok
View
16
Download
4
Embed Size (px)
Citation preview
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 :