Skip navigation

Tag Archives: JavaScript


Just share a bit. When we want to commit source code, it’s better to check locally before pushing the source code to repository which then check them at the build server.

Here’s a source code for the wrapper script. The needed binaries are PHPCS, ESLint, and Stylelint.

To execute in the pre-commit, you can just use this.

SOURCE_FILES=${SOURCE_FILES:-`git diff-index --name-only --diff-filter=ACMR HEAD`}
export SOURCE_FILES
./checkstyle.sh

exit $?

Sesuai dengan permintaan di postingan sebelumnya, sekarang saya akan mencoba menambahkan link di dropdown yang dihasilkan oleh autocomplete. Seperti autocomplete yang ada di Facebook, autocomplete yang akan saya modifikasi akan memindahkan halaman ke halaman profil userketika dropdownnya diklik.

Read More »


Barusan saya menghadapi masalah bagaimana secara mudah memvisualisasikan pemeriksaan sebuah himpunan koordinat tempat di bumi baik terhadap radius antara tiap koordinat atau terhadap radius dari sebuah koordinat tertentu. Kedua masalah ini ternyata tidak terlalu susah jika menggunakan Google Map. Untuk itu saya mencoba membuat skrip sederhananya.

Berikut adalah pengecekan radius antar koordinat pada sebuah himpunan koordinat.

Google Map Point and Radius Checker

Skripnya dapat dilihat di sini.

Dan berikut adalah pengecekan himpunan koordinat terhadap radius dari sebuah koordinat tertentu.

Google Map Points Checker inside Radius

Skripnya dapat dilihat di sini.

Semoga berguna.


(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)

Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.

JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.

Contoh penggunaannya

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function(){
			$("#kotak").load("test5_1.html");
			$("#button1").click(function(){
				$("#kotak").load("test5_1.html");
				return false;
			});
			$("#button2").click(function(){
				$("#kotak").load("test5_2.html");
				return false;
			});
		});
	</script>

	</head>
	<body>
<ul>
	<li><a href="" id="button1">Test 1</a></li>
	<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>

Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.

Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)


JSON atau Javascript Object Notation adalah sebuah format pertukaran data yang ringan dan mudah ditulis atau dibaca oleh manusia. Karena ringan, format ini sering dipakai dalam pertukaran data. Contoh format data JSON.

{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}

Kadang-kadang untuk menghemat data maka seluruh whitespace dihilangkan dari format data. Penghematan ini jelas membuat format data menjadi susah terbaca oleh manusia.

{"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}

Code beautifier adalah salah satu perkakas untuk membuat kode menjadi terbaca. Salah satu caranya adalah dengan indenting yakni menambahkan whitespace pada kode. Dengan perkakas ini, kode kedua dapat kembali mejadi yang pertama.

Read More »


DateJS adalah sebuah library Javascript yang memudahkan kita untuk melakukan manipulasi waktu. Script ini memiliki fungsi-fungsi yang menarik seperti add, today, tommorrow, sekaligus parse dan dapat melakukan chaining. Meski masih dalam tahap alpha tapi sudah menyediakan fungsi-fungsi yang sangat lengkap dan sudah dapat berjalan dengan cukup baik untuk kebutuhan-kebutuhan mendasar.

Dan hal yang menyenangkan lagi adalah library ini dapat digunakan bersama-sama dengan JQuery.

Berikut contoh yang ada di situsnya.

// What date is next thrusday?
Date.today().next().thursday();
 
// Add 3 days to Today
Date.today().add(3).days();
 
// Is today Friday?
Date.today().is().friday();
 
// Number fun
(3).days().ago();

// 6 months from now
var n = 6;
n.months().fromNow();
 
// Set to 8:30 AM on the 15th day of the month
Date.today().set({ day: 15, hour: 8, minute: 30 });
 
// Convert text into Date
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // today + 5 days
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);

Baru bikin wrapper yang lumayan enak buat digunain.

/*AJAX Wrapper!*/
/**
 * @param method Request method
 * @param url Request URL
 * @param onLoad Function callback on request complete
 * @param onProgress Function callback on request progress
 * @param data
 */
function doRequest(method,url,async,onLoad,onProgress,data) {
    var xhr;
    try{
        xhr=new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try{
            xhr=new ActiveXObject("Msxml2.xhr");
        } catch (e) {
            try {
                xhr=new ActiveXObject("Microsoft.xhr");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    // W3C requests and streaming
    xhr.open(method,url,async);
    if (method == "POST") /* Set request header on POST */
    {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("Content-length", data.length);
        xhr.setRequestHeader("Connection", "close");
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 3) // interactive mode
            onProgress(xhr.responseText);
        if (xhr.readyState == 4) // finished
            onLoad(xhr.responseText,xhr.status);
    }
    xhr.send(data); // finally send the request whether it be XDR or XHR
}

Read More »


Tugas besar Pemrograman Internet kali ini adalah untuk menyusun sebuah situs mirip jejaring sosial yang berisi profil-profil diri dari anggota kelompok yang terkait satu sama lain menggunakan hyperlink. Salah satu poin yang gw propose di spesifikasi tugas besar tersebut adalah Web Standard compliance.

Apa sih itu Web Standard? Web Standard adalah sebuah teknologi atau spesifikasi yang telah disusun untuk membuat atau menginterpretasikan konten berbasis web. Standar-standar ini didefinisikan terutama oleh World Wide Web Consortium. Setiap pengembang web seharusnya mengikuti standar yang telah ditetapkan tersebut. Dan untungnya Pak Riza, dosen yang bersangkutan, sangat setuju dengan adanya spesifikasi tersebut.

Kenapa sih harus ikut Web Standard?

Read More »

%d blogger menyukai ini: