Tag Archives: Web

Berpindah ke Python untuk Software Numerik

Ketika saya baru pertama kali belajar tentang dunia programming, saya lebih suka membuat aplikasi dengan menggunakan bahasa pemrograman PHP (PHP Hypertext Preprocessor) dengan basis web. Dulu beberapa teman yang minta dibuatkan aplikasi web, baik itu blog, aplikasi database, atau aplikasi perhitungan sederhana, biasanya saya membuatkannya dalam bentuk web dengan menggunakan PHP karena memang fungsinya diperuntukkan untuk aplikasi web.

Akhir-akhir ini, saya sering ingin membuatkan sebuah aplikasi perhitungan yang tidak membutuhkan database. Aplikasi ini khusus untuk ranah teknik sipil (engineering) dan tidak memerlukan koneksi database seperti MySQL atau PostgreSQL. Saya sempat berpindah ke pemrograman desktop selama masih di Laboratorium Rekayasa Struktur. Saat itu saya menggunakan bahasa C# untuk membuat aplikasi  Analisis Kurvatur Momen.

Di awal tahun ini, setelah keluar dari lab, saya membuat sebuah software analisis struktur, openSAP32, yang saya buat dengan menggunakan Python. Karena kesibukan pekerjaan di luar Jakarta dan saat ini saya sedang bertugas ke site di Lhokseumawe, software ini sedikit terlantar. Sedikit informasi mengenai software ini, saya berencana membuat software analisis struktur sederhana yang bisa saya pakai tanpa harus menggunakan software komersial. Tujuannya adalah mempelajari lebih dalam tentang analisis struktur metode matriks dan berharap bisa meningkatkan nalar berpikir, syukur kalau ternyata nanti bisa dikembangkan hingga analisis gempa dan dinamik. Untuk saat ini, software ini baru bisa digunakan untuk analisis rangka batang 2 dimensi, dengan fitur yang masih minim. Kalau ada waktu luang, saya terus berusaha mengembangkan sofware ini.

Ketika banyak tenaga dan pikiran yang harus dibutuhkan untuk membuat openSAP32, saya terpikir untuk membuat software yang lebih sederhana, yang bisa saya selesaikan dalam waktu singkat. Nantinya aplikasi ini saya kumpulkan menjadi sebuah tools yang berguna buat saya sendiri dan juga engineer sipil lainnya tentunya. Untuk kasus ini, saya berpikir bahwa aplikasi desktop bukanlah pilihan yang tepat. Saya melihat aplikasi desktop lebih ditujukan pada sebuah aplikasi yang besar yang fungsinya untuk sebuah tugas khusus, sama seperti openSAP32.

Kumpulan aplikasi ini lebih cocok dibuat di atas platform web yang menangani aplikasi yang lebih kecil. Model MVC (Mode-View-Controller) pun cocok digunakan untuk aplikasi numerik. Yang berbeda adalah, jika umumnya pada aplikasi database, model digunakan sebagai media query data ke database, pada aplikasi numerik, namun model digunakan sebagai tempat mengolah data berupa perhitungan numerik yang diharapkan akan ditampilkan hasilnya.

Sudah hampir sebulan ini saya mencoba mempelajari pemrograman web dengan menggunakan python. Saya lebih memilih menggunakan python karena selain bisa digunakan untuk web, banyak library python yang khusus dibuat untuk proses numerik. Contoh library tersebut adalah Numpy, Scipy, Matplotlib, dan Simpy. Semuanya saya rasa sudah cukup matang sebagai sebuah library.

Ada banyak pilihan framework pada python. Di antara Flask, CherryPy, Bottle, Tornado, Django, dan web2py, saya menjatuhkan pilihan pada CherryPy. Flask bagus, hanya saja dukungan untuk Python 3 masih tanda tanya. Tornado khusus digunakan untuk web server untuk proses asynchronous, sedangkan saya tidak membutuhkannya. Bottle hanya menyediakan web server HTTP yang tidak production-ready. Django terlalu besar untuk aplikasi yang saya buat dan web2py sepertinya terlalu kompleks. CherryPy saya pilih karena tidak dilengkapi oleh 3rd-party yang memang tidak saya butuhkan seperti akses database dan autentikasi. Aplikasi yang ingin saya buat murni interaksi dinamik antara user dan kode yang bermain di level numerik. CherryPy juga sudah dilengkapi built-in http server sehingga tidak membutuhkan banyak dependencies.

Awalnya saya cukup kesulitan mempelajari framework ini. Ditambah lagi saya harus mempelajari Mako sebagai library untuk template aplikasi ini nantinya. Untuk membuat framework ini bekerja sebagai arsitektur MVC, saya harus membuat beberapa script agar bisa berjalan sesuai dengan keinginan.  Semuanya berada dalam kontrol kita, tidak seperti banyak framework PHP yang semuanya tinggal pakai karena memang dari awal sudah menggunakan konsep MVC. Bahkan model routing dan dispatching pun bebas mau yang seperti apa.

Akhirnya saya bisa sedikit puas karena berhasil membuat dasar dari model aplikasi yang saya inginkan. Begitulah saya yang pada awalnya berharap bisa menguasai framework ini dengan cepat, ternyata harus bersabar lebih lama untuk mendapatkan apa yang saya harapkan. Tampaknya beralih ke Python adalah langkah yang menurut saya akan sangat berguna ke depannya 🙂

Kalau kamu ingin melihat kerangka MVC aplikasi saya, kamu bisa melihat-lihat ke halaman github aplikasi yang saya beri nama civil-engineering-toolbox.

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++;
		}		
	});
});

Beberapa Tips WordPress Security Hardening

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)

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 😀

Dasar Pemrograman Web

