Algoritma Facemash (bagian 3)

Warning: Sebelum membaca post ini, anda diharapkan mengerti terlebih dahulu tentang bahasa pemrograman PHP, MYSQL, dan HTML. Serta anda diharapkan mengerti cara mengkoneksikan website anda dengan server yang anda pakai.

Sesuai janji saya di bagian kedua, di bagian ketiga ini saya akan membahas tentang pembuatan website Facemash secara keseluruhan. Jika anda belum membaca bagian satu dan bagian dua sebaiknya anda membaca terlebih dahulu, karena pada bagian ini saya akan membahas hal-hal yang menyangkut teknis saja. Segala penjelasan tentang teori dan hal-hal yang berkaitan dengan Elo Rating System telah dijelaskan di bagian pertama dan kedua.

Baiklah saya akan sedikit berbaik hati, bagi anda yang malas membaca bagian satu dan dua, saya akan mereviewnya sedikit. Apa itu Facemash? Pernah menonton film The Social Network, disana Mark (Facebook founder) dalam ceritanya membuat website untuk memilih diantara dua gambar wanita, mana dari dua gambar wanita tersebut yang dirasa paling HOT. Ke-HOT-an tersebut kemudian diurutkan berdasarkan rating. Rating tersebut didapat dari dari banyaknya dia menang, kalah dan mungkin seri yang merupakan hasil dari pemilihan gambar sebelumnya. Di post bagian satu dan dua, saya telah menjelaskan bagaimana cara me-rating yang digunakan Mark yaitu menggunakan Elo Rating System beserta algoritmanya. Pada bagian ini, akan dijelaskan secara step-by-step pembuatan website Facemash tiruannya.

Anda bisa melihat demo dari Facemash tiruan yang saya buat ini. Lihat Demo.

Pertama-tama yang anda perlukan adalah konfigurasi dengan server yang anda pakai, untuk itu anda memerlukan module yang mengkoneksikan website anda,

$dbhost="localhost";
$dbuser="DATABASE_USERNAME";
$dbpass="DATABASE_PASSWORD";
$dbname="DATABASE_PASSWORD";

$link = mysql_connect($dbhost, $dbuser, $dbpass); 
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db($dbname); 

Ubah nilai $dbhost, $dbuser, $dbpass. $dbname, sesuai dengan konfigurasi server anda. Kemudian save file tersebut dengan nama module-config.php.

Setelah membuat modul konfigurasi, yang anda perlukan adalah mengikutsertakan modul tersebut ke file utama, dengan cara:

include("module-config.php");
include("elofunction.php");

dengan elofunction.php adalah modul yang telah kita buat di post bagian kedua.

Karena dalam pembuatan website Facemash memerlukan foto, anggaplah kita memiliki foto-foto yang diperlukan yang disimpan dalam folder bernama img. Di dalam folder tersebut, misalkan kita isikan dengan tes1.jpg, tes2.jpg sampai tes8.jpg yang merupakan file foto yang berformat jpg (anda bisa memilih foto siapapun teman anda, kemudian me-rename nya menjadi tes1.jpg sampai tes8.jpg). Karena asumsi disini kita memiliki delapan foto, maka kita memiliki delapan korban yang bisa di vote. Untuk memunculkan foto tersebut secara random, kita buat fungsi di php yaitu:

$a=1;
$b=1;

while($a==$b) {
	$a=rand(1,8);
	$b=rand(1,8);
}

yang berarti kita telah mendapatkan nilai $a dan $b secara acak namun nilainya tidak pernah sama.

Apalagi variabel yang kita perlukan sebelum memunculkan website? Pastinya kita membutuhkan nama korban yang akan di vote. Kita akan ambil nama korban tersebut dari database MySQL (databse MySQL tersebut akan kita buat kemudian), dengan cara:

$query="SELECT * FROM victim_members ORDER BY id";
$perintah=mysql_query($query);
while($d=mysql_fetch_array($perintah)){
	if($d['id']==$a) {
		$namaPlayerA = $d['nama'];
	}
	if($d['id']==$b) {
		$namaPlayerB = $d['nama'];
	}
}

