Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Application Cache (Offline Web) Dengan HTML5

HTML5 mempunyai banyak sekali fitur terbaru dibanding HTML versi sebelumnya. Fitur HTML5 terbaru kali ini yang akan saya tulis adalah “Application Cache”. Apakah anda sudah mencoba teknologi Application Cache ? HTML5 Application Cache memberikan keleluasaan pada Web Developer untuk menyimpan data situsnya pada client. Jadi ketika client offline sekalipun, situs masih tetap bisa dibuka.

Teknologi Application Cache sebenarnya sudah diterapkan pada beberapa browser modern, diantaranya adalah Safari, Chrome, Firefox, & Opera. Application Cache akan menyimpan data-data yang dikehendaki oleh Web Developer untuk disimpan pada Client, jadi meskipun Client tidak terhubung ke Internet, Client masih bisa membuka situsnya. Anda bisa membuka demonya dibawah ini.

Demo Application Cache   Download Source

Untuk cara pembuatan website application cache tersebut, saya akan tulis disini. Namun untuk penerapannya, anda harus upload ke web hosting atau menggunakan web server lokal seperti XAMPP, PHPTriad, WAMP, & sebagainya.

Langkah pertama, Buatlah file html sederhana pada Web Server anda & sisipkanlah sebuah gambar. Anda dapat menyalin kode dibawah ini & simpan dengan nama application-cache.html.

<!DOCTYPE html>
<html manifest="test.appcache">
<head>
<title>HTML5 Application Cache</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="script/waktu.js" type="text/javascript"></script>
</head>
<body>
<article class="utama">
<h1>Demo : Application Cache</h1>
<p id="waktu"><button onclick="getDateTime()">Get Date and Time</button></p>
<figure><img src="image/gambar.jpg" alt="Test Gambar" width="300" /></figure>
<p><a href="http://www.nurulimam.com/2013/11/application-cache-offline-web-dengan-html5.html">Kembali ke Tutorial HTML5 Application Cache</a></p>
</article>
</body>
</html>

Simpan file tersebut kedalam folder / direktori web server anda. Jika anda menggunakan XAMPP, masuk ke folder htdocs dalam folder XAMPP anda. Buatlah folder baru dengan nama html5. Simpan file application-cache.html beserta seluruh file yang berhubungan seperti gambar pada folder ini.

Kemudian coba anda buka file tadi dengan mengetikkan alamat http://localhost/html5/application-cache.html, Maka akan tampil seperti gambar dibawah ini.

HTML5 Application Cache

Jika kita tidak menambahkan fitur Application Cache, maka ketika Web Server kita dinonaktifkan, anda tidak dapat lagi mengakses alamat tersebut. Namun, jika anda menambahkan Fitur Application Cache, anda dapat membuka halaman tersebut meskipun anda sedang offline / Web server anda dinonaktifkan. Maka dari itu, Bualtah file dengan nama site.manifest & isikan dengan kode dibawah ini.

CACHE MANIFEST
# V.0.0.1
application-cache.html

# Tambahan Konten yang akan di caching
CACHE:
css/style.css
image/gambar.jpg
script/waktu.js

# Konten yang akan ditampilkan jika Online
NETWORK:
index.html

# offline.html akan nampak ketika offline
FALLBACK:
index.html offline.html

Langkah Terakhir, buatlah file .htaccess dan tambahkan code berikut.

AddType text/cache-manifest manifest

Setelah semua file berhasil dibuat, Aktifkan kembali Apache Server anda & buka kembali halaman tadi dengan mengakses http://localhost/html5/application-cache.html. Untuk mengecek apakah proses Caching berhasil, jika anda pengguna Mozilla Firefox, Klik kanan pada halaman tersebut & pilih Inspect Element, lalu aktifkan tab Console. Disana akan tertulis file-file yang berhasil di caching.

Sekarang nonaktifkan Apache Server & buka kembali alamat tersebut. Meskipun server telah dimatikan anda tetap dapat mengakses halaman tersebut secara offline karena sudah di caching pada web browser anda. Demikianlah tulisan tentang Fitur HTML5 – Application Cache. Selanjutnya saya akan menuliskan tentang Fitur-fitur HTML5 & Fitur-fitur CSS3 yang lainnya.

5 Comments

  1. AgriReply

    owh bisa kyk gini ya mas,, saya main aplikasi ini hanya utk iseng2 aja haha,, paling beli bukunya trs nyoba2 buat server offline aja.. taunya bsa kyk gini.. :D

    • Nurul ImamReply

      Iseng-iseng berhadiah gitu yah :D

  2. arsitektur rumahReply

    bagus gan udah nyoba (Y)
    tapi sayang kapasitasnya terbatas

    • Nurul ImamReply

      Hehehe masih jarang juga yang pake fitur ini mas :D

  3. GabgabReply

    Ijij Sedot

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>