Advertisement
loading...

 

 

Advertisement

MATERI PELATIHAN BERBASIS KOMPETENSI

SEKTOR TELEMATIKA

SUB SEKTOR PROGRAMMER KOMPUTER

 

 

 

MEMBUAT HALAMAN

WEB DINAMIS DASAR

TIK.PR04.002.01

 

 

 

 

 

BUKU INFORMASI

 

 

 

 

 

 

 

 

 

DEPARTEMEN TENAGA KERJA DAN TRANSMIGRASI R.I.

DIREKTORAT JENDERAL PEMBINAAN PELATIHAN DAN PRODUKTIVITAS

Jl. Jend. Gatot Subroto Kav.51 Lt.7.B Jakarta Selatan

 

 

DAFTAR ISI

 

DAFTAR ISI………………………………………………………………………………….. 1

 

BAB I   PENGANTAR ……………………………………………………………………… 4

1.1.           Konsep Dasar Pelatihan Berbasis Kompetensi ……………………………….. 4

1.2.           Penjelasan Modul…………………………………………………………………… 4

1.2.1 Isi Modul……………………………………………………………………… 4

1.2.2 Pelaksanaan Modul…………………………………………………………. 5

1.3.           Pengakuan Kompetensi Terkini (RCC)………………………………………….. 6

1.4.           Pengertian-pengertian Istilah……………………………………………………. 6

 

BAB II             STANDAR KOMPETENSI……………………………………………. 8

2.1.       Peta Paket Pelatihan ………………………………………………………………… 8

2.2.       Pengertian Unit Standar ……………………………………………………………. 8

2.3.       Unit Kompetensi yang Dipelajari …………………………………………………. 9

2.3.1.      Kode dan Judul Unit ……………………………………………………. 9

2.3.2.      Deskripsi Unit …………………………………………………………… 9

2.3.3.      Elemen Kompetensi …………………………………………………….. 10

2.3.4.      Batasan Variabel ………………………………………………………… 11

2.3.5.      Panduan Penilaian ………………………………………………………. 11

2.3.6.      Kompetensi Kunci ………………………………………………………. 13

BAB III STRATEGI DAN METODE PELATIHAN ………………………………….. 14

3.1.         Strategi Pelatihan …………………………………………………………………. 14

3.2.         Metode Pelatihan ………………………………………………………………….. 15

 

 

 

 

BAB IV MATERI UNIT KOMPETENSI ……………………………………………….. 16

4.1     Tujuan Instruksional Umum………………………………………………………… 16

4.2     Tujuan Instruksional Khusus………………………………………………………… 16

4.3     Pengertian Web Dinamis……………………………………………………………. 16

4.4        HTML……………………………………………………………………………………. 18

4.4.1       Tag HTML……………………………………………………………………. 18

4.4.2       Standarisasi Halaman web dan contoh dasar…………………………. 21

4.5        Javascript 23…………………………………………………………………………… 22

4.5.1       Halaman Web Dinamis sederhana………………………………………. 22

4.6        Mempersiapkan Lingkungan Teknis……………………………………………….. 24

4.6.1       Hardware…………………………………………………………………….. 25

4.6.2       Operating System………………………………………………………….. 25

4.6.3       Web server Software………………………………………………………. 27

4.6.4       Direktori……………………………………………………………………… 27

4.7        Membuat Halaman Dinamis…………………………………………………………. 31

4.7.1       Web Dinamis pada NS4-layer tag……………………………………….. 32

4.7.2       Web Dinamis pada IE4……………………………………………………. 35

4.7.3       Break dan indent baris kode……………………………………………… 38

4.7.4       Filename dan ekstension………………………………………………….. 39

4.7.5       URL,Http://localhost, IP lokal…………………………………………… 42

4.7.6       Modifikasi sesuai kebutuhan……………………………………………… 42

4.7.7       CSS……………………………………………………………………………. 43

4.7.8       Pembuatan halaman web dinamis………………………………………. 46

4.8        Menambahkan fungsi pada halaman dinamis……………………………………. 69

4.8.1       Konten Dinamis…………………………………………………………….. 69

4.8.2       Penentuan nilai string, konstanta,variabel dan array……………….. 73

4.8.3       Struktur Kontrol…………………………………………………………….. 78

4.8.4       Aplikasi antar browser bagi variabel dan staemen IF……………….. 81

4.9        Menguji dan Mengakhiri Halaman Dinamis………………………………………. 82

4.9.1       Menguji Halaman Web Dinamis………………………………………….. 82

4.9.2       Fungsi format dinamis…………………………………………………….. 85

4.9.3       Pengunjung mengakses halaman anda…………………………………. 86

4.9.4       Mengatur pengunjung dengan aman dan rahasia……………………. 87

4.9.5       Akses yang mudah…………………………………………………………. 87

4.9.6       Maksimum potensial……………………………………………………….. 87

4.9.7       Tugas kompleks/rumit…………………………………………………….. 88

4.9.8       Berhubungan dengan konsumen………………………………………… 88

4.9.9       Mengendalikan jalur Informasi…………………………………………… 88

 

BAB V  SUMBER-SUMBER YANG DIPERLUKAN UNTUK PENCAPAIAN                          KOMPETENSI …………………………………………………………………….. 89

5.1.      Sumber Daya Manusia ……………………………………………………………. 89

5.2.      Sumber-sumber Perpustakaan ………………………………………………….. 90

5.3.      Daftar Peralatan/Mesin dan Bahan …………………………………………….. 91

 

DAFTAR PUSTAKA…………………………………………………………………………. 92

 

 

 

 

 

 

 

BAB I

PENGANTAR

 

1.1.      Konsep Dasar Pelatihan Berbasis Kompetensi

  • Apakah pelatihan berdasarkan kompetensi?

Pelatihan berdasarkan kompetensi adalah pelatihan yang memperhatikan pengetahuan, keterampilan dan sikap yang diperlukan di tempat kerja agar dapat melakukan pekerjaan dengan kompeten. Standar Kompetensi dijelaskan oleh Kriteria Unjuk Kerja.

 

  • Apakah artinya menjadi kompeten ditempat kerja?

Jika Anda kompeten dalam pekerjaan tertentu, Anda memiliki seluruh keterampilan, pengetahuan dan sikap yang perlu untuk ditampilkan secara efektif ditempat kerja, sesuai dengan standar yang telah disetujui.

 

1.2  Penjelasan Modul

Modul ini didisain untuk dapat digunakan pada Pelatihan Klasikal dan Pelatihan Individual/mandiri :

  • Pelatihan klasikal adalah pelatihan yang disampaikan oleh seorang pelatih.
  • Pelatihan individual/mandiri adalah pelatihan yang dilaksanakan oleh peserta dengan menambahkan unsur-unsur/sumber-sumber yang diperlukan dengan bantuan dari pelatih.

 

1.2.1. Isi Modul

          a.       Buku Informasi

Buku informasi ini adalah sumber pelatihan untuk pelatih maupun peserta pelatihan.

 

 

 

 

b.       Buku Kerja

Buku kerja ini harus digunakan oleh peserta pelatihan untuk mencatat setiap pertanyaan dan kegiatan praktik baik dalam Pelatihan Klasikal maupun Pelatihan Individual / mandiri.

Buku ini diberikan kepada peserta pelatihan dan berisi :

Kegiatan-kegiatan yang akan membantu peserta pelatihan untuk mempelajari dan memahami informasi.

  • Kegiatan pemeriksaan yang digunakan untuk memonitor pencapaian keterampilan peserta pelatihan.
  • Kegiatan penilaian untuk menilai kemampuan peserta pelatihan dalam melaksanakan praktik kerja.

 

c.       Buku Penilaian

Buku penilaian ini digunakan oleh pelatih untuk menilai jawaban dan tanggapan peserta pelatihan pada Buku Kerja dan berisi :

  • Kegiatan-kegiatan yang dilakukan oleh peserta pelatihan sebagai pernyataan keterampilan.
  • Metode-metode yang disarankan dalam proses penilaian keterampilan peserta pelatihan.
  • Sumber-sumber yang digunakan oleh peserta pelatihan untuk mencapai keterampilan.
  • Semua jawaban pada setiap pertanyaan yang diisikan pada Buku Kerja.
  • Petunjuk bagi pelatih untuk menilai setiap kegiatan praktik.
  • Catatan pencapaian keterampilan peserta pelatihan.

 

1.2.2.    Pelaksanaan Modul

Pada pelatihan klasikal, pelatih akan :

  • Menyediakan Buku Informasi yang dapat digunakan peserta pelatihan sebagai sumber pelatihan.
  • Menyediakan salinan Buku Kerja kepada setiap peserta pelatihan.
  • Menggunakan Buku Informasi sebagai sumber utama dalam penyelenggaraan pelatihan.
  • Memastikan setiap peserta pelatihan memberikan jawaban / tanggapan dan menuliskan hasil tugas praktiknya pada Buku Kerja.

 

Pada Pelatihan individual / mandiri, peserta pelatihan akan :

  • Menggunakan Buku Informasi sebagai sumber utama pelatihan.
  • Menyelesaikan setiap kegiatan yang terdapat pada buku Kerja.
  • Memberikan jawaban pada Buku Kerja.
  • Mengisikan hasil tugas praktik pada Buku Kerja.
  • Memiliki tanggapan-tanggapan dan hasil penilaian oleh pelatih.

 

1.3    Pengakuan Kompetensi Terkini (RCC)

  • Apakah Pengakuan Kompetensi Terkini (Recognition of Current Competency).

Jika Anda telah memiliki pengetahuan dan keterampilan yang diperlukan untuk elemen unit kompetensi tertentu, Anda dapat mengajukan pengakuan kompetensi terkini (RCC). Berarti Anda tidak akan dipersyaratkan untuk belajar kembali.

  • Anda mungkin sudah memiliki pengetahuan dan keterampilan, karena Anda telah :
  1. Bekerja dalam suatu pekerjaan yang memerlukan suatu pengetahuan dan keterampilan yang sama atau
  2. Berpartisipasi dalam pelatihan yang mempelajari kompetensi yang sama atau
  3. Mempunyai pengalaman lainnya yang mengajarkan pengetahuan dan keterampilan yang sama.

 

1.4    Pengertian-pengertian Istilah

a)   Profesi

Profesi adalah suatu bidang pekerjaan yang menuntut sikap, pengetahuan serta keterampilan/keahlian kerja tertentu yang diperoleh dari proses pendidikan, pelatihan serta pengalaman kerja atau penguasaan sekumpulan kompetensi tertentu yang dituntut oleh suatu pekerjaan/jabatan.

b)   Standardisasi

Standardisasi adalah proses merumuskan, menetapkan serta menerapkan suatu standar tertentu.

c)   Penilaian / Uji Kompetensi

Penilaian atau Uji Kompetensi adalah proses pengumpulan bukti melalui perencanaan, pelaksanaan dan peninjauan ulang (review) penilaian serta keputusan mengenai apakah kompetensi sudah tercapai dengan membandingkan bukti-bukti yang dikumpulkan terhadap standar yang dipersyaratkan.

d)   Pelatihan

Pelatihan adalah proses pembelajaran yang dilaksanakan untuk mencapai suatu kompetensi tertentu dimana materi, metode dan fasilitas pelatihan serta lingkungan belajar yang ada terfokus kepada pencapaian unjuk kerja pada kompetensi yang dipelajari.

e)   Kompetensi

Kompetensi adalah kemampuan seseorang untuk menunjukkan aspek sikap, pengetahuan dan keterampilan serta penerapan dari ketiga aspek tersebut ditempat kerja untuk mencapai unjuk kerja yang ditetapkan.

f)    Standar Kompetensi

Standar kompetensi adalah standar yang ditampilkan dalam istilah-istilah hasil serta memiliki format standar yang terdiri dari judul unit, deskripsi unit, elemen kompetensi, kriteria unjuk kerja, ruang lingkup serta pedoman bukti.

g)   Sertifikat Kompetensi

Adalah pengakuan tertulis atas penguasaan suatu kompetensi tertentu kepada seseorang yang dinyatakan kompeten yang diberikan oleh Lembaga Sertifikasi Profesi.

h)   Sertifikasi Kompetensi

Adalah proses penerbitan sertifikat kompetensi melalui proses penilaian / uji kompetensi.

 

 

BAB II

STANDAR KOMPETENSI

 

 

2.1.      Peta Paket Pelatihan

Modul yang sedang Anda pelajari ini adalah untuk mencapai satu unit kompetensi, yang termasuk dalam satu paket pelatihan, yang terdiri atas unit-unit kompetensi berikut:

Untuk mempelajari modul ini perlu membaca dan memahami modul – modul lain yang berkaitan  diantaranya :

2.1.1    TIK.PR02.021.01    Menerapkan Basis Data

2.1.2    TIK.PR02.024.01    Membuat Dokumen dengan HTML sesuai spesifikasi

 

2.2.      Pengertian Unit Standar Kompetensi

Apakah Standar Kompetensi?

Setiap Standar Kompetensi menentukan :

  1. Pengetahuan dan keterampilan yang diperlukan untuk mencapai kompetensi.
  2. Standar yang diperlukan untuk mendemonstrasikan kompetensi.
  3. Kondisi dimana kompetensi dicapai.

 

Apa yang akan Anda pelajari dari Unit Kompetensi ini?

Anda akan diajarkan untuk mempersiapkan lingkungan teknis dan teknik membuat halaman dinamis (DHTML-Dynamic Hypertext Markup Language)serta menambahkan fungsi-fungsi pada halaman dinamis  yang berbasis pada dasar pembuatan Web atau HTML(Hypertext Markup Language) dan komponen penunjang lainnya.

 

 

Berapa banyak/kesempatan yang Anda miliki untuk mencapai kompetensi?

Jika Anda belum mencapai kompetensi pada usaha/kesempatan pertama, Pelatih Anda akan mengatur rencana pelatihan dengan Anda. Rencana ini akan memberikan Anda kesempatan kembali untuk meningkatkan level kompetensi Anda sesuai dengan level yang diperlukan.

Jumlah maksimum usaha/kesempatan yang disarankan adalah 3 (tiga) kali.

 

2.3.      Unit Kompetensi yang Dipelajari

Dalam sistem pelatihan, Standar Kompetensi diharapkan menjadi panduan bagi peserta pelatihan  untuk dapat :

  • mengidentifikasikan apa yang harus dikerjakan peserta pelatihan.
  • memeriksa kemajuan peserta pelatihan.
    • menyakinkan bahwa semua elemen (sub-kompetensi) dan kriteria unjuk   kerja telah dimasukkan dalam pelatihan dan penilaian.

 

 

 

2.3.1 Kode dan Judul Unit

Kode Unit     :        TIK.PR04.002.01

Judul Unit      :        Membuat halaman Web Dinamis Dasar

 

2.3.2 Deskripsi Unit

Unit kompetensi ini menetapkan kebutuhan untuk membangun halaman web dinamis.

 

 

 

 

 

 

 

2.3.3 Elemen Kompetensi

 

ELEMEN KOMPETENSI KRITERIA UNJUK KERJA
01 Mempersiapkan Lingkungan Teknis  1.1     Lingkungan pengembangan dan software server tersedia dan dapat diakses

1.2    Akses atau server jaringan disesuaikan dengan kebijaksanaan dan prosedur yang ditetapkan organisasi

1.3    Direktori virtual dibuat dan disimpan dalam direktori yang tepat untuk akses server.

02 Membuat halaman dinamis  2.1    Halaman dibuat dan disimpan dengan ekstensi yang tepat kemudian disimpan ke dalam direktori/folder yang tepat.

2.2    Kode ditambahkan di antara tag pembatas.

2.3    Break dan indent yang tepat pada baris kode dibuat ke dalam baris untuk memudahkan pembacaan.

2.4    Tag HTML digunakan pada format halaman dan konten ditambahkan sesuai dengan kebutuhan.

2.5    Halaman disimpan dalam direktori yang tepat.

2.6    Akses file melalui http://localhost, alamat IP local atau URL lengkap ditentukan.

2.7    Modifikasi dibuat sesuai kebutuhan.

03 Menambahkan fungsi-fungsi pada halaman dinamis.  3.1    Variabel-variabel dan array digunakan dan dideklarasikan menurut persyaratan.

3.2    Nilai variabel, string dan konstanta ditetapkan.

3.3    Fungsi-fungsi internal digunakan pada halaman web.

3.4    Control structure (seperti statement If, While,For,Switch) digunakan sesuai kebutuhan.

04 Menguji dan mengakhiri halaman dinamis  4.1    Halaman disimpan pada server di lokasi yang tepat.

4.2    Halaman dinamis ditampilkan pada browser dan diuji.

4.3    Fungsi format dinamis secara keseluruhan dibuat sesuai dengan kebutuhan bisnis dan pelanggan.

4.4    Halaman klien diakhiri sesuai persyaratan bisnis

 

2.3.4 Batasan Variabel     

1.       Unit ini berlaku untuk seluruh sektor teknologi informasi dan komunikasi.

2.       Membuat halaman web dinamis dasar bersifat internal pada bidang teknologi informasi dan komunikasi.

 

 

2.3.5 Panduan Penilaian

  1. Pengetahuan dan keterampilan penunjang

Untuk mendemontrasikan kompetensi, diperlukan bukti keterampilan dan pengetahuan dibidang berikut  ini :

1.1         Pengetahuan dasar yang dibutuhkan :

1.1.1        Teori pemrograman.

1.1.2        Built-in object/fungsi.

1.1.3        Teknologi internet.

1.1.4        Pemrograman stateless.

1.1.5        Teknologi dan model-model situs web.

1.1.6        Hak cipta dan properti intelektual.

1.1.7        Bahasa pemodelan E-commerce.

 

 

1.2 Keterampilan dasar.

1.2.1        HTML.

1.2.2        Keahlian desain dasar.

 

2.       Konteks penilaian

Kompetensi harus diujikan di tempat kerja atau tempat lain secara praktek dengan kondisi kerja sesuai dengan keadaan normal.

 

3.       Aspek penting penilaian

Aspek yang harus diperhatikan :

3.1     Kemampuan membuat halaman dinamis pada web.

3.2         Kemampuan menambahkan fungsi-fungsi dinamis pada web.

3.3         Kemampuan menguji halaman web dinamis.

 

4.       Kaitan dengan unit-unit lainnya

4.1     Unit ini mendukung di dalam membuat halaman web dinamis contoh mencakup Namun tidak terbatas pada :

4.1.1                                                  TIK.PR01.002.01 Menerapkan prosedur kesehatan dan keselamatan kerja.

4.1.2    Mengidentifikasi pemrograman scripting.

4.1.3    TIK.PR02.021.01 Menerapkan basis data.

4.1.4                                               TIK.PR02.024.01 Membuat dokumen dengan HTML sesuai spesifikasi.

4.1.5    TIK.PR02.025.01 Menerapkan keamanan web statik.

4.1.6    TIK.PR04.001.01 Menerapkan keamanan web dinamis.

4.1.7    TIK.PR02.026.01 Menjelaskan koneksi internet.

 

 

4.2         Unit ini juga mendukung kinerja dalam unit-unit kompetensi yang berkaitan dengan web.

4.2.1     Perancangan web

4.2.2     Pemrograman web

 

4.3     Pengembangan pelatihan untuk memenuhi persyaratan dalam unit ini perlu          dilakukan dengan hati-hati. Untuk pelatihan pra kejuruan umum, institusi harus menyediakan pelatihan yang mempertimbangkan serangkaian konteks industri seutuhnya tanpa bias terhadap sekor tertentu. Batasan variabel akan membantu dalam hal ini. Untuk sektor tertentu/khusus, pelatihan harus disesuaikan untuk memenuhi kebutuhan sektor tersebut

 

2.3.6 Kompetensi Kunci

 

 NO KOMPETENSI KUNCI DALAM UNIT INI TINGKAT

1

Mengumpulkan, mengorganisir dan menganalisa informasi

3

2

Mengkomunikasikan ide-ide dan informasi

3

3

Merencanakan dan mengorganisir aktivitas-aktivitas

3

4

Bekerja dengan orang lain dan kelompok

2

5

Menggunakan ide-ide dan teknik matematika

3

6

Memecahkan masalah

3

7

Menggunakan teknologi

3

 

 

 

 

 

 

 

 

 

BAB III

STRATEGI DAN METODE PELATIHAN

 

3.1.      Strategi Pelatihan        

Belajar dalam suatu sistem Berdasarkan Kompetensi berbeda dengan yang sedang “diajarkan” di kelas oleh Pelatih. Pada sistem ini Anda akan bertanggung jawab terhadap belajar Anda sendiri, artinya bahwa Anda perlu merencanakan belajar Anda dengan Pelatih dan kemudian melaksanakannya dengan tekun sesuai dengan rencana yang telah dibuat.

 

Persiapan/perencanaan

  1. Membaca bahan/materi yang telah diidentifikasi dalam setiap tahap belajar dengan tujuan mendapatkan tinjauan umum mengenai isi proses belajar Anda.
  2. Membuat catatan terhadap apa yang telah dibaca.
  3. Memikirkan bagaimana pengetahuan baru yang diperoleh berhubungan dengan pengetahuan dan pengalaman yang telah Anda miliki.
  4. Merencanakan aplikasi praktik pengetahuan dan keterampilan Anda.

 

Permulaan dari proses pembelajaran

  1. Mencoba mengerjakan seluruh pertanyaan dan tugas praktik yang terdapat pada tahap belajar.
  2. Merevisi dan meninjau materi belajar agar dapat menggabungkan pengetahuan Anda.

 

Pengamatan terhadap tugas praktik

  1. Mengamati keterampilan praktik yang didemonstrasikan oleh Pelatih atau orang yang telah berpengalaman lainnya.
  2. Mengajukan pertanyaan kepada Pelatih tentang konsep sulit yang Anda temukan.

 

 

 

Implementasi

  1. Menerapkan pelatihan kerja yang aman.
  2. Mengamati indicator kemajuan personal melalui kegiatan praktik.
  3. Mempraktikkan keterampilan baru yang telah Anda peroleh.

 

Penilaian

Melaksanakan tugas penilaian untuk penyelesaian belajar Anda.

 

3.2.          Metode Pelatihan      

Terdapat tiga prinsip metode belajar yang dapat digunakan. Dalam beberapa kasus, kombinasi metode belajar mungkin dapat digunakan.

 

Belajar secara mandiri

Belajar secara mandiri membolehkan Anda untuk belajar secara individual, sesuai dengan kecepatan belajarnya masing-masing. Meskipun proses belajar dilaksanakan secara bebas, Anda disarankan untuk menemui Pelatih setiap saat untuk mengkonfirmasikan kemajuan dan mengatasi kesulitan belajar.

 

Belajar Berkelompok

Belajar berkelompok memungkinkan peserta untuk dating bersama secara teratur dan berpartisipasi dalam sesi belajar berkelompok. Walaupun proses belajar memiliki prinsip sesuai dengan kecepatan belajar masing-masing, sesi kelompok memberikan interaksi antar peserta, Pelatih dan pakar/ahli dari tempat kerja.

 

 

Belajar terstruktur

Belajar terstruktur meliputi sesi pertemuan kelas secara formal yang dilaksanakan oleh Pelatih atau ahli lainnya. Sesi belajar ini umumnya mencakup topik tertentu.

 

 

BAB IV

MATERI UNIT KOMPETENSI

 

4.1  Tujuan Instruksional Umum

  • Siswa memahami langkah-langkah mempersiapkan lingkungan teknis
  • Siswa memahami pengaksesan web dinamis melalui virtual host
  • Siswa memahami apa itu web dinamis

 

4.2  Tujuan Instruksional Khusus

  • Siswa memahami langkah-langkah mempersiapkan lingkungan teknis
  • Siswa memahami pengaksesan web dinamis melalui virtual host
  • Siswa memahami pengertian web dinamis
  • Siswa memahami bagaimana menyimpan dan menjalankan script web dinamis
  • Siswa memahami konsep pembuat web dinamis dari sebuah web statis
  • Siswa mampu membuat web dinamis sederhana
  • Siswa membuat script web dinamis pada setiap browser yang berbeda
  • Siswa memahami kegunaan CSS pada sebuah website dinamis
  • Siswa memahami bagaimana membuat form validasi sederhana untuk keperluan registrasi
  • Siswa memahami fungsi-fungsi javascript untuk membuat sebuah web dinamis
  • Siswa memahami cara pembuatan web dinamis lebih interaktif
  • Siswa memahami langkah-langkah  pengujian web dinamis

 

 4.3    Pengertian Web Dinamis

Halaman web dinamis atau yang biasa disebut DHTML(Dynamic Hypertext Markup Language) tidak terlepas dari dasar utama dalam pengertian ketrampilan dasar HTML(Hypertext Markup Language) dan keahlian desain dasar. Konsep web dinamis diperkenalkan pada saat diluncurkannya generasi keempat web browser (yang kita kenal sebagai Internet Explorer 4 dan Netscape 4). Dynamic HTML atau DHTML(Web dinamis) menggambarkan kemampuan memanipulasi secara dinamis setiap detail elemen-elemen dari HTML yang memiliki perubahan potensial pada struktur dokumen secara signifikan atau digunakan untuk menggambarkan kombinasi HTML dan script yang memungkinkan dokumen tersebut beranimasi. Halaman Web dinamis memungkinkan sebuah halaman web untuk berubah setelah diaktifkan pada browser (Internet Explorer atau Netscape)-komunikasi kepada webserver untuk proses update tidak mutlak harus dilakukan. Anda dapat membayangkannya sebagai “animasi” HTML. Sebagai contoh sepotong text dapat berubah dari ukuran satu ke ukuran lainnya atau berubah warnanya atau yang lainnya, atau sebuah grafik dapat berpindah dari satu ke lokasi ke lokasi lainnya, yang terpicu oleh respon dari penggunanya contohnya dengan mengklik sebuah tombol.

Halaman web dinamis memberikan perancangnya kontrol kreatif agar mereka dapat memanipulasi setiap elemen pada tiap halaman dan merubah gaya, penempatan dan konten atau isi setiap saat. Web dinamis juga menyediakan beragam keuntungan, lebih dinamis pada halaman web, membuat mereka lebih bersifat aplikasi dinamis dan mengurangi konten yang statis. Halaman web dinamis mempersembahkan halaman yang telah terformat rapi dan memungkinkan penggunanya berinteraksi dengan konten dari halaman-halaman tersebut tanpa harus mendownload konten tambahan dari server. Yang artinya sebuah halaman dapat melakukan respon langsung terhadap aksi dari pengguna, contohnya klik pada mouse, tanpa harus mengaktifkan seluruh halaman baru dari server.

Bagi mayoritas, halaman web dinamis adalah ide atas halaman HTML yang memperlihatkan karakter dinamisnya dalam memperlihatkan atau menyembunyikan konten atau isi dari halaman. Fitur yang dinamis ini dimungkinkan melalui pertemuan antara HTML dan Javascript yang biasa dirumuskan bahwa:

 

DHTML = HTML + Javascript

Oleh sebab itu untuk pemahaman yang lebih mendalam kita akan membahas dasar induk dari halaman web dinamis yaitu HTML dan Javascript.

 

 

 

 

 4.4       HTML

HTML (Hypertext Markup Language) adalah bahasa text markup yang paling sering digunakan pada www(world wide web). Jika anda pernah menulis laporan sekolah atau memo bisnis, anda akan berhadapan dengan text markup. Dokumen anda dikembalikan dengan tinta merah, hasil revisi dari guru anda atau atasan anda. Simbol-simbol yang tertera pada penilaian editorial memberikan saran perubahan yang perlu dilakukan dalam hal interpretasi atau bahkan implementasi atau pelaksanaan. Pada skenario tadi, penilaian tersebut terpisah atau berdiri sendiri dari konten aktual pada dokumen anda. Ketika anda membuat dokumen menggunakan program word processing sebagai contoh Microsoft Word atau WordPerfect, program tersebut menggunakan bahasa penilaian dalam mengindikasikan struktur dan format pada dokumen. Apapun yang anda lihat pada layar akan terlihat seperti sebuah halaman terformat; sisanya selesai “di balik layar”. HTML adalah sebuah bahasa penilaian yang tak berada di belakang layar yang digunakan untuk memetakan web browser bagaimana terstruktur dan menampilkan halaman web.

 

4.4.1 Tag HTML

Dalam kasus HTML, perintah markup diarahkan kepada konten dasar web yang melakukan relay pada struktur dokumen pada piranti lunak browser dan mengindikasikan bagaimana anda ingin memperlihatkan konten anda. Sebagai contoh ketika anda akan memperlihatkan sebuah section pada teks dalam boldface /huruf tebal maka anda akan melapisi teks yang bersangkutan dengan penanda tag boldface, <b> dan</b>, seperti terlihat di bawah ini:

 

<b>This is important text</b>

 

Di saat browser membaca sebuah dokumen HTML yang bertanda tersebut, ini menentukan bagaimana menyediakannya pada tampilan layar dengan menentukan elemen HTML yang terdapat pada dokumen seperti pada contoh di bawah ini

Welcome to Demo Company,Inc
The world’s largest manufacturer of high quality, imaginary robotic and aeronautic products.

 

Hasil di atas merupakan hasil intepretasi sebuah halaman web dari sebuah HTML Markup: Welcome to <b> Demo Company, Inc.</b> The world’s largest manufacturer of high quality, imaginary robotic andaeronautic products.

Perlu diperhatikan bahwa tidak semua browser menyediakan fitur yang anda perkirakan akan ada dan melaksanakan operasional seperti yang anda perkirakan. Hal ini diakibatkan sebagian dari beragam macam model dan desain dari halaman web dan sebagian lainnya adalah perbedaan dari berbagai macam web browser yang saat ini dipakai.

Sebuah dokumen HTML sesungguhnya adalah sebuah file teks yang berisi informasi yang ingin anda publikasikan. Dokumen ini juga berisi instruksi yang telah tersedia, yang disebut elemen, yang mengindikasikan bagaimana sebuah web browser harus terstruktur dan menyampaikan dokumen secara tepat. Sebuah elemen terbuat dari sebuah tag awal seperti <b> dan kemudian diiringi dengan tag akhir, yang diindikasikan dengan sebuah tanda / pada tag tersebut seperti </b>.

Pasangan tag ini harus selalu menutupi konten apapun yang akan memiliki efek pada elemen termasuk teks dan HTML markup lainnya.

  • Tag untuk Format halaman dan konten

Namun beberapa elemen pada halaman web memiliki tag penutup opsional karena secara tidak langsung elemen tersebut bersifat tertutup. Elemen halaman web lainnya yang sering disebut “elemen kosong”, tidak menutup konten apapun sehingga tidak memerlukan tag penutup. Sebagai contoh dalam memasukkan sebuah line break anda harus menggunakan elemen <br>, yang merupakan sebuah elemen kosong yang tidak menutup konten apapun serta tidak memiliki hubungan dengan tag penutup.

Tag pembuka pada elemen halaman web mungkin berisi atribut yang dapat memodifikasi arti dari tag tersebut. Termasuk atribut noshade pada elemen <hr> terlihat di bawah ini:

<hr noshade>

 

Contoh di atas mengindikasikan pengaplikasian fitur tidak berbayang/noshade pada elemen horisontal. Mayoritas atribut memerlukan nilai yang dibutuhkan dalam mengeset dengan tanda yang sama; Nilai ini harus ditentukan antara tercatat dobel atau singel seperti terlihat pada contoh di bawah ini:

<img src=”logo.gif” alt=”Demo Company” height=”100” width=”100”>

 

Contoh di atas memberikan spesifikasi pada 4 atribut untuk elemen <img> yang menyediakan lebih banyak informasi mengenai pengunaan pada gambar yang termasuk di dalamnya.

Ada alternatif lain,sebuah dokumen HTML dapat mengganti elemen <body> dengan menggunakan elemen <frameset>, yang mencakup berbagai macam elemen <frame>  yang potensial dalam korespondensinya dengan porsi individual pada browser window, yang disebut frame. Tiap frame secara berurutan akan mereferensikan ke tiap dokumen HTML lain yang berisi sebuah dokumen lengkap standar dengan <html>,<head> dan <body> atau mungkin dokumen frame lain.

Elemen <frameset> juga termasuk elemen <noframes> yang menyediakan sebuah versi halaman browser yang tidak menyuport frame. Diantara elemen ini terdapat tag <body> dari browser yang menyuport non-frame. Contoh di bawah ini memberi ilustrasi template untuk dokumen yang memiliki frameset. Perlu dicatat DTD untuk sebuah dokumen frame berbeda dari dokumen normal:

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Document Title Goes Here</title>
...Head information describing the document and providing
supplementary information goes here….
</head>
<frameset>
...numerous <frame> elements here...
<noframes>
<body>
...Alternative content for non-frame aware browsers...
</body>
</noframes>
</frameset>
</html>

  

