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

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”

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.

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.

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

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.

Sebagai mana telah dijelaskan bahwa kotak-kotak putih yang membentuk deretan blok baik mendatar maupun menurun merupakan tempat pemain mengisi jawaban. Setiap deretan kotak terdapat nomor dan soal yang diberikan. Permainan

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?

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

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.

Pada tahap ini setelah aplikasi selesai dibuat maka dilakukan pengujian dan evaluasi terhadap permainan Teka-Teki Silang Online

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.

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

Pada bab ini akan membahas tentang implementasi berdasarkan konsep perancangan yang ada pada BAB III beserta penjelasan tentang kebutuhan sistem supaya aplikasi yang dikerjakan sesuai dengan tujuan dari penulisan Tugas Akhir.

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

Pada bagian ini akan dipaparkan tentang sumber-sumber literatur, tutorial, buku maupun situs-situs yang digunakan dalam pembutan laporan Tugas Akhir ini.

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.

Setiap kriteria tersebut juga dilakukan secara terbalik sehingga bisa melihat keadaan teka-teki silang ketika suatu kriteria dilakukan secara ekstrem. Pemilihan optimasi tersebut ternyata sedikit melenceng dari perkiraan karena ada pohon yang ternyata lebih buruk dari metoda pemilihan pertama. Sehingga pada akhirnya tidak dapat melihat metoda yang terbaik karena kondisi papan menjadi suatu kendala yang terkadang baik untuk suatu metoda namun tidak untuk metoda yang lain. Untuk mengurai suatu masalah tersebut, maka perlu penyelesaian/pemecahan masalah di mana state (kondisi) permasalahan tersebut selalu berubah ubah (DynamicProblemSolving).

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.

Algoritma runut balik (backtracking) merupakan algoritma yang digunakan untuk mencari solusi persoalan secara lebih ringkas daripada menggunakan algoritma brute force. Algoritma ini akan mencari solusi berdasarkan ruang solusi

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

Algoritma runut balik dalam permainan ini akan digunakan untuk mengisi kotak-kotak permainan yang sebelumnya telah dibuat. Kotak-kotak ini bisa direpresentasikan dengan struktur data matriks sehingga setiap kotak akan memiliki indeks. Indeks ini akan digunakan untuk melakukan pencarian kata yang

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.

Backtrack dilakukan dengan cara program akan menghapus kata yang terakhir dimasukkan kedalam deretan kotak, kemudian program akan mengganti kata tersebut dengan kata lain yang juga bisa diisikan kedalam deretan kotak tersebut dan kemudian program akan melakukan pencarian ulang. Langkah-langkah diatas akan terus dilakukan secara rekursif, sampai program menemukan solusi dari permasalahan (seluruh kotak terisi) atau program tidak menemukan solusi (tidak ada kemungkinan jawaban yang valid).

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.

Sedangkan, definisi dari IIS atau Internet Information Server adalah sebuah HTTP web server yang di gunakan dalam sistem operasi server Windows, mulai dari Windows NT 4.0 Server, Windows 2000 Server atau Windows Server 2003. Layanan ini merupakan layanan terintegrasi dalam Windows 2000 Server, Windows Server 2003 atau sebagai add-on dalam Windows NT 4.0. Layanan tersebut berfungsi sebagai pendukung protokol TCP/IP yang berjalan dalam lapisan aplikasi (application layer). IIS juga menjadi fondasi dari platform Internet dan Intranet Microsoft, yang mencakup Microsoft Site Server, Microsoft Commercial Internet Sistem dan produk-produk Microsoft BackOffice lainnya.

Gambar 2.2. Papan Topologi Web Server 2.5PHP

