Bab 3 Penerapan Dalam Perangkat Lunak

Bab 3

PENERAPAN DALAM

PERANGKAT LUNAK

3.1        Penerapan Calender Chart dan Maps Chart dalam HTML dan JavaScript

3.1.1        HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman stan-dar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser) .

HTML dapat juga digunakan sebagai link link antara le- le dalam situs atau dalam kom-puter dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya ba-nyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML ).

Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didenisikan pe-makaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian sika

Fungsi HTML yang lebih spesi k yaitu :

^ˆ    Membuat halaman web.

^ˆ    Menampilkan berbagai informasi di dalam sebuah browser Internet.

^ˆ    Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

 

3.1.2        JavaScript

JavaScript adalah bahasa yang digunakan untuk membuat program yang digunakan agar do-kument HTML yang ditampilkan pada sebuah Browser menjadi lebih interaktif, tidak sekedar indah saja. JavaScript memberikan beberapa fungsionalitas ke dalam halaman web, sehingga dapat menjadi sebuah program yang disajikan dengan menggunakan antar muka web. Java-Script merupakan bahasa script, yaitu bahasa yang tidak memerlukan kompiler untuk dapat menjalankanya, tetapi cukup dengan Interpreter.

Tidak perlu ada proses kompilasi terlebih dahulu agar program dapat dijalankan. Browser web Netscape Naviagtor dan Internet Exploler adalah salah satu contoh dari salah banyak in-terpreter, karena kedua browser ini telah dilengkapi dengan Interpreter JavaScript. Tetapi tidak semua browser web dapar menjadi interpreter javascript karena belum tentu browser tersebut dilengkapi dengan interpreter JavaScript.

JavaScript adalah bahasa pemrograman yang ringan dan mudah untuk digunakan. Dengan adanya JavaScript ini, maka kini halaman web tidak sekedar menjadi halaman data dan informasi saja, tetapi juga menjadi suatu program aplikasi dengan antarmuka web.

JavaScript merupakan bahasa pemrograman yang tidak membutuhkan lisensi untuk dapat menggunakanya. Jika browser web yang kita gunakan mendukung JavaScript, maka kita dapat langsung membuat aplikasi berbasis web dengan menggunakan JavaScript.

JavaScript muncul sebagai jawaban atas tantangan dari pengakses web yang mengharapkan halaman web yang ditampilakan dapat lebih dinamis, tidak statis. Dokumen atau halaman web, tidak sekedar digunakan untuk dapat berinteraksi dengan suatu sistem informasi . Karena pada awal perkembangan teknologi dan peneraopan web , halaman-halaman web lebih cenderung sebagai halaman-halaman yang statis, tidak ada suatu daya tarik lain. Selain hanya data dan informasi yang ditampilkan sehingga akan membuat pengunjung web menjadi cepat bosan dan memutuskan untuk beralih ke situs web lain.

Terus pertanyaanya, bagaimanakah caranya membuat halaman web menjadi tidak statis dan menjadi dinamis?? Jawaban pertama keinginan adanya suatu yang dinamis dalam halaman web adalah adanya animasi gambar yang dikemas dalam le gif animasi (animated gif). Tetapi gambar animasi ini ternyata bukanlah jawaban yang sesungguhnya diharapkan, karena secara prinsip, bukan merupakan suatu konsep dinamis yang sesungguhnya.

Ternyata model dinamis yang diinginkan adalah bahwa halaman web yang ditampilkan bisa juga digunakan sebagai aplikasi, sebagaimana aplikasi dalam suatu sistem operasi (aplikasi atau program berbasis teks atau windows). Web sebagai standar antarmuka aplikasi online, haruslah dapat mengakomodasi kebutuhan untuk menjadikanya standar seperti halnya aplikasi dalam mode text atau window, harus memungkinkan adanya intraksi antara pemakai aplikasi dengan halaman web yang sedang ditampilkan. Aplikasi yang ditampilkan pada halaman web harus dapat memberikan informasi atau pun melakukan validasi terhadap masukan yang diberkan oleh pemakai sebelum dikirimkan kepada server untuk diproses.

Untuk menjalankan javascript, kita hanya membutuhkan aplikasi text editor, dan web bro-

wser. Javascript memiliki tur: high-level programing language, client-side, loosely tiped, dan berorientasi objek.

