KATA PENGANTAR Modul dengan judul Mengoperasikan Bahasa Pemrograman Berbasis Web merupakan bahan acuan yang digunakan

sebagai panduan dalam proses belajar mengajar siswa SMK N 1 Kota Bekasi untuk membentuk salah satu bagian dari kompetensi bidang keahlian Teknologi Informasi dan Komunikasi pada Program Keahlian Rekayasa Perangkat Lunak. Modul ini mencakup penguasaan konsep file-file grafik, memahami dasar-dasar pemrograman web, memahami perintah-perintah pemrograman web, dan bagaimana membangun sebuah aplikasi pemrograman berbasis web.

Jakarta, November 2007 Penyusun

Wahyu Lesmono

WAHLES.RPL.1.1

DAFTAR ISI MODUL Halaman i ii iii iv v

KATA PENGANTAR ............................................................................ DAFTAR ISI MODUL .......................................................................... PETA KEDUDUKAN MODUL ................................................................ MEKANISME PEMELAJARAN ............................................................... PERISTILAHAN / GLOSSARY .............................................................. I.

PENDAHULUAN ................................................................... 1 A......................................................................................Deskripsi Judul................................................................................ 1 B......................................................................................Prasyarat ........................................................................................1 C......................................................................................Petunjuk Penggunaan Modul ........................................................... 1 1. Petunjuk Bagi Siswa ................................................ 1 2. Peran Guru ............................................................. 3 D......................................................................................Tujuan Akhir ................................................................................ 3 E......................................................................................Kompetensi ........................................................................................ 4 F......................................................................................Cek Kemampuan ..................................................................... 5

II. PEMELAJARAN .................................................................... 7 A. Rencana Pemelajaran Siswa .......................................... 7 B. Kegiatan Belajar ........................................................... 8 Kegiatan Belajar 1: Tag-tag dasar HTML.............................. 8 a. Tujuan Kegiatan Pemelajaran..................... 8 b. Uraian Materi ........................................... 8 c. Rangkuman ............................................. 52 d. Tugas ...................................................... 52 e. Tes Formatif ............................................ 53 f. Kunci Jawaban Formatif ............................ 54 g. Lembar Kerja ........................................... 56 Kegiatan Belajar 2: Memahami dasar-dasar pemrograman web ................................................................................... 57 h. Tujuan Kegiatan Pemelajaran .................... 57 i. Uraian Materi ........................................... 57 j. Rangkuman .............................................117 k. Tugas ......................................................117 l. Tes Formatif ............................................119
WAHLES.RPL.1.1

m. n.

Kunci Jawaban Formatif ............................120 Lembar Kerja ...........................................121

Kegiatan Belajar 3: Membangun halaman web dengan bahasa pemrograman berbasis web ........................................123 o. Tujuan Kegiatan Pemelajaran ....................123 p. Uraian Materi ...........................................123 q. Rangkuman .............................................125 r. Tugas ......................................................125 s. Tes Formatif ............................................125 t. Kunci Jawaban Formatif ............................126 u. Lembar Kerja ...........................................126 III. EVALUASI ...........................................................................127 A. Tes Tulis ......................................................127 B. Tes Praktek ...................................................127 C. Kunci Jawaban Tes Tulis ................................128 D. Lembar Penilaian Tes Praktek .........................130

IV.

PENUTUP ......................................................................................135 DAFTAR PUSTAKA ........................................................................136

WAHLES.RPL.1.1

PERISTILAHAN/ GLOSSARY

Animation Banner Download Effect Event Export Format Frame Grouping HTML Insert Installation manual Keyframe

: Animasi dari beberapa gambar diam dibuat seperti hidup tanpa ada patah-patah dalam pergerakannya. : Merupakan kepala atau bagian atas dari sebuah web site. : Proses pengambilan file atau mengcopy file. : Tindakan yang dikerjakan untuk menghaluskan atau memperindah animasi pada obyek. : Tindakan yang dilakukan setelah adanya action. : Merubah jenis format ke bentuk yang lain. : Bentuk ektensi dari jenis file. : Bagian dari Timeline. : Mengumpulkan beberapa obyek untuk dijadikan satu. : Hypertext Markup Language, bahasa penanda hipertext : Memasukkan jenis file kedalam bidang kerja SWiSHmax. : Petunjuk Instalasi : Pada dasarnya hampir sama dengan frame. Hanya saja untuk Key frame lebih menunjukkan untuk satu frame.

License Agreement : Persetujuan lisensi penggunaan suatu software tertentu Movie Object Operand Operator Player Preview Scane Search Engine Server Software Source Code Time Line Web design : File yang dibuat dalam SWiSHmax. : Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax. : data yang dioperasikan atau dimanipulasi. : simbol/tanda yang digunakan untuk melakukan operasi-operasi matematis atau operasi string. : Untuk memainkan animasi yang telah dibuat. : Melihat hasil yang telah dikerjakan. : Satu movie merupakan satu Scane. : Mesin bantu pencarian data. : Pelayan, Komputer induk yang bertugas untuk melayani komputerkomputer klien. : Perangkat lunak, program yang berjalan di komputer. : Kode asli suatu program : Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax. : Pembuatan/desain halaman-halaman web.

WAHLES.RPL.1.1

BAB. I PENDAHULUAN
A. Deskripsi Judul

Mengoperasikan Bahasa Pemrograman Berbasis Web merupakan modul teori dan atau praktikum yang membahas tentang pengoperasian Bahasa Pemrograman

Berbasis Web. Modul ini terdiri dari 3 (empat) kegiatan belajar. Kegiatan Belajar 1:
Mengenal tag-tag HTML, membuat, membuka dan menyimpan file halaman web. Kegiatan Belajar 2: Membuat program dengan bahasa pemrograman berbasis web. Kegaiatan Belajar 3: Membuat halaman web dengan software bantu. Setelah menguasai modul ini diharapkan peserta diklat mampu membangun halaman web dengan bahasa pemrograman berbasis web.

Prasyarat
Kemampuan awal yang dipersyaratkan untuk mempelajari modul ini adalah: 1. Peserta diklat telah lulus modul/materi diklat mengoperasikan PC stand alone dengan sistem operasi berbasis teks. 2. Peserta diklat telah lulus modul/materi diklat mengoperasikan PC stand alone dengan sistem operasi berbasis GUI

3. Peserta diklat telah lulus modul/materi menyiapkan dan melakukan survey untuk
menentukan kebutuhan data

4. Peserta diklat telah lulus modul/materi melakukan perancangan pengumpulan

data

5. Peserta diklat telah lulus modul/materi melakukan desain dan perancangan

software

6. Peserta diklat telah lulus modul/materi diklat mengoperasikan software aplikasi

basis data

B.

Petunjuk Penggunaan Modul

1. Petunjuk Bagi Peserta diklat Peserta diklat diharapkan dapat berperan aktif dan berinteraksi dengan sumber belajar yang mendukungnya, karena itu harus memperhatikan hal-hal sebagai berikut:

a.

Langkah- langkah belajar yang ditempuh:

WAHLES.RPL.1.1

1) 2) 3)

4) 5) 6)
7)

8) 9)

10)
11) 12) 13)

14) 15)

Memahami dan menguasai penggunaan tag-tag HTML. Memahami bagaimana menguasai algoritma pemrograman berbasis web Memahami bagaimana menerapkan algoritma pemrograman berbasis pada aplikasi yang dibuat Memahami bagaimana menentukan struktur data pada aplikasi yang dibuat Memahami bagaimana menentukan basis data pada aplikasi yang dibuat Memahami bagaimana menentukan pemakai aplikasi yang dibuat Pelajari daftar isi serta skema kedudukan modul dengan cermat dan teliti. Karena dalam skema modul akan nampak kedudukan modul yang sedang Anda pelajari dengan modul-modul yang lain. Kerjakan soal-soal dalam cek kemampuan untuk mengukur sampai sejauh mana pengetahuan yang telah Anda miliki. Apabila dari soal dalam cek kemampuan telah Anda kerjakan dan 70 % terjawab dengan benar, maka Anda dapat langsung menuju Evaluasi untuk mengerjakan soal-soal tersebut. Tetapi apabila hasil jawaban Anda tidak mencapai 70 % benar, maka Anda harus mengikuti kegiatan pemelajaran dalam modul ini. Membaca dengan seksama uraian materi pada setiap kegiatan belajar. Kemudian kerjakan soal-soal evaluasi sebagai sarana latihan. Mencermati langkahlangkah kerja pada setiap kegiatan belajar sebelum mengerjakan dan bila belum jelas tanyakan pada instruktur. Mengerti apakah telah benarbenar memahami modul ini. Untuk menjawab tes formatif usahakan memberi jawaban yang singkat, jelas dan kerjakan sesuai dengan kemampuan Anda setelah mempelajari modul ini. Bila terdapat penugasan, kerjakan tugas tersebut dengan baik dan bilamana perlu konsultasikan hasil tersebut pada guru/instruktur. Catatlah kesulitan yang Anda dapatkan dalam modul ini untuk ditanyakan pada guru pada saat kegiatan tatap muka. Bacalah referensi lainnya yang berhubungan dengan materi modul agar Anda mendapatkan tambahan pengetahuan.

b.

Perlengkapan yang Harus Dipersiapkan Guna menunjang keselamatan dan kelancaran tugas/pekerjaan yang harus dilakukan, maka persiapkanlah seluruh perlengkapan yang diperlukan, pelajarilah terlebih dahulu modul ini dan buku-buku yang menunjang.

c.

Hasil Pelatihan

WAHLES.RPL.1.1

Peserta

diklat

mampu

membangun

halaman

web

dengan

bahasa

pemrograman sesuai dengan kebutuhan. 2. Peran Guru Guru yang akan mengajarkan modul ini hendaknya mempersiapkan diri sebaikbaiknya yaitu mencakup aspek strategi pemelajaran, penguasaan materi, pemilihan metode, alat bantu media pemelajaran dan perangkat evaluasi. Guru harus menyiapkan yang telah rancangan strategi pemelajaran yang mampu strategi mewujudkan peserta diklat terlibat aktif dalam proses pencapaian/penguasaan kompetensi diprogramkan. Penyusunan rancangan pemelajaran mengacu pada kriteria unjuk kerja (KUK) pada setiap sub kompetensi yang ada dalam GBPP.

C. Tujuan Akhir 1. Peserta diklat mampu melakukan persiapan pemrograman berbasis web untuk
proses pembuatan sebuah web site. 2. Peserta diklat mampu menggunakan dan menerapkan fungsi dan operator algoritma pemrograman pada aplikasi yang dibuat

3. Peserta diklat mampu menentukan struktur data pada aplikasi yang dibuat 4. Peserta diklat mampu menentukan basis data pada aplikasi yang dibuat
5. Peserta diklat mampu mengenali objek-objek web, tag-tag HTML dan scriptscript pada pemrgraman berbasis web. 6. Peserta diklat mampu melakukan kombinasi objek-objek web, tag-tag HTML dan script yang lain untuk membuat halaman-halaman web.

7. Peserta diklat mampu membangun halaman web dengan bahasa pemrograman berbasis web

WAHLES.RPL.1.1

D.

Kompetensi

SILABUS
NAMA SEKOLAH MATA PELAJARAN KELAS/SEMESTER STANDAR KOMPETENSI KODE KOMPETENSI ALOKASI WAKTU : : : : : : SMK AL-MUHADJIRIN Perencanaan WEB Dasar I/ 1 dan 2
Membuat dokumen dengan HTML sesuai spesifikasi TIK.PR02.024.01

104 X 45 Menit

WAHLES.RPL.1.1

KOMPETENSI DASAR
1. Menetapkan pemakaian dan struktur dokumen

INDIKATOR

MATERI PEMBELAJARAN

ALOKASI WAKTU KEGIATAN PEMBELAJARAN PENILAIAN TM

2

PS
4(8)

PI

SUMBER BELAJAR
Buku HTML Dasar E-book HTML Komputer Modul ajar jobsheet

Kegunaan dari dokumen dan audiens diidentifikasi Bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens ditetapkan Struktur dasar dokumen sesuai persyaratan pengguna dirancang Site map dokumen dikem-bangkan dan dikonfirmasikan dengan klien

Kegunaan dari dokumen dan audiens Bahasa HTML Struktur dasar penulisan dokumen Site map dokumen dikembangkan dan dengan klien

Mengidentifikasi kegunaan dari dokumen dan audiens Menetapkan bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens Membuat program sederhana dari script dasar Merancang struktur dasar dokumen sesuai persyaratan pengguna Mengatahui scriptdasar HTML

Program sederhan a
Program script dasar

Mengkonfirmasikan Site map dokumen dikembangkan dan dengan klien

WAHLES.RPL.1.1

KOMPETENSI DASAR
2. Membuat struktur dokumen dengan bahasa HTML

INDIKATOR

MATERI PEMBELAJARAN

KEGIATAN PEMBELAJARAN

ALOKASI WAKTU PENILAIAN TM

2

PS
4(8)

PI
8(16)

Dokumen HTML dilengkapi dengan Head dan title Body pada dokumen dibuat, teks dan paragraf sesuai kebutuhan ditambahkan Format dokumen menarik dan mudah dibaca dibuat Simbol khusus pada browser/ platform ditambahkan dan ditampilkan secara tepat Dokumen disimpan sesuai dengan penamaan standar.

Dokumen HTML dengan Head dan title Body pada dokumen, teks dan paragraf sesuai kebutuhan ditambahkan

Menlengkapi dokumen HTML dengan Head dan title Membuat Body pada dokumen Menambahkan teks dan paragraf sesuai kebutuhan Format dokumen menarik dan mudah Dokumen penamaan standar. Medesain Format dokumen menarik dan mudah dibaca dibuat Penambahan simbol khusus pada browser/ platform Mengatur itampilan secara tepat Penyimpanan dokumen disimpan sesuai dengan penamaan standar.

Program sederhan a
Program dokumen sederhana

SUMBER BELAJAR Buku

HTML Dasar E-book HTML Komputer Modul ajar jobsheet

Simbol khusus pada browser/ platform

WAHLES.RPL.1.1

KOMPETENSI DASAR
3. Memformat dokumen dan menambahkan obyek

INDIKATOR
Teks diformat untuk memenuhi persyaratan penyajian pengguna Background warna atau gambar yang sesuai menurut persyaratan pengguna ( logo peru-sahaan, buku pedoman perusahaan) dipasang Posisi setiap elemen pada halaman dibuat lebih menarik Indent teks dan list (ordered, unordered, dan nested) dibuat Gambar disisipkan (GIF, JPEG, atau embedded image) dan dokumen diformat sesuai persyaratan Wrap teks di sekitar gambar digunakan atau ditambahkan jarak di sekitar gambar Skala gambar dan perataan pada dokumen di format

MATERI PEMBELAJARAN
Format teks dengan HTML Pemberian Background dan warna pada dokumen Menempatkan objek pada bidang desain

KEGIATAN PEMBELAJARAN
Mempormat Teks untuk memenuhi persyaratan penyajian pengguna Memasang Background warna atau gambar yang sesuai menurut persyaratan pengguna ( logo peru-sahaan, buku pedoman perusahaan) Menempatkan Posisi setiap elemen pada halaman Indent teks dan list (ordered, unordered, dan nested) Wrap teks di sekitar gambar digunakan atau jarak di sekitar Skala gambar dan perataan pada dokumen di format Membuat setiap elemen pada halaman dibuat lebih menarik Membuat Indent teks dan list (ordered, unordered, dan nested) Menyisipkan gambar disisipkan (GIF, JPEG, atau embedded image) Mempormat dokumen sesuai persyaratan Menambahkan Wrap teks di sekitar gambar Menambahkan jarak di sekitar gambar

ALOKASI WAKTU PENILAIAN TM

2

PS
4(8)

PI
8(16)

Program sederhan a campura n dari materi 3

Contoh program insert object (gambar dan teks)

SUMBER BELAJAR Buku

HTML Dasar E-book HTML Komputer Modul ajar jobsheet

WAHLES.RPL.1.1

NAMA SEKOLAH MATA PELAJARAN KELAS/SEMESTER STANDAR KOMPETENSI KODE KOMPETENSI : ALOKASI WAKTU KOMPETENSI DASAR
1. Menjelaskan konsep dasar dan teknologi dari Webpage.

: : : : :

SMK AL-MUHADJIRIN Perencanaan WEB Dasar I/ 1 dan 2 Menerapkan dasar-dasar pembuatan web statis tingkat dasar
TIK.PR02.027.01

128 X 45 Menit MATERI PEMBELAJARAN

Konsep dan teknologi web Konsep klien dan server pada teknologi WEB Kapasitas Bandwidth dan kulaitas tampilan halaman WEB Pemilihan software aplikasi perancangan web Perbandingan local server dan remote server (hosting provider)

ALOKASI WAKTU KEGIATAN PEMBELAJARAN

Menjelaskan Konsep-konsep dan teknologi web (web Server, URL, HTTP, HTML, Web browser , gateway ) Mengetahui Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer Menjelaskan perbedaan antara klien dan server Menjelaskan cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layer Membandingkan ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang web page Menjelaskan keuntungan dan kerugian running dari server yang dimiliki dibandingkan server provider.

