Dengan sedikit pengetahuan SQL dan PHP, kamu bisa membuat fitur-fitur sederhana seperti login, online highscore, atau fitur save.

Persiapan

Ada beberapa software dan tools yang perlu kamu download

  • XAMPP => digunakan untuk membuat web server di komputer kamu. Software ini digunakan untuk testing dan menjalankan aplikasi PHP yang akan digunakan sebagai alat komunikasi antara database server dengan game C2 kita.

  • Sublime Text => sebagai code editor PHP

  • Allow-Control-Allow-Origin: (Chrome) atau CORS Everywhere (Firefox) => agar AJAX bisa digunakan untuk request data (belum coba yang Firefox).

Jika kamu tidak sedang develop, matikan fitur ini

  • Postman => belum dipakai sih, tapi bersiapan aja kalau besok saya bikin tutorial lagi. Hehe.

Kalau kamu gak tau apa-apa tentang SQL dan PHP, baca baca dulu di bawah :

  • Pengenalan SQL
  • PHP Mysql

    Jangan malas! yang dijelaskan di sini cuma dasar. Kalau pengen bikin yang lebih kompleks ya belajar sendiri.

Mosok apa apa harus dibuatkan tutorialnya.


Instalasi

XAMPP

1.) Tinggal buka installernya, lalu klik Next aja terus sampai selesai. Setelah itu buka XAMPP Control Panelnya

2.) Nyalakan dua paling atas

Kamu harus melakukan ini setiap kali mulai coding

3.) Buat folder baru di folder htdocs di lokasi instalasi XAMPP. Tempat saya ada di C:\xampp\htdocs\, buat folder baru namanya 'belajar-c2'.

Sublime Text

4.) Buka Sublime Text lalu klik File > Open Folder lalu pilih folder 'belajar-c2' yang tadi dibuat.

CORS

Cukup klik icon CORS di pojok kanan atas browser (Chrome) untuk menyalakannya,


Membuat Database

1.) Setelah selesai install XAMPP dan menyalakan Apache dan MySQL, akses localhost/phpmyadmin dari browser kamu.

2.) Klik New di sebelah kiri, lalu buat database baru bernama 'belajar_c2'

3.) Klik 'belajar_c2' lalu buat dua buah tabel bernama users dan scores.

Tabel users :

Tabel scores :

4.) Buat relasi tabel

Klik lagi 'belajar_c2' lalu pilih More (sebelah kanan) > Designer

Pilih menu Create relation

  • Pilih set referenced key pada username milik tabel users
  • Pilih set foreign key pada username milik tabel scores
  • Pilih on delete cascade

Hasilnya, kedua tabel akan dihubungkan oleh sebuah garis relasi.

5.) Script Koneksi database

Klik kanan 'belajar_c2' di Sublime, lalu pilih New File. Beri nama dbconnector.php

Ketikkan berikut :

Kok gak bisa di copy-paste?

Iya emang tak sengaja

Ketika kamu mau launching, ganti username, password, dan nama database sesuai yang diberikan oleh layanan hosting.


Fitur Register

Fitur ini saya buat sederhana seperti website.

1.) Coding PHP

Buat lagi file bernama register.php dan ketikkan script di bawah

Saya anggap kamu sudah punya bekal pengetahuan dari link belajar yang disertakan di atas. Intinya, server akan ngecek username yang diinputkan user sudah ada belum. Kalau sudah, ganti yang lain (gak boleh sama).

2.) Testing

Lewat browser, buka link localhost/belajar-c2/register.php?username=puntodamar&password=puntodamar

Kalau codingmu gak ada yang salah, maka dalam database akan terbuat user baru bernama puntodamar.

Perhatikan juga password yang awalnya cuma 'puntodamar' menjadi kombinasi huruf dan angka gak jelas untuk keamanan.

Kalau ada kesalahan coding, tinggal copy paste error di google. Pertanyaan terkait dengan kesalahan sintaks tidak akan saya jawab.

3.) Buat event di C2

Buat global variable bernama DOMAIN lalu set initial value menjadi http://localhost/belajar-c2/
Dalam coding ini, kita ambil data username dan password dari TextBox. Lihat lagi gambar register di atas.

Hasil :

Fitur Login

Login di sini cuma sekedar ngecek username dan password benar atau salah.

1.) Script PHP

Filename : login.php

Coba dulu test dengan menuju ke link :
http://localhost/belajar-c2/login.php?username=puntodamar&password=puntodamar

2.) Event C2

Hasil :


Fitur Highscore

Di dalam highscore, kita melakukan query lima skor tertinggi.

1.) Coding PHP

Filename : get_highscore.php

Test dengan mengunjungi link http://localhost/belajar-c2/get_highscore.php

Hasil dalam database saya :

2.) Event C2

Hasil dari AJAX adalah teks yang berisi lima highscore terbaik (dalam kasus ini cuma dua karena jumlah user dalam database emang segitu).

Untuk memecah data highscore setiap user (yang dibatasi oleh karakter '|'), digunakan ekspresi tokenat()


Submit Highscore

Seharusnya, yang boleh submit highscore hanyalah user yang sudah terdaftar dan melakukan login. Namun dalam tutorial ini, kita akan menampilkan semua user, lalu memilih mana yang akan submit highscore menggunakan objek List.

1.) Memasukkan daftar semua user ke dalam list

Filename : get_users.php
Test ke : http://localhost/belajar-c2/get_users.php

2.) Submit skor

Filename : submit_score.php

  • Jika sudah pernah submit score sebelumnya, tinggal ganti nilai score saja, tidak perlu insert lagi

  • baris 19-32 cuma mengulang isi get_highscore.php

Test : http://localhost/belajar-c2/submit_score.php?username=puntodamar&score=10

Ubah event sebelumnya menjadi seperti berikut :

Hasil :


Yang Perlu Diperhatikan

  • Kalau buat game browser, URL game dan AJAX request harus sama. Misalnya game ditaruh di www.mydomain.com, maka request juga harus ke www.mydomain.com/get_users.php (contoh)

  • coding di sini masih rawan bug dan hacking. Emang tak buat minimalis supaya kamu lebih banyak belajar. Gimana cara biar lebih aman? Contohnya bisa baca di sini . Atau, main main pakai plugin Cookie .


Download Source code

Kamu bisa download source code di sini