Category Archives: Web

Paste Range Data dari Excel ke Form HTML Menggunakan Javascript

Beberapa hari ini saya sedang membuat sebuah program web untuk mengetahui klasifikasi jenis tanah dengan parameter yang telah ditentukan. Input nilai parameter tanah yang bisa dimasukkan berjumlah 10, seperti terlihat pada gambar di bawah ini. Namun, owner meminta agar data dari excel bisa dicopy dengan cepat ke dalam form HTML. Data di dalam excel dikelompokkan menjadi sebuah tabel beraturan kemudian dipilih untuk selanjutnya disalin ke dalam clipboard (Ctrl+C). Pekerjaan utamanya adalah bagaimana agar ketika user memasukkan range nilai tersebut pada input pertama, maka javascript secara otomatis akan memecah nilai-nilai tadi dan memasukkannya ke dalam input lain yang bernilai nol.

Form HTML dengan banyak input
Form HTML dengan banyak input
Data dari Spreadsheet
Data dari Spreadsheet
Range data dari excel dimasukkan ke dalam input pertama (Fine #200)
Range data dari excel dimasukkan ke dalam input pertama (Fine #200)
Data akan secara otomatis menempati input lainnya.
Data akan secara otomatis menempati input lainnya.

Potongan kode di bawah ini adalah salah satu cara untuk menyelesaikan kasus di atas. Tentu saja potongan kode ini harus dimodifikasi sesuai dengan format range data yang akan disalin dan urutan serta letak elemen input HTML tersebut. Prinsipnya, sebuah kolom dengan kolom lain pada spreadsheet akan dipisahkan oleh tabulasi “\t” sedangkan antara baris satu dengan baris lainnya dipisahkan oleh new line “\n”. Namun setelah saya coba, antar baris akan dideteksi sebagai spasi ” ” pada form HTML, bukan sebagai new line.

$(document).ready(function(){
	/* Paste values from spreadsheet if pasted in first input */
	$('#firstcolumn input[type=text].1').change(function(){
		var string = $(this).val();
		// data antar baris dipisahkan oleh spasi
		var rows = string.split(" "); 
		var i = 1;
		for(var val in rows){
			// data antar kolom dipisahkan oleh tabulasi
			var cells = rows[val].split("\t"); 
			first = '.'+i;
 
			// jika data yang dipaste hanya 1 data saja (bukan data dari excel)
			if(cells.length == 1){ 
				break;
			}
 
			// saya menggunakan class .1 .2 pada baris form input
			// artinya class .1 adalah baris input 1, dst
			$('#firstcolumn .'+i).val(cells[0]); 
			$('#secondcolumn .'+i).val(cells[1]); 
			i++;
		}		
	});
});

SEO untuk Jurnal Ilmiah

Kalo banyak orang membicarakan Search Engine Optimization (SEO) pada web-web mereka, saya akan membawakan artikel yang sedikit berbeda yaitu mengenai SEO khusus untuk jurnal-jurnal ilmiah.

Saya sebagai mahasiswa bidang rekayasa (engineering) sangat sering mencari artikel mengenai bidang yang berhubungan dengan profesi saya, yang paling sering adalah berkaitan dengan dokumen ilmiah, baik itu dokumen teknis, dokumen pendukung teori, ataupun dokumen ilmiah lainnya. Seperti tulisan-tulisan ilmiah lainnya, sebuah tulisan akan lebih bisa dipercayai dan diakui jika tulisan tersebut berada pada tempat yang tepat, misalnya saja website jurnal ilmiah atau website organisasi/perusahaan yang memang bergerak secara profesional di bidang itu, contohnya dokumen yang diletakkan di website sebuah laboratorium, atau website sebuah konsultan.

Format tulisan yang diberikan pun bisa bermacam-macam, mulai dari halaman HTML statik, file presentasi, Microsoft Word (docx), arsip (zip), postscript (ps), Latex, hingga yang terkenal saat ini adalah format PDF. Semua dokumen tersebut terindeks oleh Google. Permasalahan yang sering terjadi adalah banyak artikel-artikel yang bagus namun tidak muncul di halaman depan (baru muncul di halaman ke-n pada hasil pencarian Google).

Setelah melakukan riset (pengamatan) dalam beberapa waktu belakangan ini, saya mengambil beberapa kesimpulan agar dokumen terindeks dengan baik oleh Google:

  1. Dokumen ilmiah sebaiknya ditulis dalam format PDF. Selain format ini memiliki ukuran file yang kecil, format PDF juga bersih dan nyaman saat di baca. Semua orang akan lebih suka membaca file yang siap dibaca dan diprint seperti PDF dan tidak seperti format file yang masih bisa diedit (doc, odt, ppt) dan masih diberi garis bawah berwarna merah akibat fungsi spell checker pada word processor. Hal ini memang tidak berhubungan langsung dengan teknik SEO, tapi pembaca akan lebih memilih membaca format PDF dibandingkan format lainnya.
  2. Beri nama file dengan judul yang sesuai dengan isi artikel. Contohnya saja judul artikel adalah Pushover Analysis for Tall Building, maka beri saja nama file dengan nama yang sama: Pushover Analysis for Tall Building.pdf. Dengan teknik seperti ini, Google akan memberikan nilai lebih pada dokumen tersebut.
  3. Beri judul file dengan nama yang sama dengan judul pada isi artikel. Bingung ya? Maksudnya, ketika kita membuka sebuah file PDF, halaman pertama akan menampilkan judul isi artikel, namun judul file belum tentu sama. Coba saja tekan Alt+Enter pada saat membuka file dengan PDF viewer, kamu akan melihat judul file yang sebenarnya. Judul inilah yang akan diindeks sebagai judul file kita, bukan judul yang diberikan pada halaman pertama file PDF tersebut. Software konverter ke pdf biasanya memberikan opsi untuk judul artikel tersebut.
  4. Beri 1 halaman web khusus untuk tiap 1 artikel. Untuk mengunduh file PDF tersebut, ada baiknya untuk membuat 1 halaman khusus untuk tiap 1 artikel, jangan lupa untuk memberi title halaman web pada header dengan judul artikel tersebut. Bila perlu halaman ini memuat abstrak dokumen ilmiah dan link download untuk artikel ilmiah yang dimaksud.
  5. Semakin banyak artikel yang terpublish di web tersebut, maka semakin tinggi pula nilainya dan akan sering ditampilkan di halaman depan hasil pencarian Google.

MediaWiki at Localhost and Support for Formula (LaTex)

Recently, I tried to install and use mediawiki for private consume at my own notebook. I get a difficult task when to  integrate it with latex formula. From it’s documentation on internet, there are some extensions that can be used for supporting latex on mediawiki. But, they are using Texvc program. I tried to compile it on Windows, it hard to install and I don’t know what I should do.

When searching again on internet, I stop at Mathtex and Mimetex website and from this web, I know they provide the same function like texvc: for generating latex image. Mathtex provides better formula image than mimitex, but you should install latex program first when compiling it and it gets difficult task (I’m not successfull install mathtex).

Mimetex doesn’t use latex program because they generate images from their own fonts. For consequence, the images is not smooth as mathtex product.

For Windows user, you can use mimetex because it gives you simple solution. Download the source code from mimetex website and compile it with gcc (I use Mingw)

gcc -DAA -DWINDOWS mimetex.c gifsave.c -lm -o mimetex.exe

If you don’t know how to compile, you can download the binary program from this. Choose windows and download mimetex.zip. Open the archieve and you can see a file that has an extension cgi. Save it to your cgi-bin directory on web server (if you use XAMPP, you can save it on /xampp/cgi-bin).

Now, save the codes below to your Mediawiki extensions directory (extensions/Mtag.php). I got it from Mediawiki website.

<?php
# Place this file in extension directory as Mtag.php
# Add the following line to LocalSettings.php:
# include './extensions/Mtag.php';
# Mediawiki will render as LaTeX the code within <m> </m> tags.

$wgExtensionFunctions[] = "wfMtag";
 
function wfMtag() {
        global $wgParser;
        $wgParser->setHook( "m", "returnMtagged" );
}
 
function returnMtagged( $code, $argv)
{
 
# if you have mathtex.cgi installed:
# $txt='<img src="/cgi-bin/mathtex.cgi?'.$code.'">';
# OR if you want to temporarily test a public mathtex.cgi:
 $txt='<img src="http://localhost/cgi-bin/mimetex.cgi?'.$code.'">';
 
 return $txt;
}
 
?>

Then edit your LocalSettings.php so the mediawiki know that we use latex from the extension.

require_once( "$IP/extensions/Mtag.php" );
$wgUseTeX = true;

If you have a mediawiki on shared hosting and they didn’t provide cgi-bin directory or texvc program, you can use online latex generator from mathtex itself. Just change the above code that contains url for generating the image.

$txt='<img src="http://www.forkosh.com/mathtex.cgi?'.$code.'">';

Now, you can generate formula from Mediawiki with example tag

<m> x=23x+7 </m>

But, it’s better if you use your own mathtex program. Finally, you can use formula at your own mediawiki.

Modifikasi Sendiri Theme pada WordPress

Kemarin saya memodifikasi beberapa bagian pada tema wordpress blog ini. Saya menambahkan style pada button agar menarik dan mirip dengan tombol yang digunakan oleh Google. Selain itu, kotak input teks dan teks area saya ubah agar mirip dengan kotak input yang ada pada Twitter, menampilkan border berwarna biru terang (glow).

Kode yang saya gunakan saya ambil dari internet dan saya modifikasi sedikit untuk penyesuaian pada template yang sudah ada.

Untuk tombol (button) Google, kamu bisa mendapatkan tutorial lengkapnya dari blog pixify. Di sana akan diberikan style CSS yang lebih lengkap. Saya hanya menggunakan beberapa potong kode saja.

/* Google style*/
#nav li a,input[type=submit] {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
#nav li a,input[type=submit]:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#nav li a,input[type=submit]:active {
    color: #000;
    border-color: #444;
}

Untuk kotak twitter, sebenarnya ada banyak sumber yang bisa dijadikan contoh, salah satu yang menjadi proyek twitter sendiri adalah Bootstrap. Bootstrap adalah sebuah css framework yang menjadi komponen penting dalam style Twitter sendiri. Namun, saya menggunakan potongan yang saya anggap perlu saja, yaitu untuk glowing box.

/* Twitter-like glow input box */
input[type=text], textarea {
	transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
 	-moz-transition: all 0.30s ease-in-out;
 	border:#fff 1px solid;
 	outline:none;
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid rgba(81, 203, 238, 1);;
}

Untuk bisa mendapatkan hasil yang maksimal, kamu juga harus memodifikasi kode yang sudah ada. Sebagai contoh, kotak komentar menggunakan tag textarea dengan class .comment, untuk itu semua style yang ditujukan pada class comment harus dihilangkan beberapa yang tidak diperlukan agar hasilnya bisa terlihat lebih baik.

Saya juga menambahkan style untuk mengubah warna background pada text yang dipilih (selected text).

/*Text selection background*/
::selection {
	background: #333; /* Safari */
        color: #FFF;
	}
::-moz-selection {
	background: #333; /* Firefox */
        color: #FFF;
}

Untuk rencana ke depan, saya berencana menambahkan fungsi format post yang sudah ada pada wordpress sejak versi 3. Saat ini, template blog saya hanya bisa mendukung format post dengan type Standar, mudah-mudahan beberapa bulan mendatang, blog ini sudah mendukung format Quote, Status, dan Chat 😀

PHP Class : Program Pondasi Dangkal

Beberapa hari yang lalu, saya membuat sebuah program kecil untuk menghitung daya tahan pondasi dangkal. Program ini saya buat dalam bentuk web. Namun kali ini, tidak seperti program lain yang saya buat dengan menggunakan fungsi-fungsi biasa, kali ini saya membuat program menggunakan OOP (Object Oriented Programming).

Sebenarnya saya tidak begitu tau dengan konsep  OOP, jadi jika ada kekurangan dalam program ini, harap dimaklumi saja, soalnya jurusan saya bukan berkaitan dengan programming. Mata kuliah Rekayasa Pondasi sebenarnya sudah selesai semester lalu dan puji Tuhan nilainya cukup baik. Saya iseng saja membuat program ini, manatau kamu tertarik untuk mengembangkannya. Aplikasi ini adalah aplikasi untuk menghitung kekuatan pondasi dangkal dengan metode Terzaghi (Terzaghi Bearing Capacity). Referensinya saya ambil dari buku Braja M.Das (Foundation Engineering) edisi ke-4.

Aplikasi ini bisa diakses di http://duken.info/aplikasi/sipil/pondasi/app/.

Untuk source code bisa diambil di http://duken.info/aplikasi/sipil/pondasi/source/.

Games Tebak Kata

Satu aplikasi bisa saya selesaikan malam ini, wow senangnya. Akhir-akhir ini saya sangat bersemangat membuat aplikasi baru, padahal aplikasi lainnya yang baru saja saya buat masih jauh dari sempurna dan butuh pengembangan lebih lanjut 🙂

Permainan ini pernah saya jumpai entah di web mana, saya juga lupa alamatnya. Sore ini saya terpikir untuk membuat games yang serupa dengan games yang pernah saya lihat tersebut. Bukan bermaksud untuk meniru, namun saya ingin mempunyai games di web ini, biar suasananya ga garing 😆

Silahkan saja dicoba di alamat http://duken.info/aplikasi/games/tebak/.

Saya sangat menunggu kritik dan saran kalian semua 😀

Lirik Lagu Rohani

Senin depan saya ada Ujian Akhir Semester. Bukannya belajar mempersiapkan ujian, saya malah asyik ngoding-ngoding ga jelas, haha 😆

Satu aplikasi yang masih sangat sederhana akhirnya bisa saya selesaikan. Lirik Lagu Rohani, saya bingung mencari nama yang cocok untuk aplikasi ini, jadi asal ngambil nama saja. Akhir-akhir ini saya sering mendengar lagu-lagu gereja yang bagus, namun saya kesulitan untuk menyimpannya. Kertas-kertas dari gereja yang berisi teks lagu biasanya terbuang begitu saja. Walaupun saya sering menyimpan kertas-kertas tersebut, tetap saja ada yang masih hilang.

Nah, saya tertarik mendokumentasikan dan membuat sistem database daftar lagu-lagu ini. Makanya seharian ini, dari pagi hingga sore, aplikasi kecil ini bisa saya publish. Masih banyak bug dan kekurangan dalam aplikasi ini, tampilannya pun belum ada ;). Kalau ada yang berminat untuk mendesain tampilannya, silahkan saja menghubungi saya 🙂