INDIKATOR
Konsep-konsep dan teknologi web dijelaskan (web Server, URL, HTTP, HTML, Web browser , gateway Perbedaan antara klien dan server dijelas. Cara bagaimana bandwidth mempengaruhi transmisi data dan gambar pada layar dijelaskan. Ciri-ciri dan fungsi dari software teks editor yang tersedia untuk merancang web page dibandingkan

PENILAIAN
Kompilasi program

TM
4

PS
4(8)

PI

SUMBER BELAJAR
Bukub Pemrogra man HTML Komputer Buku membuat halaman WEB dengan Frontpage

WAHLES.RPL.1.1

KOMPETENSI DASAR
2. Mempersiapkan pekerjaan pembuatan web

INDIKATOR
Software teks editor dan browser sesuai dengan kebutuhan diidentifikasi Software beroperasi sesuai dengan standar operasi software Sketsa disain untuk web yang akan dibuat sudah disiapkan Data yang akan ditampilkan di Web tersedia Area kerja untuk membuat dokumen web baru sudah disiapkan. Proses pembuatan Web sesuai dengan standar operasi aplikasi dilakukan Web yang dibuat tampil dilayar sesuai dengan disain Data yang tersedia tampil di layar Web

MATERI PEMBELAJARAN
Pemilihan teks editor dan browser Kinerja WEB Browser Desain layout halaman WEB

KEGIATAN PEMBELAJARAN
Mengidentifikasi software teks editor dan browser sesuai dengan kebutuhan Mempersiapkan software beroperasi sesuai dengan standar operasi software Membuat Area kerja untuk membuat dokumen web Mempersiapkan sketsa disain untuk web yang akan dibuat sudah disiapkan Menyediakan data yang akan ditampilkan di Web Menyiapkan area kerja untuk membuat dokumen web baru. Memanagemen langkah langkah Proses pembuatan Web sesuai dengan standar operasi aplikasi Membandingkan Web yang dibuat tampilan dilayar sesuai dengan disain Menampilkan data yang tersedia di layar Web

ALOKASI WAKTU PENILAIAN

sketsa disain untuk web

TM

PS

PI

SUMBER BELAJAR Bukub

Pemrogra man HTML Komputer Buku membuat halaman WEB dengan Frontpage

3. Melakukan pembuatan dokumen web baru

Proses pembuatan Web sesuai dengan standar operasi aplikasi

Kompilasi program Hasil Web standar

4(8)

Bukub Pemrogra man HTML Komputer Buku membuat halaman WEB dengan Frontpage

WAHLES.RPL.1.1

KOMPETENSI DASAR
4. Menampilkan Web dalam browser

INDIKATOR

MATERI PEMBELAJARAN

KEGIATAN PEMBELAJARAN

ALOKASI WAKTU PENILAIAN

Kompilasi program Hasil Web standar

TM
4

PS
4(8)

PI

Format URL (Uniform Resource Locator) dijelaskan Peran dari browser dalam membaca filefile Web didemonstrasikan (text-only, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Perbedaan browser mempengaruhi tampilan dari halaman web dapat diidentifikasi

Format URL (Uniform Resource Locator) Peran dari browser dalam membaca file-file Perbandingan lokasi browser

Membuat tampilan Format URL (Uniform Resource Locator) Mendemonstrasikan Peran dari browser dalam membaca file-file Web (text-only, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Mengatahui macam-macam browser web Mengetahui Peran dari browser dalam membaca file-file Web (text-only, hypertext) dengan mengakses ke URL tertentu melalui menu yang tersedia Mengidentifikasi perbedaan browser yang mempengaruhi tampilan dari halaman web Mengetahui Perbedaan browser mem-pengaruhi tampilan dari halaman web

SUMBER BELAJAR Bukub

Pemrogra man HTML Komputer Buku membuat halaman WEB dengan Frontpage

Keterangan
TM PS PI : Tatap Muka : Praktek di Sekolah (2 jam praktik di sekolah setara dengan 1 jam tatap muka) : Praktek di Industri (4 jam praktik di Du/ Di setara dengan 1 jam tatap muka)

WAHLES.RPL.1.1

F.

Cek Kemampuan
Isilah cek list () seperti pada tabel di bawah ini dengan sikap jujur dan dapat dipertanggung jawabkan untuk mengetahui kemampuan awal yang telah dimiliki. Saya dapat Melakukan Pekerjaan ini dengan Kompeten Ya Tidak

Standar Kompetensi

Kompetensi Dasar

Bila Jawaban Ya Kerjakan

Tes Formatif 1 Tes Formatif 1 Tes Formatif 1 Tes Formatif 2 Tes Formatif 2 Tes Formatif 2 Tes Formatif 2

1. Membuat dokumen dengan HTML sesuai spesifikasi

1. Menetapkan pemakaian dan struktur dokumen 2. Membuat struktur dokumen dengan bahasa HTML 3. Memformat dokumen dan menambahkan obyek 1. Menjelaskan konsep dasar dan teknologi dari Webpage. 2. Mempersiapkan pekerjaan pembuatan web 3. Melakukan pembuatan dokumen web baru 4. Menampilkan Web dalam browser

4. Menerapkan dasar-dasar pembuatan web statis tingkat dasar

Apabila anda menjawab TIDAK pada salah satu pernyataan di atas, maka pelajarilah modul ini.

WAHLES.RPL.1.1

BAB II PEMELAJARAN
A.
Kompetensi

Rencana Pemelajaran
: Membuat Dokumen HTML sesuai dengan spesifikasi Tanggal Waktu Tempat Belajar Alasan Perubahan Tanda Tangan Guru

Jenis Kegiatan
Menetapkan pemakaian dan struktur dokumen Membuat struktur dokumen dengan bahasa HTML

Membuat dokumen dengan menambahkan objek

B. Kegiatan Belajar

1.

Kegiatan Belajar 1:
Menetapkan pemakaian dan struktur dokumen

a. Tujuan Kegiatan Pemelajaran

1. Kegunaan dari dokumen dan audiens diidentifikasi 2. Bahasa HTML yang tepat yang akan digunakan pada dokumen dan audiens
ditetapkan 3. Struktur dasar dokumen sesuai persyaratan pengguna dirancang 4. Site map dokumen dikem-bangkan dan dikonfirmasikan dengan klien

b. Uraian Materi 1
1. HTML (Hypertext Markup Language) HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen.
WAHLES.RPL.1.1

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web. Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek. Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web tool. Struktur Dasar HTML Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html> <head> <title>Judul Halaman Web</title> </head> <body> ISI Halaman WEB </body> </html>

Keterangan: <html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
WAHLES.RPL.1.1

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). <body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink,

leftmargin dan topmargin.

Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-langkah berikut ini: 1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan kita.

2.

Buka Browser, misalnya Internet Explorer atau Netscape Navigator. 3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah Notepad. 4. Mulai baris paling atas, tuliskan:
<html> <head> <title>Latihan 1</title> </head> <body> Ini adalah halaman web pertama saya. </body> </html>

5. Simpan file anda dengan cara klik menu File - Save:

WAHLES.RPL.1.1

6. Selanjutnya pilih direktori latihan yang tadi kita buat.

7. Pada box File name, isikan nama filenya dengan Latihan1.html 8. Pada drop down list di Save as type, pilih All Files. Sehingga
tampilannya seperti berikut:

WAHLES.RPL.1.1

9. Simpan proyek anda dengan meng-klik pada tombol Save

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti Internet Explorer, Mozila Firefox.

1. Klik menu File Open

2. Setelah jendela Open terbuka, klik tombol Browse

3. Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file
Latihan1.html .

WAHLES.RPL.1.1

4. Klik tombol Open lalu tekan tombol Ok, halaman web yang ditampilkan
dalam browser adalah seperti berikut:

Catatan:

Semua dokumen HTML mempunyai ekstensi .html (atau .htm) Semua halaman web (homepage ) mempunyai file Latihan1.html . File
Latihan1.html secara otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan file tersebut di buka di browser.
Kode Warna Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai
WAHLES.RPL.1.1

heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut: Red FF Green FF Blue 00

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=yellow. Berikut ini warna-warna yang dapat digunakan dalam halaman HTML. Warna White Black Red Green Blue Magenta Cyan Yellow Heksadesimal #FFFFFF #000000 #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda. Yang penting anda mengikuti aturan diatas. 2. Pengaturan Halaman Web dan Teks Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks: a. <body> , digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text,

link, vlink, alink, leftmargin dan topmargin.

Background = digunakan untuk mengatur latar belakang dengan

gambar/image.

Bgcolor

= digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.

WAHLES.RPL.1.1

 Teks Link Vlink Alink

= digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default. = Untuk mengatur warna link dokumen dengan warna biru sebagai warna default = Untuk mengatur warna visited link dokumen dengan default ungu = digunakan untuk mengatur warna active link dokumen dengan default merah.

b.

Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. contoh1_1.html
<html> <head> <title>::: Membuat Heading Dokumen HTML:::</title> </head> <body bgcolor=#000000 text=#FFFFFF> <h1>Headng Tingkat 1 </h1> <h2>Headng Tingkat 2 </h2> <h3>Headng Tingkat 3 </h3> <h4>Headng Tingkat 4 </h4> <h5>Headng Tingkat 5 </h5> <h6>Headng Tingkat 6 </h6> </body> </html>

Hasilnya akan terlihat seperti:

WAHLES.RPL.1.1

c.

Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

d. e.

Line Break: <BR> Digunakan untuk pindah ke baris baru. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

f.

Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR. SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus

WAHLES.RPL.1.1

10

dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan fontfont yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). contoh1_2.html
<html> <head> <title>::: Mengatur Ukuran, Jenis dan Warna Font:::</title> </head> <body> <font size=1 Face=arial color=red>Ukuran font 1</font><br> <font size=2 Face=arial color=green>Ukuran font 2 </font><br> <font size=3 Face=arial color=blue>Ukuran font 3 </font><br> <font size=4 Face=verdana color=red>Ukuran font 4 </font><br> <font size=5 Face=verdana color=blue>Ukuran font 5 </font><br> <font size=6 Face=tahoma color=green>Ukuran font 6 </font><br> <font size=7 Face=tahoma color=red>Ukuran font 7 </font><br> </body> </html>

Hasilnya akan terlihat

WAHLES.RPL.1.1

11

Contoh lainnya:
<font size=2 face="times_new_roman" color="#0066cc">

g.

Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Contoh:

<basefont size=2 face="arial,helvetica" color="#ff0000">

Attribut

sama

dengan

attribut

FONT.

Tag

FONT

akan

mengoverwrite setting pada BASEFONT.

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu: Perhatian: Semua tag di bawah ini membutuhkan tap penutup. <B> <I> <U> <TT> <S> <PRE> <BLINK> <STRONG> <ADDRESS> Bold text

Italic text
Underscore Typewriter Strikeout - draws a line through the text Preformatted Text <DFN> Definition Text berkedip (lebih baik jangan digunakan) Strong

Italic
<CITE>
WAHLES.RPL.1.1

Digunakan untuk quoting text

12

<CODE>

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<SAMP>

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<KBD>

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG> <SMALL> <SUP> <SUB> <ABBREV> <PERSON> <Q> <VAR> h.

Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat tekssuperscript membuat tekssub script Abbreviations Digunakan untuk indexing Membuat short inline quotation

<ACRONYM> Untuk akronim

Membuat variable name, selalu dalam italics.

<HR> , digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

contoh1_3.html
<html> <head> <title>::: Membuat Garis Horisontal:::</title> </head> <body bgcolor=#fffccc> <font size=1 Face=tahoma color=blue>Ahlan Wa Sahlan</font> <hr size=1 width=150 align=left> <h1><center>www.smkn1-kotabekasi.com</h1> <hr size=5 align=center noshade> </body> </html>

Hasilnya tampak sebagai berikut:

WAHLES.RPL.1.1

13

i.

LISTS Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol. Terdapat tiga tipe list yang dapat digunakan, yaitu:

Unordered Lists: <UL> Untuk membuat daftar item dengan

tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai circle untuk bentuk lingkaran tengahnya putih, square untuk bentuk kotak padat hitam dan disc bentuk lingkaran pada warna hitam. contoh1_4.html
<html> <head> <title>::: Membuat Undordered List:::</title> </head> <body> <b><font size=3 Face=tahoma color=blue> Jurusan TIK yang ada di SMKN 1 Kota Bekasi ada 3 Program Studi: </b> WAHLES.RPL.1.1

14

<hr size=2 width=150 align=left> <ul type=circle> <li>Multimedia </ul> <ul type=square> <li>RPL </ul> <ul type=disc> <li>TKJ </ul> </font> </body> </html>

Hasil dari kode di atas adalah:

Ordered Lists: <OL> Juga digunakan untuk membuat daftar item

bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. yang ada pada Ordered List adalah TYPE dan START . contoh1_5.html
<html> <head> <title>::: Membuat Ordered List:::</title> WAHLES.RPL.1.1

Atribut

15

</head> <body> <b><font size=2 Face=tahoma color=black> SMKN 1 Kota Bekasi memiliki 3 Jurusan: </b> <hr size=2 width=150 align=left> <ol type=1> <li>TIK <li>Mesin <li>Otomotif </ol> <hr size=3 width=500> <b><font size=2 Face=tahoma color=black> Jurusan TIK memiliki 4 LAB Komputer: </b> <ol start=4> <li>LAB. Multimedia <li>LAB. RPL <li>LAB. TKJ </ol> </font> </body> </html>

Hasil dari kode di atas adalah:

WAHLES.RPL.1.1

16

Untuk attribut TYPE, dapat juga menggunakan: 1- Default numbers, 1, 2, 3, etc. A- Huruf besar. A, B, C, etc. a- Huruf kecil. a, b, c, etc. I- Romawi huruf besar. I, II, III, etc. i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL> , digunakan untuk menjelaskan istilahistilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah. contoh1_6.html
<html> <head> <title>::: Membuat Definition List:::</title> </head> <body> <dl> <dt> Bagian Pertama. <dd> Isi dari Bagian Pertama. <dt> Bagian Kedua. <dd> Isi dari Bagian Kedua </dl> </body> </html>

Hasil dari kode di atas adalah:

Preformatted Text: <PRE>. Digunakan untuk mengatur format

tampilan agar sesuai dengan aslinya.
WAHLES.RPL.1.1

17

contoh1_7.html
<html> <head> <title>Aplikasi dari &lt;pre&gt; tag</title> </head> <body> <h3>tanpa menambahkan pre</h3> Berakitrakit ke hulu berenang-renag ketepian, bersakit-sakit dahulu, bersenag-senang kemudian <p><h3>dengan menggunakan pre</h3> <pre> Berakitrakit ke hulu berenang-renag ketepian, bersakit-sakit dahulu, bersenag-senang kemudian </pre> </body> </html>

Hasil dari kode di atas adalah:

Extended Quotations: <BLOCKQUOTE> , digunakan untuk

membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.
WAHLES.RPL.1.1

18

contoh1_8.html
<html> <head> <title>::: Membuat Blockquote:::</title> </head> <body> <h3>Pengaturan Teks</h3> <blockqoute> Untuk mengatur halaman web yang baik, pengaturan teks dapat dilakukan dengan menggunakan blockqoute. </blockqoute> </body> </html>

Hasilnya tampak seperti bnerikut ini:

3. Hypertext Link Digunakan untuk membuat link/penghubung antara suatu halaman dengan halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama. Sintak tag link adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body> . Adapun macam-macam link adalah sebagai berikut:
Link ke Dokumen Lain Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan
WAHLES.RPL.1.1

19

dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat script berikut dan beri nama dengan link_dokumen_lain.html.
<html> <head> <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title> </head> <body bgcolor=#ffffd0> <font face=arial size=6 color=tahoma> <b>.::: SMKN 1 Kota Bekasi:::. <br> <font face=arial size=4 color=blue> <i>Sukses itu didapat dari usaha dan kerja keras serta doa</i> <font face=arial size=1 color=tahoma> <hr size=2 width=100 align=left color=blue> | <a href=link_dokumen_lain.html>H o m e</a> | <a href=proli.html>Program Keahlian</a> | <a href=ekstra.html>Ekstra Kurikuler</a> | <hr><p><font face=verdana size=4 color=orange> Ahlan wa Sahlan di web kami ... </body> </html>

Buat lagi file berikut dan beri nama dengan proli.html

<html> <head> <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title> </head> <body bgcolor=#ffffd0> <font face=arial size=6 color=tahoma> <b>.::: SMKN 1 Kota Bekasi:::. <br> <font face=arial size=4 color=blue> <i>Sukses itu didapat dari usaha dan kerja keras serta doa</i> <font face=arial size=1 color=tahoma> <hr size=2 width=100 align=left color=blue> | <a href=link_dokumen_lain.html>H o m e</a> | <a href=proli.html>Program Keahlian</a> | <a href=ekstra.html>Ekstra Kurikuler</a> | <hr><p><font face=verdana size=4 color=brown> Program Keahlian<br> <font size=1> <ul type=circle><li>Rekayasa Perangkat Lunak <li>Multimedia <li>Teknik Komputer dan Jaringan <li>Teknik Mekanik Otomotif <li>Teknik Bodi Otomotif <li>Teknik Pemesinan <li>Teknik Las</ul> </body> </html> WAHLES.RPL.1.1

20

Untuk melengkapi latihan kali ini, buat juga file berikut dan beri nama

ekstra.html
<html> <head> <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title> </head> <body bgcolor=#ffffd0> <font face=arial size=6 color=tahoma> <b>.::: SMKN 1 Kota Bekasi:::. <br> <font face=arial size=4 color=blue> <i>Sukses itu didapat dari usaha dan kerja keras serta doa</i> <font face=arial size=1 color=tahoma> <hr size=2 width=100 align=left color=blue> | <a href=link_dokumen_lain.html>H o m e</a> | <a href=proli.html>Program Keahlian</a> | <a href=ekstra.html>Ekstra Kurikuler</a> | <hr><p><font face=verdana size=4 color=orange> Ekstra Kurikuler<br> <font size=1> <ul type=circle> <li>Pramuka <li>Rohis <li>PMR <li>Paskibra <li>Boxer </ul> </body> </html>

Hasil dari kode-kode diatas adalah sebagai berikut:

WAHLES.RPL.1.1

21

Jika link-link tersebut di-klik, maka hasilnya adalah sebagai berikut:

WAHLES.RPL.1.1

22

Link ke bagian tertentu dalam dokumen yang sama Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal:
<a href=#php> Bab 1 </a>

atau dapat ditulis lengkap:

<a href=belajar_php.html#php> Bab 1 </a>

dan untuk nama anchornya:

<a name=php>Ada apa dengan PHP?</a>

Link ke alamat URL atau Website Untuk membuat link ke alamat URL adalah dengan menambahkan: http://nama_URL. Contoh:
<a href=http://www.dikti.org>www.dikti.org</a> <a href=http://www.smkn1-kbks.com>www.smkn1-kbks.com</a>

Link ke Alamat Email Link email adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan program pengiriman email yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis. Untuk membuat link ke alamat email hanya menambahkan atribut

mailto:alamat_email ke dalam tag <A HREF> Misalnya:

<A HREF="mailto:smkn1-kbks.yahoo.com">Kirim email</a>

Link File yang akan didownload Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownload file yang tercantum pada dokumen

WAHLES.RPL.1.1

23

tersebut. Format penulisannya adalah <a href=nama_file> Misal:

<a href=antivirus.zip>Download anti virus</a> <a href=latihan.doc>Download latihan Html</a> <a href=mysql.exe>Download MYSQL</a>

4. Menyisipkan Gambar/Images Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah
<img src=nama file gambar>

Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk mengatur ukuran gambar, menggunakan attribut width daan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace. contoh1_9.html
<html> <head> <title>::: menampilkan images:::</title> </head> <body> <b><font size=2 Face=tahoma color=black> <img src="gambar1.jpg" alt="aplikasi 3dmaks"> <img src="ict.jpg" hspace=10 vspace=5 width=200 height =254 align="center" border=2> </font> </body> </html>

WAHLES.RPL.1.1

24

Tampilan dari contoh diatas adalah sebagai berikut:

5. Layout Halaman Web dengan Tabel (Table) Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Membuat Tabel Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .

<TABLE>
WAHLES.RPL.1.1

25

Digunakan untuk mendefinisikan pembuatan tabel. Memiliki attribut: align - perataan: rata kiri (left), tengah (center) atau kanan (right). valign mengatur bentuk perataan secara vertikal bgcolor mengatur warna latar belakang (background) dari tabel. background

menentukan gambar yang digunakan sebagai

background tabel color Untuk mengatur warna suatu sel dalam tabel border menentukan ukuran border tabel (dalam pixel). rowspan menggabungkan beberapa baris colspan menggabungkan beberapa kolom cellpadding - jarak antara isi cell dengan batas cell (dalam pixel). cellspacing mengatur spasi/jarak antar cell (dalam pixel). width menentukan lebar tabel dalam pixel atau percent. height Menentukan tinggi tabel

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: align - perataan: rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang dari baris. valign - perataan vertikal: top, middle atau bottom.

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah: align untuk menentukan perataan kolom background untuk menentukan image yang digunakan sebagai latar belakang dari kolom. bgcolor untuk menentukan warna latar belakang colspan - lihat gambar contoh height untuk mengatur ukuran tinggi cell dalam pixels. nowrap untuk membuat supaya isi dari kolom tetap berada pada satu baris. rowspan - lihat gambar contoh valign untuk mengatur perataan vertikal: top, middle atau bottom. width untuk menentukan lebar kolom dalam pixel atau percen. contoh1_10.html
<html> <head> WAHLES.RPL.1.1

26

<title>::: Pembuatan Table:::</title> </head> <body> <font face=arial size=2 color=tahoma> <table> <tr> <td>Ini contoh tabel sederhana tanpa border</td> </tr> </table> <p> <table border=1> <tr> <td>Ini contoh tabel sederhana dengan border</td> </tr> </table> <p> <table border=1> <tr> <td>No.</td> <td>Nama</td> <td>Alamat</td> </tr> <tr> <td>1.</td> <td>Wahyu</td> <td>Bekasi</td> </tr> <tr> <td>3.</td> <td>Lesmono</td> <td>Kranji</td> </tr> </table> </body> </html>

Hasilnya adalah sebagai berikut:

WAHLES.RPL.1.1

27

contoh1_11.html
<html> <head> <title>.::: Belajar Membuat Tabel:::.</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff" width="100%" height="115"> <tr> <td width="100%" height="115" bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td> </tr> </table> <font size="1">&nbsp;</font> <table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%" height="431"> <tr> <td width="23%" height="307" valign="top"> <table border="1" cellpadding="0" cellspacing="0" bordercolor="#BDCED9" width="94%" height="245"> <tr> <td width="100%" height="244" bordercolor="#C0C0C0" bgcolor="#BDCED9">&nbsp;</td> </tr> </table> <font size="1">&nbsp;</font> <table border="1" cellpadding="0" cellspacing="0" bordercolor="#BDCED9" width="94%" height="152"> <tr> <td width="100%" height="19" bgcolor="#BDCED9" bordercolor="#C0C0C0">&nbsp;</td> </tr> <tr> <td width="100%" height="132" bordercolor="#C0C0C0"> &nbsp;</td> </tr> </table> </td> <td width="77%" height="307" valign="top"> <table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff" width="97%" height="411"> <tr> <td width="64%" height="109">&nbsp;</td> <td width="36%" height="109">&nbsp;</td> </tr> <tr> <td width="64%" height="301" rowspan="2">&nbsp;</td> <td width="36%" height="24" bgcolor="#BDCED9" bordercolor="#C0C0C0"> <font size="1">&nbsp;</font></td>

WAHLES.RPL.1.1

28

</tr> <tr> <td width="36%" height="277" bordercolor="#C0C0C0">&nbsp; </td> </tr> </table> </td> </tr> </table> </body> </html>

Hasilnya adalah:

WAHLES.RPL.1.1

29

Menambahkan Judul Tabel Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel, judul kolom table dan judul baris tabel. Judul tabel atau biasa disebut CAPTION terletak dibagian luar tabel yang bisa berada dibawah atau diatas tabel. Secara default caption diletakkan dibagian atas suatu tabel, tetapi juga dapat
WAHLES.RPL.1.1

30

diletakkan dibawah suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut. Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Judul baris atau judul kolom akan tercetak tebal. contoh1_12.html
<html> <head> <title>::: Pembuatan Judul Table:::</title> </head> <body> <font face=arial size=2 color=maroon> <table border=1> <caption align=top><b><u>Daftar Alamat</u></b></caption> <tr> <th width=40>No.</td> <th width=150>Nama</td> <th width=200>Alamat</td> </tr> <tr> <td align=center>1.</td> <td>Wahyu</td> <td>Bekasi</td> </tr> <tr> <td align=center>2.</td> <td>Lesmono</td> <td>Kranji</td> </tr> </table> </body> </html>

Hasilnya akan tampak sebagai berikut:

WAHLES.RPL.1.1

31

contoh1_13.html
<html> <head> <title>::: Pembuatan Judul Table:::</title> </head> <body> <font face=arial size=2 color=maroon> <table border=1> <caption align=bottom><b><u>Daftar Alamat</u></b></caption> <tr> <th width=60 align=left>No.</td> <td width=150>1.</td> <td width=200>2.</td> </tr> <tr> <th align=left>Nama</td> <td>Wahyu</td> <td>Lesmono</td> </tr> <tr> <th align=left>Alamat</td> <td>Bekasi</td> <td>Kranji</td> </tr> </table> </body> </html>

Hasilnya akan tampak seperti berikut:

Mengatur Lebar dan Tinggi Suatu Tabel

WAHLES.RPL.1.1

32

Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur tinggi table dengan atribut HEIGHT . Jika atribut WIDTH dan HEIGHT digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai atribut mengunakan ukuran % (max 100%) dan ukuran pixel. contoh1_14.html
<html> <head> <title>::: Mengatur Lebar dan Tinggi Tabel:::</title> </head> <body> <font face=arial size=2 color=tahoma> <table border=1 width=100%> <caption align=top><b><u>Daftar Alamat</u></b></caption> <tr> <th width=40>No.</td> <th width=150>Nama</td> <th width=200>Alamat</td> </tr> <tr> <td align=center>1.</td> <td height=50>Wahyu</td> <td height=50>Bekasi</td> </tr> <tr> <td align=center>2.</td> <td height=30>Lesmono</td> <td height=30>Kranji</td> </tr> </table> </body> </html>

Hasilnya tampak sebagai berikut:

WAHLES.RPL.1.1

33

Perataan dalam Tabel Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal dengan atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser. contoh1_15.html
<html> <head> <title>::: Membuat Perataan Table:::</title> </head> <body> <font face=arial size=2 color=tahoma> <table border=1 align=center> <caption align=top> <b>Daftar Alamat</b> <hr width=110> </caption> <tr> <th width=40>No.</td> <th width=150>Nama</td> <th width=200>Alamat</td> </tr> <tr> <td align=center>1.</td> <td align=center valign=middle height=50>Wahyu</td> <td align=right valign=top height=50>Bekasi</td> </tr> <tr> <td align=center>2.</td> <td align=left valign=baseline height=50>Lesmono</td> <td align=left valign=bottom height=50>Kranji</td> </tr> </table> </body> </html>

Hasilnya seperti gambar berikut:

WAHLES.RPL.1.1

34

Membuat Warna Pada Tabel Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan teks serta warna bordernya. Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna border dapat menggunakan beberapa atribut sbb: Atribut BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK Fungsi Mengubah warna keseluruhan border Mengubah warna border bagian atas dan kiri Mengubah warna border bagian bawah dan kanan

Penggabungan Baris/Kolom Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabung-kan beberapa kolom menjadi 1 sedangan ROWSPAN menggabungkan beberapa baris menjadi 1. Cellpadding Dan Cellspacing CELLPADDING digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel. contoh1_16.html
<html> <head> <title>::: Contoh Merge, Cell dan Pedd:::</title> </head> <body> <table border=2 align=center bordercolor=#000000 bgcolor=#FFFFFF cellspacing=4 cellpadding=8 width=100%> WAHLES.RPL.1.1

35

<font face=arial size=2 color=black> <tr> <td bgcolor=#EEEEEE colspan=2 align=center>Kelas</td> <td bgcolor=#EEEEEE align=center rowspan=2>Keterangan</td> </tr> <tr> <td width=200 bgcolor=#DFF9F9 align=center>I</td> <td width=200 bgcolor=#DFF9F9 align=center>II</td> </tr> <tr> <td>Ali</td> <td>Umar</td> <td align=center>Lunas</td> </tr> </table> </body> </head> </html>

Hasilnya adalah sebagai berikut:

6. Membuat Frames Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan. Format:
<html> <head> </head> WAHLES.RPL.1.1

36

<frameset> </frameset> </html>

<frame src>

Aturan penggunaan atribut ROWS dan COLS pada frameset adalah:

<frameset rows=tinggi_baris,tinggi_baris,> <frameset cols=lebar_kolom, lebar_kolom,>

Atribut-atribut yang digunakan dalam FRAME adalah: Atribut

FRAMESET COLS FRAMESET ROWS FRAME SRC NOFRAME

Fungsi Membuat frame vertikal dengan lebar kolom tertentu Membuat frame horizontal dengan tinggi baris tertentu Memasukkan dokumen HTML ke dalam FRAME Memasukkan body teks untuk browser yang tidak dapat menampilkan frame

Model- model frame dan contoh pembuatannya:

WAHLES.RPL.1.1

37

1 <FRAMESET cols="*,140"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET>

1 2 3 4 5

2 <FRAMESET cols="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 3 <FRAMESET rows="100,*"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 4 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="menu.htm" NAME="Frame2"> </FRAMESET> 5 <FRAMESET rows="*,60"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> </FRAMESET> </FRAMESET>

6 <FRAMESET cols="*,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET rows="15%,15%,70%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4"> </FRAMESET> </FRAMESET> 7 <FRAMESET cols="50%,50%"> <FRAMESET rows="50%,50%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAME SRC="homepage2.htm" NAME="Frame2"> </FRAMESET> <FRAMESET rows="50%,50%"> <FRAME SRC="menu.htm" NAME="Frame3"> <FRAME SRC="menu2.htm" NAME="Frame4"> </FRAMESET> </FRAMESET> WAHLES.RPL.1.1 8 <FRAMESET rows="15%,70%,15%"> <FRAME SRC="homepage.htm" NAME="Frame1"> <FRAMESET cols="15%,70%,15%"> <FRAME SRC="menu.htm" NAME="Frame2"> <FRAME SRC="menu2.htm" NAME="Frame3"> <FRAME SRC="menu3.htm" NAME="Frame4">

38

Buat file baru dengan nama latihan6.html, header.html, kiri.html, kanan.html, bab1.html dan bab2.html dengan isi masing-masing sebagai berikut:
File latihan6.html <html> <head> <title>.:: Latihan Membuat Frame::.</title> </head> <frameset rows=20%,* framespacing="0" border="0" frameborder="0"> <frame name=atas src=header.html scrolling="no" noresize> <frameset cols=25%,* framespacing="0" border="0" frameborder="0"> <frame name=kiri src=kiri.html scrolling="no" noresize> <frame name=kanan src=kanan.html scrolling="no" noresize> </frameset> </frameset> </html>

Pada tag <frameset rows=20%,*> maksudnya adalah frame yang dibuat terdiri dari dua bagian/baris dengan ukuran 20% bagian paling atas dan selebihnya (80%) adalah frame bagian bawah/baris kedua yang ditunjukkan dengan tanda *. <frame name=atas src=header.html> menunjukkan bahwa nama frame adalah atas dan diisi dengan dokumen header.html .

<frameset cols=30%,*> mempunyai arti bahwa frame bawah dibagi lagi

menjadi dua kolom dengan ukuran 30% untuk frame kiri dan sisanya untuk frame sebelah kanan. Kalau file tersebut dijalankan hasilnya sebagai berikut:

WAHLES.RPL.1.1

39

Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame belum dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file sebagai berikut:
File header.html <html> <head> <title>.:: Latihan Membuat Frame::.</title> </head> <body bgcolor=#EEEEEE> <font face=arial size=6 color=tahoma> <b>.::: SMKN 1 Kota Bekasi:::. </b><br> <font face=arial size=4 color=orange> <i>Sukses itu didapat dari usaha dan kerja keras serta doa</i> </body> </html>

File kiri.html <html> WAHLES.RPL.1.1

40

<head> <title>::: Latihan Membuat Frame:::</title> </head> <body bgcolor=#ffffff> <table border=1 width="228" height="28" cellspacing=0> <tr> <td width="218" height="22" bordercolor="#800080" bgcolor="#BDCED9"> <b><font face="Tahoma" size="2">&nbsp;&nbsp; M e n u</font></b> </td> </tr> <tr> <td width="218" height="22" bordercolor="#800080"> <b><font face="Tahoma" size="2">&nbsp;&nbsp; <a href=kanan.html target=kanan>H o m e</a></font></b></td> </tr> <tr> <td width="218" height="22" bordercolor="#800080"> <b><font face="Tahoma" size="2"> &nbsp;&nbsp; <a href=proli.html target=kanan>Program Keahlian</a> </font></b></td> </tr> <tr> <td width="218" height="22" bordercolor="#800080"> <b><font face="Tahoma" size="2"> &nbsp;&nbsp; <a href=ekstra.html target=kanan>Ekstra Kurikuler</a> </font></b></td> </tr> </table> </body> </html> File kanan.html <html> <head> <title>::: Latihan Membuat Link Ke Dokumen Lain:::</title> </head> <body bgcolor=#ffffff> <table border=1 bordercolor=bordercolor="#800080" cellspacing=0 cellpadding=50 width=750 height=450> <tr> <td valign=top> <font face=verdana size=4 color=blue> Selamat datang di web kami ... </td> </tr> </body> </html>

File proli.html <html> WAHLES.RPL.1.1

41

<head> <title>::: Link Dokumen Lain:::</title> </head> <body bgcolor=#ffffff> <table border=1 bordercolor=bordercolor="#800080" cellspacing=0 cellpadding=50 width=750 height=450> <tr> <td valign=top> <font face=verdana size=4 color=blue> Program Keahlian:<br> <font size=1> <ul type=circle> <li>Rekayasa Perangkat Lunak <li>Teknik Elektronika Industri <li>Teknik Pembangkit Tenaga Listrik <li>Teknik Mekanik Otomotif <li>Teknik Bodi Otomotif <li>Teknik Pemesinan <li>Teknik Las </ul> </td> </tr> </body> </html> File ekstra.html <html> <head> <title>::: Link Dokumen Lain:::</title> </head> <body bgcolor=#ffffff> <table border=1 bordercolor=bordercolor="#800080" cellspacing=0 cellpadding=50 width=750 height=450> <tr> <td valign=top> <font face=verdana size=4 color=blue> Ekstra Kurikuler:<br> <font size=1> <ul type=circle> <li>Seni Bela Diri Tapak Suci <li>Keagamaan <li>Sepak Bola <li>Bola Basket <li>Kepenyiaran </ul> </td> </tr> </body> </html>

Hasilnya adalah sebagai berikut:

WAHLES.RPL.1.1

42

7. Form Html Digunakan untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di server. User menerima informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO BUTTON, PUSH BUTTON, LIST MENU dan lainnya. Sintak penulisan form adalah:
<form method=post atau get action=program_pemroses> elemen-elemen FORM </form>

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut ACTION berisi URL dari program yang dipanggil oleh form tersebut. TextBOX Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara penulisannya adalah:
<input type=text name=textbox1 size=xx value>

Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox), NAME adalah identifikasi/penamaan elemen ini untuk dibaca oleh program pemroses nantinya. Atribut VALUE untuk memberi nilai suatu masukan. Sedangkan atribut SIZE digunakan untuk menentukan panjang atau banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang
WAHLES.RPL.1.1