PHP adalah teknologi yang diperkenalkan tahun 1994 oleh Rasmus Lerdorf. Beberapa versi awal yang tidak dipublikasikan digunakan pada situs pribadinya untuk mencatat siapa saja yang mengakses daftar riwayat hidup onlinennya. Versi pertama digunakan oleh pihak lain pada awal tahun 1995 dan dikenal sebagai Personal Home Page Tools. Terkandung didalamnya sebuah parser engine (mesin pengurai) yang sangat disederhanakan, yang hanya mampu mengolah macro khusus dan beberapa manfaat yang sering digunakan pada pembuatan home page,seperti buku tamu, pencacah, dan hal semacamnya. Parser tersebut ditulis ulang pada pertengahan 1995 dan dinamakan PHP/FI Versi 2. FI(Form Interprenter) sendiri berasal dari kode lain yang ditulis juga oleh Rasmus, yang menterjemahkan HTML dari data. Ia menggabungkan script Personal Home Page Tools dengan Form Interprenter dan menambahkan dukungan terhadap server database yang menggunakan format mSQL sehingga lahirlah PHP/FI. PHP/FI tumbuh dengan pesat, dan orang-orang mulai menyiapkan kode-kode programnya supaya bisa didukung oleh PHP.

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 .

PHP singkatan dari Personal Home Page Tools, adalah sebuah bahasa scripting yang dibundel dengan HTML, yang dijalankan disisi server. Sebagian besar perintahnya berasal dari C, Java dan Perl dengan beberapa tambahan fungsi khusus PHP. Bahasa ini memungkinkan para pembuat aplikasi web menyajikan halaman HTML dinamis dan interaktif dengan cepat dan mudah, yang dihasilkan server. PHP juga dimaksudkan untuk mengganti teknologi lama seperti CGI (Common Gateway Interface)

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 :

Gambar 2.3. Contoh source code php b. Output :

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 Information Services (MIIS/Windows XP dan Vista), Personal Web Server (PWS/Windows 95,98, NT 4.0), Netscape and iPlanet Servers, Oreilly Website Pro Server, Audium, Xitami, dll). PHP juga dapat

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

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

Digunakan untuk menampilkan halaman web yang mengandung kode-kode Java Script. Web browser yang digunakan harus mendukung Java Srcipt. Browser yang dapat digunakan adalah internet explorer dan Netscape Navigator.

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

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.

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

sering mengakronimnya dengan “sequel”. SQL merupakan bahasa standar untuk pengolahan database. Ini berarti bahwa DBMS yang lain juga mengenal bahasa ini. Walau ada beberapa istilah yang di salah satu DBMS tidak dikenal, tapi

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.

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

Untuk memeriksa tabel yang telah dibuat sesuai dengan spesifikasi yang telah ditetapkan, gunakanlah perintah DESCRIBE atau DESC. Sebagai contoh jika lupa nama kolom atau tipe kolom dari tabel yang telah dibuat. Gunakanlah perintah seperti contoh dalam gambar berikut :

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.

Proses perubahan dan penulisan terhadap tabel dihentikan sampai tabel yang baru siap, dan kemudian secara otomatis diarahkan ke tabel baru tanpa kegagalan dalam proses perubahan. Contoh berikut adalah perubahan table dengan menambah kolom.

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:

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

Perintah INSERT digunakan untuk menambahkan data baru kedalam tabel. Pada format yang pertama nama_tabel menunjukkan nama tabel yang akan ditambahkan data kedalamnya, daftar_kolom menunjukkan nama-nama kolom dari tabel yang dipisahkan menggunakan tanda koma, selanjutnya daftar_nilai adalah nilai-nilai (dipisahkan dengan tanda koma) yang berhubungan dengan masing-masing kolom yang disebutkan dalam daftar_kolom (jumlah kolom harus sama dengan jumlah nilai). Pada format yang kedua setelah klausa SET adalah daftar pasangan nama kolom dan nilainya masing-masing yang dipisahkan menggunakan tanda koma. Salah satu dari kedua format penulisan tersebut memungkinkan untuk menambahkan beberapa data sekaligus dengan sebuah perintah. Berikut ini contoh penulisan perintah INSERT dalam proses

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:

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:

Sedangkan untuk menghapus baris – baris data tertentu saja, format penulisannya seperti berikut ini :

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.

b) Daftar_tabel, menunjukkan dari table apa saja baris–baris data diambil atau dipilih.

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)

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

