Web Design

Direktorat Pembinaan Sekolah Menengah Kejuruan iv

DAFTAR ISI


KATA PENGANTAR iii
DAFTAR ISI iv
DAFTAR TABEL x
DAFTAR GAMBAR xii
DAFTAR LATIHAN xxiv


BAGIAN 1
WEB STATIS 1


1 KONSEP DASAR DAN TEKNOLOGI WEB 3
1.1. Internet 3
1.2. Teknologi Web 6
1.3. Pengertian Web Design 9
1.4. Fungsi Situs Web 14
1.5. Tujuan Pembuatan Situs Web 17


2 DOKUMEN HTML 25
2.1. Pengertian dokumen HTML 25
2.2. Struktur dokumen 27
2.2.1. Elemen dan tag 27
2.2.2. Elemen HTML yang dibutuhkan 28
2.2.3. Penggunaan tag 30
2.2.4. Atribut tag 31
2.3. Format dasar 33
2.3.1. Format teks HTML 44
2.3.2. Entitas karakter HTML 55
2.3.3. List HTML 57
2.3.4. Image HTML 64
2.4. Link 73
2.4.1. Tag Anchor 73
2.4.2. Link Relatif 74
2.4.3. Link Absolut 76
2.4.4. Link ke bagian lain dalam dokumen 78
2.5. Format lanjut 86
2.5.1. Image sebagai link 86
2.5.2. Tabel 96
2.5.3. Frame HTML 117
2.5.4. Form dan Input HTML 123
2.5.5. Objek 138
2.5.6. Applet 141
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan v
3 IMPLEMENTASI WEB STATIS 145
3.1. Kebutuhan web design 145
3.1.1. Tujuan dan fungsi 146
3.1.2. Desain situs web 147
3.2. Local Published 148
3.2.1. Pembuatan dokumen web 149
3.2.2. Membuat link antar dokumen 163
3.2.3. Pengujian local published 168
3.3. Web Published 174
3.3.1. Pembuatan domain 174
3.3.1.1. Domain milik sendiri 175
3.3.1.2. Free domain 175
3.3.2. UpLoad 183
3.3.3. Pengujian situs web 193


BAGIAN 2
WEB DINAMIS DAN BASISDATA 197


4 WEB DINAMIS DASAR 199
4.1 Prinsip Web Dinamis 199
4.2 Persiapan Lingkungan Teknis 201
4.2.1 Teknologi Web Dinamis 201
4.2.2 ASP, ODBC dan ADO 203
4.2.3 Web Server 204
4.2.3.1 Installasi Web Server pada Windows XP
204
4.2.3.2 Pembuatan Skrip untuk Menguji Web Server
208
4.2.3.3 Virtual Directories 209
4.2.3.4 Domain Name Server (DNS) 210
4.3 Pembuatan halaman web dinamis 215
4.3.1 Pemahaman dasar tentang skrip ASP 217
4.3.2 Variabel 220
4.3.3 Tipe Data 222
4.3.4 Konstanta 225
4.3.5 Literal String 226
4.3.6 Ekspresi 228
4.3.7 Operator 228
4.3.8 Komentar 235
4.3.9 Pernyataan IF 235
4.3.10 Pernyataan Select 240
4.3.11 Pernyataan Pengulangan 243
4.3.12 Pernyataan For 248
4.3.13 Pernyataan Exit 250
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan vi
4.3.14 Array 251
4.3.15 Pernyataan Erase 257
4.3.16 Array Multidimensi 259
4.4 Penambahan prosedur 261
4.4.1 Subrutin 261
4.4.2 Fungsi 265
4.5 Menguji halaman web dinamis 266
4.5.1 Pengujian Jenis Pelewatan Argumen ke Prosedur
267
4.5.2 Lingkup Variabel 269
4.5.3 Direktif untuk Memberitahukan Bahasa yang
Digunakan 271
4.5.4 Memenggal Pernyataan 272
4.5.5 Pemakaian Konstanta VbCrLf 272
4.5.6 Menangani Kesalahan (Error Handling) 275


5 WEB DINAMIS LANJUT 279
5.1 Pemrograman web dinamis 279
5.1.1 Objek Response 280
5.1.2 Objek Request 287
5.1.3 Objek Server 296
5.1.4 Objek Application 301
5.1.5 Objek Session 304
5.1.6 Objek ObjectContext 307
5.2 Persiapan pembuatan aplikasi 307
5.3 Pembuatan aplikasi menggunakan script 308
5.3.1 Objek Dictionary 308
5.3.2 Objek FileSystemObject 313
5.3.3 Objek Err 329


6 BASISDATA 331
6.1 Konsep basisdata 331
6.1.1 Pengertian basisdata 331
6.1.2 Struktur hirarki basisdata 332
6.1.2.1 Model data 333
6.1.2.2 Arsitektur 3-skema 334
6.1.3 Entity-Relationship Model 335
6.1.4 Pendekatan DBMS dan Normalisasi Data 336
6.2 Aplikasi Dasar 338
6.2.1 Menu aplikasi basisdata 338
6.2.1.1 Membuka Microsoft Access 338
6.2.1.2 Membuat basisdata baru 339
6.2.1.3 Elemen dasar Microsoft Access 341
6.2.1.4 Menutup basisdata 342
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan vii
6.2.1.5 Membuka file basisdata 342
6.2.1.6 Mengakhiri Microsoft Access 344
6.2.2 Tabel 344
6.2.2.1 Membuat tabel baru 344
6.2.2.2 Mengelola tabel 346
6.2.3 Relation 354
6.2.4 Sorting 357
6.2.5 Filtering 358
6.2.5.1 Filter by selection 358
6.2.5.2 Filter by form 359
6.3 Aplikasi Lanjut 361
6.3.1 Query 362
6.3.2 Form 373
6.3.3 Macro 388
6.3.4 Report 394
6.3.5 Perintah SQL 399


7 PENGINTEGRASIAN BASISDATA DENGAN WEB 405
7.1 Prinsip pengintegrasian 405
7.2 Persiapan basisdata 406
7.3 Login pada basisdata 409
7.4 Koneksi pada basisdata 417
7.4.1 Apa itu DSN 417
7.4.2 Langkah Pembuatan DSN 417
7.4.3 Koneksi ke basisdata 424
7.4.3.1 Skrip koneksi 425
7.4.3.2 Skrip membuka tabel 426
7.4.3.3 Skrip menutup koneksi 426
7.5 Pengujian Koneksi 427
7.5.1 Menampilkan Data Tabel dengan Objek Connection
428
7.5.2 Menambahkan Record Tabel dengan Objek
Connection 430
7.5.3 Menghapus Record Tertentu dengan Objek
Connection 431
7.5.4 Mengedit Record Tertentu dengan Objek Connection
432
7.5.5 AddNew, Update dan Delete 433
7.5.6 Getrows 436
7.5.7 Property Recordcount 438
7.5.8 Property Pagesize, Pagecount dan Absolutepage
439
7.5.9 Field Collection 443


Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan viii
BAGIAN 3
TEKNOLOGI WEB 445


