Selasa, 31 Januari 2017

Membuat Game HTML5 : Cara Kerja Multi-Player Game (Komunikasi Antara Client Dan Server)


Awalnya terasa terheran ketika melihat semua komputer dapat melihat wajah tampilan yang sama. Padahal, pemainnya ada puluhan sampai ratusan! Bagaimana bisa server melayani klien sebanyak itu dengan biaya pribadi?

Baru-baru ini saya paham, ternyata bayangan mekanisme komunikasi antara klien dan server pada game multiplayer salah tergambar di otak saya. Jadi, bagaimana sebenarnya mekanisme komunikasi antara server dan para kliennya?

Awalnya saya pikir gambar yang muncul di monitor adalah gambar yang sudah diproses di server, lalu dikirim ke kita. Padahal, sebenarnya semua gambar tersebut diproses langsung oleh komputer kita masing-masing. Biar lebih jelas, kita mulai dengan melihat ilustrasi mulai dari awal kita mengklik tombol start pada game multiplayer.

Semua data pemain berada di server dan juga klien, misalnya nama, koordinat pemain dan beberapa aktivitas yang sedan dilakukan oleh pemain. Namun, server mungkin tidak akan membagikan data spesifik yang bersifat privat bagi tiap pemain.

Ketika pemain datang, data pemain baru tersebut akan ditambahkan ke server. Selanjutnya server mengirimkan data pemain lain yang sedang aktif dan sudah memulai terlebih dulu kepadanya. Tidak sampai disitu, pemain lain juga harus tahu, bahwa ada pemain baru, ya. Jadi, server juga perlu mengirim data pemain baru kepada para klien lama-nya.

Sementara itu, proses kontrol player dan semua event yang terjadi dalam permainan juga akan dibagikan secara menyeluruh.

Server sama sekali tidak memproses gambar apapun. Tugas server di sini hanyalah menyiarkan event yang terjadi oleh setiap player. Misalkan kita menekan tombol DOWN, yang terjadi adalah:
- Update data posisi player
- Kirim pemberitahuan ke server
- Update gambar tampilan
- Server menyebarkan pemberitahuan ke yang lain
- Pemain lain mengupdata data posisi kita di komputer mereka
- Update gambar tampilan mereka

Sampai disini sudah cukup terbayang, bukan?
Yap, bagus. Jika sudah, nanti kita akan mulai belajar membuat game multi-player pertama kita. Eits, tapi mimin selesaikan dulu ya, tutorial Node.js dan Socket.io nya.
Read more

Membuat Game HTML5 : Mengontrol Objek Dengan Keyboard


Javascript benar-benar tidak ada bahasa yang sempurna untuk dikolaborasikan dengan web browser. Meskipun hanya sebatas script, javascript cukup kaya akan fitur yang terintegrasi dengan baik. Keberadaannya sama sekali tidak mengurangi performa eksekusi, namun justru meningkatkan estetika dan kehandalan sebuah halaman web. Salah satu bentuk kesempurnaan ini adalah mekanisme event-driven yang mudah dikustomisasikan.

Saat membuat game, wajib hukumnya untuk mengetahui bagaimana memperoleh event dari keyboard atau mouse, sehingga kita bisa menentukan bagaimana proses kontrol aktor yang terlibat dalam game. Untuk tutorial kali ini, kita akan khusus membahas tentang event keyboard terlebih dahulu.

Sebelum beranjak ke topik utama, kita harus membuat kelas untuk objek yang akan dikontrol. Kita namakan sebagai kelas Player. Bentuknya cukup sederhana, ia hanya berproperti x dan y yang merepresentasikan posisi objek saat ini.

function Player(x,y){
this.x = x;
this.y = y;
}

Kita akan membuat sebuah sample objek Player ketika inisialisasi berlagsung. Contoh ini akan membuat objek player dengan koordinat awal (100,100).

Tidak lupa, sebuah fungsi khusus dibuat untuk me-refresh gambar pada canvas. Fungsi ini akan dieksekusi melalui interval 30ms. Jangan kawatir, nilai ini sudah umum, kok.

var player;
window.onload = function(){
...
player = new Player(100,100);
setInterval(Draw, 30);
};

function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}

Nah, sekarang saatnya kita menulis kode untuk memproses event dari keyboard. Cara termudah untuk mengontrol aktor dengan keyborad adalah dengan memasang handler window.onkeydown(). Fungsi ini akan dipanggil setiap kita menekan salah satu tombol keybord. Setelah dilepas, browser selanjutnya secara otomatis akan memanggil handler window.onkeyup().

Sebuah argumen berupa objek KeyboardEvent akan diberikan ke fungsi handler yang dipanggil. Dalam argumen ini terdapat detail mengenai event yang tengah berlangsung. Properti keyCode dalam argumen tersebut adalah kunci utama dalam mekanisme kontrol yang akan kita lakukan. Nilai ini akan menunjukkan kode representatif posisi tombol keyboard penghasil event.

window.onkeydown = function(evt){
switch (evt.keyCode){
case 37: //tombol panah kiri?
player.x -= 3;
break;
case 38: //tombol panah atas?
player.y -= 3;
break;
case 39: //tombol panah kanan?
player.x += 3;
break;
case 40: //tombol panah bawah?
player.y += 3;
break;
default:
break;
}
};

Jika butuh pencerahan, saya sarankan untuk mengunjungi link berikut:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent



Full code example:
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;
var player;

function Player(x,y){
this.x = x;
this.y = y;
}

window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
player = new Player(100,100);
setInterval(Draw, 30);
};

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

window.onkeydown = function(evt){
switch(evt.keyCode){
case 37:
player.x -= 3;
break;
case 38:
player.y -= 3;
break;
case 39:
player.x += 3;
break;
case 40:
player.y += 3;
break;
default:
break;
}
};

function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}
</script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>

Masih belum puas dengan tutorial yang satu ini? Tunggu saja postingan selanjutnya yang lebih greget, ya.
Read more

Membuat Game HTML5 : Menyesuaikan Ukuran Canvas Otomatis


Pada umumnya ukuran canvas pada game adalah menyesuaikan ukuran laman browser. Masalahnya ukuran ini akan selalu berbeda dan sewaktu-waktu dapat berubah saat run-time. Padahal, ukuran canvas harus diatur dengan nilai absolut, sesuai dengan ukuran laman browser. Untuk itu, kita harus memasang fungsi callback method window.resize(). Fungsi tersebut akan dieksekusi setiap kali windows berubah ukuran.

Agar tampilan laman responsif, kita sebaiknya juga mengatur beberapa properti dari elemen html dan tag <body>. Dengan pengaturan ini, ukuran body akan selalu menyesuaikan ukuran laman browser.

html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}

Setiap browser mungkin memiliki konfigurasi margin dan padding untuk body yang berbeda-beda. Kita sama sekali tidak membutuhkan properti ini. Dengan mengatur kedua nilai ini menjadi 0, tampilan keseluruhan akan menjadi fullscreen. Saat properti width dan height dari body diatur ke nilai 100%, akan terlihat 2 scrollbar muncul di sisi kiri dan bawah laman browser. Hilangkan dengan memasang properti overflow:hidden.

Setiap window mengalami resize, browser akan mengubah nilai properti innerWidth dan innerHeight. Kedua nilai inilah yang menjadi acuan untuk secara otomatis menyesuaikan ukuran canvas.

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

Terakhir, agar proses resize juga dilakukan otomatis di awal saat inisialisasi, panggil method window.onresize() di bagian inisiaisasi.

window.onload = function(){
...
window.onresize();
...
};

Contoh lengkap source codenya ini, bro.
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;

window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
context.fillStyle = "red";
context.fillRect(10,10,20,20);
};

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

</script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>

Eksperimen apa lagi yang akan kita lakukan selanjutnya?
Tetap update bersama Komputoo!
Read more

Membuat Game HTML5 : Canvas


Karena game komputer sudah mainstrem, saya akhirnya tertarik dengan pengembangan game berbasis web yang bisa dimainkan lewat browser secara multiplayer. Saya pun mulai memperdalam Javascript yang sudah lama saya tinggal dan mulai sedikit terlupakan. Berencana membuat game multiplayer mengharuskan saya menguasai pemrograman server-side, itu membuat saya berkenalan dengan Node.js dan Socket.io. Di postingan sebelumnya saya sempat menyinggung mengenai kedua komponen ini, silahkan baca saja jika tertarik.

Sebelum melanjutkan pembahasan mengenai kedua komponen itu tadi, kita akan melompat ke segmen lain, yaitu mengenai canvas. Canvas adalah satu-satunya media yang efektif digunakan untuk menggambar di game berbasis web. Canvas bisa dibuat secara langsung dengan menuliskan tag <canvas> di source code HTML kita. Cara lain bisa dilakukan dengan appendElement dari javascript.

Yuk, kita liat contoh penggunaan canvas seperti apa...

<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
canvas {
margin:5px; border:1px solid red;
}
</style>
<script type='text/javascript'>
(taruh script di sini)
</script>
</head>
<body>
<canvas id='gameCanvas' width='300' height='300'></canvas>
</body>
</html>

Penting untuk menentukan properti width dan height di element canvas. Kemarin saya sempat tidak tahu soal ini. Yang terjadi adalah, ketika menggambar dengan mouse, posisi koordinat gambar menjadi tidak sesuai. Untuk sementara, pada kesempatan ini kita atur panjang dan lebarnya 300 piksel. Di kesempatan lain, saya akan menunjukkan bagaimana menyesuaikan ukuran canvas otomatis, sesuai dengan lebar browser.

Proses inisialisasi game, dilakukan saat browser selesai meload semua resource dari server. Ketika al ini terjadi, browser akan memanggil method window.onload() jika ada. Tugas kita adalah membuat fungsi yang harus dieksekusi pada saat inisialisasi dan memasangnya pada bagian ini.

Contoh sederhana berikut akan menggambar persegi 20 x 20 piksel di canvas pada koordinat (10,10).

var canvas;
var context;

window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10,10,20,20);
};

Sebelum dapat menggambar, element beserta konteksnya harus diketahui dulu. Elemen bisa diketahui dengan metode yang biasa dipakai saat merancang web. Selain getElementById, anda juga bisa menggunakan getElementsByClassName atau getElementsByTagName, tapi saya akui cara termudah adalah dengan menentukan id untuk canvas yang akan digunakan. Selnjutnya, daapatkan konteks canvas. Konteks inila yang menjadi objek perantara untuk menggambar di permukaan elemen canvas.

context = canvas.getContext("2d");

Sekarang, gambar kotaknya. dengan fillRect, ya
prototype:
void ctx.fillRect(x, y, width, height);

context.fillStyle = "red";
context.fillRect(10,10,20,20);



Jika ingin menggambar teks, gunakan fillText.
prototype:
void ctx.fillText(text, x, y [, maxWidth]);

ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);


Untuk menggambar bidang lain, atau jika ingin memanipulasi konteks canvas lebih jauh lagi, baca dokumentasi berikut. Lengkap banget, lho.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Ditunggu tutorial selanjutnya, ya.
Read more

Ekstensi Chrome Untuk Mempercepat Slither.io

Akhir-akhir ini saya kegilaan main Slither.io, itu semenjak saya berhasil jadi peringkat pertama beberapa hari yang lalu. Di awal mencoba, rasanya sulit sekali mencapai skor di atas 10 ribu, tapi sekrang itu bukanllah sesuatu yang sulit lagi. Yang membuat saya sering kalah adalah masalah lag, entah itu karena koneksi ataukah browser, atau mungkin juga memang wajar seperti ini kali, ya.



Herannya, game serupa, seperti Wormax.io dan Oceanar.io yang memiiliki kualitas grafis yang lebih bagus justru lancar jaya saat dimainkan. Hmm, entahlah. Saya sudah tidak memikirkan itu lagi. Saya sudah menemukan rahasia untuk mengatasi lag saat bermain game ini, yaitu dengan menggunakan bantuan ekstensi browser Google Chrome.

Ekstensi ini mengizinkan kita untuk menggunakan kualitas grafis lebih rendah, sehingga proses rendering pada browser akan lebih cepat. Selain itu, beberapa ekstensi juga menyediakan fitur khusus lain, contohnya kita bisa memilih server yang sesuai dengan keinginan kita. Jika server yang terpilih otomatis terasa lambat, kita bisa mencoba bermain dari server lain yang sekiranya lebih cepat. Yang paling seru, kita bisa zoom tampilan game, kini tidak perlu kawatir berlari kencang, tanpa takut dicegat pemain lain di depan. ehehe...


Berikut adalah ekstensi-ekstensi yang bisa anda coba:

1. SlitherPlus (dari slitherplus.org)
2. Slither.io Mods, Zoom, Unlock Skins, Bots (dari slither-io.org)
3. Slither.io Mods, Zoom, Create Skins (dari slithere.org)

Selamat Mencoba...
Read more

Jumat, 27 Januari 2017

Membuat Program Tidak Bisa Di-Kill Task Manager dengan LIBAK (Anti Kill Library)

Program firewall dan antivirus bukan hanya harus melindungi komputer klien dari virus. Itu saja masih belum cukup, ia harus bisa melindungi dirinya sendiri dari serangan virus itu sendiri. Kadang kala, virus jahil bisa mencoba membunuh proses antivirus sebelum si antivirus dapat membasminya.


LIBAK (Anti Kill Library) adalah shared library/dynamic link library yang baru saja dikembangkan oleh Komputoo untuk mengatasi permasalahan ini. Dengan sedikit bumbu rahasia, LIBAK dapat membantu program firewall anda dari serangan musuh.

LIBAK API
LIBAK sangat sederhana, namun handal, hanya ada 2 fungsi dan satu buah struktur data yang harus anda pahami untuk melindungi program anda.

PROTECTDATA Structure
Data ini berguna untuk menyimpan sesi proteksi yang telah dilakukan. Tidak penting untuk mengetahui isi struktur data ini, karena ini berkaitan dengan sistem kerja internal LIBAK.

typedef struct {
DWORD magic;
char oldtkprivs[0x1000];
} PROTECTDATA;

Protect() Function
Fungsi ini akan membuat program anda terlindungi dari pemberhentian paksa (kill), baik itu dari task manager ataupun dari metode lainnya.

BOOL Protect(PROTECTDATA *p);

Fungsi ini membutuhkan sebuah parameter berupa pointer ke PROTECTDATA yang sudah disediakan sebelumnya. Jika fungsi berhasil, akan dihasilkan return value selain 0. Begitu sebaliknya.

Unprotect() Function
Kebalikan dari fungsi Protect(), fungsi ini akan mengembalikan state program anda ke keadaan normal.

BOOL Unprotect(PROTECTDATA *p);

Parameter yang diperlukan adalah struktur ke PROTECTDATA yang sebelumnya sudah digunakan pada saat pemanggilan Protect(). Jika berhasil, nilai return value adalah selain 0.

EXAMPLE
Berikut contoh program sederhana yang mencoba mengimplemenasikan LIBAK API.

/** *
  * LIBAK demo
  * Build with : gcc test.c libak.dll -o test.exe
  * **/
#include <stdio.h>
#include <conio.h>
#include "libak.h"

PROTECTDATA pd;
int main(){
if( !Protect(&pd) ){
printf("Protect failed\n");
exit(0);
}
printf("Now kill me if you can!\n");
getch();
if( !Unprotect(&pd) ){
printf("Unprotect failed\n");
exit(0);
}
printf("Now you can kill me\n");
getch();
}



NOTES
  • Unprotect() HARUS dipanggil sebelum keluar program. Jika tidak, BSOD.
  • Untuk menggunakan LIBAK, program anda harus berjalan sebagai administrator.
  • LIBAK hanya tersedia untuk keperluan non-komersil, penggunaannya harus disertai dengan teks lisensi.
  • Untuk keperluan komersil dan distribusi selain dalam bentuk dynamic link library (misal static library yang di-embed bersama program), harap hubungi admin.
  • Versi non-komersil hanya menyediakan header dan contoh untuk C.
  • Versi non-komersil hanya tersedia untuk Windows 7/8/8.1/10;
DOWNLOAD
LIBAK 1.0 (Free)
Password: komputoo


Read more

Cara Disable Windows Update di Windows 8 dan 10 (Semi-Permanen)

Secara normal, Windows hanya melakukan update ketika kita tersambung wi-fi. Windows sudah tahu, kok, kalau update saat pakai modem bisa membuat kuota cepat habis. :D Sayangnya dia belum bisa tahu juga kalau kita sedang internet pakai Tethering Wi-Fi Android. Eh, diam-diam main update saja.

Meskipun kita pakai Wi-Fi gratisan, tidak selalu berarti bahwa windows update tidak mengganggu. Menurut pengalaman saya, service wuauclt (service yang menangani windows update) sering kali menggunakan resource memori secara berlebihan. Sudah begitu, internet kita jadi makin lemot. Yang tambah menjengkelkan, tidak ada pilihan untuk tidak update di control panel/settings.

Jika anda sama jengkelnya dengan saya, ikuti langkah berikut ini. 100% WORK !

1. Start, ketik 'gpedit.msc';

2. Masuk ke Computer Configuration -> Administrative Templates -> Windows Components -> Windows Update;

3. Double click Configure Automatic Updates;

4. Ubah ke opsi Disable; dan

5. OK. Selesai

Setelah ini, dijamin Windows tidak akan melakukan update, bahkan secara diam-diam sekalipun. Saat melihat pengaturan Windows Update dari Control panel, kita juga melihat sendiri bahwa pengaturan ini sudah benar-benar tidak diaktifkan.


Jika suatu saat berubah pikiran, untuk mengembalikannya tinggal ubah setting-an gpedit.msc dari disable ke enable kembali.
Read more

