• Tidak ada hasil yang ditemukan

Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking.

N/A
N/A
Protected

Academic year: 2017

Membagikan "Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking."

Copied!
98
0
0

Teks penuh

(1)

RANCANG BANGUN PERMAINAN TEKA - TEKI SILANG

(TTS) BERBASIS WEB MENGGUNAKAN ALGORITHM

BACKTRACKING

TUGAS AKHIR

Diajukan Oleh:

Diki Hartanto NPM: 0634010223

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INDUSTRI

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”

(2)

2011

judul : Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking

Pembimbing I : Nur Cahyo Wibowo, S.Kom, M.Kom Pembimbing II : Faisal Muttaqin, S.Kom

Penyusun : Diki Hartanto

Npm : 0634010223

ABSTRAK

Pada zaman ini, permainan-permainan yang menggunakan karakter semakin banyak. Tidak semua menganggap permainan tersebut mudah. Oleh karena itu, beberapa orang mencoba menyelesaikan permainan tersebut menggunakan teknik komputasi. Adakalanya suatu penyelesaian membutuhkan lebih dari satu algoritma untuk menyelesaikannya.

Teka-teki silang adalah teka-teki kata yang membentuk suatu kotak/matriks yang terdiri dari blok hitam dan putih. Tujuan dari permainan ini adalah mengisi kotak putih dengan huruf sehingga membentuk suatu kata baik mendatar atau menurun dengan bantuan yang ada.

Dalam metoda analisis yang akan kita pakai, kita membutuhkan sebuah algoritma yang akan mengisikan kata-kata dalam basisdata kedalam suatu blok kata dalam kotak. Algoritma biasa digunakan dalam pencarian solusi adalah algoritma backtracking. Dengan optimasi yang juga diterapkan dalam algoritma, kita dapat membentuk metoda penyelesaian/pencarian solusi yang akan kita analisis. Analisis dilakukan bergantung kepada suatu kriteria yang terdapat pada permainan teka-teki. Seperti jumlah huruf dalam kotak kata atau keterkaitan antar kata. Diharapkan teknik ini menjadi dasar penelitian lebih lanjut.

(3)

KATA PENGANTAR

Dengan memanjatkan puji syukur atas kehadirat Allah SWT atas segala rahmat, taufik, hidayah dan inayah-Nya sehingga penulis dapat menyelesaikan laporan Tugas Akhir ini yang berjudul : Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm

Backtracking.

Adapun Tugas Akhir ini disusun untuk memenuhi syarat memperoleh gelar Sarjana Teknik di jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Pembangunan Nasional “Veteran” Jawa Timur.

Tugas Akhir ini dapat terselesaikan karena tidak lepas dari bimbingan pengarahan, petunjuk dan bantuan dari berbagai pihak yang membantu dalam penyusunannya. Oleh karena itu, penulis tidak lupa untuk menyampaikan terima kasih yang tak terhingga kepada :

1. Bapak Ir. Sutiyono, MT, selaku Dekan Fakultas Teknologi Industri UPN “Veteran” Jawa Timur.

2. Bapak Basuki Rahmat, S.Si, MT, selaku Ketua Jurusan Teknik Informatika UPN “Veteran” Jawa Timur.

3. Bapak Nur Cahyo Wibowo, S.Kom, M.Kom selaku Dosen Pembimbing. 4. Bapak Faisal Muttaqin, S.Kom selaku Dosen Pembimbing.

(4)

6. Rekan-rekan kontrakan atas dukungan dan kerjasamanya untuk menyelesaikan Tugas Akhir selama ini.

7. Teman terbaikku, Rendy, Senja, Anwar Fadli, Windy Nugroho, Praharsa, Frista Ayu, Dika W, Shita Kusuma Wardani, Yoga, Kurnia Adi, atas dukungan dan do’anya.

8. Teman-teman Kelas E angkatan 2006 atas dukungan, do’a dan kekompakkannya.

9. Serta semua pihak yang senantiasa mendukung.

Penulis menyadari bahwa penulisan laporan Tugas Akhir ini masih jauh dari kesempurnaan, baik isi maupun penyajiannya. Oleh karena itu, saran dan kritik yang membangun akan penulis terima dengan senang hati.

Akhir kata, semoga laporan ini dapat memberikan manfaat bagi semua pihak yang berkepentingan dan semoga Allah SWT memberikan balasan kepada semua pihak yang telah memberikan bantuan kepada penulis. Amin.

Surabaya, 10 Juni 2011

(5)

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi dari waktu ke waktu mengalami kemajuan yang sangat pesat. Seiring dengan perkembangan itu pula, permainan-permainan yang menggunakan karakter juga semakin banyak. Contoh permainan tersebut adalah scramble, teka-teki silang, dan anagram. Tidak semua menganggap permainan tersebut mudah. Oleh karena itu, beberapa orang mencoba menyelesaikan permainan tersebut menggunakan teknik komputasi.

Permainan teka-teki silang merupakan salah satu permainan asah otak yang diminati banyak orang. Teka-Teki Silang atau sering disingkat TTS adalah suatu permainan di mana kita harus mengisi ruang-ruang kosong (berbentuk kotak putih) dengan huruf-huruf yang membentuk sebuah kata berdasarkan petunjuk yang diberikan. Petunjuknya biasa dibagi ke dalam dua kategori, yakni 'Mendatar' dan 'Menurun' tergantung posisi kata-kata yang harus diisi. Papan permainan tersebut terdiri atas kotak- kotak berwarna putih.

(6)

akan dinyatakan selesai jika, pemain mampu mengisi semua deretan kotak-kotak putih mendatar dan menurun tersebut.

Permainan ini memang cukup mudah untuk dimainkan, namun sayangnya untuk dapat membuat soal yang valid merupakan hal yang sulit. Dengan adanya hal tersebut, dalam penelitian ini akan dibahas penyelesaian masalah tersebut dengan bantuan program komputer. Pembuat soal cukup memasukkan database berupa jawaban berikut soalnya dan membuat deretan kotak putih tempat jawaban di papan permainan.

Namun timbul permasalahan pada teknik penyelesaiannya. Dengan permainan yang berbeda, teknik dalam penyelesaianya juga berbeda. Banyak teknik yang dapat digunakan untuk menyelesaikan permainan kata itu. Dalam hal ini, peneliti akan membahas mengenai pencarian teknik penyelesaian yang memiliki tingkat efektifitas paling baik.

Salah satu cara untuk menyelesaikan permasalahan tersebut adalah dengan menggunakan algoritma runut balik. Algoritma runut balik (backtracking) akan mampu memberikan hasil apakah deretan kotak jawaban yang telah dibuat sudah cocok dengan deretan jawaban kata yang disediakan.

1.2 Rumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan diatas, maka dapat dijadikan rumuskan masalah dalam Tugas Akhir ini, yaitu :

a. Bagaimana menentukan alur permainan teka-teki silang?

(7)

c. Bagaimana menentukan bentuk Algoritma runut balik (backtracking) permainan teka-teki silang dalam php?

d. Membuat javascript pendukung jalannya aplikasi permainan teka-teki silang

1.3 Batasan Masalah

Pada pembuatan aplikasi ini perlu didefinisikan batasan masalah mengenai sejauh mana pembuatan aplikasi ini akan dikerjakan. Beberapa batasan masalah tersebut antara lain:

a. Aplikasi Permaian Teka-Teki Silang dengan menggunakan php dan Java Script, serta menggunakan dbase Mysql.

b. menggunakan Algoritma runut balik (backtracking) sebagai metode penyusunan teka-teki silang.

1.4 Tujuan

Tujuan dari membuat aplikasi permainan Teka-Teki Silang Online dengan menggunakan Algoritma runut balik (backtracking) adalah:

a. Membuat aplikasi teka-teki silang berbasis web dengan php, Java Script dan mysql sebagai databasenya

b. Menyediakan layanan permainan Teka-Teki Silang secara online, untuk bagi sebagian orang pecinta permainan Teka-Teki Silang

1.5 Manfaat

(8)

a. Mempermudah dalam pembuatan teka-teki silang karena dilakukan secara komputasi

b. Mempercepat efektivitas dalam permainan teka-teki silang c. Mengasah kemampuan otak dan menambah pengetahuan.

1.6 Metodologi

Dalam pembuatan Tugas Akhir kali ini, penulis akan menjelaskan tentang metode yang digunakan selama penulis menyusun dan membuat Tugas Akhir ini.

a. Studi literatur.

Mengumpulkan referensi baik dari internet, maupun sumber-sumber yang lainnya mengenai pembuatan Teka-Teki Silang Online yang menggunakan Algoritma runut balik (backtracking).

b. Analisa dan perancangan Aplikasi.

Menganalisa prosedur Permaian Teka-Teki Silang Online dengan menggunakan Algoritma runut balik (backtracking) dan merancang Permainan Teka-Teki Silang Online tersebut berdasarkan analisa yang telah dibuat .

c. Pembuatan Aplikasi.

Pada tahap ini merupakan tahap yang paling banyak memerlukan waktu dikarenakan mengimplementasikan Algoitma runut balik (backtracking) kedalam logika pemrograman.

d. Uji coba dan evaluasi aplikasi.

(9)

untuk mengetahui apakah aplikasi tersebut telah bekerja dengan benar sesuai dengan konsep yang di ajukan.

e. Penyusunan Buku Tugas Akhir.

Pada tahap ini merupakan tahap terakhir dari pengerjaan Tugas Akhir. Buku ini disusun sebagai laporan dari seluruh proses pengerjaan Tugas Akhir. Dari penyusunan buku ini diharapkan dapat memudahkan pembaca yang ingin menyempurnakan dan mengembangkan aplikasi lebih lanjut.

f. Pembuatan Kesimpulan.

Pada tahap ini dalam bagian akhir pembuatan Tugas Akhir. Dibuat kesimpulan dan saran dari hasil pembuatan aplikasi yang diperoleh sesuai dengan dasar teori yang mendukung dalam pembuatan aplikasi tersebut yang telah dikerjakan secara keseluruhan.

1.7 Sistematika Penulisan

Pada laporan Tugas Akhir ini akan menjelaskan tentang pembuatan permaian Teka-Teki Silang Online dengan menggunakan Algoitma runut balik (back tracking). Agar lebih memahami materi, laporan Tugas Akhir ini dibagi menjadi enam bab yang dilengkapi dengan penjelasan langkah-langkah dan ilustrasinya.

(10)

Bab ini akan menjelaskan tentang Latar Belakang, Perumusan Masalah, Batasan Masalah, Tujuan Penulisan, Manfaat, Metodologi Penulisan, dan Sistematika Penulisan.

BAB II TINJAUAN PUSTAKA

Bab ini menjelaskan tentang dasar teori yang digunakan sebagai penunjang serta referensi dalam pembuatan laporan Tugas Akhir ini.

BAB III ANALISA DAN PERANCANGAN SISTEM

Dalam bab ini dijelaskan tentang analisa dan perancangan aplikasi yang antara lain berisi tentang analisa permainan Teka-Teki Silang Online serta Algoitma runut balik (back tracking) yang digunakan untuk pembuatan prosedur permainan.

BAB IV IMPLEMENTASI SISTEM

(11)

BAB V UJI COBA DAN EVALUASI

Bab ini menjelaskan tentang pengujian yang dilakukan untuk mengetahui apakah aplikasi yang dibuat bisa bekerja sesuai dengan konsep yang sebenarnya. Selain itu pada bab ini dijelaskan bagaimana tahapan-tahapan yang dilakukan dalam melakukan pembuatan aplikasi

BAB VI PENUTUP

Bab ini akan menjelaskan tentang Kesimpulan dari keseluruhan isi dari laporan Tugas Akhir serta Saran yang disampaikan penulis untuk pengembangan aplikasi yang ada demi kesempurnaan aplikasi yang lebih baik.

DAFTAR PUSTAKA

(12)

BAB II

DASAR TEORI

2.1. Dynamic Problem Solving

Jika dilihat secara awam maka metoda penyelesaian yang mempunyai langkah yang lebih sedikit adalah cara dari kotak kata yang mempunyai huruf paling banyak ke kotak kata yang mempunyai huruf yang paling sedikit. Untuk pemilihan pertama, bisa dikatakan metoda ini termasuk metoda yang salah untuk dilakukan secara komputasi,

Karena hanya melakukan runut balik biasa dengan mengecek dari nomor urut soal dan tidak menggunakan optimasi tertentu. Pemilihan selanjutnya menggunakan optimasi yang dilakukan berdasarkan kriteria-kriteria tertentu. Kriteria tersebut adalah berdasarkan jumlah huruf pada kotak yang akan ditebak, banyaknya huruf pada kotak yang terhubung dengan kotak lain.

(13)

Perubahan tersebut bisa terjadi dengan mengikuti suatu pola (model) tertentu yang dapat didefinisikan sebagai suatu fungsi terhadap waktu, maupun tanpa pola. Prinsip dasar dari Dynamic Problem Solving ini adalah menganalisa semua jalur yang bisa menghasilkan solusi dan kemudian memilih satu jalur terbaik sehingga didapatkan solusi terbaik.

Dalam beberapa kasus, program tidak hanya akan melihat/menganalisa langkah-langkah yang ada sebagai pertimbangan dalam memilih solusi, contohnya pada beberapa board games seperti catur, othello, dan sheckers, yang langkah selanjutnya sangat tergantung pada langkah yang lawan jalankan. Karena besar kemungkinannya bahwa persoalan tersebut memiliki solusi yang sangat banyak. Apabila semua solusi tersebut ditelusuri satu per satu, maka program tidak akan berjalan dengan efisien.

2.2 Algoitma Runut Balik (back tracking)

Algoritma runut balik pertama kali diperkenalkan oleh D.H. Lehmer pada tahun 1950. Algoritma ini cukup mangkus untuk digunakan dalam beberapa penyelesaian masalah dan juga untuk memberikan kecerdasaan buatan dalam game. Beberapa game populer semisal Sudoku, Labirin, Catur juga bisa diimplementasikan dengan menggunakan algoritma runut balik.

(14)

yang ada secara sistematis namun tidak semua ruang solusi akan diperiksa, hanya pencarian yang mengarah kepada solusi yang akan diproses.

Solusi persoalan adalah kemungkinan solusi yang didapatkan dari permasalahan yang diberikan, sedangkan, fungsi pembatas merupakan fungsi yang akan menentukan langkah selanjutnya berupa penerusan pencarian solusi ataupun melakukan backtrack.

Gambar 2.1. Papan Permainan Teka-Teki Silang

2.3Algoritma Runut Balik dan Teka-Teki Silang

(15)

cocok. Pada pengisian kata kedalam kotak-kotak, pertama-tama program akan menentukan deretan kotak awal yang ingin diisi.

Program akan menghitung jumlah kotak pada deretan kotak tersebut kemudian akan mencari kata (didalam database yang terdiri atas kumpulan kata (jawaban) yang memiliki jumlah karakter sama dengan jumlah kotak tersebut. Dalam pencarian data kata-kata mungkin akan terdapat beberapa kata yang cocok untuk dimasukkan kedalam satu deretan kotak, untuk itu program akan memilih kata yang berada lebih awal dalam database kata.

Langkah selanjutnya, program akan mengidentifikasi indeks pada deretan kotak yang terhubung dengan deretan kotak lainnya. Program akan mencatat dimana letak hubungan antar deretan kotak tersebut kemudian mencatat indeks dan mengambil karakter yang terdapat di dalamnya untuk dibandingkan kembali dengan deretan kata yang ada di dalam database kata. Jika kata yang dimasukkan berikutnya cocok maka pencarian akan dilanjutkan, namun jika tidak terdapat kata yang cocok maka program akan mematikan kemungkinan jawaban berdasarkan pencarian tersebut dan program akan melakukan backtrack.

(16)

2.4Mengenal Web Server

Web server adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari client, hal ini dikenal dengan nama web browser, dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Web server yang terkenal di antaranya adalah Apache dan Microsoft Internet Information Service (IIS).

Apache (server HTTP Apache atau server web/www Apache) adalah web server yang dapat dijalankan dibanyak sistem operasi (Unix, BSD, Linux, Microsoft Windows, dan Novell Netware) yang berguna untuk melayani dan memfungsikan web. Protokol yang di gunakan untuk melayani fasilitas web/www ini menggunakan HTTP.

(17)

Gambar 2.2. Papan Topologi Web Server

2.5PHP

(18)

Sulit memberikan data statistik yang akurat, namun diperkirakan pada akhir 1996 PHP/FI sudah digunakan sedikitnya pada 15.000 situs web di seluruh dunia. Pada pertengahan 1997, angka tersebut berubah menjadi 50.000. Pada saat itu juga terdapat perubahan di dalam pengembangan PHP. PHP berubah dari proyek pribadi Rasmus menjadi sebuah tim yang lebih terorganisasi. Parsernya ditulis ulang dari bentuk rancangan awal oleh Zeev Suraski dan Andi Gutmans, dan parser baru ini adalah sebagai dasar PHP Version 3. Banyak kode utilitas yang berasal dari PHP/FI diport ke PHP3, dan banyak diantaranya sudah selesai ditulis ulang secara lengkap.

Pada pertengahan 1998, baik PHP/FI maupun PHP3 dikemas bersama dengan produk-produk komersial seperti server web StrongHold buatan C2 dan Linux RedHat, dan menurut survei yang dilakukan oleh NetCraft, kemungkinan PHP digunakan pada lebih dari 150.000 situs web di seluruh dunia. Sebagai pembanding, angka tersebut lebih banyak daripada pengguna server web Enterprise server buatan netscape di Internet .

(19)

PHP bisa berinteraksi dengan hampir semua teknologi web yang sudah ada. Developer bisa menulis sebuah program PHP yang mengeksekusi suatu program CGI di server web lain. Fleksibilitas ini amat bermanfaat bagi pemilik situs-situs web yang besar dan sibuk, karena pemilik masih bisa mempergunakan aplikasi-aplikasi yang sudah terlanjur dibuat di masa lalu dengan CGI, ISAP, atau dengan script seperti Perl, Awk atau Python selama proses migrasi ke aplikasi baru yang dibuat dengan PHP. Ini mempermudah dan memperluas peralihan antara teknologi lama dan teknologi baru.

2.6Dasar–Dasar PHP

PHP dijalankan dalam file berekstensi .PHP, .PHP3 atau .html, tetapi secara umum ekstensi file PHP adalah (.PHP). Kode PHP menyatu dengan tag –

tag HTML dalam satu file. Kode PHP diawali dengan tag <? atau <?PHP dan ditutup dengan ?>.

PHP diawali sebagai berikut : a. Source Code :

(20)

Gambar 2.4. Hasil Output dari Source Code di Atas.

2.7Tipe Data PHP

PHP memiliki 8 (delapan) tipe data yaitu : 1. Boolean

2. Integer 3. Float 4. String 5. Array 6. Object 7. Resource 8. NULL 2.8Kelebihan PHP

Kelebihan PHP dibandingkan Web Script lain:

1. Life Cycle yang singkat: PHP selalu up to date mengikuti perkembangan teknoloagi internet.

2. Cross Platform: PHP dapat dipakai di hampir semua WebServer yang ada di pasaran (Apache, AOLServer, fhttpd, Microsoft Internet

(21)

dipakai di semua sistem operasi (Linux, UNIX (temasuk variannya HP-UX, Solaris, dan OpenBSD), Windows, Mac OS, RISC OS). 3. Mendukung banyak paket database baik komersial maupun

non-komersial (Adabas D, dBase, Direct MS-SQL, Empress, FilePro, FrontBase, Hyperwave, IBM DB2, Informix, Ingres, Interbase, MSQL, MySQL, ODBC, Oracle, Ovrimos, PostgrSQL, Solid, Sybase, UNIX DBM, Velocis).

4. Tidak terbatas pada hasil keluaran HTML: PHP memiliki kemampuan untuk mengolah keluaran gambar, PDF, dan movie Flash. PHP juga dapat menghasilkan teks seperti XHTML dan XML.

2.9Pengantar JavaScript

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan terburu-buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “ JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai

(22)

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser (navigator) yang memanggil halaman web yang berisi skrip-skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut).

Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien. Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan, yaitu :

a. Teks Editor

Digunakan untuk menuliskan kode-kode Java Script, teks editor yang dapat digunakan antara lain notepad dan ultra edit.

b. Web Browser

(23)

2.9.1Variabel dalam JavaScript

Variabel adalah empat dimana kita menyimpan nilai-nilai atau informasi-informasi pada JavaScript. Variabel yang dideklarasikan dapat di isi dengan nilai apa saja. Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa telah mendeklarasikan variabel tersebut. Aturan penamaan variabel :

a.Harus diawali dengan karakter (huruf atau baris bawah) b.Tidak boleh menggunakan spasi

c.Huruf Kapital dan kecil memiliki arti yang berbeda

d.Tidak boleh menggunakan kata-kata yang merupakan perintah dalam JavaScript

2.9.2Tipe Data JavaScript

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript

Contoh Deklarasi Variabel :

Var nama_variabel = nilai Atau

(24)

tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu :

a) Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb

b) String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece Kirani” dsb

c) Boolean, bernilai true atau false d) Null, variabel yang tidak diinisilisasi

2.9.3Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan bulat (integer) dan bilangan pecahan (real/float). Untuk bilangan bulat, dapat merepresentasikan dengan basis desimal, oktal atau heksadesimal

2.9.4Operator pada JavaScript

Operator pada JavaScript terbagi menjadi enam, yaitu : Aritmatika, Pemberian nilai (Assign), Pemanipulasian bit (bitwise), Pembanding, Logika dan String.

2.10 Pengantar MYSQL

MySQL merupakan RDBMS (Relational Data Base Management Sistem) yang didistribusikan secara open source dan gratis mulai tahun 1996, tetapi mempunyai sejarah pengembangan sejak tahun 1979.

(25)

mudah. MySQL juga dilengkapi dengan perintah-perintah dan sintaks-sintaks SQL, dengan keunggulan sebagai berikut.

a. Konsep database MySQL berkecepatan tinggi tentang sistem penyajian data.

b. Harga yang relatif murah, karena ada yang dapat diperoleh secara gratis

c. Sintaks bahasanya menggunakan perintah yang sederhana.

d. Dapat bekerja dalam beberapa sistem operasi seperti Windows,

Linux, MacOs, Unix (Solaris, AIX, dan DEC Unix), FreeBSD, OS/2, Irix.

e. Dukungan penggunaan banyak tersedia (Swastika, 2006:5).

2.11 Pengelolaan Database

Sebelum membuat suatu tabel yang digunakan untuk menyimpan data, maka harus terlebih dahulu dibuat database yang merupakan kumpulan atau berisi tabel-tabel yang saling berhubungan dengan menggunakan kunci-kunci yang ditentukan. Tapi bagaimana caranya memerintahkan MySQL untuk membuat database, tabel, dan lainnya yang diperlukan. Untuk itu perlu untuk mempelajari bahasa yang akan digunakan untuk berkomunikasi dengan MySQL.

Bahasa ini disebut dengan SQL (Structured Query Language) dan orang

(26)

dikenal di DBMS yang lain. Di dalam bahasa SQL, perintah dibedakan menjadi 3 sub bahasa. Berkut ini perintah SQL berdasarkan fungsinya:

a. Data Definition Language (DDL)

b. Data Manipulation Language (DML)

c. Data Control Language (DCL)

2.11.1 Data Definition Language (DDL)

DDL digunakan untuk mendefinisikan, mengubah, serta menghapus basis data dan objek-objek yang diperlukan dalam basis data, misalnya tabel, view, user, dan sebagainya. Secara umum, DDL yang digunakan adalah CREATE untuk membuat objek baru, USE untuk menggunakan objek, ALTER untuk mengubah objek yang sudah ada, dan DROP untuk menghapus objek. DDL biasanya digunakan oleh administrator basis data dalam pembuatan sebuah aplikasi basis data.

Contoh perintah DDL : CREATE (membuat)

Dalam pemakaian pernyataan create table akan menemukan 2 opsi yang biasanya menyertai deklarasi definisi kolom yaitu:

1) Null / not null

Null/not null mengindikasikan apakah suatu kolom dapat menerima nilai null (nilai tiada). Jika dinyatakan null berarti null dapat terjadi dikolom tersebut sebaliknya bila diberi atribut not null maka nilai null tidak boleh pada kolom tersebut.

(27)

Default menyatakan nilai baku yang akan dipakai jika dalam suatu proses pemasukan nilai ke kolom tersebut tidak diberi nilai.

Contoh berikut akan membuat tabel dengan nama buku:

Gambar 2.5 Membuat Tabel

Setelah membuat tabel, perintah SHOW TABLES seharusnya menampilkan output sebagai berikut:

Gambar 2.6 Perintah SHOW TABLE

(28)

Gambar 2.7 Perintah DESCRIBE ATAU DESC 3) ALTER (merubah)

ALTER TABLE memungkinkan untuk merubah struktur tabel yang ada. Dapat merubah tabel untuk keperluan:

a. Menambah atau menghapus kolom b. Merubah nama atau definisi kolom c. Menambah atau menghapus index

d. Menerapkan suatu susunan berbeda pada baris-baris e. Merubah nama tabel