8 APLIKASI WEB BERBASIS OBJEK 447
8.1. Pemrograman berbasis objek 447
8.1.1. Instalasi JDK dan JRE 452
8.1.2. JavaScript sederhana 463
8.2. Komentar 464
8.3. Variabel 466
8.4. Tipe data 466
8.5. Operator 468
8.5.1. Operator aritmatik 468
8.5.2. Operator pemberian nilai 468
8.5.3. Operator bitwise 469
8.5.4. Operator perbandingan 469
8.5.5. Operator logika 470
8.5.6. Operator string 470
8.6. Aliran Kontrol Program 472
8.6.1. Pencabangan 472
8.6.1.1. Pernyataan if ... else 472
8.6.1.2. Pernyataan switch 474
8.6.2. Pengulangan bersarang 476
8.6.2.1. Pernyataan for 476
8.6.2.2. Pernyataan while 478
8.6.2.3. Pernyataan do ... while 479
8.6.2.4. Pernyataan break dan continue 481
8.7. Function 482
8.8. Event 484
8.9. Exception handling 488
8.10. Applet 493
8.11. Koneksi dengan basisdata 500
8.11.1. Persiapan basisdata 500
8.11.2. Koneksi dengan basisdata menggunakan JavaScript
502


9 APLIKASI WEB BERBASIS JSP 507
9.1. Konsep JSP 507
9.1.1. Teknologi JSP 507
9.1.2. Kelebihan JSP 508
9.2. Persiapan server untuk aplikasi web berbasis JSP 511
9.2.1. Software requirement 511
9.2.2. Instalasi JSP container 512
9.2.2.1. Menginstal Tomcat 512
9.2.2.2. Informasi server 518
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan ix
9.2.2.3. Membuat direktori /myjsp 520
9.3. Aplikasi web berbasis JSP 523
9.3.1. JSP sederhana 523
9.3.2. Macam tag JSP 524
9.3.3. Directive 525
9.3.3.1. Page Directive 525
9.3.3.2. Include Directive 527
9.3.3.3. Library Directive 529
9.3.4. Exception Handling 530
9.4. Penyimpanan state pada client dan server 532
9.4.1. State pada client 533
9.4.2. State pada server 537
9.5. Koneksi JSP dengan basisdata 541
9.5.1. Persiapan 541
9.5.2. Skrip koneksi dengan basisdata 549
9.5.2.1. Memanggil driver JDBC 550
9.5.2.2. Membuat koneksi 550
9.5.2.3. Menangani statement 551
9.5.2.4. Dealokasi basisdata 551
9.5.3. Pengujian koneksi basisdata 552

Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan x
DAFTAR TABEL


Tabel 2 1 Tag dasar dokumen HTML 44
Tabel 2 2 Tag pemformatan 54
Tabel 2 3 Tag-tag computer output 55
Tabel 2 4 Tag citation, quotation, definition 55
Tabel 2 5 Entitas karakter 57
Tabel 2 6 Tag ordered list 59
Tabel 2 7 Tag list 64
Tabel 2 8 Tag image 95
Tabel 2 9 Elemen-elemen tabel 96
Tabel 2 10 Atribut tabel 97
Tabel 2 11 Tag table 116
Tabel 2 12 Tag target frame 117
Tabel 2 13 Tag frame 122
Tabel 2 14 Tag form 138

Tabel 3 1 Schedule kerja 145

Tabel 4 1 Tag data form 216
Tabel 4 2 Daftar Tipe-Tipe Data 223
Tabel 4 3 Daftar nilai balik fungsi VarType 223
Tabel 4 4 Daftar Operator Aritmatika 229
Tabel 4 5 Daftar Prioritas Operator Aritmatika 229
Tabel 4 6 Daftar Operator Pembanding 232
Tabel 4 7 Daftar Operator Logika dan Prioritasnya 233
Tabel 4 8 Kriteria Produktifitas Pegawai/Karyawan 239
Tabel 4 9 Daftar properti pada objek Err 277

Tabel 5 1 Tag objek Response 280
Tabel 5 2 Tag request 287
Tabel 5 3 Parameter Servervariables 294
Tabel 5 4 Objek server 296
Tabel 5 5 Tag application 302
Tabel 5 6 Objek session 305
Tabel 5 7 Object context 307
Tabel 5 8 Tag dictionary 309
Tabel 5 9 Kategori objek FileSystemObject 313
Tabel 5 10 Property, collection dan method pada objek folder 316
Tabel 5 11 Objek Err 329

Tabel 6 1 Tombol ukuran 342
Tabel 6 2 Daftar field 345
Tabel 6 3 Tombol navigasi 348
Tabel 6 4 Menu penunjuk record 348
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xi
Tabel 6 5 Karakter dan fungsi 373
Tabel 6 6 Tombol font 379
Tabel 6 7 Tombol pilihan record 387

Tabel 7 1 Struktur tabel Departemen 406
Tabel 7 2 Struktur tabel Kerja 406
Tabel 7 3 Struktur tabel Lokasi 407
Tabel 7 4 Struktur tabel Pegawai 407
Tabel 7 5 Struktur tabel Status Job 408
Tabel 7 6 Penempatan posisi kursor 434
Tabel 7 7 Pencarian record 435
Tabel 7 8 Field collection 443

Tabel 8 1 Operator binary 468
Tabel 8 2 Operator unary 468
Tabel 8 3 Operator-operator pemberian nilai 469
Tabel 8 4 Operator bitwise 469
Tabel 8 5 Operator perbandingan 469
Tabel 8 6 Operator logika 470
Tabel 8 7 Operator string 470
Tabel 8 8 Jenis kejadian 484
Tabel 8 9 Struktur tabel Daftar 500

Tabel 9 1 Fungsi atribut dalam page directive 525
Tabel 9 2 Value atribut page directive 526
Tabel 9 3 Interface javax.servlet.http.HttpSession 533
Tabel 9 4 Interface javax.servlet.http.HttpSession 537
Tabel 9 5 Struktur tabel Daftar 542

Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xii
DAFTAR GAMBAR