Apa Yang Terjadi Jika Saya Menjalankan 20 Program Yang Terinfeksi Virus Sality ?

Eksperimen ini adalah eksperimen paling gila yang tidak sepatutnya dicoba. Tapi saya berani-berani aja, sih. Jangan kawatir, saya mengkompilasinya dengan VirtualBox. Meskipun sistem pada akhirnya rusak, itu sama sekali tak menjadi masalah.

Semua data virus yang saya gunakan dalam eksperimen ini saya peroleh dari www.offensivecomputing.net. Ada banyak sekali sampel virus yang berada dalam database situs ini. Di antara sekian banyak jenis dan varian virus, saya memilih Sality. Dengan segera, saya mendownload dan mengeksekusi 20 sampel file yang terindikasi telah terinfeksi berbagai macam virus Sality. Apa yang akan terjadi selanjutnya?

Simak video berikut.



Masih belum percaya? bisa dicoba sendiri di rumah. hehehe :D
Read more

Cara Mengakses Deep Web Tanpa Software

Deep web dapat dicapai dengan enkripsi data yang sedemikian rupa, hal ini membuatnya tidak bisa diakses dengan browser biasa. Contoh software yang dapat menangani request deep web adalah Tor browser. Tapi jika mengakses deep web tidak sesering mengakses situs biasa, atau hanya sekedar untuk melihat kenampakannya seperti apa, menginstall software ini hanya buang-buang waktu dan space harddisk. :p

Jika seperti itu, sebaiknya kita mengaksesnya melalui tor web proxy. Kita cukup mengetikkan alamat di situs proxy tersebut untuk mengakses alamat yang diinginkan. Beberapa situs berikut juga dapat digunakan sebagai search engine dari banyak situs deep web. Jadi bisa sangat membantu, mengingat deep web ini tidak terlacak oleh google.

Sayangnya, banyak situs yang sangat mempedulikan privasi, sehingga hanya orang tertentu saja yang dapat mengakses situs ini. Sehingga, jika kita coba mengetik kata kunci di mesin pencari, tidak banyak hasil relevan yang diperoleh. Tak apa lah, kan cuma sekedar eksperimen.

OK, berikut daftar link yang bisa kamu pakai untuk mengakses deep web;

https://onion.cab
http://onion.to
http://onion.nu
http://onion.link
http://tor2web.org

Good luck, and see ya...
Read more

Belajar Node.js Dan Socket.io Part 2 : Mengirim Data Dari File

Di tutorial sebelumnya, kita sudah berhasil mengirimkan Hello world ke client. Namun, kerja server tidak akan pernah semudah itu. Jadi, untuk tutorial yang kedua ini, kita akan mencoba mengirim data dari file yang berada pada server.

Untuk menangani permintaan file, node.js menyediakan modul filesystem (fs). Ada banyak fungsi yang mudah digunakan untuk menangani file, terutama jika terbiasa berkutat dengan pemrograman C. Memahaminya tidak akan sulit, karena basis manajemen file yang diterapkan hampir sama dengan yang diterapkan libc. Jika belum terbiasa, jangan kawatir, ada pula varian fungsi yang lebih mudah untuk digunakan dari modul tersebut.

https://nodejs.org/api/fs.html

Beberapa fungsi yang ada bekerja secara synchronous, dan beberapa lainnya bekerja secara asynchronous. Fungsi synchronous akan bekerja hingga proses selesai. Jika terjadi error, node.js akan menghasilkan exception dan proses server segera terhenti. Sedangkan fungsi asynchronous akan bekerja dalam background. Semua varian fungsi ini umumnya harus dipanggil dengan menyertakan fungsi callback. Ketika proses yang dikerjakan dalam background selesai, callback akan dipanggil dengan memberikan hasil dan statusnya. Ketika terjadi error, node.js tidak akan menghasilkan exception. Adalah tugas programmer untuk memilih tindakan, tepat setelah error terjadi.

Fungsi asynchronous akan berguna ketika mengimplementasikan server yang sudah benar-benar siap pakai. Ini untuk menghindari proses server terhenti ketika error. Meski demikian, fungsi asynchronous lebih mudah untuk dipelajari, cocok untuk yang masih tahap belajar. Jadi, untuk tutorial kali ini, kita lebih banyak menggunakan varian fungsi synchronous.



Apa sih yang sebenarnya akan dibahas disini? Sebenarnya eksperimen yang akan kita lakukan kali ini cukup simpel, yaitu mengirimkan data dari file, bukan lagi hello world.