ALTER TABLE bekerja dengan cara membuat salinan tabel dari tabel yang asli yang bersifat sementara (temporer). Proses perubahan tabel dilakukan pada tabel salinan, kemudian tabel asli dihapus, dan yang baru diubah namanya. Ketika perintah ALTER TABLE sedang dieksekusi, tabel asli masih dapat dibaca oleh klien-klien.

(29)

Gambar 2.8 Menambah Kolom

Gunakan keyword MODIFY atau CHANGE, jika akan melakukan perubahan tipe data kolom, MODIFY dan CHANGE memiliki fungsi yang sama yaitu merubah tipe data kolom, hanya saja dengan CHANGE memungkinkan nama kolom juga dapat dirubah.

4) Merubah nama tabel

RENAME merubah nama tabel, dan juga bekerja dalam perintah ALTER TABLE:

Gambar 2.9 Perintah ALTER

Merubah beberapa nama tabel sekaligus dapat dilakukan dengan satu perintah saja dimana tabel-tabel dipisahakan dengan tanda koma, seperti berikut:

Gambar 2.10 Mengganti Nama TABLE

Merubah tipe dan opsi kolom tabel dapat dilakukan juga bersamaan dengan merubah nama tabel dalam satu perintah seperti berikut ini:

(30)

5) DROP (menghapus)

Untuk menghapus table gunakan perintah berikut ini : atau

Suatu index dapat dihapus dengan perintah DROP INDEX atau ALTER TABLE,seperti berikut :

Gambar 2.12 Contoh Perintah DROP TABLE

2.11.2 Data Manipulation Language (DML)

1) INSERT

(31)

panambahan data kedalam tabel mahasiswa

Gambar 2.13 Contoh INSERT DATA 2) UPDATE

Perintah UPDATE digunakan untuk merubah isi dari baris-baris data yang ada. Untuk menggunakannya, sebutkan nama tabel yang akan diubah isi baris-baris datanya, sertakan klausa SET yang diikuti dengan daftar pasangan nama kolom dan nilainya , dan biasanya perintah UPDATE diikuti dengan klausa WHERE yang menentukan barisbaris data mana sajakah yang akan dirubah. Berikut ini format penulisan perintah UPDATE:

(32)

Sebagai contoh dalam tabel mahasiswa, akan merubah nilai kolom alamat dari sebuah baris data yang memiliki mahasiswa_id=1016, sebagaimana yang tampak berikut ini:

Gambar 2.14 Contoh Perintah UPDATE

3) DELETE

Untuk menghapus baris-baris data yang ada dalam tabel, gunakanlah perintah DELETE. Perintah DELETE memungkinkan penggunaan klausa WHERE untuk menentukan baris-baris data mana saja yang akan dihapus. Jika Anda tidak menyertakan klausa WHERE maka akan berakibat seluruh baris data yang ada dalam tabel akan dihapus, Untuk menghapus seluruh baris data yang ada dalam tabel format penulisannya seperti berikut ini:

(33)

Sebagai contoh, akan menghapus baris data yang ada dalam table mahasiswa yang memiliki mahasiswa_id=1016, seperti berikut ini :

Gambar 2.15 Contoh Perintah DELETE a. Perintah untuk menampilkan data (Data Retrieval)

1) SELECT

Tidak ada gunanya menyimpan data kedalam database kecuali bermaksud untuk menampilkan dan melakukan sesuatu terhadap data tersebut. Inilah fungsi dari perintah SELECT. Sintaks dasar dari perintah SELECT tampak seperti berikut ini:

a) Daftar_pilihan_kolom, menunjukkan kolom–kolom apa saja yang akan dipilih atau ditampilkan.

(34)

c) Batasan_batasan_utama, menunjukkan apa saja kondisi–

kondisi baris data yang harus terprnuhi.

d) Grup_kolom, menunjukkan bagaimana mengelompokkan

hasil–hasil query.

e) Urutan_kolom, menunjukkan bagaimana mengurutkan hasil

hasil query.

f) Batasan_batasan_tambahan, menunjukkan apa saja

kondisi–kondisi tambahan dari baris data yang harus terpenuhi.

g) Jumlah, menunjukkan batas dari hasil query.

Gambar 2.16 Contoh Perintah SELECT

b. Perintah untuk mengontrol transaksi (Transaction Control Language /TCL)

1. COMMIT

2. ROLLBACK

3. SAVEPOINT

c. Perintah untuk mengatur wewenang atau privilege ( Data Control Language /DCL)

(35)

b) REVOKE

2.11.3 Data Control Language (DCL)

Termasuk di dalam DCL adalah perintah untuk melakukan pendefinisian pemakai yang boleh mengakses database dan apa saja privelegenya. Secara umum DCL merupakan bahasa yang digunakan untuk melakukan pengelolaan pemakai yang dapat melakukan akses dan manipulasi database terutama perintah GRANT dan REVOKE. Perintah untuk commit dan roll back merupakan kelengkapan fasilitas dalam pembuatan aplikasi yang memungkinkan suatu transaksi yang terjadi untuk dapat segera disimpan dan dibatalkan transaksinya.

a. GRANT

Perintah untuk mengizinkan user mengakses table dalam database tertentu. Bentuk umumnya adalah grant jenis statement yang diizinkan.

b. REVOKE

(36)

BAB III

ANALISA DAN PERANCANGAN SISTEM

Pada bab ini akan dijelaskan mengenai Rancang Bangung Aplikasi

Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking. Proses pembangunan sistem dalam sub-bab ini akan dibagi menjadi beberapa tahap antara lain, analisa sistem, dan perancangan sistem.

3.1Analisa system

(37)

Array ini memiliki dua dimensi untuk menyesuaikan dengan bentuk papan teka-teki silang. Semua variabel grid_x_y dibaca satu per satu dan dimasukkan ke dalam variabel grid[x][y] sesuai dengan nomor baris dan nomor kolomnya. Setelah array grid terbentuk, proses selanjutnya adalah melakukan penomoran pada papan teka-teki silang. Algoritma paling mudah untuk melakukannya adalah dengan memindai semua kotak baris per baris apakah termasuk kotak yang harus diberi nomor atau tidak. Kotak yang harus diberi nomor adalah kotak putih pertama yang membentuk sebuah garis kotak putih secara mendatar atau menurun. Untuk garis mendatar, kotak-kotak yang memenuhi aturan tersebut adalah kotak putih. Begitu juga sebaliknya.

Dengan melakukan penomoran ini, aplikasi sekaligus mendapatkan daftar slot untuk jawaban teka-teki silang. Variabel yang menyimpan informasi tersebut adalah variabel array_jawaban, yang merupakan sebuah array yang elemennya menyimpan informasi nomor kotak, baris dan kolom kotak, arah penulisan jawaban (mendatar atau menurun), kata/jawaban, petunjuk/pertanyaan, dan kata/jawaban yang telah dicoba selama pencarian solusi.

(38)

Setiap pengambilan kata harus memperhatikan panjang kata dan ketetanggaannya dengan kata yang lain dalam papan. Setiap kata yang dicoba pada satu slot jawaban harus diingat agar kata yang sama tidak diambil dua kali. Selain itu, kata yang diambil juga tidak boleh sudah ada dalam daftar jawaban.

Permainan teka-teki silang merupakan permainan yang berfungsi untuk mengasah otak. Permainan ini mempunyai beberapa pertanyaan yang harus dijawab. Uniknya permainan ini adalah bentuk jawaban harus diisi dalam ruang kosong berupa kotak yang tersusun sedemikan rupa sehingga membentuk suatu kata. Permainan teka-teki silang ini dapat dimainkan oleh anak-anak sampai dengan orang dewasa.

(39)

kembali jawaban yang sesuai dengan jumlah karakter yang terdapat pada database. Terdapat perbedaan warna antara kotak yang sudah terisi dengan kotak yang belum terisi. Kotak yang belum terisi akan berwarna putih sedangkan kotak yang sudah terisi akan berwarna hijau. Setelah seluruh pertanyaan terjawab pemain akan mempunyai pilihan untuk mengklik tombol cek. Fungsi tombol cek ini adalah untuk melakukan pengecekan apakah semua jawaban yang terisi pada kotak sudah benar atau salah. Apabila ada jawaban yang salah, kotak isian akan berubah warna menjadi merah. Selain tombol cek terdapat juga penghitung waktu yang befungsi sebagai indikasi petunjuk lamanya permainan tersebut berjalan. pemain mempunyai pilihan untuk menyerah jika telah melakukan 3x tombol cek tetapi masih ada jawaban yang salah dan dapat mencoba kembali dengan mengklik tombol try again. Untuk pemain yang terdaftar sebagai member dapat menyimpan top record untuk di publikasikan dan dimainkan kembali oleh member yang lain. Sedangkan bagi pemain yang belum terdaftar sebagai member tidak dapat menyimpan top record sebelum melakukan registrasi.

