v. aplikasi web sipop - homepage kelompok teknologi...

- 28 -

V. APLIKASI WEB SIPOP

Aplikasi Web Sistem Informasi Persistent Organic Pollutants (SIPOP) adalahaplikasi berbasis web yang hanya dapat dijalankan menggunakan program aplikasi webbrowser seperti Internet Explorer, Opera, Chrome, atau Firefox Mozzila, dan lain-lain.Aplikasi Web SIPOP dapat dijalankan dalam modus offline. Namun database POPs danB3 serta database Teknologi dalam aplikasi web SIPOP ini hanya dapat dijalankan dalammodus online. Gambar berikut ini adalah tampillan aplikasi web SIPOP.

Frame Kiri (Menu) Frame Kanan (Isi)

Gambar 45. Tampilan Menu [Awal] Software Aplikasi Web SIPOP

5.1. Menu Aplikasi Web SIPOP

Di dalam aplikasi web SIPOP terdapat beberapa menu yang diletakkan pada bagianframe sebelah kiri. Menu ini dapat diklik dan menampilkan hasilnya ke dalam framesebelah kanan. Berikut ini adalah menu-menu yang ada di dalam aplikasi web SIPOP :

Menu [ Awal ] digunakan untuk membuka tampilan aplikasi web SIPOP sepertigambar di atas. Menu ini terdiri dari dua konten, yaitu ‘Apa itu POPs?’ yangmemberikan penjelasan singkat tentang POPs dan ‘Tentang SIPOP’ yangmemberikan penjelasan singkat tentang kegiatan pengembangan SIPOP.

Menu [ Pencemar POPs ] terdiri dari dua sub menu, yaitu ‘Dirty Dozen’ yangmenyediakan artikel berisikan penjelasan untuk 12 bahan pencemar POPs dansub menu ‘9 New POPs’ yang menyediakan artikel berisikan penjelasan untuk 9bahan POPs yang masih baru.

- 29 -

Menu [ Database ] terdiri dari 3 konten, yaitu database ‘POPs & B3’, database‘Teknologi’ dan database ‘Kepakaran’ (link ke situs sistem informasi direktorikepakaran LIPI).

Menu [ Paket Teknologi ] digunakan untuk membuka dokumentasi yang berisipaket-paket teknologi penanganan POPs.

Menu [ Galeri POPs ] terdiri dari 3 konten, yaitu ‘Slide Foto POPs’ untukmenampilkan foto-foto yang menjelaskan bahaya bahan pencemar POPs, ‘VideoKlip Edukasi’ untuk menampilkan tayangan edukasi yang menerangkan POPskepada masyarakat, dan ‘Iptek untuk kita’ untuk menampilkan artikel iptek yangdapat menambah wawasan masyarakat tentang bahaya POPs.

Menu Regulasi digunakan untuk mengakses beberapa dokumentasi tentangregulasi dan peraturan perundangan yang berhubungan dengan POPs.

Menu Web Link digunakan untuk menghubungkan akses informasi ke situs lainyang berhubungan dengan POPs.

Untuk membuka seluruh sub menu di dalamnya dapat digunakan tombol “Open All” danuntuk menutup seluruh sub menu digunakan tombol “Close All”

Gambar 46. Tampilan Menu Tree SIPOP

- 30 -

5.1.1. Menu Awal

Menu awal memberikan informasi judul sistem informasi dan nama institusipenyedia informasi serta alamat kantor penyedia informasi. Berikut ini adalah tampilanhalaman web menu awal dengan judul Sistem Informasi Persistent Organic Pollutants(POPs) disingkat SIPOP dengan penyedia informasi Pusat Teknologi Lingkungan BPPT.

Gambar 47. Tampilan Halaman Web Menu Awal

Konten pertama dalam menu awal adalah konten ‘Apa itu POPs’ yangmenguraikan secara lengkap tentang bahan pencemar POPs berikut jenis-jenisnya yangsudah dilarang dengan tampilan seperti gambar di bawah ini. Scroll bar di sebelah kananwindow dapat digunakan untuk membaca artikelnya hingga halaman terakhir.

Gambar 48. Tampilan Halaman Web Konten ‘Apa itu POPs’

- 31 -

Konten kedua dalam menu awal SIPOP adalah ‘Tentang SIPOP’ yang menjelaskantentang kegiatan pengembangan sistem informasi ini dan rencana kerja dengan beberapamitra kerjasama.

Gambar 49. Tampilan Halaman Web Konten ‘Tentang SIPOP’

5.1.2. Menu Pencemar POPs

Menu Pencemar POPs terdiri dari dua sub menu, yaitu sub menu ‘Dirty Dozen’ dansub menu ‘9 New POPs’ yang dapat digunakan untuk menampilkan uraian masing-masing bahan POPs yang sudah dilarang dari hasil kegiatan konvensi stockholm.Keduapuluh satu bahan pencemar POPs tersebut adalah :

Tabel 1. Bahan Pencemar POPs yang Sudah Dilarang

Kategori Dirty Dozen Kategori 9 New POPs

1. Aldrin2. Chlordane3. DDT4. Dieldrin5. Endrin6. Heptachlor7. Hexachlorobenzene8. Mirex9. Toxaphene10. PCBs11. Dioxin12. Furan

1. Chlordecone2. HBB3. Lindane4. Alpha HCH5. Beta HCH6. Tetra & Penta BDE7. Hexa & Hepta BDE8. PFOS9. PeCB

- 32 -

Gambar berikut ini adalah tampilan salah satu halaman web konten informasi bahanpencemar POPs yang termasuk ke dalam kategori ‘Dirty Dozen’ dan ‘9 New POPs’. Didalamnya akan dijelaskan mengenai sifat fisika dan kimia bahan POPs tersebut, sejarahpenggunaanya, bentuk pencemaran ke lingkungan, pengaruhnya terhadap kesehatanmanusia dan hewan serta foto produk di pasaran yang mengandung bahan pencemarPOPs tersebut.

Gambar 50. Tampilan Halaman Web Konten Dirty Dozen ‘Chlordane’

Gambar 51. Tampilan Halaman Web Konten 9 New POPs ‘Lindane’

- 33 -

5.1.3. Menu Database

Menu database yang disajikan pada SIPOP versi 1.0 kali ini terdiri dari dua kontensub menu, yaitu :

Sub menu database POPs dan B3 dengan konten data ada dalam paket aplikasiini, namun beberapa informasi rinci merujuk pada alamat di situs lain.

Sub menu database Teknologi dengan konten data ada dalam paket aplikasi inidan beberapa informasi rinci merujuk pada alamat di situs www.enviro.bppt.go.idwww.kelair.bppt.go.id.

Sub menu database Kepakaran dengan konten data merujuk pada situs sisteminformasi direktori kepakaran yang dikelola oleh LIPI.

5.1.3.1. Sub Menu Database POPs dan B3

Tampilan sub menu database POPs dan B3 memberikan informasi RekapitulasiJumlah Data POPs & B3 pada bagian atasnya, di bagian bawahnya terdapat menu PencarianCepat (Quick Search), Pencarian Spesifik (Specific Search) dan Pengelolaan Data (DatabaseMaintenance) seperti gambar berikut ini.

Gambar 52. Tampilan Halaman Web Konten Database POPs dan B3

Pada gambar halaman web di atas, informasi rekapitulasi jumlah data POPs dan B3 yangdisajikan berdasarkan status penggunaannya, yaitu dilarang dipergunakan, masihdipergunakan dan terbatas dipergunakan. Pada menu berikutnya disediakan dua menupencarian data POPs dan B3, yaitu Pencarian Cepat dan Pencarian Spesifik.

- 34 -

5.1.3.1.1. Menu Pencarian Cepat (Quick Search).

Pada menu ini, pengguna hanya menuliskan kata kunci data POPs atau B3 yangakan dicari. Mesin pencari akan menelusurinya secara acak pada kolom Nomor CAS,Kode HS, Nama Dagang, Nama IUPAC, Nama Trivial, Rumus Molekul, Sifat Fisik,Kegunaan, Dampak Kesehatan, Penanganan Resiko, Alat Pelindung Diri (APD),Sifat Bahaya, Status Penggunaan, Status Stockholm, atau keterangan lain dalam filedatabase.

Gambar 53. Pencarian Data Melalui Menu Pencarian Cepat

Cara penggunaanya adalah :

1. Ketikkan kata kunci yang akan dicari pada kolom isian.2. Klik tombol [Cari] untuk mulai mencari data POPs dan B3, atau3. Klik tombol [Reset] untuk menghapus kata kunci pada kolom isian.

5.1.3.1.2. Menu Pencarian Spesifik (Spesific Search).

Pada menu ini, pengguna harus memilih salah satu basis pencarian, yaitu : NomorCAS, Kode HS, Nama Dagang, Nama IUPAC, Nama Trivial, Rumus Molekul, SifatFisik, Kegunaan, Dampak Kesehatan, Penanganan Resiko, Alat Pelindung Diri(APD), Sifat Bahaya, Status Penggunaan, Status Stockholm, atau keteranganlainnya. Kemudian menuliskan kata yang akan dicari dalam database POPs dan B3.

Gambar 54. Pencarian Data Melalui Menu Pencarian Spesifik


1. Klik tanda panah ke bawah [] pada kolom ‘Pencarian Berdasarkan :’.2. Pilih salah satu basis pencarian.3. Ketikkan kata kunci yang akan dicari sesuai basis pencarian pada kolom kata

yang akan dicari.4. Klik tombol [Cari Dari Database] untuk mulai penelusuran data, atau5. Klik tombol [Bersihkan Form Isian] untuk mengubah basis pencarian dan

menghapus kata kunci pada kolom kata yang dicari.

Mesin pencari akan menelusuri data pada salah satu kolom dalam file databaseberasarkan basis pencarian yang telah ditentukan. Dalam contoh di atas, mesin pencarihanya akan mencari pada kolom data ‘Status Penggunaan’ dan menampilkan hasilnya kelayar monitor.

- 35 -

Kedua cara pencarian ini baik pencarian cepat maupun pencarian spesifik akanmenghasilkan hasil pencarian yang ditampilkan dalam format yang sama, yaitu masing-masing record data memuat informasi sebagai berikut :

A. No UrutB. Nomor CASC. Kode HSD. Nama DagangE. Nama IUPACF. Nama TrivialG. Rumus MolekulH. Rumus StrukturI. Berat MRJ. Sifat FisikK. Titik DidihL. Titi LeburM. Kelarutan

N. DensitasO. Tekanan UapP. KegunaanQ. Dampak KesehatanR. Penanganan ResikoS. APDT. Kelas BahayaU. Sifat BahayaV. Simbol BahayaW. Status PenggunaanX. Status StockholmY. Info Lengkap URL

Tampilan halaman web hasil pencarian cepat maupun hasil pencarian spesifik akanterlihat seperti pada gambar di bawah ini. Semua informasi mengenai data yang dicariakan ditampilkan ke layar monitor termasuk informasi gambar rumus struktur dan simbolbahayanya. Informasi lebih lengkap lainnya mengenai data yang dimaksud sepertipengaruhnya terhadap kesehatan manusia dan lingkungan dapat ditelusuri lebih lanjutdengan memilih alamat link pada kolom ‘Info Lengkap URL : ’ yang terturlis denganwarna biru dan bergaris bawah di bagian akhir informasi tersebut.

Gambar 55. Tampilan Halaman Web Hasil Pencarian Cepat

- 36 -

Informasi detail bahan POPs dan B3 yang ditelusuri bisa berasal dari bagian kontensistem informasi POPs sendiri atau merujuk pada alamat pada situs lain seperti contohtampilan halaman web di bawah ini.

Gambar 56. Tampilan Halaman Web Informasi Detail Bahan POPs dan B3

5.1.3.1.3. Menu Pengelolaan Data (Database Maintenance)

Menu ini digunakan untuk mengelola data POPs dan B3 dalam aplikasi web ini yangterdiri dari tabel data POPs dan B3 serta tabel data bahaya. Untuk mengaktifkan menu iniklik tombol [Database Maintenance] yang ada di bawah window seperti gambar berikut.

Gambar 57. Menu Pengelolaan Data (Database Maintenance)

Sebelum masuk ke window pengelolaan database, pengguna diminta untukmelakukan prosedur login dahulu. Oleh karena itu disarankan hanya administrator danoperator database saja yang memiliki kode akses ke dalam menu ini. Ketikkan kode loginyang telah didaftarkan pada kolom ‘Username’ lalu tekan tombol [OK]. Selanjutnyaketikkan kata kunci pada kolom ‘Password’ lalu tekan tombol [OK].

Gambar 58. Prosedur Login Pada Window Pengelolaan Data

- 37 -

Jika kode login atau kata kunci yang diketikkan salah, komputer akan menampilkanpesan seperti pada gambar di bawah ini, klik tombol [OK] untuk mengulanginya kembali.Jika belum terdaftar laporkan ke administrator database untuk mendaftarkannya secaramanual kode login dan kata kunci yang diinginkan.

Gambar 59. Pesan Kesalahan Pada Prosedur Login

5.1.3.2. Pengelolaan Data POPs dan B3

Jika pengguna telah berhasil melakukan prosedur login, maka window PengelolaanDatabase POPs dan B3 akan tampil ke layar monitor seperti pada gambar di bawah ini.Menu ini digunakan untuk pengelolaan dan pemeliharaan database oleh administrator.Administrator dapat menambah, menghapus, menyunting dan memantau status databasePOPs dan B3 yang tersedia dalam aplikasi web SIPOP ini.

Gambar 60. Tampilan Halaman Web Window Pengelolaan Database POPs dan B3

- 38 -

Pada window pengelolaan database POPs dan B3 terdapat beberapa ikon untukmembuka menu-menu pengelolaan data untuk Tabel Data POPs dan B3. Fungsi masing-masing ikon tersebut adalah :

Ikon Status digunakan untuk menampilkan menu ini, yaitu Tabel RekapitulasiData POPS dan B3 yang ada di dalam database.

Ikon Edit digunakan untuk editing (menambah / menyunting / menghapus) recorddata POPs dan B3 yang dapat dilakukan secara remote juga.

Ikon MyAdmin digunakan untuk mengelola tabel data POPs dan B3menggunakan tools phpMyAdmin.

Ikon Telusur digunakan untuk mencari dan menyunting record data POPs danB3 dengan Tools Database Record Selector & Editor (DBRSE).

Selain terdapat beberapa menu ikon untuk pengelolaan database, pada bagianbawah window ini ditampilkan kembali informasi tabel rekapitulasi database POPs dan B3yang ada dalam aplikasi web SIPOP. Jumlah datanya dihitung berdasarkan statuspenggunaan yang ada di dalam tabel.

5.1.3.2.1. Form Editing Data POPs dan B3

Untuk menyunting data POPs dan B3 dapat dilakukan beberapa cara. Salahsatunya adalah dengan menggunakan form isian ini. Pada form ini, pengguna dapatmelihat data (Preview) dengan menavigasikan record selector yang adadi bagian bawah form tersebut. Selain itu pengguna dapat menyunting isi data (Edit),menambahkan data baru (Add/Append) atau menghapus data dari dalam tabel (Delete).

Gambar 61. Tampilan Halaman Web Form Editing Data POPs dan B3

Tabel Data

Form isiandata

Ikon operasi

Record Selector

- 39 -

Tampilan form editing data POPs dan B3 pada gambar di atas terdiri dari 3 bagian,yaitu :

Form isian data yang digunakan untuk menyunting data POPs dan B3. Record selector dan status record yang dapat digunakan untuk menavigasikan

record data dan mengetahui posisi record data. Ikon operasi yang dapat digunakan untuk menyimpan, mengupdate, menghapus

atau menampilkan laporan data. Tabel data yang digunakan untuk menampilkan data POPs dan B3 dalam bentuk

tabel dengan urutan data terkini.

Cara penggunaan form editing data POPs dan B3 adalah :

1. Isi kolom isian berikut dengan benar :

Nomor Urut akan terisi secara otomatis dengan nomor urut pendataan.

Nomor CAS diisi dengan nomor chemical abstract service (identitas bahankimia).

KodeHS (Harmonized System Code) diisi dengan kode standar harmonisasi.

Nama Dagang diisi degan nama lain / sinonim yang biasanya digunakan ataudigunakan untuk merk dagang.

Nama IUPAC (International Union of Pure and Applied Chemistry) diisi dengannama penamaan standar internasional untuk bahan tersebut.

Nama Trivial diisi dengan nama umum yang biasa digunakan dalampenamaan senyawa POPs dan B3.

Sifat Fisik diisi dengan keterangan berupa wujud fisik, warna yangmenggambarkan bentuk / sifat fisik dari senyawa POPs dan B3.

Berat MR (Molekul Relatif) diisi dengan nilai perbandingan massa 1 molekulunsur atau senyawa terhadap massa atom C-12 dalam satuan g/mol.

Titik Didih diisi dengan nilai standar titik didih yang ditetapkan oleh IUPAC,yaitu suhu dimana pendidihan terjadi pada tekanan 1 bar dalam satuan oC.

Titik Lebur diisi dengan nilai suhu di mana benda tersebut akan berubahwujud menjadi benda cair dalam satuan oC.

Kelarutan diisi dengan nilai kemampuan suatu zat kimia tertentu, zat terlarut(solute), untuk larut dalam suatu pelarut (solvent) dalam satuan g/100 ml.

Sifat Bahaya diisi dengan memilih salah satu pilihan sifat bahaya yangdisediakan, yaitu :

Eksplosif Gas Pengoksidasi Gas Bertekanan Cairan Mudah Menyala Padatan Mudah Menyala Bahan Yang Dapat Bereaksi Sendiri Padatan Piroporik Bahan Yang Dapat Menimbulkan Panas Sendiri Bahan Yang Apabila Kontak Dengan Air Menyebabkan G... Cairan Pengoksidasi

- 40 -

Padatan Pengoksidasi Peroksida Organik Korosif Terhadap Logam Toksisitas Akut Korosifitas / Iritabilitas Pada Kulit Kerusakan Parah / Iritasi Pada Mata Sensitasi Saluran Pernafasan / Kulit Mutagenitas Sel Induk Karsinogenitas Toksisitas Terhadap Reproduksi Toksisitas Sistemik Pada Organ Target Spesifik Kar... Toksisitas Sistemik Pada Organ Target Spesifik Kar... Bahaya Aspirasi Bahaya Terhadap Lingkungan Akuatik / Perairan

Simbol Bahaya akan terisi secara otomatis dengan nama file gambar dangambarnya dalam format jpg yang sesuai dengan sifat bahaya yang dipilih.

Densitas diisi dengan nilai ukuran kerapatan suatu zat yang dinyatakanbanyaknya zat (massa) per satuan volume dalam satuan g/cm3.

Tekanan Uap diisi dengan nilai tekanan suatu uap pada kesetimbangandengan fase bukan uapnya dalam satuan Pa.

Kegunaan diisi dengan keterangan kegunaan dari bahan POPs dan B3 yangdimaksud.

Dampak Kesehatan diisi dengan dampak bahan POPs dan B3 terhadapkesehatan manusia.

Penanganan Resiko diisi dengan cara penanganan yang harus dilakukanapabila seseorang terpapar bahan POPs dan B3 tersebut.

Alat Pelindung Diri (APD) diisi dengan nama alat pelindung diri yang perludigunakan apabila seseorang bekerja dengan bahan POPs dan B3 tersebut.

Status Penggunaan diisi dengan status izin penggunaan di Indonesia(Dilarang Dipergunakan, Masih Dipergunakan, atau Terbatas Dipergunakan)

Status Konvensi diisi dengan status senyawa POPs dan B3 yang telahditetapkan oleh Konvensi Stockholm sebagai dirty dozen POPs atau 9 newPOPs.

Rumus Molekul diisi dengan rumus kimia yang memberikan informasi tentangjenis unsur pembentuk satu molekul senyawa dan jumlah atom masing-masingunsurnya.

Keterangan diisi dengan keterangan lain mengenai senyawa atau bahanPOPs dan B3 tersebut.

Rumus Struktur diisi dengan memilih nama file gambar rumus kimia yangmenggambarkan posisi atau kedudukan atom dan jenis ikatan antar atom padamolekulnya. Caranya adalah dengan mengupload nama file gambar rumusstruktur tersebut, yaitu :

Klik tombol [Browse] untuk memilih nama file gambar rumus strukturyang akan diupload.

Pindah ke folder tempat file gambar rumus struktur berada. Pilih nama file gambarnya lalu pilih tombol [Open] untuk memilihnya.

- 41 -

File Gambar akan terisi secara otomatis saat nama file gambar rumus strukturtelah dipilih atau akan terisi ‘noimage.jpg’ jika nama file gambar rumusstruktur tidak dipilih.

Gambar 62. Tampilan Halaman Web Pemelihan File Gambar dan B3

2. Pilih salah satu menu tombol atau ikon pengoperasian data, yaitu :

Ikon tombol [Append] atau ikon Append Data untuk menambah dataPOPs dan B3.

Ikon tombol [Update] atau ikon Update Data untuk menambah data POPsdan B3.

Ikon tombol [Delete] atau ikon Delete Data untuk menambah data POPsdan B3.

Ikon ikon Reload Data untuk memanggil dan menampilkan datanyakembali ke layar monitor.

Ikon tombol [Reset] mengembalikan kolom isian form pada data yang semula.

3. Jika telah selesai melakukan penambahan data, editing data dan penghapusandata, maka data terkini akan dimunculkan pada tabel data POPs dan B3 yang adadi bagian bawah window.

Gambar 63. Tabel Data POPs dan B3

4. Beberapa meu pada ikon operasi lain yang dapat digunakan adalah :

Ikon Tabel Data digunakan untuk menampilkan tabel data POPs dan B3dalam window yang terpisah.

- 42 -

Ikon Laporan Satuan Data untuk current record yang digunakan untukmenampilkan laporan satuan data pada posisi record yang muncul di layarmonitor dalam window yang terpisah.

Ikon Laporan Satuan Data untuk seluruh record yang digunakan untukmenampilkan laporan satuan seluruh data POPs dan B3 yang ada di dalamtabel dalam window yang terpisah.

Gambar 64. Tampilan Laporan Tabel Data POPs dan B3

Gambar 65. Tampilan Laporan Data Satuan POPs dan B3

- 43 -

Dari semua kolom isian di atas, kolom yang wajib diisi dan tidak boleh kosongadalah Nomor CAS. Jika kolom ini tidak diisi, maka komputer akan menampilkan pesanerror seperti pada gambar berikut di bawah ini.

Gambar 66. Pesan Error Jika Nomor CAS Tidak Diisi

Sedangkan untuk kolom isian angka seperti Berat MR, Titik Didih, Titik Lebur,Kelarutan, Densitas dan Tekanan Uap harus diisi dengan bilangan dan tidak boleh diisidengan karakter lain. Jika diisi dengan karakter lain, maka komputer akan menampilkanpesan error sesuai dengan nama kolom isiannya seperti contoh gambar berikut ini.

Gambar 67. Pesan Error Jika Nomor Kolom Isian Angka Diisi Karakter Lain

Untuk mencegah duplikasi data, maka Nomor Urut akan dibuat secara otomatis olehkomputer. Selain itu Nomor CAS juga tidak boleh sama dengan Nomor CAS yang telahada di dalam tabel data. Nomor CAS ini adalah unik sehingga tidak boleh sama antararecord data yang satu dengan record data yang lain. Komputer akan menampilkan pesanerror seperti pada gambar di bawah ini, jika Nomor CAS yang dimasukkan telah ada didalam tabel data.

Gambar 68. Pesan Error Jika Nomor CAS Sudah Ada di Dalam Tabel

Jika semua kondisi kolom isian data sudah benar, maka data baru akan disimpan kedalam tabel data ‘popdanb3’ dalam database ‘sipop’ dan akan ditampilkan pada recorddata pertama dalam tabel data POPs dan B3 yang ada di bagian bawah ini.

- 44 -

5.1.3.2.2. Pengelolaan Tabel Data POPs dan B3 Menggunakan phpMyAdmin

Di dalam aplikasi server Xampp terdapat tools phpMyAdmin yang dapat digunakanuntuk mengakses sebuah tabel di dalam database yang dikelola oleh aplikasi serverdatabase MySQL. Dengan phpMyAdmin ini pula pengelolaan tabel data POPs dan B3dapat dilakukan dengan mudah. Penggunaan tools phpMyAdmin ini hanya dapatdilakukan oleh administrator database. Aplikasi phpMyAdmin merupakan aplikasi sumberterbuka yang berguna untuk mengelola sebuah database berbasis web.

Banyak fitur yang disediakan oleh tools ini untuk mengelola database POPs dan B3,namun pada sub bab ini hanya akan dijelaskan fitur pengelolaan yang meliputi browsing,editing, dan menghapus record data. Berikut ini adalah langkah-langkah yang dapatdigunakan untuk mengelola tabel data POPs dan B3 menggunakan tools phpMyAdmin.

1. Klik ikon MyAdmin yang berada di bawah label Tabel Data POPs dan B3, makaprogram browser akan membuka tabel data tersebut dan menampilkannya kelayar monitor.

Gambar 69. Membuka Window Tabel Data POPs dan B3 TeknologiDengan phpMyAdmin

2. Tabel data POPs dan B3 akan ditampilkan pada frame bagian bawah ini sepertigambar di bawah ini.

Gambar 70. Tampilan Halaman Web Aplikasi phpMyAdmin

- 45 -

3. Pada bagian atas window terdapat menu untuk mengakses tabel data sepertipada gambar berikut.

Gambar 71. Menu Mengakses Tabel Data POPs dan B3Dengan phpMyAdmin

Menu untuk memanipulasi data terletak di bagian atas halaman web ini, yaitu :

Menu Browse digunakan untuk menampilkan seluruh isi tabel data POPs danB3 dalam bentuk tabel data.

Gambar 72. Menu Browse Untuk Menampilkan Tabel Data POPs dan B3

Menu Structure digunakan untuk menampilkan struktur tabel data POPs danB3. Pada menu ini pengguna dapat menambah atau mengubah field tabel.Namun tidak disarankan untuk mengubahnya karena akan menyebabkanaplikasi web SIPOP tidak bisa berjalan dengan baik.

Gambar 73. Menu Structure Untuk MenampilkanStruktur Tabel Data POPs dan B3

- 46 -

Menu SQL digunakan untuk menuliskan perintah pemanggilan datamenggunakan bahasa standar (Structural Query Language).

Gambar 74. Menu SQL Untuk Menjalankan Perintah ManipulasiData POPs dan B3

Menu Search digunakan untuk mencari data tertentu dan menampilkannya kedalam tabel data.

Gambar 75. Menu Search Untuk Pencarian Data POPs dan B3

Menu Insert digunakan untuk menyisipkan atau menambahkan data baru kedalam tabel data POPs dan B3.

Gambar 76. Menu Insert Untuk Menambah Data POPs dan B3

- 47 -

Menu Export digunakan untuk mengexport tabel data POPs dan B3 ke dalamformat lain (Excel, SQL, dan lainnya).

Gambar 77. Menu Export Untuk Mengekspor Data POPs dan B3

Menu Import digunakan untuk mengimpor data dalam format lain (Excel, SQLdan lainnya) ke dalam tabel data POPs dan B3.

Gambar 78. Menu Import Untuk Mengimport Data POPs dan B3

Menu Operasions digunakan menjalankan perintah untuk menghapus tabeldata, memindahkan tabel data ke database lain, mengubah nama tabel, namafield tabel, menyalin struktur tabel data atau menyalin seluruh isi data kedalam tabel lain, mengosongkan data dan menghapus tabel data. Tidakdisarankan menggunakan menu ini selain administrator aplikasi web SIPOP.

Gambar 79. Menu Operations Untuk MemanipulasiTabel Data POPs dan B3

- 48 -

Menu Tracking digunakan untuk membuat versi database dengan menyusuntracking pernyataan definisi data dan pernyataan manipulasi data.

Gambar 80. Menu Tracking Untuk Membuat Versi Database

Menu Triger digunakan untuk mendifinisikan even triger tabel data.