test.js
var http = require('http');
var fs = require('fs');

var app = http.createServer(function(request, response) {
var data;

data = fs.readFileSync("test.html");
response.writeHead(200, {"Content-Type": 'text/html'});
response.write(data);
response.end()
console.log("Request OK");
});

app.listen(3000);

Method readFileSync() memerlukan sebuah parameter wajib berupa nama file. Hasil return value yang diperoleh berupa data file hasil pembacaan. Jika error, misalnya karena file tidak ada, node.js akan menghasilkan exception.

test.html
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Lorep Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Hasilnya akan seperti ini:


Tapi rasanya masih belum lengkap ya? OK, kita kembangkan dengan beberapa baris kode.
var url = require('url');
var http = require('http');
var fs = require('fs');
var path = require("path");

var app = http.createServer(function(request, response) {
var uri;

uri = url.parse(request.url).pathname;
if (uri == '/') uri += 'index.html';
uri = path.join(__dirname,uri);

data = fs.readFile(uri, function(err,data){
if(err){
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
} else {
response.writeHead(200, {"Content-Type": 'text/html'});
response.write(data);
response.end()
console.log("Request OK");
}
});
});

app.listen(3000);

Dengan modul url, kita bisa menemukan konten manakah yang sedang direquest oleh client. Misalnya, ketika diakses http://localhost/mypage.html, modul ini bisa digunakan untuk memisahkan domain dengan alamat file relatif yang akan diakses; yaitu /mypage.html.

uri = url.parse(request.url).pathname;

Ketika mengakses folder root server ( / ), apa yang harus kita kirim? kita akan meniru web server pada umumnya, yaitu mengirim konten dari file index.html.

if (uri == '/') uri += 'index.html';

Karena alamat uri bersifat relatif dan terdapat awalan slash, kita tidak bisa serta merta menggunakannya sebagai argumen untuk membaca file. Jadi kita menggabungkannya dengan __dirname. Nilai ini berupa konstan yang menunjukkan current directory dari file yang sedang dieksekusi node.js.

uri = path.join(__dirname,uri);

Untuk menghindari exception, disini kita akan menggunakan varian readFile asynchronous. Prototypenya adalah sebagai berikut.
fs.readFile(file[, options], callback)

Sedangkan prototype fungsi callbacknya:
callback(error, data)

Apabila readFile mengalami error, dapat dipastikan argumen error bernilai selain 0. Penyebab error bisa bermacam macam, tapi pada umumnya adalah karena file tidak ditemukan. Untuk itu, jika error kita akan mengirimkan 404 ke client sebagai indikasi bahwa file yang diminta tidak ditemukan di server.

if(err){ //err != 0
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}

Penasaran, hasilnya seperti apa ya?

file index.html ditampillkan pada home page

mengakses file 'a' yang tidak ada


WOW, keren...
Masih semangat bukan? Itu masih bukan apa-apa. Nanti di part selanjutnya, kita akan mencoba eksperimen yang lebih keren lagi.

See ya...
Read more

Kamis, 26 Januari 2017

Belajar Node.js Dan Socket.io Part 1 : Hello World

Sulit mencari tutorial pemrograman node.js + socket.io di Indonesia, jadi sebagian besar referensi pun saya ambil dari situs luar. Justru, hal itulah yang membuatnya semakin menarik dan menantang. Tujuan awal saya mempelajari komponen ini adalah untuk membuat multiplayer game. Belum sampai selesai sih, baru berhasil melakukan sinkronisasi data antar client. Prinsipnya, semua pemain akan memiliki data dari seluruh pemain yang berada dalam satu area server. Jika salah satu player melakukan aksi, misalnya berjalan ke arah kiri; ini akan diberitahukan ke server dan disebarkan ke pemain lain. Hasilnya akan segera diupdate secara bersamaan, sehingga semua player akan memiliki tampilan yang sama.



Namun karena tulisan ini masih menjelaskan secara otodidak, saya hanya mengkover teori dasar komunikasi antara client dan server dulu.

OK, let's go!

Pertama, pastikan node.js sudah terinstall. Node.js akan berperan sebagai server yang bekerja berdasarkan script yang kita buat. Ibaratnya seperti Apache + PHP. Node.js berperan sebagai keduanya, sebagai server dan juga hypertext processor dengan dukungan javascript. Sistem manajemen node.js bersifat modular, kita dapat menginstall modul yang berguna untuk memperluas fungsi node.js bila dibutuhkan. Untuk melakukannya, kita bisa menggunakan npm (node.js package manager).

