Laboratorium Kimia Komputasi Gedung D8 Lantai 3 +62818294312 kasmui@mail.unnes.ac.id

Aplikasi Kimia Berbasis HTML dan javascript

Dalam era revolusi industri 4.0 seorang guru wajib menyediakan berbagai konten pembelajaran berbasis digital online, karena itu perlu sedikit pemahaman tentang bahasa pemrograman web. Bahasa pemrograman web standar yang mudah diantaranya adalah HTML, dan untuk menambah interaktifitas maka dapat ditambah javascript.

Berikut ini script HTML dan javascript untuk aplikasi online yang contohnya dapat diakses di http://blogchem.com/kasmui/concentration.htm

Langkah-langkahnya:

  1. Akses link http://blogchem.com/kasmui/concentration.htm
  2. Setelah terbuka, klik kanan pada page terbuka, lalu pilih View page source
  3. Blok dan copy semua script pada langkah 2, dan simpan dengan nama file htm,
  4. Upload file htm nomor 3 di atas ke folder tertentu di ruang hosting anda (server), contoh http://blogchem.com/kasmui/concentration.htm
  5. Akses melalui browser dengan alamat dan nama file htm yang benar dan lengkap
  6. Jika ingin modifikasi, silahkan akses http://blogchem.com/jmol/jsmol/viewsolution.json, lalu download dan modifikasi, dan hasilnya upload ke folder yang sama dengan file di atas.
  7. Silahkan kembangkan untuk materi lain, kumpulkan, dan jadikah paket aplikasi kimia online.
  8. Ebook online pemrograman HTML + Javascript dapat didownload melalui link http://repo.unnes.ac.id/dokumen/HTML_and_JavaScript.pdf.
  9. Selamat berkarya.

Berikut skrip lengkapnya untuk penghitungan konsentrasi larutan (concentration.htm):

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta description=””>
<title>Kalkulator Larutan</title>
<script src=”http://blogchem.com/jmol/jsmol/jquery.min.js”></script>
<script src=”http://blogchem.com/jmol/jsmol/URI.min.js”></script>
</head>
<body>
<div class=”general”>
<H1>KALKULATOR LARUTAN</H1>
</div>
<script>
‘use strict’;
function checkVersion(versions, version) {
versions = versions.map(function(v) {
return v.toLowerCase();
});
version = version.toLowerCase();
if (version && version[0] >= ‘0’ && version[0] <= ‘9’ && !version.startsWith(‘v’)) version = ‘v’ + version;
var idx = versions.indexOf(version);
if (idx > -1) {
version = versions[idx];
}
else {
// Fallback version is HEAD-min
version = ‘HEAD-min’;
}
if(version === ‘head-min’) version = ‘HEAD-min’;
return version;
}
window.onload = function () {
var prom;
// Weird but will avoid javascript error if this param is not what we expect

prom = $.getJSON(‘http://blogchem.com/jmol/jsmol/versions.json’);

prom.then(function (versions) {
var version;
var uri = new URI(window.location.href);
var search = uri.search(true);
var url = ‘http://blogchem.com/jmol/jsmol/view.json?rev=1-33ebe666dd073aba50457447126a7814’;
var tplVersion = ‘v2.26.3’;
var fallbackVersion = ‘v2.26.3’;
if (search.viewURL) {
url = search.viewURL;
}
// Get version in the following priority order
// In url, in template, fallback
if (search.v) {
version = checkVersion(versions, search.v);
}
if (!version) {
version = checkVersion(versions, tplVersion);
}
if (!version) {
version = checkVersion(versions, fallbackVersion);
}
if (!search.loadversion)
addVisualizer(version, search);
else {
$.ajax({
url: url,
dataType: ‘json’,
type: ‘GET’,
success: function (data) {
addVisualizer(checkVersion(versions, data.version), search);
},
error: function (err) {
console.log(‘error’, err);
}
})
}
});

function addVisualizer(version, search) {
var cdn = ‘https://www.lactame.com’;
var direct = ‘http://direct.lactame.com’;
var visualizer = document.createElement(‘script’);
var baseUrl;
baseUrl = (search.direct ? direct : cdn) + ‘/visualizer/’ + version;

visualizer.setAttribute(‘data-main’, baseUrl+ ‘/init’);
visualizer.setAttribute(‘src’, baseUrl + ‘/components/requirejs/require.js’);
document.head.appendChild(visualizer);
}
}
</script>
<div id=”errorMessage”></div>
<table>
<tr>
<td class=”left”></td>
<td colspan=”3″>
<div id=”ci-visualizer” data-ci-view=”http://blogchem.com/jmol/jsmol/viewsolution.json”
data-ci-config=”http://blogchem.com/jmol/jsmol/readConfig.json”/>
</td>
<td class=”right”></td>
</tr>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div align=”center”>
<a href=”http://blogchem.com/jmol/jsmol/2d3d.htm” title=”Convert 2D to 3D”><button>Konversi 2D – 3D</button></a>&nbsp;&nbsp;<a href=”http://blogchem.com/jmol/jsmol/name2struc.htm” title=”Convert name to structure”><button>Name to Structure</button></a>&nbsp;&nbsp;<a href=”http://blogchem.com/jmol/jsmol/msds.htm” title=”Convert 2D to 3D”><button>Mencari MSDS</button></a>&nbsp;&nbsp;<a href=”http://blogchem.com/jmol/jsmol/cheminfo.htm” title=”Generate chemistry infomations”><button>Chemistry Information</button></a>
<br/><br/>
</div>
<br/><br/>
<div align=”center”>
<small>Copyright &copy; Blogchem.com, 2019.
</div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Read previous post:
Chemissian

Chemissian is an analyzing tool of molecules electronic structure and spectra. It can manipulate molecular...

Close