Gambar 81. Menu Triger Untuk Even Triger Tabel Data

4. Pada bagian atas tabel data POPs dan B3 terdapat menu navigasi recordmenampilkan data dan untuk menentukan kondisi/setting tampilan data dalamtabel.

Gambar 82. Menu Navigasi dan Setting Tabel Data Pada phpMyAdmin

Fungsi dari beberapa tombol dan kolom dalam menu ini adalah sebagai berikut:

Tombol [<<] digunakan untuk menuju record data awal/pertama (Top/First).

Tombol [ < ] digunakan untuk menuju record data sebelumnya (Previous).

Pulldown menu [2 ▼] digunakan untuk menampilkan tabel data sesuai dengannomor urut halaman web.

Tombol [ > ] digunakan untuk menuju record data berikutnya (Next).

Tombol [>>] digunakan untuk menuju record data terakhir (Last).

- 49 -

Kolom Show : Starting row : diisi dengan nomor awal record data yang inginditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalah recorddata ke 60.

Menu Number of rows diisi dengan jumlah baris tampilan tabel data. Dalamcontoh di atas adalah 30 baris.

Menu Headers every diisi dengan jumlah baris data yang akan ditampilkandi setiap header. Contoh di atas headers akan berulang setiap 100 baris.

Pulldown Menu Sort by key : [ None ▼ ] diisi dengan memilih pengurutantampilan data (sort) berdasarkan primary key. Defaultnya adalah ‘None’ atautidak diurutkan.

5. Di masing-masing record data terdapat ikon check box, edit dan delete sepertigambar di bawah ini. Untuk menghapus atau mengedit data klik terlebih dahuluikon check box.

Ikon Kolom untuk mencentang / memilih kolom record data.

Ikon Edit untuk menyunting record data.

Ikon Copy untuk menyalin record data

Ikon Hapus untuk menghapus record data.

6. Pada bagian bawah window dan bagian akhir tabel data terdapat menu sepertigambar di bawah ini yang berguna untuk menentukan kondisi/setting tampilandata dalam tabel, menavigasikan record data, mencetak data dan lainya.

Gambar 83. Menu Pengoperasian Data di Bagian Bawah

Fungsi dari dari beberapa tombol dan kolom dalam menu ini adalah sebagaiberikut :

Ikon Check All digunakan untuk mengaktifkan check box (memilih) diseluruh record data yang tampil di dalam tabel data.

Ikon Change digunakan untuk menyunting record data yang check boxnya telah diberi tanda centang ‘’.

Ikon Hapus digunakan untuk menghapus record data yang check boxnya telah diberi tanda centang ‘’.

Ikon Hapus digunakan untuk mengirimkan record data yang check boxnya telah diberi tanda centang ‘’.

Tombol [<<] digunakan untuk menuju record data awal/pertama (Top/First). Tombol [ < ] digunakan untuk menuju record data sebelumnya (Previous). Pulldown menu [2 ▼] digunakan untuk menampilkan tabel data sesuai dengan

nomor urut halaman web. Tombol [ > ] digunakan untuk menuju record data berikutnya (Next). Tombol [>>] digunakan untuk menuju record data terakhir (Last).

- 50 -

Kolom Show : Starting row : diisi dengan nomor awal record data yang inginditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalah recorddata ke 60.




Menu Print View dan Print View (with full texts) digunakan untuk mencetaktampilan tabel data ke printer atau ke file PDF.

Menu Export digunakan untuk mengekspor data pops dan B3 ke dalamberbagai macam format tabel data yang lain (Excel, CSV, TXT, ODT, DOC,dan lain-lain).

Menu Display Chart digunakan untuk menampilkan grafik data.

Menu Create View digunakan untuk mendefinisikan tabel view data.

7. Untuk mencetak data pastikan terlebih dahulu record data yang inginditampilkan dengan memilih kondisi pada kolom isian tombol Show : StartRow:, kolom isian Number of rows :, dan Headers every :. Klik menu PrintView, maka tampilan preview laporan data akan ditampilkan ke dalam windowatau tab control window yang terpisah seperti pada contoh gambar berikut ini.

Gambar 84. Tampilan Preview Laporan Data POPs dan B3

8. Untuk mencetak ke printer, tentukan dulu nama printer nya melalui menu printerpada program aplikasi web browser yang digunakan. Untuk software Firefoxadalah : Firefox Print Print. Atau tekan tombol keyboard Control+P.

- 51 -

Gambar 85. Tampilan Pilihan Printer Untuk Mencetak Laporan Data

5.1.3.2.3. Menambah dan Menghapus Data POPs dan B3 Dengan phpMyAdmin

Langkah-langkah untuk menambah atau menghapus data bahan POPs ke dalamTabel POPs dan B3 pada Database SIPOP adalah sebagai berikut :

1. Jika sudah berada dalam window tools phpMyAdmin, klik menu Insert untukmembuka form isian data POPs dan B3.

2. Jika belum berada dalam window tools phpMyAdmin, jalankan web browserterlebih dahulu dan buka alamat : http://localhost/phpmyadmin/ atauhttp://hostname/phpmyadmin/

3. Klik menu database sipop yang ada di bagian sebelah kiri window.4. Pilih tabel popdanb3 untuk menambah atau menghapus data POPs dan B3

dalam database SIPOP.

Gambar 86. Memilih Tabel POPs dan B3 Dalam Database SIPOP

- 52 -

5. Klik Tab Insert untuk menambah data POPs dan B3.6. Isikan data yang diminta di dalam kolom isian data sesuai dengan nama kolom

(field) data, yaitu :

a. NomorUrut diisi dengan nomor urut pendataan dan tidak boleh duplikasi.b. NomorCAS diisi dengan nomor chemical abstract servicec. KodeHS diisi dengan kode standar harmonisasi.d. NamaDagang diisi degan nama lain / sinonim yang biasanya digunakan

atau digunakan untuk merk dagang.e. NamaIUPAC diisi dengan nama penamaan standar internasional untuk

bahan tersebut.f. NamaTrivial diisi dengan nama umum yang biasa digunakan dalam

penamaan senyawa POPs dan B3.g. RumusMolekul diisi dengan rumus kimia yang memberikan informasi

tentang jenis unsur pembentuk satu molekul senyawa dan jumlah atommasing-masing unsurnya.

h. RumusStruktur diisi dengan nama nama file rumus kimia yangmenggambarkan posisi atau kedudukan atom dan jenis ikatan antar atompada molekulnya dalam format jpg.

i. BeratMR diisi dengan nilai perbandingan massa 1 molekul unsur atausenyawa terhadap massa atom C-12 dalam satuan g/mol.

j. SifatFisik diisi dengan keterangan berupa wujud fisik, warna yangmenggambarkan bentuk / sifat fisik dari senyawa POPs dan B3.

k. TitikDidih diisi dengan nilai standar titik didih yang ditetapkan oleh IUPAC,yaitu suhu dimana pendidihan terjadi pada tekanan 1 bar dalam satuan oC.

l. TitikLebur diisi dengan nilai suhu di mana benda tersebut akan berubahwujud menjadi benda cair dalam satuan oC.

m. Kelarutan diisi dengan nilai kemampuan suatu zat kimia tertentu, zatterlarut, untuk larut dalam suatu pelarut (solvent) dalam satuan g/100 ml.

n. Densitas diisi dengan nilai ukuran kerapatan suatu zat yang dinyatakanbanyaknya zat (massa) per satuan volume dalam satuan g/cm3.

o. TekananUap diisi dengan nilai tekanan suatu uap pada kesetimbangandengan fase bukan uapnya dalam satuan Pa.

p. Kegunaan diisi dengan keterangan kegunaan dari bahan POPs dan B3yang dimaksud.

q. DampakKesehatan diisi dengan dampak bahan POPs dan B3 terhadapkesehatan manusia.

r. PenangananResiko diisi dengan cara penanganan yang harus dilakukanapabila seseorang terpapar bahan POPs dan B3 tersebut.

s. Alat Pelindung Diri (APD) diisi dengan nama alat pelindung diri yang perludigunakan apabila seseorang bekerja dengan bahan POPs dan B3tersebut.

t. SifatBahaya diisi dengan nomor kelas bahaya.u. Status Penggunaan diisi dengan status izin penggunaan di Indonesia.v. StatusStockholm diisi dengan status senyawa POPs dan B3 yang telah

ditetapkan oleh Konvensi Stockholm sebagai dirty dozen POPs atau 9 newPOPs.

w. Keterangan diisi dengan keterangan lain mengenai senyawa atau bahanPOPs dan B3 tersebut.

x. LastUpdate diisi dengan tanggal dan jam perubahan data terakahir.

- 53 -

Gambar 87. Menambah Data Pada Tabel popdanb3Dalam Database SIPOP

7. Klik ikon [Go] untuk mulai menyimpan data ke dalam tabel popdanb3.8. Setelah beberapa saat komputer akan menampilkan informasi mengenai

perintah SQL yang dijalankan pada saat memasukkan data baru ke dalam tabeldata POPs dan B3 seperti pada gambar di bawah ini.

Gambar 88. Perintah SQL Untuk Menambah Data Pada Tabel popdanb3

Perintah SQL untuk menambah data POPs & B3 dalam contoh di atas adalah:

- 54 -

INSERT INTO `sipop`.`popdanb3` (`NomorUrut`, `NomorCAS`, `KodeHS`,`NamaDagang`, `NamaIUPAC`, `NamaTrivial`, `RumusMolekul`,`RumusStruktur`, `BeratMR`, `SifatFisik`, `TitikDidih`, `TitikLebur`, `Kelarutan`,`Densitas`, `TekananUap`, `Kegunaan`, `DampakKesehatan`,`PenangananResiko`, `APD`, `SifatBahaya`, `StatusPenggunaan`,`StatusStockholm`, `URL`, `Keterangan`, `LastUpdate`)

VALUES ('9999', '309-00-2', '', 'HHDN ', '1,2,3,4,10,10-Hexachloro-1,4,4a,5,8,8a-hexahydro-1,4-endo,exo-5,8-dimethano-naphthaleneAldrin ','Aldrin ', 'C12H8Cl6 ', 'aldrin.jpg', '364,93', 'Tak berwarna dan tidak berbau','293°F', '219°F', '20oC ', '0,027 ppb', '1.732g/cm3', '', '', '', '', '24 ', 'Dilarangdipergunakan', 'Dilarang dipergunakan','http://www.enviro.bppt.go.id/sipop/POPs/Aldrin/aldrin.htm ', 'Dirty DozenPOPs', '2014-08-06 00:00:00');

9. Klik Tab [Browse] dan ikon [>>] untuk melihat data POPs dan B3 yang barusaja dimasukkan yang berada pada record data terakhir.

Gambar 89. Melihat Data Pada Tabel Teknologi Dalam Database SIPOP

10. Pada tampilan gambar di atas menunjukkan tabel data popdanb3. Data yangbaru saja dimasukkan ada di record data terakhir, yaitu dengan NomorUrut‘9999 dan NomorCAS ‘309-00-2‘.

11. Ada 4 (empat) ikon penting dalam window di atas, yaitu :

a. Ikon Kolom untuk mencentang / memilih kolom record data.

b. Ikon Edit untuk menyunting record data.

c. Ikon Copy untuk menyalin record data

d. Ikon Hapus untuk menghapus record data.

- 55 -

12. Untuk menghapus (delete) record data, beri tanda centang ‘’ kolom denganmengklik ikon Kolom, lalu klik ikon Hapus, maka komputer akan menampilkanpesan konfirmasi seperti gambar di bawah ini.

Gambar 90. Konfirmasi Penghapusan Data Pada Tabel popdanb3Dalam Database SIPOP

13. Klik tombol [OK] untuk mulai menghapus (delete) record data atau [Cancel]untuk membatalkannya.

14. Untuk menyunting (edit) record data, beri tanda centang ‘’ kolom denganmengklik ikon Kolom, kemudian klik ikon Edit, maka komputer akanmenampilkan record data tersebut dalam format penyuntingan.

Gambar 91. Menyunting Record Data POPs dan B3 Dengan phpMyAdmin

15. Tekan ikon [Go] jika telah selesai menyunting.

- 56 -

5.1.3.2.4. Pengelolaan Tabel Data Bahaya Dengan phpMyAdmin

Tabel bahaya adalah tabel data untuk pengelolaan kode bahaya, kelas bahaya dansifat bahaya bagi bahan pencemaran POPs dan B3 di dalam database SIPOP. Tabel inidibuat merujuk pada metode pengelolaan pada MSDS. Berikut ini adalah langkah-langkahuntuk mengelola tabel data bahaya menggunakan tools phpMyAdmin, yaitu :

1. Jika sudah berada dalam window tools phpMyAdmin, klik menu Insert untukmembuka form isian data POPs dan B3.

2. Jika belum berada dalam window tools phpMyAdmin, jalankan web browserterlebih dahulu dan buka alamat : http://localhost/phpmyadmin/ atauhttp://hostname/phpmyadmin/

3. Klik menu database sipop yang ada di bagian sebelah kiri window dan pilihtabel bahaya untuk menyunting data bahaya dalam database SIPOP.

Gambar 92. Memilih Tabel Bahaya Dalam Database SIPOP

4. Klik Tab Browse untuk menampilkan data bahaya.

5. Pilih salah satu data dan beri tanda centang pada ikon kolom .

6. Klik ikon Edit dan lakukan penyuntingan data bahaya pada kolom isianyang diperlukan, yaitu :

a. idbahaya diisi dengan nomor identifikasi atau nomor urut pendataan.b. sifatbahaya diisi dengan nomor diisi dengan nama sifat bahaya.c. kelasbahaya diisi dengan nomor klasifikasi bahaya.d. simbolbahaya diisi dengan nama file yang menyatakan simbol.

7. Jika telah selesai menyunting data, klik ikon [Go] di bagian bawah sebelahkanan window.

- 57 -

Gambar 93. Menyunting Data Bahaya Dalam Database SIPOP

5.1.3.2.5. Penelusuran Data POPs dan B3 Serta Data Bahaya Menggunakan DBRSE

DBRSE adalah singkatan dari DataBase Record Selector and Editor. DBRSEmerupakan aplikasi open source yang dapat digunakan untuk penelusuran data dalamdatabase berbasis web menggunakan database server MySQL. Untuk penelusuran dataPOPs dan B3 serta data bahaya menggunakan tools DBRSE ini dapat dilakukan dengancara sebagai berikut :

1. Klik ikon Telusur pada Menu Pengelolaan Database POPs dan B3.2. Pilih tabel ‘popdanb3’ pada menu Pilihan Tabel.

Gambar 94. Pemilihan Tabel Data ‘popdanb3’ Dengan DBRSE

3. Tuliskan jumlah kolom yang akan ditampilkan ke layar monitor pada menuJumlah Kolom. Nilai defaultnya adalah 4 kolom yang akan ditampilkan.

4. Tuliskan nomor awal record data pada menu Mulai nomor baris untukmenentukan permulaan data. Nilai defaultnya adalah 1 yang berarti dari awalrecord data.

5. Tuliskan jumlah baris yang ingin ditampilkan ke layar monitor pada menuJumlah Baris. Nilai defaultnya adalah 0 yang berarti semua baris ditampilkan kelayar monitor.

6. Klik menu [Tampilkan Record Data] untuk mulai menampilkan semua recorddata pada kondisi pilihan menu di atas.

- 58 -

Gambar 95. Hasil Penelusuran Data POPs dan B3 Dengan DBRSE

7. Pada bagian atas tampilan halaman web hasil penelusuran dengan DBRSEakan ditampilkan informasi umum tabel POPs dan B3 yang terdiri dari namatabel, jumlah baris, jumlah total field data, dan jumlah field yang ditampilkan.

Gambar 96. Informasi Umum Tabel POPs dan B3

Arti dari masin-masing informasi tersebut di atas adalah sebagai berikut :

Table Name berisi informasi mengenai nama tabel data. Rows berisi informasi jumlah baris record data yang ada di dalam tabel. Fields Total berisi informasi jumlah kolom / field tabel data dalam tabel. Fields Showing berisi informasi mengenai jumlah kolom / field tabel data

yang ditampilkan ke layar monitor. Goto To Daftar Tabel digunakan untuk menuju daftar tabel yang ada.

8. Setiap record data yang ditampilkan, terdapat menu edit dan menu hapus padabagian kiri di setiap record data. Fungsi kedua menu tersebut adalah sebagaiberikut :

Ikon Edit data untuk menyunting record data yang bersangkutan.

Ikon Delete data untuk menghapus record data yang bersangkutan.

9. Menu [Ed] / edit / sunting data akan menyajikan seluruh kolom data / field padatabel ‘popdanb3’ pada layar monitor agar dapat disunting oleh pengguna sepertipada gambar di bawah ini.

- 59 -

Gambar 97. Menyunting Record Data POPs dan B3 Dengan DBRSE

10. Setelah penyuntingan data POPs dan B3 selesai dilakukan, klik menu [Save]untuk menyimpan hasil perubahan record data ke dalam database.

11. Pada saat memilih menu [X] untuk menghapus salah satu record data, komputerakan memberikan konfirmasi penghapusan data. Pilih [OK] untuk menghapusdan [Cancel] untuk membatalkannya

Gambar 98. Konfirmasi Penghapusan Record Data POPs dan B3

Selain data POPs dan B3, DBRSE dapat juga digunakan untuk menyunting danmenelusuri data bahaya dengan cara sebagai berikut :

1. Klik ikon Telusur pada Menu Pengelolaan Database POPs dan B3.

2. Pilih tabel ‘bahaya‘ pada menu Pilihan Tabel.

3. Tuliskan j uga jumlah kolom yang akan ditampilkan ke layar monitor pada menuJumlah Kolom. Nilai defaultnya adalah 4 kolom yang akan ditampilkan.

4. Kemudian tuliskan nomor awal record data pada menu Mulai nomor barisuntuk menentukan permulaan data. Nilai defaultnya adalah 1 yang berarti dariawal record data.

5. Selanjutnya tuliskan jumlah baris yang ingin ditampilkan ke layar monitor padamenu Jumlah Baris. Nilai defaultnya adalah 0 yang berarti semua barisditampilkan ke layar monitor.

- 60 -

6. Klik menu [Tampilkan Record Data] untuk mulai menampilkan semua recorddata pada kondisi pilihan menu di atas.

Gambar 99. Pemilihan Tabel Data ‘bahaya’ Dengan DBRSE

7. Hasil penelusuran data akan terlihat seperti pada gambar di bawah ini.

Gambar 100. Hasil Penelusuran Data ‘bahaya’ Dengan DBRSE

- 61 -

8. Pada bagian atas tampilan halaman web hasil penelusuran dengan DBRSEakan ditampilkan informasi umum tabel bahaya yang terdiri dari nama tabel,jumlah baris, jumlah total field data, dan jumlah field yang ditampilkan.

Gambar 101. Informasi Umum Tabel Bahaya

Arti dari masin-masing informasi tersebut di atas adalah sebagai berikut :

Table Name berisi informasi mengenai nama tabel data.

Rows berisi informasi jumlah baris record data yang ada di dalam tabel.

Fields Total berisi informasi jumlah kolom / field tabel data dalam tabel.

Fields Showing berisi informasi mengenai jumlah kolom / field tabel datayang ditampilkan ke layar monitor.

Goto To Daftar Tabel digunakan untuk menuju daftar tabel yang ada.

9. Setiap record data bahaya yang ditampilkan, terdapat menu ikon edit dan menuikon hapus pada bagian kiri di setiap record data. Fungsi kedua menu tersebutadalah sebagai berikut :



10. Menu [Ed] / edit / sunting data akan menyajikan seluruh kolom data / field padatabel ‘bahaya’ pada layar monitor agar dapat disunting oleh pengguna sepertipada gambar di bawah ini.

Gambar 102. Menyunting Record Data Bahaya Dengan DBRSE

12. Setelah penyuntingan data bahaya selesai dilakukan, klik menu [Save] untukmenyimpan hasil perubahan record data ke dalam database.

- 62 -

13. Pada saat memilih menu [X] untuk menghapus salah satu record data bahaya,komputer akan memberikan konfirmasi penghapusan data. Pilih [OK] untukmenghapus dan [Cancel] untuk membatalkannya

Gambar 103. Konfirmasi Penghapusan Record Data Bahaya

5.1.3.3. Sub Menu Database Teknologi

Tampilan sub menu Database Teknologi memberikan informasi RekapitulasiKoleksi Dalam Database pada bagian atasnya, di bagian bawahnya terdapat menuPencarian Cepat (Quick Search), Pencarian Spesifik (Specific Search) danPengelolaan Data (Database Maintenance) seperti gambar berikut ini.

Gambar 104. Tampilan Halaman Web Konten Database Teknologi

- 63 -

Pada gambar halaman web di atas, informasi rekapitulasi jumlah artikel teknologi yangdisajikan berdasarkan kategori teknologinya. Pada menu berikutnya disediakan dua menupencarian data teknologi, yaitu Pencarian Cepat dan Pencarian Spesifik.

5.1.3.3.1. Menu Pencarian Cepat (Quick Search).

Pada menu ini, pengguna hanya menuliskan kata kunci data teknologi yang akandicari. Mesin pencari akan menelusurinya secara acak pada kolom Judul Teknologi,Abstrak Teknologi, Kata Kunci Teknologi, Media Masa Penerbit, Alamat Link Artikel,Penulis Artikel, Nama Intansi, Alamat Email Penulis, Situs Institusi, dan keteranganlainnya dalam file database.

Gambar 105. Pencarian Data Melalui Menu Pencarian Cepat


1. Ketikkan kata kunci yang akan dicari pada kolom isian.

2. Klik tombol [Cari] untuk mulai mencari data teknologi, atau

3. Klik tombol [Reset] untuk menghapus kata kunci pada kolom isian.

5.1.3.3.2. Menu Pencarian Spesifik (Spesific Search).

Pada menu ini, pengguna harus memilih salah satu basis pencarian, yaitu : JudulTeknologi, Abstrak Teknologi, Kata Kunci Teknologi, Media Masa Penerbit, AlamatLink Artikel, Penulis Artikel, Nama Intansi, Alamat Email Penulis, Situs Institusi, danketerangan lainnya. Kemudian menuliskan kata yang akan dicari dalam DatabaseTeknologi.

Gambar 106. Pencarian Data Melalui Menu Pencarian Spesifik

- 64 -


1. Klik tanda panah ke bawah [] pada kolom ‘Pencarian Berdasarkan :

2. Pilih salah satu basis pencarian.

3. Ketikkan kata kunci yang akan dicari sesuai basis pencarian pada kolom katayang akan dicari.

4. Klik tombol [Cari Dari Database] untuk mulai penelusuran data, atau

5. Klik tombol [Bersihkan Form Isian] untuk mengubah basis pencarian danmenghapus kata kunci pada kolom kata yang dicari.

Mesin pencari akan menelusuri data pada salah satu kolom dalam file databaseberasarkan basis pencarian yang telah ditentukan. Dalam contoh di atas, mesin pencarihanya akan mencari pada kolom data ‘Judul Teknologi’ dan menampilkan hasilnya kelayar monitor.

Kedua cara pencarian ini baik pencarian cepat maupun pencarian spesifik akanmenghasilkan hasil pencarian yang ditampilkan dalam format yang sama, yaitu masing-masing record data memuat informasi sebagai berikut :

Nomor Judul Kata Kunci Kategori

Media Masa Alamat Link Penulis Instansi

Email Situs Instansi Keterangan Abstrak

Tampilan halaman web hasil pencarian cepat maupun hasil pencarian spesifik akanterlihat seperti pada gambar di bawah ini. Semua informasi mengenai data yang dicariakan ditampilkan ke layar monitor. Informasi lebih lengkap lainnya mengenai artikelteknologi yang dimaksud dapat ditelusuri lebih lanjut dengan memilih alamat link padakolom ‘Alamat Link : ’ yang terturlis dengan warna biru dan bergaris bawah.

Gambar 107. Tampilan Halaman Web Hasil Pencarian Cepat

- 65 -

Informasi detail artikel teknologi yang ditelusuri bisa berasal dari bagian kontensistem informasi ini sendiri atau merujuk pada alamat pada situs lain seperti contohtampilan halaman web di bawah ini.

Gambar 108. Tampilan Halaman Web Informasi Detail Artikel Teknologi

5.1.3.3.3. Menu Pengelolaan Data (Database Maintenance)

Menu ini digunakan untuk mengelola data teknologi dan kategorinya dalam aplikasiweb ini yang terdiri dari tabel data Teknologi dan Kategori. Untuk mengaktifkan menu iniklik tombol [Database Maintenance] yang ada di bawah window seperti gambar berikut.

Gambar 109. Menu Pengelolaan Data (Database Maintenance)

Sebelum masuk ke window pengelolaan database, pengguna diminta untukmelakukan prosedur login dahulu. Oleh karena itu disarankan hanya administrator danoperator database saja yang memiliki kode akses ke dalam menu ini. Ketikkan kode loginyang telah didaftarkan pada kolom ‘Username’ lalu tekan tombol [OK]. Selanjutnyaketikkan kata kunci pada kolom ‘Password’ lalu tekan tombol [OK].

Gambar 110. Prosedur Login Pada Window Pengelolaan Data

- 66 -

Jika kode login atau kata kunci yang diketikkan salah, komputer akan menampilkan pesanseperti pada gambar di bawah ini, klik tombol [OK] untuk mengulanginya kembali. Jikabelum terdaftar laporkan ke administrator database untuk mendaftarkannya secaramanual kode login dan kata kunci yang diinginkan.

Gambar 111. Pesan Kesalahan Pada Prosedur Login

5.1.3.4. Pengelolaan Data Teknologi dan Kategori Teknologi

Jika pengguna telah berhasil melakukan prosedur login, maka window PengelolaanDatabase Teknologi akan tampil ke layar monitor seperti pada gambar di bawah ini.Menu ini digunakan untuk pengelolaan dan pemeliharaan database oleh administrator.Administrator dapat menambah, menghapus, menyunting dan memantau status databaseTeknologi yang tersedia dalam aplikasi web SIPOP ini.

Gambar 112. Tampilan Halaman Web Window Pengelolaan Database Teknologi

- 67 -

Pada window pengelolaan database Teknologi terdapat beberapa ikon untukmembuka menu-menu pengelolaan data untuk Tabel Data Teknologi dan KategoriTeknologi. Fungsi masing-masing ikon tersebut adalah :

Ikon Status digunakan untuk menampilkan menu ini, yaitu Tabel RekapitulasiData Teknologi yang ada di dalam database.

Ikon Tambah digunakan untuk menambah record data Teknologi dan dataKategori Teknologi yang dapat dilakukan secara remote juga.

Ikon Edit digunakan untuk editing (menambah / menyunting / menghapus) recorddata Teknologi dan Kategori Teknologi yang dapat dilakukan secara remote juga.

Ikon MyAdmin digunakan untuk mengelola tabel data Teknologi dan KategoriTekologi menggunakan tools phpMyAdmin.

Ikon Telusur digunakan untuk mencari dan menyunting record data Teknologidan Kategori Teknologi menggunakan Tools Database Record Selector & Editor(DBRSE).

Selain terdapat beberapa menu ikon untuk pengelolaan database, pada bagianbawah window ini ditampilkan kembali informasi tabel rekapitulasi database Teknologiyang ada dalam aplikasi web SIPOP. Jumlah datanya dihitung berdasarkan kategoriteknologi yang ada di dalam tabel.

5.1.3.4.1. Form Isian Penambahan Data Teknologi

Untuk menambah data paket teknologi dapat dilakukan beberapa cara. Salahsatunya dalah dengan menggunakan form isian penambahan data teknologi yang dapatdiaktifkan dengan mengklik ikon ‘Tambah’ data di bawah label Tabel Data Teknologi.

Gambar 113. Tampilan Halaman Web Form Isian Penambahan Data Teknologi

Form isiandata teknologi

- 68 -

Ada 12 kolom isian yang harus diisi untuk menambah data paket teknologi sepertiterlihat pada gambar di bawah ini.

