Modul Web IZ
Modul Web IZ
PENGENALAN WEB
A. Web Server
Web Server merupakan sebuah perangkat lunak dalam server yang berfungsi menerima permintaan
(request) berupa halaman web melalui HTTP atau HTTPS dari klien yang dikenal dengan browser web
dan mengirimkan kembali (response) hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML.
5. Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan biasanya
Netscape Navigator, Internet Explorer, Mozilla Firefox dan masih banyak yang lainya.
MODUL 2
HTML
B. Dasar-Dasar HTML
1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaan komentar dan
Hasil :
2. Menggunakan tag <P> untuk membuat paragraph; tag judul <H1> s/d <H6> untuk pembesaran
huruf, contoh File Latih2.htm
Hasil :
Hasil :
4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah baris teks yang memiliki
karakteristik yang sama, contoh File latih4.htm
Hasil :
C. Pengaturan Teks
1. Penggunaan <PRE> untuk menampilkan teks apa adanya, contoh File latih5.htm
Hasil :
Hasil :
3. Pengaturan warna background : BGCOLOR, contoh File latih7.htm
Hasil :
Hyperlink
Hyperlink adalah membuat koneksi melalui sebuah objek, teks, images ke file lain,
sehingga apabila web site di tampilkan di browser, objek, teks atau images yang telah di
set tadi apabila di klik akan menampilkan halaman web lain sesuai nama file yang
dipanggil. Perintah untuk membuat hyperlink adalah :
<a href="latih2.htm">Profil</a>
Contoh Penggunaan Hyperlink, File Index.htm
Hasil :
Jika diklik teks Latih1.htm, maka browser akan menampilkan halaman file latih1.htm
Selanjutnya Jika diklik teks KEMBALI, maka browser akan kembali ke halaman file
index.htm, Selesaikan untuk link selanjutnya…!
Marquee
Adalah perintah yang digunakan untuk teks berjalan dengan attribut :
Behavior (alternate, slide atau scroll)
Align (middle, bottom, top, left, right)
Bgcolor (Red, yellow, blue, dst…)
Contoh :
Hasil :
Menyisipkan Gambar
MODUL 3
PEMBUATAN TABEL
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML
memiliki elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat
baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel
dimulai dari inisialisasi tabel, menggunakan elemen table:
Atribut Tabel tag <TD>
Hasil :
Test1
PENGGABUNGAN KOLOM (Tabel2.htm)
HASIL :
Menggabungkan Baris (Tabel3.htm)
HASIL :
Tugas :
Buatlah web berikut dengan nama file tabel4.htm !
KUIS :
MODUL 4
MEMBUAT FRAME
Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap
bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame
adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan
isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan
sisi frame yang lain menampilkan isi dokumen
3. Membuat suatu dokumen tanya jawab, dll.
Untuk membuat halaman web yang menggunakan frame kita perlu membuat beberapa file html,
yaitu:
Sebuah pendefinisi file. File tersebut kita butuhkan untuk menampilkan halaman web
dengan bentuk frame
Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan
kita buat pada frame tersebut
Sintaks:
<FRAMESET BORDER=# {[ROWS|COLS]}=”#%,#%,...” >
<FRAME SRC=”url” NAME=”nama frame”>
</FRAMESET>
Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus
dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya bentuk frame
pada contoh berikut:
File : Frameset.htm
Hasil :
File : Frame_a.htm
Hasil :
File : Frame_b.htm
Hasil :
Tugas :
Sempurnakan web diatas menjadi tampilan web berikut ini !
MODUL 5
CSS
Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang
mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan
menjadi lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1. Inline Style Sheet
2. Internal Style Sheet
3. External Style Sheet
cara terakhir ini tidak disarankan digunakan karena ribet dan memperbesar file setiap html anda
sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat. Darurat
disini berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda
sedang membuka fie itu dan tidak sempat membuka file css karena keterbatasan koneksi
misalnya.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update
dan editing.
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file
cssnya. Penggunaan sistem embeding css ini sangat disarankan karena memang banyak
kelebihan yaitu mudah untuk melakukan pengeditan, mengatur semantik dan praktis terkumpul
dari satu file.
Hasil :
Contoh web yang menggunakan script CSS (Latih2_css.htm)
Hasil :
Contoh web yang menggunakan script CSS (Latih3_css.htm)
Hasil :
Contoh Web yang menggunakan External CSS(latih4_css.htm)
Alat ini digunakan untuk memblok suatu area berdasarkan kesamaan warna. Selanjutnya kita
juga dapat menggunakan perintah :
- “Shift + klik area lain” untuk menambah wilayah blokan yang diinginkan.
- “select + Invert (^D)” untuk memblok area kebalikan dari area yang telah terseleksi
sebelumnya.
- “Edit + Free Transform” untuk mengubah size/ukuran objek
- “Layer + Flatten Image” untuk menggabungkan beberapa layer menjadi satu layer
D. Membuat Teks
Caranya : Klik icon Type tool, lalu klik sembarang tempat dalam lembar kerja untuk
menuliskan suatu teks
- Atur properties teks dengan menggunakan toolbar option berikut :
Untuk mengatur jenis huruf, efek cetak, size dan perataaan serta warna teks.
E. Layer Style
Digunakan untuk mengatur efek bayangan suatu objek.
F. Tombol Navigasi
- Buat lembar kerja baru misalnya : width : 120 pixels dan Height : 40 pixels
- Tambahkan teks
- Atur efek Outer Glow
Contoh Latihan :
MODUL 9
OPTIMASI PENGGUNAAN DIV
Hasil :
MODUL 10
STRUKTUR DASAR PHP
Variabel
Digunakan untuk menyimpan sebuah value, data atau informasi
Nama variabel diawali dengan tanda $
Panjang tidak terbatas
Setelah tanda $ diawali oleh huruf atau under-scrore (_). Karakter berikutnya bisa terdiri
dari huruf, angka, dan karakter tertentu yang diperbolehkan (karakter ASCII dari 127 –
255).
Bersifat case-sensitive.
Tidak perlu dideklarasikan.
Tidak boleh mengandung spasi.
Contoh :
Benar
- $_name
- $first_name
- $name3
- $name_3
Salah
- $3name
- $name?
- $first+name
- $first.name
- $first name
Hasil :
Tipe Data
Pada PHP, tipe data variabel tidak didefinisikan oleh programmer, akan tetapi secara otomatis
ditentukan oleh intepreter PHP. Namun demikian, PHP mendukung 8 (delapan) buah tipe data
primitif, yaitu :
1. boolean
2. integer
3. float
4. string
5. array
6. object
7. resource
8. NULL
Hasil :
Konstanta
Konstanta merupakan variabel konstan yang nilainya tidak berubah-ubah. Untuk
mendefinisikan konstanta dalam PHP, menggunakan fungsi define()
Hasil :
Nama File : operator2.php
Deskripsi : Program operator logika dan perbandingan dalam PHP.
Hasil :
Komentar Program
Dalam PHP, komentar program bisa menggunakan :
/* dan */
// dan
#
Hasil :
BAB 11
STRUKTUR KONDISI DAN PERULANGAN
Struktur Kondisi If
if (kondisi) {
statement-jika-kondisi-true;
}
Keterangan :
kondisi merupakan statemen atau variabel yang akan diperiksa TRUE atau FALSE-nya.
Hasil :
Penjelasan Program :
Pada program di atas, terdapat pemeriksaan kondisi apakah isi variabel $nilai lebih dari 65 (baris 3). Jika
kondisi ini bernilai TRUE (variabel $nilai berisi nilai yang lebih besar dari 65) maka statement pada
baris ke-4 akan dijalankan. Sebaliknya jika kondisinya FALSE, maka statement pada baris ke-4 tidak
akan dijalankan.
Keterangan :
kondisi merupakan statemen atau variabel yang akan diperiksa TRUE atau FALSE-nya. Jika
kondisinya TRUE maka statemen yang berada di blok if akan dieksekusi, sebaliknya jika kondisinya
FALSE maka statemen yang berada di blok else yang akan dieksekusi.
Nama File : if_else.php
Deskripsi : Program Struktur Kondisi If..Else.
Hasil :
Penjelasan Program:
Pada program di atas, terdapat pemeriksaan kondisi apakah isi variabel $nilai lebih dari 60 (baris 3). Jika
kondisi ini bernilai TRUE (variabel $nilai berisi nilai yang lebih besar dari 60) maka statement pada
baris ke-4 akan dijalankan. Sebaliknya jika kondisinya FALSE, maka statement pada baris ke-6 yang
akan dijalankan. Pada contoh program di atas, kondisi pada baris ke-3 bernilai FALSE karena isi variabel
$nilai adalah 50.
Hasil :
Penjelasan Program:
Pada program di atas, terdapat pemeriksaan kondisi apakah isi variabel $nilai sama dengan “achmatim”
dan apakah isi variabel $pass sama dengan “123” (baris 4). Jika kedua kondisi tersebut bernilai TRUE
maka statement pada baris ke-5 akan dijalankan. Sebaliknya jika salah satunya bernilai FALSE, maka
statement pada baris ke-7 yang akan dijalankan.
Hasil :
Penjelasan Program:
Pada program di atas, terdapat fungsi isset() yang merupakan fungsi untuk memeriksa apakah
suatu variabel sudah terbentuk (ada) atau belum. Fungsi akan bernilai TRUE jika variabelnya
ada. Jadi jika baris ke-2 dari program di atas diremark atau dihilangkan maka statement pada baris
ke-4 yang akan dijalankan.
Keterangan :
kondisi merupakan statemen atau variabel yang akan diperiksa TRUE atau FALSE-nya. Statement
pada blok benar dan salah hanya boleh satu statemen saja
Penjelasan Program:
Pada program di atas, fungsi date() dengan parameter “Y” (baris ke-2) akan menghasilkan 4 digit tahun
sekarang. Pada baris ke-3 akan diperiksa apakah isi variabel $tahun jika dimodulus dengan 4 akan
menghasilkan nilai 0. Jika TRUE maka $kabisat akan berisi “KABISAT” dan jika FALSE $kabisat akan
berisi “BUKAN KABISAT”
Keterangan :
$var merupakan variabel yang akan diperiksa isi atau nilainya. Tipe data variabel ini tidak dibatasi.
Value pada case juga bisa berupa string, integer, boolean, bahkan bisa berupa conditional-
statement. Boleh memakai kutip tunggal maupun kutip ganda.
Hasil :
Penjelasan Program:
Pada program di atas, variabel $day (baris ke-2) akan berisi 3 (tiga) digit pertama dari nama hari dalam
bahasa Inggris. Dengan fungsi date(), kita akan memperoleh informasi tanggal, hari dan waktu sekarang.
Fungsi ini akan diperlajari lebih lanjut pada Bab mendatang. Selanjutnya isi variabel $day akan diperiksa
dengan switch (baris ke-3), jika isinya adalah ‘Sun’ maka $hari adalah “Minggu” dan seterusnya.
Keterangan :
init_awal merupakan inisialisasi atau nilai awal variable.
kondisi merupakan statemen kondisi yang akan membatasi perulangan.
counter merupakan pertambahan atau pengurangan nilai variabel sehingga perulangan tetap
berjalan.
Hasil :
Penjelasan Program:
Program di atas merupakan bentuk-bentuk perulangan dengan menggunakan for. Contoh yang pertama
(baris 4-6) merupakan bentuk yang paling umum. Pada contoh 2, batas akhir perulangan tidak disebutkan
dalam for, tapi diatur dengan if dan break (baris 11-13).
init_awal;
while (kondisi) {
statement-yang-diulang;
counter;
}
Keterangan :
init_awal merupakan inisialisasi atau nilai awal variable.
kondisi merupakan statemen kondisi yang akan membatasi perulangan.
counter merupakan pertambahan atau pengurangan nilai variabel sehingga perulangan tetap
berjalan.
Penjelasan Program:
Program di atas merupakan beberapa variasi perulangan dengan while. Contoh yang pertama (baris 3-6)
merupakan bentuk yang paling umum dipakai. Blok perintah (baris 5) akan dijalankan selama
pemeriksaan kondisi pada baris ke-4 bernilai TRUE. Contoh kedua merupakan bentuk lain dari while,
bentuk ini jarang digunakan. Pada contoh ketiga, penggunaan perulangan untuk menampilkan tulisan
dengan format <H1> sampai <H6>
init_awal;
do {
statement-yang-diulang;
counter;
} while (kondisi);
Keterangan :
init_awal merupakan inisialisasi atau nilai awal variable.
kondisi merupakan statemen kondisi yang akan membatasi perulangan.
counter merupakan pertambahan atau pengurangan nilai variabel sehingga perulangan tetap
berjalan.
Pada struktur do...while, pemeriksaan kondisi ada di bawah, sehingga statement yang berada dalam
block do...while setidaknya akan dieksekusi sebanyak satu kali.
Hasil :
Penjelasan Program:
Program di atas akan menampilkan bilangan ganjil antara 1 sampai 20 menggunakan struktur perulangan
do..while. Pada struktur perulangan do...while, pemeriksaan kondisi berada di bawah.
Keterangan :
Struktur foreach biasanya digunakan untuk melakukan perulangan berdasarkan isi suatu array.
Perulangan akan berakhir jika isi array telah habis.
Hasil :
Penjelasan Program:
Untuk menampilkan keseluruhan isi array bisa dilakukan dengan perulangan for, while, do..while
atau foreach. Baris 5 – 7 program di atas merupakan contoh menampilkan array dengan
perulangan for. Fungsi count() pada baris ke-5 berfungsi untuk mencari jumlah elemen dari array
$assWarna. Untuk menampilkan array juga bisa menggunakan struktur foreach(). Struktur
foreach akan mengambil elemen array mulai dari posisi pointer sampai akhir pointer. Pada
contoh program di atas (baris ke-10) bisa dinyatakan dengan pernyataan bahwa “untuk setiap
elemen array $arrWarna, masukkan ke variabel $warna”.
BAB 12
PENANGANAN FORM
Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form murni (tidak ada
script php) tidak harus disimpan dalam bentuk php, bisa dalam bentuk html. Untuk merancang
sebuah form inputan, setidaknya ada 3 (tiga) hal penting, yi :
1. METHOD
Method dari sebuah form menentukan bagaimana data inputan form dikirim. Method ini ada dua
macam, yaitu GET dan POST. Method ini menentukan bagaimana data inputan dikirim dan
diproses oleh PHP.
2. ACTION
Action dari sebuah form menentukan dimana data inputan dari form diproses. Jika action ini
dikosongkan, maka dianggap proses form terjadi di halaman yang sama. Jadi halaman form dan
halaman proses bisa saja dipisah atau dijadikan satu.
3. SUBMIT BUTTON
Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger
pengiriman data dari form inputan. Jika tombol ini ditekan, maka data form akan dikirimkan
(diproses) di halaman yang sudah ditentukan pada atribut action.
Proses pengolahan form dilakukan di halaman yang terpisah dengan form inputannya. Jika
proses penanganan form berada dilakukan di halaman yang berbeda, maka value atribut action
pada tag form harus diisi dengan alamat halaman tempat proses pengolahan form.
Hasil :
Hasil :
Hasil :
Hasil :
Hasil :
Hasil :
Nama File : proses06.php
Deskripsi : Program menampilkan data dari objek combo box dari form input05.htm
Hasil :
BAB 13
MANIPULASI FILE
Penanganan File
Dalam management file dan direktori, PHP menyediakan lebih dari 70 fungsi. Beberapa fungsi
utama yang berhubungan dengan management file (create, write, append, dan delete), antara
lain :
Keterangan :
$namafile merupakan nama file yang akan dibuat, sedangkan $mode merupakan mode
akses file. Mode akses file yang bisa digunakan yaitu :
Mode, jika r Hanya untuk baca file, pointer berada di awal file
r+ Untuk baca dan tulis file, pointer berada di awal file
w Hanya untuk tulis file, isi file lama dihapus, jika file belum ada maka akan di-
create
w+ Untuk baca dan tulis file, isi file lama dihapus, jika file belum ada maka
akan di-create
a Hanya untuk menambahkan isi file, pointer berada di akhir file, jika file
belum ada maka di-create
a+ Untuk membaca dan menambahkan isi file, pointer berada di akhir file,
jika file belum ada maka di-create
Hasil :
b. Menulis ke File
Hasil :
Untuk menulis ke file, dapat menggunakan fungsi fwrite() dan fputs(). Variabel $handle
merupakan mode pengaksesan file, dimana mode yang digunakan harus bisa menulis ke file.
Contohnya mode w dan a. Selain itu, kita juga bisa menggunakan fungsi file_puts_contents()
dengan parameter berupa nama file dan isi yang akan ditambahkan. Jika program di atas
dijalankan, maka isi file data.txt akan berisi seperti pada gambar 7.3 (buka dengan WordPad).
Hasil :
Sebelumnya :
Hasil :
Untuk membaca isi file, bisa menggunakan fungsi fgets() dan fread(). Fungsi fgets() akan
membaca isi file tiap baris. Sedangkan fungsi fread() akan membaca isi file setiap jumlah byte
tertentu. Pada program di atas, baris ke-8 akan membaca file setiap 20 byte atau 20 karakter.
Hasil :
Program di atas akan menampilkan keseluruhan isi file, dimana isi file akan dibaca tiap baris.
Pembacaan dilakukan dari baris pertama sampai baris terakhir.
d. Menutup File
fclose ($handle);
Hasil :