Paste Range Data dari Excel ke Form HTML Menggunakan Javascript

April 23, 2013 by · Leave a Comment 

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

January 29, 2013 by · 2 Comments 

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.

Beberapa Tips WordPress Security Hardening

March 18, 2012 by · Leave a Comment 

Saya melihat sebuah email pada milis di kampus yang memberitakan adanya website kampus yang di-deface oleh orang yang tidak bertanggung jawab. Website tersebut menggunkan WordPress sebagai content management system (CMS).

Ngomong-ngomong masalah hack, dulu blog ini juga pernah kebobolan. Pengguna mengganti .htaccess dan efek yang dihasilkan adalah redirect ke url lain begitu kita membuka blog ini. Juga pernah kejadian craker mengganti username dan mengganti password di database, tapi syukurlah tidak sampai merusak data-data yang ada.

Sejak saat itu, saya jadi sedikit concern pada sekuritas web terutama wordpress. Banyak sumber yang menyebutkan jika 3rd party pada wordpress seperti themes dan plugin rentan pada serangan-serangan tersebut. Intinya, jika plugin dan themes tidak pernah di-update, maka blog atau web rentan terhadap serangan hacking.

Saya akan memberikan beberapa tips untuk mengamankan website berbasis wordpress dan menurut saya tips ini sudah lebih dari cukup. Cukup bermodalkan htaccess, kita bisa membatasi setiap pergerakan orang yang berniat iseng pada website kita.

  • Buatlah sebuah file .htaccess pada root direktori web, jika sudah ada, silahkan ditambahkan pada bagian bawah baris yang sudah ada.
############
# Disallow #
############
<Files wp-config.php>
  Order allow,deny
  Deny from all
</Files>
<Files readme.html>
  Order allow,deny
  Deny from all
</Files>
<Files install.php>
  Order allow,deny
  Deny from all
</Files>
 
#########
# Allow #
#########
<Files index.php>
  Order allow,deny
  Allow from all
</Files>
  • Buat juga sebuah file .htaccess pada wp-content/plugins
<Files *.php>
  Order allow,deny
  Deny from all
</Files>
<Files smiley.php>
  Order allow,deny
  Allow from all
</Files>
  • Sebuah file .htaccess pada wp-content/themes
<Files *.php>
  Order allow,deny
  Deny from all
</Files>
  • Sebuah lagi pada wp-includes
<Files *.php>
  Order allow,deny
  Deny from all
</Files>
<Files wp-tinymce.php>
  Order allow,deny
  Allow from all
</Files>
  • Sebuah lagi pada wp-includes
<Files *.php>
  Order deny,allow
  Deny from all
  Allow from 127.0.0.1
  Allow from 74.79.0.0/16
  Allow from 179.15.22.0/24
</Files>

Filosofi dari baris-baris tersebut adalah kita membatasi gerakan peretas yang ingin merusak website kita. Kebanyakan file-file wordpress tidak dipanggil secaa langsung ketika dibuka dari browser, melainkan melalui induk file index.php. File inilah yang memanggil file-file yang lainnya. Oleh karena itu, kita bisa memproteksinya dengan menggunakan htacces di atas. Namun ada juga file-file yang diakses secara langsung dan jika kita memproteksinya, otomatis website kita tidak akan berjalan dengan baik. Pengecekan mana file-file yang diakses langsung bisa menggunakan fitur inspect elemen pada google chrome, lalu membuka tab Console. Jika tidak ada error, maka proteksi yang digunakan berjalan dengan baik. Efek dari kode di atas adalah ketika mengakses langsung file yang telah diproteksi, blog akan mengeluarkan kode 404 yang menyatakan bahwa file tidak ada.

Untuk artikel kali ini, saya hanya akan membahas trik dengan htaccess. Untuk menambah keamanan, jangan lupa untuk mengganti permission htaccess menjadi 444. Ini untuk memastikan bahwa file htaccess tidak bisa ditulis secara langsung.

MediaWiki at Localhost and Support for Formula (LaTex)

March 10, 2012 by · Leave a Comment 

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.

Next Page »