Tulisan ini tidak ditujukan untuk kamu yang ingin belajar pemrograman secara teknis, dalam artian kamu ingin belajar HTML, PHP, dll. Saya ingin sedikit sharing pengalaman buat kamu yang ingin memulai pemrograman internet (web), namun bingung mulai dari mana belajarnya. Sedikit cerita mungkin bisa membawa kamu pada satu kesimpulan yang bisa membuat konsepmu bertambah dalam memulai pemrograman internet.

Saya dulu pertama kali belajar web ketika naik tingkat 2, tepatnya mulai belajar pada akhir semester 2. Namun sebelumnya, saya pernah sedikit mempelajari cara menginstall CMS seperti WordPress, Joomla, dll. Kalo kamu pernah belajar menginstall salah satu CMS tersebut, kamu akan lebih mudah mempelajari hal-hal yang lain. Namun jika kamu belum pernah, bukan berarti kamu tidak akan bisa dengan materi web yang lain 🙂

Web dibangun di atas sebuah server web, misalnya saja Apache atau IIS. Apache biasanya gratis. Kamu bisa mengunduh dari situsnya langsung. Namun, jika ingin belajar HTML, kita tidak terlalu butuh dengan web server tersebut. Sebagai awal latihan yang bagus, kamu bisa mencoba paket server XAMPP yang bisa kamu gunakan dengan gratis. Paket ini berisi Apache, PHP, MySQL, FTP, dan Mail.

Mungkin kamu banyak yang bertanya apa saja yang harus saya pelajar untuk bisa membuat web? Dalam pemrograman web, ada beberapa komponen yang harus kamu kuasai :

  1. HTML (Hypertext Markup Language). HTML adalah bahasa markup yang membangun struktur web. Kamu bisa mempelajari HTML hanya menggunakan notepad dan browser. Ketik kode HTML di notepad, simpan dalam format .html dan file yang dibuka akan ditampilkan di browser.
  2. CSS (Cascading Style Sheet). CSS adalah komponen web yang membuat tampilan web menarik. Kalau tadi HTML bisa diibaratkan sebagai tulang-belulang (berfungsi sebagai struktur) dari tubuh kita, maka CSS bisa kita ibaratkan sebagai daging kita. Seberapa besar mata kita, seberapa putih kulit kita, seberapa panjang rambut kita, adalah perumpaan yang bisa kita berikan pada CSS. CSS lah yang memberikan presentasi dan tampilan pada orang yang melihat.
  3. Pemrograman dinamis. Ada banyak pemrograman dinamis yang bisa dilakukan di internet, beberapa yang terkenal adalah PHP, ASP, Python, dll. Yang paling banyak digunakan adalah PHP. Selain gratis, PHP juga memiliki dokumentasi yang banyak, sehingga jika kamu kesulitan dalam membuat program, kamu bisa melihat sumber yang banyak di internet. Bahasa pemrograman seperti C/C++, Visual Basic, C#, sebenarnya juga bisa digunakan, namun jarang dipakai. Saya sendiri lebih sering menggunakan PHP.
  4. Penyimpanan data. Penyimpanan data atau DBMS (Database Manajement System) adalah sebuah tempat yang digunakan untuk menyimpan data-data, baik itu data user, password, data kartu kredit, daftar belanja, data nilai kuliah, dll. Ada banyak aplikasi penyimpanan data, seperti MySQL, PostgreSQL, Oracle, dll. MySQL adalah DBMS yang sering digunakan. Namun jangan kuatir jika ingin menggunakan aplikasi DBMS yang lain, biasanya DBMS ini menggunakan satu bahasa untuk mengaksesnya, SQL. SQL (Structured Query Language) adalah bahasa yang digunakan untuk manajemen data dalam DBMS. Jika kamu mengetaui SQL ini, kamu bisa menggunakan berbagai macam aplikasi DBMS di atas.
  5. Javascript. Sebenarnya belajar javascript tidak terlalu diwajibkan. Namun kadang kala kita sering membutuhkan kemampuan bahasa yang satu ini. Facebook dan Twitter terkenal karena memiliki aplikasi yang interaktif. Semua itu bisa dilakukan karena javascript ini 🙂

Saya belajar PHP, HTML, dan SQL secara bersamaan. Sedangkan javascript saya pelajari ketika saya membutuhkan aplikasi yang dinamis. CSS juga saya pelajari sambil belajar yang lain, tentu ini tidak saya dalami karena saya bukanlah orang yang bisa membuat desain tampilan yang menarik :p

Untuk belajar dasar-dasar pemrograman web di atas, kamu bisa masuk ke alamat http://www.w3schools.com/. Web http://www.tizag.com/juga menawarkan pilihan belajar web yang menurut saya cukup baik untuk pemula. Jika kamu ingin sesuatu yang baru, cobalah http://net.tutsplus.com/, di sana banyak tutorial yang ditujukan untuk pemula hingga tutorial tingkat lanjut.

Sudah sekitar 2 tahun sejak saya belajar pemrograman web. Banyak ilmu yang saya dapatkan, namun belum sebanding dengan ilmu yang dimiliki orang-orang di luar sana. Jika kamu saat ini belum mampu belajar keseluruhan dari materi di atas, jangan pernah sedikitpun untuk menyerah. Saya juga kadang tidak mampu mencerna isi buku-buku dan tutorial di internet. Namun saya sering mengulang-ulang isi materi tersebut, alhasil saya bisa mengikutinya, walaupun cuma sedikit.

Ada banyak tutorial di internet, ada banyak buku dan ebook yang bagus, namun jika tidak disertai dengan kesungguhan hati untuk belajar, tentu ilmu yang kita peroleh juga sedikit 😆