Lirik Lagu Rohani ini bisa diakses di http://duken.info/aplikasi/llr/

Untuk saat ini, hanya ada 2 lagu saja yang ada di sana. Sebenarnya saya ingin semua orang bisa menambahkan dan mengedit lirik lagu dalam aplikasi itu, namun sistemnya belum saya kerjakan, jadi untuk saat ini, hanya saya saja dulu yang menambahkan. Rencananya saya akan fokus untuk mengisi aplikasi ini dengan lagu dari Buku Ende bahasa Batak, Kidung Jemaat, yang lainnya mungkin dari lagu bahasa Indonesia dan Inggris 🙂

Alkitab Online: Kings James Version

Dalam tulisan saya sebelumnya, saya menceritakan tentang aplikasi alkitab yang saya buat dengan PHP. Ada banyak rencana yang saya susun di bagian about. Namun banyaknya halangan dan tugas-tugas membuat saya tidak sempat bekerja banyak mengembangkan lebih lanjut aplikasi ini. Kodenya pun banyak yang berantakan.

Untuk update sementara, saya menambahkan database alkitab berbahasa Inggris menggunakan KJV (Kings James Version). Semoga bisa bermanfaat buat teman-teman 😉

Alamat Alkitab KJV bisa diakses di http://duken.info/alkitab/kjv