(40)

dapat terlihat member mana yang memiliki waktu yang paling cepat dalam menyelesaikan game tersebut.

a . Ketentuan dan Aturan Main Game

1. Pemain harus memahami prosedur permainan

2. Pemain harus menyelesaikan misi sesuai dengan yang telah ditentukan oleh skenario game

3. Pemain akan dinyatakan gagal dalam menyelesaikan permainan teka-teki silang apabila menyerah.

4. Member tidak diizinkan untuk menginputkan kata-kata yang tidak sopan dalan daftar pertanyaan maupun jawaban.

b. Target Hasil dan Tujuan Game

1. Pemain berhasil menyelesaikan seluruh daftar pertanyaan dalam satu session permainan.

2. Member berhasil memainkan top record member lain dengan waktu yang lebih cepat.

3.2Alur Aplikasi

Proses pembuatan Aplikasi permainan teka-teki silang online memiliki alur sebagai berikut:

(41)

b. Pengambilan secara acak susunan pertanyaan dan jawaban yang tersedia pada database.

c. Penyusunan kotak-kotak putih yang didasarkan pada daftar jawaban yang telah dipilih dari database secara acak.

d. Menampilkan kotak isian beserta daftar pertanyaan dalam satu halaman.

e. Permainan diawali dengan perhitungan waktu dari 0 detik.

f. Mengisi kotak jawaban (kotak putih) dengan huruf sehingga membentuk suatu kata

g. Melakukan pengecekan terhadap jawaban yang sudah diisi. h. Melakukan penyimpanan top record dari hasil permainan.

(42)

MULAI

Gambar 3.1 Flowchart Alur Permainan 3.3Pembuatan Game

Dalam pembuatan game ini dibutuhkan background untuk kelangsungan berjalannya permainan ini. contoh background :

3.4Background

(43)

Gambar 3.2 Background Flash Intro

Gambar 3.3 Background Permainan

3.5Sound

Sound disini digunakan sebagai musik pengiring permainan. Penggunaan Sound disini bertujuan untuk menjadikan permainan menjadi lebih menarik. Untuk permainan ini digunakan sound dengan file swf, dengan ukuran file nya yaitu 5 MB.

3.6Overview Game

(44)
(45)

3.7Intro Permainan

Ketika pemain memasuki permainan, maka pemain akan dihadapkan dengan flash intro dengan motif kota-kotak sebagai symbol dari teka-teki silang. judul permaian ditampilkan di pojok kanan atas dengan tulisan “ TEKA-TEKI SILANG ONLINE” yang akan terlihat pada gambar di bawah

Gambar 3.4 Overview Intro

(46)

Gambar 3.5 Overview Permainan

3.8Game Design

Dalam aplikasi permainan ini terdapat Screen yang berurutan. screen tersebut dapat digambarkan sebagai berikut

PEMBUKAAN

AREA PERMAINAN

TOP RECORD / ENDING

Gambar 3.6 Overview Bagan Screen Permainan

(47)

Perancangan proses digunakan untuk menggambarkan sejumlah proses terstruktur dalam sistem aplikasi, berorientasikan pada aliran proses yang terjadi, agar memperjelas proses alur aplikasi website teka-teki online yang dibuat.

(48)
(49)

Gambar diatas adalah DFD level 0, yang merupakan penjabaran dari Diagram Context ke dalam proses yang lebih tinggi.

(50)

Gambar diatas merupakan tingkatan proses yang lebih tinggi, dimana dalam proses ini merupakan penjelasan yang lebih dalam mengenai proses permainan teka-teki silang.

3.11 Perancangan Data

Perancangan data digunakan untuk membuat suatu database yang dibutuhkan oleh sistem informasi berbasis web yang dibuat.

Database atau Basis data dapat didefinisikan dalam sejumlah sudut pandang sebagai berikut :

1. Himpunan kelompok data (arsip) yang saling berhubungan yang diorganisasikan sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan mudah.

2. Kumpulan data yang saling berhubungan yang disimpan secara bersama sedemikian rupa dan tanpa pengulangan (redudansi) yang tidak perlu untuk memenuhi berbagai kebutuhan.

3. Kumpulan file atau tabel atau arsip yang saling berhubungan yang tersimpan dalam media penyimpanan elektronik.

(51)

3.11.1 Conceptual Data Model

Setelah pembuatan Data Flow Diagram di atas maka tahap selanjutnya adalah pembuatan Entity Relationship Diagram yang biasa disingkat dengan ERD. Untuk menggambar ERD yaitu menggunakan aplikasi power designe version 6. Dalam ERD tersebut menjelaskan hubungan atau adanya keterkaitan antara tabel satu dengan tabel yang lain.

Sesuai dengan rumusan masalah Bab 1, Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB menampilkan kotak-kotak jawaban pada permainan teka-teki silang, untuk menyimpan berbagai macam informasi tersebut dibutuhkan 4 tabel entity yaitu :

tersimpan

Gambar 3.9 Conseptual Data Model Web

3.11.2 Physical Data Model

(52)

fisik hasil pengembangan dari sebuah konsep. Untuk lebih jelasnya dapat dilihat pada gambar dibawah ini :

FK_LOG_TERSIMPAN_RECORD

Gambar 3.10 Physical Data Model

(53)

BAB IV

IMPLEMENTASI

Pada bab ini akan dilakukan implementasi dan pengujian terhadap sistem yang baru. Tahapan ini dilakukan setelah perancangan selesai dilakukan dan selanjutnya akan diimplementasikan pada bahasa pemrograman. Setelah implementasi dilakukan, maka dilakukan pengujian terhadap sistem yang baru dan akan dilihat kekurangan-kekurangan pada aplikasi yang baru untuk pengembangan sistem selanjutnya.

4.1 Implementasi

Setelah sistem dianalisis dan didesain secara rinci, maka akan menuju tahap implementasi. Implementasi sistem merupakan tahap meletakkan sistem sehingga siap untuk dioperasikan. Implementasi bertujuan untuk mengkonfirmasi modul perancangan, sehingga pengguna dapat memberi masukan kepada pengembangan sistem.

4.2 Implementasi Perangkat Keras

(54)

dalam proses Permainan Teka-Teki Silang (TTS) Berbasis WEB ini menggunakan spesifikasi minimum yang digunakan untuk membuat dan menjalankan program ini, sehingga berjalan sesuai dengan yang diharapkan.

Untuk bisa menjalankan aplikasi yang dibuat, diperlukan beberapa hardware minimal sebagai berikut :

a. PC dengan Processor minimal Intel Pentium 3 atau yang setara

b. Memory SDRAM-128MB PC 133

c. Hardisk 6 GB

d. Terdapat koneksi internet

4.3 Implementasi Perangkat Lunak

Perangkat lunak yang dipergunakan untuk menjalankan aplikasi yang dibuat adalah sebagai berikut :

a. Internet browser (optional)

4.4 Implementasi Basis Data

Implementasi basis data diambil berdasarkan perancangan basis data yang dibuat sebelumnya. Secara fisik, implementasi basis data diimplementasikan menggunakan perangkat lunak MySQL. Berikut ini bagaimana pembuatan database beserta tabel-tabel yang mendukung system penyeleksian beasiswa.

1. Pembuatan database

CREATE DATABASE ‘tts’;

2. Pembuatan table data_user

(55)

`nama` varchar(50) NOT NULL,

`username` varchar(50) NOT NULL,

`password` varchar(50) NOT NULL,