yang berarti kita telah mendapatkan nama korban dan disimpan ke dalam variabel $namaPlayerA dan $namaPlayerB.

Dari penjelasan diatas, kita telah dapatkan 2 korban yang akan di vote. Tapi kita belum memiliki data apapun tentang dua korban tersebut. Data tentang dua korban tersebut kita ambil dari database MySQL (yang akan dijelaskan kemudian), data yang kita ambil meliputi nilai point korban A dan korban B, berapa kali A dan B ikut bertanding (di vote), berapa kali A dan B menang, seri dan kalah. Semua data tersebut kita ambl dengan cara:

if(isset($_POST['SKotak1']) or isset($_POST['SKotak2']) or isset($_POST['SKotak3'])) {
	$query="SELECT * FROM victim_members ORDER BY id";
	$perintah=mysql_query($query);
	while($d=mysql_fetch_array($perintah)){
		if($d['id']==$_POST['kotak1']) {
			$ELOplayerA = $d['EloPoint'];
			$P1 = $d['P'];
			$W1 = $d['W'];
			$D1 = $d['D'];
			$L1 = $d['L'];
		}
		if($d['id']==$_POST['kotak2']) {
			$ELOplayerB = $d['EloPoint'];
			$P2 = $d['P'];
			$W2 = $d['W'];
			$D2 = $d['D'];
			$L2 = $d['L'];
		}
	}
}	

dengan isset SKotak1 or SKotak2 or SKotak3 menandakan jika vote tengah berlangsung. Nilai point korban A disimpan dalam variabel $ELOplayerA, banyaknya pertandingan disimpan di variabel $P1, menang-kalah-seri berturut turut disimpan pada variabel $W1, $D1, dan $L1. Begitu juga dengan korban B.

Data tentang kedua korban sudah kita dapatkan, kemudian baru kita proses dengan cara:

if(isset($_POST['SKotak1'])) {
	$ekspektasiA = Ekspektasi($ELOplayerA, $ELOplayerB);
	$ekspektasiB = 1-$ekspektasiA;
	$ELOplayerA = $ELOplayerA + EloRating($ELOplayerA, 1, $ekspektasiA);
	$ELOplayerB = $ELOplayerB + EloRating($ELOplayerB, 0, $ekspektasiB);
	if($ELOplayerA < 0) { $ELOplayerA = 0; }
	if($ELOplayerB < 0) { $ELOplayerB = 0; }
	$P1++;$W1++;$P2++;$L2++;
	$kueri="UPDATE victim_members SET EloPoint='".$ELOplayerA."', 
	P='".$P1."', W='".$W1."' WHERE id='".$_POST['kotak1']."'";
	$kueri2="UPDATE victim_members SET EloPoint='".$ELOplayerB."', 
	P='".$P2."', L='".$L2."' WHERE id='".$_POST['kotak2']."'";
	$perintah=mysql_query($kueri);
	$perintah=mysql_query($kueri2);
}else if(isset($_POST['SKotak2'])) {
	$ekspektasiA = Ekspektasi($ELOplayerA, $ELOplayerB);
	$ekspektasiB = 1-$ekspektasiA;
	$ELOplayerA = $ELOplayerA + EloRating($ELOplayerA, 0, $ekspektasiA);
	$ELOplayerB = $ELOplayerB + EloRating($ELOplayerB, 1, $ekspektasiB);
	if($ELOplayerA < 0) { $ELOplayerA = 0; }
	if($ELOplayerB < 0) { $ELOplayerB = 0; }
	$P1++;$L1++;$P2++;$W2++;
	$kueri="UPDATE victim_members SET EloPoint='".$ELOplayerA."', 
	P='".$P1."', L='".$L1."' WHERE id='".$_POST['kotak1']."'";
	$kueri2="UPDATE victim_members SET EloPoint='".$ELOplayerB."', 
	P='".$P2."', W='".$W2."' WHERE id='".$_POST['kotak2']."'";
	$perintah=mysql_query($kueri);
	$perintah=mysql_query($kueri2);
}else if(isset($_POST['SKotak3'])) {
	$ekspektasiA = Ekspektasi($ELOplayerA, $ELOplayerB);
	$ekspektasiB = 1-$ekspektasiA;
	$ELOplayerA = $ELOplayerA + EloRating($ELOplayerA, 0.5, $ekspektasiA);
	$ELOplayerB = $ELOplayerB + EloRating($ELOplayerB, 0.5, $ekspektasiB);
	if($ELOplayerA < 0) { $ELOplayerA = 0; }
	if($ELOplayerB < 0) { $ELOplayerB = 0; }
	$P1++;$D1++;$P2++;$D2++;
	$kueri="UPDATE victim_members SET EloPoint='".$ELOplayerA."', 
	P='".$P1."', D='".$D1."' WHERE id='".$_POST['kotak1']."'";
	$kueri2="UPDATE victim_members SET EloPoint='".$ELOplayerB."', 
	P='".$P2."', D='".$D2."' WHERE id='".$_POST['kotak2']."'";
	$perintah=mysql_query($kueri);
	$perintah=mysql_query($kueri2);
}

