Teknik Menampilkan Dokumen Office di Web

Browser adalah teman kita berinternet sehari hari. Hampir semua yang kita lakukan di internet hanya mengandalkan satu program yaitu browser. Sebut saja baca Berita, Kirim email, Banking, Nonton Video, Chating dan transaksi online bisa dilakukannya. Namun ada hal penting yang tidak bisa dilakukan oleh browser yaitu menampilkan dokumen Office seperti Docx atau xlsx.

Jika kita menerima email, biasanya kita mendownload dulu attachmentnya baru dibuka dikomputer kita.Itu baru masalah bagi user, Bagaimana jika anda adalah programmer yang akan membuat elearning, elibrary atau sekedar menampilkan documen office di web tanpa harus mendownloadnya dan bisa tampil dengan sempurna di sembarang browser?

Yup, itulah yang akan kita bahas. Teknik yang saya ajarkan adalah menggunakan layanan Google Doc Viewer. Dengan menggunakan layanan tersebut, kita bisa membuka dokumen office disembarang browser. Letak File yang akan dibuka pun bisa diletakan diwebsite mana saja. Gunakan layanan Google Doc Viewer solusinya.

Snipet code

Berikut ini adalah contoh script untuk menampilkan dokument berbasis web dengan google doc viewer.

<iframe src="http://docs.google.com/viewer?
url=www.deakin.edu.au/help-wireless-android.pdf
&embedded=true" width="600" 
height="780" 
style="border: none;"></iframe>

Untuk dokumen lain caranya sama, cuma baris kedua saja yang harus diganti. Misalkan kita punya dokumen word di http://www.candra.web.id/demo/laporan.docx maka code diatas menjadi

<iframe src="http://docs.google.com/viewer?
url=http://www.candra.web.id/demo/laporan.docx
&embedded=true" width="600" 
height="780" 
style="border: none;"></iframe>

Gampangkan. Jika teknik ini digabungkan dengan PHP dan website digital library atau elearning, tentunya akan sangat bermanfaat. Hal yang perlu diperhatikan, karena cara ini menggunakan layanan viewer dari google, anda harus tetap terkoneksi internet walaupun website dipasang di intranet atau localhost.

Namun bagi anda yang sekedar ingin melihat isi sebuah dokumen diwebsite tanpa harus membuat scriptnya, silahkan gunakan Google doc viewer di https://docs.google.com/viewer . Halaman ini akan menghasilkan code secara otomatis, anda cukup memasukan alamat dokumennya lalu klik generate dan langkah terakhir adalah klik link “To view now Click here”.

Google Doc Viewer
Google Doc Viewer

Dokumen yang didukung

Document Viewer medukung puluhan format file. Berikut ini adalah format yang didukung oleh viewer ini.

  1. Google Docs
  2. Google Sheets
  3. Google Slides
  4. Google Forms
  5. Google Drawings
  6. Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
  7. Raw Image formats
  8. Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV, .ogg)
  9. Microsoft Word (.DOC and .DOCX)
  10. Microsoft Excel (.XLS and .XLSX)
  11. Microsoft PowerPoint (.PPT and .PPTX)
  12. Adobe Portable Document Format (.PDF)
  13. Tagged Image File Format (.TIFF)
  14. Scalable Vector Graphics (.SVG)
  15. PostScript (.EPS, .PS)
  16. TrueType (.TTF)
  17. XML Paper Specification (.XPS)

Demonya dong?

Silahkan coba demonya di disini

Membuat Website Multibahasa dengan PHP

Website adalah layanan yang memberikan informasi. Sayangnya karena banyaknya bahasa di dunia, informasi yang diberikan kadang tidak bisa dipahami oleh sebagian pengunjung yang menggunaka bahasa berbeda. Salah satu cara mengatasi permasalahan tersebut adalah dengan membuat website yang mendukung banyak bahasa. Cara ini bisa menggunakan Google translate atau dibuat sendiri dengan PHP. Saya sendiri lebih memilih mengguankan php, alasan utama kenapa tidak menggunakan Google Translate adalah kemampuan translatenya amburadul, kadang tidak bisa dipahami dan kadang malah mengubah makna dari informasi aslinya.