PRIMARY KEY (`username`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

3. Pembuatan table log

CREATE TABLE `log` (

`id_log` int(3) NOT NULL auto_increment,

`tanggal` date NOT NULL,

`user` varchar(50) collate latin1_general_ci NOT NULL,

`soal` varchar(50) collate latin1_general_ci NOT NULL,

`waktu` varchar(50) collate latin1_general_ci NOT NULL,

PRIMARY KEY (`id_log`)

)ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci

AUTO_INCREMENT=16 ;

4. Pembuatan tabel record

CREATE TABLE `record` (

`id` int(4) NOT NULL auto_increment,

`groupid` varchar(50) collate latin1_general_ci NOT NULL,

`word` varchar(225) collate latin1_general_ci NOT NULL,

`question` varchar(225) collate latin1_general_ci NOT NULL,

`timer` varchar(50) collate latin1_general_ci NOT NULL,

`drwordgroup` varchar(50) collate latin1_general_ci NOT NULL,

(56)

)ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci

AUTO_INCREMENT=21;

5. Pembuatan tabel words

CREATE TABLE `words` (

`id` int(4) NOT NULL auto_increment,

`groupid` varchar(50) collate latin1_general_ci NOT NULL default '''lt''',

`word` varchar(255) collate latin1_general_ci NOT NULL,

`question` varchar(255) collate latin1_general_ci NOT NULL default '',

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1

COLLATE=latin1_general_ci AUTO_INCREMENT=39;

4.5 Implementasi Antarmuka

Pembuatan antarmuka atau Graphical User Interface (GUI) serta pemrograman

untuk aplikasi ini menggunakan Hypertext Preprocessor (PHP) dan Javascript serta

menggunakan database MySQL.

4.6 Halaman Utama

(57)

Gambar 4.1 Halaman Utama

(58)

Gambar 4.2 Halaman Utama Pengisian Semua Jawaban

Berikut merupakan perintah untuk mengecek apakah jawaban sudah terisi semua atau belum dan untuk menampilkan tombol checking:

function wesdiisi(){

var oRadio = document.tts.getElementsByTagName("input"); for(var i = 0; i < oRadio.length; i++) {

if(oRadio[i].value !== '') {

document.getElementById('aa').innerHTML = i; }

}

var weskeisi = document.getElementById('aa').innerHTML; var x=document.tts.getElementsByTagName("input").length; var jsss = x-1;

if (weskeisi == jsss){

document.getElementById('checkeryo').innerHTML = '<input type="button" name="submiter" value="checkings" onclick="checknya();clicks++;testclick()" >';

(59)

}

Apabila didalam pengisian jawaban masih terdapat jawaban yang salah maka sistem akan memberikan informasi kepada user jawaban mana yang belum benar.

Gambar 4.3 Halaman Utama Pengisian Salah

Berikut merupakan perintah untuk mengecek apakah jawaban sudah terisi dengan benar atau masih ada yang salah:

$formu = '<input size="1" value="'.$jawaban[$ab].'" name="bener" maxlength="1" type="hidden">';

echo "if (document.tts.myText".$cccb.".value == '".$jawaban[$ab]."'){"; echo "document.getElementById('".$cccb."').innerHTML =

'".$jawaban[$ab].$formu."'; }else{";

echo "document.tts.myText".$cccb.".setAttribute('Class', 'parmanul');}";

(60)

Gambar 4.4 Halaman Utama Pengisian Sukses

Berikut merupakan perintah untuk mengecek apakah jawaban sudah terisi semua dengan benar :

var bener = document.getElementsByName("bener").length;

var kosong = document.tts.getElementsByTagName("input").length; if(bener == kosong){

findTIME();

document.getElementById('checkeryo').innerHTML = 'Selamat...! Jawaban Anda Benar Semua.';

document.getElementById('lokasiinputan').innerHTML = ' ';

4.6.1 Form Login

(61)

Gambar 4.5 Halaman Login

Berikut merupakan perintah untuk mengecek login yang dilakukan oleh user dengan benar :

<form name="loginform" id="loginform" action="login.php" method="post">

<p>

<label>Username<br>

<input name="userlogin" id="userlogin" class="input" value="" size="20" tabindex="10" type="text"></label>

</p> <p>

<label>Password<br>

<input name="userpass" id="userpass" class="input" value="" size="20" tabindex="20" type="password"></label>

</p>

(62)

<input name="wp-submit" id="wp-submit" value="Log In" tabindex="100" type="submit">

</p> </form>

4.6.2 Form Registrasi

Halaman tersebut berisi form regristrasi untuk memperoleh akses masuk dan mendaftar sebagai member, pendaftar wajib mengisi semua form data registrasi tersebut. Pengisian form registrasi tersebut pada variabel password dan confirm password harus di isi dengan isian yang sama. Pengisian form registrasi untuk bisa mendaftar sebagai member :

Gambar 4.6 Form Registrasi

Perintah untuk penyimpanan data input user setelah mendaftar sebagai berikut : <form name="registrasi" >

(63)

<tr >

<td width="107" colspan="3"><b>Form Isian </b></td> </tr>

<tr>

<td>Nama</td> <td> : </td>

<td><input type="text" name="nama" /></td> </tr>

<tr>

<td>Username</td> <td>:</td>

<td><input type="text" name="username" /></td> </tr>

<tr>

<td>Password</td> <td>:</td>

<td><input class="input" name="password" type="password"/></td> </tr>

<tr>

<td>Confirm Password </td> <td>:</td>

(64)

<tr>

<td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr>

<tr>

<td>&nbsp;</td> <td>&nbsp;</td> <td><label>

<input type="button" name="Submit" value="Submit" onClick="registrasimember();" />

</label></td> </tr>

</table> </form>

Setelah pendaftar mengisi form di atas dan menekan tombol Submit, maka pendaftar akan mendapat informasi, seperti gambar berikut :

(65)

4.7 Halaman User

Halaman tersebut berisi TTS, Input Soal, Member, Top Record dan Log Out. Agar dapat melihat halaman ini user harus masuk sebagai pendaftar terlebih dahulu agar dapat mengisi dan melihat halaman tersebut.

Gambar 4.8 Halaman User

Pada halaman di atas terdapat perintah untuk generate teka-teki silang berdasarkan group id dari member :

<form id="submitgenerate" action="demo3.php?idnya=<?echo $_GET['idnya'];?>" method="post">

Columns: <input type="text" name="cols" value="<?=$pc->cols?>" size="5" />

Rows: <input type="text" name="rows" value="<?=$pc->rows?>" size="5" />

(66)

<input type="hidden" name="tabledb" value="<?=$pc->table?>" size="15" />

Group:

<select name="groupid">

<? foreach ($pc->getGroupIDs() as $groupid): ?>

<option value="<?=$groupid?>" <? if ($groupid == $pc->groupid) echo 'selected'; ?>>

<?=$groupid?> [w:

<?=$pc->countWordsInGroup($groupid);?>] </option>

<? endforeach; ?> </select>

<input type="submit" value="Generate"/> </form>

4.7.1 Halaman Input Pertanyaan User

Halaman tersebut berisi tentang menu memasukkan pertanyaan pada daftar pertanyaan berdasarkan Group ID member. Pada gambar di bawah ini Group ID adalah username yang digunakan user saat login pada menu login. Member dapat memasukkan beberapa daftar soal dan jawaban.

(67)

Berikut adalah perintah untuk menampilkan data input pertanyaan : <a onclick='menudisplay("inputsoal");'>Input Soal</a>

if(div1 == 'inputsoal'){

document.getElementById('ttsan').style.display = "none";

document.getElementById('loginmember').style.display = "none";

document.getElementById('inputsoal').style.display = "block"; document.getElementById('toprecord').style.display = "none";

4.7.2 Halaman Member

Halaman tersebut berisi tentang status login dimana user tersebut login berdasarkan username-nya. Pada halaman tersebut juga ditampilkan daftar pertanyaan yang sudah dimasukkan oleh member tersebut. Pada menu daftar pertanyaan terdapat action yang berupa delete yang berfungsi sebagai menghapus data pertanyaan yang berdasarkan id pertanyaan. Dapat di lihat pada gambar berikut :

(68)

Berikut merupakan perintah untuk menampilkan username login dan daftar pertanyaan pada gambar di atas :

<div id="login">

<h2>Member Login TTS Online</h2>

<p>username = <?php echo base64_decode($_GET['idnya']); ?></p> <h2>Daftar Pertanyaan :</h2>

<?

$sqlcekdb = "select * from words where groupid = '".base64_decode($_GET['idnya'])."'";

$sqlqueryne = mysql_query($sqlcekdb);

$a = 1;

echo '<table border="1" bgcolor="#FFFFFF"><tr><td>No.</td><td>Pertanyaan</td><td>Jawaban</td><t

d>Action</td></tr>';

while($sqlqueryhasile = mysql_fetch_array($sqlqueryne)){ echo

"<tr><td>".$a."</td><td>".$sqlqueryhasile[3]."</td><td>".$sqlqueryhasile[2]."</

td><td><div align=center><a href=\"hapus_soal.php?words=$sqlqueryhasile[id]\"

(69)

$a++; }

echo '</table>'; ?>

4.7.3 Halaman Top Record

Halaman tersebut berisi tentang daftar record waktu tercepat dari member dan admin dalam menyelesaikan soal teka-teki silang. Pada daftar record tersebut terdapat menu play dan log. Jika user ingin memainkan soal yang telah dimainkan oleh member lain pada daftar record maka user dapat mengklik tombol play. Tombol log berfungsi sebagai daftar record dari lama waktu yang dimainkan pada soal tersebut. Dapat di lihat pada gambar berikut :

Gambar 4.11 Halaman Top Record

Gambar 4.12 Halaman Log

(70)

<td align="center"><? echo "<a href='./demo3.php?idnya=".$_GET['idnya']."&tabledb=record&groupid=".$topti

mer[1]."&max_words=".$topcounter[0]."'>"; ?><font color="#E0FA28"> Play</a></font></td>

<td align="center"><a href="#" onClick="displayDiv('<? echo $toptimer[1]; ?>');"><font color="#E0FA28"> Log</a></font></td>

4.7.4 Halaman Log Out User

Halaman log out digunakan untuk keluar dari sistem. Perintah yang menentukan proses log out sebagai berikut :

<div id="nNavSearch"> <a href="./../demo3.php"> Log Out </a> </div>

4.8 Halaman Admin

(71)

Gambar 4.13 Halaman Admin

Berikut merupakan perintah untuk menampilkan pengacakan pertanyaan yang berdasarkan pada group id member :

<? foreach ($words as $key=>$word){ ?> <? if ($word["axis"] == "1") { ?>

<tr align=left>

<td><?=$key+1;?>.</td>

<td><a href="#" onClick="dialog(this.title);" title="<?=$key+1;?>. <?=$word["question"];?>" ><font

color="#E0FA28"><?=$word["question"];?></a></font></td> <td><?=$word["word"];?></td>

<td><?=strlen($word["word"]);?></td> </tr>

(72)

4.8.1 Halaman Input Pertanyaan Admin

Halaman tersebut berisi tentang menu memasukkan pertanyaan pada daftar pertanyaan berdasarkan Group ID member. Pada gambar di bawah ini Group ID adalah username yang digunakan user saat login pada menu login dimana username adalah admin. Member dapat memasukkan beberapa daftar soal dan jawaban.

Gambar 4.14 Halaman Input Pertanyaan Admin

Berikut merupakan perintah untuk menampilkan menu input pertanyaan dan proses memasukkan pertanyaan dan jawaban :

<a onclick='menudisplay("inputsoal");'>Input Soal</a> if(div1 == 'inputsoal'){

document.getElementById('ttsan').style.display = "none";

(73)

4.8.2 Halaman member admin

Halaman tersebut berisi tentang status login dimana user tersebut login berdasarkan username yaitu admin. Pada halaman tersebut juga ditampilkan daftar pertanyaan yang sudah dimasukkan oleh member tersebut dan daftar member yang sudah terdaftar. Pada menu daftar pertanyaan terdapat action yang berupa delete yang berfungsi sebagai menghapus data pertanyaan yang berdasarkan id pertanyaan. Pada menu daftar member terdapat action yang berupa delete yang berfungsi sebagai menghapus data member yang telah terdaftar berdasarkan username.

Gambar 4.15 Halaman Member Admin

Berikut merupakan perintah untuk menampilkan username berdasarkan login admin dan daftar pertanyaan :

<h2>Member Login TTS Online</h2>

<p>username = <?php echo base64_decode($_GET['idnya']); ?></p> <h2>Daftar Pertanyaan :</h2>

(74)

echo '<h2><a onclick="document.getElementById(\'memberliting\').style.display =

\'block\';document.getElementById(\'soalliting\').style.display = \'none\';"><font

color="#E0FA28">Member List</a></font>&nbsp;||&nbsp;<a onclick="document.getElementById(\'memberliting\').style.display = \'none\';document.getElementById(\'soalliting\').style.display = \'block\';"><font

color="#E0FA28">List Pertanyaan</a></font></h2><br>'; echo '<div id="memberliting" style="display:none">'; $sqlcekdb = "select * from data_user";

$sqlqueryne = mysql_query($sqlcekdb); $b = 1;

echo '<table border="1" bgcolor="#FFFFFF" width="450"><tr><td>No.</td><td>Username</td><td>action</td></tr>';

while($sqlqueryhasile = mysql_fetch_row($sqlqueryne)){

echo '<tr><td>'.$b.'</td><td>'.$sqlqueryhasile[1].'</td><td

width=50><div align=center><a href="hapus_member.php?username='.$sqlqueryhasile[1].'"

onClick=\"return confirm("Apakah anda ingin menghapus member dengan member =$sqlqueryhasile[1] ?")\">delete</a></div></td></tr>';

$b++; }

(75)

echo '<div id="soalliting" style="display:none">'; $sqlcekdb1 = "select * from data_user";

$sqlqueryne1 = mysql_query($sqlcekdb1);

while($sqlqwa = mysql_fetch_row($sqlqueryne1)){

$sqlcekdb = "select * from words where groupid = '".$sqlqwa[1]."'"; $sqlqueryne = mysql_query($sqlcekdb);

$a = 1;

echo '<div id="'.$sqlqwa[1].'"><p><h2>'.$sqlqwa[1].'</h2></p><table

border="1" bgcolor="#FFFFFF" width="650"><tr><td>No.</td><td>Pertanyaan</td><td>Jawaban</td><td>Acti

on</td></tr>';

while($sqlqueryhasile = mysql_fetch_array($sqlqueryne)){ echo

"<tr><td>".$a."</td><td>".$sqlqueryhasile[3]."</td><td>".$sqlqueryhasile[2]."</

td><td width=50><div align=center><a href=\"hapus_soal.php?words=$sqlqueryhasile[id]\"

onClick=\"return confirm('Apakah anda ingin menghapus pertanyaan dengan id =$sqlqueryhasile[id] ?')\">delete</a></div></td></tr>";

$a++; }

echo '</table></div><br><br>'; }

(76)

?>

4.8.3 Halaman Log Admin

Halaman tersebut berisi tentang daftar record waktu tercepat dari member dan admin dalam menyelesaikan soal teka-teki silang. Pada daftar record tersebut terdapat menu play dan log. Jika user ingin memainkan soal yang telah dimainkan oleh member lain pada daftar record maka user dapat mengklik tombol play. Tombol log berfungsi sebagai daftar record dari lama waktu yang dimainkan pada soal tersebut. Dapat di lihat pada gambar berikut :

Gambar 4.16 Halaman Top Record Admin

Gambar 4.17 Halaman Log Admin

Berikut merupakan perintah untuk menampilkan tombol play dan tombol Log pada gambar di atas :

<td align="center"><? echo "<a href='./demo3.php?idnya=".$_GET['idnya']."&tabledb=record&groupid=".$topti

(77)

<td align="center"><a href="#" onClick="displayDiv('<? echo $toptimer[1]; ?>');"><font color="#E0FA28"> Log</a></font></td>

4.8.4 Halaman Log Out Admin

Halaman log out digunakan untuk keluar dari sistem. Perintah yang menentukan proses log out sebagai berikut :

<div id="nNavSearch"> <a href="./../demo3.php"> Log Out </a> </div>

BAB V

(78)

Pada proses hasil dan ujicoba akan dijelaskan gambar sistem Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB. Untuk menentukan permainan teka-teki silang dengan menggunakan metode Algorithm Backtracking beserta sebagian perintah – perintahnya.

5.1Koneksi Database

Untuk pertama kali mengakses database adalah menginstal aplikasi XAMPP dan kemudian membuat koneksi ke server database. Setelah koneksi terbangun maka perintah – perintah untuk membangun, mengakses, dan managemen database dapat dilakukan. Berikut ini adalah perintah koneksi ke database dalam script Hypertext Preprocessor (PHP) :

<?

define("_MYSQL_HOST", "localhost"); define("_MYSQL_DB", "tts");

define("_MYSQL_USER", "root"); define("_MYSQL_PASS", "");

$conn = mysql_connect(_MYSQL_HOST,_MYSQL_USER,_MYSQL_PASS) or

die("Gagal koneksi database");

(79)

Gambar 5.1 Database tts

5.2Database tts Tabel ‘data_user’

Halama ini berisi database tts yang berada dalam table data_user yang telah terisi. Seperti pada gambar berikut ini :

Gambar 5.2 Database tts tabel data_user

5.3Database tts Tabel ‘log’

Halama ini berisi database tts yang berada dalam table log yang telah terisi. Seperti pada gambar berikut ini :

Gambar 5.3 Database tts tabel log

(80)

Halama ini berisi database tts yang berada dalam table record yang telah terisi. Seperti pada gambar berikut ini :

Gambar 5.4 Database tts tabel record

5.5Database tts Tabel ‘words’

Halama ini berisi database tts yang berada dalam table words yang telah terisi. Seperti pada gambar berikut ini :

Gambar 5.5 Database tts tabel words

(81)

Pada saat pertama kali masuk ke web tersebut, halaman yang ditampilkan adalah halaman Utama. Yang bersisi TTS dan Member yang didalamnya terdapat menu login dan registrasi dari menu umum yang bisa dilihat oleh user pertama kali masuk ke web tersebut. Halaman ini berisi menu umum untuk di lihat pertama kali dan menangani user login maupun administrator login.

Gambar 5.6 Halaman Utama

(82)

pengecekan terhadap jawaban apakah jawaban tersebut sudah benar atau masih ada yang salah. Dapat dilihat pada gambar berikut :

Gambar 5.7 Halaman Utama Pengisian Semua Jawaban

Apabila didalam pengisian jawaban masih terdapat jawaban yang salah maka sistem akan memberikan informasi kepada user jawaban mana yang belum benar. Dapat dilihat pada gambar berikut :

Gambar 5.8 Halaman Utama Pengisian Salah

(83)

Gambar 5.9 Halaman Utama Pengisian Sukses

5.7Form Login

Halaman tersebut berisi form login untuk memperoleh akses masuk dan dapat bermain teka-teki silang sebagai member. Pada form login terdapat username dan password. Form login akan ditunjukkan oleh gambar dibawah ini :

Gambar 5.10 Halaman login

5.8Form Registrasi

(84)

registrasi tersebut. Pengisian form registrasi tersebut pada variabel password dan confirm password harus di isi dengan isian yang sama. Pengisian form registrasi untuk bisa mendaftar sebagai member :

Gambar 5.11 Halaman Registrasi

Setelah pendaftar mengisi form di atas dan menekan tombol Submit, maka pendaftar akan mendapat jendela konfirmasi, seperti gambar berikut :

Gambar 5.12 Halaman Registrasi Sukses

(85)

Gambar 5.13 Halaman Registrasi Password Tidak Sesuai

Gambar 5.14 Halaman Registrasi “login exiting member

Pada menu di atas terdapat menu login exiting member yang berfungsi sebagai menu yang mengarah pada form login.

5.9Halaman User

(86)

Gambar 5.15 Halaman User

5.10 Halaman Input Soal

(87)

Gambar 5.16 Halaman Input Soal

5.11 Halaman Member

Halaman tersebut berisi tentang status login dimana user tersebut login berdasarkan username-nya. Pada halaman tersebut juga ditampilkan daftar pertanyaan yang sudah dimasukkan oleh member tersebut. Pada menu daftar pertanyaan terdapat action yang berupa delete yang berfungsi sebagai menghapus data pertanyaan yang berdasarkan id pertanyaan. Dapat di lihat pada gambar berikut :

(88)

5.12 Halaman Top Record

Halaman tersebut berisi tentang daftar record waktu tercepat dari member dan admin dalam menyelesaikan soal teka-teki silang. Pada daftar record tersebut terdapat menu play dan log. Jika user ingin memainkan soal yang telah dimainkan oleh member lain pada daftar record maka user dapat mengklik tombol play. Tombol log berfungsi sebagai daftar record dari lama waktu yang dimainkan pada soal tersebut. Dapat di lihat pada gambar berikut :

Gambar 5.18 Halaman Top Record

Gambar 5.19 Halaman Log

5.13 Halaman Log Out User

Halaman log out digunakan untuk keluar dari sistem.

5.14 Halaman Admin

(89)

tersebut hanya dapat di akses dan dijalankan oleh admin. Dapat di lihat pada gambar berikut :

Gambar 5.20 Halaman Admin

5.15 Halaman Input Pertanyaan Admin

Halaman tersebut berisi tentang menu memasukkan pertanyaan pada daftar pertanyaan berdasarkan Group ID member. Pada gambar di bawah ini Group ID adalah username yang digunakan user saat login pada menu login dimana username adalah admin. Member dapat memasukkan beberapa daftar soal dan jawaban. Dapat di lihat pada gambar berikut :

(90)

5.16 Halaman member admin

Halaman tersebut berisi tentang status login dimana user tersebut login berdasarkan username yaitu admin. Pada halaman tersebut juga ditampilkan daftar pertanyaan yang sudah dimasukkan oleh member tersebut dan daftar member yang sudah terdaftar. Pada menu daftar pertanyaan terdapat action yang berupa delete yang berfungsi sebagai menghapus data pertanyaan yang berdasarkan id pertanyaan. Pada menu daftar member terdapat action yang berupa delete yang berfungsi sebagai menghapus data member yang telah terdaftar berdasarkan username. Dapat di lihat pada gambar berikut :

Gambar 5.22 Halaman Member Admin

(91)

Gambar 5.23 Halaman Member Admin

Tombol List Pertanyaan berfungsi sebagai menampilkan daftar pertanyaan yang telah dimasukkan oleh semua member yang bertujuan untuk mengatur daftar pertanyaan yang masuk kedalam database. Dapat dilihat pada menu berikut :

Gambar 5.24 Halaman List pertanyaan Admin

5.17 Halaman Log Admin

(92)

terdapat menu play dan log. Jika user ingin memainkan soal yang telah dimainkan oleh member lain pada daftar record maka user dapat mengklik tombol play. Tombol log berfungsi sebagai daftar record dari lama waktu yang dimainkan pada soal tersebut. Dapat di lihat pada gambar berikut :

Gambar 5.25 Halaman Top Record Admin

Gambar 5.26 Halaman Log Admin

5.18 Halaman Log Out Admin

Halaman log out digunakan untuk keluar dari sistem teka-teki silang online.

5.19 Kuisioner 1. Responden 1

Nama Jatmiko Dwi Luhur Umur 24 Tahun

Komentar x Perlu Untuk Dikembangkan

(93)

2. Responden 2

Nama Dimas Adi Susanto Umur 32 Tahun

Komentar x Cukup Menarik

3. Responden 3

Nama Ahmad Fuad Pribadi Umur 25 Tahun

Komentar x Bagus

x Cukup membantu dalam penyediaan TTS

4. Responden 4

Nama Hisyam Musafri S. Umur 22 Tahun

Komentar x Menarik

x Perlu dikembangkan

5. Responden 5

Nama Mey Prayogo Radi Putra, S.Kom Umur 24 Tahun

Komentar x Permainan TTS berbasis web yang dibuat baik dan menarik. Dimana TTS tersebut dapat ditambahkan soal/pertanyaan yang diinginkan oleh user

6. Responden 6

Nama Briyan Dede Imam P. Umur 24 Tahun

Komentar x Cukup menarik

Gambar

Gambar 2.13  Contoh INSERT DATA
Gambar 2.14  Contoh Perintah UPDATE
Gambar 2.15  Contoh Perintah DELETE
Gambar 3.1 Flowchart Alur Permainan
+7

Referensi

Dokumen terkait

Wawancara dengan 4 orang pengguna dilakukan untuk mengetahui persepsi mereka terhadap tiga dimensi kualitas, dimensi penggunaan, dan kepuasan pengguna pada model

Aplikasi Pulsa Bersama ID ini merupakan aplikasi yang digunakan untuk transaksi jual-beli online berbasis mobile khususnya jual beli id game online. (karakter

Perubahan politik yang sangat radikal terjadi di Indonesia antara lain ditandai dengan runtuhnya orde baru yang menerpkan sistem politik yang otoritarian,

Berdasarkan hasil pengolahan dan analisis data, maka dapat ditarik beberapa kesimpulan sebagai berikut, Pada proses procurement yang berjalan selama ini ditemukan

Pada tael diatas juga menunjukkan nilai koefisien determinasi yang ditujukan oleh nilai R Square yaitu sebesar 0,979 yang memberikan arti bahwa pariabel harga ikan dan

Adanya perbedaan pertimbangan dan penjatuhan putusan oleh hakim dalam menggunakan hasil perdamaian atau mediasi penal yang terjadi antara pelaku dan korban KDRT tersebut,

OLEH KERANA MASALAH INI MERUPAKAN MASALAH UTAMA SAHABAT-SAHABAT BUKURESEPI, PIHAK ADMIN BUKURESEPI TELAH MENCARI PENYELESAIAN MASALAH BAGI MEMUDAHKAN SAHABAT-

Belum diketahuinya kondisi terakhir tingkat kepuasan pelanggan Apotek Kimia Farma Jakarta sebagai salah satu wujud keberhasilan kualitas layanan kepada pelanggan dan untuk