43

ditulis user dalam textbox, dapat menggunakan atribut TYPE=PASSWORD, sehingga tampilan dalam textbox menjadi karakter *. contoh1_17.html
<html> <head> <title>::: Form Input dengan TEXTBOX:::</title> </head> <body> <h3>BUKU TAMU</h3> <form method=post> <table border=0> <tr> <td width=70>Nama</td> <td width=10>:</td> <td width=30><input type=text name=nama size=30></td> </tr> <tr> <td width=70>Alamat</td> <td width=10>:</td> <td width=30> <input type=text name=alamat size=30></td> </tr> <tr> <td width=70>Homepage</td> <td width=10>:</td> <td width=30> <input type=text name=page size=30></td> </tr> </table> </form> </body> </html>

Tampilan untuk contoh diatas adalah:

CHECKBOX
WAHLES.RPL.1.1

44

CheckBox digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat memilih salah satu, lebih dari satu pilihan atau tidak memilih sama sekali. Tata cara penulisannya adalah:
<input type=checkbox name=checkbox1 value=on atau off checked>Pilihan 1

Dimana attribut TYPE menentukan jenis masukan yang berupa CHECKBOX, NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih (ON) atau tidak (OFF). Parameter CHECKED menentukan apakah checkBOX sedang dicentang atau tidak contoh1_18.html
<html> <head> <title>::: Form Input dengan CHECKBOX:::</title> </head> <body> <form method=post> Pilih Program Keahlian Anda<br> <h3>Daftar Program Keahlian Jurusan TIK SMKN 1 Kota Bekasi </h3> <p> <input type=checkbox name=c1 checked>Rekayasa Perangkat Lunak<br> <input type=checkbox name=c2>Multimedia<br> <input type=checkbox name=c3>Teknik Komputer dan Jaringan<br> </form> </body> </html>

Hasil contoh diatas adalah sebagai berikut:

WAHLES.RPL.1.1

45

RADIO Button Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan tersebut sedang diaktifkan, VALUE adalah harga dari pilihan contoh1_19.html
<html> <head> <title>::: Form Input dengan RADIO Button:::</title> </head> <body> <form method=post> <h3>Pilih Salah satu<br> Pendidikan Terakhir Anda: </h3> <input type=radio value="SD" checked name=sekolah>SD<br> <input type=radio value="SLTP" name=sekolah>SLTP<br> <input type=radio value="SMU" name=sekolah>SMU<br> <input type=radio value="S1" name= sekolah >S1<br> <input type=radio value="S2" name= sekolah >S2<br> </form> </body> </html>

Hasil contoh program tersebut adalah:

DROP- DOWN Menu Digunakan untuk membuat menu pilihan. Cara menuliskannya adalah:
<select name=menu1> WAHLES.RPL.1.1

46

<option value-pilihan1>Pilihan 1 <option value-pilihan2>Pilihan 2 <option value-pilihan3>Pilihan 3 dst </select>

Tag OPTION berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia. Setiap pilihan ditentukan isinya dengan parameter VALUE. contoh1_20.html
<html> <head> <title>::: Form Input dengan DROP-DOWN Menu:::</title> </head> <body> <form method=post> <h3>Pilih Salah satu<br> Jurusan: </h3> <select name=jurusan> <option value=TI selected>Teknik Informatika</option> <option value=MO>Mesin Otomotif</option> <option value=MP>Mesin Perkakas</option> <option value=ML>Mesin Las</option> </select> </form> </body> </html>

Tampilan contoh diatas adalah sebagai berikut:

WAHLES.RPL.1.1

47

TEXT Area Elemen ini digunakan untuk menampilkan masukan berupa textbox yang mampu menerima masukan berupa string lebih dari satu baris. Sintaknya adalah:
<textarea name=textbox1 rows=xx cols=xx>Isi Awal </textarea>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris textbox ini dalam banyaknya karakter contoh1_21.html
<html> <head> <title>::: Form Input dengan Text Area:::</title> </head> <body> <form method=post> <h5>Kirimkan kritik dan saran Anda</h5> <textarea name=textbox1 rows=5 cols=40> </textarea> </form> </body> </html>

Tampilan contoh diatas adalah sebagai berikut:

WAHLES.RPL.1.1

48

Elemen Tombol Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk mengulangi/mengosongkan isian form atau NORMAL yang tidak berfungsi apapun sebelum kita mendefinisikan sebuah fungsi untuknya. Format penulisannya adalah:
<input type=submit value=OK name=tombol1>untuk tombol SUBMIT <input type=reset value=reset name=tombol2>untuk tombol RESET

contoh1_22.html
<html> <head> <title>::: Buku Tamu:::</title> </head> <body> <h3><p align=center>BUKU TAMU</p></h3> <form method=post> <table border=0 align=center width=500> <tr> <td width=11%>Nama</td> <td width=3%>:</td> <td width=86%><input type=text name=nama size=20></td> </tr> <tr> <td width=11%>Alamat</td> <td width=3%>:</td> <td width=86%> <input type=text name=alamat size=20></td> </tr> <tr> <td width=11%>Email</td> <td width=3%>:</td> <td width=86%><input type=text name=email size=20></td> </tr> <tr> <td width=11%>Website</td> <td width=3%>:</td> <td width=86%> <input type=text name=pg size=20></td> </tr> <tr> <td width=11% valign=top>Homepageku</td> <td width=3% valign=top>:</td> <td width=86%> <input type=radio value=hebat name=saran checked> WAHLES.RPL.1.1

49

Bagus Sekali<br> <input type=radio value=bagus name=saran> Bagus<br> <input type=radio value=biasa name=saran> Biasa Aja<br></td> </tr> </table> <p align=center> <input type=submit value=kirim name=b1> <input type=reset value=batal name=b2> <hr> </form> </body> </html>

Hasilnya adalah:

c.

Rangkuman
Setelah kita mempelajari materi pertama ini, kita dapat menarik kesimpulan, ternyata membuat/membangun halaman web itu mudah sekali. Dengan hanya bermodalkan editor teks biasa, kita sudah dapat belajar banyak tentang tag-tag html yang digunakan untuk membuat sebuah halaman web. Struktur HTML secara garis besar dibagi menjadi <head> dan <body>. Di bagian <body> kita dapat menuliskan semua kode html yang akan kita gunakan untuk membangun halaman web, yaitu diantaranya pengaturan teks, pengaturan image, hyperlink, pembuatan table dan pembuatan frame.
WAHLES.RPL.1.1

50

Lanjutkan ke materi berikutnya agar pengetahuan anda dalam membangun halaman web lebih banyak lagi.

d.

Tugas
1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang telah anda kunjungi. Yang harus anda amati adalah meliputi:

a. Layout,
Seberapa besar daya tarik dan unsur seni dari web yang anda amati. Bagaimana model layout web tersebut, berbentuk tabel atau frame?

b. Content/Isi , Apa saja isi dari web tersebut.

Silahkan catat hasil pengamatan anda. 2. Teliti profil sebuah organisasi/lembaga (misal: KUD, Pemerintah Kota, Sekolah dan lain-lain). Catat semua hasil penelitian anda. Dari hasil penelitian anda, silahkan buat website statis yang isinya adalah profile dari yang anda teliti. Bila perlu tawarkan website buatan anda kepada organisasi/lembaga tersebut.

3. Silahkan cari dan download tutorial berbahasa Inggris di Internet yang

berhubungan dengan web programming, (misalnya PHP, ASP dan lain-lain).

e.

Tes Formatif 1. Jelaskan masing-masing fungsi dari tag-tag berikut:

a) b) c) d)

<h1> <p> <br> <hr>

2. Apakah fungsi dari link, form dan frame dalam pembuatan web? 3. Apa perbedaan frame dan frameset? 4. Apa perbedaan checkbox dan radio button? 5. Apakah fungsi dari tombol Submit dan Reset?

6. Buatlah halaman web seperti terlihat di gambar. Dalam gambar tersebut, jika
ada penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda.

WAHLES.RPL.1.1

51

f.

Kunci Jawaban Formatif 1

1. Fungsi dari tag: a. <h1> b. <p> c. <br> d. <hr> : : : : digunakan untuk mengatur ukuran huruf pada header dengan angka 1 berarti mempunyai ukuran paling besar. digunakan untuk berpindah alinea atau membuat paragraf baru Digunakan untuk pindah baris baru. digunakan untuk membuat garis horisontal

2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain, dapat berupa teks maupun gambar. Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi dengan pengunjung) karena form dapat berupa model isian yang harus diisi pengunjung dan akan dibca oleh pemilik web. Frame, merupakan pembagi halaman. 3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya. 4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web
WAHLES.RPL.1.1

52

dapat memilih beberapa dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak menentukan satu pilihan saja.

5. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan

dalam form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam form. 6. Kode untuk halaman web tersebut adalah:
<html> <head> <title>::: Form Order:::</title> </head> <body> <font face=verdana> <h3 align=center>FORM ORDER BARANG <form action="mailto:[email protected]" method=post> <table border=2 cellpadding=1> <tr> <td rowspan=2><font size=2>Isikan Data-data Anda</td> <td><input type=text name="NamaDepan" size=20></td> <td><input type=text name="NamaBelakang" size=20></td> <td><input type=text name="Usia" size=3></td> </tr> <tr> <td><font size="-2">Nama Depan</font></td> <td><font size="-2">Nama Akhir</font></td> <td><font size="-2">Umur</font></td> </tr> <tr> <td rowspan=3><font size=2>Bagaimana Menghubungi Anda?</td> <td colspan=4 valign=top><font size=2>Alamat Rumah: <textarea name="Jalan" rows=2 cols=30></textarea></td> </tr> <tr> <td colspan=2><font size=2>Kota: <input type=text name="kota" size=20></td> <td colspan=2><font size=2>Negara: <input type=text name="negara" size=25></td> </tr> <tr> <td colspan=2><font size=2>Kode Pos: <input type=text name="kodepos" size=10></td> <td colspan=2><font size=2>Nomor Telepon <input type=text name="telp1" size=4> <input type=text name="telp2" size=11></td> </tr> <tr> <td><font size=2>Credit Card WAHLES.RPL.1.1

53

<input type=radio name=CC value=Visa checked>Visa <input type=radio name=CC value=MasterCard checked>M/C</td> <td colspan=2 align=center> <input type=text name=nomorCC1 size=4> <input type=text name=nomorCC2 size=4> <input type=text name=nomorCC3 size=4> <input type=text name=nomorCC4 size=4></td> <td colspan=2 align=center><font size=2>Tanggal Berakhir: <input type=text name=blnakhir size=2> <input type=text name=thnakhir size=2></td> </tr> <tr> <td><font size=2>Jenis Barang </td> <td colspan=4><font size=2> <select multiple name=Merchandise size=1> <option selected>Pentium IV <option>Pentium III <option>Monitor <option>CD-ROM <option>Kamera Digital <option>Printer <option>Mouse <option>Scanner </select></td> </tr> <tr> <td align=center colspan=5> <h1>Terimakasih Atas Order Anda!</h1> </td> </tr> </table><p> <center> <input type="submit" value="Kirim"> <input type="Reset" value="Hapus Isian"> </center> </form> </body> </html>

g. Lembar Kerja 1
Alat dan Bahan PC (Personal Computer) yang telah dilengkapi dengan web browser dan editor teks Notepad.

WAHLES.RPL.1.1

54

Kesehatan dan Keselamatan Kerja 1) Berdoalah sebelum memulai kegiatan belajar. 2) Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar. 3) Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.

4) Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik

di dekat komputer (magnet, handphone, dan sebagainya).

5) Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain

game.
6) Setelah selesai, matikan komputer sesuai prosedur yang aman! Langkah Kerja 1) Siapkanlah semua peralatan yang akan digunakan! 2) Periksa semua kabel penghubung pada PC.

3) Nyalakan PC dan jalankan program editor teks notepad dan web browser
Internet Explorer.

4) Kerjakan Tugas 1 dan Tes Formatif 1 di atas. 5) Apabila menemui kesulitan dalam memahami materi yang ada, segera
tanyakan kepada instruktur. 6) Setelah selesai, matikan komputer dan rapikan seperti semula.

WAHLES.RPL.1.1

55

2. Kegiatan Belajar 2:
Membangun halaman web dengan bahasa pemrograman berbasis web

a. Tujuan Kegiatan Pemelajaran

1) Peserta diklat mampu mengenali objek-objek web, tag-tag HTML dan scriptscript pada pemrgraman berbasis web. 2) Peserta diklat mampu menggunakan dan menerapkan fungsi dan operator algoritma pemrograman pada aplikasi yang dibuat

3) Peserta diklat mampu menentukan struktur data pada aplikasi yang dibuat 4) Peserta diklat mampu menentukan basis data pada aplikasi yang dibuat
5) Peserta diklat mampu melakukan kombinasi objek-objek web, tag-tag HTML dan script yang lain untuk membuat halaman-halaman web. 6) Peserta diklat mampu membangun halaman web dengan bahasa pemrograman berbasis web

b. Uraian Materi 2
1. Pendahuluan Website dapat dibedakan menjadi dua yaitu Web Statis dan Web Dinamis. Web Statis adalah web yang berisi informasi-informasi yang bersifat statis (tetap), sedangkan Web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user. Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan yang banyak mengandung grafis sehingga untuk merancang web statis tidak diperlukan kemampuan pemrograman yang handal. Yang dibutuhkan hanya kemampuan design grafis/web dan cita rasa seni belaka. Sedangkan untuk web dinamis yang banyak ditonjolkan adalah pengolahan data sehingga dibutuhkan kemampuan dalam pemrograman web. Ada dua jenis pemrograman web, yaitu Server Side Programming dan Client

Side Programming. Pada Server Side Programming, semua sintaks dan

perintah program yang diberikan akan dijalankan/diproses di Web Server, kemudian hasilnya dikirimkan ke browser pengguna dalam bentuk HTML biasa. Sehingga pengguna tidak dapat melihat kode asli yang ditulis dalam bentuk server side programming tersebut. Yang tergolong dalam server side programming seperti: CGI/Perl, Active Server Pages, Java Server Page, PHP, ColdFussion dan lain-lain. Sebaliknya, pada Client Side Programming semua sintaks dan perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, script tersebut akan diambil dari web server

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

kemudian dijalankan di web browser yang bersangkutan. Contoh dari client side programming seperti: JavaScript, VbScript, HTML. 2. Pengenalan PHP PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada serverside. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja. Ketika seorang pengguna internet membuka suatu situs yang menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server yang bersangkutan akan memproses semua perintah PHP di server lalu mengirimkan hasilnya dalam format HTML ke web server pengguna internet tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser pengguna. PHP merupakan software yang open source bebas. Jadi anda dapat merubah

source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi (Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache dll). Adapun kelebihan-kelebihan dari PHP yaitu:

Mudah dibuat dan berkecepatan tinggi PHP dapat berjalan lintas platform, yaitu dapat berjalan dalam sistem
operasi dan web server apapun.

Dapat digunakan secara gratis. Termasuk bahasa yang embedded, yakni dapat diletakkan dalam tag
HTML.

Termasuk server side programming, sehingga kode asli/source code PHP

tidak dapat dlihat di browser pengguna, yang terlihat hanya kode dalam format HTML.

Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,

seperti misalnya untuk keperluan database connection. PHP dapat melakukan koneksi dengan berbagai database seperti MySQL, Oracle, Sybase, mSQL, Solid, Generic ODBC, Postgres SQL, dBase, Direct MSSQL, Velocis, IBM DB2, Interbase, Frontbase, Empress, dan semua database yang mempunyai profider ODBC seperti misalnya MS Access dan lain-lain.

PHP dapat melakukan semua aplikasi program CGI, seperti mengambil

nilai form, menghasilkan halaman web yang dinamis, mengirimkan dan menerima cookies.

PHP juga mendukung komunikasi dengan layanan lain melalui protokol

IMAP, SNMP, NNTP, POP3 dan HTTP dan lainnya.
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

3. Instalasi Program Untuk menjalankan PHP, dibutuhkan hal-hal berikut: Web Server Program aplikasi PHP Database server Program Aplikasi Database Ke-empat komponen tersebut mutlak harus ada, jadi sebelum melakukan pemrograman dan menjalankan PHP, komponen-komponen diatas harus dinstall terlebih dahulu. Untuk keempat software tersebut anda bebas memilih menurut yang anda suka. Namun dalam modul ini yang akan dibahas hanya PhpTriad saja. Kenapa PhpTriad? Karena disamping software tersebut adalah gratis juga karena dalam satu paket program ini sudah terdiri dari 4 software yang kita butuhkan, yaitu web server (dalam hal ini, Apache), Program PHP, Database Server MySQL dan program aplikasi MySQL. Penginstalan PhpTriad sangat mudah, sekali install semua program tersebut secara otomatis terinstall juga. Cara instalasi PhpTriad adalah sebagai berikut: a. Persiapkan master program PhpTriad. Jika belum ada, silahkan download di internet. Anda dapat meminta bantuan search engine untuk mencari program PhpTriad atau anda dapat mengunjungi situs http://www.download.com. b. Setelah proses download selesai, buka windows explorer kemudian double klik icon PhpTriad2-2-1.exe dan ikuti petunjuk yang diberikan.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Proses instalasi ini pada dasarnya akan mengekstrak file-file ke direktori tertentu, yaitu c:\apache.

c. Setelah itu muncul jendela instalasi seperti pada gambar. Kotak licence
agreement tersebut merupakan kotak yang harus dibaca terlebih dahulu
karena berisikan pengertianpengertian umum mengenai perangkat tuju lisensi lunak dengan

ini. Jika anda selisensi yang diberikan, baru kita bisa melanjutkan instalasi dengan klik tombol I Agree. Proses instalasi akan berjalan selama beberapa menit. Tunggu proses tersebut hingga selesai.

d. Setelah proses selesai akan muncul pesan Setup Completed seperti pada
gambar dibawah ini. Klik tombol close untuk mengakhiri proses instalasi.

e. Selanjutnya lakukan beberapa langkah untuk mengaktifkan semua

komponen PhpTriad dalam komputer anda. Langkah pertama, jalankan PHPTriad Control Panel , yang dapat dilakukan dari Start Menu Program PHP Triad PHPTriad Control Panel. Atau melalui Internet Explorer, ketikkan http://localhost:1005/ pada address bar. PHPTriad Control Panel digunakan untuk melakukan pengaturan terhadap berbagai fasilitas yang ada pada PhpTriad. Setelah control panel dijalankan, akan muncul tampilan seperti pada gambar dibawah ini.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

f. Setelah PhpTriad Control Panel aktif, lakukan langkah sebagai berikut:

Klik Install Apache as Service .

Proses ini akan melakukan instalasi Apache sebagai service software.

Klik Start Apache .

Proses ini akan melakukan aktifasi Apache sebagai webserver.

Klik Start MySQL .

Pilih versi sistem operasi yang aktif dan sesuaikan dengan versi yang ada pada komputer anda.

Klik Open Site w/ default Browser .

Bagian ini digunakan untuk mengecek apakah PHP sebagai sebuah service sudah dapat digunakan Jika berhasil, maka akan muncul tampilan sebagai berikut:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

g. Langkah selanjutnya yang perlu anda lakukan adalah mengubah atau

mengatur direktori/folder default untuk dokumen anda. Ini dilakukan agar ketika kita membuka Internet Explorer dan mengetikkan http://localhost pada address bar, maka yang akan dibuka adalah

document root yang posisinya di folder yang telah kita tentukan. Jika tidak
kita atur, maka default untuk document root adalah di direktori C:\apache\htdocs . Artinya, dokumen yang diakses secara otomatis oleh browser ketika memanggil localhost adalah dokumen-dokumen yang berada pada folder tersebut. Dan secara otomatis pula, file yang pertama kali dijalankan adalah file yang memiliki nama index.html, index.htm atau index.php yang terdapat dalam folder tersebut. Untuk mengatur document root, yang perlu anda lakukan adalah: Buat direktori/folder baru yang akan kita jadikan document root. Misalnya: c:\latihan . Jalankan program aplikasi teks editor Notepad. Kemudian buka file httpd.conf yang terletak di c:\apache\conf . Cari teks DocumentRoot C:\Apache\htdocs kemudian ganti teks tersebut dengan DocumentRoot C:\Latihan . Simpan file ini dan tutup kembali notepad anda. Sekarang anda bisa membuat file-file PHP yang disimpan dalam direktori menurut selera anda sendiri. atau

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

h. Langkah terakhir yang tidak kalah pentingnya adalah mengaktifkan

MySQL. Jalankan windows explorer kemudian masuk ke direktori/folder C:\apache\mysql\bin dan cari file winmysqladmin.exe. Jalankan file ini untuk mengaktifkan MySql. Jika file ini belum pernah dijalankan sebelumnya, maka akan muncul window form yang meminta ke anda agar memasukkan nama user dan password. Isilah sesuai dengan keinginan anda dan lupa sendiri jangan dicatat

agar anda tidak melupakannya. Setelah ok. anda Dan

mengisinya, klik winmysql akan segera aktif (terlihat di taskbar sebelah kanan dengan icon berwarna hijau, jika berwarna merah berarti tidak jalan) i. Ok, proses instalasi semua software yang kita butuhkan sekarang telah selesai. Dan sekarang mari kita lanjutkan ke materi berikutnya.

4. Penulisan Script PHP

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Pastikan web server dan skrip PHP anda telah berjalan dengan baik sebelum anda memulai pemrograman PHP. Untuk membuat web dengan script PHP, cukup anda persiapkan editor teks. Fungsi-fungsi yang ada di PHP uncase sensitive , tetapi variabelnya case sensitive (membedakan huruf besar dan kecil). Script PHP diawali dengan tanda lebih kecil ( < ) dan diakhiri dengan tanda lebih besar ( > ). Ada tiga cara untuk menuliskan script PHP yaitu:
<? Script PHP ?> <?php Script PHP ?> <script language=php> Script PHP </script>

Hal-hal yang harus diperhatikan dalam penulisan script php, yaitu:

Script PHP harus disimpan dengan ekstensi PHP . Format penulisannya

adalah namafile.php, atau namafile.php3 atau namafile.php4.

Setiap instruksi dipisahkan oleh tanda titik koma (;). Setiap baris script isi harus didahului pernyataan cetak yang dibedakan
menjadi dua, yaitu Print dan Echo .

Penulisan komentar/comment didahului dengan /* dan diakhiri dengan

*/. Atau diawali dengan tanda //. Sintaknya adalah sebagai berikut:
/* komentar */ // komentar # komentar

Karakter adalah semua bentuk huruf, angka, spasi, tanda kontrol atau simbol yang terdapat dalam tombol keyboard.

5. Variable
Variabel digunakan untuk menyimpan data sementara dan nilainya bisa berubah-ubah setiap kali program dijalankan. Dalam PHP setiap nama variable diawali tanda dollar ($) dan diikuti dengan nama variabelnya, tidak memandang data tersebut apakah integer, real maupun string, PHP otomatis akan mengkonversi data menurut tipenya. Misalnya nama variable a dalam PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

program dan tergantung pada konteks yang digunakan. Aturan penamaan variabel dalam PHP:

Diawali dengan tanda dolar ($) Penamaan variabel bersifat case sensitive Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru dapat diikuti dengan beberapa huruf atau angka maupun garis bawah yang panjangnya tidak terbatas.

Tidak boleh menggunakan tanda baca. Tidak boleh menggunakan reserved word PHP seperti misalnya echo,

print, dan lain-lain.

Variabel dalam PHP tidak harus dideklarasikan terlebih dahulu sebelum digunakan. Contoh-contoh penulisan variabel: Benar $variabel $_pilih $te93 $ini_itu contoh2_1.php
<html> <head> <title>Variabel dalam PHP</title> <body> <?php //variabel bertipe integer $a="5"; //variabel bertipe real $b="2.5"; //variabel bertipe string $komentar="Selamat Datang di PHP"; echo ("Nilai variabel a adalah = $a <br>"); //variabel bertipe integer echo ("Nilai variabel b adalah = $b <br>"); //variabel bertipe real echo ("Nilai variabel komentar adalah = $komentar<br>"); //variabel bertipe string $hasil=$a+$b; echo ("Hasil jumlah a dan b adalah = $hasil <br>"); //variabel bertipe double $tgl = date("d F Y"); //variabel bertipe tanggal $nama = "SMK PGRI 3 Malang"; $garis= "====================================="; echo "<p>"; echo $garis."<br>"; echo $komentar. " Di Lab ". $nama. "<br>Belajar dengan giat ya.... <br>"; echo $garis."<br>"; echo "Tanggal ".$tgl; ?>

Salah $var!abel $-pilih $93te $ini-itu

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

hasilnya adalah:

6. Konstanta Konstanta adalah variabel yang nilainya tetap. Sintak:

Define (nama_konstanta,nilai_konstanta);

Contoh: <html> <head> </head> <body> <? Define (kampus,SMK PGRI 3 Malang); Echo kampus; ?> </body> </html>

7. Type Data PHP mengenal 4 tipe data skalar dan 2 tipe data compound. Tipe data skalar adalah tipe data integer, floating point, string dan boolean. Sedangkan 2 tipe data compound adalah array dan object. yaitu:

a. Integer, tipe data yang menyatakan bilangan bulat. b. Floating point/double, tipe data yang menyatakan bilangan real/pecahan c. String, menyatakan tipe data teks yang berisi kumpulan beberapa karakter
d. Boolean, tipe data logika yang memiliki nilai true dan false.

e. Array adalah tipe data terstruktur yang berguna untuk menyimpan

sejumlah data yang bertipe sama.

f. Objek, merupakan instansiasi dari suatu class.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

8. Konversi Type Data

PHP menyediakan perintah untuk melakukan konversi tipe data ke tipe data yang lain dengan menggunakan perintah sebagai berikut: settype(value,datatype) dimana: - value adalah nilai yang akan dikonversikan - datatype adalah tipe data yang dikonversikan Perhatikan contoh berikut: contoh2_2.php
<html> <head> <title>.:: Konversi Type Data::.</title> </head> <body> <font face=tahoma size=2> <?php $bayar="500.77 Rupiah"; print ("Tipe Data String: $bayar <br> \n"); settype($bayar,"double"); print ("Tipe Data Double: $bayar <br> \n"); settype($bayar,"integer"); print ("Tipe Data Integer: $bayar <br> \n"); ?> </body> </html>

Hasil dari script diatas adalah:

9. Operator Operator adalah simbol/tanda yang digunakan untuk melakukan operasioperasi matematis atau operasi string. Sedangkan operand adalah data yang dioperasikan atau dimanipulasi. Operator dapat dikelompokkan dalam 4 kategori, yaitu:
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

a. Operator Aritmatika/Arithmetic Operator b. Operator Penugasan/Assignment Operator c. Operator Pembanding/Comparison Operator d. Operator Logika/Logical Operator Operator Aritmatika/Arithmetic Operator Adalah operator yang digunakan dalam operasi matematika. Yang termasuk operator ini adalah:
Operator + * / % ++ -Operasi Penjumlahan Pengurangan Perkalian Pembagian Modulus Increment 1 Decrement 1

Operator Penugasan/Assignment Operator Operator penugasan berfungsi untuk memberikan nilai ke suatu variabel atau variabel ke variabel. Simbol operator ini adalah sama dengan (=). Daftar operator penugasan seperti dalam tabel berikut: Operator
+= -= .= /= %= &=

Fungsi
Untuk menambah nilai variabel disebelah kiri dengan nilai sebelah kanan Untuk mengurangi nilai variabel disebelah kiri dengan nilai disebelah kanan Untuk melakukan operasi penggabungan (concatenation) antara variabel disebelah kiri dengan nilai disebelah kanan Untuk membagi nilai variabel di sebelah kiri dengan nilai sebelah kanan Sisa hasil bagi antara nilai variabel disebelah kiri dengan nilai disebelah kanan Untuk melakukan operasi logika AND antara nilai variabel disebelah kiri dengan nilai disebelah kanan Untuk melakukan operasi logika OR antara nilai variabel disebelah kiri dengan nilai disebelah kanan Untuk melakukan operasi logika XOR antara nilai variabel disebelah kiri dengan nilai disebelah kanan

Contoh
x+=5; x=x+5; x-=5; x=x-5; x.=php; x=x.php; x/=5; x=x/5; X%=5; x=x%5; X&=5; x=x&5; X|=5; x=x|5; X^=5; x=x^5;

|=

^=

Operator Pembanding/Comparison Operator Operator ini disebut juga operator relasional, yaitu operator yang digunakan untuk membandingkan antara dua atau lebih operand (nilai,

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

variabel, atau pernyataan) dan menghasilkan nilai True atau False . Operator-operator yang termasuk operator pembanding adalah: Operator
==

Fungsi
Sama Dengan

Contoh
$a==$b; true, jika $a sama dengan $b $a===$b; true, jika $a sama dengan $b, dan keduanya mempunyai tipe data yang sama; $a!=$b; atau $a<>$b; true, jika $a tidak sama dengan $b; $a!==$b; true, jika $a tidak sama dengan $b, atau keduanya tidak memiliki tipe data yang sama; $a<$b; true, jika $a kurang dari $b; $a>$b; true, jika $a lebih besar dari $b; $a<=$b; true, jika $a kurang dari atau sama dengan $b; $a>=$b; true, jika $a lebih dari atau sama dengan $b;

===

Identik

!= atau <>

Tidak Sama Dengan

!==

Tidak Identik

<

Kurang Dari

>

Lebih Dari

<=

Kurang Dari atau Sama Dengan

>=

Lebih Dari atau Sama Dengan

Operator Logika/Logical Operator Operator logika digunakan untuk membandingkan dua atau lebih pernyataan dan menghasilkan nilai true atau false. Operator logika sering digunakan pada struktur kendali. Yang termasuk operator logika adalah: Operator
&& atau AND || atau OR

Fungsi
Operasi Logika AND