isset SKotak1 menandakan bahwa si korban A dipilih / menang dalam vote tersebut kemudian diproses sebagaimana mestinya korban A menang, begitu pula dengan isset SKotak2 yang menandakan si korban B lah yang memenangkan vote tersebut. isset SKotak3 menyatakan bahwa kedua-duanya tidak dipilih dan mereka dinyatakan seri.

Fungsi PHP sudah selesai, sekarang yang belum terbuat adalah form HTML untuk menampilkannya dalam browser, secara sederhana saya membuatnya seperti ini:

<div class="utama">
    <div class="judul">FACEMASH tiruan</div>
    <div class="frontman">Which one from this two pics suit you (almost your type)!
    Choose by clicking the photo or click "They are not my type!" if not any of them.</div>
    <div class="kotak">
        <div class="kotak1"></div>
        <div class="circleK">or</div>
        <div class="kotak2"></div>
        <div class="button orange"><a href="document.forms['notmytype'].submit();">They are not my type!</a></div>
        <div class="button"><a href="http://www.blogger.com/result.php">see result</a></div>
    </div>
</div>

Untuk menampilkan hasil vote tersebut, anda hanya perlu membuat satu file php baru dan menuliskan codenya seperti berikut:

include("module-config.php");

$i=1;
$query="SELECT * FROM victim_members ORDER BY EloPoint DESC";
$perintah=mysql_query($query);
while($d=mysql_fetch_array($perintah)){
    echo '<div class="kotakpoto">';
    echo $i++.'. <img src="img/tes'.$d['id'].'.jpg" alt="'.$d['nama'].'" />';
    echo $d['nama'];
    echo ', <span style="color: #cccccc;">Point: '.$d['EloPoint'].'</span>';
    echo '</div>';
}

Untuk database MySQL yang saya gunakan, memiliki struktur seperti dibawah ini:

CREATE TABLE `victim_members` (
	`id` int(11) auto_increment,
	`nama` varchar(100) NOT NULL,
	`URLfoto` longtext NOT NULL,
	`EloPoint` float NOT NULL,
	`P` int(11) NOT NULL,
	`W` int(11) NOT NULL,
	`D` int(11) NOT NULL,
	`L` int(11) NOT NULL,
	PRIMARY KEY (`id`)
) TYPE=MyISAM;

Mungkin segitu aja penjelasan saya tentang bagaimana membuat website Facemash tiruan ini. Jika ada pertanyaan, tuliskan di kolom komentar di bawah. Anda bisa melihat demo dari website Facemash tiruan ini DISINI, dengan source program DISINI (pass: hotswaps.blogspot.com). Sekian dari saya, terima kasih telah membaca tulisan ini hingga bagian 3.

PS: diperbolehkan mengcopy-paste tulisan ini, namun hargai penulis dengan menyertakan sumbernya: http://hotswaps.blogspot.com.

Wass.

Referensi:

http://en.wikipedia.org/wiki/Elo_rating_system

http://www.glicko.net/

Paper “Elo-rating as a tool in the sequential estimation of dominance strengths” oleh PAUL C. H. ALBERS & HAN DE VRIES, Utrecht University

Paper “Rating The Chess Rating System” oleh Mark E. Glickman & Albyn C. Jones, Boston University

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s