Sekarang, kita harus buat file package.json di sebuah folder yang telah kita pilih untuk menampung source code. Folder ini juga yang akan menyimpan modul yang kita install.

{
  "name": "hello-world",
  "version": "0.0.1",
  "description": "A sample Node.js",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "socket.io": "^1.4.0"
  },
  "engines": {
    "node": "4.0.0"
  },
  "keywords": [
    "node",
    "sample",
    "test"
  ],
  "author": "Irvan",
  "license": "MIT"
}

* Yang saya tebalkan mungkin akan perlu perubahan di komputer anda, tergantung versi node.js dan proyek yang anda buat.

Jika package.json sudah dibuat, sekarang kita bisa menginstall modul yang diperlukan melalui npm. Semua moful yang dibuat ini akan dimasukkan ke dalam folder node_modules yang dibuat secara otomatis di dalam folder project yang telah anda pilih.

npm install socket.io

* Anda juga bisa mencoba dan melihat kegunaan modul-modul  lain dari: https://www.npmjs.com/browse.
* Dokumentasi untuk modul internal nodejs ada di: https://nodejs.org/api/modules.html

Eksperimen pertama tiak akan langsung melompat ke komunikasi client-server secara lengkap dahulu. Kita akan coba eksperimen paling sederhana, yaitu mencetak "Hello world"

var http = require('http');

var app = http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": 'text/html'});
response.write("Hello world");
response.end()
console.log("Request OK");
});

app.listen(3000);

Kode di atas akan mengirim balasan/respon ketika client merequest sesuatu dari server. Entah itu ketika mengakses homepage atau yang lain, server akan tetap membalas "Hello word"


Variabel app merupakan objek yang diinisialisasikan dari kelas http melalui method createServer. Untuk melihat dokumentasi lengkap tentang kelas http dan method createSever, klik disini. Adapun, cuplikan prototypenya adalah sebagai berikut.

http.createServer (requestListener);

Parameter requestListener adalah fungsi callback yang berperan sebagai listener/pendengar. Mendengar apa? ya mendengar request dari client. Bentuk fungsinya:

resquestListener(request, response);

Ketika server memperoleh request dari client, requestListener akan dipanggil dengan 2 argumen, berupa data objek request dari client; dan data objek response yang harus diolah sebelum dikirim ke client.

Response yang harus dikirim oleh server berupa http packet yang sesuai dengan permintaan client. Sebuah paket terdiri atas 2 bagian penting:
- http packet header
- http packet body

Header berperan sebagai deskriptor dari data yang dikirim dalam body. Dan body adalah data hasil yang akan diterima client. Artikel Wikipedia berikut ini mungkin akan sedikit membantu (link).

Simpan source code sebagai test.js, lalu jalankan dari cmd:
# node test.js

Sampai disini dulu eksperimen kita. Berikutnya, nanti kita akan melanjutkan mengenau cara mengolah request dan mngirim data dari file.

See you again.

Read more

Senin, 16 Januari 2017

WProtect URL Blocker and Redirection Free

WProtect is a software utility that useful for blocking and redirect specific URL. Very useful for parents who are concerned with their children when accessing the internet. There are many negative sites that should not be accessed by them. Many ISPs are already providing services blocking, but sometimes they have less complete database. This software will help to resolve that issue.


Helps and some notes before using WProtect 0.1.x
- Use "root" as default password
- Use F11 to show
- Use F12 to hide
- Use "http://" prefix for target URL redirection
- Stop daemon before saving rules
- NO HTTPS support

WProtect is now available for Windows XP SP 2 or higher (x86 only).
Download WProtect 0.1.1 now for free.


Read more

Rabu, 11 Januari 2017

WOW, Alexa Rank Meningkat 4000+ Dalam 3 Hari

Apa rahasianya? Kasih tau gak ya... :D
Ranking sebenarnya tidak terlalu penting bagi saya. Tapi, kalau bisa meningkat, saya cuma bisa bilang Alhamdulillah, sesuatu...
alexa icon

Sayangnya, yang saya bicarakan bukan blog Komputoo ini, namun situs pencari lomba yang saya kembangkan paruh waktu, www.lomba.asia. Entah kenapa, ranking situs saya meningkat begitu saja, padahal optimalisasi SEO hanya saya lakukan di awal-awal saja. Memang sih, usaha saya memperbarui SEO itu berhasil. Tapi, bagaimana  bisa ranking naik dengan sendirinya?

Jawabannya simpel, terus semangat buat artikel. Situs saya biasa membuat 10+ artikel per harinya lho. Hah, kok bisa? ini karena situs tersebut dibuat dengan kode crawler untuk mencari lomba dari situs lain. Jadi saya tidak perlu terlalu repot memikirkan artikel apa yang harus dibuat. hehehe

Auto-generated content? Bukan auto-generated content, atau bisa dibilang tidak sepenuhnya auto-generated content, karena saya hanya memprogramnya untuk mengambil sedikit cuplikan dari situs sumber. Sisanya biarkan pengguna yang mengunjungi situs sumber untuk membaca artikel selengkapnya. So, tidak ada yang dirugikan. Kedua belah pihak sama-sama untung. Saya dapat trafik, dia juga bisa jadi dapat tambahan dari www.lomba.asia.

Jika dengan cara seperti ini saja bisa meningkatkan rank secepat itu, tentu hasilnya lebih amazing jika mau menulis dengan keyboard dan tangan sendiri. Benar kan?

Kesimpulannya, sama seperti jawabannya. Jika mau trafik makin meningkat, jangan melulu fokus ke SEO, tingkatkan juga frekuensi artikelnya juga. :)

Yep, sampai disini dulu, semoga tulisan ini bermanfaat.
Read more

Selasa, 10 Januari 2017

Inilah Kenapa Saya Suka Embarcadero C++ Builder 10.1 Berlin Starter Edition

Puas sekali rasanya setelah menginstall Embarcadero C++ Builder 10.1 Berlin Starter Edition ini. Mengapa? Rasanya sudah lama sekali saya ingin membuat program native dengan C++ dengan dimanjakan RAD tool untuk mendesain GUI. Tak disangka-sangka, hari ini saya menemukan impian yang sudah lama saya pendam ini. hehehe
embarcadero c++ builder icon

Tak dipungkiri, memang Visual Studio adalah IDE terbaik untuk pemrograman. Namun saya sedikit kecewa mengetahui kenyamanan RAD tool yang harus dibayar dengan output build yang bersifat non-native. Mau tak mau, aplikasi seperti ini harus dibayar dengan dependensi terhadap runtime -- .NET Framework.

Tidak ada yang salah dengan .NET. Hanya saja, dari sini saya merasa ada ketidak-konsistenan Microsoft untuk memberikan layanan prima bagi penggunanya. Ini terlihat dari banyaknya versi .NET yang ada. Setiap aplikasi biasanya dibangun dengan framework versi tertentu. Yang menjengkelkan, versi framework yang digunakan bukanlah ketetapan versi minimum framework untuk menjalankan aplikasi. Namun, framework yang dipilih tersebut terbilang strict untuk program. Jadi, misalnya program dibangun dengan framework versi 2, namun di komputer target hanya ada framework versi 3, user harus menginstall .NET versi 2 juga. Oh, meeen..

Dengan membangun aplikasi native, kita tidak perlu kawatir lagi soal depndensi yang aneh-aneh. Sebenarnya, sih, aplikasi non-native hanya berguna jika menargetkan lebih dari satu platform. Jika .NET bisa berperan seperti layaknya Java, tentu saja saya lebih prefer membuat aplikasi non-native. Sayangnya, ya, ituu. .NET hanya berorientasi ke produk-produk Microsoft. Saya pikir, tidak terlalu 'wah' jika memilih membangun aplikasi semacam ini.

Pada umumnya, pemrograman berbasis native perlu skill ekstra untuk memahami internal sistem dari target OS. Apalagi, jika harus berhadapan dengan project aplikasi GUI. Bayangannya graphical, tapi koding dan desainnya kebanyakan ngetik. :3

Beruntung sekali saya mengenal Embarcadero C++ Builder 10.1 Berlin Starter Edition yang saya peroleh secara gratis dari promo (klik juga untuk ikutan). Desain GUI sudah difasilitasi RAD, namun anehnya koding tidak serumit membuat aplikasi native untuk membangun GUI seperti biasanya.

C++ builder RAD GUI

Berikut, kode sederhana untuk menambah level progress bar. Jangan kaget dengan kode diluar method TForm2::Button1Click, ya. Semua itu auto generated, lhoh!

C++ builder code editor


Hasil build berjalan dengan lancar. Sudah saya periksa internalnya, dan, ya, memang benar bahwa output yang dihasilkan C++ Builder ini bersifat native. Sekarang, saya benar-benar tidak sabar untuk mewujudkan impian lama, yang dari dulu hanya sebatas angan. So, let's go coding again. :)

NB : Penulis sama sekali tidak ada maksud promosi atau semacamnya
Read more