Gambar 114. Form Isian Penambahan Data Paket Teknologi

Cara pengisian form isian penambahan data peket teknologi adalah sebagai berikut :

1. ID Patek diisi dengan nomor identifikasi paket teknologi. Nomor identifikasi iniakan bertambah secara otomatis tanpa harus diisi. Nomor ID ini adalah unik,sehingga tidak boleh sama antara record data yang satu dengan yang lain.

2. Judul Teknologi diisi dengan menuliskan judul atau nama paket teknologi atauartikel mengenai teknologi.

3. Abstrak diisi dengan menuliskan uraian singkat atau abstraksi tentang paketteknologi ini.

4. Kata Kunci diisi dengan menuliskan beberapa kata penting yang dianggapsebagai kunci dan dapat mewakili isi paket teknologi ini.

5. Kategori diisi dengan memilih salah satu dari beberapa kategori atau jenispengelompokkan paket teknologi ini. Klik tanda panah ke bawah yang ada dibagian kanan pulldown menu kolom ini.

6. Media Masa diisi dengan menuliskan nama media masa tempat diterbitkannyapaket teknologi ini.

7. Alamat Link diisi dengan menuliskan alamat link lokasi path direktori/foldertempat dokumentasi lengkap paket teknologi ini disimpan dalam format html /php / pdf.

- 69 -

8. Penulis diisi dengan menuliskan nama lengkap penulis / pemilik / nara sumberutama paket teknologi ini.

9. Institusi diisi dengan menuliskan nama lengkap instansi dimana penulis /pemilik / nara sumber utama paket teknologi ini berada.

10. Email diisi dengan menuliskan alamat surat elektronik penulis / pemilik / narasumber utama / instansi yang menyediakan paket teknologi ini.

11. URL Situs diisi dengan menuliskan alamat situs penulis / pemilik / nara sumberutama / instansi dimana paket teknologi ini berasal.

12. Keterangan diisi dengan menuliskan keterangan lain yang ingin diberikantentang paket teknologi ini.

13. Klik tombol [Tambahkan Ke Dalam Tabel] untuk memasukkan data baru atautombol [Bersihkan Form Isian] untuk menghapus isian form di layar monitor.

Dari keduabelas kolom isian di atas, ada beberapa kolom yang wajib diisi dan tidakboleh kosong, yaitu : ID Patek, Judul Teknologi, Abstrak, Kata Kunci, Kategori, MediaMasa, Nama Penulis, dan Instansi. Gambar berikut ini adalah pesan error yang akanmuncul jika salah satu dari kolom isian data di atas tidak diisi. Klik tombol [OK] untukmelanjutkan pengisian kolom data tersebut.

Gambar 115. Pesan Error Jika Salah Satu Kolom Wajib Tidak Diisi

- 70 -

Khusus untuk ID Patek tidak boleh sama dengan nomor ID yang telah ada di dalamtabel data. Nomor ini adalah unik sehingga tidak boleh sama antara record data yang satudengan record data yang lain. Disarankan menggunakan nomor yang telah diberikan olehkomputer secara otomatis muncul pada kolom data ID Patek. Jika terdapat duplikasinomor ID ini, maka komputer akan memberikan pesan ke layar monitor sebagai berikut :

Ikon back yang dimaksud adalah ikon yang berada pada menu ikon dalam webbrowser. Jika semua kondisi kolom isian data tidak ada masalah, maka data baru akandisimpan ke dalam tabel data teknologi, dan form isian penambahan data akanditampilkan kembali dalam kondisi kosong dengan nomor ID Paket yang berikutnya.

5.1.3.4.2. Form Penambahan Data Kategori Teknologi

Untuk menambah data kategori/jenis teknologi dapat dilakukan beberapa cara juga.Salah satunya adalah dengan menggunakan form isian penambahan data kategoriteknologi yang dapat diaktifkan dengan mengklik ikon ‘Tambah Data’ di bawah labelTabel Data Kategori.

Gambar 116. Tampilan Halaman Web Form Isian Penambahan DataKategori Teknologi

Hanya ada dua kolom isian yang harus diisi untuk menambah data kategoriteknologi seperti terlihat pada gambar di atas, yaitu :

1. ID Kategori diisi dengan nomor identifikasi kategori teknologi. Nomor identifikasiini akan bertambah secara otomatis tanpa harus diisi. Nomor ID ini adalah unik,sehingga tidak boleh sama antara record data yang satu dengan record datayang lain.

2. Nama Kategori diisi dengan judul/nama kategori/jenis teknologi

Form isiandata kategori

- 71 -

Gambar 117. Form Isian Penambahan Data Kategori Teknologi

Jika salah satu atau kedua kolom isian tidak diisi atau kosong, maka komputer akanmenampilkan pesan kesalahan seperti pada gambar berikut ini. Klik tombol [OK] untukmelanjutkan pengisian kolom data tersebut.

Gambar 118. Pesan Error Jika Salah Satu Kolom Atau Keduanya Tidak Diisi

Khusus untuk ID Kategori tidak boleh sama dengan nomor ID yang telah ada didalam tabel data. Nomor ini adalah unik sehingga tidak boleh sama antara record datayang satu dengan record data yang lain. Disarankan menggunakan nomor yang telahdiberikan oleh komputer secara otomatis muncul pada kolom data ID Kategori. Jikaterdapat duplikasi nomor ID ini, maka komputer akan memberikan pesan ke layar monitorsebagai berikut :

Ikon back yang dimaksud adalah ikon yang berada pada menu ikon dalam webbrowser. Jika semua kondisi kolom isian data tidak ada masalah, maka data baru akandisimpan ke dalam tabel data kategori, dan form isian penambahan data akan ditampilkankembali dalam kondisi kosong dengan nomor ID Kategori yang berikutnya.

5.1.3.4.3. Form Penyuntingan Data Teknologi

Untuk menyunting data Teknologi dapat dilakukan beberapa cara. Salah satunyaadalah dengan menggunakan form isian ini. Pada form ini, pengguna dapat melihat data(Preview) dengan menavigasikan record selector yang ada di bagianbawah form tersebut. Selain itu pengguna dapat menyunting isi data (Edit),menambahkan data baru (Add/Append) atau menghapus data dari dalam tabel(Delete).Tampilan form penyuntingan data teknologi adalah seperti pada gambar dibawah ini.

- 72 -

Gambar 119. Tampilan Halaman Web Form Penyuntingan Data Teknologi

Tampilan form penyuntingan/editing data Teknologi pada gambar di atas terdiri dari4 bagian, yaitu :

a. Form isian data yang digunakan untuk menyunting data Teknologi.b. Record selector dan status record yang dapat digunakan untuk menavigasikan

record data dan mengetahui posisi record data.c. Ikon operasi yang dapat digunakan untuk menyimpan, mengupdate, menghapus

atau menampilkan laporan data.d. Tabel data yang digunakan untuk menampilkan data Teknologi dalam bentuk tabel

dengan urutan data terkini.

Cara penggunaan form penyuntingan data Teknologi adalah :


ID Patek akan terisi secara otomatis dengan nomor urut pendataan ataunomor identifikasi paket teknologi.

Judul Teknologi diisi dengan judul atau nama paket teknologi. Abstrak diisi dengan penjelasan singkat atau abstraksi tentang paket

teknologi. Kata Kunci diisi dengan beberapa kata yang dianggap penting dan menjadi

kunci dalam paket teknologi. Penulis diisi degan nama penulis / pemilik atau nara sumber utama paket

teknologi.

TabelData

Formisiandata

Ikonoperasi

Record Selector

- 73 -

Kategori diisi dengan memilih salah satu pilihan kategori teknologi yangdisediakan, yaitu :

Teknologi Pengolahan Air Bersih Teknologi Pengolahan Air Limbah Teknologi Pengelolaan Air Teknologi Lingkungan Teknologi Informasi dan Komputer Teknologi Penanganan POPs

Media Masa diisi dengan nama media masa tempat diterbitkannya paketteknologi.

Alamat Link diisi dengan nama lokasi direktori atau folder tempat dokumentasilengkap paket teknologi ini disimpan dalam format html/php/pdf.

Institusi diisi dengan nama intansi penulis / pemilik atau nara sumber utamapaket teknologi.

URL Situs diisi dengan nama alamat situs penulis / pemilik atau nara sumber /instansi paket teknologi.

E-Mail diisi dengan alamat surat elektronik penulis / pemilik / nara sumber /instansi paket teknologi.

Keterangan diisi dengan keterangan lain mengenai paket teknologi.


Ikon tombol [Append] atau ikon Append Data untuk menambah data.

Ikon tombol [Update] atau ikon Update Data untuk menambah data.

Ikon tombol [Delete] atau ikon Delete Data untuk menambah Teknologi.



3. Jika telah selesai melakukan penambahan data, editing data dan penghapusandata, maka data terkini akan dimunculkan pada tabel data Teknologi yang ada dibagian bawah window.

Gambar 120. Tabel Data Teknologi

4. Beberapa menu pada ikon operasi lain yang dapat digunakan adalah :

Ikon Tabel Data digunakan untuk menampilkan tabel Teknologi dalamwindow yang terpisah.

- 74 -

Gambar 121. Tampilan Laporan Tabel Data Teknologi

Ikon Laporan Satuan Data untuk current record yang digunakan untukmenampilkan laporan satuan data pada posisi record yang muncul di layarmonitor dalam window yang terpisah.

Ikon Laporan Satuan Data untuk seluruh record yang digunakan untukmenampilkan laporan satuan seluruh data Teknologi yang ada di dalam tabeldalam window yang terpisah.

Gambar 122. Tampilan Laporan Data Satuan Teknologi

- 75 -

Dari semua kolom isian di atas, kolom yang wajib diisi dan tidak boleh kosongadalah ID Patek. Oleh karena itu untuk menghindari kesalahan, kolom ID Patek ini tidakdapat diedit dan secara otomatis komputer akan memberikan ID Patek baru terhadapdata teknologi yang baru diisi ke dalam database. Selain ID Patek, kolom pilihan Kategoriteknologi juga harus dipilih. Jika tidak dipilih, maka komputer akan menampilkan pesanerror/kesalahan yang menunjukkan bahwa kategori paket teknologi harus dipilih sepertipada tampilan gambar berikut ini.

Gambar 123. Pesan Error Jika Kategori Teknologi Tidak Dipilih

Jika semua kondisi kolom isian data sudah benar, maka data baru akan disimpan kedalam tabel data ‘teknologi’ dalam database ‘sipop’ dan akan ditampilkan pada recorddata pertama dalam tabel data Teknologi yang ada di bagian bawah window.

5.1.3.4.4. Form Penyuntingan Data Kategori Teknologi

Untuk menyunting data Kategori Teknologi dapat juga dilakukan beberapa cara.Salah satunya adalah dengan menggunakan form isian seperti gambar di bawah ini. Padaform ini, pengguna dapat melihat data (Preview) dengan menavigasikan record selector

yang ada di bagian bawah form tersebut. Selain itu pengguna dapatmenyunting isi data (Edit), menambahkan data baru (Add/Append) atau menghapus datadari dalam tabel (Delete).Tampilan form penyuntingan data kategori teknologi adalahseperti pada gambar di bawah ini.

Gambar 124. Tampilan Halaman Web Form Penyuntingan Data Kategori Teknologi

- 76 -

Tampilan form penyuntingan/editing data Kategori Teknologi pada gambar di atasterdiri dari 4 bagian, yaitu :

a. Form isian data yang digunakan untuk menyunting data Kategori Teknologi.b. Record selector dan status record yang dapat digunakan untuk menavigasikan

record data dan mengetahui posisi record data.c. Ikon operasi yang dapat digunakan untuk menyimpan, mengupdate, menghapus

atau menampilkan laporan data.d. Tabel data yang digunakan untuk menampilkan data Kategori Teknologi dalam

bentuk tabel dengan urutan data terkini.

Cara penggunaan form penyuntingan data Kategori Teknologi adalah :


ID Kategori akan terisi secara otomatis dengan nomor urut pendataan ataunomor identifikasi kategori teknologi.

Nama Kategori diisi dengan judul atau nama kategori teknologi.


Ikon tombol [Append] atau ikon Append Data untuk menambah data.

Ikon tombol [Update] atau ikon Update Data untuk menambah data.

Ikon tombol [Delete] atau ikon Delete Data untuk menambah KategoriTeknologi.



3. Jika telah selesai melakukan penambahan data, editing data dan penghapusandata, maka data terkini akan dimunculkan pada tabel data Kategori Teknologiyang ada di bagian kanan window.

Gambar 125. Tabel Data Kategori Teknologi

- 77 -

4. Ikon Tabel Data digunakan untuk menampilkan tabel Laporan KategoriTeknologi dalam window yang terpisah.

Gambar 126. Tampilan Laporan Tabel Data Kategori Teknologi

Dari kedua kolom isian di atas, kedua kolom isian ini adalah wajib diisi dan tidakboleh kosong. Untuk menghindari kesalahan pemberian nomor ID Kategori, kolom initidak dapat diedit dan secara otomatis komputer akan memberikan ID Kategori baru yangunik terhadap data kategori teknologi yang baru diisi ke dalam database.

Selain itu, kolom isian Nama Kategori teknologi juga harus disi dan tidak bolehsama dengan yang sudah ada. Jika tidak diisi, maka komputer akan menampilkan pesanerror/kesalahan yang menunjukkan bahwa nama kategori harus diisi seperti pada gambardi bawah ini.

Gambar 127. Pesan Error Jika Nama Kategori Teknologi Tidak Diisi

Jika Nama Kategori Teknologi yang diisi sudah ada di dalam database, makakomputer akan menampilkan pesan error/kesalahan yang menunjukkan bahwa namakategori tersebut sudah ada seperti pada gambar di bawah ini.

- 78 -

Gambar 128. Pesan Error Jika Nama Kategori Teknologi Sudah Ada

Jika semua kondisi kolom isian data sudah benar, maka data baru akan disimpan kedalam tabel data ‘kategori’ dalam database ‘sipop’ dan akan ditampilkan pada recorddata pertama dalam tabel data Kategori Teknologi yang ada di bagian kanan window.