Perintah untuk mencabut kembali izin yang sudah pernah diberikan sebelumnya oleh grant. Bentuk umumnya adalah jenis statement yang diizinkan

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

Sebelum melakukan pembangkitan jawaban pada papan teka-teki silang, ada tahap persiapan yang harus dilalui, yaitu mengubah struktur data yang diterima dari designer ke dalam sebuah array dan member nomor pada papan teka-teki silang. Aplikasi menerima informasi warna kotak-kotak kecil pada papan teka-teki silang dari designer. Informasi ini berupa variabel bernama grid_x_y di mana x merupakan nomor baris posisi kotak kecil pada papan dan y merupakan nomor kolom posisi kotak kecil pada papan. Agar lebih mudah dalam pembacaan oleh aplikasi, data papan teka-teki silang yang diterima dan diubah terlebih dulu ke dalam array.

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.

Dalam proses penomoran informasi yang diisi hanya nomor kotak, baris dan kolom kotak, dan arah penulisan jawaban; sedangkan yang lainnya dibiarkan kosong dulu. Setelah proses penomoran selesai dan daftar kotak yang harus diisi jawaban telah terbuat, proses pembangkitan sudah bisa dilakukan. Pembangkitan ini dilakukan dengan mencoba untuk melengkapi semua elemen dalam daftar jawaban, yakni variabel array_jawaban.

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.

Permainan ini memiliki sejumlah database pertanyaan berserta jawabannya. Permainan ini dimulai dengan me-random 10 pertanyaan yang tersedia dalam database. Untuk mengetahui bagaimana cara bermain permainan teka-teki silang ini pemain dapat menekan tombol how to play yang didalamnya berisi tentang cara bermain dan aturan dalam permainan teka-teki silang ini. Dengan menekan tombol play akan menandakan bahwa permainan telah dimulai. Pemain dapat menjawab pertanyaan dengan mengklik kotak yang tersedia maupun list pertanyaan dan menginputkan jawaban dengan huruf. Jawaban yang diinputkan akan secara otomatis mengisi kotak yang tersedia berdasarkan nomor urut pertanyaan. Jika jumlah karakter jawaban yang diinputkan tidak sesuai dengan jumlah karakter jawaban yang ada pada database maka system akan secara otomatis menginformasikan jumlah karakter yang harus diisi dan jawaban tidak akan dimasukkan kedalam kotak jawaban sehingga pemain dapat memasukkan

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.

Para member dalam permainan teka-teki silang online ini dapat menginputkan pertanyaan dan jawaban kedalam database. Member juga dapat memainkan teka-teki silang dengan pertanyaan yang diinputkan oleh member yang lain. Member hanya dapat menyimpan satu top record saja. Apabila member ingin menyimpan top record yang lain maka member akan mendapatkan konfirmasi untuk menyetujui perubahan top record dan top record yang lama akan dihapus secara otomatis. Dalam permainan teka-teki silang ini tedapat sebuah halaman yang berisikan daftar dari top record dari member. Dari daftar tersebut

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:

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.

Alur permainan diatas dapat digambarkan ke dalam diagram flowchart seperti pada gambar :

MULAI MEMILIH JUMLAH SOAL Masukkan jumlah soal ya

Soal = 10 tidak Mengacak soal dan jawaban Menyusun kotak berdasarkan jawaban Menampilkan kotak isian Masukkan jawaban Cek jawaban selesai benar

Proses 3x cek salah menyerah ya tidak Apakah anda member? Input username Input password ya tidak Member? Input track record ya tidak Valid? tidak ya

Apakah anda ingin registrasi dahulu? Menu login

member

Menu registrasi ya

tidak Isi form registrasi Submit Form registrasi Registrasi berhasil Masuk Login

Gambar 3.1 Flowchart Alur Permainan 3.3Pembuatan Game

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

3.4Background

Background ini nantinya akan dibuat untuk gambar latar belakang dari game. beberapa background yaang digunakan oleh penyusun adalah sebagai berikut.

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

