Embed Size (px)
Citation preview
1
MODUL I
PENGENALAN HTML
A. MAKSUD dan TUJUAN
1. Maksud
• Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan
menggunakan HTML
• Mengenalkan kode-kode HTML
2. Tujuan
• Mahasiswa dapat membuat halaman Web dengan menggunakan kode HTML
secara sederhana
• Mahasiswa dapat membuat tampilan dokumen HTML dengan menggunakan
permainan warna, dan berbagai jenis tampilan teks
B. DASAR TEORI
Pengenalan HTML
HTML merupakan singakatan dari HyperText Markup Language, yaitu bahasa
pemrograman untuk membangun aplikasi web. Untuk membangun sebuah web dan
mengakses halaman web tersebut diperlukan hal-hal berikut :
• Editor, untuk menuliskan kode-kode HTML (seperti notepad)
• Web Server, sebagai server untuk melayani permintaan klien (seperti Apache, IIS,
Xitami)
• Web browser, untuk mengakses halaman web
Tag yang ada dalam HTML antara lain
<HTML>
…
</HTML>
Bagian yang terdapat dalam tag HTML terdiri dari
• Kepala
Bagian kepala dalam dokumen HTML ditandai dengan tag berikut :
2
<HEAD>
…
</HEAD>
bagian kepala ini digunakan untuk membuat judul halaman web dengan
menggunakan tag berikut :
<TITLE>
…
</TITLE>
• Badan
Bagian badan dalam dokumen HTML ditandai dengan tag berikut :
<BODY>
…
</BODY>
Bagian badan akan berisikan content yang akan ditampilkan dalam halaman web.
Aturan dalam menuliskan Tag-tag HTML yaitu :
• Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti <HTML>
• Tidak boleh ada spasi setelah tanda <. Contoh : <TITLE> tidak boleh dituliskan
dengan < TITLE>
TITLE
Nama berkas
BODY
3
• Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun kombinasi keduanya.
Menampilkan Tulisan / Teks
Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag
<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag yang
digunakan antara lain :
No. Tag Fungsi 1. P Membuat paragraph. Dalam tag P terdapat berbagai atribut, seperti align
yang berfungsi untuk mengatur posisi teks 2. BR Membuat baris baru atau pindah baris
3. Center Mengatur posisi teks agar berada ditengah
4. DIV Mengatur teks yang memiliki karakteristik yang sama
5. B Menebalkan cetakan teks
6. SMALL Menampilkan teks lebih kecil daripada ukuran normal
7. BIG Menampilkan teks lebih besar daripada ukuran normal
8. U Menambahkan garis bawah pada teks
9. I Menampilkan teks dengan bentuk tulisan miring
10. SUB Menampilkan teks sebagai subskrip
11. SUP Menampilkan teks sebagai superskrip
12. TT Menampilkan teks seperti ketikan menggunakan mesin ketik
13. FONT Mengatur jenis, ukuran, dan juga warna font. Dalam tag ini bisa mengandung banyak atribut, antara lain Face, color
Warna Font
Warna Font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang
teks dapat ditentukan dengan menggunakan atribut BGCOLOR pada tag BODY. Dan
untuk warna latar depan teks diatur melalui atribut COLOR pada tag FONT.
Sebagai contoh perhatikan potongan script berikut :
<HTML> <HEAD><TITLE=”Halaman web dengan HTML”></TITLE></HEAD> <BODY bgcolor="#00FF66"> <font color="fuchsia">membuat halaman web sangatlah mudah.</font> </BODY> </HTML>
4
Jika halaman web dijalankan di browser maka akan menghasilkan tampilan teks dengan
warna fuchsia dan latar belakang teks berwarna hijau, seperti gambar berikut :
Pemberian warna pada atribut COLOR, BGCOLOR, dan TEXT dapat mengikuti aturan
berikut :
• Menggunakan nama warna
• Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”
Table berikut menunjukkan nilai warna :
Nama Warna RGB Nama Warna RGB Aqua 00FFFF Navy 000080 Black 000000 Olive 808000 Blue 0000FF Purple 800080 Fuchsia FF00FF Red FF0000 Gray 808080 Silver C0C0C0 Green 008000 Teal 008080 Lime 00FF00 Yellow FFFF00 Maroon 800000 White FFFFFF
Menampilkan Gambar
Sebuah web membolehkan kita untuk menampilkan gambar, baik sebagai content web
maupun sebagai gambar latar belakang web. Untuk menampilkan gambar sebagai gambar
latar belakang halaman web dapat menambahkan atribut BACKGROUND pada tag
<BODY>, dan untuk menampilkan gambar dalam halaman web dapat mengunakan Tag
<IMG>. Berikut contoh script menampilkan gambar :
5
<HTML> <HEAD> <TITLE>Halaman web dengan HTML</TITLE> </HEAD> <BODY background="disket.gif"> <img src="monitor.jpg"> </BODY> </HTML>
dari script diatas, halaman web menggunakan gambar “disket.gif” sebagai gambar latar,
dan didalam halaman web menampilkan gambar “monitor.gif”. Hasil yang ditampilkan
dalam browser adalah :
Untuk menggunakan gambar sebagai latar belakang web sebaiknya gunakan gambar
berukuran kecil, karena browser akan mengulang gambar tersebut (seperti tampak pada
gambar). Tipe-tipe gambar yang dapat ditampilkan dalam web yaitu, GIF, JPEG/JPG,
PNG, dan TIFF/TIF.
Beberapa atribut yang digunakan untuk mengatur gambar antara lain :
No. Atribut Fungsi 1. HEIGHT Mengatur tinggi gambar 2. WIDTH Mengatur lebar gambar 3. ALIGN Mengatur penempatan teks terhadap gambar dengan menggunakan nilai
TOP, MIDDLE, BOTTOM 4. BORDER Memberikan bingkai pada gambar dengan memberikan nilai
menggunakan satuan piksel 5. VSPACE Mengatur jarak gambar terhadap teks dengan memberikan ruang
kosong diatas dan dibawah gambar sesuai dengan nilai satuan piksel yang disebutkan
6. HSPACE Mengatur jarak gambar terhadap teks dengan memberikan ruang
6
kosong dikanan dan dikiri gambar sesuai dengan nilai satuan piksel yang disebutkan
Membuat Garis Horisontal
Tag untuk membuat sebuah garis horizontal dapat menggunakan tag <HR>. Beberapa
atribut pada tag HR antara lain :
No. Atribut Fungsi 1. SIZE Mengatur ketebalan garis 2. ALIGN Mengatur posisi teks dalam baris 3. NOSHADE Menghilangkan bayangan pada garis 4. WIDTH Mengatur lebar garis 5. COLOR Menentukan warna garis Contoh :
<HTML> <HEAD><TITLE>Halaman web dengan HTML</TITLE></HEAD> <BODY> STMIK AKAKOM<HR align="center" color="#0000FF" noshade size="12"> Jalan Raya Janti Kanoman<br> Yogyakarta 55198 </BODY> </HTML> Dari script diatas akan menampilkan garis horizontal berwarna biru dengan ukuran 12
dan tidak menyertakan bayangan. Seperti tampak pada gambar berikut :
7
C. PRAKTIK
Catatan : jika setiap script akan disimpan dengan nama file yang berbeda-beda, sebaiknya
buat sebuah folder terlebih dahulu, dan simpan semua file anda dalam folder tersebut.
1. Ketikkan script berikut :
<HTML> <HEAD> <TITLE>Halaman web dengan HTML</TITLE> </HEAD> <BODY> Website saat ini sudah dikenal oleh masyarakat luas. Dengan hadirnya teknologi internet, tentu saja website menjadi hal yang sangat efektif untuk sebuah perusahaan. Keuntungan-keuntungan dengan memiliki sebuah situs antara lain: - Memperkenalkan profile perusahaan kepada masyarakat luas - Sebagai media iklan yang murah dan efektif - Dapat diakses dimana saja dan oleh semua orang di Negara manapun - Brand image </BODY> </HTML> Lalu simpan script diatas diatas dengan ekstensi .htm (contoh : praktik1.htm)
2. Jalankan halaman web dengan menggunakan web browser. Perhatikan TITLE dan
teks yang tampil dihalaman web, teks yang ditampilkan tidak rapi seperti yang
diketikkan di editor.
3. Sekarang gunakan tag <BR> seperti script berikut :
<HTML> <HEAD> <TITLE>Halaman web dengan HTML</TITLE> </HEAD> <BODY> Website saat ini sudah dikenal oleh masyarakat luas. Dengan hadirnya teknologi internet, tentu saja website menjadi hal yang sangat efektif untuk sebuah perusahaan. Keuntungan-keuntungan dengan memiliki sebuah situs antara lain: <BR> - Memperkenalkan profile perusahaan kepada masyarakat luas<BR> - Sebagai media iklan yang murah dan efektif<BR> - Dapat diakses dimana saja dan oleh semua orang di Negara manapun<BR> - Brand image<BR> </BODY> </HTML>
Simpan dan jalankan di browser. Perhatikan tampilan teks sekarang sudah rapi.
4. Modifikasilah tampilan web dengan memberikan warna pada latar belakang web.
Yaitu dengan menambahkan atribut BGCOLOR pada <BODY>, sehingga script
menjadi
<BODY BGCOLOR=”silver”>
8
5. Sisipkan sebuah gambar (dengan megambil satu gambar yang tersedia di komputer),
dan letakkan dibawah teks. Gunakan tag berikut :
<img src="nama_file_gambar">
6. Sekarang gunakan gambar (cari gambar dengan ukuran kecil) untuk diletakkan
sebagai gambar latar belakang halaman web dengan menggunakan tag :
<BODY background="nama_file_gambar">
D. TUGAS
1. Modifikasilah halaman web pada praktik diatas dengan memberikan tag untuk
membuat tampilan teks menjadi rata kanan, rata kiri dan tengah.
2. Buatlah tampilan teks agar sebagian teks ada yang tercetak tebal, miring, dan juga
menggunakan garis bawah.
3. Modifikasilah warna teks dengan menambahkan atribut untuk warna teks.
4. Aturlah teks terhadap posisi gambar dengan mencoba berbagai atribut yang
digunakan untuk mengatur peletakan gambar terhadap teks.
5. Tambahkan sebuah garis pada akhir tulisan dengan tag <HR> dengan ukuran 8 dan
gunakan warna merah.
9
MODUL II
MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL dan
MEMBUAT FORM
A. MAKSUD dan TUJUAN
1. Maksud
• Merapikan teks yang berupa daftar (list) dan table dengan tag HTML
• Membuat halaman web terhubung dengan halaman lain (link)
2. Tujuan
• Mahasiswa dapat membuat table dan mengatur sel-sel dalam table untuk
ditampilkan dalam dokumen web
• Mahasiswa dapat membuat link untuk menghubungkan halaman-halaman web
B. DASAR TEORI
Daftar Item (List)
Seringkali sebuah dokumen berisikan teks yang berupa daftar sehingga penulisannya
harus ditampilkan dalam bentuk sebuah daftar item (list). Dengan menggunakan tag,
halaman HTML juga dapat menampilkan teks berupa daftar (list). Tag yang digunakan
antara lain :
No. Tag Fungsi
1. <UL> … </UL> Menampilkan daftar item (list) tanpa penomoran 2. <LI> Menambahkan tanda bullet didepan masing-masing item.
Tag ini ditambahkan dalam daftar item yang ada didalam tag <UL>
3. <OL> … </OL> Menampilkan daftar item dengan nomor urut 4. <DL> … </DL> Menampilkan daftar teks yang biasa untuk daftar definisi 5. <DIR> … </DIR> Menampilkan daftar tanpa penomoran untuk menangani
direktori 6. <MENU> … </MENU> Menampilkan menu pilihan tanpa penomoran
LINK
Untuk membuat link atau hyperlink, dapat menggunakan tag :
<A HREF> …</A>
10
Berikut beberapa contoh script penggunaan link :
<BODY> <A HREF=”help.htm”>halaman help </A><br> <A HREF=”http://www.bestcamp.net”>Web Developer Alumni Akakom</A><BR> <A HREF= “mailto:[email protected]”>Kirimkan email jika ada pertanyaan</A> </BODY>
Jika dijalankan di web browser akan tampak seperti berikut :
Secara default, link pada halaman web diberi garis bawah dan umumnya berwarna biru.
Ada beberapa atribut untuk mengatur warna link dan juga pengaturan lainnya. Atribut-
atribut ini diletakkan dalam tab <BODY>. Berikut atribut yang digunakan untuk
mengatur link :
No. Atribut Fungsi 1. LINK Menentukan warna link 2. ALINK Menentukan warna link ketika diklik dan halaman link belum terbuka 3. VLINK Menentukan warna link jika link tersebut sudah pernah dibuka Contoh pengaturan warna link dengan menggunakan script sebelumnya :
<BODY LINK=”olive” ALINK=”#000000” VLINK=”red”> <A HREF = ”help.htm”>halaman help </A><br> <A HREF = ”http://www.bestcamp.net”>Web Developer Alumni Akakom</A><BR> <A HREF = “mailto:[email protected]”>Kirimkan email jika ada pertanyaan</A> </BODY> Atribut-atribut yang digunakan dalam tag link <A> antara lain :
No. Atribut Fungsi 1. TABINDEX Menentukan urutan link pada halaman web dengan memanfaatkan tombol
TAB
11
2. TARGET Menampilkan halaman link dengan membuka jendela browser yang baru. Nilai yang ada untuk TARGET yaitu blank, parent, top, self
Contoh berikut script yang menambahkan atribut dalam tag <A> :
<BODY> <A HREF=”help.htm” tabindex="1" target="_blank">halaman help </A><br> <A HREF=”http://www.bestcamp.net/” tabindex="3" target="_parent">Web Developer Alumni Akakom</A><BR> <A HREF= "mailto:[email protected]" target="_self" tabindex="2">Kirimkan email jika ada pertanyaan</A> </BODY> TABEL
Membuat Tabel
Untuk membuat table dalam halaman HTML, dapat menggunakan tag berikut :
No Tag Fungsi 1. <TABLE> … </TABLE> Membuat table dan sebagai tanda awal dan akhir
table 2. <TR> … </TR> Membuat baris dalam table 3. <TD> … </TD> Membuat kolom (sel) 4. <TH> … </TH> Membuat judul kolom 5. <CAPTION> … </CAPTION> Membuat judul pada tabel
Adapun atribut-atribut yang ada dalam tag <TABLE> antara lain
No. Atribut Fungsi 1. BORDER Menampilkan garis table dengan memberikan nilai untuk BORDER 2. BGCOLOR Membuat warna latar belakang table 3. HEIGHT Mengatur tinggi table (tinggi sel) 4. WIDTH Mengatur lebar sel 5. CELLSPACING Mengatur jarak bagian sel terhadap tepi dalam bingkai table 6. CELLPADDING Mengatur jarak teks terhadap tepi kiri
Atribut-atribut untuk <TH> <TR>, dan <TD>
Beberapa atribut yang digunakan dalam <TH>, <TR>, dan <TD> :
No. Atribut Fungsi 1. ROWSPAN Digunakan dalam <TD>. Atribut ini digunakan untuk menggabungkan
beberapa baris sel 2. COLSPAN Digunakan dalam <TH> atau <TD>. Berfungsi untuk menggabungkan
beberapa sel dalam satu baris 3. ALIGN Mengatur peletakan dengan memberikan nilai LEFT, CENTER, atau
RIGHT 4. VALIGN Mengatur teks menurut posisi vertical dengan memberikan nilai TOP,
MIDDLE, atau BOTTOM
12
FORM
Membuat Formulir
Formulir digunakan untuk memasukkan data pada halaman web. Tag yang digunakan
untuk membuat Formulir yaitu tag <FORM> … </FORM>. Atribut yang penting dalam
<FORM> yaitu :
No. Atribut Fungsi 1. ACTION Menentukan URL yang akan dijalankan dan menerima semua informasi
yang dimasukkan dalam form 2. METHOD Menentukan cara pengiriman informasi, yaitu dengan nilai GET dan
POST. GET digunakan jika informasi yang dikirim menjadi satu dengan URL, sedangkan POST digunakan jika informasi dikirim secara terpisah dengan URL
Berikut ini akan diuraikan tag-tag yang biasa digunakan dalam sebuah FORM (tag-tag ini
berada dalam pasangan tag <FORM> … </FORM> antara lain tag <INPUT>,
<SELECT> … </SELECT>, <TEXTAREA> … </TEXTAREA>.
Tag <INPUT>
Tag <INPUT> yang berfungsi sebagai input data. Tag <INPUT> terdiri dari banyak tipe
yang berguna untuk kotak password, kotak teks, tombol, dan lainnya. Beberapa atribut
pada tag <INPUT> :
No. Atribut Fungsi 1. TYPE Menentukan tipe kotak masukan 2. NAME Menentukan nama data 3. SIZE Menentukan ukuran kotak masukan 4. MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan dalam kotak isiam
Dan Tipe yang ada dalam atribut TYPE antara lain :
No. Tipe Fungsi 1. TEXT Sebagai kotak isian untuk memasukkan data 2. SUBMIT Membuat tombol. Jika tombol diklik maka URL yang disebutkan pada
atribut ACTION dalam tag <FORM> akan dijalankan 3. RESET Mengembalikan nilai field teks ke default 4. PASSWORD Membuat teks yang diketikkan diganti dengan tanda * 5. CHECKBOX Membuat kotak cek 6. RADIO Membuat tombol radio dalam bentuk 2 pilihan atau lebih yang mana
user hanya dapat memilih satu pilihan.
13
Tag <TEXTAREA> … </TEXTAREA>
Tag ini dibutuhkan untuk masukan teks yang panjang. Beberapa atribut yang terdapat
dalam tag <TEXTAREA>
No. Atribut Fungsi 1. NAME Menentukan nama teksarea 2. COLS Menentukan lebar teksarea 3. WRAP Menentukan teks secara otomatis akan dilipat atau tidak pada area teks
dengan memberikan nilai Hard, off, atau soft 4. ROWS Menentukan panjang teksarea
Tag </SELECT> … </SELECT>
Tag ini digunakan untuk menampilkan beberapa pilihan dengan menggunakan kotak
kombo (drop-down). Untuk menampilkan daftar pilihannya dapat menggunakan tag
<OPTION> dan menyertakan atribut VALUE untuk menyatakan nilai-nilai pilihan.
Sedangkan untuk menyatakan nilai default (nilai bawaan pada saat halaman ditampilkan)
dapat menggunakan atribut SELECTED. Seperti contoh berikut :
<BODY>
Jurusan :
<form action="index.htm" method="post"> <select> <option value="TI"> Teknik Informatika <option value="TK" SELECTED>Teknik Komputer</option></select> </form> </BODY>
Jika dijalankan di web browser, maka nilai yang tampil secara default akan menampilkan
pilihan Teknik Komputer.
14
C. PRAKTIK
1. Ketikkan script HTML berikut : <HTML> <HEAD> <TITLE>Membuat List</TITLE> </HEAD> <BODY> <p align="justify">Persaingan ketat dalam bidang teknologi telah membuat berbagai vendor perusahaan handphone untuk meluncurkan berbagai tipe ponsel. Diawal tahun 2005 ini, hampir semua vendor ponsel mengeluarkan produk terbarunya, dengan seri yang terhitung banyak, yaitu 10 - 20 ponsel untuk setiap merk.</p><BR> <H2>Ponsel-ponsel seri terbaru antara lain:</H2> <UL>Nokia 9300<BR> O2 XDA mini<BR> Samsung SGH-P730<BR> Nokia 6255 CDMA<BR> T-Mobile MDA IV<BR> LG KV3600<BR> </UL> </BODY> </HTML>
Simpan script diatas dan jalankan di web browser.
2. Buatlah daftar item agar menggunakan tanda bullet. Dengan menambahkan tag <LI>
didepan teks setiap item contoh : <LI> Samsung SGH-P730<BR>. Simpan dan lihat
perubahannya di browser.
3. Dengan menggunakan tag <A>, buatlah setiap item agar menjadi sebuah link. Seperti
contoh item teks nokia 9300 dihubungkan ke halaman nokia.php, maka scriptnya
menjadi : <a href="nokia.php">Nokia 9300</a>
Buatlah link-link tersebut untuk menghubungkan ke halaman web yang telah dibuat
sebelum ini (hubungkan ke halaman web pada praktik BAB I)
4. Ketikkan script berikut untuk membuat sebuah table. Simpan dan lihat hasilnya di
browser
<HTML> <HEAD> <TITLE>Membuat Tabel</TITLE> </HEAD> <BODY> <big>Daftar Harga Perdana SimCard GSM</big> <Table> <tr><th>SimCard</th><th>Harga</th></tr> <tr><td>IM3</td><td>25.000</td></tr> <tr><td>Mentari</td><td>35.000</td></tr> <tr><td>Simpati</td><td>20.000</td></tr> <tr><td>XL</td><td>15.000</td></tr></Table> </BODY>
15
</HTML>
5. Sekarang tambahkan atribut BORDER untuk membuat garis tepi pada sel (table),
sehingga script <table> menjadi <Table BORDER = “1”>. Simpan dan lilhat hasilnya
6. Tambahkan warna latar untuk table dengan menggunakan atribut BGCOLOR,
sehingga script <Table> menjadi : <Table border="1" bgcolor="blue">
7. Ketikkan script berikut, simpan dengan nama formulir.htm.
<html> <head> <title>Membuat Form</title> </head> <body> Isikan data Pribadi Anda <br> <form action=”data.htm” method=”post”> Nama : <input type="text" name="nama" size="30"><br> alamat : <textarea cols="30" rows="5" name="alamat"></textarea><br> Usia : <input type="text" name="usia" size="5"><br> <input type=”submit” value=”Input”> </form> </body> </html>
Dan juga buatlah script berikut dan simpan dengan nama data.htm
<html> <head> <title>Kiriman Formulir</title> </head> <body> Terimakasih telah mengisi data Anda. </body> </html>
Sekarang jalankan script formulir lalu isikan data dan klik tombol Input. Perhatikan kotak
address dihalaman data.htm. Sekarang gantilah nilai POST pada atribut method dengan
nilai GET, sehingga script <FORM> menjadi
<form action="data.htm" method="get">
sekarang buka halaman formulir.htm di browser, masukkan data dan klik tombol Kirim.
Perhatikan perbedaannya dengan menggunakan POST.
16
D. TUGAS
1. Susunlah script HTML agar menghasilkan tampilan halaman web seperti berikut :
Keterangan : warna latar halaman web adalah Silver,
dan pengaturan table sebagai berikut :
border = 1, cellpadding = 1, cellspacing = 1, dan warna latar table = putih
2. Susunlah script untuk membuat form agar menghasilkan tampilan halaman web
berikut ini :
17
Jika menu jurusan dipilih, maka akan tampil pilihan berikut :
18
MODUL III
PENGENALAN PHP
A. MAKSUD dan TUJUAN
1. Maksud
• Mengenalkan kepada mahasiswa tentang pemrograman PHP
2. Tujuan
• Mahasiswa dapat membuat script PHP secara sederhana
• Mahasiswa dapat membuat halaman web dengan menggunakan script HTML
dan PHP
B. DASAR TEORI
Pengenalan PHP
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada server
side. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server
sedangkan yang dikirimkan ke browser hanya hasilnya saja berupa HTML. Untuk
membedakan perintah HTML dan PHP digunakan tanda <? … ?> atau <?php … ?>
PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL, Access,
Oracle, dan lainnya.
Sebagai contoh pemrograman PHP yang sederhana <html> <head> <title> Belajar PHP </title> </head> <body> <?php // tanda untuk memberikan komentar satu baris echo "Nama saya Fairuz Arkan<br>"; /* tanda untuk memberikan komentar komentar ini lebih dari satu baris */ ?> </body> </html>
19
Kode dalam tag <? ….. ?> akan diproses diserver dan ditampilkan pada browser sebagai
HTML. Sebuah pernyataan dari PHP selalu diakhiri dengan tanda titik koma (;). Hasil
yang tampak saat dijalankan di browser yaitu :
Untuk melihat kode dalam Internet Explorer Klik kanan | View source maka anda akan
melihat kode sebagai berikut ini. <html> <head> <title> Belajar PHP </title> </head> <body> Nama saya Fairuz Arkan<br></body> </html>
Perhatikan bahwa kode PHP tidak diperlihatkan, hal ini menunjukkan bahwa PHP
menjaga kerahasiaan kode .
PHP dan Variabel
Untuk membuat variabel diberi tanda dollar ($). Variabel berfungsi untuk menyimpan
suatu nilai dan dapat berubah-ubah. Penulisan variable yang benar adalah :
• Karakter pertama tidak boleh berupa angka (harus berupa huruf atau garis bawah)
• Tidak mengandung spasi
• Pemakaian huruf kapital dan huruf kecil dibedakan
Contoh penulisan variable : $data, $data1, $data_ku
20
Array
Array merupakan suatu variabel yang dapat berisi banyak data dalam waktu yang sama.
Pendefinisian Array dapat dibentuk dengan format berikut :
$nama_array = array(elemen_1, …, elemen_n);
Untuk menghitung jumlah elemen array digunakan fungsi count(), dengan format
count($nama_array)
Operator
Dalam PHP juga dapat melakukan proses operasi, baik itu penjumlahan, operasi logika,
ataupun operasi pembanding.
Operator Matematika yang digunakan dalam PHP yaitu :
Operator Fungsi Operator Fungsi + Penjumlahan - Pengurangan * Perkalian / Pembagian % Sisa pembagian ++ , -- Penaikan, penurunan
Operator Pembanding yang digunakan dalam PHP yaitu :
Operator Fungsi Operator Fungsi == Sama dengan < Kurang dari > Lebih dari <= Kurang dari atau sama dengan >= Lebih dari atau sama dengan != , <> Tidak sama dengan
Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and (&&), or (||),
xor, dan !.
Penulisan Karakter Khusus dengan tanda \
Karakter yang ditulis dengan diawali tanda (\) yaitu:
Karakter Keterangan Karakter Keterangan \” Tanda petik ganda \\ Tanda backslash \$ Tanda $ \n Pindah baris \t tab \x00 s.d \xFF heksadesimal
21
Tipe Data
Tipe data yang dikenal pada pemrograman PHP yaitu :
Tipe data Keterangan Integer Tipe data bilangan bulat Double Tipe data bilangan real String Tipe data teks
Konversi Tipe Data
Fungsi-fungsi yang digunakan dalam PHP untuk mengkonversikan tipe data ke tipe data
yang lain yaitu dengan memberikan fungsi intval, doubleval, dan strval. Atau dengan
menggunakan teknik cast, yaitu dengan mengubah tipe ekspresi yang akan dikonversi.
Menampilkan Tanggal dan Waktu
Untuk menampilkan tanggal dan waktu secara update, dapat menggunakan perintah date
dengan format-format berikut :
Format Keterangan a,A am atau pm, AM atau PM d,D hari/tanggal dalam 2 digit, hari (Sun..Sat) F nama bulan (January..December) g,G jam (1..12), jam (0..23) z hari dari tahun (0..365) y,Y tahun dalam 2 digit, tahun dalam 4 digit h,H jam (01..12), (00..23) i menit (00..59) m,M Nama bulan (01..12), nama bulan (Jan..Dec) s Detik (00..59) w hari (0=Sunday..6=Saturday)
C. PRAKTIK
1. Ketikkan program berikut ini :
<html> <head> <title> Variabel </title> </head> <body> <?
$nilai_1 = 10; $nilai_2 = 3; $nilai_3 = 2 * $nilai_1 + 8 * $nilai_2; echo "nilai = ", $nilai_3;
22
echo "<br>"; $jumlah = $nilai_1 + $nilai_2; echo "hasil dari $nilai_1 + $nilai_2 adalah : $jumlah"; echo “<br><br>”; echo “\”nama : Lesley\” <br>”; echo “no.mhs 015410062”;
?> </body> </html>
(Nama Lesley dan no.mhs diatas ganti dengan nama masing-masing). Simpan dengan
menggunakan ekstensi php (misalnya mod_2.php), dan jalankan di web browser.
2. Ketikkan program berikut :
<html> <head> <title> Pemrograman PHP dengan Array</title> </head> <body> <? //penulisan array dapat dibuat seperti berikut $nama[] = “Isabella”;
$nama[] = “Affan”; $nama[] = “desty”; echo $nama[1] . $nama[2] . $nama[0]; echo “<br>”; //pendefinisian array dapat juga sperti berikut ini $kampus[sekolah] = “STMIK”; $kampus[nama_kampus] = “Akakom”; echo “Kampusku adalah $kampus[sekolah] $kampus[nama_kampus]”;
?> </body>
</html>
Simpan script diatas lalu lihat hasilnya di web browser. Perhatikan urutan nama-nama
yang tampil dari perintah echo $nama[1] . $nama[2] . $nama [0];
3. Tambahkan fungsi count untuk menghitung jumlah elemen array $nama dengan
menambahkan script berikut :
//menghitung jumlah elemen array $jum_array = count($nama); echo "jumlah elemen array = ". $jum_array;
23
4. Ketikkan script berikut ini untuk mengkonversi tipe data.
<html> <head> <title>Konversi Tipe</title> </head> <body> <? $a = 300.4; echo $a; echo "<br>"; echo "tipe Double : ", doubleval($a), "<br>"; echo "tipe Integer : ", intval($a), "<br>"; echo "tipe string : ", strval($a); ?> </body> </html>
5. Ketikkan script berikut untuk menampilkan tanggal dengan mengambil tanggal di
server.
<html> <head> <title>Tanggalan</title> </head> <body> <? echo date("m-F-Y, g:i:s a"); ?> </body> </html>
D. TUGAS
1. Modifikasilah program pada praktik nomor 4 dengan mengganti fungsi
pengkonversian tipe dengan metode cast.
contoh : echo "tipe Double : ", doubleval($a), "<br>"; (pada praktik nomor 3)
diubah menjadi
echo "tipe double: ". (double) $a, "<br>";
2. modifikasilah program pada praktik nomor 5 untuk menampilkan informasi tanggal
dan waktu dengan mencoba menggunakan format-format date lainnya.
24
MODUL IV
STRUKTUR KONTROL
A. MAKSUD dan TUJUAN
1. Maksud
Mempelajari berbagai bentuk struktur kontrol dalam pemrograman PHP.
2. Tujuan
• Mahasiswa dapat menggunakan struktur kontrol untuk kasus tertentu
• Mahasiswa dapat membuat pemrograman PHP yang melibatkan pernyataan
perulangan
B. DASAR TEORI
1. Kondisi a. Bentuk if
Perintah IF ini akan menjalankan statement jika kondisinya bernilai benar (True).
if (expr)
statement
b. Bentuk if else
Dalam bentuk ini jika ekpresi bernilai benar maka statement_1 akan dijalankan, tetapi
jika salah maka statement_2 yang akan dijalankan.
if (expr)
statement_1
else
statement_2
atau
if (expr) { statement_1a statement_1b } else { statement_2a statement_2b }
c. Bentuk if – elseif
Bentuk if-elseif ini cocok untuk melakukan pengambilan keputusan yang melibatkan
banyak alternative. PHP dapat mengetahui bentuk elseif dan else if.
25
d. Switch
Pada prinsipnya penggunaan switch hampir sama dengan pengunaan kondisi if – elseif.
Dalam pengunaan switch juga disertakan perintah break. Tanpa perintah break semua
peryataan akan dijalankan.
Bentuk pernyataan switch yaitu :
Switch (ekspresi) { case ekspresi_case_1: pernyataan;
break; … case ekspresi_case_n : pernyataan_n; break default: pernyataan_default;
}
2. Perulangan
a. while
Perulangan mengunakan while mempunyai bentuk yang mudah untuk digunakan.
Perintah while akan terus diulang selama kondisi berisi TRUE dan akan berhenti jika
kondisi berisi FALSE
while (expr)
statement
b. For
Perulangan mengunakan for mempunyai 3 ekpresi
• Expr1 adalah ekpresi untuk memberikan nilai awal yang akan digunakan untuk
perulangan.
• Expr2 adalah ekpresi untuk memberikan kondisi dalam perulangan. Jika kondisi
tersebut bernilai TRUE maka perulangan akan dilanjutkan. Jika kondisi tersebut
bernilai FALSE makan perulangan akan berhenti.
• Expr3 digunakan untuk mengatur nilai variabel yang digunakan pada expr1
26
for (expr1; expr2; expr3) statement
c. do – while
Perulangan mengunakan do – while ini akan berakhir jika ekpresi bernilai FALSE
Do { statement } While (expr)
C. PRAKTIK
1. Ketikkan script berikut, simpan dan lihat hasilnya di browser.
<html> <head> <title> Struktur Control IF </title> </head> <body> <?
$nilai1 = 4; $nilai2 = -7; if($nilai1 > $nilai2)
echo "$nilai1 Lebih Besar dari pada $nilai2 <br>"; if($nilai2 < 0) echo "nilai2 adalah negative";
?> </body> </html>
2. Ketikkan script berikut
<html> <head> <title> Struktur Control IF ELSE</title> </head> <body> <? $bil = 8; if($bil % 2 == 0) echo "bilangan $bil merupakan bilangan genap"; else echo "bilangan $bil merupakan bilangan ganjil"; ?> </body> </html>
27
3. Ketikkan program PHP berikut
<html> <head> <title>Pernyataan SWITCH</title> </head> <body> <? $jurusan = "SI"; switch($jurusan) { case "KA": echo "$jurusan = Komputerisasi akuntansi"; break; case "MI": echo "$jurusan = Manajemen Informatika"; break; case "SI": echo "$jurusan = Sistem Informasi"; break; case "TI": echo "$jurusan = Teknik Informatika"; break; default: echo "$jurusan tidak terdaftar"; } ?> </body> </html>
Lihat hasilnya di browser.
4. Cobalah mengganti nilai SI pada $jurusan dengan yang lain (misal $jurusan = “TI”).
Simpan dan lihat hasilnya. Lalu cobalah ubah nilai jurusan dengan menggantinya
menggunakan huruf kecil (misal : $jurusan = “ti”). Apa yang ditampilkan dalam web
browser?
5. Ketikkan script perulangan dengan pernyataan while berikut ini.
<html> <head> <title>Perulangan dengan While</title> </head> <body> <? $i = 0; while ($i <= 5) { $jum = $i + 1; echo "1 + $i = $jum <br>"; $i++; } ?>
28
</body> </html>
D. TUGAS
1. Modifikasilah script PHP pada praktik nomor 5 dengan mengubah pernyataan while
menggunakan pernyataan FOR dan do-while
2. Susunlah script pemrograman PHP untuk menghasilkan tampilan web berikut ini.
gunakan pernyataan while untuk melakukan perulangan. Dan didalam kalang while
gunakan perintah IF ELSE untuk menentukan apakah bilangan yang sedang dibaca
genap atau ganjil.
3. Buatlah pemrograman PHP untuk permasalahan diskon harga produk, dengan
ketentuan sebagai berikut :
• Untuk harga produk lebih besar dari 500.000,- maka mendapat diskon 50% • Untuk harga > 400.000,- mendapat diskon 30% • Untuk harga > 300.000,- mendapat diskon 20% • Untuk harga > 200.000,- mendapat diskon 10% • Selain itu tidak mendapat diskon
Buatlah pemrograman dengan menggunakan pernyataan IF ELSEIF