Contoh
$a && $b; true, jika $a dan $b bernilai true $a || $b; atau $a or $b; true, jika $a atau $b, salah satunya bernilai true; $a xor $b; true, jika $a atau $b bernilai true dan salah satunya bernilai false; !$a; true, jika $a tidak benilai true;

Operasi Logika OR

XOR !

Operasi Logika XOR Operasi Logika NOT

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

 Operator Bitwise Operator bitwise digunakan untuk operasi bilangan biner. Operatoroperator yang termasuk operator bitwise adalah: Operator
& | ^ ~ << >>

Arti
Operator AND Operator OR Operator XOR Operator NOT Operator Shift Left (geser kiri) Operator Shift Right (geser kanan)

Operator Increment/Decrement Pre/Post increment dan decrement masing-masing adalah penambahan dan pengurangan satu. Apabila operator diletakkan sebelum variabel, misal ++$i atau --i maka nilai $i akan ditambahkan atau dikurangkan 1 sebelum keseluruhan operasi dalam ekspresi dikerjakan dan sebaliknya apabila operator diletakkan setelah variabel, misal $i++ atau $i-- maka nilai $i akan ditambah atau dikurangi 1 setelah operasi dalam ekspresi dikerjakan.
Operator ++ -Operasi Pre/Post Increment Pre/Post Decrement Penggunaan ++$a atau $a++ --$b atau $b--

Operator String Hanya ada satu operator string, yaitu operator concatenation (.), yakni menggabungkan dua buah atau lebih string. Contoh
<?php $a = Hallo; $b = $a.Selamat Dtang di PHP; //$b berisikan Hallo Selamat datang di PHP ?>

Kedudukan Operator Setiap operator mempunyai kedudukan (operator precedence) dan prioritas masing-masing yang digunakan untuk menentukan operator manakah yang akan dieksekusi terlebih dahulu bila dalam sebuah pernyataan terdapat dua atau lebih operator. Contoh, misalnya ada persamaan matematika x=2+5*7. Maka nilai x adalah 37 bukan 49. Hal ini karena kedudukan operator perkalian lebih tinggi dari pada operator penjumlahan sehingga 5 harus dikalikan terlebih dahulu dengan 7, baru dijumlah dengan 2; bukan 2 ditambah 5 baru dikali 7. Kedudukan operator-operator tersebut seperti terlihat pada tabel berikut:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Prioritas
Tertinggi (), {}

Operator
~, !, ++, --, $, & *, ?, % +, <>, <=, >= ==, ===, !=, !== & ^ ! && || =, +=, -=, *=, /=, &=, |=, ^=, .= AND (&&) XOR (||)

Terendah

OR

10. Dasar-dasar Struktur Program Input- Output Struktur yang paling dasar dalam sebuah pemrograman adalah struktur inputoutput. Input merupakan interface untuk memasukkan data, kemudian data di olah dan selanjutnya hasil pengolahan ditampilkan pada komponen output.

Input Input- Output Sederhana

Proses

Output

Sebagai contoh, kita akan membuat program sederhana untuk menghitung luas segitiga berdasarkan flowchart berikut: Mulai

Input Alas Input Tinggi Output Cetak Luas

Proses Hitung Luas Segitiga Luas=0,5 * Alas * Tinggi

Selesai

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

contoh2_3.php
<html> <head> <title>.:: Latihan membuat input Output::.</title> </head> <body> <font face=verdana size=2> <? //Mendeklarasikan data input $alas=20; $tinggi=5; //Proses hitung luas segitiga $luassegitiga=0.5*$alas* $tinggi; //Cetak hasil echo "Besar Alas = $alas <br>"; echo "Besar Tinggi = $tinggi <br>"; echo "Luas Segi Tiga Adalah = $luassegitiga<br>"; ?> </body> </html>

Jika program tersebut dijalankan maka akan didapatkan hasil seperti pada gambar diatas.

Input- Output dengan Form

Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat program yang lebih interaktif. Sebagai contoh, program di contoh 2.3 akan modifikasi sehingga lebih interaktif. contoh2_4.php
<html> <head> <title>.:: Menghitung Luas Segi Tiga::.</title> </head> <body> <font face=verdana> <center><h3><u>Menghitung Luas Segitiga</u></h3></center> <form action=luassegitiga.php method=post> <table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellspacing=5> <tr> <td>Masukkan Alas</td> <td>:</td> <td><input type=text name=alas size=10></td> </tr> <tr> <td>Masukkan Tinggi</td> <td>:</td> <td><input type=text name=tinggi size=10></td> </tr>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

<tr> <td colspan=3 align=center><input type=submit value=hitung></td> </tr> </table> </form> </body> </html>

Ketika tombol HITUNG diklik, program memanggil file luassegitiga.php (perhatikan pada tag
<form action=luassegitiga.php method=post>)

yang akan

digunakan untuk menampung hasil perhitungan. Maka buat lagi file dan beri nama luassegitiga.php dan simpan dalam satu direktori. File luassegitiga.php
<html> <head> <title>.:: Hasil Perhitungan Luas Segi Tiga::.</title> </head> <body> <font face=verdana> <center> <h3><u>Luas Segitiga</u></h3> </center> <form action=contoh2_4.php method=post> <? $luas=0.5*$alas*$tinggi; echo "<table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellpadding=0>"; echo "<tr>"; echo "<td>Alas</td>"; echo "<td>:</td>"; echo "<td>$alas</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Tinggi</td>"; echo "<td>:</td>"; echo "<td>$tinggi</td>"; echo "</tr>"; echo "<tr>"; echo "<td>Luas Segi Tiga</td>"; echo "<td>:</td>"; echo "<td>$luas</td>"; echo "</tr>"; echo "<tr>"; echo "<td colspan=3 align=center><input type=submit value=ulang></td>"; echo "</tr>"; echo "</table>"; ?> </form> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Hasilnya adalah:

dan tampilan setelah tombol hitung di-klik adalah:

11. Struktur Kontrol/Kendali Statement IF Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat atau sesuai dengan kondisi tertentu. Statement IF dibagi dua,

statement IF tunggal dan statement IF majemuk. Cara penulisan statement

IF tunggal adalah sebagai berikut:
if (kondisi) { statement; }

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Contoh: Mulai

Input Nilai

Apakah nilai > 70 Y Kompeten

Selesai contoh2_5.php
<html> <head> <title>.:: Contoh Seleksi Kondisi::.</title> </head> <body> <font face=verdana size=2> <form action=nilai.php method=post>Masukkan Nilai: <input type=text name=nilai size=2><p> <input type=submit value=Proses> </form> </body> </html>

Untuk memproses file diatas, buat script berikut dan simpan dengan nama nilai.php File nilai.php
<html> <head> <title>.:: Contoh Seleksi Kondisi::.</title> </head> <body> <font face=verdana size=2> <? echo "Nilai Ujian anda: $nilai<br>"; if ($nilai>70) { echo "Anda Kompeten<br>"; } ?> </body> </html>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Untuk statement IF majemuk atau dikenal dengan IF ... ELSE, digunakan jika terdapat lebih dari satu kondisi yang akan dikerjakan. Sintaks struktur IF ... Else adalah sebagai berikut:
if (syarat) { statement } else { statement lain }

atau:
if (syarat pertama) { statement pertama } elseif (syarat kedua) { statement kedua } else { statement lain }

Mulai

Input Nilai

Apakah nilai < 50

Y Tidak Lulus

Apakah nilai < 70

Y Lulus dan Tidak Kompeten Selesai Lulus dan Kompeten

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Sebagai contoh, kita modifikasi file nilai.php pada contoh 2_5 dan simpan dengan nama nilai2.php contoh2_6.php
<html> <head> <title>.:: Contoh Seleksi Kondisi::.</title> </head> <body> <font face=verdana size=2> <form action=nilai2.php method=post> Masukkan Nilai: <input type=text name=nilai size=2><p> <input type=submit value=Proses> </form> </body> </html>

File nilai2.php:
<html> <head> <title>.:: Contoh Seleksi Kondisi::.</title> </head> <body> <font face=verdana size=2> <? echo "Nilai Ujian anda: $nilai<br>"; if ($nilai<50) { echo "Anda Tidak Lulus<br>"; } elseif ($nilai<70) { echo "Anda Lulus Tapi Tidak Kompeten<br>"; } else { echo "Selamat Anda Lulus dan Kompeten"; } ?> </body> </html>

Hasilnya adalah seperti gambar di atas:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Statement SWITCH Statement SWITCH digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. Penggunaan statement SWITCH hampir sama dengan penggunaan statement IF, sehingga bisa digunakan sebagai pengganti statement IF. Untuk Keluar dari suatu blok statement dalam statement switch, dapat mengunakan perintah BREAK Struktur Switch adalah sebagai berikut:
switch (variable) case nilai: statement case nilai: statemant case nilai: statement

contoh2_7.php
<html> <head> <title>.:: Struktur Kendali Switch::.</title> </head> <body> <font face=verdana size=2> <? $dino=date("l"); switch($dino) { case "Monday": $hari="Senin";break; case "Tuesday": $hari="Selasa"; break; case "Wednesday": $hari="Rabu"; break; case "Thursday": $hari="Kamis"; break; case "Friday": $hari="Jumat"; break; case "Saturday": $hari="Sabtu"; break; default: $hari="Minggu"; } echo "<h3>Hari ini adalah hari <u>$hari</u></h3>"; ?> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Latihan- latihan 1. Membuat program penghitung discount Program ini digunakan untuk mengetahui apakah pembeli dapat diskon atau tidak. Besar diskon tersebut mengikuti aturan sebagai berikut: Jika jumlah bayar 50.000 dapat diskon 5%, jika jumlah bayar 100.000 dapat diskon 10%, dan jika jumlah bayar 500.000 dapat diskon 50%. Selain kreteria tersebut, diskonnya adalah 0%. Untuk mengerjakan program tersebut, perhatikan flowchart berikut:
Mulai

Masukkan Jumlah Bayar

JumlahBayar 500000

Y
Diskon=0.5*J umlahBayar JumlahBayar 100000

Y
Diskon=0.1*J umlahBayar JumlahBayar 50000

Y
Diskon=0.05* JumlahBayar Diskon=0

TotalBayar= JumlahBayar-Diskon

Selesai

Dari flowchart tersebut dapat kita buat script programnya, sebagai berikut: contoh2_8.php
<html> <head> <title>.:: Program Menghitung Discount::.</title> </head> <body> <font face=verdana size=2>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

<form>Jumlah Bayar <input type=text name=totalbeli><br><br> <input type=submit value="Hitung Diskon"> </form> <?php if (isset($totalbeli)) { $toyar=intval($totalbeli); $diskon=0; if ($toyar>=500000) $diskon=(0.5*$toyar); else if ($toyar>=100000) $diskon=(0.1*$toyar); else if ($toyar>=50000) $diskon=(0.05*$toyar); else print("Maaf Tidak Ada Diskon <br>\n"); printf("Jumlah Bayar = %d<br>\n",$toyar); printf("Diskon = %d<br>\n",$diskon); $totalbayar=$toyar-$diskon; printf("<b>Total Bayar = %d<br></b>\n",$totalbayar); } ?> </body> </html>

2. Membuat Program kalkulator sederhana Program yang akan buat ini adalah program untuk melakukan beberapa operasi aritmatika, yaitu penjumlahan, pengurangan, perkalian dan pembagian. Setiap operasi yang dilakukan, program akan meminta masukan nilai dua operand yang akan dihitung dalam hal ini adalah A dan

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

B. Program juga akan meminta masukan dari pemakai untuk memilih operasi apa yang akan dilakukan. Perhatikan flowchart berikut:
Mulai

Masukkan Nilai A dan B

Silahkan Pilih Operasi Apa?

Pilihan= Jumlah

Y
C=A+B Pilihan= Kurang

Y
C=A-B Pilihan= Kali

Y
C=A*B C=A/B

Hasil Adalah = C

Selesai

Dari flowchart tersebut, dapat kita buat programmnya sebagai berikut: contoh2_9.php
<html> <head> <title>::: Operasi Aritmatika:::</title> </head> <body> <form action=operasi.php method=post> <center><h3>Operasi Aritmatik A dan B</h3></center> <table align=center bgcolor=#cedadc bordercolor=#cfdbdd> <tr> <td>Masukkan Nilai A </td>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

<td><input type=text name=a size=10></td> </tr> <tr> <td>Masukkan Nilai B </td> <td><input type=text name=b size=10></td> </tr> <tr> <td>Operasi</td> <td> <select name=operasi> <option value=1>Penjumlahan [a+b]</option> <option value=2>Pengurangan [a-b]</option> <option value=3> Perkalian [a*b]</option> <option value=4> Pembagian [a/b]</option> </select> </td> </tr> <tr> <td colspan=2 align=center> <input type=submit

value=hitung></td> </tr> </table> </form> </body> </html>

Sekarang buat satu lagi program yang digunakan untuk memproses hasil setelah ada penekenan tombol hitung. File tersebut simpan dengan nama operasi.php. File operasi.php
<html> <head> <title>Hasil Operasi Aritmatika</title> </head> <body> <? if ($operasi==1) { $c=$a+$b; $oper='[a + b]'; }
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

elseif ($operasi==2) { $c=$a-$b; $oper='[a - b]'; } elseif ($operasi==3) { $c=$a*$b; $oper='[a * b]'; } else { $c=$a/$b; $oper='[a / b]'; } echo "Nilai A adalah = $a dan Nilai B adalah = $b<br>"; echo "Hasil Operasi $oper adalah = $c<br>"; ?> </body> </html>

Statement WHILE Pernyataan ini digunakan untuk mengulangi sebuah perintah sampai jumlah atau kondisi tertentu terpenuhi. Bentuk dasar dari statement While adalah sebagai berikut:
while (syarat) { statement }

Arti dari statemant While adalah memberikan perintah untuk menjalankan statement dibawahnya secara berulang-ulang, selama syaratnya terpenuhi. Perhatikan contoh2_10. Pada contoh tersebut, program digunakan untuk mencari bilangan genap dari 2 sampai dengan batas tertentu sesuai dengan masukan yang diberikan.
Mulai

Masukkan Batasnya?

$genap=0;

$genap < $batas

Y
Selesai $genap=$genap+2
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Bilanga genap dari 2 s/d batas

adalah:$genap

contoh2_10.php
<html> <head> <title>.:: Program Mencari Bilangan Genap::.</title> </head> <body> <font face=verdana size=2> <form>Mencari Bilangan Genap Berapa: <input type=text name=genap><br><br> <input type=submit value="Cari Bilangan Genap"> </form> <?php if (isset($genap)) { $bilgen=intval($genap); echo "Bilangan Genap dari 2 s/d $bilgen adalah: "; echo "<br>"; $gen=0; while ($gen<$genap) { $gen=$gen+2; echo "$gen"; echo " "; } } ?> </body> </html>

Statement FOR Perintah ini digunakan untuk mengulangi perintah dengan jumlah

pengulangan yang sudah diketahui. Pada statement ini perlu dituliskan nilai awal dan nilai akhir varibel penghitung yang secara otomatis akan bertambah atau berkurang setiap kali sebuah pengulangan dilaksanakan. Cara penulisan statement FOR adalah sebagai berikut:
for (Nilai_Awal; Nilai_Akhir; Counter)

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Keterangan: Nilai_Awal : Batas awal perulangan Nilai_Akhir : Batas akhir perulangan Counter : Jumlah kenaikan yang akan ditambakan kepada batas awal hingga mencapai batas akhir

contoh2_11.php
<html> <head> <title>Latihan Perulangan dengan For</title> </head> <body> Tanggal: <select name=tanggal> <option value=0 selected>Tanggal <?php //Bentuk Pilihan tanggal 1 sampai dengan 31 for ($i=1;$i<32;$i++) echo "<option value=$i>$i"; ?> </option> </select> </body> </html> Hasilnya adalah:

Didalam struktur perulangan, terdapat beberapa pernyataan yang digunakan untuk merubah jalannya eksekusi terhadap proses looping yang dilakukan. Pernyataan-pernyataan tersebut adalah:

break, pernyataan ini digunakan untuk keluar dari suatu perulangan.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Sintaknya adalah:
break(n)

Dengan n adalah parameter opsional yang nilainya digunakan jika terdapat nested loop. Pernyataan break akan mengikuti urutan tingkatan dimulai dari tingkat paling dalam menuju tingkat terluar.

Continue , pernyataan ini digunakan untuk melewati proses iterasi dan

melanjutkan dengan iterasi berikutnya.

Exit, pernyataan ini digunakan untuk mengakhiri seluruh proses eksekusi

yang sedang berjalan. 12. Procedure dan Fungsi Dalam pembuatan program sering kali dibutuhkan beberapa perintah yang digunakan berulang kali. Hal ini dapat dihindari dengan subrutin. Subrutin adalah sekumpulan perintah yang diberi nama dan dapat dipanggil sewaktuwaktu. Dalam pemrograman terdapat dua subrutin, yaitu prosedur dan fungsi. Standar penulisan fungsi adalah:
function nama_fungsi(argumen) { kode perintah

} contoh:
function operasi_jumlah($x,$y) { z=x+y; echo (z); }

Beberapa hal yang perlu diperhatikan dalam pembuatan fungsi, yaitu: Nama fungsi tidak boleh sama dengan nama-nama fungsi yang sudah ada dalam PHP. Hanya boleh terdiri dari huruf, angka dan garis bawah Tidak boleh diawali dengan angka contoh2_12.php
<html> <head> <title>.:: Latihan Membuat Fungsi::.</title> </head> <body> <font face=tahoma size=2> <? //Fungsi yg dipanggil function operasi_jumlah($a,$b)
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

{ $c=$a+$b; echo ("Hasil $a + $b = $c"); } //Program Utama //Untuk Memanggil Fungsi operasi_jumlah(6,3); ?> </body> </html>

12.b. REQUIRE Function Require digunakan untuk membaca nilai variable dan fungsi-fungsi dari sebuah file lain. Cara penulisan function Require adalah:
require(namafile);

Function Require ini tidak dapat dimasukkan diadalam suatu struktur looping misalnya while atau for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut hanya sekali saja. contoh2_13.php
<?php $a=Saya sedang belajar PHP; function tulistebal($teks) { echo(<b>$teks</b>); } ?>

contoh2_14.php
<?php require(contoh2_13.php); tulistebal(Ini adalah tulisan tebal); echo(<br>); echo($a); ?>

12.b. INCLUDE Function Include akan menyertakan isi suatu file tertentu. Include dapat diletakkan didalam suatu looping misalkan dalam statement for atau while. contoh2_15.php
<? echo("--------------------------------------<br>"); echo("PHP adalah bahasa scripting<br>"); echo("--------------------------------------<br>");

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

echo("<br>"); ?>

contoh2_16.php
<?php for ($b=1; $b<5; $b++) { include("contoh2_15.php"); } ?>

Hasilnya adalah:

12.c.

Fungsi String Fungsi string digunakan memanipulasi/mengolah data string untuk berbagai macam kebutuhan. Disini akan dibahas beberapa fungsi string yang sering digunakan dalam membuat program aplikasi web. Fungsi-fungsi tersebut adalah: AddSlashes Digunakan untuk menambahkan karakter backslash ( \ ) pada suatu string. Hal ini penting digunakan pada query string untuk database, misalkan pada MySQL. Beberapa karakter yang akan ditambahkan tanda backslash adalah karakter tanda petik satu ( ), karakter petik dua ( ), backslash ( \ ) dan karakter NULL.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Sintaks:
addslashes(string)

StripSlashes Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu string. Sintaks:
string stripslashes(string)

Crypt Digunakan untuk meng-encrypt dengan metode DES suatu string. Fungsi ini sering digunakan untuk mengacak string password sebelum disimpan dalam database. Dalam penggunaan fungsi crypt ini dapat ditambahkan parameter string salt. Parameter salt ini ditambahkan untuk menentukan basis pengacakan. Salt string terdiri atas 2 karakter. Jika salt string tidak ditambahkan pada fungsi crypt maka PHP akan menentukan sendiri salt string tersebut secara acak. Sintaks:
crypt(string [ , salt ] )

Echo dan Print Digunakan untuk mencetak/menampilkan isi suatu string/teks atau argumen ke browser. Sintaks:
echo( string argumen1, string argumen2 , .) print( string argumen1, string argumen2 , .)

Explode Digunakan untuk memecah-mecah suatu string berdasarkan tanda pemisah tertentu dan memasukkan hasilnya kedalam suatu variable array. Sintaks:
explode(string pemisah , string [, int limit] )

Contoh:
$namahari = minggu senin selasa rabu kamis jumat sabtu; $hari = explode( , $namahari);

Implode Kegunaan fungsi ini adalah kebalikan daripada fungsi explode. Fungsi implode digunakan untuk menghasilkan suatu string dari masing-masing elemen suatu array. String yang dihasilkan tersebut dipisahkan oleh suatu string telah yang ditentukan sebelumnya. Sintaks:
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