Permainan akan mendefault jumlah pertanyaan 10 pada awal permainan. Pemain juga dapat memilih jumlah pertanyaan yang akan dimainkan sesuai dengan keinginan. Setelah pemain menentukan jumlah pertanyaan yang ingin dimainkan maka system akan secara acak mengambil soal dan jawaban yang terdapat pada database. System akan menyusun kotak-kotak jawaban berdasarkan jawaban yang telah dipilih dari database secara acak. Kemudian system menampilkan kotak isian beserta daftar pertanyaan. Pada awal

permainan waktu dimulai dari angka 0 detik. Pemain dapat melakukan pengisian jawaban pada kotak jawaban yang tersedia dengan mengklik kotak jawaban yang sesuai dengan nomor pertanyaan atau dengan mengklik pertanyaan yang ingin diisi. Jawaban yang telah diisi oleh pemain akan secara otomatis dimasukkan kedalam kotak-kotak jawaban oleh system. Setelah semua kotak jawaban terisi maka system akan menampilkan menu cek pada permainan yang berfungsi untuk mengecek apakah jawaban yang dimasukkan oleh pemain sudah benar atau salah sesuai dengan pertanyaan. Apabila jawaban yang dimasukkan benar semua maka permainan berakhir, sedangkan apabila terdapat kesalahan dalam memasukkan jawaban maka pemain dapat melakukan pembenaran terhadap jawaban yang salah tersebut dengan menginputkan jawaban kembali. Jika proses pengecekan dilakukan sebanyak 3x maka system akan menampilkan menu pilihan apakah pemain menyerah atau tidak. Jika pemain memilih menyerah maka permainan berakhir sedangkan jika memilih tidak maka pemain dapat meneruskan permainan hingga terjawab semua dengan benar. Untuk member yang terdaftar, setelah semua jawaban terisi dengan benar maka member dapat memasukkan top recordnya pada system sehingga dapat diketahui berapa lama member tersebut dapat menyelesaikan pertanyaan tersebut. Top record yang dimasukkan oleh member dapat juga dimainkan oleh member lain sehingga akan diketahui siapa yang dapat dengan cepat menyelesaikan pertanyaan tersebut.

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

Pemain dapat memilih menu yang tersedia pada akhir flash intro yaitu menu play atau menu How To Play. Menu How To Play berfungsi untuk menampilkan bagaimana tata cara permainan teka-teki silang tersebut sehingga pemain akan mengetahui bagaimana aturan dan cara bermain. Apabila pemain sudah mengetahui tata cara permainan maka pemain dapat langsung memilih menu play dan memasuki area permainan teka-teki silang. Di dalam area permainan, pemain akan dihadapkan pada daftar pertanyaan dan jawaban yang harus diisi oleh pemain. Gambar akan di tampilkan dibawah ini

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

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.

view_top_rec_member

view_soal

add_member

play_tts_member

konfirmasi_login_member

top_rec_member

soal

input_member

play_member

login_member

play_usr_tts

play_usr

view_top_rec

view_member

input_data

play_tts

konfirmasi_login

top_rec

member

input

play

login

admin

non

member

0

APLIKASI_TT

S

+

member

Gambar 3.7 DFD Level 0

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

Flow_84 list_log_member view_soal soal list_record_member top_rec_member view_top_rec_member input_soal_member add_member input_member playing_member play_tts_member play_member autentifikasi_login_member konfirmasi_login_member login_member playing_user play_usr_tts play_usr list_log list_record view_top_rec top_rec list_soal list_member view_member member input_data_soal input playing play_tts play autentifikasi_login login konfirmasi_login admin admin admin admin admin admin admin admin admin admin user user member member member member member member member member member member data_user log record words 1 proses_login 2 proses_play 3 proses_input 4 proses_memb er 5 proses_record 6 proses_play_us er 7 proses_login_ member 8 proses_play_m ember 9 proses_input_s oal 10 proses_list_so al 11 proses_record _member

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.