Javascript adalah program dalam bentuk script, yang akan dijalankan oleh interpreter yang telah ditanamkan ke dalam browser web, sehingga browser web dapat mengeksekusi program Javascript. Program Javascript disisipkan ke dalam dokumen HTML dengan ditandai dengan tag yang diawali dengan <Script ...> dan diakhiri dengan </script>. Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimple-mentasikan fungsi kelas pertama ( rst class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implemen-tasi fungsi yang sangat eksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah.

Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fung-si, maka perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (informa-tion hiding). Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terha-dap pemrograman berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.

3.1.2.1      Contoh Penerapan Maps Chart dalam JavaScript

Saat memuat JavaScript Maps API melalui URL, Anda juga bisa memuat pustaka tambahan melalui penggunaan parameter URL libraries. Libraries adalah modul kode yang menyediakan fungsionalitas tambahan pada JavaScript API utama namun tidak dimuat kecuali jika Anda memintanya secara khusus.

Dalam tag script yang memuat Maps API, atribut async dan parameter callback boleh dihi-langkan. Hal ini akan menyebabkan pemuatan API diblokir hingga API selesai diunduh.

Ini mungkin akan memperlambat pemuatan halaman Anda. Namun itu berarti Anda bisa menulis tag script berikutnya dengan anggapan API tersebut sudah dimuat.

Agar peta ditampilkan pada halaman web, kita harus memesan tempatnya. Biasanya, kita melakukan hal ini dengan membuat elemen bernama div dan memperoleh referensi ke elemen ini dalam model objek dokumen (DOM) browser.

<div id="map"></div>, Dalam contoh di atas, kami menggunakan CSS untuk mengatur ketinggian div peta ke "100%". Ini akan diperluas untuk mengepaskan ukurannya pada perang-kat seluler. Anda mungkin perlu menyesuaikan nilai-nilai lebar dan tinggi berdasarkan ukuran layar dan pengisi browser. Perhatikan, div biasanya mengambil lebarnya dari elemen yang dimu-atnya, dan div kosong biasanya memiliki ketinggian 0. Karena itu, Anda harus selalu mengatur ketinggian secara eksplisit pada <div>.

Ada dua opsi yang diperlukan untuk setiap peta: center dan zoom.

Tingkat Zoom

Resolusi awal untuk menampilkan peta diatur oleh properti zoom, dalam hal ini zoom 0 menyatakan peta bumi yang diperkecil maksimum, dan tingkat zoom yang lebih besar akan memperbesar dengan resolusi lebih tinggi.

Menampilkan peta seluruh Bumi sebagai gambar tunggal akan memerlukan peta yang teramat besar, atau peta kecil dengan resolusi sangat rendah. Akibatnya, gambar peta dalam Google Maps dan Maps API akan dipecah menjadi "petak" peta dan "tingkat zoom". Pada tingkat zoom rendah, satu set kecil petak peta mencakup area yang luas; di tingkat zoom yang lebih tinggi, petak memiliki resolusi lebih tinggi dan mencakup area yang lebih kecil.

Tiga gambar berikut mencerminkan lokasi yang sama dari Tokyo pada tingkat zoom 0, 7 dan

18.

Objek Peta

map = new google.maps.Map(document.getElementById("map"), {...});

Kelas JavaScript yang menyatakan peta adalah kelas Map. Objek di kelas ini mende nisikan sebuah peta pada halaman. (Anda bisa membuat lebih dari satu instance kelas ini  setiap objek akan mende nisikan peta terpisah pada halaman.) Kita membuat sebuah instance baru dari kelas ini menggunakan operator new JavaScript.

Bila membuat instance peta baru, Anda menetapkan elemen HTML <div> di halaman se-bagai kontainer untuk peta. Simpul HTML adalah anak dari objek document JavaScript, dan kita memperoleh referensi ke elemen ini melalui metode document.getElementById().

Kode ini mende nisikan variabel (bernama map) dan memberikan variabel itu ke objek Map baru. Fungsi Map() dikenal sebagai konstruktor dan de nisinya ditampilkan di bawah ini:

 KONSTRUKTOR : Map(mapDiv:Node, opts?:MapOptions )

 KETERANGAN   :

Membuat peta baru dalam kontainer HTML yang diberikan - biasanya elemen DIV - menggunakan

parameter (opsional) yang diteruskan.

Jika kode Anda tidak berhasil:

 ^ˆ    Cari kesalahan ketik. Ingatlah, JavaScript adalah bahasa yang membedakan huruf besar dan kecil.

^ˆ    Periksa dasar-dasarnya - beberapa masalah yang paling umum terjadi saat awal pembuatan peta. Misalnya:

^ˆ  Konfirmasikan bahwa Anda telah menetapkan properti zoom dan center di opsi peta Anda.

^ˆ       Pastikan Anda telah mendeklarasikan elemen div tempat peta akan muncul di layar.

^ˆ    Pastikan elemen div untuk peta memiliki ketinggian. Secara default, elemen div dibuat dengan ketinggian 0, sehingga tidak terlihat.

3.1.2.2      Contoh Penerapan Calender Chart dalam JavaScript

Sebuah gra k kalender atau kalender modul menampilkan data aktivitas selama beberapa bulan hingga satu tahun kalender penuh. Hal ini berguna untuk membandingkan data dari waktu ke waktu (mirip dengan memanaskan peta) atau untuk menyoroti tanggal tertentu (liburan, ulang tahun, acara khusus). ZingChart menawarkan banyak pilihan set-up dan gra k khusus properti untuk memungkinkan kustomisasi maksimum. Anda dapat menentukan apa tahun untuk menampilkan, awal dan bulan yang berakhir, dan apakah hari pertama gra k kalender Anda dalam seminggu adalah hari Minggu atau Senin.

Anda juga dapat memilih palet warna, mengkon gurasi skala Anda, memiliki Anda gra k kalender istirahat di dua atau lebih baris, dan sel gaya dengan minggu, bulan, dan hari. Kami menjelaskan bagaimana menampilkan gra k kalender dengan hari bernomor, serta bagaimana format dan gaya tooltips Anda. Untuk gra k kalender lebih, isi Gallery ZingChart kami.

 

Kalender Set-Up

Selanjutnya, mengatur gra k kalender. Anda harus menentukan tahun kalender. Anda juga dapat memberikan awal bulan Anda, mengakhiri bulan, dan hari pertama minggu itu (Minggu atau Senin). Dalam gra k di bawah ini, tahun ini ditetapkan untuk 2000. kalender dimulai pada bulan Maret dan berakhir pada bulan Oktober, dan hari pertama dalam minggu itu diatur untuk hari Senin.

Catatan: Menentukan tahun kalender diperlukan. Jika tidak gra k Anda akan default untuk menampilkan tahun berjalan.

Tahun kalender

Buat "Pilihan" objek. Menyisipkan "tahun" objek, dan kemudian "text" atribut. Tentukan tahun kalender yang ingin Anda tampilkan. (Tanpa spesi kasi, gra k akan default ke tahun berjalan.)

Catatan: Anda dapat gaya teks tahun Anda dalam objek yang sama, menggunakan atribut styling seperti "font-warna", "font-family", "font-size", "font-weight" ("normal" atau "berani") , dan "font-style" ("normal" atau "miring").

Mulai Bulan

Dalam "Pilihan" Anda objek, menambahkan "mulai bulan" atribut. Memberikan nilai an-tara 1-12, dengan 1 menunjukkan Januari dan 12 menunjukkan Desember. (Tanpa spesi kasi, kalender akan dimulai pada bulan Januari.)

mengakhiri Bulan

Dalam "Pilihan" Anda objek, menambahkan "akhir bulan" atribut. Memberikan nilai an-tara 1-12, dengan 1 menunjukkan Januari dan 12 menunjukkan Desember. (Tanpa spesi kasi, kalender akan berakhir pada Desember.)

Hari pertama dari minggu

Dalam "pilihan" objek, memasukkan " rstday" atribut. Anda dapat mengatur nilai hingga Minggu ("s") atau Senin ("m"). (Tanpa spesi kasi, Minggu ditetapkan sebagai hari pertama dari minggu, yang merupakan norma di sebagian besar negara-negara Amerika Utara. Di sebagian besar Eropa, namun, Senin dianggap sebagai hari pertama dalam minggu itu.)

Nilai data

Menyediakan data kalender. Dalam "pilihan" objek, membuat "nilai" Array. Setiap elemen data akan berisi kencan dengan nilai yang sesuai, diformat seperti ini:

Opsional, Anda dapat menambahkan nilai-nilai tambahan. Termasuk mereka sebagai string dalam elemen data yang ingin mereka untuk berhubungan dengan. Nilai-nilai ini tidak secara otomatis terlihat. (Arahkan kursor pada 1 April dan Mei nilai 1 di bawah gra k. "April Mop!" Dan "Mei Bunga!" Tidak termasuk dalam tooltip.) Namun, mereka dapat diakses melalui token (% data info0, % data info1, dll). Lihat Kalender bagian Tooltips bawah ini untuk informasi lebih lanjut.

 Dengan data, gra k kalender sekarang terlihat seperti ini:

Listing Programnya seperti di bawah ini:

Kalender-Spesi k Properti

Setelah Anda mengatur kalender dan memasukkan data nilai-nilai Anda, Anda akan ingin menyesuaikan gra k Anda. sifat kalender khusus kami memungkinkan Anda untuk memilih palet warna, mengkon gurasi skala Anda, lay out baris Anda, membuat label untuk hari kerja Anda dan bulan, dan gaya sel Anda berdasarkan pada hari kerja (1-7), Minggu (1-54) , bulan (1-12), dan / atau hari kalender. Semua perubahan dalam bagian ini dibuat dalam "Pilihan" objek anda.