Memasang Jmol di Website

Post Views: 37

Langkah memasang Jmol pada web host sendiri

1. Download paket Jmol, akses ke http://repo.unnes.ac.id/freeware/zip/Jmol.zip atau http://jmol.sourceforge.net/download/. Bisa juga menggunakan Jsmol, Jmol berbasis javascript. Download http://repo.unnes.ac.id/freeware/zip/Jmol-14.2.9_2014.11.23-binary.zip

2. Kemudian upload paket Jmol itu di folder tertentu pada webhost, gunakan cPanel atau FileZilla atau SSH untuk transfer ke webhost sendiri. Sebagai contoh pada webhost saya paket Jmol dipasang di

http://kimia.unnes.ac.id/kasmui/komputasi/jmol/

3. Harus diingat!!!!! Jmol dibuat dari Java, karena itu browser yang kita pakai harus tidak memblokir Java termasuk applet-nya. Silahkan akses ke www.java.com untuk update java. “the Jmol web browser applet may run on most browser Java Virtual Machines”. Jika java disabled maka akan muncul peringatan:

“You do not have Java applets enabled in your web browser, or your browser is blocking this applet. Check the warning message from your browser and/or enable Java applets in your web browser preferences, or install the Java Runtime Environment from www.java.com”

Sebagai contoh buatlah file html seperti dibawah ini. Misal simpan dengan nama jmol.htm, lalu upload file itu ke website sendiri dan coba akses melalui browser.

<html>
<head>
    <title>Jmol</title>
    <link href="http://kasmui.com/gb/fav.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="http://kimia.unnes.ac.id/kasmui/komputasi/jmol/Jmol.js"></script> <!-- REQUIRED -->

    <style type="text/css">
    <!--
    .style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    }
    -->
    </style>

</head>

<body>
    <table align="center" width="100%" border="0">
        <tr>
            <td>
                <form class="style1">
                    <div align="center">
                        <script>
                            jmolInitialize("jmol");
                            jmolSetAppletColor("white");
                            jmolApplet(450, "load http://kimia.unnes.ac.id/kasmui/komputasi/jmol/heme.mol;cpk 25%; wireframe .15; dots on; spin on; move 0 0 0 60 0 0 0 0 5; zoom 100");
                        </script>
                    </div>
                </form>
            </td>
        </tr>
    </table>
</body>

</html>

CATATAN:

1) Pada bagian Head pasangkan script untuk memanggil Jmol.js dari folder tempat menyimpan paket Jmol. Perhatikan script berikut:

<script src="http://kimia.unnes.ac.id/kasmui/komputasi/jmol/Jmol.js"></script>

2) Memasang form untuk menjalankan jmol pada bagian Body seperti berikut:

<form class="style1">
    <div align="center">
        <script>
            jmolInitialize("jmol");
            jmolSetAppletColor("white"); //warna background
            jmolApplet(450, "load http://kimia.unnes.ac.id/kasmui/komputasi/jmol/heme.mol;cpk 25%; wireframe .15; dots on; spin on; move 0 0 0 60 0 0 0 0 5; zoom 100");
        </script>
    </div>
</form>

Perhatikan pada script berikut:

jmolApplet(450, "load http://kimia.unnes.ac.id/kasmui/komputasi/jmol/heme.mol;cpk 25%; wireframe .15; dots on; spin on; move 0 0 0 60 0 0 0 0 5; zoom 100");

digunakan untuk menjalankan applet Jmol dengan width=450 untuk file heme.mol yang tersimpan di folder

http://kimia.unnes.ac.id/kasmui/komputasi/jmol/

dengan format tampilan CPK dan besarnya 25%, dots-nya On, spin On serta zoom 100. Kalau tidak mudeng silahkan baca link-link yang ada di bagian referensi.

Hasilnya silahkan klik di link berikut: http://kimia.unnes.ac.id/kasmui/komputasi/jmol.html.

Tampak seperti di bawah ini. Gunakan klik mouse kiri untuk navigasi dan klik mouse kanan untuk membuka menu. Silahkan dieksplorasi.

Memasang Jmol pada WordPress/blogger atau bukan webhost sendiri

Ini cara paling mudah, karena menggunakan paket Jmol dari link lain, tetapi tentu ada keterbatasan. Silahkan pelajari dari link http://wiki.jmol.org/index.php/Jmol_PHP.

Langkah pemasangannya:

1. Sebagai contoh, buatlah New Post pada halaman baru WordPress atau Blogger.

2. Sebagai contoh masukkan script berikut:

<html>
<body>

<script type="text/javascript"
src="http://chemapps.stolaf.edu/jmol/jmol.php?model=acetone&inline">
</script>

</body>
</html>

Nama molekul (model) dapat dilihat pada link http://www.pdb.org/ dan http://cactus.nci.nih.gov/chemical/structure

3. Simpan dan lihat hasilnya pada halaman WordPress.

4. Insya Allah muncul, kalau tidak berarti tergantung amalnya.

Lihat hasilnya dengan klik link berikut: http://kimia.unnes.ac.id/kasmui/komputasi/jmol/acetone.htm. Lihat gambar di bawah ini.

Memasang Jmol Melalui Iframe

Apabila browser kita ternyata memblokir java applet dan kita tidak mengubahnya maka akan kesulitan menampilkan Jmol, tetapi sebenarnya masih bisa dengan teknik <iframe>.

Kali ini kita akan gunakan link Jmol/Jsmol dari ChemSpider, caranya adalah

1. Buka browser tertentu

2. Copy-kan pada link browser teks berikut: http://www.chemspider.com/ImageView.aspx?id=10000&mode=3d. Keterangannya, id adalah nomor id molekul yang dapat diperoleh dari database PDB mulai id = 1 s/d 100.000.000 lebih, mode = 3d (tampilan 3 dimensi) atau 2d (tampilan 2 dimensi). Sebenarnya dengan cara inipun sudah dapat menjalankan Jmol pada browser kita. Tapi jika kita ingin menampilkan pada halaman WordPress atau blogger misalnya maka kita dapat menggunakan teknik iframe. Caranya pada langkah nomer 3 di bawah ini.

3. Buka halaman/post baru pada WordPress/Blogger

4. Ketikkan script berikut:

<iframe src=”http://www.chemspider.com/ImageView.aspx?id=10000&mode=3d” width=”520″ height=”600″></iframe>

5. Simpan dan jalankan hasilnya.

Hasilnya seperti di bawah ini

Referensi:

Tinggalkan Balasan Batalkan balasan