Rancangan basisdata adalah proses perancangan ER Data Model (ERD). ERD dibuat berdasarkan pengamatan dunia nyata yang terdiri dari entitas dan relasi antara entitas-entitas tersebut. Dibawah ini adalah ER Data Model dalam bentuk CDM untuk Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking.

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 (D) menyimpan (D) membuat (D) data_user username nama password <M log id_log tanggal user soal waktu <M> record id groupid word question timer drwordgroup < words id groupid word question <M>

Gambar 3.9 Conseptual Data Model Web 3.11.2 Physical Data Model

Model data ini dibuat dengan cara me-generate diagram data konseptual di atas. Diagram data fisik ini menghasilkan tabel-tabel yang akan digunakan dalam implementasi aplikasi. Dengan Physical Data Model kita dapat mengetahui model

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

FK_LOG_TERSIMPAN_RECORD FK_ENT_4_MENYIMPAN_RECORD FK_RECORD_MEMBUAT_DATA_USEdata_user username nama password varchar(50) varchar(50) varchar(50) <pk> log id_log id tanggal user soal waktu integer integer date varchar(50) varchar(50) varchar(50) <pk> <fk> record id username groupid word question timer drwordgroup integer varchar(50) varchar(50) varchar(255) varchar(255) varchar(50) varchar(50) <pk> <fk> words id id2 groupid word question integer integer varchar(50) varchar(255) varchar(255) <pk> <fk>

Gambar 3.10 Physical Data Model

Rancangan data konseptual yang telah dipetakan menjadi diagram pada bagian perancangan system akan diimplementasikan ke dalam lingkungan basis data MYSQL.

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

Perangkat keras yang dibutuhkan dalam pembuatan Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB ini. Perangkat keras yang dibutuhkan

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