implode(string pemisah , array)

Printf dan Sprint Digunakan untuk menampilkan output ke browser dengan format tertentu. Sintaksnya adalah sebagai berikut:
Printf(format[,argumen]) Sprint(format[,argumen])

Parameter format selalu ditandai dengan karakter persen (%), kemudian diikuti oleh karakter tertentu yang memberikan spesifikasi untuk memberikan hasil dengan format tertentu. Karakter pemberi spesifikasi tersebut adalah: Karakter
B C d f o s x X

Keterangan
Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka biner Argumen diperlakukan sebagai integer dan ditampilkan sebagai karakter dengan nilai ASCII-nya Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka desimal Argumen diperlakukan sebagai double dan ditampilkan sebagai angka floating point Argumen diperlakukan sebagai integer dan ditampilkan sebagai bilangan oktal Argumen diperlakukan dan ditampilkan sebagai string Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka heksadesimal (dengan huruf kecil) Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka heksadesimal (dengan huruf besar)

contoh2_17.php
<html> <head> <title>.:: Latihan Format String::.</title> </head> <body> <font face=verdana size=2> <? $angka1=78.79; $angka2=23.31; $angka=$angka1+$angka2; echo ($angka); echo ("<br>"); $format=printf("%01.2f", $angka); echo("$format<br>"); $year=1972; $month=11; $day=9;

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

$tanggal=sprintf("%02d-%02d-%04d",$day,$month, $year); echo ($tanggal); ?> </body> </html>

Angka didepan karakter % menunjukkan jumlah digit atau jumlah karakter yang akan ditampilkan. Jika ada titik, menunjukkan jumlah angka dibelakang koma. yang Misalnya, ditampilkan. %01.2f %02d menunjukkan menunjukkan bahwa bahwa bilangan bilangan tersebut tersebut ditampilkan sebagai floating point dan harus ada dua angka dibelakang koma ditampilkan sebagai integer dan harus ada dua angka yang ditampilkan. Jadi jika terdapat angka 8, maka akan diubah menjadi 08. StripTags Digunakan untuk menghilangkan kode-kode tag HTML pada suatu string. Sintaks:
striptags(string [, string tags yang tidak dihilangkan] )

StrLen Digunakan untuk menghitung jumlah karakter suatu string. Sintaks:

strlen(string)

StrPos Digunakan untuk mencari posisi suatu sub string pada suatu string. Fungsi ini biasanya digunakan untuk mencari suatu sub string didalam suatu string. Sintaks:
strlen(string , sub string)

Str_Repeat Digunakan untuk mengulang isi suatu string. Sintaks:

str_repeat(string , int jumlah perulangan)

Str_Replace Digunakan untuk mengganti suatu string dengan string yang lain. Sintaks:
Str_replace(tercari,pencari,subyek)

StrRev Digunakan untuk membalik urutan suatu string. Sintaks:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

strrev(string)

StrStr, StriStr dan StrChr Digunakan untuk mencari keberadaan suatu string di dalam string lain. Sintaks:
strstr(tercari,pencari) stristr(tercari,pencari) strchr(tercari,pencari)

StrToLower Digunakan untuk merubah suatu string menjadi huruf kecil (lowercase). Sintaks:
strtolower(string)

StrToUpper Digunakan untuk merubah suatu string menjadi huruf besar (uppercase) Sintaks:
strtoupper(string)

SubStr Digunakan untuk mengambil suatu sub string dengan panjang tertentu dari suatu string pada posisi tertentu pula. Sintaks:
substr(string, int posisi , int posisi)

Contoh:
substr(abcdefg,0,3); // mengasilkan string abc substr(abcdefg,3,2); // menghasilkan string de

SubStr_Count Digunakan untuk menghitung jumlah sub string dalam suatu string Sintaks:
substr_count( string , string substring)

Contoh:
substr_count(This is a test,is); // menghasilkan nilai 2

UCFirst Digunakan untuk mengganti karakter pertama pada suatu string menjadi huruf besar. Sintaks:
ucfirst(string)

UCWords

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Digunakan untuk mengganti karakter pertama pada setiap kata dalam suatu string menjadi huruf besar. Sintaks:
ucwords(string)

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

12.d.

Fungsi Matematika Yaitu fungsi-fungsi yang digunakan untuk memanipulasi bilangan-bilangan dalam operasi matematis. Fungsi Trigonometri Fungsi trigonometri adalah fungsi-fungsi yang berhubungan dengan ilmu trigonometri, yaitu antara lain:
sin(sudut), mencari nilai sinus sebuah sudut cos(sudut), mencari nilai cosinus sebuah sudut tan(sudut), mencari nilai tangen sebuah sudut asin(sudut), mencari nilai arcus sinus sebuah sudut acos(sudut), mencari nilai arcus cosinus sebuah sudut atan(sudut), mencari nilai arcus tangen sebuah sudut deg2rad(a), merubah besaran derajat menjadi radian rad2deg(a), merubah besaran radian menjadi derajat

Semua besar sudut yang dicari harus dalam bentuk radian. contoh2_18.php
<html> <head> <title>.:: Fungsi-fungsi Trigonometri::.</title> </head> <body> <h3><u>Fungsi-fungsi Trigonometri</u></h3><p> <font face=verdana size=2> <form>Masukkan sudut yg dicari: <input type=text name=sdt><br><br> <input type=submit value="Hitung"> </form> <?php if (isset($sdt)) { $sudut=intval($sdt); $sudrad=deg2rad($sudut); $sin=sin($sudrad); $cos=cos($sudrad); $tan=tan($sudrad); $arcsin=asin($sudrad); $arccos=acos($sudrad); $arctan=atan($sudrad); echo "Sudut $sudut sama dengan $sudrad radian<br>"; printf("sin($sudut) = %01.4f<br>",$sin); printf("cos($sudut) = %01.4f<br>",$cos); printf("tan($sudut) = %01.4f<br>",$tan); printf("arc sin($sudut) = %01.4f<br>",$arcsin); printf("arc cos($sudut) = %01.4f<br>",$arccos); printf("arc tan($sudut) = %01.4f<br>",$arctan); } ?> </body></html>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Fungsi Pangkat dan Algoritma Fungsi-fungsi yang digunakan untuk perhitungan pangkat dan logaritma.
pow($x,$y), mencari hasil dari $x . $x exp($x), mencari nilai e log($x), mencari nilai dari logaritma $x sqrt($x), mencari akar kuadrat $x.
$y

Fungsi Base n Fungsi yang digunakan untuk konversi suatu bilangan ke bilangan berbasis n.
base_convert(x,y,z), mengubah bilangan x dari basis y menjadi basis z. decbin(x), mengubah bilangan desimal ke bilangan biner dechex(x), mengubah bilangan desimal ke bilangan heksadesimal decoct(x), mengubah bilangan desimal ke bilangan oktal bindec(x), mengubah bilangan biner ke bilangan desimal hexdec(x), mengubah bilangan heksadesimal ke bilangan desimal octdec(x), mengubah bilangan oktal ke bilangan desimal

contoh2_19.php
<html> <head> <title>.:: Fungsi-fungsi Trigonometri::.</title> </head> <body> <h3><u>Konversi Bilangan </u></h3><p> <font face=verdana size=2> <form> Masukkan bilangan yg dicari: <input type=text name=bil> <br><br> <input type=submit value="Convert"> </form> <?php if (isset($bil)) { $bilangan=intval($bil); $baseconvert=base_convert($bilangan,10,3); $desbin=decbin($bilangan); $deshex=dechex($bilangan); $desoct=decoct($bilangan); printf("Desimal $bilangan dalam basis 3 adalah = $baseconvert<br>"); printf("Desimal $bilangan dalam basis 2 adalah = $desbin<br>"); printf("Desimal $bilangan dalam basis 16 adalah = $deshex<br>"); printf("Desimal $bilangan dalam basis 8 adalah = $desoct<br>"); }
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

?> </body> </html>

Fungsi Matematika Lainnya Fungsi-fungsi matematika yang juga dikenal PHP, yaitu:
abs(x), nilai absolut dari x ceil(x), untuk membulatkan pecahan x ke atas floor(x), untuk membulatkan pecahan x ke bawah round(x,y), untuk membulatkan pecahan x sampai y angka dibelakang koma pi(), sama dengan atau 22/7 atau kira-kira 3,14 number_format(x,y,k,r), menuliskan bilangan x dengan format dibelakang koma, dengan k adalah koma dan r adalah pemisah ribuan

angka

12.e.

Fungsi Date dan Time Fungsi date() Digunakan untuk mengambil tanggal dan jam sekarang. Hasil dari fungsi ini adalah sebuah string yang berisi tanggal/jam sesuai dengan format yang diinginkan. Sintaks:
date(string format)

Format yang dikenal dalam fungsi date ini adalah sebagai berikut: Karakter
a A B d D F g G h H i I (capital i) j l (lowercase L) L m M n s S t T U w Y
SWR.OPR.304.(3).A

Keterangan
am / pm AM / PM Swatch Internet time day of the month, 2 digits with leading zeros; i.e. "01" to "31" day of the week, textual, 3 letters; i.e. "Fri", Sun month, textual, long; i.e. "January",November hour, 12-hour format without leading zeros; i.e. "1" to "12" hour, 24-hour format without leading zeros; i.e. "0" to "23" hour, 12-hour format; i.e. "01" to "12" hour, 24-hour format; i.e. "00" to "23" minutes; i.e. "00" to "59" "1" if Daylight Savings Time, "0" otherwise. day of the month without leading zeros; i.e. "1" to "31" day of the week, textual, long; i.e. "Friday" boolean for whether it is a leap year; i.e. "0" or "1" month; i.e. "01" to "12" month, textual, 3 letters; i.e. "Jan", Mar month without leading zeros; i.e. "1" to "12" seconds; i.e. "00" to "59" English ordinal suffix, textual, 2 characters; i.e. "th", "nd" number of days in the given month; i.e. "28" to "31" Timezone setting of this machine; i.e. "MDT" seconds since the epoch day of the week, numeric, i.e. "0" (Sunday) to "6" (Saturday) year, 4 digits; i.e. "1999"

Mengoperasikan Bahasa Pemrograman Berbasis Web

y z Z

year, 2 digits; i.e. "99" day of the year; i.e. "0" to "365" timezone offset in seconds (i.e. "-43200" to "43200")

Fungsi checkdate() Digunakan untuk memeriksa apakah format penulisan tanggal sudah benar. Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)

contoh2_20.php
<html> <head> <title>.:: Fungsi Time dan Date::.</title> </head> <body> <font face=verdana size=2> <? echo "Sekarang....<br>"; echo "Hari: ",date(l),"<br>"; echo "Tanggal: ",date('d F Y'),"<br>"; echo "Jam: ",date('h:i:s A'); echo "<hr>"; $hari=30; $bulan=2; $tahun=2005; $validasi=checkdate($bulan,$hari,$tahun); echo "Tanggal yang dipilih: $hari - $bulan - $tahun <br>"; echo "Penulisan tanggal <b><U>"; if ($validasi) { echo "benar"; } else { echo "salah"; } echo "</b></u><br>"; echo "Silahkan dibetulkan kembali"; ?> </body> </html>

Fungsi getdate() Digunakan untuk menghasilkan waktu dengan keluaran bertipe array. Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)

Karakter
hours mday minutes mon month seconds wday
SWR.OPR.304.(3).A

Keterangan
Jam Hari Menit Bulan dalam digit Bulan Detik Hari dalam digit

Mengoperasikan Bahasa Pemrograman Berbasis Web

weekday yday year

Hari Hari ke- dari tahun Tahun

contoh2_21.php
<html> <head> <title>.:: Fungsi getdate::.</title> </head> <body> <font face=verdana size=2> <? echo "Sekarang Jam: ",date('h:i:s A'); echo "<hr>";

$jam=getdate(); echo "Selamat <b><u>"; if($jam[hours]<=9) echo "Pagi"; else if($jam[hours]<=14) echo "Siang"; else if($jam[hours]<=19) echo "Sore"; else echo "Malam"; echo "</b></u> Mr. Jack"; ?> </body> </html>

12.f.

Fungsi Variable Fungsi variable digunakan untuk mengecek keberadaan variable. Fungsifungsi yang termasuk fungsi variable adalah: Fungsi Variable
doubleval($var) empty($var)

Keterangan
Mengubah variabel $var menjadi double Memeriksa apakah variabel $var belum punya nilai

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

isset($var) intval($var) gettype($var) Is_array($var) is_bool($var) Is_double($var) is_float($var) is_int($var) Is_integer($var) is_long($var) is_numeric($var) Is_object($var) is_real($var) is_resource($var) Is_string($var) settype($var) strval($var) unset($var)

Memeriksa apakah variabel $var sudah didefinisikan Merubah variabel $var menjadi integer Memeriksa type variabel $var Memeriksa apakah $var berupa array Memeriksa apakah $var bertipe boolean Memeriksa apakah $var bertipe double Memeriksa apakah $var bertipe float Memeriksa apakah $var bertipe short integer Memeriksa apakah $var bertipe integer Memeriksa apakah $var bertipe long integer Memeriksa apakah $var bertipe numerik Memeriksa apakah $var berupa objek Memeriksa apakah $var bertipe real Memeriksa apakah $var berupa resource Memeriksa apakah $var bertipe string Menentukan tipe variabel $var Mengambil nilai string dari $var Menghapus variabel $var

12.g. Fungsi Mail Digunakan untuk mengirimkan e-mail ke alamat e-mail tertentu. Sintaks:
mail($penerima,$subject,$isi_email[,$header]);

Contoh:
$pengirim = From: [email protected]; $tujuan = [email protected]; $subject = Pemberitahuan; $isi = Ini adalah percobaan pengiriman e-mail dengan menggunakan PHP; mail($to,$subject,$isi,$pengirim);

13. Mengolah File/data Teks 13.a. Membuka File Untuk membuka file teks, perintah yang digunakan adalah fopen(). Sedangkan untuk menutup file adalah fclose(). Perhatikan contoh berikut: contoh2_22.php
<html> <head> <title>.:: Mengelola Fungsi File::.</title> </head> <body> <font face=verdana size=2> <? echo "<b><u>Menampilkan isi file datasiswa.dat</b></u><br><br>"; if ($file=fopen("datasiswa.dat","r")) {

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

while (!feof($file)) { $string=fgets($file,255); echo($string); } fclose($file); } else { echo "File gagal dibuka"; } ?> </body> </html>

Sebelum

script

diatas

dijalankan,

terlebih

dahulu

harus

dibuat

file

datasiswa.dat. Jika tidak dibuat dan script tetap dijalankan, maka akan keluar pesan warning seperti dalam gambar diatas. Untuk itu, silahkan buat file datasiswa.dat. dengan NotePad dan isi seperti dalam gambar berikut:

Setelah file tersebut disimpan, kembali jalankan file contoh2_22.php. Sehingga akan didapatkan hasil seperti gambar berikut ini:

13.b. Memasukkan Data Untuk memasukkan data pada file teks menggunakan perintah:
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

fputs(nama_file,isi)

Perhatikan contoh berikut. contoh2_23.php

<html> <head> <title>.:: Mengelola File::.</title> </head> <body> <h3><u>Mengelola File Teks</u></h3><p> <font face=verdana size=2> <form> Masukkan Nama Siswa: <input type=text name=isi><br><br> <input type=submit value="proses"> </form> <?

//validasi isi if (isset($isi)) if (empty($isi)) echo "Data harus terisi"; else { if($berkas=fopen("datasiswa.dat","r")) { //Memasukkan Data $berkas=fopen("datasiswa.dat","a+"); fputs($berkas,$isi); fputs($berkas,"<br>"); fclose($berkas); //menampilkan $berkas=fopen("datasiswa.dat","r"); while(!feof($berkas)) { $teks=fgets($berkas,255); echo ($teks); } fclose($berkas); } else { echo("File gagal dibuka"); } } ?> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Setelah dijalankan, maka hasilnya akan seperti gambar berikut:

Isikan data pada form input, kemudian klik tombol proses , maka akan muncul gambar sebagai berikut:

14. Dasar-dasar MySQL Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom (column atau field). Sedangkan dalam sebuah database dapat terdiri dari beberapa table. MySQL adalah database jenis RDBMS (Relational Database Management System). Jadi dalam MySQL tetap menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL mengandung beberapa table dan satu table dalam database terdiri dari sejumlah baris dan kolom.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

14.a.

Tipe Data

Tipe Data Numerik

Tipe data numerik dibedakan menjadi dua, tipe data integer dan tipe data floating point. Tipe data integer untuk bilangan bulat sedangkan tipe data floating point digunakan untuk bilangan desimal. Tipe data numerik seperti dalam table di bawah ini:
Tipe Data Tinyint Smallint Mediumint Int Bigint Float(x) Float Double Kisaran Nilai (-128) 127 atau 0-225 (-32768) 32767 atau 0 65535 (-8388608)-8388607 atau 0-16777215 (-2147683648)-(2147683647) atau 0-4294967295 (-9223372036854775808)-(9223372036854775807) atau 0 18446744073709551615 (-3.402823466E+38)-(-1.175494351E-38), 0, dan 1.175494351E-38 3.402823466E + 38 Idem (-1.7976E+308)(-2.22E-308),0,dan(2.22E-308)-(1.79E+308)

Tipe Data String

Yang termasuk dalam tipe data string adalah tipe-tipe data berikut:
Tipe kolom CHAR VARCHAR TINYBLOB, TINYTEXT BLOB, TEXT MEDIUMBLOB, MEDIUMTEXT LONGBLOB, LONGTEXT ENUM('value1','value2',...) SET('value1','value2',...) Kisaran Nilai 1 255 karakter 1 255 karakter 1 255 karakter 1 65535 karakter 1 16777215 karakter 1 4294967295 karakter Maksimum 65535 karakter Maksimum 64 elemen

Tipe Data Waktu dan Tanggal

Yang termasuk dalam tipe data tanggal dan waktu adalah sebagai berikut:
Tipe Data DATETIME DATE TIMESTAMP TIMEYEAR Kisaran Nilai 1000-01-01 00:00 to 9999-12-31 23:59:59 1000-01-01 to 9999-12-31 1970-01-01 00:00:00 2037 -838:59:59 to 838:59:59:59 1901-2155

14.b. Membuat Database dan Table

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Untuk masuk ke dalam program MySQL pada prompt jalankan perintah berikut ini: 1. Masuk pada direktori utama mysql, seperti perintah berikut:
C:\WINDOWS>cd\apache\mysql\bin

2. Kemudian ketikkan perintah seperti contoh berikut:

C:\apache\mysql\bin>mysql

Kemudian akan masuk kedalam Prompt MySQL seperti tampilan dibawah ini:
Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1 to server version: 3.23.47-nt Type 'help;' or '\h' for help. Type '\c' to clear the buffer. mysql>

Bentuk prompt mysql> adalah tempat menuliskan perintah-perintah MySQL. Setiap perintah SQL harus diakhiri dengan tanda titik-koma ;. Cara untuk membuat sebuah database baru adalah dengan perintah:
create database namadatabase;

Contoh:
mysql> create database alamat; Query OK, 1 row affected (0.27 sec) mysql> _

Untuk mengaktifkan database dapat menggunakan perintah berikut ini:

use namadatabase;

Contoh:
mysql> use alamat; Database changed mysql> _

Setelah database aktif, sebuah tabel baru dapat dibuat. Perintah untuk membuat tabel baru adalah:
create table namatabel ( struktur );

Contoh: Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email, alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Kolom/Field nomor nama email alamat kota

Tipe Data int(6), not null, primary key char(40), not null char(25), not null char(255), not null char(20), not null

Keterangan Angka dengan panjang maksimal 6, sebagai primary key, dan tidak boleh kosong. Teks dengan panjang maksimal 40 karakter dan tidak boleh kosong Teks dengan panjang maksimal 25 karakter dan tidak boleh kosong Teks dengan panjang maksimal 255 karakter dan tidak boleh kosong Teks dengan panjang maksimal 20 karakter dan tidak boleh kosong

Perintah MySQL untuk membuat tabel seperti diatas adalah:

mysql> create table anggota ( -> nomor int(6) not null primary key, -> nama char(40) not null, -> email char(25) not null, -> alamat char(255) not null, -> kota char(20) not null); Query OK, 0 rows affected (0.33 sec) mysql> _

Sedangkan data yang akan diisikan dalam tabel anggota adalah sebagai berikut:
No
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Nama
Wilujeng Handayani Remy Dianning Ratna Budi S. Avicenna Arya Bayu Yusuf Ari Mulyaningsih Latief Ajie Jam Iyatul Khoir Sandra Paul Riza M. Nurullah