Sekenario

Dalam contoh ini, kita akan membuat website informasi tentang Anime jepang yang terdiri dari 3 bahasa (arab,indonesia,jepang) dan 3 halaman tentang Dragonball, Bleach dan Naruto. saat pertama kali membuka halaman, maka secara default, user akan dibawa ke halaman bahasa indonesia dengan artikel Dragnball. Jika user mengklik link informasi bleach dan naruto, informasi yang muncul juga berbahasa indonesia. Jika kita ingin membaca versi jepangnya, cukup klik bendera jepang dan secara otomatis link dan isi informasinya menggunakan bahasa jepang. Teknik yang kita gunakan menggunakan Session/Cokie dan Array PHP. Cookie disini digunakan untuk menyimpan seting user dibrowser. Jadi misalkan user memilih bahasa arab, lalu menutup halama web kita, kemudian user membuka halaman tersebut di Tab browser yang berbeda,maka secara otomatis halaman bahasa arablah yang akan muncul, kerenkan?

Berikut ini adalah tampilan website demonya
multibahasa

Struktur Direktori Project

berikut ini adalah struktur direktori dari project website multibahasa.

Stuktur direktori
Stuktur direktori
Secara ringkas berikut ini adalah penjelasannya
Assets
Folder aset berisi CSS dan Gambar serta icon bendera untuk masing masing bahasa
bahasa
Berisi judul dan isi artikel sesuai dengan bahasanya. misal lang.id.php berisi artikel dalam bahasa indonesia. berikut ini adalah potongan isi dari file lang.id.php

$lang = array();

$lang['TITLE_BLEACH'] = 'Bleach';
$lang['TITLE_DBZ'] = 'Dragon Ball';
$lang['TITLE_NARUTO'] = 'Naruto';

Untuk lang.ar.php dan lang.jp.php nama array dan variabelnya sama, hanya isinya yang berbeda. Untuk lebih jelas lihat di sourcecodenya.
seting.php

Berisi code untuk menset cokies di user agar seting bahasa tersimpan dibrowser. Bahasa default adalah indonesia

<?php
session_start();
header('Cache-control: private');
// IE 6 FIX
if (isSet($_GET['lang'])) {
	$lang = $_GET['lang'];

	// register the session and set the cookie
	$_SESSION['lang'] = $lang;

	setcookie("lang", $lang, time() + (3600 * 24 * 30));
} else if (isSet($_SESSION['lang'])) {
	$lang = $_SESSION['lang'];
} else if (isSet($_COOKIE['lang'])) {
	$lang = $_COOKIE['lang'];
} else {
	$lang = 'id';
}

switch ($lang) {
	case 'jp' :
		$lang_file = 'lang.jp.php';
		break;
		case 'ar' :
		$lang_file = 'lang.ar.php';
		break;
	case 'id' :
		$lang_file = 'lang.id.php';
		break;

	default :
		$lang_file = 'lang.id.php';
}

include_once 'bahasa/' . $lang_file;
?>

index.php
file utama untuk menampilkan informasi sesuai bahasa yang dipilih.

$content = '';
				
			if (!isset($_GET['pg'])) {
				$content = 'DBZ';
				$title = $lang['TITLE_DBZ'];
				$isi = $lang['CONTENT_DBZ'];
			} else {
				$content = strtoupper($_GET['pg']);
				$titleheader = "TITLE_" . $content;
				$isicontent= "CONTENT_" . $content;
			
				$title = $lang[$titleheader];
				$isi = $lang[$isicontent];

			}

Demo dan source code

seperti biasa,anda bisa mendownload source codenya disini dan mencoba demonya disini