Gambar 1 1 Ilustrasi hubungan antar sistem komputer dalam internet 3
Gambar 1 2 Arsitektur jaringan internet. 4
Gambar 1 3 Skema web 7
Gambar 1 4 Situs web yang cukup terkenal 10
Gambar 1 5 Contoh situs web yang pernah mendapat penghargaan 11
Gambar 1 6 Altavista (http://www.altavista.com) 12
Gambar 1 7 Situs web yang dimasukkan ke dalam bookmark 13
Gambar 1 8 Fungsi situs web 14
Gambar 1 9 Informasi jadual penerbangan 15
Gambar 1 10 Proses transaksi reservasi penerbangan 16
Gambar 1 11 Contoh domain e-learning 21
Gambar 1 12 Domain Friendster 22
Gambar 1 13 Portal Departemen Pendidikan Nasional 23
Gambar 1 14 Web personal milik Paul Francis 23

Gambar 2 1 Teknologi hypertext 25
Gambar 2 2 Hasil tampilan web browser untuk Latihan 2-1. 30
Gambar 2 3 Hasil tampilan web browser untuk Latihan 2-2. 32
Gambar 2 4 Hasil tampilan web browser untuk Latihan 2-3. 35
Gambar 2 5 Hasil tampilan web browser untuk Latihan 2-4. 36
Gambar 2 6 Hasil tampilan web browser untuk Latihan 2-5. 37
Gambar 2 7 Hasil tampilan web browser untuk Latihan 2-6. 39
Gambar 2 8 Hasil tampilan web browser untuk Latihan 2-7. 40
Gambar 2 9 Hasil tampilan web browser untuk Latihan 2-8. 41
Gambar 2 10 Hasil tampilan web browser untuk Latihan 2-9. 42
Gambar 2 11 Hasil tampilan web browser untuk Latihan 2-10. 43
Gambar 2 12 Hasil tampilan web browser untuk Latihan 2-11. 46
Gambar 2 13 Hasil tampilan web browser untuk Latihan 2-12. 47
Gambar 2 14 Hasil tampilan web browser untuk Latihan 2-13. 48
Gambar 2 15 Hasil tampilan web browser untuk Latihan 2-14. 49
Gambar 2 16 Hasil tampilan web browser untuk Latihan 2-15. 50
Gambar 2 17 Hasil tampilan web browser untuk Latihan 2-16. 51
Gambar 2 18 Hasil tampilan web browser untuk Latihan 2-17. 53
Gambar 2 19 Hasil tampilan web browser untuk Latihan 2-18. 54
Gambar 2 20 Hasil tampilan web browser untuk Latihan 2-19. 56
Gambar 2 21 Hasil tampilan web browser untuk Latihan 2-20. 58
Gambar 2 22 Hasil tampilan web browser untuk Latihan 2-21. 60
Gambar 2 23 Hasil tampilan web browser untuk Latihan 2-22. 61
Gambar 2 24 Hasil tampilan web browser untuk Latihan 2-23. 62
Gambar 2 25 Hasil tampilan web browser untuk Latihan 2-24. 63
Gambar 2 26 Hasil tampilan web browser untuk Latihan 2-25. 67
Gambar 2 27 Hasil tampilan web browser untuk Latihan 2-26. 68
Gambar 2 28 Hasil tampilan web browser untuk Latihan 2-27. 69
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xiii
Gambar 2 29 Hasil tampilan web browser untuk Latihan 2-28. 71
Gambar 2 30 Hasil tampilan web browser untuk Latihan 2-29. 72
Gambar 2 31 Link antar dokumen 73
Gambar 2 32 Hasil tampilan web browser untuk Latihan 2-30. 75
Gambar 2 33 Hasil tampilan web browser untuk Latihan 2-31. 76
Gambar 2 34 Hasil tampilan web browser untuk Latihan 2-32. 77
Gambar 2 35 Link antar bagian dalam dokumen. 78
Gambar 2 36 Hasil tampilan web browser untuk Latihan 2-33. 80
Gambar 2 37 Hasil tampilan web browser untuk Latihan 2-33 yang diklik
pada pilihan Topik Tiga. 81
Gambar 2 38 Hasil tampilan web browser untuk Latihan 2-34. 82
Gambar 2 39 Hasil tampilan web browser untuk Latihan 2-35. 83
Gambar 2 40 Hasil tampilan web browser untuk Latihan 2-36. 84
Gambar 2 41 Hasil tampilan web browser untuk Latihan 2-37. 85
Gambar 2 42 Hasil tampilan web browser untuk Latihan 2-38. 86
Gambar 2 43 Hasil tampilan web browser untuk Latihan 2-39. 87
Gambar 2 44 Hasil tampilan web browser untuk Latihan 2-40. 93
Gambar 2 45 Hasil tampilan web browser untuk Latihan 2-41 sampai
dengan 2-43. 95
Gambar 2 46 Hasil tampilan web browser untuk Latihan 2-44. 98
Gambar 2 47 Hasil tampilan web browser untuk Latihan 2-45. 99
Gambar 2 48 Hasil tampilan web browser untuk Latihan 2-46. 100
Gambar 2 49 Hasil tampilan web browser untuk Latihan 2-47. 101
Gambar 2 50 Hasil tampilan web browser untuk Latihan 2-48. 102
Gambar 2 51 Hasil tampilan web browser untuk Latihan 2-49. 103
Gambar 2 52 Hasil tampilan web browser untuk Latihan 2-50. 104
Gambar 2 53 Hasil tampilan web browser untuk Latihan 2-51. 106
Gambar 2 54 Hasil tampilan web browser untuk Latihan 2-52. 107
Gambar 2 55 Hasil tampilan web browser untuk Latihan 2-53. 108
Gambar 2 56 Hasil tampilan web browser untuk Latihan 2-54. 109
Gambar 2 57 Hasil tampilan web browser untuk Latihan 2-55. 110
Gambar 2 58 Hasil tampilan web browser untuk Latihan 2-56. 111
Gambar 2 59 Hasil tampilan web browser untuk Latihan 2-57. 113
Gambar 2 60 Hasil tampilan web browser untuk Latihan 2-58. 116
Gambar 2 61 Hasil tampilan web browser untuk Latihan 2-59. 118
Gambar 2 62 Hasil tampilan web browser untuk Latihan 2-60. 119
Gambar 2 63 Hasil tampilan web browser untuk Latihan 2-61. 120
Gambar 2 64 Hasil tampilan web browser untuk Latihan 2-62. 121
Gambar 2 65 Hasil tampilan web browser untuk Latihan 2-63. 122
Gambar 2 66 Hasil tampilan web browser untuk Latihan 2-64. 125
Gambar 2 67 Hasil tampilan web browser untuk Latihan 2-65. 126
Gambar 2 68 Hasil tampilan web browser untuk Latihan 2-66. 127
Gambar 2 69 Hasil tampilan web browser untuk Latihan 2-67. 128
Gambar 2 70 Hasil tampilan web browser untuk Latihan 2-68. 129
Gambar 2 71 Hasil tampilan web browser untuk Latihan 2-69. 130
Gambar 2 72 Hasil tampilan web browser untuk Latihan 2-70. 131
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xiv
Gambar 2 73 Hasil tampilan web browser untuk Latihan 2-71. 132
Gambar 2 74 Hasil tampilan web browser untuk Latihan 2-72. 133
Gambar 2 75 Hasil tampilan web browser untuk Latihan 2-73. 134
Gambar 2 76 Hasil tampilan web browser untuk Latihan 2-74. 135
Gambar 2 77 Hasil tampilan web browser untuk Latihan 2-75. 136
Gambar 2 78 Hasil tampilan web browser untuk Latihan 2-76. 137
Gambar 2 79 Pemblokiran content 140
Gambar 2 80 Peringatan mengaktifkan content 140
Gambar 2 81 Hasil tampilan web browser untuk Latihan 2-77. 141
Gambar 2 82 Hasil tampilan akhir web browser untuk Latihan 2-78. 143
Gambar 2 83 Hasil tampilan web browser untuk Latihan 2-79. 144

Gambar 3 1 Site map website 148
Gambar 3 2 Sketsa website 148
Gambar 3 3 Membuka Microsoft Office Publisher 150
Gambar 3 4 Submenu Web Sites and E-mail 150
Gambar 3 5 Pilihan dalam submenu Web Sites 151
Gambar 3 6 Desain 3-Page Web Site 151
Gambar 3 7 Pilihan pada Axis 3-Page Web Site 152
Gambar 3 8 Tampilan lay-out Axis 3-Page Web Site 153
Gambar 3 9 Simpan file MyPublication 154
Gambar 3 10 Mengedit simbol Organization 155
Gambar 3 11 Change picture 155
Gambar 3 12 Konfirmasi penggantian logo 156
Gambar 3 13 Hasil penggantian simbol organisasi 156
Gambar 3 14 Meng-edit logo organisasi 157
Gambar 3 15 Logo option untuk mengganti logo 157
Gambar 3 16 Hasil penggantian simbol organisasi 158
Gambar 3 17 Personal information 159
Gambar 3 18 Hasil editing personal information 159
Gambar 3 19 Hasil editing halaman web 160
Gambar 3 20 Hasil editing pada bagian bawah 161
Gambar 3 21 Hasil editing untuk content 162
Gambar 3 22 Halaman utama website kita 163
Gambar 3 23 Halaman ABOUT US 164
Gambar 3 24 Halaman CONTACT US 164
Gambar 3 25 Membuat hyperlink untuk item pertama 165
Gambar 3 26 Link item pertama dengan dokumen 2005_lit_jsdj.pdf 166
Gambar 3 27 Hyperlink untuk item pertama sudah terbentuk 166
Gambar 3 28 Link untuk semua item telah terbentuk 167
Gambar 3 29 Menu publish to the web 168
Gambar 3 30 Tampilan nama halaman index.html pada folder LocalHost
169
Gambar 3 31 Dialog penjelasan pembuatan file HTML 169
Gambar 3 32 Isi folder LocalHost 170
Gambar 3 33 Tampilan halaman utama web site 171
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xv
Gambar 3 34 Tampilan halaman ABOUT US 171
Gambar 3 35 Tampilan halaman CONTACT US 172
Gambar 3 36 Tampilan dokumen pada item pertama 173
Gambar 3 37 Hasil pencarian free domain 176
Gambar 3 38 Website SynthaSite, HOME 177
Gambar 3 39 Pembuatan halaman web tahap 1 177
Gambar 3 40 Pembuatan halaman web tahap 2 178
Gambar 3 41 Pilihan desain: style 36 (Entomology) 179
Gambar 3 42 Tampilan desain web 179
Gambar 3 43 New page untuk halaman About Us 180
Gambar 3 44 Halaman About Us 181
Gambar 3 45 Halaman Contact Us 181
Gambar 3 46 Window untuk melakukan change style 182
Gambar 3 47 Hasil perubahan style 183
Gambar 3 48 Pilihan desain: Easy web site builder 184
Gambar 3 49 Website JSPersonal INFO 184
Gambar 3 50 Website JSPersonal INFO setelah di-scroll ke bawah 185
Gambar 3 51 Permintaan username dan password pada cPanel 186
Gambar 3 52 Lingkungan cPanel setelah di-scroll ke bawah 187
Gambar 3 53 Fasilitas file manager 187
Gambar 3 54 Upload file index.html 188
Gambar 3 55 File index.html sudah berada pada tempatnya 189
Gambar 3 56 Window untuk meng-upload file 189
Gambar 3 57 Pemilihan file yang akan di-upload 190
Gambar 3 58 Proses upload file-file pdf 190
Gambar 3 59 Hasil proses upload file-file pdf 191
Gambar 3 60 Tampilan situs web yang telah dipublished 192
Gambar 3 61 Artikel yang ditawarkan 193
Gambar 3 62 Tampilan artikel pdf 194
Gambar 3 63 Penyimpanan file pdf hasil download 195
Gambar 3 64 Folder tempat penyimpanan hasil download file pdf 195
Gambar 3 65 File pdf hasil download yang telah dibuka 196

Gambar 4 1 Client-side 201
Gambar 4 2 Server-side 201
Gambar 4 3 Proses pengaksesan Basisdata pada skrip ASP 203
Gambar 4 4 Kotak Dialog Add or Remove Prorams 205
Gambar 4 5 Kotak Dialog Windows Components Wizard 205
Gambar 4 6 Kotak Dialog Windows Components Wizard 206
Gambar 4 7 Kotak Dialog Windows Components Wizard 206
Gambar 4 8 Kotak dialog Windows Components Wizard 207
Gambar 4 9 Penjelasan dokumentasi IIS 207
Gambar 4 10 Tampilan Hasil Uji Skrip uji.asp 208
Gambar 4 11 Kode HTML dari sisi client 209
Gambar 4 12 Virtual Direktori 210
Gambar 4 13 Kotak dialog Control Panel 211
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xvi
Gambar 4 14 Kotak dialog Network Connections 211
Gambar 4 15 Kotak dialog Network Connections 212
Gambar 4 16 Kotak setting LAN Properties 212
Gambar 4 17 Kotak setting LAN Properties 213
Gambar 4 18 Kotak dialog Internet protocol (TCP/IP) Properties 213
Gambar 4 19 Kotak dialog Advanced TCP/IP Settings 214
Gambar 4 20 Kotak dialog Advanced TCP/IP Settings 214
Gambar 4 21 Penambahan alamat IP DNS Server 215
Gambar 4 22 Proses Undirectional 216
Gambar 4 23 Proses Bidirectional 217
Gambar 4 24 Tampilan hasil Skrip1.asp 219
Gambar 4 25 Latihan contoh hasil ekspresi 220
Gambar 4 26 Proses perubahan nilai variabel 220
Gambar 4 27 Latihan contoh hasil pendeklarasian variabel 221
Gambar 4 28 Latihan contoh hasil tipe data variabel 222
Gambar 4 29 Latihan contoh hasil VarType data variabel 224
Gambar 4 30 Latihan contoh hasil penggunaan konstanta 226
Gambar 4 31 Latihan contoh hasil Literal String 227
Gambar 4 32 Ekspresi, operator dan operand. 228
Gambar 4 33 Latihan contoh hasil Operasi Aritmatika 230
Gambar 4 34 Latihan contoh hasil Operator Konkatenasi 231
Gambar 4 35 Latihan contoh hasil Operator Pembanding 233
Gambar 4 36 Latihan contoh hasil Operator Logika 234
Gambar 4 37 Latihan contoh hasil pernyataan IF tanpa Else 237
Gambar 4 38 Latihan contoh hasil pernyataan IF . . . Else 238
Gambar 4 39 Latihan contoh hasil pernyataan IF Bersarang 240
Gambar 4 40 Alur Pernyataan Select Case 241
Gambar 4 41 Latihan contoh hasil pernyataan Case Select (setelah pilih c)
243
Gambar 4 42 Diagram alir Do While . . . Loop 244
Gambar 4 43 Latihan contoh hasil pernyataan Do While ... Loop 245
Gambar 4 44 Diagram alir Do. . . Loop While 246
Gambar 4 45 Latihan contoh hasil pernyataan pengulangan Do . . . Loop
Until 247
Gambar 4 46 Latihan contoh hasil pernyataan pengulangan For 249
Gambar 4 47 Latihan contoh hasil pernyataan pengulangan For dengan
Step 250
Gambar 4 48 Latihan contoh hasil pernyataan Exit 251
Gambar 4 49 Ilustrasi penerapan Array dengan 7 elemen data 252
Gambar 4 50 Ilustrasi pengaksesan indkes Array dengan 7 elemen data
253
Gambar 4 51 Latihan contoh penggunaan indeks Array 254
Gambar 4 52 Latihan pendeklarasian yang indeksnya diluar yang tersedia
256
Gambar 4 53 Hasil Latihan pendeklarasian array dinamis 257
Gambar 4 54 Latihan penggunaan pernyataan Erase 258
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xvii
Gambar 4 55 Ilustrasi Array berdimensi dua 259
Gambar 4 56 Latihan penggunaan pernyataan Array berdimensi 260
Gambar 4 57 Latihan pembuatan subrutin 262
Gambar 4 58 Latihan pembuatan subrutin tanpa argumen 263
Gambar 4 59 Hasil penggunaan instruksi Exit Sub sebelum subrutin
selesai 264
Gambar 4 60 Hasil pembuatan fungsi 266
Gambar 4 61 Hasil tampilan pelewatan dengan referensi (berubah) 268
Gambar 4 62 Hasil tampilan pelewatan dengan nilai 269
Gambar 4 63 Hasil tampilan pemakaian variabel global dan lokal 270
Gambar 4 64 Hasil tampilan pemakaian direktif 271
Gambar 4 65 Hasil tampilan tanpa penggunaan VbCrLf 273
Gambar 4 66 Hasil tampilan View-Source HTML tanpa penggunaan
VbCrLf 273
Gambar 4 67 Hasil View-Source HTML menggunakan konstanta VbCrLf
274
Gambar 4 68 Pesan kesalahan pemakai yang tidak memasukan nilai
berupa angka 277

Gambar 5 1 Hubungan antar Objek dalam ASP 280
Gambar 5 2 Latihan untuk objek response.write 281
Gambar 5 3 Latihan untuk objek response.buffer 283
Gambar 5 4 Latihan untuk objek response.redirect 285
Gambar 5 5 Latihan untuk objek response.isclientconnected 286
Gambar 5 6 Hasil pembuatan form input data 289
Gambar 5 7 Latihan untuk objek request.querystring 290
Gambar 5 8 Hasil pembuatan form input data 291
Gambar 5 9 Latihan untuk objek request.form 292
Gambar 5 10 Request cookies 01 293
Gambar 5 11 Request cookies 02 294
Gambar 5 12 Server variable 295
Gambar 5 13 Hasil Latihan Objek Server.ScriptTimeout 297
Gambar 5 14 Hasil Latihan Objek Server.HTMLEncode 298
Gambar 5 15 Hasil latihan pengambilan data URLEncode 299
Gambar 5 16 Hasil Pengambilan Data 200 299
Gambar 5 17 Hasil Latihan objek Server.Mappath 300
Gambar 5 18 Hasil Latihan objek CreateObject 301
Gambar 5 19 Hasil tampilan objek Application sebelum kirim 303
Gambar 5 20 Hasil tampilan objek Application setelah kirim 304
Gambar 5 21 Ilustrasi penerapan objek session 305
Gambar 5 22 Ilustrasi penerapan objek dictionary 309
Gambar 5 23 Hasil tampilan latihan objek Dictionary 310
Gambar 5 24 Hasil tampilan Skrip53.asp 311
Gambar 5 25 Hasil tampilan Skrip54.asp 312
Gambar 5 26 Hasil latihan objek drive melihat nama volume drive E 314
Gambar 5 27 Hasil latihan objek drive melihat kapasitas drive c 315
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xviii
Gambar 5 28 Hasil latihan objek drive melihat sisa kapasitas drive c 316
Gambar 5 29 Hasil latihan objek folder melihat atribut c:\windows 317
Gambar 5 30 Hasil latihan objek folder melihat status folder 318
Gambar 5 31 Hasil latihan objek folder melihat letak posisi folder 318
Gambar 5 32 Hasil latihan objek folder melihat size/ukuran folder 319
Gambar 5 33 Hasil latihan objek file melihat atribut file (32=archive) 320
Gambar 5 34 Hasil latihan objek file melihat status akses file 321
Gambar 5 35 Hasil latihan objek file melihat lokasi file 321
Gambar 5 36 Hasil latihan objek file melihat ukuran/size file 322
Gambar 5 37 Hasil latihan objek file melihat type file 323
Gambar 5 38 Hasil latihan membuat folder 324
Gambar 5 39 Hasil latihan menghapus folder c:\buatfolder 325
Gambar 5 40 Hasil latihan membuat file 326
Gambar 5 41 Hasil latihan membuka file 327
Gambar 5 42 Hasil latihan mengcopy file 328
Gambar 5 43 Hasil latihan menghapus file 329
Gambar 5 44 Hasil latihan pengubahan statemen error 330

Gambar 6 1 Arsitektur 3-skema 335
Gambar 6 2 Contoh diagram ER suatu basisdata 336
Gambar 6 3 Jendela aplikasi Access dan task pane 339
Gambar 6 4 Task pane New File 340
Gambar 6 5 Jendela File New Database 340
Gambar 6 6 Tampilan basisdata yang telah Anda buat 341
Gambar 6 7 Lingkungan kerja Microsoft Access 341
Gambar 6 8 Dialog peringatan 343
Gambar 6 9 Jendela create table 344
Gambar 6 10 Pendefinisian field pada tabel 346
Gambar 6 11 Hasil pembuatan tabel Pegawai kosong 347
Gambar 6 12 Tabel Pegawai yang telah diisi record-nya 347
Gambar 6 13 Tabel yang telah dibuat dalam basisdata COMPANY 350
Gambar 6 14 Pilihan format datasheet 353
Gambar 6 15 Jendela kerja relationship 355
Gambar 6 16 Jendela edit relationship, pembuatan relasi ke-1 356
Gambar 6 17 Jendela edit relationship, pembuatan relasi ke-2 356
Gambar 6 18 Hasil pembuatan relasi antar tabel 357
Gambar 6 19 Hasil pengurutan Ascending 358
Gambar 6 20 Hasil filter by selection dengan kriteria Satria 359
Gambar 6 21 Hasil filter by selection dengan kriteria selain Satria 359
Gambar 6 22 Hasil filter by form dengan kriteria jam kerja = 11 360
Gambar 6 23 Hasil filter by form dengan kriteria kode job = 1131 361
Gambar 6 24 Design query dan pemilihan tabel 362
Gambar 6 25 Design query dan tampilan relasi tabel 363
Gambar 6 26 Design query dan pembuatan query 364
Gambar 6 27 Tampilan hasil query 364
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xix
Gambar 6 28 Hasil penambahan field baru yang berisi hasil perhitungan
367
Gambar 6 29 Pembuatan perhitungan dengan expression builder 368
Gambar 6 30 Persiapan pembuatan query 369
Gambar 6 31 Pembuatan query total 370
Gambar 6 32 Hasil query total 371
Gambar 6 33 Pemilihan field yang akan diisi lewat form 374
Gambar 6 34 Pemilihan jenis form 375
Gambar 6 35 Pemilihan gaya/style form 375
Gambar 6 36 Tampilan form yang telah dibuat 376
Gambar 6 37 Design view pada form 377
Gambar 6 38 Pembuatan header pada form 379
Gambar 6 39 Jendela pembuatan combo box 381
Gambar 6 40 Pengisian field yang menjadi pilihan combo box 382
Gambar 6 41 Pemilihan field dan cara sortingnya 382
Gambar 6 42 Penetapan lebar kolom yang akan ditampilkan 383
Gambar 6 43 Pemilihan field apa yang akan disimpan 383
Gambar 6 44 Penyimpanan nilai pilihan pada field Kode Dep 384
Gambar 6 45 Pemberian label Kode Departemen pada combo box 384
Gambar 6 46 Tampilan combo box 385
Gambar 6 47 Pemilihan kategori dan aksi bila tombol ditekan 385
Gambar 6 48 Penulisan teks pada tombol 386
Gambar 6 49 Pemberian nama tombol (button) 386
Gambar 6 50 Tampilan design view setelah diberi button 387
Gambar 6 51 Jendela pembuatan Macro 389
Gambar 6 52 Tampilan halaman Macro Builder 389
Gambar 6 53 Pembuatan Macro Close untuk Form Status Job 390
Gambar 6 54 Pemberian nama pada Macro 390
Gambar 6 55 Form Status Job dibuka kembali pada Design View 391
Gambar 6 56 Pilihan Categories dan Actions 391
Gambar 6 57 Pemilihan Macro mana yang akan digunakan 392
Gambar 6 58 Pembuatan teks pada button 392
Gambar 6 59 Penulisan nama button 393
Gambar 6 60 Form Status Job yang telah ditempeli Macro Close Form
393
Gambar 6 61 Tampilan Form Status Job setelah diberi Macro Close
Form 394
Gambar 6 62 Pemilihan tabel dan field yang akan ditampilkan dalam
laporan 395
Gambar 6 63 Pilihan laporan dalam bentuk group 396
Gambar 6 64 Laporan dikelompokkan dalam JK 396
Gambar 6 65 Penetapan kunci untuk mengurutkan 397
Gambar 6 66 Pilihan lay-out laporan 397
Gambar 6 67 Pemilihan style/gaya tampilan laporan 398
Gambar 6 68 Penulisan judul laporan 398
Gambar 6 69 Hasil preview laporan 399
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xx
Gambar 6 70 Panel queries pada basisdata COMPANY 402
Gambar 6 71 Tampilan Query Departemen Pegawai 402
Gambar 6 72 Mengaktifkan SQL View 403
Gambar 6 73 SQL view dalam Design Query 403

Gambar 7 1 Data tabel Departemen 406
Gambar 7 2 Data tabel Kerja 407
Gambar 7 3 Data tabel Lokasi 407
Gambar 7 4 Data tabel Pegawai 408
Gambar 7 5 Data tabel Status Job 408
Gambar 7 6 Kotak dialog Security Wizard 409
Gambar 7 7 Tampilan kotak dialog Security Wizard tahap kedua 410
Gambar 7 8 Kotak dialog Security Wizard untuk mengatur objek data 410
Gambar 7 9 Kotak dialog Security Wizard untuk menentukan grup 411
Gambar 7 10 Kotak dialog Security Wizard untuk pemilihan () grup 411
Gambar 7 11 Kotak dialog Security Wizard untuk pemberian akses grup
pemakai 412
Gambar 7 12 Kotak dialog Security Wizard untuk pembuatan pemakai
412
Gambar 7 13 Kotak dialog Security Wizard untuk pembuatan pemakai
yanti dengan passwordnya 413
Gambar 7 14 Kotak dialog Security Wizard hasil pembuatan pemakai baru
413
Gambar 7 15 Kotak dialog Security Wizard penentuan hak pemakai 414
Gambar 7 16 Kotak dialog Security Wizard yanti -> full permissions 414
Gambar 7 17 Kotak dialog Security Wizard untuk penentuan cadangan
basisdata company yang tidak diberi security 415
Gambar 7 18 One-step security wizard report 415
Gambar 7 19 Kotak dialog Security Wizard pemberian pesan untuk
menyimpan laporan sebagai suatu berkas 416
Gambar 7 20 Kotak dialog Security Wizard pemberitahuan hasil
pengamanan 416
Gambar 7 21 Kotak dialog masuk/login basisdata dengan menggunakan
nama pemakai dan passwordnya 416
Gambar 7 22 Tampilan pilihan menu Administrative Tools 418
Gambar 7 23 Kotak dialog ODBC Data Source Administrator 418
Gambar 7 24 Kotak dialog ODBC Data Source Administrator 419
Gambar 7 25 Kotak dialog Create New Data Source 419
Gambar 7 26 Kotak dialog Create New Data Source 420
Gambar 7 27 Kotak dialog ODBC Microsoft Access Setup 420
Gambar 7 28 Kotak dialog Select Database 421
Gambar 7 29 Kotak dialog Select Database 421
Gambar 7 30 Kotak dialog ODBC Microsoft Access Setup 422
Gambar 7 31 Kotak dialog ODBC Microsoft Access Setup 422
Gambar 7 32 Kotak dialog Select System Database 423
Gambar 7 33 Kotak dialog ODBC Microsoft Access Setup 423
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxi
Gambar 7 34 Kotak dialog ODBC Data Source Administrator 424
Gambar 7 35 Pembangunan koneksi ke basisdata dengan Open pada
recordset 426
Gambar 7 36 Tampilan hasil uji objek connection 427
Gambar 7 37 Hasil tampilan data isi tabel 429
Gambar 7 38 Hasil pesan Skrip79.asp penambahan record tabel 430
Gambar 7 39 Hasil skrip Skrip80.asp untuk menghapus record tabel 432
Gambar 7 40 Hasil skrip Skrip81.asp untuk mengubah/edit record tabel
433
Gambar 7 41 Ilustrasi penggunaan array pada method getrows 437
Gambar 7 42 Ilustrasi pengaktifan halaman dengan property absolutepage
440
Gambar 7 43 Hasil tampilan form untuk mengisikan banyak record dan
halaman 442
Gambar 7 44 Tampilan hasil halaman dan tampilan record halaman aktif
443
Gambar 7 45 Tampilan hasil melihat field suatu tabel dengan objek fields
444

Gambar 8 1 Hirarki class 450
Gambar 8 2 Class dan objek 451
Gambar 8 3 JDK setup launcher untuk windows 454
Gambar 8 4 Licence agreement Java 454
Gambar 8 5 Custom setup pada J2SE DK 455
Gambar 8 6 Installing 455
Gambar 8 7 Pemberitahuan instalasi JRE 456
Gambar 8 8 Custom setup pada J2SE RE 456
Gambar 8 9 Browser registration 457
Gambar 8 10 Installation completed 457
Gambar 8 11 Letak folder \bin 458
Gambar 8 12 System properties 459
Gambar 8 13 Environment variables 459
Gambar 8 14 New user variable 460
Gambar 8 15 Hasil pendaftaran folder \bin 460
Gambar 8 16 Menguji dengan perintah: Java 461
Gambar 8 17 Menguji dengan perintah: javac 462
Gambar 8 18 Menguji perintah: java -version 462
Gambar 8 19 Tampilan Javascript_1.html 464
Gambar 8 20 Tampilan Javascript_2.html 465
Gambar 8 21 Tampilan Javascript_3.html 467
Gambar 8 22 Tampilan Javascript_4.html 472
Gambar 8 23 Tampilan Javascript_5.html 474
Gambar 8 24 Tampilan Javascript_7.html 476
Gambar 8 25 Tampilan Javascript_8.html 477
Gambar 8 26 Tampilan Javascript_9.html 479
Gambar 8 27 Tampilan Javascript_10.html 481
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxii
Gambar 8 28 Tampilan Javascript_11.html 482
Gambar 8 29 Tampilan Javascript_12.html untuk penerapan fungsi 484
Gambar 8 30 Tampilan Javascript_13.html karena ada onLoad 487
Gambar 8 31 Tampilan Javascript_13.html setelah klik OK 487
Gambar 8 32 Tampilan Javascript_13.html pada button B=A faktorial 488
Gambar 8 33 Tampilan alert dalam file Eksepsi_01.html 491
Gambar 8 34 Tampilan file Eksepsi_01.html setelah proses eksepsi
selesai 491
Gambar 8 35 Tampilan file Eksepsi_02.html 493
Gambar 8 36 Tampilan kompilasi Clock.java 499
Gambar 8 37 Tampilan applet Clock.class 499
Gambar 8 38 Tabel Stocks dalam Inventory.mdb 501
Gambar 8 39 Nama field dalam tabel Stocks 501
Gambar 8 40 Data dalam tabel Stocks 502
Gambar 8 41 Tampilan basisdata Inventory.mdb dalam dokumen HTML
506

Gambar 9 1 Ikon Installer Tomcat 512
Gambar 9 2 Tampilan selamat datang 513
Gambar 9 3 Tampilan license agreement 513
Gambar 9 4 Tampilan pemilihan komponen 514
Gambar 9 5 Tampilan lokasi instalasi 514
Gambar 9 6 Tampilan konfigurasi dasar Tomcat 515
Gambar 9 7 Tampilan pemilihan path 516
Gambar 9 8 Proses instalasi Tomcat 516
Gambar 9 9 Proses instalasi selesai 517
Gambar 9 10 Welcome Tomcat 518
Gambar 9 11 Connect to localhost 519
Gambar 9 12 Status server 519
Gambar 9 13 Application manager 520
Gambar 9 14 Pembuatan direktori /myjsp 521
Gambar 9 15 Sukses membuat direktori /myjsp 521
Gambar 9 16 Susunan akhir direktori server 522
Gambar 9 17 Tampilan JSPscript_01.jsp 524
Gambar 9 18 Tampilan JSPscript_02.jsp 529
Gambar 9 19 Tampilan file JSPscript_03.jsp 532
Gambar 9 20 Tampilan pertama ClientState.jsp 535
Gambar 9 21 Tampilan ClientState.jsp yang ke-12 536
Gambar 9 22 Tampilan ClientState.jsp setelah web browser ditutup 536
Gambar 9 23 Tampilan pertama ServerState.jsp 539
Gambar 9 24 Tampilan ServerState.jsp pada akses ke-8 539
Gambar 9 25 Tampilan ServerState.jsp setelah menutup web browser 540
Gambar 9 26 Tampilan ServerState.jsp setelah menutup web browser dan
di refresh 541
Gambar 9 27 Data tabel Daftar 542
Gambar 9 28 Tampilan Administrative Tools 543
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxiii
Gambar 9 29 Sistem DSN 544
Gambar 9 30 Tampilan Create New Data Source 545
Gambar 9 31 Tampilan select database 545
Gambar 9 32 Tampilan ODBC Microsoft Access Setup 546
Gambar 9 33 Tampilan select system database 546
Gambar 9 34 Tampilan kedua ODBC Microsoft Acces Setup 547
Gambar 9 35 Tampilan set advanced option 548
Gambar 9 36 System DSN mydb terbentuk 549
Gambar 9 37 Tampilan Basisdata.jsp 554
Gambar 9 38 Tampilan BasisdataEksepsi.jsp 556

Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxiv
DAFTAR LATIHAN


Latihan 2 1 Struktur dokumen HTML 29
Latihan 2 2 Pewarnaan background 32
Latihan 2 3 Dokumen HTML sederhana 34
Latihan 2 4 Paragraf 01 35
Latihan 2 5 Paragraf 02 36
Latihan 2 6 Line break 38
Latihan 2 7 Heading 39
Latihan 2 8 Letak heading 41
Latihan 2 9 Garis mendatar 42
Latihan 2 10 Komentar 43
Latihan 2 11 Format teks 45
Latihan 2 12 Preformat 46
Latihan 2 13 Komputer output 48
Latihan 2 14 Address 49
Latihan 2 15 Akronim dan singkatan 50
Latihan 2 16 Arah teks 51
Latihan 2 17 Kutipan 52
Latihan 2 18 Teks sisipan & hapus 53
Latihan 2 19 Entitas karakter 56
Latihan 2 20 List 01 57
Latihan 2 21 List 02 59
Latihan 2 22 List 03 61
Latihan 2 23 List 04 62
Latihan 2 24 List 05 63
Latihan 2 25 Image 66
Latihan 2 26 Image alignment 67
Latihan 2 27 Image floating 68
Latihan 2 28 Image adjustment 70
Latihan 2 29 Keterangan image 71
Latihan 2 30 Link 01 74
Latihan 2 31 Link 02 75
Latihan 2 32 Link 03 77
Latihan 2 33 Link antar bagian 79
Latihan 2 34 Link dalam web site yang sama dan www 81
Latihan 2 35 Link dengan windows baru 83
Latihan 2 36 Keluar dari Frame 84
Latihan 2 37 Link tanpa garis bawah 85
Latihan 2 38 Mailto 85
Latihan 2 39 Image sebagai Link 87
Latihan 2 40 Kepala 90
Latihan 2 41 Telinga 91
Latihan 2 42 Mata 91
Latihan 2 43 Bibir 92
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxv
Latihan 2 44 Tabel 97
Latihan 2 45 Border tabel 98
Latihan 2 46 Tabel tanpa border 100
Latihan 2 47 Caption 100
Latihan 2 48 Header 101
Latihan 2 49 Colspan dan rowspan 102
Latihan 2 50 Sel kosong 104
Latihan 2 51 Tag di dalam tabel 105
Latihan 2 52 Cellpadding 106
Latihan 2 53 Cellspacing 107
Latihan 2 54 Background 108
Latihan 2 55 Background sel 109
Latihan 2 56 Align 110
Latihan 2 57 Tabel dalam tabel 112
Latihan 2 58 Atribut frame 113
Latihan 2 59 Frame kolom 118
Latihan 2 60 Frame baris 119
Latihan 2 61 Frame campuran 119
Latihan 2 62 Frame navigasi 121
Latihan 2 63 Frame inline 121
Latihan 2 64 Input teks 125
Latihan 2 65 Input checkbox 126
Latihan 2 66 Input radio 1 127
Latihan 2 67 Input radio 2 128
Latihan 2 68 Dropdown box 1 129
Latihan 2 69 Dropdown box 2 130
Latihan 2 70 Text area 131
Latihan 2 71 Tombol 132
Latihan 2 72 Field data 133
Latihan 2 73 Form dengan field input 134
Latihan 2 74 Form chexk box 135
Latihan 2 75 Form tombol radio 136
Latihan 2 76 Mengirim email dari form 137
Latihan 2 77 Menambahkan objek 139
Latihan 2 78 Applet menggunakan tag <applet> 142
Latihan 2 79 Applet menggunakan tag <object> 144

Latihan 4 1 Skrip1.asp 218
Latihan 4 2 Skrip2.asp 219
Latihan 4 3 Skrip3.asp 221
Latihan 4 4 Skrip4.asp 222
Latihan 4 5 Skrip5.asp 224
Latihan 4 6 Skrip6.asp 225
Latihan 4 7 Skrip7.asp 227
Latihan 4 8 Skrip8.asp 229
Latihan 4 9 Skrip9.asp 230
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxvi
Latihan 4 10 Skrip10.asp 232
Latihan 4 11 Skrip11.asp 234
Latihan 4 12 Skrip12.asp 236
Latihan 4 13 Skrip13.asp 237
Latihan 4 14 Skrip14.asp 239
Latihan 4 15 Skrip15.asp 242
Latihan 4 16 Skrip16.asp 244
Latihan 4 17 Skrip17.asp 247
Latihan 4 18 Skrip18.asp 248
Latihan 4 19 Skrip19.asp 249
Latihan 4 20 Skrip20.asp 250
Latihan 4 21 Skrip21.asp 253
Latihan 4 22 Skrip22.asp 255
Latihan 4 23 Skrip23.asp 257
Latihan 4 24 Skrip24.asp 259
Latihan 4 25 Skrip25.asp 262
Latihan 4 26 Skrip26.asp 263
Latihan 4 27 Skrip27.asp 264
Latihan 4 28 Skrip28.asp 265
Latihan 4 29 Skrip29.asp 267
Latihan 4 30 Skrip30.asp 268
Latihan 4 31 Skrip31.asp 269
Latihan 4 32 Skrip32.asp 271
Latihan 4 33 Skrip33.asp 272
Latihan 4 34 Skrip34.asp 274
Latihan 4 35 Skrip35.asp 275

Latihan 5 1 Skrip36.asp 280
Latihan 5 2 Skrip37.asp 283
Latihan 5 3 Skrip38.asp 284
Latihan 5 4 Skrip39.asp 285
Latihan 5 5 Skrip40.htm 288
Latihan 5 6 Skrip41.asp 289
Latihan 5 7 Skrip42.html 290
Latihan 5 8 Skrip43.asp 291
Latihan 5 9 Skrip43a.asp 292
Latihan 5 10 Skrip43b.asp 293
Latihan 5 11 Skrip44.asp 295
Latihan 5 12 Skrip45.asp 296
Latihan 5 13 Skrip46.asp 297
Latihan 5 14 Skrip47a.asp 298
Latihan 5 15 Skrip47b.asp 299
Latihan 5 16 Skrip48.asp 300
Latihan 5 17 Skrip49.asp 300
Latihan 5 18 Skrip50.asp 303
Latihan 5 19 Skrip51.asp 303
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxvii
Latihan 5 20 Skrip52.asp 309
Latihan 5 21 Skrip53.asp 310
Latihan 5 22 Skrip54.asp 311
Latihan 5 23 Skrip55.asp 313
Latihan 5 24 Skrip56.asp 314
Latihan 5 25 Skrip57.asp 315
Latihan 5 26 Skrip58.asp 316
Latihan 5 27 Skrip59.asp 317
Latihan 5 28 Skrip60.asp 318
Latihan 5 29 Skrip61.asp 319
Latihan 5 30 Skrip62.asp 319
Latihan 5 31 Skrip63.asp 320
Latihan 5 32 Skrip64.asp 321
Latihan 5 33 Skrip65.asp 322
Latihan 5 34 Skrip66.asp 322
Latihan 5 35 Skrip67.asp 323
Latihan 5 36 Skrip68.asp 324
Latihan 5 37 Skrip69.asp 325
Latihan 5 38 Skrip70.asp 326
Latihan 5 39 Skrip71.asp 327
Latihan 5 40 Skrip72.asp 327
Latihan 5 41 Skrip73.asp 328
Latihan 5 42 Skrip76.asp 330

Latihan 6 1 Membuat tabel 348

Latihan 7 1 Skrip77.asp 427
Latihan 7 2 Skrip78.asp 428
Latihan 7 3 Skrip79.asp 430
Latihan 7 4 Skrip80.asp 431
Latihan 7 5 Skrip81.asp 432
Latihan 7 6 Skrip82.asp 441
Latihan 7 7 Skrip83.asp 443

Latihan 8 1 JavaScript_1.html 463
Latihan 8 2 Javascript_2.html 465
Latihan 8 3Javascript_3.html 467
Latihan 8 4 Javascript_4.html 471
Latihan 8 5 Javascript_5.htm 473
Latihan 8 6 Javascript_6.html 474
Latihan 8 7 Javascript _7.html 475
Latihan 8 8 Javascript _8.html 476
Latihan 8 9 Javascript _9.html 478
Latihan 8 10 Javascript _10.html 480
Latihan 8 11 Javascript_11.html 481
Latihan 8 12 Javascript_12.html 483
Web Design
Direktorat Pembinaan Sekolah Menengah Kejuruan xxviii
Latihan 8 13 Javascript_13.html 485
Latihan 8 14 Eksepsi_01.html 489
Latihan 8 15 Eksepsi_02.html 492
Latihan 8 16 Clock.java 494
Latihan 8 17 js_clientside_ado_example.html 502

Latihan 9 1 JSPscript_01.jsp 523
Latihan 9 2 JSPscript_02.jsp 528
Latihan 9 3 JSPscript_03.jsp 531
Latihan 9 4 ClientState.jsp 534
Latihan 9 5 ServerState.jsp 537
Latihan 9 6 Basisdata.jsp 552
Latihan 9 7 BasisdataEksepsi.jsp 555