`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, PRIMARY KEY (`id`)

)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

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.

Gambar 4.1 Halaman Utama

Pada gambar di atas user diminta untuk mengisi kotak-kotak putih dengan jawaban yang benar. Pengisian jawaban dapat dilakukan dengan menekan kotak-kotak putih jawaban atau dengan menekan pertanyaan yang ingin diisi dengan jawaban. Jawaban dapat ditulis pada kotak yang sudah disediakan oleh sistem ketika user menekan kotak putih jawaban atau menekan pertanyaan. Apabila semua kotak jawaban telah terisi akan muncul menu cek yang berfungsi sebagai pengecekan terhadap jawaban apakah jawaban tersebut sudah benar atau masih ada yang salah.

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()" >';

}

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');}";

Jika semua jawaban sudah terisi dengan benar maka sistem akan menampilkan informasi bahwa semua jawaban telah benar terisi semua. Dapat dilihat pada gambar berikut :

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

Halaman tersebut berisi form login untuk memperoleh akses masuk dan dapat bermain teka-teki silang sebagai member. Pada form login terdapat username dan password.

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>

<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" >

<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>

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

<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 :

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" />

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

<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.

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 :

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]\"

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

$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

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

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

Halaman tersebut berisi TTS, Input Soal, Member, Top Record dan Log Out. Agar dapat melihat halaman ini admin harus masuk sebagai username admin terlebih dahulu agar dapat mengisi dan melihat halaman tersebut. Pada halaman tersebut hanya dapat di akses dan dijalankan oleh admin. Dapat di lihat pada gambar berikut :

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>

<? } ?> <?}?>

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";

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

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>

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++; }

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

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>'; }

?>

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

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.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

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");

mysql_select_db(_MYSQL_DB,$conn) or die("Gagal pilih database"); ?>

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 5.4Database tts Tabel ‘record’

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

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

Pada gambar di atas user diminta untuk mengisi kotak-kotak putih dengan jawaban yang benar. Pengisian jawaban dapat dilakukan dengan menekan kotak-kotak putih jawaban atau dengan menekan pertanyaan yang ingin diisi dengan jawaban. Jawaban dapat ditulis pada kotak yang sudah disediakan oleh sistem ketika user menekan kotak putih jawaban atau menekan pertanyaan. Apabila semua kotak jawaban telah terisi akan muncul menu cek yang berfungsi sebagai

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

Jika semua jawaban sudah terisi dengan benar maka sistem akan menampilkan informasi bahwa semua jawaban telah benar terisi semua. Dapat dilihat pada gambar berikut :

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

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 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

Pada menu di atas apabila user mengisi form password dan form confirm password tidak sesuai maka akan muncul peringatan sebagai berikut :

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

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. Dapat di lihat pada gambar berikut :

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

7. Responden 7

Nama Harsa

Umur 20 Tahun

Komentar _x Sangat menarik dan cukup baik untuk

melepas waktu luang

8. Responden 8

Nama Anwar Fadeli

Umur 24 Tahun

Komentar _x Bagus

x Sangat menarik berbeda dengan TTS buku

9. Responden 9

Nama Andi Saputra

Umur 23 Tahun

Komentar _x Design Bagus

10. Responden 10

Nama Wawan Susanto

Umur 24 Tahun

Komentar _x Design bagus

x Menarik karena dapat bersaing dengan member lain dalam menyelesaikan TTS dengan waktu tercepat

BAB VI

PENUTUP

6.1 Kesimpulan

Setelah dilakukan uji coba dari Rancang Bangung Aplikasi Permainan Teka-Teki Silang (TTS) Berbasis WEB Menggunakan Algorithm Backtracking, maka dapat diambil kesimpulan :

a. Aplikasi Permainan Teka-Teki Silang (TTS) ini dapat dirancang dan dibuat dengan menggunakan tools Adobe Dreamweaver.

b. Aplikasi permainan Teka-Teki Silang (TTS) ini menggunakan logika aplikasi sesuai dengan prosedur jalannya permainan yang sesungguhnya.

c. Aplikasi permainan Teka-Teki Silang (TTS) ini merupakan aplikasi permainan mengasah otak dengan mengisi kotak jawaban yang disusun berdasarkan jawaban yang telah di acak.

6.2 Saran

Berdasarkan pengalaman dalam proses pembuatan aplikasi ini, terdapat beberapa saran yang diusulkan oleh penyusun terkait untuk pengembangan aplikasi lebih lanjut. Saran – saran tersebut antara lain :

a. Untuk pengembangan lebih lanjut, aplikasi ini dapat dikembangkan lagi dari segi desain agar lebih menarik dan nyaman digunakan oleh pengguna.

b. Membuat aplikasi ini menjadi lebih interaktif seperti penambahan animasi permainan dari aplikasi yang telah ada sehingga pemain menjadi lebih menarik.

c. Pengembangan aplikasi permainan teka-teki silang dalam pengecekan jawaban dan informasi kesalahan user dalam menjawab serta penambahan menu bantuan jawaban.

DAFTAR PUSTAKA

1. http://google.com keyword : permainan teka–teki silang berbasis website 2. http://digilib.mercubuana.ac.id/skripsi1.php?ID_Skripsi=0000016136&NI

M=4150401-029

3. Munir, Rinaldi, Strategi Algoritmik, 2007

4. Levitin, Anany, Introduction to The Design and Analysis of Algorithms, Addison-Wesley, 2003.

5. Wikipedia. Crossword – Wkipedia, the Free Encyclopedia.

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

6. Widya Wardani, Dian Intania Savitri H, Allentine Tanujaya, Analisis Penerapan Algoritma Backtracking Dalam Pencarian Solusi Game

8. http://loyank.wordpress.com/2010/10/03/algoritma-backtracking-dan-penggunaannya/

9. http://www.informatika.org/~rinaldi/Stmik/Makalah/MakalahStmik26.pdf

10. http://www.informatika.org/~rinaldi/TA/Makalah_TA_Hafni.pdf

11. http://lefthandsymphony.wordpress.com/2010/03/16/penerapan-algoritma-backtracking-runut-balik-dalam-permainan-teka-teki-silang-tts/

12. http://www.scribd.com/doc/28430259/Penerapan-Algoritma-Backtracking

13. http://p4tkmatematika.org/file/problemsolving/PengertianDasarProblemSo lving_smd.pdf