Di dalam aplikasi server Xampp terdapat tools phpMyAdmin yang dapat digunakanuntuk mengakses sebuah tabel di dalam database yang dikelola oleh aplikasi serverdatabase MySQL. Dengan phpMyAdmin ini pula pengelolaan tabel data teknologi dapatdilakukan dengan mudah. Penggunaan tools phpMyAdmin ini hanya dapat dilakukanoleh administrator database melalui host lokal (http://localhost/), sehingga tidak dapatdiakses secara online melalui jaringan komputer.

5.1.3.4.5. Pengelolaan Tabel Data Teknologi Menggunakan phpMyAdmin

Banyak fitur yang disediakan oleh tools phpMyadmin untuk mengelola sebuahdatabase, namun pada sub bab ini hanya akan dijelaskan fitur pengelolaan yang meliputibrowsing, editing, dan menghapus record data. Berikut ini adalah langkah-langkah yangdapat digunakan untuk mengelola tabel data teknologi menggunakan tools phpMyAdmin.

1. Klik ikon phpMyAdmin yang berada di bawah label Tabel Data Teknologi, makaprogram browser akan membuka tabel data teknologi dan menampilkannya dibagian bawah atau dalam window / tab control window secara terpisah.

Gambar 129. Membuka Tabel Data Teknologi Dengan phpMyAdmin

- 79 -

2. Tabel data teknologi juga dapat ditampilkan dalam window yang teripsah dan tidakdalam satu frame window seperti tampilan di bawah ini.

Gambar 130. Tampilan Tabel Data Teknologi Melalui phpMyAdmin

3. Pada bagian atas window terdapat menu untuk mengakses tabel data seperti padagambar berikut.

Gambar 131. Menu Mengakses Tabel Data Teknologi Dengan phpMyAdmin

Menu Browse digunakan untuk menampilkan data teknologi dalam bentuktabel data.

Gambar 132. Menu Browse Untuk Menampilkan Tabel Data Teknologi

- 80 -

Menu Structure digunakan untuk menampilkan struktur tabel data teknologi.Pada menu ini pengguna dapat menambah atau mengubah field tabel.Namun tidak disarankan untuk mengubahnya karena akan menyebabkanaplikasi web SIPOP tidak bisa berjalan dengan baik.

Gambar 133. Menu Structure Untuk MenampilkanStruktur Tabel Data Teknologi

Menu SQL untuk membuka window yang berguna untuk menuliskan perintahakses ke tabel dalam bahasa SQL (Structural Query Language).

Gambar 134. Menu SQL Untuk Menjalankan Perintah ManipulasiData Teknologi

Menu Search untuk mencari data melalui pilihan pencarian berdasarkankolom tabel yang ada.

Gambar 135. Menu Search Untuk Pencarian Data Teknologi

- 81 -

Menu Insert untuk menambahkan data teknologi yang baru ke dalam tabeldata teknologi.

Gambar 136. Menu Insert Untuk Menambah Data Teknologi

Menu Export untuk mengekspor data teknologi ke dalam format tabel datayang lain (Excel, SQL, dan lainnya)..

Gambar 137. Menu Export Untuk Mengekspor Data Teknologi

Menu Import untuk memasukkan data dari tabel data dalam format lain(Excel, SQL dan lainnya) ke dalam tabel data Teknologi.

- 82 -

Gambar 138. Menu Export Untuk Mengimport Data Teknologi

Menu Operasions digunakan menjalankan perintah untuk menghapus tabeldata, memindahkan tabel data ke database lain, mengubah nama tabel,nama field tabel, menyalin struktur tabel data atau menyalin seluruh isi datake dalam tabel lain, mengosongkan data dan menghapus tabel data. Tidakdisarankan menggunakan menu ini selain administrator aplikasi web SIPOP.

Gambar 139. Menu Operations Untuk MemanipulasiTabel Data Teknologi


- 83 -

Gambar 140. Menu Tracking Untuk Membuat Versi Database


Gambar 141. Menu Triger Untuk Even Triger Tabel Data Teknologi

4. Pada bagian atas tabel data Teknologi terdapat menu navigasi record data untukmenampilkan dan menentukan kondisi/setting tampilan data dalam tabel.


Fungsi dari beberapa tombol dan kolom dalam menu ini adalah sebagai berikut :

- 84 -


nomor urut halaman web. Tombol [ > ] digunakan untuk menuju record data berikutnya (Next). Tombol [>>] digunakan untuk menuju record data terakhir (Last). Kolom Show : Starting row : diisi dengan nomor awal record data yang ingin

ditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalah recorddata ke 60.









6. Pada bagian bawah window dan bagian akhir tabel data terdapat menu sepertigambar di bawah ini yang berguna untuk menentukan kondisi/setting tampilandata dalam tabel, menavigasikan record data, mencetak data dan lainya.

Gambar 143. Menu Pengoperasian Data Teknologi di Bagian Bawah






- 85 -

Tombol [<<] digunakan untuk menuju record data awal/pertama (Top/First). Tombol [ < ] digunakan untuk menuju record data sebelumnya (Previous). Pulldown menu [2 ▼] digunakan untuk menampilkan tabel data sesuai

dengan nomor urut halaman web. Tombol [ > ] digunakan untuk menuju record data berikutnya (Next). Tombol [>>] digunakan untuk menuju record data terakhir (Last). Kolom Show : Starting row : diisi dengan nomor awal record data yang ingin

ditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalahrecord data ke 60.




Menu Print View dan Print View (with full texts) digunakan untukmencetak tampilan tabel data ke printer atau ke file PDF.

Menu Export digunakan untuk mengekspor data teknologi ke dalamberbagai macam format tabel data yang lain (Excel, CSV, TXT, ODT, DOC,dan lain-lain).



7. Untuk mencetak data pastikan terlebih dahulu record data yang ingin ditampilkandengan memilih kondisi pada kolom isian tombol Show : Start Row:, kolom isianNumber of rows :, dan Headers every :. Klik menu Print View, maka tampilanpreview laporan data akan ditampilkan ke dalam window atau tab control windowyang terpisah seperti pada contoh gambar berikut ini.

Gambar 144. Tampilan Preview Laporan Data Teknologi

- 86 -

8. Untuk mencetak ke printer, tentukan dulu nama printer nya melalui menu printerpada program aplikasi web browser yang digunakan. Untuk software Firefoxadalah : Firefox Print Print. Atau tekan tombol keyboard Control+P.

Gambar 145. Tampilan Pilihan Printer Untuk Mencetak Laporan Data

5.1.3.4.6. Menambah dan Menghapus Data Teknologi Dengan phpMyAdmin

Langkah-langkah untuk menambah atau menghapus data teknologi ke dalam TabelTeknologi pada Database SIPOP adalah sebagai berikut :

1. Jika sudah berada dalam window tools phpMyAdmin, klik menu Insert untukmembuka form isian data teknologi.

2. Jika belum berada dalam window tools phpMyAdmin, jalankan web browserterlebih dahulu dan buka alamat : http://localhost/phpmyadmin/

3. Klik menu database sipop yang ada di bagian sebelah kiri window.4. Pilih tabel teknologi untuk menambah atau menghapus data teknologi dalam

database SIPOP.

Gambar 146. Memilih Tabel Teknologi Dalam Database SIPOP

- 87 -

5. Klik Tab Insert untuk menambah data teknologi.6. Isikan data yang diminta di dalam kolom isian data sesuai dengan nama kolom

(field) data, yaitu :

a. idteknologi untuk nomor identifikasi teknologi.b. judul untuk nama judul teknologi.c. abstrak untuk penjelasan ringkas / abstraksi artikel teknologi.d. katakunci untuk kata-kata penting yang menjadi kunci dari artikel teknologi.e. kategori untuk menentukan kategori dari artikel teknologi.f. mediamasa untuk nama media masa di mana artikel teknologi diterbitkan.g. alamatlink untuk menunjukkan lokasi (path) direktori atau alamat link URL

artikel teknologi disimpan.h. penulis untuk nama penulis artikel teknologi.i. instansi untuk nama instansi tempat penulis berasal.j. email untuk alamat surat elektronik penulis atau instansi.k. url untuk alamat situs penulis atau instansi.l. keterangan untuk memberikan keterangan lain mengenai teknologi.

Gambar 147. Menambah Data Pada Tabel Teknologi Dalam Database SIPOP

7. Klik ikon [Go] untuk mulai menyimpan data ke dalam tabel teknologi.

- 88 -

8. Setelah beberapa saat komputer akan menampilkan informasi mengenai perintahSQL yang dijalankan pada saat memasukkan data baru ke dalam tabel datateknologi seperti pada gambar di bawah ini.

Gambar 148. Perintah SQL Untuk Menambah Data Pada Tabel Teknologi

Perintah SQL untuk menambah data teknologi dalam contoh di atas adalah :

INSERT INTO `sipop`.`teknologi`(ìdteknologi`, `judul`, àbstrak`, `katakunci`, `kategori`, `mediamasa`,àlamatlink`, `penulis`, ìnstansi`, èmail`, ùrl`, `keterangan`)

VALUES ('595', 'Penjernihan Air Menggunakan Arang Sekam Padi', 'Kebutuhanakan air bersih di daerah pedesaan dan pinggiran kota untuk air minum,memasak, mencuci dan sebagainnya harus diperhatikan. Cara penjernihan airperlu diketahui karena semakin banyak sumber air yang tercemar limbah rumahtangga maupun limbah industri. Cara penjernihan air baik secara alami maupunkimiawi akan diuraikan dalam tulisan ini. Cara-cara yang disajikan dapatdigunakan di desa karena bahan dan alatnya mudah didapat. Bahan-bahannyaantara lain batu, pasir, kerikil, arang tempurung kelapa, arang sekam padi, tanahliat, ijuk, kaporit, kapur, tawas, biji kelor dan lain-lain.', 'Penjernih Air', '1', 'SistemInformasi Teknologi Pengolahan Air Kab. Pandeglang','http://www.kelair.bppt.go.id/Sitpa/Artikel/SekamPadi/index.html', 'Teknologi TapatGuna - Pengelolaan Air dan Sanitasi', 'Menteri Negara Riste dan Teknologi ','[email protected]', 'http://www.iptek.net.id/ind/warintek/?mnu=6&ttg=5&doc=5b3', '');

9. Klik Tab [Browse] dan ikon [>>] untuk melihat data teknologi yang baru sajadimasukkan yang berada pada record data terakhir.

- 89 -

Gambar 149. Melihat Data Pada Tabel Teknologi Dalam Database SIPOP

10. Pada tampilan gambar di atas menunjukkan tabel data teknologi. Data yang barusaja dimasukkan ada di record data terakhir, yaitu dengan idteknologi ‘595’ danjudul ‘Penjernihan Air Menggunakan Arang Sekam Padi’.






12. Untuk menghapus (delete) record data, beri tanda centang ‘’ kolom denganmengklik ikon Kolom, lalu klik ikon Hapus, maka komputer akan menampilkanpesan konfirmasi seperti gambar di bawah ini.

Gambar 150. Konfirmasi Penghapusan Data Pada Tabel TeknologiDalam Database SIPOP

13. Klik tombol [OK] untuk mulai menghapus (delete) record data atau [Cancel] untukmembatalkannya.

- 90 -

14. Untuk menyunting (edit) record data, beri tanda centang ‘’ kolom denganmengklik ikon Kolom, kemudian klik ikon Edit, maka komputer akanmenampilkan record data tersebut dalam format penyuntingan.

Gambar 151. Menyunting Record Data Teknologi Dengan phpMyAdmin

15. Tekan ikon [Go] jika telah selesai menyunting.

5.1.3.4.7. Pengelolaan Tabel Data Kategori Menggunakan phpMyAdmin

Pengelolaan tabel data kategori teknologi menggunakan tools phpMyAdmin jugahanya dapat dilakukan oleh administrator database melalui host lokal (http://localhost/),sehingga tidak dapat diakses secara online melalui jaringan komputer. Fitur yangdisediakan oleh tools ini untuk mengelola sebuah database antara lain browsing, editing,menghapus record data, mencetak data, mengeksport data, dan lain-lain.

Berikut ini adalah beberapa langkah yang dapat digunakan untuk mengelola tabeldata kategori teknologi menggunakan tools phpMyAdmin.

- 91 -

1. Klik ikon phpMyAdmin yang berada di bawah label Tabel Data Kategori, makaprogram browser akan membuka tabel data kategori dan menampilkannya dibagian bawah atau dalam window / tab control window secara terpisah.

Gambar 152. Membuka Tabel Data Kategori Dengan phpMyAdmin

2. Tabel data kategori juga dapat ditampilkan dalam window yang terpisah dan tidakdalam satu frame window seperti tambilan di bawah ini.

Gambar 153. Tampilan Tabel Data Kategori Melalui phpMyAdmin

- 92 -

3. Pada bagian atas window terdapat menu untuk mengakses tabel data seperti padagambar berikut ini.

Gambar 154. Menu Mengakses Tabel Data Kategori Dengan phpMyAdmin

Menu Browse digunakan untuk menampilkan data kategori dalam bentuktabel data.

Menu Structure digunakan untuk menampilkan struktur tabel data kategori.Pada menu ini pengguna dapat menambah atau mengubah field tabel. Namuntidak disarankan untuk mengubahnya karena akan menyebabkan aplikasi webSIPOP tidak bisa berjalan dengan baik.

Menu SQL untuk membuka window yang berguna untuk menuliskan perintahakses ke tabel dalam bahasa SQL (Structural Query Language).

Menu Search untuk mencari data melalui pilihan pencarian berdasarkankolom tabel yang ada.

Menu Insert untuk menambahkan data kategori yang baru ke dalam tabeldata teknologi.

Menu Export untuk mengekspor data kategori ke dalam format tabel datayang lain (Excel, SQL, dan lainnya).

Menu Import untuk memasukkan data dari tabel data dalam format lain(Excel, SQL dan lainnya) ke dalam tabel data kategori.

Menu Operasions digunakan menjalankan perintah untuk menghapus tabeldata, memindahkan tabel data ke database lain, mengubah nama tabel, namafield tabel, menyalin struktur tabel data atau menyalin seluruh isi data kedalam tabel lain, mengosongkan data dan menghapus tabel data. Tidakdisarankan menggunakan menu ini selain administrator aplikasi web SIPOP.



4. Pada bagian atas tabel data kategori juga terdapat menu navigasi record datauntuk menampilkan dan menentukan kondisi/setting tampilan data dalam tabel.


Fungsi dari beberapa tombol dan kolom dalam menu ini adalah sebagai berikut :


nomor urut halaman web. Tombol [ > ] digunakan untuk menuju record data berikutnya (Next). Tombol [>>] digunakan untuk menuju record data terakhir (Last). Kolom Show : Starting row : diisi dengan nomor awal record data yang ingin

ditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalah recorddata ke 6.

- 93 -


Menu Headers every diisi dengan jumlah baris data yang akan ditampilkan disetiap header. Contoh di atas headers akan berulang setiap 100 baris.







6. Pada bagian bawah window dan bagian akhir tabel data terdapat menu sepertigambar di bawah ini yang berguna untuk menentukan kondisi/setting tampilan datadalam tabel, menavigasikan record data, mencetak data dan lainya.

Gambar 156. Menu Pengoperasian Data Kategori di Bagian Bawah






Tombol [<<] digunakan untuk menuju record data awal/pertama (Top/First). Tombol [ < ] digunakan untuk menuju record data sebelumnya (Previous). Pulldown menu [2 ▼] digunakan untuk menampilkan tabel data sesuai

dengan nomor urut halaman web. Tombol [ > ] digunakan untuk menuju record data berikutnya (Next). Tombol [>>] digunakan untuk menuju record data terakhir (Last). Kolom Show : Starting row : diisi dengan nomor awal record data yang ingin

ditampilkan pertama kali dalam tabel data. Dalam contoh di atas adalahrecord data ke 6.

- 94 -




Menu Print View dan Print View (with full texts) digunakan untukmencetak tampilan tabel data ke printer atau ke file PDF.

Menu Export digunakan untuk mengekspor data kategori ke dalamberbagai macam format tabel data yang lain (Excel, CSV, TXT, ODT, DOC,dan lain-lain).



7. Untuk mencetak data pastikan terlebih dahulu record data yang ingin ditampilkandengan memilih kondisi pada kolom isian tombol Show : Start Row:, kolom isianNumber of rows :, dan Headers every :. Klik menu Print View, maka tampilanpreview laporan data akan ditampilkan ke dalam window atau tab control windowyang terpisah seperti pada contoh gambar berikut ini.

Gambar 157. Tampilan Preview Laporan Data Kategori

- 95 -

5.1.3.4.8. Menambah dan Menghapus Data Kategori Dengan phpMyAdmin

Langkah-langkah yang harus dilakukan untuk menambah dan menghapus datakategori teknologi ke dalam Tabel Data Kategori pada database SIPOP adalah berikut :

1. Jika sudah berada dalam window tools phpMyAdmin, klik menu Insert untukmembuka form isian data kategori.

2. Jika belum berada dalam window tools phpMyAdmin, jalankan program webbrowser dan buka alamat : http://localhost/phpmyadmin/

3. Klik menu database sipop yang ada di bagian sebelah kiri window.4. Pilih tabel kategori untuk menambah atau menghapus data kategori teknologi

dalam database SIPOP.

Gambar 158. Memilih Tabel Kategori Dalam Database SIPOP

5. Klik Tab Insert untuk menambah data kategori.6. Isikan data yang diminta di dalam kolom isian data sesuai dengan nama

kolom/field data, yaitu IDKATEGORI untuk nomor identifikasi kategori teknologidan NAMAKATEGORI untuk nama kategori teknologi.

Gambar 159. Menambah Data Pada Tabel Kategori Dalam Database SIPOP

7. Klik ikon [Go] untuk mulai menyimpan data ke dalam tabel kategori.

- 96 -

8. Setelah beberapa saat komputer akan menampilkan informasi mengenaiperintah SQL yang dijalankan pada saat memasukkan data baru ke dalam tabeldata kategori seperti pada gambar di bawah ini.

Gambar 160. Perintah SQL Untuk Menambah Data Pada Tabel Kategori

Perintah SQL untuk menambah data kategori dalam contoh di atas adalah :

INSERT INTO `sipop`.`kategori` (`IDKATEGORI`, `NAMAKATEGORI`)

VALUES ('12', 'Teknologi Penanganan POPs');

9. Klik Tab [Browse] dan ikon [>>] untuk melihat data kategori yang baru sajadimasukkan yang berada pada record data terakhir.

Gambar 161. Melihat Data Pada Tabel Kategori Dalam Database SIPOP

- 97 -

10. Pada tampilan gambar di atas menunjukkan tabel data kategori teknologi. Datayang baru saja dimasukkan ada di record data terakhir, yaitu denganIDKATEGORI ‘12’ dan NAMAKATEGORI ‘Teknologi Penanganan POPs.






12. Untuk menyunting (edit) record data, beri tanda centang ‘’ kolom denganmengklik ikon Kolom, kemudian klik ikon Edit, maka komputer akanmenampilkan kembali record data tersebut dalam format penyuntingan.

13. Untuk menghapus (delete) record data, beri tanda centang ‘’ kolom denganmenekan ikon Kolom, lalu klik ikon Hapus, maka komputer akan menampilkanpesan konfirmasi seperti gambar di bawah ini.

Gambar 162. Konfirmasi Penghapusan Data Pada Tabel KategoriDalam Database SIPOP

14. Klik Ikon [OK] untuk mulai menghapus (delete) record data atau [Cancel] untukmembatalkan penghapusan data

5.1.3.4.9. Penelusuran Data Teknologi dan Kategori Tekologi Menggunakan DBRSE

Dalam aplikasi web SIPOP untuk mengelola data kategori dan data teknologi selaindapat menggunakan tools phpMyAdmin untuk mengelola datanya, juga disediakan toolsDBRSE (Database Record Selector and Editor) yaitu tools yang dapat digunakan untukmenelusuri record data dan menyuntingnya. Berbeda dengan tools phpMyAdmin yanghanya dapat dijalankan dalam mode local host (http://localhost/), maka tools DBRSEdapat dijalankan dalam mode remote host (misalnya : http://www.SIPOP.org/). Sehinggadapat digunakan untuk pengelolaan data pada aplikasi web SIPOP secara remote.

Untuk mengaktifkan tools DBRSE ini klik menu Cari Data dalam menu pengelolaandata di bagian atas window SIPOP Database Maintenance, maka komputer akanmenampilkan tools DBRSE di dalam window yang sama atau jika diperlukan secaraotomatis akan ditampilkan ke dalam window atau tab control window yang terpisah. Untukmengoperasikan tools DBRSE ini, pengguna harus menentukan beberapa konfigurasisetting yang akan ditampilkan untuk menentukan kondisi tampilan data yang diperlukan,di antaranya adalah :

- 98 -

1. Pulldown Pilih Tabel untuk memilih tabel data yang akan dibuka. Pilihlah salahsatu tabel kategori atau tabel teknologi.

2. Kolom isian Jumlah Kolom diisi dengan jumlah kolom data (field) yang akanditampilkan ke layar monitor.

3. Kolom isian Mulai nomor baris diisi dengan nomor record data ke berapa yangakan ditampilkan ke layar monitor. Jika diisi angka 0 berarti seluruh record dataakan ditampilkan.

4. Kolom isian Jumlah Baris diisi dengan jumlah baris record data yang akanditampilkan ke layar monitor. Jika diisi angka 0 atau dikosongkan berarti seluruhbaris record data akan ditampilkan.

5. Jika tabel data memiliki record data, maka tampilan tabel yang dihasilkan akanmenampilkan sejumlah kolom data atau semua kolom data dalam tabel, manayang lebih sedikit.

6. Angka isian pada nomor adalah lebih besar dari 0 dan kurang dari atau samadengan 99. Angka 0 akan menghasilkan semua kolom dalam tabel tidak peduliberapa banyak kolom yang ada.

7. Jika telah ditentukan konfigurasi setting pencarian datanya, kemudian tekantombol [Tampilkan Record Data] untuk mulai menampilkan data ke layarmonitor.

8. Untuk kembali ke tampilan awal menu DBRSE, klik menu [Mulai dari awal]yang ada di sebelah kanan window di bawah menu ikon pengelolaan datateknologi dan kategori.

Gambar 163. Tampilan Pengelolaan Data Menggunakan DBRSE

- 99 -

Contoh tampilan penelusuran data untuk tabel kategori dan tabel teknologi adalahseperti pada gambar di bawah ini.

Gambar 164. Tampilan Hasil Penelusuran Tabel Data Kategori Menggunakan DBRSE

Gambar 165. Tampilan Hasil Penelusuran Tabel Data Teknologi Menggunakan DBRSE

- 100 -

Pada contoh hasil penelusuran kedua tabel data kategori dan teknologi di atas,pada bagian atas tabel, tools DBRSE memberikan informasi mengenai tabel yang sedangditampilkan. Informasi yang diberikan adalah :

Table Name berisi informasi mengenai nama tabel data. Rows berisi informasi jumlah baris record data yang ada di dalam tabel tersebut. Fields Total berisi informasi jumlah kolom / field tabel data dalam tabel tersebut. Fields Showing berisi informasi mengenai jumlah kolom / field tabel data yang

ditampilkan ke layar monitor. Goto To Daftar Record digunakan untuk kembali menuju tabel record data. Goto To Daftar Tabel digunakan untuk kembali menuju daftar tabel yang ada.

Selain informasi di atas, pada bagian kiri setiap record data terdapat dua buahtombol untuk menyunting dan menghapus record data, yaitu :



Untuk menyunting record data, klik ikon edit data yang ada di sebelah kiri record datayang dimaksud, maka seluruh data dengan nomor identifikasi yang dimaksud akanditampilkan pada form editing seperti pada gambar di bawah ini. Setelah penyuntinganselesai dilakukan klik tombol [Save] untuk menyimpan perubahan data.

Gambar 166. Editing Data Teknologi Menggunakan DBRSE

- 101 -

Gambar 167. Editing Data Kategori Teknologi Menggunakan DBRSE

Setelah melakukan perubahan, pada saat tombol [Save] ditekan untuk menyimpandatanya, maka komputer akan menampilkan status update query yang dijalankan ke layarmonitor dan memberikan pesan ‘Data telah berhasil disimpan !’, lalu menampilkan tabeldata kembali.

Berikut ini adalah contoh status update query pada data teknologi dan data kategorisaat dilakukan perubahan.

Gambar 168. Status Update Query Saat Editing Data Teknologi Dengan DBRSE

Gambar 169. Status Update Query Saat Editing Data Kategori Dengan DBRSE

Untuk menghapus record data, klik ikon delete yang ada di sebelah kiri recorddata yang dimaksud, maka komputer akan memberikan pesan peringatan untukmeyakinkan kembali penghapusan record data tersebut seperti pada gambar di bawah ini.

Gambar 170. Pesan Konfirmasi Penghapusan Record Data Oleh DBRSE

- 102 -

5.1.3.5. Sub Menu Database Kepakaran

Sub Menu Database Kepakaran merupakan database yang berada pada alamatsitus lain, yaitu http://elib.pdii.lipi.go.id/sidik/home. Alamat situs ini dikelola oleh PusatDokumentasi dan Informasi Ilmiah (PDII) Lembaga Ilmu Pengetahuan Indonesia (LIPI).Situs direktori kepakaran menyajikan informasi data kepakaran berdasarkan bidangkepakarannya. Pada halaman web awal situs ini pengguna dapat menelusuri direktorikepakaran berdasarkan menu tab control yang disediakan, yaitu :

Tab control Menu Pakar Terpopuler Dilihat, yaitu menu untuk menelusuri pakarberdasarkan jumlah ditelusurinya pakar tersebut.

Tab control Bidang Ilmu, menu untuk menelusuri pakar berdasarkan bidang ilmupengetahuan yang ada.

Tab control Sub Bidang Ilmu, menu untuk menelusuri pakar berdasarkan sub bidangilmu pengetahuan yang ada.

Tab control Bidang Kepakaran, menu untuk menelusur pakar berdasarkan bidangkepakarannya.

Berikut ini adalah gambar tampilan situs Database Kepakaran.

Gambar 171. Situs Direktori Kepakaran – PDII LIPI

- 103 -

5.1.4. Menu Paket Teknologi

Pada Menu Paket Teknologi disajikan paket-paket teknologi yang berhubungandengan penanganan limbah POPs. Paket-paket teknologi disajikan dalam bentukdokumentasi hypertext yang membahas teknologi penanganan limbah POPs secara detaildengan harapan dapat diterapkan oleh pengguna yang membutuhkannya. Untukmembuka paket teknologi di dalamnya klik judul paket teknologi yang terdapat di dalamdaftar paket teknologinya. Misalnya :

Klik Menu Paket Teknologi Klik Judul Paket Teknologi (Contoh : Substitusi Pestisida)

Berikut ini adalah beberapa contoh tampilan halaman web paket teknologi.

Gambar 172. Halaman Web Paket Teknologi Substitusi Pestisida

- 104 -

5.1.5. Menu Galeri POPs

Menu Galeri POPs bertujuan untuk menyajikan informasi tentang POPs dalambentuk gambar atau klip video maupun tulisan iptek sederhana yang dapat memberikanedukasi / pendidikan kepada masyarakat mengenai bahaya POPs. Di dalam menu GaleriPOPs terdiri dari 3 sub menu, yaitu :

Sub Menu Slide Foto POPs untuk menyajikan gambar-gambar atau foto-fotodalam bentuk slide yang berhubungan dengan edukasi POPs.

Sub Menu Video Klip Edukasi untuk menyajikan tayangan video klil tentangpendidikan POPs.

Sub Menu Iptek Untuk Kita berisi daftar iptek sederhana yang dapat menjelaskankepada masyarakat bagaimana cara mendeteksi POPs di sekitar kita dan cara-cara sederhana penanganannya.

5.1.5.1. Slide Foto POPs

Langkah-langkah untuk menampilkan dan mengoperasikan halaman web slide fotoPOPs adalah sebagai berikut :

1. Klik menu [Galeri POPs] untuk membuka sub menu di dalamnya.2. Klik sub menu [Slide Foto POPs] untuk membuka halaman web Galeri Foto

Bahaya dan Dampak POPs Terhadap Lingkungan dan Kesehatan.3. Arahkan mouse cursor tepat di atas salah satu foto berjalan / bergerak dari arah

kanan ke kiri. Gambar foto yang tepat berada di bawah mouse cursor tersebutakan muncul di bawah tampilan halaman web tersebut.

Gambar 173. Halaman Web Slide Foto POPs

- 105 -

5.1.5.2. Sub Menu Video Klip Edukasi

Langkah-langkah untuk menampilkan dan mengoperasikan halaman web Video KlipEdukasi POPs adalah sebagai berikut :

1. Klik menu [Galeri POPs] untuk membuka sub menu di dalamnya.

2. Klik sub menu [Video Klip Edukasi] untuk membuka halaman web Galeri VideoUntuk Pendidikan POPs.

3. Klik salah satu gambar yang mewakili judul video klip pada bagian atas tampilanhalaman webnya.

4. Klik ikon Play yang berada di tengah tampilan video klip untuk memutar videoatau memberhentikannya (pause).

5. Gunakan video player console seperti gambar di bawah ini untuk menavigasikanpemutaran vide klipnya,

Gambar 174. Video Player Console

Gambar berikut ini adalah contoh tampilan halaman web video klip edukasi POPs.

Gambar 175. Halaman Web Video Klip Edukasi

Agar dapat diputar dalam web browser, beberapa web browser memerlukan pluginadobe flash player. Pastikan web browser yang digunakan telah memiliki plugin adobeflash player tersebut. Paket plugin tersebut dapat diunduh dari situs resmi adobe, yaitu :http://www.adobe.com/support/flashplayer/downloads.html

- 106 -

5.1.5.3. Sub Menu Iptek Untuk Kita

Langkah-langkah untuk menampilkan dan mengoperasikan halaman web IptekUntuk Kita adalah sebagai berikut :

1. Klik menu [Galeri POPs] untuk membuka sub menu di dalamnya.

2. Klik sub menu [Iptek Untuk Kita] untuk membuka halaman web Galeri IPTEKseperti gambar di bawah ini.

Gambar 176. Halaman Web Galeri IPTEK

Beberapa judul iptek sederhana yang disediakan dalam sub menu Iptek UntukKita adalah sebagai berikut :

POPs Dioxin ada di Pembalut Wanita

Pembuatan Pestisida Organik atau Bio-PestisidaMembuat Bio-Starter Dengan Bahan LokalEndosulfan dan Ancamannya

Pedoman Pengganti Senyawa POPs

Lembar Data Keselamatan Bahan / Material Safety Data Sheet (MSDS)

Azadiractin (C35H44O16) Sebagai Alternatif Pengganti DDT

3. Pilih salah satu judul iptek sederhana dari daftar yang ada dengan menekantombol mouse tepat di atas gambar yang mewakili judul iptek sederhana tersebut.Gambar di bawah ini adalah salah satu contoh halaman web iptek sederhanayang berjudul ‘POPs Dioxin ada di Pembalut Wanita’.

- 107 -

Gambar 177. Halaman Web Iptek Sederhana

4. Gunakan horizontal scrollbar dan vertical scrollbar untuk menampilkan halamanweb yang tidak terlihat di layar monitor.

5.1.6. Menu Regulasi

Pada menu regulasi, pengguna dapat membuka dokumentasi beberapa regulasiatau peraturan perundangan yang berhubungan dengan POPs dan B3. Beberapaperaturan perundangan yang disajikan dalam halaman web regulasi, yaitu :

PP. R.I. No. 74 Tahun 2001 Tentang Pengelolaan Bahan Berbahaya dan Beracun National Implementation Plan on Elimination and Reduction of Persistent Organic

ollutants in Indonesia (July 2008) Stockholm Convention on Persistent Organic Pollutants (POPs) 2009 UU No. 19 Tahun 2009 Tentang Pengesahan Konvensi Stockholm Tentang Bahan

Pencemar Organik Yang Persisten The 9 New POPs - An introduction to the nine chemicals added to the Stockholm

Convention by the Conference of the Parties at its fourth meeting (August 2010) Guidance for a Global Monitoring Programme for POPs Guidance for the inventory of polybrominated diphenyl ethers (PBDEs) listed under

the Stockholm Convention on Persistent Organic Pollutants.

- 108 -

Klik salah satu judul peraturan perundangan yang ada atau ikon di belakangjudul tersebut dari dalam regulasi untuk menampilkannya ke layar monitor. Selain itu padabagian bawah halaman web ini, juga terdapat alamat link yang menuju situs resmiKementerian Hukum dan Hak Azasi Manusia Republik Indonesia.

Gambar 178. Tampilan Halaman Web Regulasi POPs

Gambar 179. Contoh Tampilan Dokumentasi Regulasi NIP POPs

- 109 -

5.1.7. Menu Web Link

Halaman web link berisi daftar beberapa alamat web situs lain yang memberikaninformasi mengenai POPs baik yang ada di Indonesia maupun di luar negeri. Beberapanama situs yang terdapat dalam halaman web link ini adalah sebagai berikut.

EPA – US EPA – Persitent Organic Pollutants : A global issue, a global response(Bahasa Indonesia )

European Commission Environment – POPs (Bahasa Indonesia ) UNECE – United Nations Economic Commission for Europe – Protocol on POPs

(Bahasa Indonesia ) GreenPeace International – What are Persitent Organic Pollutants ? (Bahasa

Indonesia ) World Health Organization – Food Safety Persitent Organic Pollutants / POPs

(Bahasa Indonesia ) Warehouse of Persistent Organic Pollutants in East Asia Countries (Bahasa

Indonesia ) Persistent Organic Polutants Tool Kit (Bahasa Indonesia ) UNEP - Persistent Organic Polutants (Bahasa Indonesia ) Rotterdam Convention (Bahasa Indonesia ) Pusarpedal Kementerian Lingkungan Hidup Wikipedia POPs

Gambar 180. Halaman Web Links POPs

Untuk menuju halaman web situs yang dituju, klik salah satu nama situsnya atau klikgambar ikon bendera merah putih untuk menyajikan informasi situs yang dituju dalambahasa Indonesia.

- 110 -

Gambar-gambar berikut ini adalah contoh tampilan halaman web situs EPA tentang POPsdalam bahasa Inggris dan bahasa Indonesia.

Gambar 181. Halaman Web Situs EPA Dalam Bahasa Inggris

Gambar 182. Halaman Web Situs EPA Dalam Bahasa Indonesia

- 111 -

5.2. Pendaftaran Username dan Password Pengelola Database

Karena kegiatan pendaftaran kode login dan kata kunci untuk pengelolaan databasetidak terlalu sering dilakukan dan tidak diperlukan mendaftarkan banyak pengguna, makapada aplikasi web SIPOP ini tidak disediakan program/frontend khusus untuk melakukanregistrasi pengguna. Penambahan, penghapusan atau penyuntingan kode login dan katakunci pengguna sebagai pengelola database dilakukan secara manual denganmenyunting langsung file password aplikasi ini menggunakan program notepad.exe.

Berikut ini adalah langkah-langkah untuk melakukan pendaftaran kode login dankata kunci pengguna baru :

1. Buka program notepad.exe dengan mengklik Menu Start All Programs Accessories Notepad

2. Dapat juga dengan mengklik Menu Start Run atau Menu Start AllPrograms Accessories Run, kemudian ketikkan ‘notepad’ lalu klik tombol[OK].

Gambar 183. Menjalankan Program Notepad Dari Run Prompt

3. Setelah program notepad tampil di layar monitor, klik menu File Open untukmembuka file password dalam aplikasi web SIPOP yang berada di dalam direktori/ folder c:\xampp\htdocs\SIPOP

Gambar 184. Program Aplikasi Notepad

- 112 -

4. Klik drive (C:) folder xampp folder htdocs folder SIPOP folderDBPopsB3 untuk membuka file password database POPs dan B3.

5. Klik drive (C:) folder xampp folder htdocs folder SIPOP folderDBTeknologi untuk membuka file password database Teknologi.

6. Ubah file type dari Text Documents (*.txt) menjadi All Files (*.*)7. Pilih file dbpwdfile.js lalu tekan tombol [Open].

Gambar 185. Membuka File Password ‘dbpwdfile.js’

8. Perhatikan baris yang memiliki kata ‘username’ dan ‘password’ dalam filedbpwdfile.js seperti pada gambar di bawah ini.

Gambar 186. Menyunting File Password ‘dbpwdfile.js’ Dengan Notepad

9. Untuk menyuntingya, klik langsung pada baris yang dimaksud, ubah atau hapususername dan password yang diinginkan.

10. Untuk menambahnya blok satu baris, lalu copy dan sisipkan (paste) ke barisberikutnya. Ketikkan juga username dan password yang diinginkan.

11. Jika telah selesai simpan perubahannya dengan mengklik menu File Save, laluklik menu File Exit untuk menutup program notepad.

- 113 -

5.3. Editing Konten Aplikasi Web SIPOP

Konten aplikasi web SIPOP sebagian besar adalah dokumen hypertext (HTML)yang dikembangkan menggunakan aplikasi Microsoft Office Prontpage. Jika diperlukanpengguna dapat memodifikasi isi dari konten aplikasi web SIPOP. Berikut ini adalahlangkah-langkah yang dapat dilakukan untuk menyunting file hypertext dalam aplikasi webSIPOP.

1. Pastikan Program Microsoft Office Frontpage telah terinstalasi dalam komputer.Jika belum ada, program tersebut diinstalasikan menggunakan cdrom MicrosoftOffice Profesional. Paket cdrom Microsoft Office Profesional adalah terpisahdari paket cdrom aplikasi web SIPOP.

2. Selanjutnya klik ikon [Start] [Program] [Microsoft Office] [MicrosoftOffice Prontpage 2003] seperti pada gambar di bawah ini.

Gambar 187. Menu Untuk MenjalankanProgram Aplikasi Microsoft Office Frontpage

3. Setelah program aplikasi Microsoft Office Prontpage muncul di layar monitor,klik menu [File] [Open] seperti gambar di bawah ini.

Gambar 188. Menu Open File Untuk Membuka Dokumen Hypertext

- 114 -

4. Buka lokasi direktori instalasi aplikasi web SIPOP di c:\xampp\htdocs\SIPOPdengan mengklik pulldown menu yang ada tanda panah ke bawah [] sepertipada gambar berikut.

Gambar 189. Menu Membuka Dokumen HypertextPada Direktori Aplikasi Web SIPOP

5. Pilih salah satu file yang akan disunting, maka dokumen akan dibuka olehaplikasi Microsoft Office Prontpage dan tampil di layar monitor. Jika inginmembuat dokumen hypertext baru, simpan nama file dokumen hypertexttersebut di dalam folder c:\xampp\htdocs\SIPOP juga agar dapat diaksessecara online.

Gambar 190. Editing Konten Aplikasi Web SIPOPDengan Microsoft Office Frontpage

- 115 -

Pada program aplikasi Microsoft Office Frontpage dokumen hypertext dapatditampilkan dalam 4 mode, yaitu :

Mode Design untuk menyunting dokumen hypertext. Mode Split membagi window Microsoft Office Frontpage menjadi dua bagian, yaitu

bagian atas untuk menampilkan kode sumber (source code) HTML dan bagianbawah untuk menampilkan disain layar.

Mode Code untuk menampilkan kode sumber (source code) HTML dokumenhypertext ke layar monitor.

Mode Preview untuk menampilkan layout tampilan akhir dokumen hypertext jikadibaca melalui program aplikasi web browser.

Petunjuk lebih detail penggunaan program aplikasi Microsoft Office Frontpage inidapat dilihat pada menu [Help] dalam aplikasi ini. Selain itu untuk lebih memudahkanproses editing konten aplikasi web SIPOP disarankan pengguna telah menguasaipemrograman HTML untuk pembuatan dokumen hypertext. Tutorial pemrograman HTMLdapat diunduh juga secara gratis dari jaringan internet. Secara garis besar dokumenhypertext tersusun dalam format dimana setiap isi dokumen berada di dalam tagpembuka <TAG> dan selalu diakhiri dengan tag penutup </TAG> seperti contoh di bawahini.

<HTML><HEAD>

<TITLE> …………. </TITLE></HEAD>

<BODY>……………………..……………………..</BODY>

</HTML>

Gambar 191. Mode Code Pada Editing Konten Aplikasi Web SIPOP

- 116 -

5.4. Mencetak Tampilan Layar

Untuk mulai mencetak dokumen yang sudah tampil di layar monitor, dapat dilakukandengan cara sebagai berikut :

1. Siapkan kertas ukuran A4 pada printer.2. Klik menu print pada web browser. Contoh di bawah ini menggunakan web

browser firefox, maka klik menu [Firefox] [Print] [Print Preview]

Gambar 192. Menu Mencetak Pada Web Browser Firefox

3. Klik menu [Print] untuk langsung mencetak ke printer atau klik menu [PageSetup] untuk mengkonfigurasi layout tampilkan di kertas. Menu [Page] digunakanuntuk memilih halaman yang akan dicetak. Menu [Scale] digunakan untukmemperbesar atau memperkecil skala tampilkan. Klik menu [Portrait] atau[Landscape] untuk mengubah orientasi pencetakan secara vertikal atauhorizontal. Klik menu [Close] untuk selesai dari menu mencetak.

Gambar 193. Modifikasi Layout Saat Mencetak

- 117 -

4. Pada menu [Page Setup] terdapat dua tab control, yaitu Format & Options danMargins & Header/Footer untuk mengubah layout hasil pencetakan.

Gambar 194. Menu Tab Control Format & Options dan Margins & Header/Footer

5. Pada menu [Print] ditampilkan beberapa pilihan printer yang terhubung dengankomputer. Pilihlah nama printer sesuai dengan yang terhubung ke komputer. Klikmenu [Properties] untuk memilih jenis kertas dan ukuran kertasnya.

Gambar 195. Menu Perubahan Jenis Printer

6. Klik tombol [OK] untuk mulai mencetak ke printer.