4.4.2 Standarisasi Halaman Web dan contoh dasar

Sebagai sebuah bahasa yang memiliki struktur, HTML memiliki dasar syntax yang sangat baik dan rapi. Seluruh dokumen HTML harus mengikuti struktur formal. Konsorsium World Wide Web (W3C) adalah organisasi yang mencoba menciptakan standarisasi HTML(begitu pula dengan teknologi lainnya pada web).

Dalam memenuhi standar, W3C harus hati-hati dalam menentukan spesifikasi pada seluruh aspek teknologi. Dalam hal halaman web, menentukan secara tepat elemen pada bahasa. W3C telah menyatakan bahwa halaman web sebagai sebuah aplikasi SGML (Standard Generalized Markup Language). Pada intinya, SGML adalah sebuah bahasa yang memungkinkan struktur dokumen terbentuk dalam bentuk DTD (Document Type Definition), yang memberi indikasi syntax yang dapat digunakan pada berbagai macam elemen bahasa seperti HTML.

Contoh di bawah ini menggambarkan halaman web dasar:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Document Title Goes Here</title>
...Head information describing the document and providing
supplementary information goes here….
</head>
<body>
...Document content and markup go here...

</body>
</html>

Garis pertama pada template di atas adalah <!DOCTYPE> yang menunjukkan dialek tertentu pada halaman web yang dipakai. Pada elemen halaman web , struktur dasarnya terdiri atas 2 bagian yaitu bagian “head”dan “body”. Bagian atas atau kepala dokumen, yang dideskripsikan dengan elemen <head>, memuat berbagai macam informasi yang menggambarkan dokumen tersebut seperti judul. Bagian tengah/badan dokumen yang dideskripsikan dengan elemen <body>, memuat inti dokumen itu sendiri yang diasosiasikan dengan markup yang diperlukan untuk struktur maupun presentasi.

 

 4.5    Javascript

Javascript adalah bahasa pemrograman scripting yang paling populer digunakan dalam membanguan halaman web. Sebuah bahasa scripting yang dibangun oleh Netscape. Microsoft juga membangun javascript yang terbentuk dalam form Jscript, sebuah bahasa yang digunakan pada Internet Explorer. Bahasa program ini dipatenkan kepada sebuah badan internasional standar yang disebut ECMA (European Computer Manufacturers Association atau Asosiasi Manufaktur Komputer Eropa), yang pada tahun 1997 mengesahkan ECMA-262 atau ECMA script sebagai standar internet dalam scripting. Para pemilik browser dapat melakukan modifikasi pada spesifikasi namun tetap menggunakan standar paten yang ditentukan dalam penggunaan javascript.

Javascript akan sangat familiar bagi para programer. Syntax  pada Javascript adalah semacam atau hampir mirip seperti C atau Java dengan gaya Perl yang menggunakan pengendalian ekspresif, dan merupakan sebuah bahasa program yang memiliki kemampuan orientasi objek. Javascript sesungguhnya bukanlah sebuah bahasa program yang berorientasi objek murni, dan mempertahankan fitur-fitur (seperti kelembutan dalam mengetik) yang sangat sering digunakan dalam bahasa scripting yang sederhana.

4.5.1 Halaman Web Dinamis sederhana- langkah awal

Figur di bawah ini menunjukkan sebuah contoh sederhana dari kode javascript yang digunakan untuk memberi salam bagi para pengguna:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Javascript Example</title>
<script language=”javascript”>
<!- -
function greet ()
{
alert(“Hello user! Welcome to Javascript.”);
}
//- ->
</script>
</head>
<body>
<h1 align=”center”>First Javascript Example</h1>
<div align=”center”>
<form>
<input type=”button” value=”press me” onclick=”greet()”>
</form>
</div>
</body>
</html>

 

Contoh di atas adalah sebuah contoh sederhana bagaimana Javascript dapat digabungkan dan disisipkan pada sebuah file HTML( yang mengingatkan kita pada kunci halaman web dinamis yaitu HTML+ Javascript). Pada form tombol/button yang memicu fungsi bernama greet()/salam yang akan memberi salam pada pengguna. Atribut penggendali event onclick digunakan untuk mengikat HTML dengan Javascript yang terdapat pada kepala dokumen/heading diantara elemen <script>.

Walaupun contoh di atas terlihat mudah , namun perlu diingat ini adalah sebuah bahasa programing yang sesungguhnya memiliki banyak detail yang perlu dibahas secara mendalam dalam segmen-segmen yang lebih khusus.

Bagi anda yang familiar dengan programming sudah sewajarnya anda dapat melakukan inspeksi sebuah program javascript tanpa masalah. Sebuah pembahasan cepat yang membuat anda memiliki orientasi untuk memahami bahasa pemrograman ini. Namun bagi anda yang pemula dalam programming atau anda yang mencari hal lebih detail dan spesifik maka amat sangat dianjurkan untuk mempelajari javascript dari berbagai macam buku-buku dan bahkan tutorial online dan lain sebagainya.

 

        4.6    Mempersiapkan Lingkungan teknis

Diantara kemungkinan terbaik apa yang paling diinginkan oleh para desainer halaman web? Halaman web dibuat untuk  sebuah  lingkungan teknis dengan dukungan dari tampilan presentasi, tetapi saat ini halaman web membutuhkan kontrol posisi yang lebih baik. Kemampuan mendesain adalah suatu hal yang ideal tetapi pada kenyataannya mendesain untuk kalangan tertentu menjadi semakin dapat diterima. Dengan memahami lingkungan teknis maka para desainer memiliki kontrol pada tampilan halaman web. Mereka juga menginginkan kontrol pada pemakaian font yang tepat. Pada awalnya tidak ada cara untuk memberi spesifikasi pada font yang dipakai pada dokumen, walaupun pengguna memiliki font. Tampilan kompleks lainnya merupakan fitur biasa pada komposisi elektronik seperti kontrol true color dan posisi objek yang diinginkan. Pada akhirnya kontrol tingkat pixel yang sempurna dan pilihan font sangat berguna dan amat diperlukan dalam membuat halaman web mendekati tingkat yang sama dengan desain cetak.

Dengan menyediakan fitur yang memungkinkan penempatan tingkat pixel pada objek dan teks pada layar tidak membuat pembuatan sebuah halaman web menjadi sesuatu yang mudah atau instan. Bukan hanya pada pilihan font, hal ini masih sulit dalam memahami dalam mengetahui hasil akhir dari sebuah desain halaman web secara pasti disertai ruang lingkup teknis yang mendukung.

Komponen yang perlu diperhatikan dalam hal ini ada 4 macam yaitu piranti keras (hardware) dan piranti lunak (software) ,Sistim Operasi(Operating System) serta Direktori

 

 

4.6.1 Piranti Keras (Hardware)

  • Prosesor: Walaupun sebuah prosesor yang cepat menunjang kinerja cepat pada server web, pada kenyataannya ada kemampuan server web tetap memiliki berbagai keterbatasan. Prosesor multifungsi lebih memiliki keunggulan dibandingkan dengan sebuah prosesor super cepat ketika harus berhadapan dengan berbagai macam layanan permintaan pada sebuah server.
  • Memori: Sebuah server web membutuhkan jumlah RAM yang amat besar untuk mengendalikan berbagai macam fungsi individual dalam proses menjalankan program CGI bagi para pengguna atau memenuhi permintaan.
  • Bus: data web akan bergerak secara konstan antara disk dan memory lalu ke jaringan, Sangat tidak bijaksana saat jalur data terhambat karena bus yang lambat.
  • Disk drive: Karena tugas utama dari sebuah server web adalah mengantarkan data atau file kepada pengguna, maka sebuah disk drive yang berkecepatan tinggi merupakan suatu keunggulan tersendiri untuk memenuhi kekuatan optimal dalam membantu server menjalankan tugas utamanya. Anda dapat mencoba kelebihan kecepatan pada drive dengan menggunakan adaptor berkecepatan tinggi seperti contoh SCSI-3.
  • Interface jaringan: Ketika file ditarik dari disk mereka akan dikirim kembali kepada pengguna melalui jaringan. Dianjurkan untuk jangan membatasi kemampuan server anda dengan kartu interface pada jaringan. Menimbang Fast Ethernet atau yang lebih baik lagi dalam hal pengoperasian server berkemampuan volume tinggi yang merupakan sebuah keharusan.
  • Lain-lain: Aspek lain dari server web adalah memiliki friksi kecil pada penyampaian situs. Namun, beberapa peralatan yang non primer seperti tape drives atau fasilitas penyimpanan backup akan menjadi sangat penting terutama untuk memelihara situs.

 

4.6.2 Sistim Operasi (Operating System)

  • UNIX: memiliki keunggulan dapat beroperasi cepat pada piranti keras yang cepat seperti Ultrasparc dan Sistem Alpha, memiliki lingkungan dengan fleksibilitas tinggi dalam pembangunannya serta aplikasi akhir dan server yang tersedia sangat stabil. Namun kekurangannya adalah sangat sulit untuk digunakan dan sangat sulit untuk dibangun bahkan dalam pemeliharaan situs serta harga dari piranti lunak dan piranti keras yang relatif mahal.
  • Windows NT: memiliki keunggulan dapat menjalankan program pada piranti keras yang berkemampuan tinggi maupun yang berkemampuan rendah, Banyak tersedianya server dan alat penunjang penyempurnaan serta memiliki administrasi dasar yang simpel. Namun memiliki kekurangan dalam hal menangani situs yang memiliki volume tinggi akan membutuhkan server yang sangat banyak. Administrasi yang lebih tinggi akan memiliki tingkat kesulitan yang menyamai UNIX serta memiliki kestabilan server yang meragukan.
  • LINUX: memiliki keunggulan terdapat pada alat yang berkemampuan rendah serta berbagai macam platform piranti keras dan biaya yang rendah serta tersedianya server dan alat penunjang penyempurnaan yang mayoritas tersedia secara gratis. Namun memiliki kekurangan pada kerumitan dalam pengunaannya maupun dalam pemeliharaan. Kurangnya jumlah piranti lunak komersial yang ditemukan pada pusat sistim UNIX seperti Solaris.
  • Windows 95/98/2000: Memiliki kemudahan dalam pengoperasian serta alat yang berbiaya rendah serta piranti lunak yang murah. Namun kerugiannya bukan merupakan sistim operasi yang cocok dalam lingkungan pengguna yang banyak atau lebih bersifat individual, dan tidak sekuat NT maupun UNIX dalam aplikasi server. Pilihan yang kurang beragam dalam hal piranti lunak/software dibandingkan Windows NT dan UNIX serta kekhawatiran akan keamanan menjadi sesuatu yang rentan.
  • Macintosh: Memiliki kemudahan dalam menjalankan dan mengatur aplikasinya, biaya rendah dalam pengoperasian serta piranti lunak yang tidak mahal. Namun memiliki kelemahan yaitu bukan merupakan multifungsi yang dapat menjalankan pengguna yang banyak. Pilihan piranti lunak yang terbatas dibandingkan Windows maupun UNIX bahkan sering terlihat tidak sekuat Windows NT maupun UNIX dalam pelayanan operasi.

 

4.6.3 Piranti Lunak (Web Server Software)

Setelah memilih piranti keras (hardware) dan sistim operasi (operating system) yang cocok, Inilah waktunya untuk memilih paket server web yang ingin anda gunakan. Hanya beberapa tahun yang lalu, hanya ada 2 server web yang besar yang tersedia yaitu server httpd NCSA dan server httpd CERN yang keduanya beroperasi pada sistim operasi UNIX, Keduanya gratis dan membutuhkan pengetahuan yang baik tentang UNIX dan dikembangkan dan digunakan dalam programing. Saat ini terdapat berbagai macam server web yang berbeda baik yang bersifat komersial maupun yang gratis- terdapat pada berbagai macam mesin. Dibandingkan anda sibuk dalam memilih akan menggunakan server web yang begitu banyak, sangatlah bijaksana di saat anda menggunakan server web yang benar-benar telah biasa dan banyak digunakan karena telah dapat diprediksi kekurangannya maupun kelebihannya. Berdasarkan analisa dan survei dari server yang dapat dicari pada internet, di bawah ini merupakan daftar server web yang paling sering digunakan, walaupun presentasi pembagian pasar antara mereka masih merupakan topik perdebatan yang hangat hingga saat ini. Server web yang paling sering digunakan diantaranya:

  • Apache           Website
  • Microsoft’s IIS Webstar
  • Iplanet server (dahulu Netscape) Domino.

 

 

4.6.4 Direktori

Server mungkin memuat ratusan bahkan ribuan kumpulan file. Untuk pengunaan praktis file-file tersebut perlu diatur menjadi satu kesatuan unit yang dapat dimanage dengan  baik. Pada dunia nyata file-file atau kertas dokumen yang beraturan tersebut kita simpan pada folder. Unit seperti ini yang kita kenal dengan direktori file. Pada server karena tidak senyata dengan contoh di atas seperti dokumen kertas maka sering disebut dengan direktori virtual. Setelah anda menentukan server mana yang dipilih untuk meletakkan dokumen maka langkah selanjutnya mengidentifikasi lokasi dalam memberi spesifikasi pada direktori yang telah berisi file yang  anda ingin simpan.Sama seperti folder untuk dokumen kertas yang dapat menampung folder lain; maka konsep yang sama juga berlaku untuk direktori yang dapat menyimpan berbagai macam direktori lain. Direktori-direktori tersebut menyimpan direktori lain yang telah terlindung, memiliki struktur hierarki yang berakar seperti batang-batang pada pohon. Direktori yang menyimpan berbagai macam direktori sering disebut dengan direktori root. Secara keseluruhan, seluruh direktori dan bentuk file pada file tree atau sistem file. Sebuah file yang terdapat pada sistim file melakukan spesifikasi pada jalur direktori. Ini adalah daftar yang terlindungi dan bernaung dari keseluruhan direktori yang memuat file dari yang umum-direktori root-hingga ke yang paling spesifik. Contoh di bawah ini menggambarkannya:

 

Perlu dicatat nama direktori mengikuti ketetapan konvensi spesifik dari tiap sistim operasi termasuk huruf kapital sensitif. Pembuat harus berhati-hati dalam menetapkan sampul direktori. Lebih jauh lagi direktori sering mengikuti aturan konvensi seperti contoh, tmp. Biasanya nama direktori mengikuti refleksi aspek dari konten seperti file media, subjek atau akses khusus, sebagai contoh sebuah direktori bernama “gambar” maka merupakan direktori yang berisi file gambar.

ketika server berhasil terinstall dengan baik  maka langkah selanjutnya adalah menempatkan direktori di dalam server agar dapat diakses. Langkah-langkah pembuatan direktori pada server agar dapat diakses melalui browser adalah sebagai berikut.

  1. tambahkan perintah untuk mengarahkan direktori ke tempat yang kita inginkan kita dapat merubahnya  pada http.conf file yang terletak pada conf folder di direktori apache anda

 

  1. setelah document root anda rubah sesuai dengan direktori yang anda inginkan. Dalam contoh ini kita meletakkannya di dalam drive C yaitu dalam c:/home/. Klik 2 kali pada drive C  anda lalu klik kanan dan pilihlah opsi new>folder

 

  1. setelah kita selesai membuat direktori , langkah selanjutnya adalah melakukan pengetesan, buatlah satu HTML file dengan nama index.html dan tempatkan di dalam direktori “home

 

  1. setelah index.html file dibuat dan ditempatkan di dalam direktori home, langkah selanjutnya adalah mengaksesnya melalui browser. Bukalah browser anda ketik http://localhost pada url box . bila halaman index.html anda muncul maka anda telah berhasil mensetup sebuah server dan mengarahkannya ke direktori yang anda inginkan.

 

 

 4.7       Membuat halaman Dinamis

Karena perkembangan yang tidak terlepas dari generasi keempat web browser serta merupakan pembahasan dasar dari pengenalan pembuatan web dinamis maka definisi dari web dinamis adalah kombinasi dari beberapa fitur built-in pada browser generasi keempat (Internet Explorer 4 dan Netscape 4) yang memungkinkan halaman web menjadi lebih dinamik.

Web dinamis memiliki pengembangan fitur yang memberikan kemampuan pada browser berfungsi dinamik. Yang menjadi dasar dalam mendalami web dinamis bukanlah hanya terbatas pada web itu sendiri namun pada syntax yang diperlukan dalam menggunakan web dinamis tersebut.

Seperti disebutkan di atas bahwa web dinamis adalah kumpulan fitur dalam satu kesatuan yang memungkinkan halaman web berfungsi lebih dinamis. Sangat penting bagi para pembuat web dinamis dalam mengartikan kata “dinamis”. “Dinamis”  diartikan sebagai kemampuan browser untuk merubah sebuah halaman web pada tampilan dan gaya setelah dokumen telah dibuka. Ketika mempelajari javascript, pernah diajarkan dalam menggunakan perintah document.write() yang merupakan metode javascript dalam membuat halaman web “on the fly” seperti contoh di bawah ini

<script>
document.write("This is text created on the fly!")
</script>

Apabila dari contoh diatas kita membuat konten tidak hanya dengan on the fly tapi “on demand” dengan melakukan nesting pada kode di atas dalam fungsi dan diaktifkan melalui “button”:

<input type="button"
onClick="writeconent()" value="text">

Menekan tombol(“button”) hanya menghasilkan kekecewaan yang mendalam karena seluruh halaman web yang terbentuk terhapus dan hanya menyisakan fungsi teks yang telah dibuat.

Hal ini terjadi di masa lalu, kini dengan terobosan baru yaitu web dinamis maka kita dapat merubah konten pada halaman web sesuai dengan permintaan kapanpun kita inginkan, tanpa harus browser melakukan penghapusan secara menyeluruh. Inilah kunci dari pengertian web dinamis yang sesungguhnya. Kemampuan browser dalam merubah gaya dan tampilan walaupun dokumen telah dibuka/diload.

Netscape 4(NS4) dan Internet Explorer 4 (IE 4) memiliki perbedaan besar dalam mengimplementasikan teknologi yang luar biasa ini. Untuk saat ini belum memungkinkan untuk menjalankan kode web dinamis dan mengharapkan dapat berfungsi semestinya pada dua browser tersebut. Selanjutnya kedua browser tersebut memiliki pengembangan yang berbeda satu sama lain dalam langkah pengembangan teknologi web dinamis mereka masing-masing.

4.7.1 Web Dinamis pada NS4- <layer> tag

Web dinamis pada NS4 cukup simple dan hanya tertuju pada 1 kata yaitu “layer”. Pada kenyataannya NS4 sangat bergantung pada sebuah tag baru yang sering disebut <layer> tag dalam pengoperasian web dinamis. Tag baru ini sangat dinamis yang dapat menentukan posisi sumbu X di mana saja pada halaman web(tanpa harus terkait pada konten lain), bergerak bebas, konten didalamnya dapat diupdate sesuai keinginan dan seterusnya.

  • Basic Syntax (rumus syntax dasar)

Rumus dasar syntax dari layer tag pada NS4 adalah:

<layer>Text inside layer</layer>

Tanda <layer> tag adalah tag konten yang berarti anda dapat menambahkan (contohnya <table>). Coba praktekkan dengan memasukkan kode di atas pada halaman anda maka anda akan menemukan bahwa teks di dalam layer seperti “mengapung” di atas teks lain bahkan melampaui mereka. Bayangkan sebuah layer adalah sepotong kertas terletak di atas bagian dari seluruh halaman tanpa harus memakan ruang dalam proses aliran dokumen.

§  Atribut layer

Layer memiliki atribut pendukung yang memungkinkan anda menentukan posisi menggunakan sistim koordinat X,Y , penentuan background serta perintah yang memungkinkan hanya area tertentu pada layer yang terlihat, perintah yang memungkinkan menyembunyikan area tertentu agar tak terlihat dan lain-lain. Beberapa contoh atribut tertera pada table di bawah ini:

Atribut-atribut layer
Id Nama dari layer, untuk mengidentifikasikan pada script anda
Left Posisi dari layer dalam hubungannya dengan koordinat X.
Top Posisi dari layer dalam hubungannya dengan koordinat Y.
Width Ukuran lebar dari layer, dalam ukuran px atau %
Height Ukuran tinggi dari layer, dalam ukuran px atau %
bgColor Warna Background dari layer
Background Gambar Background dari layer
Src Dokumen eksternal html yang terdapat di dalam layer

Gabungkan dan bandingkan perbedaan atribut-atribut tersebut sesuka anda. Di bawah ini contoh dari layer yang menggunakan atribut di atas:

<layer id="mylayer" width=100px height=70px bgColor="yellow"><h3>A layer</h3></layer>

§  Sebuah layer

 

Perhatikan kita tidak memspesifikasi atribut bagian kiri dan atas. Bilamana itu terjadi maka posisi layer berada pada saat anda terakhir meletakannya.

§  Scripting layers

 

Ini adalah salah satu hal terpenting dalam mempelajari layer adalah bagaimana menscript layer tersebut. Pada akhirnya script itulah yang membuat layer terlihat hidup. Dalam mengakses layer sangat diperlukan untuk mengikuti panduan syntax berikut ini:

document.layername

 

Mengakses layer hanya langkah pertama. Setelah mengakses layer, anda dapat melanjutkan dan merubah salah satu atribut pada layer untuk membuat efek dinamis. Contoh di bawah ini memberikan perubahan warna pada background yang mempertemukan warna merah dan biru dengan kode dasar sebagai berikut:

 

<layer id="test" width=80px height=80px></layer>

<script language="Javascript1.2">
//variable that helps alternate between red and blue
var thecolor=true
//Apply a bgColor of blue as the initial layer color
document.test1.bgColor="blue"

function changecol() {
  //if thecolor=true
  if (thecolor)
    document.test.bgColor="blue"
  else
    document.test.bgColor="red"
  //set thecolor to the opposite of its current state
  thecolor=!thecolor
  setTimeout("changecol()",1000)
}

changecol()
</script>

 

4.7.2 Web Dinamis pada IE4

Membandingkan inplementasi web dinamis pada IE 4 maka terlihat lebih banyak ragam informasi dibandingkan dengan NS. Web dinamis pada IE tidak tergantung pada satu tag tapi lebih focus pada objek baru dan properties yang mengacu pada tag HTML biasa seperti <div> dan <table>. Ini lebih unggul namun pada saat bersamaan juga memiliki kerumitan dalam menguasainya.

 

§  Objek gaya pada IE 4

Saat ini elemen HTML pada IE 4 mendukung sebuah objek gaya, yang amat penting sebagai sebuah objek “dinamis” yang digunakan untuk memanipulasi tampilan dan “rasa” dari elemen tersebut. Seperti halnya <layer> tag, Elemen ini juga dapat disandingkan pada sebuah atribut “id” yang dapat digunakan dalam melakukan identifikasi pada saat scripting seperti pada contoh berikut ini:

 

<div id="adiv"></div>

Pada script anda, syntax yang diperlukan dalam mengakses objek gaya “adiv” akan terlihat seperti ini: adiv.style

Objek gaya meliputi banyak property dan dengan memanipulasi properti-properti ini, anda dapat melakukan perubahan pada tampilan sebuah elemen secara dinamis. Properti-properti tersebut seperti yang tertera di bawah ini:

                               Properti penting pada Objek gaya pada IE 4
backgroundColor Warna background pada elemen
backgroundImage Gambar background pada elemen
color Warna pada elemen
Position Tipe posisi pada elemen. Nilai yang diterima adalah “absolut” dan relatif
pixelWidth Lebar pada elemen
pixelHeight Tinggi pada elemen
pixelLeft Posisi pada elemen dalam hubungannya dengan koordinat sumbu X
pixelTop Posisi pada elemen dalam hubungannya dengan koordinat sumbu Y

Properti-properti tersebut di atas hanya mewakili sebuah bagian dari keseluruhan properti pendukung, tetapi bagian tersebut adalah yang amat paling sering digunakan. Rumus dasar atau syntax dalam memanipulasi setiap properti tetap sama. Dengan mengakses property ini, anda dapat merubah tampilan dan gaya pada hampir setiap elemen HTML(yang berlawanan dengan konsep menggunakan <layer> tag pada Netscape).

Contoh demonstrasi di bawah ini menunjukkan perubahan warna teks bagian bawah ketika mouse bergerak ke tempat yang dituju:

 

Move your mouse here

 

Ini adalah kode sumber bagi kata yang tertera di atas:

<span id="sometext" onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">Move your mouse here</span>

Terlihat bagaimana anda merubah warna teks( pada saat mouse di arahkan pada kata tersebut maka warna akan berubah menjadi merah):

sometext.style.color='red'

Pada awalnya kita menggunakan elemen pada id untuk memperoleh akses, lalu melalui objek gaya lalu akhirnya focus pada property warna, kita akan dengan amat mudah merubah warna pada teks sesuai dengan yang kita inginkan.

Seluruh property dapat dibaca/ditulis dan diakses dengan cara yang sama: id elemen>objek gaya>nama properti.

Di bawah ini ada contoh yang menunjukkan pembesaran gambar pada saat mouse berada di atasnya dan akan berubah kembali ke bentuk ukuran asalnya saat mouse bergerak menjauh:

 

 

// <img id="aimage" src="piza.gif" onMouseover="enlarge()" onMouseout="revertback()">

<script language="Javascript1.2"><!--
function enlarge() {
  aimage.style.pixelWidth=164
  aimage.style.pixelHeight=202
}

function revertback() {
  aimage.style.pixelWidth=82
  aimage.style.pixelHeight=101
}
//--></script>

Ini bukan merupakan contoh yang paling praktis namun menggambarkan cara kerja web dinamis yang cukup nyata. Perubahan dimensi pada gambar sesuai keinginan, tanpa harus melakukan reload pada dokumen yang merupakan sesuatu yang tidak dapat dilakukan oleh javascript sendirian.

4 

4.5 

4.6 

4.7.3  Memudahkan Pembacaan dengan break dan indent pada baris kode

Sama seperti bahasa pemrograman modern lainnya, sangat memungkinkan untuk membatalkan sebuah loop/perputaran atau memodifikasi jumlah intensitas perputaran/loop menggunakan statemen break dan continue.

Bahasa program ini juga sangat mengakomodasi penggunaan optimal bagi fungsi ini. Sebagai contoh anda dapat mengidentifikasikan sebuah fungsi yang berisi statemen ‘sayHi’ yang dapat digunakan terus menerus pada dokumen tersebut.

function sayHi(  )
{
alert(‘hi’);
}

 

Fungsi ini dapat dipanggil atau diaktifkan setiap saat dengan sebuah panggilan sederhana seperti sayHi(  ). Praktek program yang baik menyarankan pada para developer menggunakan kode fungsi yang awam atau biasa sering digunakan. Di luar fungsi-fungsi tersebut, Javascript juga mendukung pemakaian objek.

Indent

Pada saat penulisan script/koding hal-hal yang perlu diperhatikan adalah menuliskan kode-kode secara rapi dan mudah dibaca. Harus ada indenting bila kode-kode itu ditulis di dalam braces atau tanda kurung contoh:

//fungsi ini digunakan untuk menampilkan pesan “hi”  è komentar fungsi
function sayHi(  )
{
       alert(‘hi’); è indenting ke dalam 1 tab spasi

} //akhir dari function sayHi(  )

 

Indenting/spasi harus diberikan pada kode-kode script yang tepat. Tidak semua script harus di indent, script yang diindent biasanya adalah script yang ada didalam tanda kurung. Hal ini untuk mempermudah pembacaan. Ada baiknya kita memberikan komentar-komentar di setiap fungsi atau looping yang kita buat agar orang lain atau kita sendiri dapat memahami dengan cepat maksud suatu script dengan membaca komentar-komentar yang ada.

Bahasa program javascript relatif simpel bagi para programer yang berpengalaman untuk mendalaminya; namun kunci sukses dalam penguasaan bahasa program ini adalah dengan mengetahui bagaimana cara melakukan akses pada fitur-fitur built-in pada browser yang seiring dengan berbagai macam bagian dari sebuah dokumen HTML. Pada kenyataannya ide untuk membuat sebuah model dokumen HTML sebagai sebuah koleksi kumpulan objek. Ini adalah kunci dalam pengertian pengaruh potensial dalam melakukan scripting.

 

 

 

 4.7.4 Filename dan Ekstension

Setelah memilih server dan jalur direktori untuk sebuah dokumen, maka langkah selanjutnya melokalisir untuk memberi spesifikasi pada nama file. Langkah ini sesungguhnya memiliki 2 bagian: sebuah filename yang diikuti dengan standar file extension. Filename dapat dengan bebas nama apapun yang dapat diaplikasikan  pada sistem operasi server. Karakter spesial seperti spasi(__), colon(;) dan slash(/) dapat membuat kerumitan tersendiri. Sebagai contoh sebuah nama file test:1.htm akan mengakibatkan problem yang signifikan bagi pengguna Macintosh, sementara nama file test/1.htm dapat digunakan oleh pengguna Macintosh namun menimbulkan problem bagi pengguna PC maupun UNIX. Sebuah titik atau dot (.) memisahkan antara nama file dengan ekstensionnya, yang merupakan sebuah kode, yang terdiri dari 3 buah huruf, yang mengindentifikasikan tipe informasi yang terdapat pada file contohnya sebuah HTML file memiliki ekstension .htm atau .html, gambar JPEG memiliki ekstension .jpg. Sebuah ekstension file amat sangat berguna bagi aplikasi halaman web oleh sebab itu merupakan indikasi tipe informasi yang terdapat pada isi file. Sebuah Web server akan membaca ekstension file dan menggunakan dalam menentukan header yang mana, dalam melakukan attach pada sebuah file di saat akan menampilkannya pada browser. Apabila ekstension file ditiadakan atau salah digunakan, maka dengan otomatis file akan tidak bisa dibaca maupun dibuka untuk digunakan. Ketika browser langsung membaca file, maka browser juga melihat ekstension file untuk menentukan aplikasi yang tepat untuk membuka file tersebut. Apabila ekstension file hilang atau tidak benar maka file tersebut akan tidak tampil sempurna saat diaplikasikan pada web browser seperti pada contoh di bawah ini:

Apabila anda menggunakan teks editor, anda dapat mengetik pada daftar sebelumnya dan melakukan save/penyimpanan dengan nama file seperti “firstexample.htm”. Supaya browser dapat membaca file anda dengan sempurna maka anda harus memperhatikan prosedur akhir dalam melakukan save dengan memperhatikan dokumen tersimpan dalam bentuk atau ekstension .htm atau .html. Apabila anda melakukan prosedur save yang tidak sesuai dengan ekstension yang sesuai maka pada saat pengoperasian kembali browser kemungkinan tidak akan melakukan pengintepretasian pada HTML Markup. Ketika hal ini terjadi maka elemen markup akan muncul pada jendela browser seperti ini:

 

 

 
<html>
<head>
 
<title></title>
 
</head>
 
<body bgcolor=”#FFFFFF”>
 
 
</body>
</html>

 

Setelah anda melakukan save contoh file anda pada sistem lalu menggunakan browser anda untuk membukanya dengan menggunakan perintah “open”, “open page” atau”open file” yang dapat ditemukan pada file menu browser. Setelah browser membaca file anda, maka seharusnya akan diteruskan sehingga menjadi isi sebuah halaman seperti ini:

   

   Welcome to the World of HTML
 
HTML really isn’t so hard!

You can put in lots of text if you want to. In fact, you could keep on typing and make up more sentences and continue on and on.
 

4.7.5 Akses file melalui URL, http://localhost maupun alamat IP local

Dalam melakukan dokumen linking pada halaman web diperlukan sebuah skema penamaan yang konsisten. URL menyediakan informasi dasar yang diperlukan dalam melokalisir sebuah objek pada internet dengan menyertakan nama host,direktori, nama file dan protokol akses. URL tertulis dalam format yang biasa jadi ketika sebuah alamat dapat dituliskan untuk objek apapun yang anda cari. Sebuah catatan pendek biasa secara relatif dapat ditentukan baik sebagian maupun keseluruhan diejakan, ini dapat dispesifikasikan pada elemen <a> dalam membuat jangkar antara dokumen satu dengan lainnya. Hubungan dengan dokumen HTML dapat dilakukan dengan teks atau gambar.