E-Mail
[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] latief@hotmail [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Alamat
Jl. Janti Barat 60 Jl. Dermo 7 Jl. Probolinggo 78 Jl. Durian No. 10 Jl. Candi II/23 Jl. Rajawali 78 Jl. Lebani Waras 100 Jl. Pakis 172 Jl. Kali Utik 99 Jl. Agus Salim 33 Jl. Adelaide 22 Jl. Mertojoyo 88 Jl. Bunga Jl. Merak Pamekasan 4

Kota
Malang Malang Lamongan Malang Semarang Mojokerto Gresik Surabaya Surabaya Lamongan Malang Malang Jombang Madura

Untuk memasukkan sebuah baris (record) kedalam tabel MySQL adalah sebagai berikut:
insert into namatabel values(kolom1, kolom2, kolom3,);

Contoh:
mysql> insert into anggota -> values('1','Wilujeng Handayani','[email protected]','Jl. Janti Barat 60', -> 'Malang'); Query OK, 1 row affected (0.44 sec)
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

mysql> _

14.c.

Menampilkan Isi Table Isi tabel dapat ditampilkan dengan menggunakan perintah SELECT, cara penulisan perintah SELECT adalah:
select kolom from namatable;

Contoh:

Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota
select nomor, nama from anggota;

Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggota;

Untuk menampilkan semua kolom pada tabel anggota yang berada pada
kota Surabaya
select * from anggota where kota=Surabaya;

Untuk menampilkan semua kolom pada tabel anggota dengan urut nama
select * from anggota order by nama;

Untuk menghitung jumlah record pada tabel anggota

select count(*) from anggota;

Untuk menampilkan kota pada tabel anggota

select kota from anggota;

Untuk menampilkan kota dengan tidak menampikan kota yang sama pada
tabel anggota

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

select distinct kota from anggota;

Untuk menampilkan nama dan email yang mempunyai email di

yahoo.com
select nama,email from anggota where email like %yahoo.com;

14.d.

Menghapus Record Untuk menghapus suatu record dengan kriteria tertentu digunakan perintah sebagai berikut:
delete from namatabel where kriteria;

Contoh: Menghapus record dari tabel anggota yang bernomor 3

delete from anggota where nomor=3;

14.e.

Memodifikasi Record Untuk memodifikasi (merubah) isi record tertentu adalah dengan

menggunakan perintah sebagai berikut:

update namatabel set kolom1=nilaibaru1, kolom2=nilaibaru2 where kriteria;

Contoh: Merubah e-mail dari anggota yang bernomor 2 menjadi [email protected].

update anggota set [email protected] where nomor=2;

14.f.

Menghubungkan PHP dengan MySQL Untuk menghubungkan dengan MySQL, telah disediakan beberapa fungsi oleh PHP, yaitu antara lain:

Fungsi mysql_connect()
Fungsi ini digunakan untuk menghubungkan PHP dengan MySql. Sintaksnya adalah: $koneksi=mysql_connect(host,user,password) Isi dari variabel
$host, $username, $password

dapat disesuaikan sesuai

dengan setting pada MySQL server yang ada.

Fungsi mysql_select_db()

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Fungsi ini digunakan untuk memilih database yang akan digunakan. Nama database dapat disesuaikan dengan setting pada MySql server yang ada. Sintaksnya adalah: mysql_select_db(namadatabase[,koneksi]) Parameter koneksi boleh tidak dituliskan, jika tidak dituliskan maka hubungan yang terakhir yang dianggap sebagai hubungan aktif.

Fungsi mysql_query()
Digunakan untuk melakukan perintah query dalam sebuah database. Sintaksnya sebagai berikut: $sql=mysql_query(perintah_sql[,koneksi])

Fungsi mysql_fetch_array()
Fungsi ini digunakan untuk mengambil record dalam database dan memasukkannya kedalam array assosiatif, array numeris atau keduanya. Sintaksnya adalah: $baris=mysql_fetch_array($sql)

Fungsi mysql_fetch_assoc()
Kegunaannya hampir sama dengan mysql_fetch_array, yang membedakan adalah array yang dihasilkan hanya array assosiatif. Sintaksnya adalah: $baris=mysql_fetch_assoc($sql)

Fungsi mysql_fetch_row()
Kegunaannya hampir sama dengan mysql_fetch_array, yang membedakan adalah array yang dihasilkan hanya array numeris. Sintaksnya adalah: $baris=mysql_fetch_row($sql)

Fungsi mysql_num_fields()
Fungsi ini digunakan untuk menghitung jumlah field dalam sebuah database. Sintaksnya adalah: $jum_field=mysql_num_fields($sql)

Fungsi mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record dalam database. Sintaksnya adalah: $jum_row=mysql_num_rows($sql)

Fungsi mysql_close()

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Fungsi ini digunakan untuk memutus hubungan dengan sebuah database yang telah dilakukan. Sintaksnya adalah: mysql_close([koneksi])

Fungsi mysql_create_db()
Fungsi ini digunakan untuk membuat database dengan script php. Sintaksnya adalah: mysql_create_db(nama_database) Perhatikan contoh pada file contoh2_24.php berikut: contoh2_24.php
<html> <head> <title>.:: tes koneksi dengan server database::.</title> </head> <body> <font face=verdana size=2> <h3>Tes koneksi dg mysql database server...</h3><p> <form> <input type=radio name=tombol Value=1>Sambung <input type=radio name=tombol Value=0>Putus <br><br> <input type=submit Value=" OK "> </form> <? require("koneksi.php"); $hub=open_connection(); $databasename="alamat"; if (isset($tombol)) { if ($tombol==1) { if ($hub) { echo ("Koneksi dg Server Database <b><u>SUKSES</b></u><br>"); $db=@mysql_select_db($databasename,$hub); if ($db) echo "Database <b><u>$databasename</b></u> ditemukan"; else echo "Database <b><u>$databasename</b></u> TIDAK ditemukan"; } else echo ("Koneksi dg Server Database <b><u>GAGAL</b></u><br>"); } elseif ($tombol==0) { $mati=@mysql_close($koneksi); echo ("Koneksi Server Database <b><u>Dimatikan</b></u><br>"); } } ?> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Agar script diatas dapat dijalankan, silahkan buat juga script koneksi.php berikut ini:
<?php function open_connection() { $host="localhost"; $username="root"; $password=""; $databasename="alamat"; $koneksi=@mysql_connect ($host,$username, $password); if ($koneksi) $db=@mysql_select_db ($databasename,$koneksi) or die ("Database <b>$databasename</b> Tidak Ditemukan"); return $koneksi; } ?>

Jika script diatas dijalankan dan koneksi dengan server database sukses dilaku-kan serta data-base alamat sudah dibuat, maka hasilnya seperti gambar diatas. Untuk menampilkan isi tabel anggota dari database alamat yang telah dibuat di sub bab 14.b, perhatikan contoh2_25 berikut ini. contoh2_25.php

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Hasil dari script tersebut adalah:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Untuk menambahkan data pada tabel anggota, perhatikan contoh pada contoh2_26.html berikut ini: contoh2_26.html
<html> <head> <title>.:: Tambah Anggota::.</title> </head> <body bgcolor="#FFFFFF"> <form action=simpan_anggota.php method=POST> <font face=verdana size=2 color="#000000"> <h3 align=left> TAMBAH DATA ANGGOTA </h3> </font> <table border=0> <tr> <td width=15%>Nama</td> <td width=3%>: </td> <td width=82%><input type=text name=nama size=15></td> </tr> <tr> <td width=15%>Email</td> <td width=3%>: </td> <td width=82%><input type=text name=email size=25></td> </tr> <tr> <td width=15%>Alamat</td>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

<td width=3%>: </td> <td width=82%><input type=text name=alamat size=50></td> </tr> <tr> <td width=15%>Kota</td> <td width=3%>: </td> <td width=82%><input type=text name=kota size=12></td> </tr> <tr> <td width=15% colspan=3 align=center> <hr></td> </tr> <tr> <td colspan=3 align=right> <input type=submit value="Simpan"> <input type=reset value="Reset"> </td> </tr> </table> </form> </body> </html>

Sebelum script diatas dijalankan, jangan lupa untuk membuat juga script simpan_anggota.php
<html> <head> <title>.:: Simpan Data::.</title> </head> <body> <font face=arial size=2> <center><h5>DATA BERHASIL DITAMBAHKAN KE TABEL ANGGOTA</h5></center> <hr> <?php // ----- ambil isi dari file koneksi.php require("koneksi.php"); // ----- hubungkan ke database $koneksi=open_connection(); // ----- menentukan nama tabel $tablename="anggota"; // ----- menghitung jumlah record $sql1="select * from $tablename"; $hasil =@mysql_query ($sql1) or die ("Terdapat kesalahan pada perintah SQL!"); $jml=@mysql_num_rows($hasil); $nomor=$jml+1; // ----- perintah SQL untuk memasukkan data ke tabel anggota $sql2="insert into $tablename(nomor,nama,email,alamat,kota) values ('$nomor',";

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

$sql2.="'$nama','$email','$alamat','$kota')"; // ------ jalankan perintah SQL untuk memasukkan data ke tabel anggota $hasil =@mysql_query ($sql2) or die ("Terdapat kesalahan pada perintah SQL!"); // ------ putus hubungan dengan database mysql_close($koneksi); ?> <center> | <a href=contoh2_25.php target=_blank>Lihat Data</a> | <a href=contoh2_26.html>Kembali</a> | </body> </html>

15. Autentifikasi Menggunakan Session Session digunakan untuk menyimpan atau mencatat variabel yang sama ke halaman yang lain. Session biasanya dipakai untuk aplikasi-aplikasi yang memerlukan keamanaan. Setiap pengunjung akan diperiksa terlebih dahulu sebelum dapat mengakses sebuah halaman web. Jika tidak berhak, maka halaman yang diminta pengunjung tidak dapat ditampilkan. Untuk memulai session perintah yang digunakan adalah session_start(). Dan untuk mengakhiri session menggunakan perintah session_destroy(). Terdapat banyak fungsi yang berhubungan dengan session, yaitu: 15.a. Fungsi session_ start()

Berfungsi untuk memulai session. Sintaksnya adalah sebagai berikut:

session_ start()
15.b. Fungsi session_ destroy()

Berfungsi untuk mengakhiri session. Sintaksnya adalah sebagai berikut:

session_ destroy()
15.c. Fungsi session_ name()

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Digunakan untuk mengambil atau menentukan nama sebuah session. Sintaksnya adalah sebagai berikut:

session_ name([nama])
Jika argumen nama tidak disertakan, maka fungsi ini digunakan untuk mengambil nama sebuah session dan jika tidak disertakan digunakan untuk memberi nama pada session. 15.d. Fungsi session_ module_ name()

Digunakan untuk mengambil atau menentukan nama sebuah modul session. Sintaksnya adalah sebagai berikut:

session_ module_ name([modul])

Jika argumen modul tidak disertakan, fungsi ini digunakan untuk mengambil nama sebuah modul session dan jika tidak disertakan digunakan untuk memberi nama pada modul session. 15.e. Fungsi session_ save_ path()

Digunakan untuk mengambil atau menentukan path dari direktori yang digunakan untuk menyimpan data-data sebuah session. Sintaksnya adalah sebagai berikut:

session_save_path([path])
15.f. Fungsi session_ id()

Digunakan untuk mengambil atau menentukan identitas sebuah session. Sintaksnya adalah sebagai berikut:

session_ id([id])
15.g. Fungsi session_ register()

Digunakan untuk mendaftarkan variabel ke dalam sebuah session. Sintaksnya adalah sebagai berikut:

session_ register([namavar1[,namavar2...])
Argumen namavar1, namavar2 dan seterusnya berupa string yang menampung nama variabel (tanpa tanda $ didepannya). 15.h. Fungsi session_ unregister()

Digunakan untuk menghilangkan sebuah variabel dari sebuah session, namun session tersebut tetap ada. Sintaksnya adalah sebagai berikut:

session_ unregister(namavar)
15.i. Fungsi session_ unset()

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Digunakan untuk menghilangkan nilai semua variabel yang ada dalam sebuah session. Sintaksnya adalah sebagai berikut:

session_ unset()
15.j. Fungsi session_ is_ registered() Digunakan untuk memeriksa apakah sebuah variabel telah didaftarkan pada sebuah session. Sintaksnya adalah sebagai berikut:

session_ isregistered(namavar)
Argumen namavar berupa string yang merujuk nama variabel (tanpa tanda $ didepannya). 15.k. Contoh Penggunaan Untuk memahami session, kita akan latihan membuat session dengan aplikasi login. Yang perlu dbuat pertama kali adalah file admin.html. File admin.html
<html> <head> <title>.:: Login Administrator::.</title></head> <body bgcolor="#FFFFFF"> <form name="form1" action=login.php method=POST> <table width="62%" border=1 align=center cellpadding=0 cellspacing=0 bgcolor=#ffffff bordercolor=purple> <td> <table width="100%" border=0 align=center cellpadding=1 cellspacing=1 bgcolor=#ffffff > <tr bgcolor=magenta> <td colspan=2><div align=center><strong>Login Admin</strong></div></td> </tr> <tr bgcolor=#ffffff> <td width=31%>User ID</td> <td width=69%><input type=text name=user id=admin size=25 maxlength=25></td> </tr> <tr bgcolor=#ffffff> <td width=31%>Password</td> <td width=69%><input type=password name=password id=pass size=25 maxlength=25></td> </tr> <tr> <td width=15% colspan=2 align=center><hr></td> </tr> <tr> <td colspan=2 align=right><input type=submit value="Login"> <input type=reset value="Reset"></td> </tr> </table> </td> </table> </form> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Script tersebut jika dijalankan akan tampak seperti gambar disamping Selanjutnya buat file berikut: File login.php
<? session_start(); if (empty($user)) echo "Nama User Belum Di Isi"; elseif (empty($password)) echo "Password Belum Di Isi"; elseif ($user=="jack" & $password=="onlyme") { $master=$user; session_register("master"); header("location:halaman_utama.php"); exit(); } else echo "Anda Tidak Terdaftar"; ?>

File halaman_utama.php
<? session_start(); ?> <html> <head> <title>.:: Halaman Utama::.</title> </head> <body> <font face=tahoma size=2> <? if(!session_is_registered("master")) echo "<h3>Akses Ditolak... </h3>"; else { echo "Welcome <b> $master ... </b><br>"; echo "<h3>HALAMAN ADMINISTRATOR</h3>"; echo "| <a href=hal1.php> PAGE 1</a>"; echo "| <a href=hal2.php> PAGE 2</a>"; echo "| <a href=logout.php> logout</a> |"; echo "<hr>"; } ?> </body> </html>

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

File hal1.php
<? session_start(); ?> <html> <head> <title>.:: Halaman 1::. </title></head> <body> <font face=tahoma size=2> <? if(! session_is_registered ("master")) echo "<h3>Akses Ditolak... </h3>"; else { echo "<font face= tahoma size=2>"; echo "<h3>PAGE 1</h3>"; echo "<p align=right> | <a href=logout.php>logout</a> |"; echo "<hr>"; echo "Nama User <b><u>$master</b></u>";

} ?> </body> </html>

File hal2.php
<? session_start(); ?> <html> <head> <title>.:: Halaman 2::. </title></head> <body> <font face=tahoma size=2> <? if(!session_is_registered ("master")) echo "<h3>Akses Ditolak... </h3>"; else { echo "<font face= tahoma size=2>"; echo "<h3>PAGE 2</h3>"; echo "<p align=right> | <a href=logout.php>logout</a> |"; echo "<hr>";echo "Nama User <b><u>$master</b></u>"; } ?> </body> </html>

File hal2.php
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

<?

session_start(); session_destroy(); header("location:admin.html");

?>

c. Rangkuman 2
Bahasa pemrograman PHP terbukti sangat handal dalam membangun sebuah program berbasis web Waktu yang digunakan untuk memproses data dan menjalankan perintahperintah query sangat cepat Dengan berjalan dalam sebuah web server, maka secara otomatis program ini bersifat multiuser Database MySQL menyimpan data didalam direktori khusus yang terpisah dari file program PHP sehingga keamanan data lebih terjamin Web server dan database server terpisah sehingga menyulitkan pihak luar untuk mengakses data yang terdapat didalam database. Bahasa program PHP dan Database MySQL lebih fleksibel karena dapat diakses oleh sistem operasi Windows maupun Linux. Bahasa program PHP dan MySQL adalah open source sehingga kita tidak perlu mengeluarkan biaya tambahan untuk membeli software tersebut. Variable dalam PHP tidak perlu di-deklarasikan terlebih dahulu sebelum digunakan. Dalam PHP mengenal lima macam tipe data yaitu: integer, float, string, array dan objek. Struktur kontrol/kendali dalam php meliputi: statement IF, While, For, Switch, Require dan Include.

d. Tugas
1. Buatlah aplikasi web dengan program PHP untuk menghitung jumlah pengunjung yang telah mengunjungi halaman web kita. Counter yang kita buat ini adalah untuk menghitung berapa kali suatu halaman situs web telah ditampilkan. Untuk menyederhanakannya maka counter ditampilkan dalam bentuk teks bukan grafik. Algoritma: a. Bila suatu halaman web ditampilkan maka terlebih dulu dibaca isi file tertentu dan dibaca nilainya. b. Tampilkan nilainya di layar browser c. Tambahkan nilainya dengan 1 d. Simpan nilainya yang baru di file e. Selesai 2. Buatlah aplikasi pendaftaran/registrasi agar pengunjung mendapatkan hak untuk memasuki halaman web yang kita buat. Untuk itu membuat aplikasi tersebut anda harus mengikuti aturan-aturan sebagai berikut:
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

 Buat database dan tabel. Field-field tabel tersebut terdiri dari username, password, nama, alamat, email dan level. Untuk level dibedakan menjadi dua, yaitu user biasa dan administrator. Buat halaman Login seperti gambar dibawah ini. Tombol Login untuk masuk ke halaman berikutnya jika user sudah terdaftar. Halaman yang dikunjungi berdasarkan LOGIN level user, jika user adalah administrator User Name maka halaman yang dibuka adalah halaman Password administrator jika Login Daftar user name adalah user biasa maka yang dibuka adalah halaman user biasa. Sedangkan tombol daftar , digunakan untuk pendaftaran user baru bagi yang belum terdaftar. Buat halaman pendaftaran yang didalamnya terdapat Form Pendaftaran User Baru seperti gambar berikut:

PENDAFTARAN ANGGOTA
User Name Password Nama Alamat E-mail Level Administrator User Biasa

Simpan

Reset

Setelah sukses melakukan pendaftaran, user dapat melakukan login sesuai dengan level user masing-masing. Untuk halaman administrator terdapat menu Lihat Data, Tambah Data, Edit Data, Hapus Data dan Ganti Password. Sedangkan untuk halaman user biasa terdapat menu Edit Data (miliknya sendiri) dan Ganti Password. Semua halaman yang dibuat di autentifikasi menggunakan session . 3. Buatlah buku tamu (guestbook) dengan langkah-langkah pembuatan buku tamu sebagai berikut: a. Membuat table MySQL yang akan menyimpan isi buku tamu b. Membuat form pengisian buku tamu
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

c. Membuat program untuk menerima masukan data dari form yang telah kita buat sebelumnya d. Membuat program untuk menampilkan isi buku tamu.

e. Tes Formatif 2

1. Apa yang anda ketahui dengan Variable dan Konstanta ?.

2. Sebutkan macam-macam statement kendali dan apa fungsinya ? 3. Buatlah program untuk menghitung faktorial. Dengan algoritma sebagai berikut: Membuat form dengan menggunakan tag FORM pada HTML. Dengan data yang dimasukkan adalah nilai faktorial yang dicari. Misal seperti gambar berikut:

Data yang dimasukkan disimpan dalam variable dan dikirimkan ke sebuah file PHP lain yang fungsinya untuk menerima variable yang dikirimkan oleh form. Kemudian variable tersebut diproses dengan rumus berikut ini:
Faktorial n!= 1*2*3*...*n+1

Hasil dari perhitungan tersebut kemudian ditampilkan dalam form yang lain, seperti pada gambar berikut:

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

 Gunakan statement perulangan untuk mengerjakan tugas diatas. Selesai

f. Kunci Jawaban Formatif

Variable digunakan untuk menyimpan data sementara dan nilainya bisa berubah-ubah setiap kali program dijalankan. Dalam PHP, variable diawali dengan $ dan diikuti dengan nama variablenya. Konstanta adalah variable yang nilainya tetap. Statement kendali terdiri dari: Statement IF, digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Statement WHILE, digunakan untuk melakukan perulangan dalam sebuah statement sampai kondisi tertentu terpenuhi. Statement FOR, digunakan untuk mengulangi sejumlah blok statement sampai jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement while. Bedanya, dalam statement for jumlah perulangan sudah diketahui diawal dan harus dituliskan nilai awal dan nilai akhir dari variabel penghitung. Statement SWITCH, digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsifungsi dari sebuah file lain. Statement INCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

Program untuk menghitung faktorial adalah: File faktorial.php

<html> <head> <title>::: Program Faktorial:::</title> </head> <body> <center> <table border=1 width=400> <tr> <td><font face=tahoma size=2><h3><u><center><br> Mencari Faktorial</u></h3> <form action=faktor.php method=post> Masukkan Nilai Faktorial:<br> <input type=text name=a size=10><p> <input type=submit value="Hitung"> </form> <br> </td> </tr> </table> </body>
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

</html>

File hasil.php
<html> <head>

<title>::: Program Faktorial:::</title> </head> <body> <center> <table border=1 width=400> <tr> <td><font face=tahoma size=2> <h3><u> <center> <br>Mencari Faktorial</u></h3> <form action=faktorial.php method=post> <? $c=1; if ($a<1) { $a=0; $c=0; }; echo "Faktorial $a adalah: "; for ($b=1;$b<$a+1;$b++) { $c=$c*$b; } echo("= $c"); ?> <p> <input type=submit value="Hitung Lagi"> </form> <br> </td> </table> </body> </html>

g. Lembar Kerja 2
Alat dan Bahan

a. PC (Personal Computer) yang telah dilengkapi dengan web browser.

b. Editor Teks NotePad c. Apache Web Server d. Program PHP e. Program MySQL Kesehatan dan Keselamatan Kerja a. Berdoalah sebelum memulai kegiatan belajar. b. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar. c. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

d. Jangan meletakkan benda yang dapat mengeluarkan medan elektromagnetik

di dekat komputer (magnet, handphone, dan sebagainya).

e. Gunakanlah komputer sesuai fungsinya dengan hati-hati, jangan bermain

game.
f. Setelah selesai, matikan komputer sesuai prosedur yang aman! Langkah Kerja a. Siapkanlah semua peralatan yang akan digunakan! b. Periksa semua kabel penghubung pada PC.

c. Nyalakan PC dan jalankan program web server, MySQL, PHP, editor notepad
dan web browser Internet Explorer.

d. Kerjakan Tes Formatif 2 di atas.

e. Apabila menemui kesulitan dalam memahami materi yang ada, segera tanyakan denga instruktur. f. Setelah selesai, matikan komputer dan rapikan seperti semula.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

3.

Kegiatan Belajar 3:
Mengenal Software Web Design.

a.

Tujuan Kegiatan Pemelajaran

Setelah melaksanakan kegiatan pemelajaran 1 diharapkan peserta diklat dapat mengenal berbagai macam software web design dengan kekurangan dan kelebihannya masing-masing.

b.

Uraian Materi 3
1. Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat berbagai macam software web design yang dikeluarkan oleh vendor yang berbeda-beda. Setiap software web design itu menawarkan berbagai macam fitur unggulannya masingmasing. Software web design terpopuler yang ada saat ini antara lain: Adobe Image Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage dan lain sebagainya. 2. Mengenal Macromedia Dreamweaver MX Macromedia Dreamweaver yang merupakan salah satu software web design terpopuler dipilih sebagai software web design yang akan digunakan dalam proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman web, antara lain: ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML disamping keunggulan-keunggulan lainnya dibandingkan dengan software web design yang lain. Saat ini Macromedia Dreamweaver telah sampai pada versi 2004 yang lebih sering disebut dengan Macromedia Dreamweaver MX 2004. Dreamweaver menjadi software utama yang digunakan oleh web designer dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam desain maupun pembangunan situs web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap. Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu harus dipastikan sudah terinstal di komputer praktikum. Apabila belum ada Macromedia Dreamweaver yang terinstal, maka perlu dilakukan proses instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti dengan proses instalasi sesuai dengan installation manual yang ada. Setelah Macromedia Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

3. Workspace Dreamweaver MX Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai selanjutnya, apakah Workspace Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan Workspace Dreamweaver MX, apabila dikemudian hari kita ingin menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui Menu Edit Preferences.

Gambar 1. Workspace Setup Workspace Dreamweaver MX tersebut memiliki tampilan window seperti pada gambar 2. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel.

Gambar 2. Window dan Panel Dreamweaver MX

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

Keterangan Gambar:

1. Insert

bar,

memuat

tombol-tombol

yang

berfungsi

untuk

memasukkan/menyisipkan berbagai jenis obyek seperti gambar, tabel dan layer ke dalam suatu dokumen. Setiap obyek yang dimasukkan dengan meng-klik tombol insert pada insert bar ini adalah seperti halnya memasukkan potongan tag HTML ke dalam halaman yang sedang dibuat. 2. Document window, berfungsi untuk menampilkan dokumen di mana anda sekarang bekerja. 3. Document toolbar, berisi tombol dan menu pop-up yang menyediakan tampilan yang berbeda-beda dari Document Window. 4. Panel groups, merupakan kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokkan di bawah satu judul. 5. Tag selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View. 6. Property inspector, digunakan untuk melihat dan mengubah berbagai property obyek atau teks. 7. Files panel, memungkinkan pengaturan file-file atau direktori kerja. Workspace Dreamweaver MX ini memberikan kesatuan tampilan antara

menu utama, panel, property inspector serta toolbar.

c. Rangkuman 3
Macromedia Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan

software web design yang telah memiliki banyak dukungan terhadap banyak
bahasa pemrograman web. Panel-panel pada window Dreamweaver MX memiliki peran masing-masing dalam membangun sebuah halaman web yang cantik, sesuai dengan jiwa seni si pemakai.

d.

Tugas 3
1. Pelajarilah setiap fungsi dari panel-panel dalam window Dreamweaver MX! 2. Cari dan pelajari sumber bacaan atau buku refensi yang menjelaskan secara detail tentang pengenalan tool-tool dalam Macromedia Dreamweaver MX .

e.

Tes Formatif 3

1. Apakah yang anda ketahui tentang software web design? 2. Apa yang anda ketahui tentang pemrograman web? 3. Sebutkan beberapa software web design yang anda ketahui!

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

f.

Kunci Jawaban Formatif 3

1. Software

web

design

perangkat

lunak

yang

berguna

untuk

membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis. 2. Pemrograman web, adalah pembuatan halaman web yang didalamnya mengandung unsur bahasa pemrograman disamping tetap menggunakan tag-tag HTML. Biasanya pemrograman web bertujuan untuk membangun web-web dinamis.

3. Software web design: Microsoft Frontpage, Macromedia Fireworks,

Macromedia Dreamweaver, Adobe ImageReady, Namo Web editor dan lain lain.

g.

Lembar Kerja 3
Alat dan Bahan Personal Computer (PC). Kesehatan dan Keselamatan Kerja 1. Berdoalah sebelum memulai kegiatan belajar. 2. Bacalah dan pahami petunjuk praktikum pada setiap lembar kegiatan belajar. 3. Pastikan komputer dalam keadaan baik, semua kabel penghubung terhubung dengan benar. 4. Setelah selesai, matikan komputer sesuai prosedur! Langkah Kerja 1. Siapkanlah semua peralatan yang dibutuhkan! 2. Periksa semua kabel penghubung pada komputer.

3. Nyalakan komputer dan pastikan komputer tersebut telah terkoneksi internet

dengan baik.

4. Pastikan PC yang anda pakai sudah memiliki software web design, jika belum
lakukanlah instalasi

software

yang

dibutuhkan,

yaitu:

Macromedia

Dreamweaver MX . 5. Jalankan Macromedia Dreamweaver MX, amati dan catat bagian-bagian pada window Dreamweaver MX. Jika mengalami kesulitan, tanyakan pada instruktur. 6. Setelah selesai, laporkan hasil kerja Anda kepada instruktur. 7. Setelah diteliti matikan komputer dan rapikan seperti semula.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

BAB III EVALUASI

A. Tes Tulis
Jawablah pertanyaan berikut ini dengan singkat dan jelas! 1. Jelaskan masing-masing fungsi dari tag-tag berikut: a. <h1> b. <p> c. <br> d. <hr> 2. Apakah fungsi dari link, form dan frame dalam pembuatan web? 3. Apa perbedaan frame dan frameset? 4. Apa perbedaan checkbox dan radio button? 5. Apakah fungsi dari tombol Submit dan Reset?

6. Apa yang anda ketahui dengan Variable dan Konstanta ?.

7. Sebutkan macam-macam statement kendali dan apa fungsinya ?

B. Tes Praktek
Buatlah halaman web dengan content yang lengkap. Web yang anda buat digunakan untuk mengelola Sistem Administrasi Siswa sekolah anda. Sebelum membuat halaman web tersebut terlebih dahulu anda harus merencanakan disain dan layout halaman web, struktur data dan algoritma program, serta menentukan model dan skema data base (terdiri dari tabel dan field apa saja, relasi dan query-nya). Setelah proyek anda selesai, silahkan membuat laporan dan serahkan ke guru pembimbing anda masing-masing. Ketentuan minimal dari program yang akan anda buat adalah bahwa program anda nantinya minimal akan dibuka/diakses oleh Administrator, Guru/karyawan, Siswa dan Orang Tua/wali Siswa. Administrator Memiliki hak akses tertinggi dalam program tersebut. Data-data yang dapat dimasukkan dan diubah oleh administrator adalah: 1. Data Profile Sekolah 2. Data Guru/Karyawan 3. Data Siswa 4. Data Orang Tua/Wali Siswa 5. Data Jurusan 6. Data Kelas 7. Data Pelajaran
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

8. Data Tempuh 9. Data Absensi 10. Data Nilai Siswa 11. Data User Guru/karyawan Untuk user guru, data yang dapat dimasukkan dan diubah adalah: 1. Data Nilai untuk mata pelajaran yang diajar 2. Ubah Passwordnya sendiri Siswa User siswa hanya memiliki hak akses untuk melihat nilai dan absensinya sendiri. Dan dapat merubah password milik siswa tersebut. Orang Tua/wali Siswa User Orang Tua/Wali memiliki hak akses untuk melihat nilai dan absensi putranya. Dan dapat merubah password miliknya sendiri. Ketentuan diatas adalah ketentuan minimal, silahkan dilengkapi sebagus mungkin. Silahkan melakukan studi kasus di sekolah anda sendiri atau di sekolah lain untuk membantu anda dalam melengkapi content halaman web dan untuk menentukan field-field dari tabel yang diperlukan.

C. Kunci Jawaban Tes Tulis

1. Fungsi dari tag: a. <h1> : digunakan untuk mengatur ukuran huruf pada header dengan angka 1 berarti mempunyai ukuran paling besar. b. <p> : digunakan untuk berpindah alinea atau membuat paragraf baru c. <br> : Digunakan untuk pindah baris baru. d. <hr> : digunakan untuk membuat garis horisontal 2. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain, dapat berupa teks maupun gambar. Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi dengan pengunjung) karena form dapat berupa model isian yang harus diisi pengunjung dan akan dibca oleh pemilik web. Frame, merupakan pembagi halaman. 3. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya. 4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak menentukan satu pilihan saja.

5. Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan dalam
form untuk selanjutnya diolah oleh server. Dan tombol reset berfungsi untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam form. 6. Variable digunakan untuk menyimpan data sementara dan nilainya bisa berubahubah setiap kali program dijalankan. Dalam PHP, variable diawali dengan $ dan diikuti dengan nama variablenya. Konstanta adalah variable yang nilainya tetap.

7. Statement kendali terdiri dari:

a. Statement IF, digunakan untuk melakukan eksekusi suatu statement secara bersyarat. b. Statement WHILE, digunakan untuk melakukan perulangan dalam sebuah statement sampai kondisi tertentu terpenuhi. c. Statement FOR, digunakan untuk mengulangi sejumlah blok statement sampai jumlah atau kondisi terpenuhi. Fungsinya sama dengan statement while. Bedanya, dalam statement for jumlah perulangan sudah diketahui diawal dan harus dituliskan nilai awal dan nilai akhir dari variabel penghitung. d. Statement SWITCH, digunakan untuk membandingkan suatu variable dengan beberapa nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang dibandingkan. e. Statement REQUIRE, digunakan untuk membaca nilai variable dan fungsifungsi dari sebuah file lain. f. Statement INCLUDE, digunakan untuk menyertakan isi suatu file tertentu.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

D. Lembar Penilaian Tes Praktek

PEDOMAN PENILAIAN
Nama Peserta No. Induk Program Keahlian Nama Jenis Pekerjaan : : : :
Rekayasa Perangkat Lunak Mengoperasikan bahasa pemrograman berbasis web Skor Maks 3 5 5 Sub Total V Membuat Layout 2.1. Penyiapan Layout 2.2. Menentukan warna dan gambar Sub Total IX Proses (Sistematika & Cara Kerja) 3.1. Cara Instalasi program aplikasi 3.2. Cara menyiapkan struktur data dan algoritma program 3.3. Cara menyiapkan Database 3.4. Cara koding program 3.5. Cara melakukan layout 3.6. Cara menetapkan warna Sub Total XV II Kualitas Produk Kerja 4.1. Halaman Web

No. 1 I

Aspek Penilaian 2 Perencanaan 1.1. Persiapan Hardware dan Software 1.2. Menganalisa jenis desain

Skor Perolehan 4

Ket. 5

10 5 5 10 5 5 5 5 5 5 30

Layut halaman web Komposisi warna dan gambar Desain model database Relation Query

2,5 2,5 2,5 2,5 2,5

4.2. Data Base

4.3. Bahasa Program

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

No. 1

Aspek Penilaian 2

Skor Maks 3 2,5 2,5

Skor Perolehan 4

Ket. 5

Penggunaan server side script Program dibuat dengan efisien

4.4. Security Keamanan Data

Back up data Sistem data log Autentifikasi user Pembatasan hak akses

2,5 2,5 2,5 2,5 2,5 30 2 3 3 2 Sub Total 10 4 6 Sub Total Total 10 100

Keamanan Akses

4.5. Pekerjaan diselesaikan dengan waktu yang telah ditentukan Sub Total XX XV Sikap/Etos Kerja 5.1. Tanggung jawab 5.2. Ketelitian 5.3. Inisiatif 5.4. Kemandirian XLI Laporan 6.1. Sistimatika penyusunan laporan 6.2. Kelengkapan bukti fisik

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

KRITERIA PENILAIAN
No .
I

Aspek Penilaian
Perencanaan 1.3. Persiapan Hardware dan Software

Kriteria Penilaian

Skor

Hardware dan Software disiapkan sesuai kebutuhan Hardware dan Software disiapkan sesuai kebutuhan

5 1 5 1

1.4. Menganalisa jenis desain

Merencanakan sesuai tahapan/ proses desain Tidak merencanakan tahapan/ proses desain

VI

Membuat Layout 2.1. Penyiapan Layout Layout web disiapkan sesuai prosedur Layout web tidak disiapkan sesuai prosedur 2.2. Menentukan warna dan gambar Halaman web dilengkapi dengan warna dan gambar Halaman web tidak dilengkapai dengan warna dan gambar 5 1 5 1

XI

Proses (Sistematika & Cara Kerja) 3.1. Cara Instalasi program aplikasi Program aplikasi diinstall dengan benar sesuai dengan kebutuhan Program aplikasi tidak diinstall dengan benar sesuai dengan kebutuhan 3.2. Cara menyiapkan struktur data dan algoritma program Struktur data dan algoritma program disiapkan sesuai dengan rencana Struktur data dan algoritma program disiapkan tidak sesuai dengan rencana 3.3. Cara menyiapkan Database Database disiapkan sesuai dengan normalisasi database Database disiapkan tidak sesuai dengan normalisasi database 3.4. Cara koding program Program di buat sesuai dengan algoritma program dan efisien Program di buat tidak sesuai dengan algoritma program dan 5

1 5 1 5 1

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

No .

Aspek Penilaian

Kriteria Penilaian
tidak efisien

Skor

3.5. Cara melakukan layout

Layout memenuhi dasar-dasar estetika Layout tidak memenuhi dasardasar estetika

5 1 5 1

3.6. Cara menetapkan warna

Penggunaan warna memenuhi harmoni warna Penggunaan warna tidak harmoni

XXI V

Kualitas Produk Kerja 4.1. Halaman Web Layut halaman web

Halaman web dibuat sesuai dengan layout Halaman web tidak dibuat sesuai dengan layout

2,5 0,5 2,5 0,5

Komposisi warna dan gambar

Komposisi warna dan gambar selaras Komposisi warna dan gambar tidak selaras

4.2. Data Base

Disain model database

Database dibuat menggunakan/sesuai DMD Database dibuat tidak menggunakan/sesuai DMD

2,5 0,5 2,5 0,5 2,5 0,5

Relation

Menggunakan Database relasi Tidak menggunakan database relasi

Query

Menggunakan query data Tidak menggunakan query data

4.3. Bahasa Program

Penggunaan server side script

Web dibuat dengan teknologi/ bahasa server side script Web dibuat tidak dengan teknologi/bahasa server side script

2,5 0,5 2,5 0,5

Program dibuat dengan efisien

Program dibuat se-efisien mungkin Program dibuat terlalu panjang

4.4. Security Keamanan Data Back up data

Dalam halaman web terdapat fasilitas aplikasi backup data Dalam halaman web tidak

2,5 0,5

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

No .

Aspek Penilaian

Kriteria Penilaian
terdapat fasilitas aplikasi backup data

Skor

Sistem data log

Terdapat fasilitas pencatatan sistem data log Tidak terdapat fasilitas pencatatan sistem data log

2,5 0,5

Keamanan Akses

Autentifikasi user

Halaman web diberi fasilitas autentifikasi user Halaman web tidak diberi fasilitas autentifikasi user

2,5 0,5 2,5 0,5 2,5 0,5

Pembatasan hak akses

Pemakai dbedakan hak aksesnya Pemakai tidak dibedakan hak aksesnya

4.5. Pekerjaan diselesaikan dengan waktu yang telah ditentukan LII I Sikap/Etos Kerja 5.1. Tanggung jawab

Diselesaikan tepat waktu Diselesaikan tidak tepat waktu

Membereskan kembali alat dan bahan yang dipergunakan Tidak membereskan alat dan bahan yang dipergunakan

2 0,5 3 0,5 3 0,5 2 0,5

5.2. Ketelitian

Tidak banyak melakukan kesalahan kerja Banyak melakukan kesalahan kerja

5.3. Inisiatif

Memiliki inisiatif bekerja Kurang/tidak memiliki inisiatif kerja

5.4. Kemandirian

Bekerja tanpa banyak diperintah Bekerja dengan banyak diperintah

LXI I

Laporan 6.1. Sistimatika penyusunan laporan Laporan disusun sesuai sistimatika yang telah ditentukan Laporan disusun tanpa sistimatika 6.2. Kelengkapan bukti fisik Melampirkan bukti fisik hasil penyusunan Tidak melampirkan bukti fisik 4 1 6 2

Kategori kelulusan:
SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

70 79 80 89 90 100

: Memenuhi kriteria mininal. Dapat bekerja dengan bimbingan. : Memenuhi kriteria minimal. Dapat bekerja tanpa bimbingan. : Di atas kriteria minimal. Dapat bekerja tanpa bimbingan.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

BAB IV PENUTUP

Setelah menyelesaikan modul ini dan mengerjakan semua tugas serta evaluasi maka berdasarkan kriteria penilaian, peserta diklat peserta diklat dapat dinyatakan lulus/tidak lulus. Apabila dinyatakan lulus maka dapat melanjutkan ke modul berikutnya sesuai dengan alur peta kududukan modul, sedangkan apabila dinyatakan tidak lulus maka peserta diklat harus mengulang modul ini dan tidak diperkenankan mengambil modul selanjutnya.

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web

DAFTAR PUSTAKA
1. Bimo Sunarfrihantono, ST, PHP dan MySQL Untuk WEB , Andi 2003 2. Bunafit Nugroho, PHP & MySQL Dengan Editor Dreamweaver MX , Andi, 2004 3. Mico Pardosi, Bahasa Pemrograman Internet, HTML dan Javascript , Indah,
2001

4. MADCOMS, Aplikasi Manajemen Database Pendidikan Berbasis Web

Dengan PHP dan MySQL , Andi, 2005

5. Sutarman, S.Kom, Membangun Aplikasi Web Dengan PHP dan MySQL , Graha
Ilmu, 2003

6. Teguh Wahyono, PHP TRIAD Fundamental (Memahami Pemrograman Web

Dengan PHP dan MySQL dalam 24 Jam) , Gava Media, 2005

7. Visibooks, HTML and JavaScript for Visual Learners , 8. Yahya Kurniawan, ST, Aplikasi Web Database dengan PHP dan MySQL , Elex
Media Komputendo, 2003.

9. http://www.ilmukomputer.com 10. http://www.klik-kanan.com

SWR.OPR.304.(3).A

Mengoperasikan Bahasa Pemrograman Berbasis Web