Setelah kita selesai mensetup web server dan root direktori untuk menaruh halaman web, kita dapat melakukan testing dengan membuat satu halaman web sederhana hanya untuk melakukan test apakah direktori yang kita buat telah berjalan dengan baik langkah-langkah:

  1. Buatlah sebuah index.html file dan simpanlah di dalam web root direktori anda
  2. Cobalah anda melakukan browsing ke dalam halaman tersebut. Bila anda menaruhnya di dalam web root pada localhost anda maka cobalah anda ketik link url ini pada web browser anda: http://localhost bila tampil halaman index.html anda maka anda telah berhasil membuat sebuah site virtual.

4.7.6  Modifikasi dibuat sesuai kebutuhan (KUK:2.7)

Membuat  halaman web berbasis database membawa fleksibilitas dalam hal bagaimana informasi disimpan dan dilihat pada web. Yang artinya anda dapat menambahkan dan mengatur isi, cerita,informasi, jadwal dan koleksi fotografi tanpa harus membuka webmaster . Ini adalah hal yang luar biasa bagi anda untuk mengontrol halaman anda sekaligus menghemat pengeluaran anda dalam hal biaya pemeliharaan/maintenance

Sebuah halaman web dinamis dapat mengurangi atau bahkan menghapus waktu yang banyak tersita untuk koordinasi dengan staf anda, ini disebabkan banyak fungsi-fungsi administratif yang menyita waktu telah terkoordinasi secara otomatis. Sebagai contoh jika ada tenggat waktu/deadline yang terlampaui atau sebuah produk dalam inventaris yang telah terjual habis, maka situs anda dapat secara otomatis menghapuskan tenggat waktu yang terlampaui atau produk inventaris yang telah terjual habis dari tampilan pada situs anda, sebagai gantinya situs itu dapat mengupdate situasi yang teranyar/terbaru secara otomatis. Oleh karena itu maka staf anda akan lebih mengurangi menghabiskan banyak waktu hanya untuk mengatur situs anda dan dapat mengoptimalkan sumbangsihnya untuk tugas yang  lain.

Membuat halaman web dinamis berbasis database menunjukkan superioritas yang strategis bagi anda hal ini karena perubahan pada situs anda dengan sangat mudah dapat dilakukan. Apakah anda ingin memiliki tampilan atau warna baru bagi situs anda? Tidak masalah, sejak desain/ presentasi dari halaman web itu terpisah dari situs konten/isi. Apabila konten atau isi juga ingin dirubah maka hanya menggunakan panel administratif yang sangat mudah digunakan anda sudah dapat melakukannya. Apabila anda ingin menambahkan halaman atau bagian (section) yang baru? Tidak sulit apalagi anda membangun halaman web anda dengan fondasi yang solid dan fleksibel.

 

4.7.7 Cascading Style Sheets (CSS)

Elemen HTML, atribut dan gaya pada halaman web dinamis merupakan basis dari halaman web yang telah ada dan spesifikasi CSS. Pengguna dapat melihat dokumen anda saat mereka menggunakan Internet Explorer 4.0 maupun versi yang lebih tinggi. Secara alami, efek dinamis dan fitur interaktif yang anda tambahkan pada dokumen  mungkin tidak akan berfungsi secara maksimal ketika ditampilkan pada browser yang tidak menunjang halaman web dinamis. Namun halaman web dinamis mampu meminimalisir hal ini apabila anda mengikuti ketentuan dasar, konten pada dokumen anda dapat dilihat pada browser lain.

CSS merupakan kepanjangan dari Cascading Style sheets dan merupakan bagian dari halaman web dinamis yang memegang kontrol pada tampilan dan penempatan elemen pada sebuah halaman web. Dengan CSS anda dapat mengeset propertis pada elemen dari sebuah halaman web.

Salah satu keunggulan terbesar dari CSS dibandingkan dengan cara biasa dalam melakukan perubahan tampilan pada elemen ( tag pada font maupun sejenisnya) adalah anda dapat memisahkan konten dari desain halaman web anda. Anda dapat menghubungkan file CSS ke seluruh halaman pada situs anda yang mengeset tampilan pada halaman web, jadi apabila anda ingin merubah ukuran font dari teks utama  maka anda hanya perlu merunah pada file CSS dan secara otomatis seluruh halaman anda akan terupdate.

Syntax dasar dari kode CSS adalah seperti dibawah ini:

 

<style type="text/css">
  ELEMENT{property1:value1; property:value2}
</style>


 

Contoh di bawah ini akan menggambarkan cara kerja CSS:

Kita selalu menempatkan tag gaya di dalam kepala dokumen. Jadi dokumen tersebut akan terlihat seperti ini:

 

<html>
<head>
<style type="text/css">
  H5{background-color:blue; color:white; font-size:20px}
</style>
<body>
  <h5>Cascading style sheets</h5>
</body>
</html>

Keseluruhan heading H5 akan terlihat pada halaman web dinamis anda seperti di bawah ini:

Cascading style sheets

Apabila anda hanya menginginkan heading tunggal H5 maka anda dapat menggunakan sebuah id pada tag dan melakukannya seperti di bawah ini:

<html>
<head>
<style type="text/css">
  #heading{background-color:blue; color:white; font-size:20px}
</style>
<body>
  <h5 id="heading">Cascading style sheets</h5>
</body>
</html>


Alternatif lain anda dapat melakukan apa yang sering disebut sebagai gaya inline yang berarti menempatkan gaya tersebut langsung pada tag. Hal ini dapat dilakukan pada beberapa hal, namun anda dapat melihat ini seperti tetap mengacu beberapa ide dari CSS:

<h5 style="background-color:blue; color:white;
font-size:20px">Cascading style sheets</h5>

Ketika anda menggunakan gaya inline maka anda tetap harus membuka konten aktual untuk melakukan perubahan elemen.

<style type="text/css">
 .whatever{font-weight:bold}
</style>

Figur di atas menunjukkan cara yang lain lagi, sebagai contoh apabila anda memiliki 10 buah tag P pada halaman web anda dan anda menginginkan 5 buah dari tag P tersebut bold, bukan seluruhnya maka anda harus menggunakan sebuah class. Anda dapat menamakan class tersebut dengan nama apapun, namun perlu diingat harus menggunakan sebuah “.” di depan nama yang diberikan pada class tersebut seperti terlihat pada contoh di bawah ini:

<style type="text/css">
 .whatever{font-weight:bold}
</style>

Lalu menambahkannya pada tag P yang kita buat seperti di bawah ini:

<p>This is bold text!</p>

Ini adalah merupakan dasar absolute dari CSS (Cascading Style Sheets)

Sangat disayangkan CSS disupport berbeda untuk tiap browser yang berbeda dan CSS hanya didukung dan dapat bekerja dengan maksimal pada web browser generasi 4 ke atas.

 

4.7.8 Pembuatan halaman web dinamis(EK:2 dan3)

Contoh-contoh di bawah ini akan memberikan pengertian yang lebih signifikan dalam pengaplikasian pembuatan halaman web dinamis

  • Contoh 1

Proyek yang akan dibuat adalah sebuah skrip menu yang simpel namun dapat didrag di mana kita dapat mendrag “kepala” dari menu dan seterusnya akan bergerak mengikuti.

Kita akan memulai dengan memikirkan sejenak bagaimana menambahkan tag-tag DIV. Kita memerlukan 2 buah div, yang pertama untuk bagian kepala/awal sedangkan yang lainnya akan berperan sebagai induk div bagi seluruh fitur item. Lalu kita membutuhkan  sebuah div untuk setiap item di dalam induk div (pada contoh ini kita akan membuat 4 buah item). Pada poin ini kita perlu memikirkan bagaimana sebuah menu harus bereaksi terhadap sebuah event yang terjadi pada div seperti yang terlihat pada contoh di bawah ini:

 

Keterangan Gambar:

  • Bagian kanan atas(menu): Ketika user menggerakkan div kita ingin memperlihatkan sebuah kursor yang “bergerak” dan kita menginginkan div ini dapat didrag jika user mengklik (mouse bergerak kebawah) di saat mouse berada pada klik menu tersebut.
  • Bagian kanan bawah (test item 4): Tiap item-item ini harus merubah warna background ketika mouse berada di atas dan berubah kembali ketika mouse keluar dari tempat tersebut  ketika mouse berada  di atas fitur item yang dimaksud maka akan juga tampak sebuah kursor dan ketika anda mengklik seharusnya mengantarkan anda ke halaman lain.
  • Bagian kiri (test item 1-4): Seluruh item div ditempatkan pada induk div lain sehingga kita tidak perlu menggerakkan item satu per satu ketika kita menggerakkan fitur menu. Kita akan menggerakkan induk div hanya dan sejak yang lain terdapat di dalamnya juga ikut bergerak juga.

 

 

 

 

 

 

 

Kita akan mulai dengan kode web untuk ditambah di dalam tag badan:

<div id="divHead"> Menu</div>
<div id="divMenu">
  <div id="divItem0">Test item1</div>
  <div id="divItem1">Test item2</div>
  <div id="divItem2">Test item3</div>
  <div id="divItem3">Test item4</div>
</div>

 

Lalu kita butuh menambahkan style pada div tersebut:

<style>
#divMenu{
  position:absolute;
  font-family:arial,helvetica;
  font-size:12px;
  width:150;
  height:200;
  clip:rect(0,150,200,0);
  layer-background-color:silver;
  padding:4px
}
#divHead{
  position:absolute;
  font-family:arial,helvetica;
  font-size:12px;
  layer-background-color:#333333;
  background-color:#333333;
  clip:rect(0,150,20,0);
  height:20;
  cursor:move;
  z-index:10;
  width:150;
  padding:2px;
  font-size:13px;
  color:white;
  font-weight:bold
}
DIV.clItem{
  position:absolute;
  font-family:arial,helvetica;
  font-size:12px;
  height:30;
  top:0;
  padding:4px;
  width:150;
  clip:rect(0,150,30,0);
  cursor:hand
}
</style>

 

Kita menempatkan tag gaya pada bagian kepala dari halaman web dinamis yang telah kita buat, diperlukan sedikit pengetahuan serta kemampuan CSS (Cascading Style Sheets) untuk dapat mengikuti. Dimensi tinggi, lebar diambil dari gambar pada figur menu di atas (gambar menu test item) yang telah dibuat tadi. Anda dapat melihat kita menambahkan definisi kursor, perlu dicatat penyettingan kursor hanya dapat bekerja pada web browser Explorer generasi keempat keatas dan Netscape 6) serta mengeset warna background. Anda dapat mengeset nilai dimensi sehingga tinggi dan lebar akan bernilai sama serta layer warna background akan membuat Netscape 4 meliputi seluruh div tersebut dengan warna background.

Selanjutnya anda akan siap melaju pada tahap scripting, anda akan memulai dengan tahap yang mudah yaitu menambahkan referensi pada bagian kepala halaman web dinamis anda seperti di bawah ini:

<script language="Javascript1.2" src="lib.js" type="text/javascript"></script>

 

Pada tahap ini halaman web dinamis anda siap serta mulai dengan kode untuk menu. Pertama anda dapat membuat beberapa variabel global untuk script. Yang dapat dengan mudah dirubah seperti di bawah ini

numItems – The number of menu items we want to have.
itemOnColor – The background color to change the item to onmouseover
itemOffColor – The background color to change the item to onmouseout


 

Jadi anda dapat mengeset seperti di bawah ini:

numItems=4
itemOnColor="red"
itemOffColor="silver"

 

Anda juga perlu memberi kontrol pada tiap item ketika akan diklik sehingga anda dapat menambahkan array dengan links seperti di bawah ini:

itemLinks=new Array()
itemLinks[0]="" 'Note that arrays always start at 0
itemLinks[1]="http://www.bratta.com"
itemLinks[2]="http://www.yahoo.com"
itemLinks[3]="http://www.altavista.com"

 

Bagian selanjutnya pada script adalah sebuah fungsi Init yang pasti di mana seluruh objek telah dibuat, penempatan layer telah ditetapkan dan script akan dimulai seperti fungsi di bawah ini:

  oHead=new lib_obj('divHead')
  oMenu=new lib_obj('divMenu')
  oMenu.bg(menuBgColor)
  oHead.dragdrop()

  oItems=new Array()
  var h=0
  for(i=0;i<numItems;i++){
    oItems[i]=new lib_obj('divItem'+i,'divMenu')
    oItems[i].moveIt(0,h)
    h+=oItems[i].h
    oItems[i].bg(itemOffColor)
    oItems[i].evnt.onmouseover=new Function("mover("+i+")")
    oItems[i].evnt.onmouseout=new Function("mout("+i+")")
    if(bw.ns4){
      oItems[i].ref.captureEvents(Event.MOUSEDOWN)
      oItems[i].ref.onmousedown = new Function("location.href=\'+itemLinks[i]+'\'")
    }else oItems[i].evnt.onclick=new Function("location.href=\'+itemLinks[i]+'\'")
  }
  oMenu.clipTo(0,oMenu.w,h,0,1)
  moveM2(10)
}

 

Fungsi ini seharusnya diaktifkan pada bagian “start” pada script menu, jadi baik menggunakan fitur onload atau dengan div halaman web dinamis yang telah diupload seperti terlihat di bawah ini yang tertera baris per baris:

oHead=new lib_obj('divHead') - Here we make a new lib object called oHead which references the div called divHead. 
  
  oMenu=new lib_obj('divMenu') - Here we make a new lib object called oMenu which references the div called divHead. 
  
  oHead.dragdrop() - Set drag and drop support for the oHead object.

 

Lalu anda akan membuat sebuah array baru yang mengandung seluruh item yang terdapat pada menu 0items=new array(). Lalu anda melakukan loop pada array tersebut satu per satu untuk setiap item. Perlu diingat anda mengeset variabel numItems diatas nilai 4, jadi pada baris program for (i=0;i<numitems;i++) yang berarti anda ingin melakukan loop dari 0 sampai 4. Alasan anda menggunakan loop pada program ini dikarenakan dapat dengan mudah melakukan penambahan elemen (dengan hanya menambahkan div halaman web dan merubah numitem menjadi 5) dan hanya membutuhkan kode yang lebih kecil. Pada tiap loop anda dapat membuat tiap oItem[i]object(i adalah balasan dari bagian loop tersebut).

 

oItems[i]=new lib_obj(‘divItem’+I,’divMenu’), lalu anda menggerakan objek ke arah kiri 0 dan ke atas h. seperti anda lihat h=0, pada baris di bawah h+=oItems[i].h

Anda dapat menambahkan ketinggian pada tiap elemen bergantung pada elemen variabel h sehingga item tersebut akan digerakkan sesuai dengan ketinggian dari item sebelumnya. Dengan cara ini item tersebut akan berada dibawah dari item sebelumnya, lalu anda mengeset warna background pada posisi default/standar oItems[i].bg(itemOffColor).

 

Anda tiba pada bagian yang menarik pada penempatan kode; tiap objek halaman memiliki properties yang dinamakan evnt, yang anda gunakan mengeset event pada objek. Anda kembali mengingat pada gambar menu bagian awal contoh ini yang anda menginginkan sebuah event onmouseover dan onmouseout untuk tiap item div yang berefek pada berubahnya warna background. Terkadang sebuah event terset tidak disuport setiap argument pada sebuah fungsi, oleh sebab itu anda akan mengattach event tersebut dengan fungsi lain, argument yang perlu anda buat adalah jumlah dari item pada saat ini, maka anda dapat melakukannya dengan ini: oItems[i].evnt.onmouseover=new Function("mover("+i+")").

 

Setelah itu anda dapat mengeset event onclick yang akan membuat halaman bergerak pada link untuk tiap item ketika akan diklik. Netscape 4 tidak memberi suport event onclick pada layer sehingga anda harus menggunakan onmousedown, namun sebelumnya anda harus mendapatkan div untuk event tersebut (poin referensi pada dokumen untuk div tersebut). oItems[i].ref.captureEvents(Event.MOUSEDOWN), lalu ditambah dengan event

oItems[i].ref.onmousedown = new Function("location.href=\'+itemLinks[i]+'\'").

 

Kemudian anda mengakhiri dengan mengeklip objek menu utama menjadi memiliki ketinggian dan lebar yang sama untuk semua item:oMenu.clipTo(0,oMenu.w,h,0,1)

Baris terakhir dari fungsi ini diawali dengan fungsi lain yang akan selalu melakukan cek silang ketika menu digerakkan yang akan dibahas lebih lanjut di bawah ini:

Sekarang anda akan membuat fungsi mover dan mout yang diaktifkan pada onmouseover dan onmouseout untuk tiap item. Fungsi-fungsi ini juga memiliki fungsi langsung seperti terlihat di bawah ini:

function mover(i){
  oItems[i].bg(itemOnColor)
}
function mout(i){
  oItems[i].bg(itemOffColor)  }

 

Yang menjadi argumen adalah jumlah item yang mengaktifkan fungsi tersebut, lalu anda dapat mengeset warna background dengan variabel itemOnColor atau itemOffColor yang telah didiskusikan pada bagian sebelumnya.

Yang terakhir namun merupakan fungsi terpenting yaitu moveM2 terlihat seperti di bawah ini:

function moveM2(inc){
  endx=oHead.x;
  endy=oHead.y+oHead.h
  x=oMenu.x;
  y=oMenu.y
  distx = endx - x;
  disty = endy - y
  num = Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2))/inc
  dx = distx/num;
  dy = disty/num
  if((Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-x))
  ||Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-y)))){
    oMenu.moveBy(dx,dy)
  }else oMenu.moveIt(endx,endy)
  setTimeout("moveM2("+inc+")",20)
}

 

Fungsi ini akan melakukan loop dengan sendirinya dan akan menjalankan seluruh program sepanjang waktu, selama user masih menggunakan halaman web dinamis. Sesungguhnya ini adalah pengecekan dasar bila ada perbedaan antara posisi objek oHead dan posisi objek oMenu dan bila ada maka akan menggerakkan posisi objek oMenu ke posisi yang benar. Jadi ketika anda melakukan drag objek oHead maka fungsi ini akan mengingatkan bahwa ada perbedaan pada posisi dan akan “memperbaiki” atau mereposisi pada tempat semula. Hal ini memicu sebuah argumen; inc yang membantu anda untuk mengontrol seberapa cepat objek oMenu akan bergerak.

Kembali anda akan melakukannya baris per baris: pada 4 baris pertama hanya dengan mengeset beberapa variabel sehingga lebih mudah untuk diikuti pada bagian selanjutnya: endx=oHead.x- pada posisi X (bagian kiri) maka pergerakan akan berakhir pada endx=oHead.y+oHead.h- pada posisi Y (bagian atas) maka pergerakan akan berakhir pada x=oMenu.x- posisi X saat ini (bagian kiri) dari posisi objek oMenu y=oMenu.yposisi Y saat ini (bagian atas) dari posisi objek oMenu.

 

Lalu anda memiliki 2 buah garis yang menggambarkan jarak yang anda butuhkan pergerakan untuk X dan Y; distx = endx - x, disty = endy - y.

Pada garis selanjutnya anda akan menemukan penghitungan matematika murni, untuk mendapatkan pergerakan yang tepat( anda menginginkan bagian kiri serta dari atas menuju tempat akhir pada saat yang bersamaan), anda akan menemukan figure angka yang akan membagi jarak dengan memastikan X dan Y bergerak  dengan figur angka pixel yang tepat setiap saat. Anda dapat mengambil akar kuadrat dari jarak lalu dipngkatkan dengan 2 lalu dibagi dengan  inc: num = Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2))/inc.

 

Tahap selanjutnya adalah mendapatkan pixel actual untuk bergerak bagi X dan Y; dx = distx/num; , dy = disty/num; maka anda telah siap untuk memulai dan mengecek kea rah mana anda akan menggerakkan menu. Pembahasan akan diawali dengan baris di bawah ini:

Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-x)) Math.floor- untuk membulatkan angka dan membuat angka tersebut menjadi integer(dibulatkan ke angka terdekat). Math.abs membuat angka akan selalu bernilai positif tanpa mempedulikan jika angka tersebut negatif maupun tidak, anda membutuhkan ini karena anda menginginkan menu dapat bergerak bebas ke segala arah kiri dan kanan maupun atas dan bawah. Pada prinsipnya baris ini berisi: apabila angka pada pixel untuk bergerak menuju posisi X lebih rendah dari posisi menuju akhir dikurangi posisi pada saat ini maka proses akan berlanjut. Bagian kedua pada baris tersebut juga memiliki arti yang sama seperti sebelumnya berlaku untuk posisi Y. Apabila garis melakukan evaluasi prosedur secara benar maka menu akan bergerak sebesar dX dan dY pixel:  oMenu.moveBy(dx,dy). Apabila pada hal yang sama namun tidak terjadi evaluasi prosedur secara benar maka menu akan bergerak langsung menuju endX dan endY.

 

Kini anda menuju pada baris terakhir; setTimeout("moveM2("+inc+")",20)- ini adalah sebuah fungsi yang mengaktifkan timeout untuk aplikasi ini setiap 20 milisekon.

Ada banyak cara yang dapat dilakukan selain melalui contoh di atas sebagai contoh dengan fungsi yang hanya aktif ketika oHead digerakkan, tetapi untuk membuat halaman web dinamis anda sestabil mungkin maka cara di atas adalah yang terbaik dalam melakukan stabilisasi. Netscape 4 tidak memberi support untuk clearTimeout secara sempurna dan apabila anda melakukan cara yang lain maka akan memperbesar kemungkinan anda akan menemui berbagai masalah dengan berbagai timeout yang berkesinambungan namun hal ini masih tidak membawa dampak yang amat sangat berat terkecuali bila timeout tersebut terjadi pada saat yang bersamaan.

Setelah ini anda hanya perlu melakukan paste seluruhnya pada sebuah halaman maka anda akan merampungkan halaman web dinamis.

  • Contoh 2 Validasi Formulir

 

 

 

Halaman web dinamis banyak digunakan untuk proses-proses yang membutuhkan interaksi dengan pengguna site itu sendiri, dalam hal ini kita mengenalnya dengan istilah client side scripting. Pengaplikasian web dinamis sering kita jumpai pada form registrasi atau sejenisnya. Dari sebuah script web dinamis sederhana kita dapat memodifikasinya sesuai dengan kebutuhan dan tujuan kita. Contoh pengaplikasian web dinamis pada form:

<html>

<head>

<script language=”Javascript“>

<!–

function formCheck(formobj){

//1) Enter name of mandatory fields

var fieldRequired = Array(“FirstName”, “LastName”);

//2) Enter field description to appear in the dialog box

var fieldDescription = Array(“First Name”, “Last Name”);

//3) Enter dialog message

var alertMsg = “Please complete the following fields:\n”;

 

var l_Msg = alertMsg.length;

 

for (var i = 0; i < fieldRequired.length; i++){

var obj = formobj.elements[fieldRequired[i]];

if (obj){

 

if (obj.value == “” || obj.value == null){

alertMsg += ” – ” + fieldDescription[i] + “\n”;

}

}

}

 

if (alertMsg.length == l_Msg){

return true;

}else{

alert(alertMsg);

return false;

}

}

//–>

</script>

<body>

<!–SAMPLE FORM ——————————–>

<form name=”formcheck” onsubmit=”return formCheck(this);”>

First Name: <input type=text name=”FirstName” size=”25″><br>

Last Name: <input type=text name=”LastName” size=”25″><br>

<input type=submit value=”Submit Form”>

</form>

</body>

</html>

 

 

 

Hal-hal yang perlu diperhatikan adalah:

  1. Di dalam <form> tag sisipkan perintah onSubmit event handler: onsubmit=”return formCheck(this);”
  2. Berikan nama yang uniq bagi setiap field
  3. Terakhir berikan instruksi yang diinginkan

Contoh tampilan Validasi formulir:

 

ketika kita meng-click “submit form”  tanpa mengisi data maka akan ditampilkan kesalahan/error sebagai berikut:

 

 

Di saat kita mengetik nama sebagai contoh First Name=Bruce dan Last Name=Lee yang menghasilkan “Bruce Lee” maka aplikasi error di atas tak akan terjadi karena prosedur yang dilaksanakan telah sesuai dengan ketentuan yang berlaku.

 

  • Contoh 3 Spasi dalam penulisan

kode:

 

 

<html>

<head>

<style>

a:hover

{

letter-spacing: 2;

}

</style>

</head>

 

<body>

<a href=”test.html”>Mouse over this link</a>

</body>

 

</html>




 

 

 

 

hasil:

sebelum mouse over:

Mouse over this link

Setelah mouse over:

M o u s e  o v e r  t h i s  l i n k

 

 

  • Contoh 4 Menu Deskripsi

kode:

 

<html>

<head>

<style>

table

{

background:black;

}

a

{

text-decoration:none;

color:#000000;

}

th

{

width:150px;

background:#FF8080;

}

td

{

font:bold;

background:#ADD8E6;

}

</style>

<script type=”text/javascript“>

function gettip(txt)

{

document.getElementById(‘tip’).innerHTML=txt

}

function reset()

{

document.getElementById(‘tip’).innerHTML=”&nbsp;”

}

</script>

</head>

 

<body>

<b>Mouse over the links to see their descriptions</b><br />

<table width=”400px”>

<tr>

<th>

<a href=”http://www.w3schools.com”

onmouseover=”gettip(‘W3Schools is the best Web Developers resource on the Web’)”

onmouseout=”reset()”>mozilla</a>

</th>

<td rowspan=”3″ id=”tip”> </td>

</tr>

<tr>

<th>

<a href=”http://www.microsoft.com” onmouseover=”gettip(‘Internet Explorer is winning the browser war’)”

onmouseout=”reset()”>Internet Explorer</a>

</th>

</tr>

<tr>

<th>

<a href=”http://my.netscape.com” onmouseover=”gettip(‘The Navigator is Netscapes browser tribute to web surfers’)”

onmouseout=”reset()”>Netscape Navigator</a>

</th>

</tr>

</table>

 

</body>

</html>




 

hasil(page pertama kali dibuka):

 

hasil(ketika mouseover) dalam hal ini posisi mouse berada pada Internet Explorer:

 

 

  • Contoh 5 Link yang bergemerlap

kode:

 

 

<html>

<head>

<script type=”text/javascript“>

function blinklink()

{

if (!document.getElementById(‘blink’).style.color)

{

document.getElementById(‘blink’).style.color=”red”

}

if (document.getElementById(‘blink’).style.color==”red”)

{

document.getElementById(‘blink’).style.color=”black”

}

else

{

document.getElementById(‘blink’).style.color=”red”

}

timer=setTimeout(“blinklink()”,100)

}

 

function stoptimer()

{

clearTimeout(timer)

}

</script>

</head>

 

<body onload=”blinklink()” onunload=”stoptimer()”>

<a id=”blink” href=”default.asp”>Blinking link</a>

</body>

 

</html>




 

hasil: akan terjadi pergantian warna pada link secara bergantian hitam dan merah

 

 

  • Contoh 6 Perubahan inner html

 

Kode:

 

<html>

<head>

 

<script type=”text/javascript“>

function nameon()

{

document.getElementById(‘h2text’).innerHTML=”WELCOME!”

}

function nameout()

{

document.getElementById(‘h2text’).innerHTML=”How are you today?”

}

</script>

 

</head>

<body>

<h2 id=”h2text” onmouseout=”nameout()”

onmouseover=”nameon()”>

Mouse over this text!</h2>

</body>

</html>




 

 

hasil: ketika mouse diarahkan maka kata “How are you today?” akan berubah menjadi “WELCOME!”

 

 

  • Contoh 7 Animasi dengan Halaman Web Dinamis

kode:

 

 

 

<html>
<head>
<title>Animation with Dynamic HTML</title>
<script language="javascript">
var position=0;
function Move() {
   position += 1;
   if (position > 650) position = 0;
    document.getElementById("mouse").style.left = position;
    window.setTimeout("Move();",10);
}
</script>
 </head>
 <body onLoad="Move();">
 <H1>Animation with Dynamic HTML</H1>
 <HR>
<div ID="mouse" STYLE="position:absolute; left:0; top:100;
  width:100; height:100; visibility:show">
  <img src="mouse.gif" width=100 height=100 alt="" border="0">
</div>
</body>
</html>

 

 

 

 

 

hasil:

 

 

 

 

 

 

  • Contoh 8 Memilih seluruh checkbox

kode:

 

 

<html>

<head>

<script type=”text/javascript“>

function makeCheck(thisForm)

{

for (i = 0; i < thisForm.option.length; i++)

{

thisForm.option[i].checked=true

}

}

 

function makeUncheck(thisForm)

{

for (i = 0; i < thisForm.option.length; i++)

{

thisForm.option[i].checked=false

}

}

</script>

</head>

<body>

 

<form name=”myForm”>

<input type=”button” value=”Check” onclick=”makeCheck(this.form)”>

<input type=”button” value=”Uncheck” onclick=”makeUncheck(this.form)”>

<br />

<input type=”checkbox” name=”option”>Apples<br />

<input type=”checkbox” name=”option”>Oranges<br />

<input type=”checkbox” name=”option”>Bananas<br />

<input type=”checkbox” name=”option”>Melons

</form>

 

</body>

</html>


 

 

 

hasil:

ketika kita mengklik tombol check maka semua check box akan di centang, ketika kita mengklik uncheck maka semua checkbox akan di uncheck

 

 

 

 

 

  • Contoh 9 mengganti background image

kode:

 

<html>

<head>

<script type=”text/javascript“>

function bgChange(bg)

{

document.body.background=bg

}

</script>

</head>

 

<body>

 

<b>Mouse over these images, and the background will change</b>

<table width=”300″ height=”100″>

<tr>

<td onmouseover=”bgChange(‘paper.jpg’)”

background=”paper.jpg”>

</td>

<td onmouseover=”bgChange(‘bluesilk.jpg’)”

background=”bluesilk.jpg”>

</td>

<td onmouseover=”bgChange(‘bgdesert.jpg’)”

background=”bgdesert.jpg”>

</td>

</tr>

</table>

 

</body>

</html>

 

 

 

hasil:

 

pertama kali browser dibuka akan muncul halaman seperti ini. Lalu ketika kita mendekatkan pointer pada salah satu background image makan hasilnya akan seperti ini

 

 

 

      4.8    Menambahkan fungsi pada halaman dinamis(EK:3)

4.8.1 Konten Dinamis

Di saat anda mengerti perbedaan syntax dan fungsi antara halaman web dinamis pada NS4 dan IE 4, maka anda telah siap mempelajari bagaimana membuat konten pada halaman dinamis dan merubahnya sesuai keinginan anda.

§  Konten dinamis pada NS4

Perubahan konten pada NS4 melibatkan layer tag. Layer tersebut diperlakukan oleh NS browser sebagai bagian yang terpisah dari keseluruhan bagian halaman dengan bagian tersendiri dari objek dokumen( yang di dalamnya terdapat objek lain yang didukung oleh dokumen tersebut).

Ini adalah bagian yang amat sangat penting untuk dipahami, sejak faktanya bahwa layer berisi objek dokumen lain yang memungkinkan terciptanya konten dinamis pada NS4.

 

Contoh di bawah ini menunjukkan berawal dari membangun layer dasar yang lalu akan  memperlihatkan proses perubahan konten di dalamnya:

 

<layer id="alayer" width=100% height=30></layer>

Ketika anda siap mengakses objek dokumen pada layer di atas, maka ini adalah syntax yang diperlukan: document.alayer.document

Setelah mengetahui informasi di atas, anda dapat menuliskan sebuah script yang dapat merubah konten pada layer setiap 3 detik, seperti terlihat pada figure di bawah ini:

<script language="Javascript1.2"><!--
var thecontents=new Array()
thecontents[0]="How are you today?"
thecontents[1]="I am fine, thank you."
thecontents[2]="Well, nice talking to you!"
var current=0

function changecontent() {
  document.alayer.document.write(thecontents[current])
  document.alayer.document.close()
  if (current==2) current=0
  else current++
  setTimeout("changecontent()",3000)
}

window.onload=changecontent
//--></script>

Anda dapat membuktikan kalau teks secara dinamis telah didapat dan dihapus, tanpa harus melakukan reload pada dokumen.

§  Konten Dinamis pada IE 4

 

Pada IE 4, konten dinamis terdapat pada properti spesial yang disebut sebagai innerHTML yang terdapat pada <span> dan <div> tag. Dengan hanya mengeset properti ini menjadi nilai HTML baru dan konten didalam pada span atau div akan otomatis langsung terupdate mengacu pada setting nilai yang baru. Contoh di bawah ini menunjukkan bagaimana  memodifikasi informasi di atas dalam membuat konten dinamis pada pengguna IE 4 :

 

<div id="mydiv"></div>

<script language="Javascript1.2">
var thecontents=new Array()
thecontents[0]="How are you today?"
thecontents[1]="I am fine, thank you."
thecontents[2]="Well, nice talking to you!"
var current=0

function changecontent() {
  mydiv.innerHTML=thecontents[current]
  if (current==2) current=0
  else current++
  setTimeout("changecontent()",3000)
}

window.onload=changecontent
//-->lt;/script>

Well, nice talking to you!

// Kedua browser menghasilkan hasil yang sama hanya saja dengan metode yang berbeda.

  • Elemen bergerak pada dokumen

Apabila anda tertarik atau antusias pada bidang animasi, maka pengetahuan akan halaman web dinamis akan terasa amat sangat membantu anda, seluruh halaman web dapat diibaratkan sebagai kanvas gambar anda. Anda dapat membuat konten sesuka dan sebebas yang anda mau. Pada Netscape, ini dapat dilakukan dengan memanipulasi bagian kiri dan atas pada atribut di <layer> tag. Pada Internet Explorer, hal yang sama dapat dilakukan dengan mengubah pixel pada bagian kiri dan pixel bagian atas  pada property bagian objek gaya.

  • Elemen bergerak pada NS4

Mengaktifkan layer pendukung pada properti kiri dan atas, yang mengontrol pada bagian kiri atas dokumen. Dengan menggunakan hitungan simple dan beberapa baris script, anda dapat mengupdate secara dinamis property-properti ini sehingga layer bergerak. Contoh dibawah ini menggambarkan perubahan pada property bagian kiri sehingga sebuah layer bergerak secara horizontal ketika tombol ditekan.

Hanya akan berfungsi bila menggunakan Netscape.

 

<ilayer name="space">
<img src="tn00018a.gif">
</ilayer>

<script><!--
function moving() {
  if (document.snpace.left<1000)
    document.space.left+=5

  moveid=setTimeout("moving()",50)
}

function come_back() {
  clearTimeout(moveid)
  document.space.left=0
}
//--&></script>

<form>
<input type="button" value="Move" onClick="moving()">
<input type="button" value="Come back" onClick="come_back()">
</form>

Anda dapat membuktikannya dengan secara berkala menambah pada bagian kiri property dengan “space” untuk menggerakannya dan mengeset property kembali pada settingan orisinal ketika anda menginginkan layer kembali ke tempat asalnya.

§  Elemen bergerak pada IE 4

Elemen bergerak pada IE 4 menentukan penempatan dasar elemen yang berposisi pada span atau div,lalu merubah span atau div pada pixel bagian kiri dan pixel bagian atas dari properti. Terlihat sangat sulit namun sebenarnya sangat simpel:

 

//

<div id="spaceship" style="position:relative">
<img src="tn00018a.gif">
</div>

<script><!--
function moving2() {
  if (spaceship.style.pixelLeft<1000)
    spaceship.style.pixelLeft+=5
  moveid2=setTimeout("moving2()",50)
}

function come_back2() {
  clearTimeout(moveid2)
  spaceship.style.pixelLeft=0
}
//--></script>

<form>
<input type="button" value="Move" onClick="moving2()">
<input type="button" value="Come back" onClick="come_back2()">
</form>

Pertama diset <div> bagian terluar yang disebut “spaceship” pada  sebuah posisi yang relatif yang sangat dibutuhkan untuk membuat elemen tersebut bergerak (anda dapat mengeset nilai tersebut kepada nilai “absolut”). Lalu dengan memanipulasi pixel ukuran lebar pada bagian property dari objek gaya maka elemen tersebut bergerak.

4.8.2 Penentuan Nilai String, Konstanta ,Variabel dan Array

Sebagai sebuah bahasa program javascript adalah sesuatu yang tidak terlalu sulit untuk dipelajari. Sebagai sebuah bahasa program, Java hanya memiliki beberapa tipe dasar: Nomor seperti 3,-45,56.78, strings seperti “halo” dan “Thomas Powell” serta nilai Boolean benar dan salah. Beberapa elemen dalam javascript:

 

  • Variabel

Variabel pada javascript dapat ditetapkan setiap saat. Seperti contoh di bawah ini:

Var x=5 ;

 

Akan mengeset variabel bernama X menjadi sebuah nilai integer dan

 

Var today=”Wednesday” ;

 

Hasil di atas akan mengeset variabel today untuk string “Wednesday”. Sebagai sebuah bahasa program yang independen maka sangat memungkinkan untuk mengeset berbagai macam variabel untuk berbagai macam tipe pernyataan/statemen yang diinginkan serta kapanpun anda inginkan seperti contoh di bawah ini:

Today = x ;

 

Hal ini dapat dilakukan dan dengan hanya mengganti nilai dari variabel today dengan nilai integer 5.

 

  • String

Untuk memanipulasi text di dalam javascript kita harus menggunakan string object. Contoh cara pendeklarasian dan penggunannya.

<html>

<body>

 

<script type=”text/javascript“>

 

var txt=”Hello World!”;

 

document.write(“<p>Big: ” + txt.big() + “</p>”);

document.write(“<p>Small: ” + txt.small() + “</p>”);

 

document.write(“<p>Bold: ” + txt.bold() + “</p>”);

document.write(“<p>Italic: ” + txt.italics() + “</p>”);

 

document.write(“<p>Blink: ” + txt.blink() + ” (does not work in IE)</p>”);

document.write(“<p>Fixed: ” + txt.fixed() + “</p>”);

document.write(“<p>Strike: ” + txt.strike() + “</p>”);

 

document.write(“<p>Fontcolor: ” + txt.fontcolor(“Red”) + “</p>”);

document.write(“<p>Fontsize: ” + txt.fontsize(16) + “</p>”);

 

document.write(“<p>Lowercase: ” + txt.toLowerCase() + “</p>”);

document.write(“<p>Uppercase: ” + txt.toUpperCase() + “</p>”);

 

document.write(“<p>Subscript: ” + txt.sub() + “</p>”);

document.write(“<p>Superscript: ” + txt.sup() + “</p>”);

 

document.write(“<p>Link: ” + txt.link(“http://abc.com “) + “</p>”);

</script>

 

</body>

</html>

 

Hasil dari tampilan script diatas:

Big: Hello World!

Small: Hello World!

Bold: Hello World!

Italic: Hello World!

Blink: Hello World! (does not work in IE)

Fixed: Hello World!

Strike: Hello World!

Fontcolor: Hello World!

Fontsize: Hello World!

Lowercase: hello world!

Uppercase: HELLO WORLD!

Subscript: Hello World!

Superscript: Hello World!

Link: Hello World!

 

 

 

  • Array

Array digunakan untuk menyimpan satu atau lebih kumpulan dari nilai-nilai kedalam satu variabel. contoh:

var myArray=new Array();

ada 2 cara untuk memasukkan nilai array yaitu:

1. var mycars=new Array();

mycars[0]=”Saab”;

mycars[1]=”Volvo”;

mycars[2]=”BMW”;

 

2. var mycars=new Array(“Saab”,”Volvo”,”BMW”);

cara mengakses nilai-nilai di dalam array:

document.write(mycars[0]);

 

hasil

 

Saab

untuk merubah nilai di dalam array, deklarasikan ulang element yang ingin dirubah contoh:

Mycars[0]=”Opel”;

 

Javascript adalah sebuah bahasa pemrograman yang amat sensitif terutama penetapan huruf (case sensitive), pada saat membuat metode alert (peringatan) dengan panggilan seperti alert(‘hello’); maka dapat diterima, namun saat menggunakan Alert(‘hello’) maka hal ini tidak dapat diterima. Perlu dicatat mayoritas propertis-propertis dan metode pada Javascript seharusnya diawali dengan huruf kecil dengan kata yang terdapat dalam string dapat menggunakan huruf besar/kapital. Seperti contoh berikut ini, alert() menggunakan huruf kecil tetapi document.lastModified memiliki propertis pada bagian kedua menggunakan huruf besar/kapital. Hal ini diikuti dengan skema tanda kurung yang ditemukan pada jenis bahasa program lainnya. Perli diingat Javascript sangat sensitif dengan huruf kapital; sedangkan HTML tidak sensitif terhadap perubahan huruf antara huruf capital dan huruf kecil. Pernyataan atau statemen pada Javascript selalu diakhiri dengan semicolon (;) atau karakter kembali jadi:

alert(“hi”);
alert(“there”);

 

Contoh di atas memiliki kesamaan atau ekuivalen dengan

alert(“hi”)
alert(“there”)

 

Namun apabila anda memindahkan karakter kembali (;) pada contoh kedua maka akan terjadi kesalahan, Sedangkan meletakkan 2 buah pernyataan pada garis yang sama dengan semicolon di antara keduanya seperti di bawah ini adalah yang benar:

alert(“hi”); alert(“there”);
  • Konstanta

Kita dapat membuat atau mendefinisikan konstanta di dalam javascript dengan perintah “const”. sintaks yang digunakan sama dengan pendeklarasian variable. Perbedaannya adalah nilai sebuah konstanta tidak dapat dirubah atau dideklarasi ulang selama script dijalankan.

 

Syntax dasar:

const <nama_konstanta> = nilai;

 

contoh

const prefix = '212';

 

4.8.3 Operator Aritmatik dan Struktur Kontrol (statemen IF, Switch, While, For)

Javascript memiliki sebuah set operator yang sederhana termasuk aritmatika dasar seperti penambahan, pengurangan, pembagian dan perkalian (+,-,/,*), Perbandingan Boolean (>,<,<=,>=,!, dan ==), operator string dan lain sebagainya. Perintah aktual dari bahasa programming ini termasuk statemen kondisional contohnya dalam penggunaan syntax pada IF Statement , IF-ELSE dan lain sebagainya.

 

  • IF Statement

IF statement digunakan untuk mengeksekusi suatu perintah dengan kondisi tertentu.

Sintaks dasar:

if (condition)

{

code to be executed if condition is true

}

 

Contoh di bawah ini menunjukkan script yang memberikan peringatan /alert pada pengguna berdasarkan dari nilai variabel x.

X=5;
If(x>4)
alert(“greater than 4”);
else
alert(“less than 4”);

 

  • SWITCH Statement

Tipe kondisional yang lebih kompleks atau rumit juga dapat ditangani dengan menggunakan statemen pertukaran (switch statement), Switch digunakan bila pilihan kondisi yang ada sangat banyak dan beraneka ragam.

Sintaks dasar:

switch(n)

{

case 1:

execute code block 1

break

case 2:

execute code block 2

break

default:

  code to be executed if n is

  different from case 1 and 2

}

Contoh:

var d=new Date()

theDay=d.getDay()

switch (theDay)

{

case 5:

document.write(“Finally Friday”)

break

case 6:

document.write(“Super Saturday”)

break

case 0:

document.write(“Sleepy Sunday”)

break

default:

document.write(“I’m looking forward to this weekend!”)

}

 

  • WHILE Statement

While loop digunakan untuk mengeksekusi hasil selama kondisi masih memenuhi syarat.

Sintaks dasar:

while (var<=endvalue)

{

code to be executed

}

Contoh script di bawah ini memberi peringatan /alert kepada pengguna sebanyak 3 kali:

X=1;
While (x<4)
{
alert(x);
x++;
}

 

  • FOR Statement

For statement digunakan bila anda ingin mengeksekusi suatu kode secript beberapa kali sesuai dengan keinginan anda.

Sintaks dasar:

for (var=startvalue;var<=endvalue;var=var+increment)

{

code to be executed

}

Contoh:

For (var x=1; x<4; x++)
{
alert(x);
}

4.8.4 Contoh aplikasi antar browser bagi variable dan statemen IF

Hingga saat ini, di saat anda ingin menentukan browser yang dipakai oleh para pemakai internet, maka anda dapat menggunakan navigator objek, sama seperti mayoritas programer javascript akan lakukan. Contoh di bawah menggambarkan ilustrasi objek untuk melacak baik NS4 maupun IE 4:

 

Var ns4= (navigator.appName=="Netscape"&&navigator.appVersion>=4)
var ns4= (navigator.appName=="Microsoft Internet Explorer"&&navigator.appVersion>=4)

Terlihat pada figure di atas terlihat amat kacau, maka navigator objek sangat sulit dalam aplikasi. Namun ada cara lain yang lebih cepat dalam melacak berbagai macam browser dan disebut deteksi objek.

Ide dari detesi objek didasari dari cara kerja javascript. Ketika browser tidak mendukung/support sebuah objek tertentu, javascript akan kembali tanpa hasil/null ketika anda mereferensikannya. Dengan mengetahui fakta ini maka anda dapat menggunakan referensi objek pada IF statement yang telah anda buat (ditempatkan pada navigator objek) untuk menentukan browser yang dipakai oleh pengguna.

Mari kita telusuri dengan contoh, Anda tentu mengetahui pada NS generasi 3 ke atas(3+) dan IE generasi 4 ke atas (4+) mendukung dokumen gambar objek, Jika kita ingin melacak browser tersebut maka anda melakukan seperti di bawah ini:

if (document.images)
  alert("You are using NS 3+ or IE 4+")

Program di atas diterjemahkan ke dalam bahasa Inggris, yang dibaca: “If the browser supports the images object (which only NS 3+ and IE 4+ do), alert a message dengan kata lain IF statemen dipakai menentukan apakah browser mendukung objek gambar yang pada kenyataannya hanya bisa dipakai pada NS versi 3 ke atas dan IE versi ke 4 ke atas. Saat anda benar memakai browser yang mendukung maka pesan alert akan muncul yang menyatakan anda telah memakai NS atau IE yang sesuai dengan kriteria dari statemen tersebut.

Harap dipikirkan bahwa deteksi objek adalah sebuah cara yang tidak langsung dalam menentukan tipe browser yang digunakan oleh pemakai. Dibandingkan secara langsung menentukan nama dan versi yang digunakan oleh pemakai browser tersebut (melalui navigator objek), Pendeteksi objek lebih menciptakan aplikasi yang generic, mengurangi kerumitan dalam teknik pelacakan browser.

Lalu bagaimana kalau anda menggunakan pendeteksi objek untuk melacak NS4 dan IE 4? Jawabannya hanya NS4 mendukung objek document.layer, dan hanya IE 4 yang mendukung document.all. Kita dapat dengan mudah menentukan bahwa pemakai browser menggunakan NS4, IE 4 maupun kedua-duanya seperti contoh di bawah ini:

if (document.layers)
  alert("You are using NS 4+")
if (document.all)
  alert("You are using IE 4+")
if (document.layers||document.all)
  alert("You are using either NS 4 or IE 4+")

Sekarang anda tidak perlu kembali menggunakan navigator objek yang berantakan dalam melakukan pelacakan browser

 

 

 

 

 

 4.9       Menguji dan Mengakhiri Halaman Dinamis

 

 4.9.1  Menguji Halaman Web Dinamis (KUK:4.2)

Bagi para developer, saat pengetesan merupakan salah satu aspek terpenting dalam proses pembuatan halaman web dinamis. Setelah seluruh kerja keras, desain dan implementasi, mayoritas dari mereka ingin langsung segera meluncurkan situs mereka. Pengujian halaman web dinamis adalah nilai kunci positif bagi para developer. Jangan pernah membiarkan pengunjung situs anda menguji situs anda setelah diluncurkan, apabila mereka menemukan masalah atau yang sering disebut “bugs” yang merupakan kesalahan pada proses produksi pembangunan halaman web, mereka akan sangat kecewa yang dapat berakibat fatal. Amat sangat disayangkan pengujian halaman web dinamis sering diabaikan dan hanya dilakukan dengan pengecekan sekilas pada situs dengan menggunakan berbagai macam browser serta mengecek link pada situs anda. Bugs akan selalu ada pada situs web, apapun yang terjadi. Seringkali kesalahan para developer adalah memiliki asumsi bahwa bila situs mereka terlihat baik-baik saja maka semuanya akan lancar. Namun membangun halaman web dinamis bukan hanya terpusat padadesain visual, melainkan anda harus melakukan pengujian pada seluruh aspek desain situs anda.

Pengujian terhadap halaman web dinamis terdiri dari:

 

  • Pengujian Visual

Pengujian visual memastikan bahwa halaman web dinamis anda terlihat seperti yang telah direncanakan sejak awal. Mengecek tiap halaman dari situs anda dan memastikan mereka sesuai dengan tampilan/layout, warna dan gaya yang telah anda rancang. Menguji halaman web dinamis anda bekerja pada tiap browser yang berbeda, resolusi yang berbeda dan lain-lain. Mengetes halaman web dinamis anda  secara cepat , tepat serta memastikan tidak terjadi abstrak yang mencolok pada bagian tampilan. Pengujian visual juga membutuhkan tiap halaman untuk dicetak. Perlu diingat untuk menghindari terfokus pada pengujian cetak halaman bagi desain yang dikhususkan bagi konsumsi online.

 

  • Pengujian Fungsional

Pengujian fungsional dan pengujian visual merupakan bagian yang tak terpisahkan sebagai  fungsi dasar dari sebuah halaman web dinamis secara simpel tersedia pada layar. Biasanya setiap halaman web dinamis memiliki fungsi dasar seperti navigasi. Sangat penting untuk mengecek setiap link pada halaman web serta memperbaiki link yang broken. Broken link perlu diperhatikan sebagai sebuah kesalahan fungsional yang amat fatal. Sangat penting untuk memeriksa serta menguji setiap elemen interaksi seperti formulir serta data shopping. Gunakan seluruh test yang menggunakan situasi yang realistis dalam menghadapi berbagai kasus. Perlu diingat kalau pengguna tidak akan berpikir seperti yang anda pikirkan jadi bersiaplah untuk menghadapi segala kemungkinan.

 

  • Pembuktian Konten

Detail konten pada halaman web dinamis anda sangat penting. Perlu dipastikan bahwa seluruh konten benar pada tempatnya dan kata serta tata bahasa yang dipakai telah baik dan benar. Dicek secara mendetail seperti produk, nama, jenis produk, trademark serta tanggal paten dan harus selalu mengecek spelling. Terkadang klien maupun pengguna tidak akan pernah menolerir bila terdapat ada kesalahan walaupun sekecil apapun. Cara terbaik melakukan tes ini adalah dengan mencetak seluruh halaman web dinamis anda serta membaca baris per baris untuk lebih akurat dalam pengecekan.

 

  • Pengujian Kecocokan Sistim dan Browser

Diharapkan keterbatasan pada sistim dan browser telah diantisipasi secara matang pada saat pembuatan halaman web dinamis anda sehingga dapat dilakukan verifikasi pada saat pengujian. Perlu dipastikan halaman web dinamis anda dapat bekerja lancar pada tiap kemungkinan browser yang digunakan oleh klien. Maka sangat diperlukan rencana proyek memiliki ketentuan tiap browser secara lengkap supaya halaman web anda dapat bekerja sempurna walaupun browser yang digunakan sangat spesifik.

 

 

 

  • Pengujian peluncuran

Perlu dicek apabila halaman web dinamis anda telah diluncurkan sesuai dengan yang anda inginkan. Coba anda melakukan browsing seperti yang klien anda lakukan pada keadaan nyata. Bila halaman web dinamis anda didesain untuk para pengguna modem AOL maka anda harus mengeset account  AOL dan modem untuk mengecek kecepatan mengakses halaman dinamis anda.Untuk simulasi lalulintas informasi dipertimbangkan menggunakan pengujian software untuk membuat klien virtual yang seolah-olah mengakses halaman anda. Hal ini dapat menunjukkan kemampuan halaman web dinamis anda bekerja pada kondisi sesungguhnya. Amat sangat diperlukan untuk memperhatikan pengujian dilakukan pada tahap akhir pembangunan halaman web dinamis anda, proyek ini bisa gagal bila tidak diperhatikan detail kemungkinan peluncuran tanpa pertimbangan yang spesifik dan matang.

        

4.9.2  Fungsi format dinamis secara keseluruhan dibuat sesuai kebutuhan bisnis dan pelanggan

Dalam membuat halaman web dinamis, amat sangat dianjurkan untuk melakukan format dokumen secara konsisten sebagai contoh; menentukan kecocokan antara tag pada tab berhenti, menggunakan spasi/space dalam memisahkan section yang berbeda pada dokumen dan mengurutkan secara alphabet atribut pada tag sehingga mudah untuk kembali dan melakukan perbaikan bila terjadi kesalahan dengan cepat.

Dengan halaman web dinamis anda dapat menambahkan efek pada dokumen anda yang sebelumnya tidak dapat dilakukan sebagai contoh:

  • Menyembunyikan teks dan gambar pada dokumen anda dan tetap menyimpan konten ini tersembunyi hingga waktu yang telah ditentukan terlampaui atau pengguna berinteraksi dengan halaman web.
  • Memberi animasi pada teks dan gambar pada dokumen anda, secara independen menggerakkan tiap bagian elemen dari poin awal ke poin akhir manapun, mengikuti jalur yang anda inginkan.
  • Membuat sebuah ticker yang secara otomatis melakukan refresh pada konten dengan berita terbaru, stock quote dan berbagai macam data lainnya.
  • Membuat sebuah form yang secara instan dibaca, diproses dan direspon pada data pengguna yang dicantumkan pada form.

 

Halaman web dinamis dapat melakukan efek tersebut  diatas dengan melakukan modifikasi pada dokumen dan secara otomatis melakukan format serta mendisplay ulang dokumen untuk menunjukkan perubahannya. Tanpa perlu melakukan reload pada dokumen atau mengupload dokumen baru maupun memerlukan server lain dalam menghasilkan konten baru bahkan, hal ini hanya membutuhkan computer pengguna dalam melakukan kalkulasi dan membuat perubahan. Hal ini berarti pengguna tidak perlu harus menunggu teks dan data dalam melakukan prosedur yang sangat menyita waktu dari dan ke server sebelum melihat hasilnya. Selanjutnya halaman web dinamis tidak memerlukan suport tambahan  untuk aplikasi maupun kontrol dalam melakukan perubahan.

 

Halaman web dinamis bekerja dengan baik dalam aplikasi kontrol Microsoft ActiveX, dan objek lainnya. Anda dapat menggunakan aplikasi dan control yang tersedia atau membuat yang baru yang secara spesifik menambah keunggulan fitur dari halaman web dinamis. Aplikasi dan control tersebut akan bekerja dengan performa terbaik ketika anda bergantung pada mereka dalam melakukan tugas yang amat sulit seperti penggunaan halaman web dinamis dalam melakukan display output maupun proses pada user input. Sebagai contoh, anda dapat membuat sebuah dokumen yang memungkinkan pengguna/user untuk bertanya, melihat maupun melakukan modifikasi konten yang sangat besar, server yang berbasis database dengan memadukan fitur data binding pada halaman web dinamis dengan objek sumber data. Objek sumber data ini mengeluarkan serta mengeset data pada database dan halaman web dinamis anda akan melanjutkan tugasnya yakni memproses pertanyaan dari pengguna, memperlihatkan data dan menjalankan interaksi yang diperlukan dengan objek.

 

Halaman web dinamis juga mengeleminasi berbagai kelemahan dari teknologi browser terdahulu. Anda dapat membuat sebuah halaman web yang inovatif, baik pada internet maupun intranet tanpa harus mengorbankan performa untuk interaksi dan special efek. Halaman web dinamis tidak hanya menambah kekuatan akan persepsi pengguna pada dokumen anda namun juga menambah performa server dengan mengurangi permintaan kepada server yang selanjutnya harus melakukan load pada server.

 

4.9.3   Membuat pengunjung halaman web anda tetap mengakses halaman anda

Dengan konten yang paling terbaru yang dapat anda update setiap saat, maka halaman web anda akan selalu relevan dan tidak tertinggal. Pengunjung tidak akan disediakan informasi atau cerita yang sama pada saat mengunjungi halaman web anda melainkan mereka akan kembali membuka halaman atau situs anda untuk mendapatkan berbagai informasi terbaru dan terkini. Ini sangat mudah dan murah dalam segi biaya dilakukan menggunakan halaman web dinamis dan akan tetap menjaga pengunjung situs anda akan terus kembali dan terus kembali mengakses info dari situs anda.

    

4.9.4   Mengatur pengunjung halaman anda dengan aman dan rahasia

Dengan situs berbasis utama data anda dapat menampilkan informasi yang hanya anda ingin tampilkan kepada pengunjung situs anda. Membuat bagian section untuk member, memegang dan memiliki passwords, mengunci serta menyortir permintaan yang tidak diinginkan; memegang servis untuk berlangganan /member; Mengijinkan staf anda untuk mengakses area di mana tidak semua anggota dapat mengaksesnya tanpa otorisasi dari anda. Situs berbasis database anda dapat melakukan fungsi keamanan ini dengan sangat mudah.

 

4.9.5  Akses mudah dicari/ditemukan

Membuat pengunjung anda nyaman dengan amat mudahnya dan cepat dalam mendapatkan informasi dengan menggunakan halaman web dinamis yang merupakan salah satu keunggulannya. Walaupun anda adalah seorang penerbit yang melakukan hosting untuk ribuan artikel maupun pedagang yang menawarkan ratusan produknya maka halaman web dinamis memungkinkan pengunjung untuk dapat menemukan apa yang mereka cari dengan kecepatan tinggi dan efisien.

 

 4.9.6   Memacu situs anda memaksimumkan potensialnya

Tidak seperti halaman web traditional yang statis, sebuah halaman web dinamis lebih amat bernilai guna tinggi tidak hanya sebagai sebuah brosur sederhana dan simpel. Dengan arsitektur yang mengacu pada sifat dasarnya yang dinamis, Anda dapat membuat situs anda sebagai kumpulan berbagai macam kegunaan atau multifungsi  dengan berbagai macam bidang operasional yang tidak terbatas. Sebagai contoh anda dapat dengan mudah menghubungkan pengunjung anda dengan orang yang dibutuhkannya, distributor terdekat, menghubungkan seorang penjual kepada konsumen atau menyampaikan respon instan permintaan layanan konsumen. Kesimpulannya sebuah halaman web dinamis dapat melakukan hal-hal yang tak memungkinkan bagi sebuah halaman web statis.

 

 4.9.7 Mengendalikan tugas yang lebih kompleks/rumit

Selain digunakan secara optimal dalam penerbitan dan E-commerce, halaman web dinamis dapat digunakan untuk mengendalikan tugas yang lebih kompleks seperti mencatat(quoting), membuat perkiraan (estimating) dan mempresentasikan informasi penjualan di mana saja setiap saat dibutuhkan. Mengendalikan tugas kompleks adalah salah satu keunggulan utama halaman web dinamis.

 

4.9.8  Berhubungan dengan konsumen

Saat pengunjung datang mengakses situs anda, apakah anda dapat mengumpulkan informasi yang dapat membantu anda untuk memberikan servis yang terbaik bagi pengunjung/konsumen. Dengan built-in database halaman web dinamis dengan sangat mudah dapat mengumpulkan berbagai macam keinginan konsumen, menyediakan informasi yang mereka melalui newsletter atau mereka tertarik dengan produk terbaru. Mengetes pasar dengan produk baru dan melakukan survei untuk mendapat tanggapan dari konsumen potensial semua ini adalah terobosan baru berinteraksi dengan konsumen yang dapat dilakukan halaman web dinamis.

 

4.9.9   Mengendalikan jalur informasi (KUK:4.4)

Apakah memungkinkan untuk menjawab secara pribadi kepada jumlah pengunjung/konsumen yang tidak terhitung jumlahnya? Bila anda membuat sebuah halaman web dinamis maka dari memberi salam kepada konsumen secara pribadi setelah log-in sampai mengirim email khusus secara spesifik kepada konsumen yang membutuhkan,sebuah halaman web dinamis dapat meringankan tugas anda walaupun anda memiliki basis konsumen yang tak terhitung jumlahnya.

 

 

 

 


BAB V

SUMBER-SUMBER YANG DIPERLUKAN

UNTUK PENCAPAIAN KOMPETENSI

 

5.1.      Sumber Daya Manusia

 

Pelatih

Pelatih Anda dipilih karena dia telah berpengalaman. Peran Pelatih adalah untuk :

  1. Membantu Anda untuk merencanakan proses belajar.
  2. Membimbing Anda melalui tugas-tugas pelatihan yang dijelaskan dalam tahap belajar.
  3. Membantu Anda untuk memahami konsep dan praktik baru dan untuk menjawab pertanyaan Anda mengenai proses belajar Anda.
  4. Membantu Anda untuk menentukan dan mengakses sumber tambahan lain yang Anda perlukan untuk belajar Anda.
  5. Mengorganisir kegiatan belajar kelompok jika diperlukan.
  6. Merencanakan seorang ahli dari tempat kerja untuk membantu jika diperlukan.

 

Penilai

Penilai Anda melaksanakan program pelatihan terstruktur untuk penilaian di tempat kerja. Penilai akan :

  1. Melaksanakan penilaian apabila Anda telah siap dan merencanakan proses belajar dan penilaian selanjutnya dengan Anda.
  2. Menjelaskan kepada Anda mengenai bagian yang perlu untuk diperbaiki dan merundingkan rencana pelatihan selanjutnya dengan Anda.
  3. Mencatat pencapaian / perolehan Anda.

 

 

 

 

 

Teman kerja/sesama peserta pelatihan

Teman kerja Anda/sesama peserta pelatihan juga merupakan sumber dukungan dan bantuan. Anda juga dapat mendiskusikan proses belajar dengan mereka. Pendekatan ini akan menjadi suatu yang berharga dalam membangun semangat tim dalam lingkungan belajar/kerja Anda dan dapat meningkatkan pengalaman belajar Anda.

 

5.2.          Sumber-sumber Perpustakaan     

Pengertian sumber-sumber adalah material yang menjadi pendukung proses pembelajaran ketika peserta pelatihan sedang menggunakan Pedoman Belajar ini.

Sumber-sumber tersebut dapat meliputi :

  1. Buku referensi dari perusahan
  2. Lembar kerja
  3. Gambar
  4. Contoh tugas kerja
  5. Rekaman dalam bentuk kaset, video, film dan lain-lain.

 

Ada beberapa sumber yang disebutkan dalam pedoman belajar ini untuk membantu peserta pelatihan mencapai unjuk kerja yang tercakup pada suatu unit kompetensi.

 

Prinsip-prinsip dalam CBT mendorong kefleksibilitasan dari penggunaan sumber-sumber yang terbaik dalam suatu unit kompetensi tertentu, dengan mengijinkan peserta untuk menggunakan sumber-sumber alternative lain yang lebih baik atau jika ternyata sumber-sumber yang direkomendasikan dalam pedoman belajar ini tidak tersedia/tidak ada.

 

Sumber-sumber bacaan yang dapat digunakan :

Judul

Pengarang

Penerbit

 

 

 

:

:

:

 

 

Panduan Membuat Halaman Web

Thomas Powell

Elex media Komputindo

 

 

5.3.   Daftar Peralatan dan Bahan yang digunakan

 

  1. Judul/Nama Pelatihan        :  Membuat Halaman Web Dinamis Dasar
  2. Kode Program Pelatihan    :    TIK.PR04.002.01

 

NO

UNIT

KOMPETENSI

KODE UNIT

DAFTAR PERALATAN

DAFTAR BAHAN

KETERANGAN

 

1.

 

Membuat Halaman Web Dinamis Dasar

TIK.PR04.002.01

 

- Unit PC (Personal Computer) dengan CD drive dan Floppy Disk.

- PC dengan sistem   operasi Windows XP

- Keyboard dan mouse

- RAM dengan ukuran yang sesuai dengan kebutuhan.

- Software aplikasi dreamweaver, notepad, TextPad, atau Text editor.

 

- Aplikasi pembantu untuk menguji halaman seperti IE.

- Buku informasi atau manual installation Dreamweaver.

- Buku informasi tentang Scripting halaman web dinamis (Javascript).

 

 

-

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

DAFTAR PUSTAKA

 

  • Powell, Thomas. Elex Media Komputindo. Panduan Membuat Halaman Web
  • http://en.wikipedia.org/
  • http://www.geeks.netindonesia.net/

 

Testimoni

Advertisement
  1. Toko Kain Batik Cap Terbaik di Solo
  2. Toko Baju Batik Terbaik di Solo
  3. Aneka Kain Batik dengan Harga Murah
  4. Baju Batik Sarimbit Terbaik
  5. Dapatkan Kain Batik Berkualitas dengan Diskon 25%
  6. Aneka Baju Batik Seragam Kantor
  7. Pembuatan Seragam Batik Berlogo
slideseragambatik
Filed under : blog, tags: