Perancangan Web Tes Potensi Akademik Online Berbasis PHP Dan MYSQL

(1)

PERANCANGAN WEB TES POTENSI AKADEMIK

ONLINE BERBASIS PHP DAN MYSQL

TUGAS AKHIR

RICKY FACHREZA

102406249

PROGRAM STUDI DIPLOMA-III TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013


(2)

PERANCANGAN WEB TES POTENSI AKADEMIK ONLINE BERBASIS PHP DAN MYSQL

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

RICKY FACHREZA 102406249

PROGRAM STUDI DIPLOMA-III TEKNIK INFORMATIKA DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SUMATERA UTARA

MEDAN 2013


(3)

LEMBAR PERSETUJUAN

Judul : PERANCANGAN WEB TES POTENSI

AKADEMIK ONLINE BERBASIS PHP DAN MYSQL

Kategori : TUGAS AKHIR

Nama : RICKY FACHREZA

Nomor Induk Mahasiswa : 102406249

Program Studi : DIPLOMA-III TEKNIK INFORMATIKA

Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU

PENGETAHUAN ALAM UNIVERITAS SUMATERA UTARA

Diluluskan di Medan, Juni 2013

Diketahui / Disetujui oleh:

Departemen Matematika FMIPA USU

Ketua Dosen Pembimbing

Prof. Dr. Tulus, M.Si. Drs. James P. Marbun, M.Kom NIP. 19620901 198803 1 002 NIP.195806111986031002


(4)

PERNYATAAN

PERANCANGAN TES POTENSI AKADEMIK ONLINE BERBASIS WEB TUGAS AKHIR

Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juni 2013

RICKY FACHREZA 102406249


(5)

PENGHARGAAN

Alhamdulillahi rabbil ‘alamin

Puji syukur penulis ucapkan tujukan kepada Allah SWT yang telah memberikan rahmat dan hidayah-Nya. Salam penulis kepada hamba Allah yang paling mulia baginda Rasulullah SAW.

Dalam penulisan ini laporan Tugas Akhir ini penulis banyak mendapatkan bantuan, perhatian, bimbingan serta dorongan dari berbagai pihak. Pada kesempatan ini penulis mengucapkan terima kasih yang sebesar-besarnya kepada:

1. Bapak Drs. James P. Marbun, M.Kom selaku Pembimbing I yang telah membimbing dan mengarahkan kepada penulis dalam menyelesaikan laporan Tugas Akhir ini.

2. Bapak Syahril Efendi, S.Si, M.IT selaku Ketua Program Studi Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

3. Bapak Prof. Dr. Tulus, M.Si selaku Ketua Departemen Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

4. Bapak Dr. Sutarman, M.Sc selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

5. Seluruh Dosen Pengajar Fakultas MIPA Universitas Sumatera Utara khususnya Program Studi D-III Teknik Informatika yang telah memberikan ilmu yang bermanfaat kepada penulis selama masa perkuliahan.

6. Ayahanda dan Ibunda tercinta yang telah memberikan bantuan berupa dukungan moril dan materil yang sangat membantu dan tak ternilai harganya dalam penyusunan Tugas Akhir ini.

7. Rekan-rekan penulis khususnya kepada Sabrina Ridhasari, Sigit Prasetyo, Riwandy Septiansyah, dan Medina Rhamadani yang telah banyak membantu penulis dalam menyelesaikan Tugas Akhir ini.

Penulis menyadari sepenuhnya bahwa penulisan laporan ini masih belum sempurna dan memiliki banyak kekurangan baik dari isi maupun tata bahasanya. Oleh karena itu, dengan segala kerendahan hati penulis menerima kritik dan saran yang bersifat membangun dari semua pihak demi perbaikan penulis dimasa yang akan datang.

Medan, Juni 2013 Penulis


(6)

ABSTRAK

Tugas ini bertujuan untuk membangun suatu aplikasi web tes potensi akademik yang dapat digunakan untuk mengukur kemampuan seseorang di dalam potensi akademik. Aplikasi web ini disusun dengan menggunakan PHP dan MySQL, xampp-win32-1.7.2 yang merangkum Web Server Apache, Web scripting PHP, dan Database MySQL. Dan Macromedia Dreamweaver 8 sebagai Web Editor, serta menggunakan Web Browser

yang berguna untuk menampilkan halaman website. Aplikasi web ini bekerja untuk dapat menyajikan informasi tentang tes potensi akademik, tips dan trik dalam menyelesaikan tes potensi akademik, juga memberikan sajian soal-soal yang dapat digunakan untuk menguji kemampuan akademik seseorang. Sasaran utama sistem ini adalah untuk melakukan tes potensi akademik dengan mudah dan cepat tanpa harus konsultasi dengan penguji secara langsung yang biasanya membutuhkan biaya yang cukup besar.


(7)

DAFTAR ISI

Halaman

Persetujuan ii

Pernyataan iii

Penghargaan iv

Abstrak v

Daftar Isi vi

Daftar Tabel viii

Daftar Gambar ix

Bab 1 Pendahuluan 1

1.1Latar Belakang 1

1.2Rumusan Masalah 2

1.3Batasan Masalah 2

1.4Tujuan Penelitian 3

1.5Metodologi Penelitian 3

1.6Sistematika penulisan 4

Bab 2 Landasan Teori 5

2.1Pengertian Web 5

2.2Pengertian Aplikasi Web 5

2.3Pengertian Tes Potensi Akademik 6

2.4Pengenalan Personal Home Page 7

2.4.1 Sejarah PHP 8

2.4.2 Kelebihan dan Kelemahan PHP 8

2.4.3 Penggabungan Script PHP dan HTML 9

2.5 MySQL 10

2.6 Macromedia Dreamweaver 11

2.7 Jquery 12

Bab 3 Perancangan Sistem 14

3.1Perencanaan Sistem 14

3.2Data Flow Diagram 14

3.3Perancangan Database 17

3.4Flowchart 19

3.4.1 Flowchart Daftar 21

3.4.2 Flowchart Tes 22

3.4.3Flowchart Testimonial 23

3.4.4Flowchart Login Admin 24

3.4.5Flowchart Input Soal 25

3.5Membangun Halaman Situs 26


(8)

Bab 4 Implementasi Sistem 29

4.1Pengertian Implementasi Sistem 29

4.2Tujuan Implementasi Sistem 29

4.3Spesifikasi Hardware 30

4.4Software 30

4.5Brainware 31

4.6Instalasi Apache, PHP, dan MySQL 31

4.7Menjalankan Xampp 33

4.8Pengujian di Browser 34

Bab 5 Kesimpulan dan Saran 46

5.1Kesimpulan 46

5.2Saran 47

Daftar Pustaka 48


(9)

DAFTAR TABEL

Halaman

Tabel 3.1 Tabel Simbol-simbol DFD 15

Tabel 3.2 Tabel Admin 17

Tabel 3.3 Tabel Jawaban 17

Tabel 3.4 Tabel Peserta 18

Tabel 3.5 Tabel Soal Verbal 18

Tabel 3.6 Tabel Soal Logika 18

Tabel 3.7 Tabel Soal Numerik 18

Tabel 3.8 Tabel Testi 19


(10)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Macromedia Dreamweaver 12

Gambar 3.1 DFD Konteks Tes Potensi Akademik 16

Gambar 3.2 Flowchart Daftar 21

Gambar 3.3 Flowchart Tes 22

Gambar 3.4 Flowchart Testimoni 23

Gambar 3.5 Flowchart Login Admin 24

Gambar 3.6 Flowchart Input Soal 25

Gambar 4.1 Direktori Xampp 33

Gambar 4.2 Folder Htdocs 34

Gambar 4.3 Penulisan Alamat URL 34

Gambar 4.4 Hasil Pengujian di Web Browser 35

Gambar 4.5 Halaman Utama 36

Gambar 4.6 Halaman Daftar 37

Gambar 4.7 Halaman Testimoni 38

Gambar 4.8 Halaman Tips dan Trik 39

Gambar 4.9 Halaman Ujian 40

Gambar 4.10 Halaman Soal 41

Gambar 4.11 Halaman Skor 42

Gambar 4.12 Halaman Login Admin 43

Gambar 4.13 Halaman Input Soal 44


(11)

ABSTRAK

Tugas ini bertujuan untuk membangun suatu aplikasi web tes potensi akademik yang dapat digunakan untuk mengukur kemampuan seseorang di dalam potensi akademik. Aplikasi web ini disusun dengan menggunakan PHP dan MySQL, xampp-win32-1.7.2 yang merangkum Web Server Apache, Web scripting PHP, dan Database MySQL. Dan Macromedia Dreamweaver 8 sebagai Web Editor, serta menggunakan Web Browser

yang berguna untuk menampilkan halaman website. Aplikasi web ini bekerja untuk dapat menyajikan informasi tentang tes potensi akademik, tips dan trik dalam menyelesaikan tes potensi akademik, juga memberikan sajian soal-soal yang dapat digunakan untuk menguji kemampuan akademik seseorang. Sasaran utama sistem ini adalah untuk melakukan tes potensi akademik dengan mudah dan cepat tanpa harus konsultasi dengan penguji secara langsung yang biasanya membutuhkan biaya yang cukup besar.


(12)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Tes Potensi Akademik (TPA) adalah sebuah tes yang bertujuan untuk mengukur kemampuan seseorang di bidang akademik umum. Tes ini juga sering diidentikan dengan tes kecerdasan seseorang. TPA yang dilakukan di Indoneia ini juga identik dengan tes GRE GMAT yang sudah menjadi standar internsional

Saat ini, TPA dijadikan sebagai salah satu tes standar penerimaan di perguruan tinggi untuk jenjang S1 sampai S3. Selain itu, TPA juga dipergunakan secara luas sebagai tes standar penyaringan calon pegawai negri sipil (CPNS), maupun pegawai swasta. Bahkan kenaikan pangkat setingkat manajer juga seringkali mempersyaratkan tes TPA dengan skor minimum tertentu. Karena begitu pentingnya tes TPA ini, sudah sepatutnya dilakukan persiapan yang matang sebelum menghadapi tes ini.

Oleh karena itu, penulis tertarik untuk membuat sebuah tugas akhir yang berjudul “Perancangan Web Tes Potensi Akademik Online Berbasis PHP & MySQL” yang dapat mengukur kemampuan akademik seseorang dan diharapkan mampu memberikan sebuah kontribusi yang bermanfaat bagi semua pihak yang akan mengukur kemampuan akademik.


(13)

1.2 Rumusan Masalah

Mengukur kemampuan akademik atau mengukur tingkat kecerdasan seseorang, hendaklah diharuskan terus menerus berlatih. Salah satu cara berlatih dengan membeli soal-soal dari berbagai media cetak yang harus berhubungan dengan tes potensi akademik guna menguji kemampuannya, tapi cara seperti itu belum cukup efisien. Maka dari itu penulis ingin membuat suatu media yang lebih efisien yaitu berupa aplikasi berbasis web dengan soal-soal yang ditampilkan di halaman website. Dengan adanya sebuah media berbasis web ini diharapkan dapat membantuorang-orang yang ingin mengukur kemampuannya di bidang akademik umum, serta mengasah kemampuan hingga batas yang ingin dicapai.

1.3 Batasan Masalah

Agar pembahasan malasah perancangan sistem TPA ini menjadi terarah serta permasalahan yang dicakupi tidak terlalu luas maka batasan masalah yang akan dibahas adalah:

a) Sistem yang akan dirancang adalah mencakup beberapa subtes, yaitu tes verbal (tes persamaan kata, tes lawan kata, dan tes analogi verbal), tes numerik (tes number, tes seri bilangan, tes arismetik, dan logika arismetik), dan tes penalaran (tes logika formal, tes spasial, dan penalaran logis).

b) Proses penilaian terhadap hasil tes yang dilakukan langsung dapat dilihat setelah tes selesai.


(14)

1.4 Tujuan Penelitian

Adapun tujuan dari penelitian ini adalah:

1) Membangun suatu website dinamis yang berguna bagi senya kalangan yang ingin mengukur kemampuan di bidang akademik.

2) Untuk menjelaskan bahwa betapa pentingnya tes potensi akademik, dan diharuskan mengasah kecerdasan yang sangat bermanfaat untuk kebutuhan di dunia kerja nantinya.

3) Menerapkan dan mengembangkan pengetahuan di bidang programming

khususnya bahasa pemrograman PHP dan database server MySQL.

1.4 Metodologi Penelitian

Adapun metode penelitian yang digunakan dalam penelitian ini antara lain:

1) Melakukan pengumpulan data dari berbagai sumber. Hasil pegumpulan dijadikan sebagai data untuk perancangan sistem.

2) Pengerjaan sistem yang dilakukan dalam penelitian ini menggunakan bahasa pemrograman berbasis web, seperti PHP, dan basis data MySQL.

3) Pembuatan program dilakukan dengan Macromedia Dreamweaver, dan pengeditan design maupun foto menggunakan Adobe Photoshop.

4) Melakukan implementasi sistem dengan menguji kebenaran sistem, menjalankan program, dan mulai menggunakan program yang telah dibuat. 5) Pembuatan laporan tugas akhir dengan mengumpulkan seluruh data yang telah

ada dan hal-hal yang berhubungan dalam proses pembuatan situs tersebut. 6) Melakukan revisi laporan tugas ahir apabila terdapat kelasahan mengenai


(15)

1.6 Sistematika Penulisan

Adapun sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut:

BAB 1 : PENDAHULUAN

Dalam bab ini penulisa menguraikan latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, metodologi peneltian serta sistematikan penulisan.

BAB 2 : LANDASAN TEORI

Bab ini berisi uraian teoritis mengenai pengertian-pengertian dan pembahasan mengenai elemen-elemen yang digunakan.

BAB 3 : PERANCANGAN SISTEM

Dalam bab ini penulis menguraikan tentang perancangan sistem, data flow diagram (DFD), flowchart, perancangan database, rancangan interface serta algoritma terbentuknya program.

BAB 4 : IMPLEMENTASI SISTEM

Bab ini berisi uraian pengertian implementasi sistem, kompone utama implementasi sistem, tujuan implementasi sistem, pemeliharaan sistem, dan demonstrasi program.

BAB 5 : KESIMPULAN DAN SARAN

Dalam bab ini penulis menguraikan tentang kesimpulan yang diperoleh dan saran-saran yang berguna dalam pelaksanannya.


(16)

BAB 2

LANDASAN TEORI

2.1 Pengertian Web

Web atau Situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk menampilkan informasi berupa teks, gambar, animasi, suara, dan atau gabungan dari semuanya itu baik bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan

link-link dan dapat diakses melalui sebuah perangkat yang disebut web browser.

2.2 Pengertian Aplikasi Web

Pada awalnya aplikasi web dibangun dengan hanya menggunakan bahasa HTML (Hypertext Markup Language). Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML seperti PHP dan ASP pada skrip dan Apllet pada objek. Aplikasi web dapat dibagi menjadi dua jenis yaitu aplikasi web statis dan dinamis.

Web statis dibentuk dengan menggunakan HTML. Kekurangan aplikasi seperti ini terletak pada keharusan untuk memelihara program secara terus menerus untuk mengikuti setiap perkembangan yang terjadi. Kelemahan ini diatasi oleh model aplikasi web dinamis. Pada aplikasi web dinamis, perubahan informasi dalam halaman

web dilakukan tanpa perubahan program tetapi melalui perubahan data. Sebagai implementasi, aplikasi web dapat dikoneksikan e basis data sehingga perubahan informasi dapat dilakukan oleh operator dan tidak menjadi tanggung jawab dari pembangun web.


(17)

Arsitektur aplikasi web meliputi klien, web server, middleware dan basis data. Klien berinteraksi dengan web server. Secara internal, web server berkomunikasi dengan middleware, kemudian middleware yang berkomunikasi dengan basis data. Contoh middleware adalah PHP dan ASP. Pada mekanisme aplikasi web dinamis, terjadi tambahan proses yaitu server menerjemahkan kode PHP menjadi kode HTML. Kode PHP yang diterjemahkan oleh PHP engine tersebut yang akan diterima oleh klien. (Abdul Kadir,2009)

2.3 Pengertian Tes Potensi Akademik (TPA)

TPA merupakan tes untuk mengukur kemungkinan keberhasilan siswa jika siswa tersebut diterima di perguruan tinggi. Artinya, jika siswa dianggap lulus TPA dengan skor tertentu, berarti siswa tersebut menyelesaikan studi dengan baik selama kuliah di perrguruan tinggi.

Menurut hasil penelitian para ahli, siswa yang mempunyai skor TPA lebih tinggi pada umumnya menyelesaikan studi di perguruan tinggi lebih cepat dibandingkan dengan siswa yang mempunyai skor yang lebih rendah.

Materi soal TPA biasanya terdiri atas 3 subtes yaitu:

1) Verbal (tes persamaan kata, tes lawan kata, dan analogi verbal).

2) Kuantitatif/Numerik (tes number, tes seri, tes arismetik, dan logika arismetik). 3) Penalaran (logika formal, analitis, keruangan (spasial), dan penalaran logis.

Menurut Dr. Yull Iskandar dalam bukunya “Tes Potensi Akademik”, siswa yang pernah melihat / berlatih soal TPA mempunyai skor yang lebih tinggi dibandingkan dengan siswa yang tidak pernah berlatih soal-soal TPA. Ini berarti bahwa dengan berlatih mengerjakan soal TPA dapat meningkatkan nilai TPA itu


(18)

sendiri. Apalagi bobot TPA pada SNMPTN 2012 sebesar 30%, sedangkan mata pelajaran lain masing-masing hanya 10%. Kerjakan soal yang menurut anda paling mudah, kemudian ke soal-soal yang lebih sulit. Setiap soal TPA mempunyai bobot yang sama.

Soal-soal TPA didesain dengan waktu sangat terbatas. Oleh karena itu berlatihlah untuk memahami pertanyaan, mencari cara pemecahan, serta meningkatkan kecepatan dan kepercayaan diri dalam menjawab soal.

Tips menghadapi soal-soal TPA:

1) Berlatihlah dalam waktu yang sangat terbatas seperti tes yang sesungguhnya. Tujuannya untuk membiasakan diri dengan situasi yang sesungguhnya. Latihan ini menghindari anda dari kesalahan karena tekanan situasi.

2) Biasakan diri untuk melatih menjawab satu soal dalam waktu 45 detik atau kurang.

3) Jadwalkan secara mandiri latihan yang meliputi hal-hal berikut: mempelajari gambaran tes, mencari soal-soal sejenis, berlatih soal sesuai kemampuan anda, membiasakan diri menghadapi tes uji coba dengan waktu yang terbatas, dan mengulangi uji coba pada bagian yang anda sering melakukan kesalahan.

2.4 Pengenalan Peronal Home Page (PHP)

PHP adalah singkatan dari Personal Home Page yang merupakan bahasa standar yang digunakan alam dunia web. PHP adalah bahasa pemrograman yang berbentuk skrip yang diletakkan didalam web server. Ada beberapa pengertian tentang PHP, akan tetapi PHP dapat diartikan sebagai Hypertext Prepocessor. Ini merupakan bahasa yang hanya dapat berjalan pada server yang hasilnya dapat ditampilkan pada klien.


(19)

Interpreter PHP dalam mengeksekusi kode PHP pada sisi server disebut serverside, berbeda dengan mesin maya Java yang mengeksekusi program pada sisi klien (client-server).(Kasiman Peranginangin, 2009)

2.4.1 Sejarah PHP

PHP dibuat pada tahun 1994 oleh Rasmus Lerdof. Tetapi dikembangkan oleh orang lain dan setelah melalui 3 kali karya penulisan, akhirnya PHP menjadi bahasa pemrograman Web. PHP adalah sebuah produk yang berbentuk open source, sehingga

source code dari PHP dapat digunakan, diganti, diedit tanpa harus membayar atau dikenakan biaya

2.4.2 Kelebihan dan Kelemahan PHP

Kelebihan PHP sebagai bahasa server-side adalah:

1) Bahasa pemrograman PHP adalah sebuah bahasa skrip yang tidak melakukan sebuah kompilasi dalam penggunaannya.

2) Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai IIS sampai dengan apache, dengan konfigurasi yang relatif mudah.

3) Dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah sistem.

Adapun kelemahan PHP adalah:

1) Tidak ideal untuk pengembangan skala besar.

2) Tidak bisa memisahkan antara tampilan dengan logik dengan baik (walau penggunaan template dapat memperbaikinya).


(20)

3) PHP memiliki kelemahan security tertentu apabila programmer tidak jeli dalam melakukan pemrograman dan kurang memperrhatikan isu dan konfigurasi PHP.

2.4.3 Penggabungan Script PHP dan HTML

Bahasa pemrograman PHP dapat digabungkan dengan HTML dengan terlebih dahulu memberikan tanda tag buka dilanjutkan tanda tanya (<?) kemudian ditutup dengan tanda tanya dilanjutkan dengan tanda tag tutup (?>). Ada dua tipe penggabungan antara PHP dan HTML yaitu:

1) Embedded Script

Yakni penulisan tag PHP di sela-sela tag HTML. Dengan cara ini, penulisan tag PHP digunakan untuk mengapit bagian-bagian tertentu dalam dokumen yang memerlukan skrip PHP untuk proses di dalam server. Embedded Script menempatkan sebagai bagian dari skrip HTML.

Contoh penulisan Embedded Script dapat dilihat dibawah ini:

<html>

<head>

<title>Testing</title> </head>

<body>

<?php echo “Halo Dunia”; ?>

</body> </html>

2. Non Embedded Script

Yakni cara penulisan tag PHP dibagian paling awal dan paling akhir dokumen. Dengan cara ini, penulisan tag PHP digunakan untuk mengawali dan mengakhiri keseluruhan bagian dalam sebuah dokumen. Non Embedded Script menempatkan skrip HTML sebagai bagian dari skrip PHP. Contoh penulisan Non Embedded Script


(21)

<?

echo „<html>‟; echo „<head>‟;

echo „<title>Testing</title>‟; echo „</head><body>‟; echo „Halo Dunia‟; echo „</body>‟; echo „</html>‟;

?> 2.5 MySQL

MySQL adalah sebuah perangkat lunak Pembuat database yang bersifat terbuka atau open source dan berjalan disemua platform baik Linux maupun Windows, MySQL merupakan program pengakses database yang bersifat network sehingga dapat digunakan untuk aplikasi Multi User (Pengguna Banyak).

MySQL adalah Relational Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Dimana

setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat komersial.

MySQL dapat dikatakan lebih unggul dibandingkan database server lainnya dalam query data. Hal ini terbukti untuk query yang dilakukan oleh single user,

kecepatan query MySQL bisa sepuluh kali lebih cepat dari PostgreSQL dan lima kali

lebih cepat dibandingkan Interbase.

2.6 Macromedia Dreamweaver

Adobe Dreamweaver merupakan aplikasi desain dan pengembangan web yang menyediakan editor WYSIWYG visual (bahasa sehari-hari yang disebut sebagai Design view) dan kode editor dengan fitur standar seperti syntax highlighting, code completion, dan code collapsing serta fitur lebih canggih seperti real-time syntax checking dan code introspection untuk menghasilkan petunjuk kode untuk membantu


(22)

pengguna dalam menulis kode. Tata letak tampilan Design memfasilitasi desain cepat dan pembuatan kode seperti memungkinkan pengguna dengan cepat membuat tata letak dan manipulasi elemen HTML. Dreamweaver memiliki fitur browser yang terintegrasi untuk melihat halaman web yang dikembangkan di jendela pratinjau program sendiri agar konten memungkinkan untuk terbuka di webbrowser yang telah terinstall. Aplikasi ini menyediakan transfer dan fitur sinkronisasi, kemampuan untuk mencari dan mengganti baris teks atau kode untuk mencari kata atau kalimat biasa di seluruh situs, dan templating feature yang memungkinkan untuk berbagi satu sumber kode atau memperbarui tata letak di seluruh situs tanpa server-side includes atau scripting. Behavior Panel juga memungkinkan penggunaan JavaScript dasar tanpa pengetahuan coding, dan integrasi dengan Adobe Spry Ajax framework menawarkan akses mudah ke konten yang dibuat secara dinamis dan interface.

Dreamweaver dapat menggunakan ekstensi dari pihak ketiga untuk memperpanjang fungsionalitas inti dari aplikasi, yang setiap pengembang web bisa menulis (sebagian besar dalam HTMLdan JavaScript). Dreamweaver didukung oleh komunitas besar pengembang ekstensi yang membuat ekstensi yang tersedia (baik komersial maupun yang gratis) untuk pengembangan web dari efek rollover sederhana sampai full-featured shopping cart.

Dreamweaver, seperti editor HTML lainnya, edit file secara lokal kemudian diupload ke web server remote menggunakan FTP, SFTP, atau WebDAV.


(23)

Gambar 2.1 Macromedia Dreamweaver CS5

2.7 Jquery

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.

jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser –cross browser.

jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh


(24)

perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.

jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website

kita. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan web yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.


(25)

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user (pemakai) mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta diimplementasikan. Perancangan sistem adalah suatu upaya untuk membuat suatu sistem yang baru atau memperbaiki sistem yang lama secara keseluruhan atau memperbaiki sistem yang telah ada. Desain sistem secara umum mengidentifikasikan komponen-komponen sistem informasi yang akan didesain secara terinci. Desain terinci dimaksudkan untuk pemrogram komputer dan ahli teknik lainnya yang akan mengimplementasikan sistem.

3.2 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) adalah suatu diagram yang menggunakan notasi-notasi untuk menggambarkan arus dari data sistem, yang penggunaannya sangat membantu untuk memahami sistem secara logika, tersruktur dan jelas. DFD merupakan alat bantu dalam menggambarkan atau menjelaskan sistem yang sedang berjalan logis. Adapun simbol-simbol dari DFD yaitu:


(26)

Tabel 3.1 Simbol-simbol DFD

Data flow diagram dari rancangan web tes potensi akademik secara online


(27)

1. Diagaram Konteks


(28)

3.3 Perancangan Database

Database atau Basis Data adalah sekumpulan data yang saling terhubung satu dengan yang lainnya atau sekumpulan table yang saling terhubung satu dengan yang lainnya.dan fungsi dari database adalah menyimpan suatu data pada table-tabel dan dikumpulkan menjadi satu dengan database. Database juga bisa di umpamakan sebagai sebuah rumah dengan beberapa kamar-kamar dan sebuah property seperti lemari, meja belajar, tempat tidur itu bisa di sebut dengan data querynya. Berikut rancangan tabel yang penulis gunakan dalam mebangun sistem informasi ini:

Tabel 3.2 Tabel Admin

Field

Type

Null

Default

pengguna varchar(30) Yes NULL

sandi

varchar(32) Yes NULL

Tabel 3.3 Tabel Jawaban

Field

Type

Null

Default

id_soal

varchar(5)

Yes NULL

id_jawaban varchar(8)

No

pilihan

text

Yes NULL

name

varchar(10) Yes NULL

jawaban

varchar(7)

Yes NULL


(29)

Tabel 3.4 Tabel Peserta

Field

Type

Null

Default

id_peserta varchar(15) Yes NULL

nama

varchar(50) Yes NULL

umur

varchar(3)

Yes NULL

Pendidikan varchar(8)

Yes NULL

skor

varchar(20) No

tanggal

varchar(12) Yes NULL

Tabel 3.5 Tabel Soal Verbal

Field Type

Null

Default

id_soal varchar(5) Yes NULL

soal

text

Yes NULL

Tabel 3.6 Tabel Soal Logika

Field Type

Null

Default

id_soal varchar(5) No

soal

text

No

Tabel 3.7 Tabel Soal Numerik

Field Type

Null

Default

id_soal varchar(5) No


(30)

Tabel 3.8 Tabel Testi

Field

Type

Null

Default

id_testi

varchar(20) Yes NULL

nama

varchar(30) Yes NULL

email

varchar(30) Yes NULL

komentar text

Yes NULL

gambar

text

Yes NULL

tanggal

varchar(15) No

3.4 Flowchart

Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-simbol grafis yang menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing masing langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma tersebut.

Penjelasan arti dari lambang-lambang flowchart dapat didefinisikan seperti tabel berikut:


(31)

(32)

3.4.1 Flowchart Daftar

Gambar 3.2 Flowchart Halaman Daftar START

a

INPUT DATA

TERSIMPAN DI DATABASE

MASUK KE HALAMAN UJIAN

FINISH


(33)

3.4.2 Flowchart Tes

false

true

Gambar 3.3 Flowchart Halaman Tes

TAMPIL SKOR IF SELESAI INPUT

JAWABAN START

a

DAFTAR

MASUK KE HALAMAN UJIAN

FINISH


(34)

3.4.3 Flowchart Testimonial

Gambar 3.4 Flowchart Halaman Testi TERSIMPAN

DI DATABASE

OUTPUT TAMPIL DI HALAMAN TESTI

PROSES BERRHASIL

INPUT DATA & KOMENTAR

FINISH

a

START


(35)

3.4.4 Flowchart Login Admin

false

true

Gambar 3.5 Flowchart Halaman Login Admin

INPUT DATA ADMIN

START

a

TAMPIL HALAMAN ADMIN

FINISH

a

LOGIN BERRHASIL

IF KONDISI


(36)

3.4.5 Flowchart Input Soal

Gambar 3.6 Flowchart Halaman Input Soal START

a

INPUT SOAL & JAWABAN

FINISH

a

PROSES BERRHASIL

IF KONDISI PROSES GAGAL

DATA SOAL MASUK Ke DATABASE


(37)

3.5 Membangun Halaman Situs

Adapun halaman-halaman yang dibangun oleh penulis adalah:

1. Halaman index.php, merupakan halaman utama yang akan diakses pertama kali situs dibuka. Haaman ini berisikan informasi singkat mengenai tes potensi akademik dan link-link menuju halaman berikutnya.

Halaman index yang penulis bangun dibagi menjadi 2 bagian, yaitu: a) Halaman index untuk admin

Merupakan halaman yang dikhususkan untuk administrator yang mana untuk masuk ke halaman ini harus melakukan login terlebih dahulu.

b) Halaman index untuk user

Merupakan halaman untuk user, dimana user dapat mengakses halaman web

tersebut. Pada halaman ini user tidak dapat merubah isi dari situs. 2. Halaman daftar.php, merupakan halaman yang digunakan oleh user untuk mendaftar identitas diri agar dapat mengakses soal-soal yang terdapat di dalam situs tpa online.

3. Halaman tips.php, merupakan halaman yang berisikan tips dan trik yang dapat digunakan user dalam melakuan tpa.

4. Halaman about.php, merupakan halaman mengenai situs dan identitas penulis.

3.6 Algoritma

Tahap-tahap yang dilakukan penulis dalam membangun halaman situs adalah sebagai berikut:

1) Membuka software Macromedia Dreamweaver CS5 sebagai editor dalam membangun halaman.


(38)

2) Mengatur letak layout dengan memanfaatkan tools dan perintah yang terdapat pada Dreamweaver yaitu dengan meletakkan link-link, grafik, animasi, isi halaman situs yang telah dirancang.

3) Menulis dan meletakkan skrip-skrip PHP dan HTML yang diperlukan pada tempat yang sesuai dikerjakan di jendela code pada Dreamweaver.

4) Menulis skrip CSS untuk memperindah tampilan situs. 5) Mengerjakan haaman pembangun situs.

5.1) Algoritma Halaman Register

Langkah 1 : input data kedalam form yang tersedia

Langkah 2 : Jika data sudah terisi, maka proses registrasi berhasil dan record tersimpan ke database

5.2) Algoritma Halaman Akses Soal TPA

Langkah 1 : user yang telah berhasil daftar diharuskan memilih subtes yang inginkan, setelah itu makan akan tampil soal Langkah 2 : Jika user telah menjawab soal yang tersedia,

selanjutnya tekan tombol “selesai” untuk mengakhiri Langkah 3 : Jika berhasil, maka dengan otomatis user akan

mendapatkan skor dan jumlah jawaban yang benar dan salah

Langkah 4 : Jika proses gagal, maka ulangi langkah 1 5.3) Algoritma Halaman Testimoni

Langkah 1 : Isi semua record yang tersedia termasuk komentar Langkah 2 : Jika proses berhasil, maka komentar anda telah terkirim

dan akan tampil di daftar komentar Langkah 3 : Jika proses gagal, maka ulangi langkah 1


(39)

5.4) Algoritma Halaman Login Administrator

Langkah 1 : Masukkan data administrator yang ada Langkah 2 : Setelah itu tekan tombol untuk submit record

Langkah 3 : Jika proses berhasil, maka berada di level admin dan berhak memperbaharui isi halaman situs


(40)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi sistem adalah suatu prosedur yang dilakukan untuk menyelesaikan sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah diuji, menginstal dan mulai menggunakan sistem baru yang diperbaiki. Adapun langkah-langkah yang dibutuhkan dalam implementasi sistem adalah:

1. Mendapatkan software dan hardware yang tepat serta sesuai untuk merancang

website.

2. Menyelesaikan rancangan sistem.

3. Menulis, menguji, mengontrol dan mendokumentasikan website. 4. Mendapatkan persetujuan.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sisem adalah sebagai berikut:

1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana pengolahan data dan penyajian informasi.

2. Menyelesaikan rancanan sistem yang ada di dalam dokumen sistem yang baru atau yang telah disetujui.

3. Memastikan bahwa pengunjung dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.

4. Memastikan bahwa sistem yang telah berjalan dan lancar dengan mengontrol dan melakukan instalasi secara benar.


(41)

4.3 Spesifikasi Hardware

Hardware adalah suatu komponen yang sangat dibutuhkan dalam mewujudkan sistem yang diusulkan. Dalam hal ini penulis merinci spesifikasi komponen hardware yaitu:

1. PC dengan processor Intel Pentium 2.1GHz.

2. Microsoft Windows XP Proffesional, Microsoft Windows 2000 service pack

4.

3. Microsoft Windows 7. 4. Memory minimal 1 GB. 5. Hard disk 20GB. 6. Monitor super VGA. 7. Keyboard.

8. Mouse.

4.4 Software

Hardware tidak akan dapat memecahkan suatu masalah tanpa adanya komponen

software. Adapun software yang digunakan dalam pembuatan website ini adalah: 1. Apache sebagai web server.

2. PHP sebagai web programming. 3. MySQL sebagai database server.

4. Adobe Photoshop CS 5 sebagai designer.


(42)

4.5 Brainware

Brainware adalah semua pihak yang bertanggung jawab dalam pengembangan sistem informasi, pemrosesan dan penggunaan keluaran sistem informasi.

Brainware dalam situs ini terbagi atas:

1. Sistem analis: orang yang menganalisa sistem dengan mempelajari masalah-masalah yang timbul dan menentukan kebutuhan-kebutuhan pemakai dan mengidentifikasi pemecahan yang beralasan.

2. Programmer: orang yang membuat sistem dengan menggunakan salah satu bahasa pemrograman yang dikuasainya.

3. Operator: orang yang memakai sistem.

4.6 Instalasi Apache, PHP dan MySQL

Dalam menginstalasi Apache, PHP dan MySQL dilakukan secara satu per satu. Adapaun software dapat diperoleh dari situs http://www.apache.org untuk Apache, http://www.php.net untuk PHP, dan http://www.mysql.com untuk MySQL. Tahap instalasinya dimulai dengan menginstalasi Apache, kemudian disusul dengan menginstalasi PHP dan MySQL. Setelah instalasi selesai dilanjutkan dengan melakukan pengaturan konfigurasi yang diberikan setelah instalasi selesai. Namun hal ini memerlukan pengaturan yang sedikit rumit.

Alternatif lain yang digunakan penulis adalah dengan menggunakan Xampp. Perangkat lunak Xampp dengan versi 1.7.7 ini penulis download di situs http://sf.net. Xampp ini memberikan paket-paket yang cukup lengkat diantaranya:

- Apache 2.2.17


(43)

- PHP 5.3.5, OpenSSL 0.9.8l - phpMyAdmin 3.3.9

- XAMPP Control Panel 2.5.8 - Webalizer 2,21-02

- Mercury Mail Transport System v4.72 - FileZilla FTP Server 0.9.37

- SQLite 2.8.17 - SQLite 3.6.20 - ADOdb 5.11 - Xdebug 2.1.0rc1

- Tomcat 7.0.3 (dengan mod_proxy_ajp sebagai konektor)

Dengan menginstalasi Xampp secara otomatis ketiga software utama yang akan digunakan yaitu: Apache, PHP dan MySQL telah dapat digunakan tanpa perlu konfigurasi yang rumit.

4.7 Menjalankan Xampp

Setelah proses instalasi berjalan dengan sempurna, langkah selanjutnya ialah menjalankan Xampp. Untuk itu, buka direktori C:\xampp.


(44)

Gambar 4.1 Direktori C:\xampp

Untuk menjalankan Xampp, klik ganda pada xampp_start.exe, sedangkan untuk mematikan servis Xampp klik ganda pada xampp_stop.exe.

4.8 Pengujian di Browser

Setelah menginstalasi Xampp, maka aplikasi web telah dapat di ujikan di komputer lokal. Adapun caranya adalah sebagai berikut:

1. Letakkan file yang membangun web tadi ke dalam suatu folder kemudian diletakkan di dalam folderhtdocs, terlihat seperti gambar berikut:


(45)

Gambar 4.2 Folder Berisi File-File di Dalam Folder htdocs

2. Buka web browser Google Chrome

3. Pada kotak URL ketikkan http://localhost/[namafolder]. Karena penulis meletakkan file-file web di folder tpa maka alamatnya sebagai berikut:

Gambar 4.3 Penulisan Alamat di URL

4. Setelah dilakukan Enter pada keyboard maka akan terlihat tampilan sebagai berikut:


(46)

Gamba 4.4 Hasil pengujian Aplikasi Web di Browser

Demonstrasi Program

A. Halamanan Utama (index.php)


(47)

B. Halaman Daftar (daftar.php)

Gambar 4.6 Halaman Daftar Ujian

C. Halaman Testimoni (testimoni.php)


(48)

D. Halaman Tips dan Trik (tips.php)

Gambar 4.8 Halaman Tips dan Trik

E. Halaman Ujian (ujian.php)


(49)

F. Halaman Soal (verbal.php)

Gambar 4.10 Halaman Soal TPA

G. Halaman Skor (hasil.php)


(50)

H. Halaman Admin (index.php)

Gambar 4.12 Halaman Login Admin

I. Halaman Admin (ubah.php)


(51)

J. Halaman Admin (peserta.php)


(52)

BAB 5

KESIM.PULAN DAN SARAN

5.1 Kesimpulan

Dari hasil pembahasan tentang perancangan aplikasi tes potensi akademik online

berbasis web ini, maka penulis dapat mengambil beberapa kesimpulan diantaranya adalah sebagai berikut:

1. Pembuatan suatu aplikasi web dapat dilakukan dikomputer lokal tanpa terkoneksi ke internet. Koneksi internet diperlukan ketika proses upload file

dan pengaksesan situs atau dikenal dengan nama hosting.

2. Untuk mempercepat loading ketika mengakses situs di internet, dapat dilakukan teknik slicing (pemotongan) pada grafis web dan optimasi gambar yaitu dengan mengurangi warna dari grafis web.

3. Untuk menarik minat pengunjung, perlu dibuat rancangan layout/template

dengan gambar dan animasi yang menarik.

4. Penyajian informasi yang baik dapat dilakukan dengan cara membuat website

yang dinamis.

5. selain sebagai sarana penyampaian informasi, website juga makin dikembangkan sebagai sarana pengolahan data secara online.

6. Pada website tes potensi akademik online berbasis web, penulis menyajikan media yang user friendly yang dapat digunakan oleh user untuk menguji kemampuan akademik. User juga dapat langsung mengetahui score yang didapat ketika selesai menjawab soal yang tersedia.


(53)

5.2 Saran

Agar website ini berkembang dengan baik maka, penulis memberikan saran sebagai berikut:

1. Website yang dibuat oleh penulis diharapkan bermanfaat pada proses pembelajaran dan peningkatan kualitas dibidang akademik.

2. Diharapkan adanya pengembangan lebih lanjut, sehingga menjadi sebuah media yang sangat membantu seseorang yang ingin mengukur kemampuannya dibidang akademik.


(54)

DAFTAR PUSTAKA

Panduan Tatacara Penulisan Skripsi & Tugas Akhir. 2008. Dokumen Nomor: Akad/05/2005. Medan: Fakultas Matematika dan Ilmu Pengetahuan Alam

Universitas Sumatera Utara.

Hadi, Mulya. 2007. Dreamweaver 8 untuk orang awam. Palembang: Penerbit Maxikom.

Kadir, Abdul. 2010. Mudah Menjadi Programer. Jakarta : Andi

Arifin, Setiawan. 2003. Menjadi Web Programmer HTML, PHP & MYSQL, Dasar dan Aplikasi. Yogyakarta.

Madcoms, 2009. Menguasai XHTML, CSS, PHP, & MySQL melalui Dreamweaver. Yogyakarta: Penerbit Andi.

Purwarto,Eko.2004. Webmaster Profesional. Medan: Webmedia http://www.begotsantoso.com/panduan_tes_potensi_akademik.htm http://www.brainyquote.com


(55)

LISTING PROGRAM

index.php

<html> <head>

<title></title>

<link rel="stylesheet" type="text/css" href="engine1/style.css" /> <script type="text/javascript" src="engine1/jquery.js"></script> <script src="timer/slideup.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script>

<link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="wrapper"> <?php error_reporting(0); if($_GET[menu]=="index"){ echo"<style> #index {

background: rgb(238, 99, 99); color:#fff; } </style>"; } elseif($_GET[menu]=="tips"){ echo"<style> #tips {

background: rgb(238, 99, 99); color:#fff; } </style>"; } elseif($_GET[menu]=="testi"){ echo"<style> #testi {

background: rgb(238, 99, 99); color:#fff;


(56)

</style>"; }

elseif($_GET[menu]=="ujian"){ echo"<style>

#daftar {

background: rgb(238, 99, 99); color:#fff; } </style>"; } elseif($_GET[menu]=="about"){ echo"<style> #about {

background: rgb(238, 99, 99); color:#fff; } </style>"; } ?> <div class="wrapper-header"> <div class="header">

<span class="header-title">TES POTENSI AKADEMIK</span>

<img src="gambar/LOGO.png" class="img-header"> </div> <div class="menu"> <div class="sub-menu"> <ul> <li><a id="index" href="index.php?menu=index"><span id="menu1">Home</span></a></li> <li><a id="tips"

href="tpa.php?menu=tips"><span id="menu2">Tips dan Trik</a></span></li> <li><a id="testi" href="tpa.php?menu=testi"><span id="menu4">Testimoni</a></span></li> <li><a id="daftar" href="tpa.php?menu=ujian"><span id="menu4">Tes Uji</a></span></li> <li><a id="about" href="tpa.php?menu=about"><span id="menu3">About</a></span></li> </ul> </div> </div>


(57)

</div> <?php include"slider_baru.php"; ?> </div> <div class="footer">

<span>&copy; 2013 Simulasi Tes Potensi Akademik</span> </div> </body> </html> koneksi.php <?php mysql_connect("localhost","root",""); mysql_select_db("tpa");

$time = gmdate('his', time()+60*60*7); $date = gmdate('d-m-Y', time()+60*60*7); ?> tips.php <html> <head> <title></title> <style type="text/css"> .warapper-about { float: left; width: 100%; margin: 0px; padding: 0px; } .about { float: left; width: 100%; } .header-about { float: left; width: 500px;

padding:10px 0px 10px 145px; background: rgb(129, 129, 129); border-radius: 0px 0px 100px 0px; font-family: calibri;

font-size: 1.1em; font-weight: bold; color: #fff;


(58)

border-bottom: 1.5px solid #dedede; } .info-about { float: left; width: 830px; height: 400px;

background: rgba(222, 222, 222, 0.35); margin: 20px 0px 0px 30px;

padding: 10px; border-radius: 5px; overflow: scroll; overflow-x: hidden; } .img-info { float: left; width: 200px; height: 200px;

margin: 5px 10px 3px 10px; border-radius: 3px; } .text { float: left; font-family: calibri; font-size: 1em; text-align: justify; line-height: 25px; }

.text span {

float: left; font-family: calibri; font-size: 1.1em; font-weight: bold; height: 5px; margin-right: 5px; } .info-about-1 { float: left; font-family: calibri; font-size: 1em; text-align: justify; }

.info-about ul {

list-style: none; } .info-about-1 ul{ list-style: none; margin: 0px; padding: 0px;


(59)

} .judul-utama { float: left; font-family: calibri; font-size: 1em; font-weight: bold; } .judul-sub { float: left;

margin: 10px 0px 0px 0px; width: 100%; font-family: calibri; font-weight: bold; } .sub { float: left;

margin: 3px 0px 10px 8px; width: 100%; font-family: calibri; } </style> </head> <body> <div class="warapper-about"> <div class="about">

<span class="header-about"> Tips dan Trik</span>

<div class="info-about"> <p class="info-about-1">

Tips dan Trik Mengerjakan Soal TPA

Tes potensi akademik atau terkenal dengan sebutan TPA adalah tes yang digunakan untuk mengetahui kemampuan seseorang dalam bidang akademis.

Saat ini Bappenas (Badan Perencanaan Pembangunan Nasional) ditunjuk sebagai penyelenggara tes TPA ini. Bappenas juga bekerjasama dengan universitas

maupun lembaga-lembaga terkait lainnya yang membutuhkan tes ini untuk keperluan tertentu sehingga tes TPA lazim disebut dengan TPA OTO BAPPENAS.

Kadang banyak diantara kita yang sebelumnya tidak pernah

mengikuti tes semacam ini bertanya-tanya bagaimana caranya agar bisa lolos dan melalui tes TPA ini

dengan berhasil. Dalam artikel berikut ini akan anda temukan beberapa tips dan trik mengerjalan soal TPA BAPPENAS:

<ul>

<li class='judul-utama'>1. Tips Menjawab Soal TPA BAPPENAS</li> <ul>


(60)

<li class='judul-sub'>-Persiapkan Mental</li>

<li class='sub'>Mempersiapkan mental yang dimaksud disini adalah usahakan kondisi anda sebelum mengerjakan soal dalam keadaan rileks, tenang namun tetap fokus dan

berkonsentrasi.</li>

<li class='judul-sub'>-Persiapkan Perlengkapan Teknis</li> <li class='sub'>Mempersiapkan perlengkapan yang digunakan dan diperlukan selama TPA mutlak harus dilakukan agar saat

mengerjakan, Anda mampu mengatasi hal-hal yang tak terduga misal pensil yang tiba-tiba patah dan lain sebagainya.</li> <li class='judul-sub'>-Berlatih TPA Online</li>

<li class='sub'>Melatih diri mengerjakan TPA secara online, bisa jadi alternatif bagi Anda mempersiapkan diri sebelum menghadapi TPA BAPPENAS, karena semakin anda sering berlatih maka akan semakin memudahkan anda untuk dengan cepat menentukan jawaban dari soal yang ada dalam TPA.</li>

<li class='judul-sub'>-Berdoa</li>

<li class='sub'>Berdoa sebelum memulai tes sangatlah diperlukan agar selama tes berlangsung, Anda akan mudah untuk merasa

tenang dan nyaman.</li> </ul>

<li class='judul-utama'>2. Trik Menjawab Soal TPA BAPPENAS.</li>

<ul>

<li class='judul-sub'>-Jawab Soal yang anda anggap mudah</li> <li class='sub'>Hal ini penting untuk anda lakukan karena jika terpaku pada satu soal yang sulit maka anda akan kehabisan waktu, sementara semua soal yang diberikan memiliki bobot yang sama.</li>

<li class='judul-sub'>-Pelajari Rumus Sederhana Matematika</li> <li class='sub'>Soal perhitungan matrematika adalah salah satu bagian dari TPA namun bukan matematika dengan rumus yang susah. Matematika dengan rumus rumus sederhana sering sekali muncul maka tak ada salah nya jika anda mempersiapkan diri untuk menghafalnya saat di rumah (misal rumus Phytagoras, atau juga Rumus Prosentase sederhana).</li>

<li class='judul-sub'>-Jawab Soal Dari Belakang</li>

<li class='sub'>Kendati teori ini belum teruji kebenarannya, namun beberapa orang yang pernah melakukan TPA menyatakan bahwa soal-soal yang ada di nomor urut belakang cenderung lebih mudah dikerjakan dari pada nomer urut paling depan.</li></li>

</ul> </ul> </p> </div> </div> </div>


(61)

</body> </html> testimoni.php <html> <head> <title></title> <style type="text/css"> .warapper-about { float: left; width: 100%; margin: 0px; padding: 0px; } .about { float: left; width: 100%; } .header-about { float: left; width: 500px;

padding:10px 0px 10px 145px; background: rgb(129, 129, 129); border-radius: 0px 0px 100px 0px; font-family: calibri;

font-size: 1.1em; font-weight: bold; color: #fff;

box-shadow: 1.5px 1.5px 1.5px #dedede; border-bottom: 1.5px solid #dedede; }

.info-about { float: left; width: 830px; height: 400px;

background: rgba(222, 222, 222, 0.35); margin: 20px 0px 0px 30px;

padding: 10px; border-radius: 5px; overflow: scroll; overflow-x: hidden; } .img-info { float: left; width: 200px; height: 200px;

margin: 5px 10px 3px 10px; border-radius: 3px;


(62)

} .text { float: left; font-family: calibri; font-size: 1em; text-align: justify; line-height: 25px; }

.text span {

float: left; font-family: calibri; font-size: 1.1em; font-weight: bold; height: 5px; margin-right: 5px; } /*komentar*/ .wrapper-komentar { float: left;

margin: 5px 0px 0px 0px; width: 850px; } .balas-img { float: left; width: 50px; height: 50px; border-radius: 5px; } .square-from { float: left; width: auto; min-width: 760px; max-width: 760px; min-height: 35px; height: auto;

background: rgb(177, 216, 252); margin:0px; border-radius: 2px; } .arrow-right { float: left; width:0px; height:0px; margin-top: 6px;

border-bottom:5px solid transparent; /* left arrow slant */


(63)

border-right:5px solid rgb(177, 216, 252); /* bottom, add background color here */

font-size:0px; line-height:0px; } .from { float: right; width: 100%; height: auto;

margin:10px 0px 0px 0px; }

.message-from {

border-bottom: 1px solid #dcdcdc; width: 770px; } .inbox { float: left; padding: 8px; margin: 0px; font-family: calibri; font-size: 1em; } .wrapper-pesan { float: left;

margin: -10px 0px 0px 10px; } .balas-komentar-user { float: left; width: 850px; } .img-balas { float: left; } .img-balas-komentar { float: right; } .balas-img-komentar { float: right; width: 50px; height: 50px; border-radius: 5px; } .komentar-balas { float: left; width: 100%; } .tgl { float: right;


(64)

width: 100%;

font-family: calibri; color: white;

height: 20px; }

.tgl span {

float: right;

margin: 0px 30px 0px 0px; } .name { float: right; width: 100%; font-family: calibri; font-size: 1.1em; color: white; height: 20px; }

.name span {

float: left;

margin: 5px 0px 0px 10px; }

.input-text { float: left; width: 400px; height: 280px;

margin: 10px 0px 0px 30px; }

.form-testi { float: left; width: 300px; height: 30px;

margin: 5px 5px 0px 10px; } .text-area { float: left; width: 300px; height: 100px; resize: none; margin-left: 10px; }

.title-table-testi span { float: left; font-family: calibri; font-weight: bold; width: 100px; } .button-komen { float: right;


(65)

width: 80px; height: 30px; margin-top: 5px; } </style> </head> <body> <div class="warapper-about"> <div class="about">

<span class="header-about"> Testimoni</span> <div class="info-about">

<!-- mulai --> <?php

include"file/koneksi.php";

$sql = mysql_query("select * from testi"); while($data=mysql_fetch_array($sql)){ echo"<div class='wrapper-komentar'> <div class='balas-komentar-user'> <div class='komentar-balas'> <div class='img-balas'> <img src='gambar/$data[gambar]' class='balas-img'> </div> <div class='wrapper-pesan'> <div class='from'> <div class='square-triangle'> <div class='arrow-right'> </div> <div class='square-from'><div class='name'><span>$data[nama]</span></div><p class='inbox'>$data[komentar]</p> <div class='tgl'><span>$data[tanggal]</span></div> </div> </div> </div> </div> </div> </div> </div>"; } ?>

<!-- akhir --> </div>


(66)

<form action="proses_testi.php" method="post" enctype="multipart/form-data"> <table> <tr> <td class="title-table-testi"><span>input gambar</span></td>

<td><input type="file" name="foto" class="form-testi"></td>

</tr> <tr>

<td class="title-table-testi"><span>Nama Anda</span></td>

<td><input type="text" name="nama" class="form-testi"></td>

</tr> <tr> <td class="title-table-testi"><span>Email</span></td>

<td><input type="text" name="email" class="form-testi"></td> </tr> <tr> <td class="title-table-testi"><span>Komentar</span></td> <td><textarea class="text-area" name="komentar"></textarea></td> </tr> <tr>

<td colspan="2"><input type="submit" name="submit" value="komentar" class="button-komen"></td> </tr> </table> </form> </div> </div> </div> </body> </html> daftar.php <html> <head> <title></title> <style type="text/css"> .warapper-about { float: left; width: 100%; margin: 0px;


(67)

padding: 0px; } .about { float: left; width: 100%; } .header-about { float: left; width: 500px;

padding: 10px 0px 10px 145px; background: rgb(129, 129, 129); border-radius: 0px 0px 100px 0px; font-family: calibri;

font-size: 1.1em; font-weight: bold; color: #fff;

box-shadow: 1.5px 1.5px 1.5px #dedede; border-bottom: 1.5px solid #dedede; }

.info-about { float: left; width: 420px; min-height: 180px; background: #dedede ;

margin: 20px 0px 0px 240px; padding: 10px; border-radius: 5px; } .img-info { float: left; width: 200px; height: 200px;

margin: 5px 10px 3px 10px; border-radius: 3px; } .text { float: left; font-family: calibri; font-size: 1em; text-align: justify; line-height: 25px; }

.text span {

float: left;

font-family: calibri; font-size: 1.1em; font-weight: bold;


(68)

height: 5px;

margin-right: 5px; }

.title-daftar span { float: left; width: 100px; } .form-daftar { float: left; width: 300px; height: 30px; padding-left: 5px; } .umr { float: left; width: 80px; height: 25px;

margin: 5px 0px 0px 10px; }

.pendidik {

float: left; width: 80px; height: 25px;

margin: 5px 0px 0px 10px; } .button-daftar { float: left; width: 80px; height: 30px; } </style> </head> <body> <div class="warapper-about"> <div class="about">

<span class="header-about"> Daftar Ujian</span> <div class="info-about"> <form action="proses_daftar.php" method="post"> <table> <tr> <td class="title-daftar"><span>Nama Peserta</span></td>

<td> <input type="text" name="nama" class="form-daftar"></td>

</tr> <tr>


(69)

<td class="title-daftar">Umur</td> <td> <select name="umur" class="umr">

<?php $no = 18;

while($no <= 23){ echo"<option value='$no'>$no</option>"; $no++; } ?> </select></td> </tr> <tr> <td class="title-daftar">Pendidikan</td> <td> <select name="pendidikan"

class="pendidik"> <option value="-">Pilih</option> <option value="SMA">SMA</option> <option value="Diploma">Diploma</option> <option value="Sarjana">Sarjana</option> </select></td> </tr> <tr>

<td colspan='2'><input type="submit" name="input" class="button-daftar" value="Daftar"></td>

</tr> </table> </form> </div> </div> </div> </body> </html> proses_daftar.php <?php include"file/koneksi.php"; $nama = $_POST[nama]; $umur = $_POST[umur];

$pendidikan = $_POST[pendidikan];

$date = gmdate('d-m-Y', time()+60*60*7); mysql_query("insert into peserta

values('$time','$nama','$umur','$pendidikan','','$date')"); header('location: soal/index.php?id='.$time); ?> proses_testi.php <?php include"file/koneksi.php";


(70)

$nama = $_POST[nama]; $email = $_POST[email]; $komen = $_POST[komentar];

$time = gmdate("his",time()+60*60*7); $date = gmdate("d-m-Y", time()+60*60*7);

$lokasi_gambar = $_FILES["foto"]["tmp_name"]; $nama_gambar = $_FILES["foto"]["name"];

if($lokasi_gambar){

move_uploaded_file($lokasi_gambar,"gambar/".$nama_gambar) ;

mysql_query("insert into testi

values('$time','$nama','$email','$komen','$nama_gambar','$date' )");

header('location: tpa.php?menu=testi'); }

else {

mysql_query("insert into testi

values('$time','$nama','$email','$komen','default.gif','$date') "); header('location: tpa.php?menu=testi'); } ?> about.php <html> <head> <title></title> <style type="text/css"> .warapper-about { float: left; width: 100%; margin: 0px; padding: 0px; } .about { float: left; width: 100%; } .header-about { float: left; width: 500px;

padding:10px 0px 10px 145px; background: rgb(129, 129, 129); border-radius: 0px 0px 100px 0px;


(71)

font-family: calibri; font-size: 1.1em; font-weight: bold; color: #fff;

box-shadow: 1.5px 1.5px 1.5px #dedede; border-bottom: 1.5px solid #dedede; }

.info-about { float: left; width: 830px; min-height: 400px; background: #dedede ; margin: 20px 0px 0px 30px; padding: 10px; border-radius: 5px; } .img-info { float: left; width: 200px; height: 200px;

margin: 5px 10px 3px 10px; border-radius: 3px; } .text { float: left; font-family: calibri; font-size: 1em; text-align: justify; line-height: 25px; }

.text span {

float: left; font-family: calibri; font-size: 1.1em; font-weight: bold; height: 5px; margin-right: 5px; } </style> </head> <body> <div class="warapper-about"> <div class="about">

<span class="header-about"> About</span> <div class="info-about">

<p class='text'><img src="gambar/foto.jpg" class="img-info">


(72)

<span>Ricky Fachreza</span>is an IT team leader for a major national retailer. He has more than 3 years of IT experience in various positions using several different

platforms and computer languages. He has a bachelor of science degree in management information systems from Oakland

University located in Rochester, Michigan. His interest in computers started when he received his first computer, a Commodore 64, back in the 1980s. Today, his preference is to

work with Microsoft’s ASP.NET platform. David has been a

technical reviewer on many books from several publishers. He is also an author, reviewer, and editor for the www.ASPToday.com website. In his spare time, he enjoys family time, video games, pinball, and movies.

has been designing and building websites since 1998, though he still silently harbors the aspiration to draw comic books. His background is in traditional graphic design, and he has a degree in commercial graphics from Pittsburg State University (Kansas). Although he spent years learning how to make ink stick to paper, he soon fell in love with the web, and the affair continues to this day. In addition to his passions for design and technology, Ricky has an affinity for science-fiction novels, zombie movies, and black T-shirts. He

occasionally muses on these subjects and others at his personal website, www.focalcurve.com. Ricky lives and works near San Francisco. </p> </div> </div> </div> </body> </html> slider_baru.php <html> <head>

<title>imageslider generated by WOWSlider.com</title>

<link rel="stylesheet" type="text/css" href="engine1/style.css" /> <script type="text/javascript" src="engine1/jquery.js"></script> </head> <body> <div class="image-slider"> <div id="wowslider-container1">


(73)

<div class="ws_images"> <ul>

<li><img src="data1/images/snmptn1.jpg" alt="Apple_wallpapers_426" title="Segera daftarkan dirimu menjadi peserta ujian UMB-PT tahun ini" id="wows1_0"/></li>

<li><img src="data1/images/psikotes.jpg" alt="Dark-grey-pattern-wallpaper" title="Psikotes"

id="wows1_0"/></li>

<li><img src="data1/images/su.jpg" alt="grey-pattern-windows-815598" title="Suasana Ujian"

id="wows1_0"/></li>

<li><img src="data1/images/sbmptn2013.jpg" alt="Parchment" title="SBMPTN 2013" id="wows1_0"/></li>

</ul> </div>

<div class="ws_bullets"> <div>

<a href="#" title="Apple_wallpapers_426"><img src="data1/tooltips/apple_wallpapers_426.jpg"

alt="Apple_wallpapers_426"/>1</a>

<a href="#" title="Dark-grey-pattern-wallpaper"><img src="data1/tooltips/darkgreypatternwallpaper.jpg" alt="Dark-grey-pattern-wallpaper"/>2</a>

<a href="#" title="grey-pattern-windows-815598"><img src="data1/tooltips/greypatternwindows815598.jpg" alt="grey-pattern-windows-815598"/>3</a>

<a href="#" title="Parchment"><img

src="data1/tooltips/parchment.jpg" alt="Parchment"/>4</a> <a href="#" title="web-design-TPA"><img

src="data1/tooltips/webdesigntpa.jpg" alt="web-design-TPA"/>5</a> </div> </div> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine1/wowslider.js"></script> <script type="text/javascript" src="engine1/script.js"></script> </div> </body> </html> ujian.php <html> <head> <title></title> <style type="text/css">


(74)

body { margin: 0px; padding:0px; background: grey; } .wrapper { float: left; width: 100%; } .soal { float: left; width: 900px; height: 400px;

margin: 10px 0px 30px 230px; background: white;

border-radius: 3px;

box-shadow: 2px 2px 2px #dedede; }

.header-top { float: left; width: 720px; height: auto;

margin: 20px 0px 0px 100px; padding-bottom: 20px;

border-bottom: 2px solid black; }

.title-top-1 { float: left;

margin: 5px 0px 0px 70px; font-weight: bold;

}

.title-top {

float: left;

margin: 2px 0px 0px 200px; font-weight: bold;

}

.title-top-0 { float: left;

margin: 2px 0px 0px 175px; font-weight: bold; } .content-tengah { float: left; width: 810px; height: 400px;

margin: 10px 0px 0px 50px; }


(75)

.petunjuk {

float: left;

margin: 5px 0px 0px 340px; font-family: arial; font-weight: bold; font-size: 0.95em; } .isi-petunjuk { float: left; width: 100%; height: auto; padding-bottom: 10px; }

.isi-petunjuk ul { float: left; list-style: none; }

.isi-petunjuk li { float: left; font-family: arial; font-size: 0.95em; margin-top: 10px; } .lanjutkan { float: right; width: 80px; height: 30px;

margin: 30px 50px 0px 0px; } </style> </head> <body> <div class="wrapper"> <div class="soal"> <div class="header-top">

<span class="title-top">KEMENTERIAN PENDIDIKAN NASIONAL</span> <span class="title-top-0">DIREKTORAT JENDERAL PENDIDIKAN

TINGGI</span>

<span class="title-top-1">PANITIA PENYELENGGARA SIMULASI TES POTENSI AKADEMIK NASIONAL</span>

</div> <div class="content-tengah"> <span class="petunjuk">PENTUNJUK UMUM</span> <div class="isi-petunjuk"> <ul>


(76)

<li>1. Pilihlah Jawaban yang paling benar ( A, B, C, D, atau E );</li>

<li>2. Jawaban yang benar diberi skor +4, jawaban yang kosong diberi skor 0, dan jawaban yang salah diberi skor -1.</li> <li>3. Jika waktu selesai dan anda belum selesai maka anda tidak dapat menjawab soal berikutnya.</li>

<li>4. Jika anda setuju dengan peraturan ini silahkan pilih lanjutkan untuk menjawab soal anda</li>

</ul>

<span class="button-lanjutkan"><input type="button" name="lanjutkan" class="lanjutkan" value="lanjutkan" onclick="window.location.href='soal/soal.php'" ></span> </div> </div> </div> </div> </body> </html> timer.js

var waktunya = 900;//setingan waktu var waktu;

var jalan = 0; var habis = 0; function init(){ checkCookie() mulai(); } function keluar(){ if(habis==0){ setCookie('waktux',waktu,365); }else{ setCookie('waktux',0,-1); } } function mulai(){

jam = Math.floor(waktu/3600); sisa = waktu%3600;

menit = Math.floor(sisa/60); sisa2 = sisa%60

detik = sisa2%60; if(detik<10){

detikx = "0"+detik; }else{


(77)

}

if(menit<10){

menitx = "0"+menit; }else{

menitx = menit; }

if(jam<10){

jamx = "0"+jam; }else{

jamx = jam; }

document.getElementById("divwaktu").innerHTML = jamx+":"+menitx+":"+detikx+" || "+waktu;

waktu --; if(waktu>0){

t = setTimeout("mulai()",1000); jalan = 1;

}else{

if(jalan==1){

clearTimeout(t); }

habis = 1;

document.getElementById("formulir").submit(); waktu = 0;

} }

function selesai(){

document.getElementById("formulir").submit(); waktu = 0;

}

function getCookie(c_name){

if (document.cookie.length>0){

c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1){

c_start=c_start + c_name.length+1;

c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCookie(c_name,value,expiredays){ var exdate=new Date();


(78)

document.cookie=c_name+ "="

+escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

function checkCookie(){

waktuy=getCookie('waktux'); if (waktuy!=null && waktuy!=""){ waktu = waktuy;

}else{

waktu = waktunya;

setCookie('waktux',waktunya,7); } } soal.php <?php include"../file/koneksi.php"; session_start(); error_reporting(0);

$peserta = $_SESSION["peserta"]; if($_SESSION["peserta"]==""){ header('location: ../index.php'); } setcookie("test",waktux, time()+60*60*7*30); ?> <html> <head> <title></title> <style type="text/css"> body { margin: 0px; height: 0px; background: grey; } .wrapper { float: left; width:100%; } .soal { float: left; width: 900px; height: auto; padding-bottom: 10px;

margin: 10px 0px 100px 230px; background: white;

border-radius: 3px;


(79)

} .header-info { float: left; width: 850px; height: auto; padding-bottom: 10px;

border-bottom: 2px solid black; margin: 5px 0px 0px 20px;

} .info-1 { float: left; width: 300px; height: 100px; /*background: yellow;*/ margin:5px 0px 0px 30px; } .info-2 { float: left; width: 300px; height: 100px; /*background: yellow;*/ margin:5px 0px 0px 210px; } .title-info { float: left; font-family: arial; font-size: 0.95em; font-weight: bold; } .isi-title { float: left; font-family: arial; font-size: 0.95em;

margin: 5px 0px 0px 20px; }

.title-judul { float: left;

font-family: arial; font-weight: bold;

margin: 20px 0px 10px 320px; } .isi-soal { float: left; width: 840px; height: auto; padding-bottom: 10px; margin: 10px 0px 5px 30px; }


(80)

.footer {

float: left; width: 850px;

border-top: 2px solid black; margin: 5px 0px 0px 20px; }

.title-footer {

font-family: arial; font-size: 0.8em; font-weight: bold;

margin: 5px 0px 0px 0px; float: left;

}

.radio {

float: left;

margin: 0px 0px 0px 15px; }

.soal-soal {

float: left; width: 300px;

margin: 5px 0px 5px 5px; } .soal-tpa { float: left; margin-top: 20px; } .info-petunjuk { float: left; width: 100%; margin: 5px; font-weight: bold; font-style: italic; } .soal-soal2 { float: left; width: 300px;

margin: 5px 0px 0px 100px; } .soal-tpa2 { float: left; margin-top: 5px; } .timers { float: right; width: 135px;

background: rgb(230, 230, 230); height:auto;


(81)

border-radius: 3px; padding-bottom: 5px; position: fixed; } #count { float: left;

margin: 3px 0px 0px 10px; font-family: calibri; font-size: 1em; width: 400px; background: brown; } .img-timer { float: left; width: 30px; height: 30px;

margin: 5px 0px 0px 50px; }

.button-selesai { float: left; width: 70px; height: 30px;

margin: 10px 0px 0px 130px; } .wrappper-timer { float: left; } #number { float: left; vertical-align:text-top; } #pilihan { float: left; vertical-align:text-top; margin-top: 10px; } #soal { float: left; width: 260px; } </style> <script src="../file/timer.js"> </script> </head>

<body onload=init() onunload=keluar()> <div class="wrapper">


(82)

<span class="title-judul">SIMULASI TES POTENSI AKADEMIK</span> <div class="header-info"> <div class="info-1"> <table> <tr>

<td class="title-info">Bidang Ilmu </td>

<td > <span class="isi-title">: Tes Potensi Akademik</span></td>

</tr>

<tr>

<td class="title-info">Tanggal </td>

<td > <span class="isi-title">: <?php echo $date; ?></span></td>

</tr> <tr>

<td class="title-info">Waktu </td> <td > <span class="isi-title">: 15 Menit</span></td>

</tr> <tr>

<td class="title-info">Jumlah Soal </td> <td > <span class="isi-title">:

15</span></td> </tr> </table> </div> <div class="info-2"> <?php error_reporting(0); include"../file/koneksi.php"; $sql = mysql_query("select * from peserta where id_peserta = '$peserta'");

$data = mysql_fetch_array($sql); echo"

<table> <tr>

<td class='title-info'>Nama Peserta</td> <td > <span class='isi-title'>:

$data[nama]</span></td> </tr>

<tr>

<td class='title-info'>Pendidikan </td> <td > <span class='isi-title'>:

$data[Pendidikan]</span></td> </tr>


(83)

<tr>

<td class='title-info'>Umur</td> <td > <span class='isi-title'>: $data[umur]</span></td>

</tr> <tr>

<td class='title-info'>Kode</td> <td > <span class='isi-title'>: 159</span></td> </tr> </table> "; ?> </div> </div> <div class="isi-soal"> <?php //error_reporting(0);

$soal = $_POST[jeniSoal]; if($soal == "verbal"){

include"verbal.php"; }

elseif($soal == "logika"){ include"logika.php"; }

elseif($soal == "numerik"){ include"numerik.php"; }

elseif($soal == "campuran"){ include"campuran.php"; }

?>

<div class="wrappper-timer"> <div class="timers">

<img src="../gambar/times and dates.png" class="img-timer">

<div id="timemr">

<div id="t1"><center><strong>WAKTU ANDA </strong></center></div> <div id="t2"><center> <div id="divwaktu"> </div></center> </div> </div> </div>


(1)

<td>$data1[pilihan]</td> </tr>";

} }

echo"</table>"; ?>

</div>

<!-- akhir -->

<!-- maintenance div ke 2 --> <div class="soal-soal2"> <?php

include"../file/koneksi.php"; $sql = mysql_query("select * from soal_logika where id_soal between 'lgk09' and 'lgk15'");

$no = 9;

while($data = mysql_fetch_array($sql)){ echo"<table class='soal-tpa2'>";

echo"<tr rowspan='5'>

<td id='number'>$no.</td> <td>$data[soal] </td> </tr>";

$no++;

$sqli = mysql_query("select * from jawaban_logika where id_soal='$data[id_soal]'");

while($data1 = mysql_fetch_array($sqli)){ echo"<tr>

<td id='pilihan'><input type='radio'

name='$data1[name]' class='radio' value='$data1[jawaban]'></td> <td

id='pilihan'>$data1[pilihan]</td> </tr>"; }

}

echo"</table>"; ?>

<input type="submit" name="input"

class="button-selesai" onclick="selesai()" value="Selesai"> </form>

</div> campuran.php

<div class="soal-soal">

<span class="info-petunjuk">Pilihlah

jawaban yang paling tepat berdasarkan fakta atau informasi yang disajikan dalam setiap teks!</span>

<form action="hasil.php" method="post" id="formulir">


(2)

include"../file/koneksi.php"; $sql_numerik = mysql_query("select * from soal_numerik where id_soal between 'nmr01' and 'nmr05'");

$no = 1;

while($data = mysql_fetch_array($sql_numerik)){ echo"<table class='soal-tpa'>";

echo"<tr rowspan='5'>

<td id='number'>$no.</td> <td id='soal'>$data[soal] </td>

</tr>"; $no++;

$sqli = mysql_query("select * from jawaban_numerik where id_soal='$data[id_soal]'");

while($data1 = mysql_fetch_array($sqli)){ echo"<tr>

<td><input type='radio'

name='$data1[name]' class='radio' value='$data1[jawaban]'></td> <td>$data1[pilihan]</td>

</tr>"; }

}

echo"</table>";

$sql_verbal = mysql_query("select * from soal where id_soal between 'vrb06' and 'vrb08'");

$no = 6; while($data = mysql_fetch_array($sql_verbal)){

echo"<table class='soal-tpa'>"; echo"<tr rowspan='5'>

<td id='number'>$no.</td> <td id='soal'>$data[soal] </td>

</tr>"; $no++;

$sqli = mysql_query("select * from jawaban where id_soal='$data[id_soal]'");

while($data1 = mysql_fetch_array($sqli)){ echo"<tr>

<td><input type='radio' name='$data1[name]' class='radio' value='$data1[jawaban]'></td>

<td>$data1[pilihan]</td> </tr>";

} }

echo"</table>"; ?>


(3)

<!-- akhir -->

<!-- maintenance div ke 2 --> <div class="soal-soal2"> <?php

include"../file/koneksi.php";

$sql_verbal = mysql_query("select * from soal where id_soal between 'vrb09' and 'vrb10'");

$no = 9; while($data = mysql_fetch_array($sql_verbal)){

echo"<table class='soal-tpa'>"; echo"<tr rowspan='5'>

<td id='number'>$no.</td> <td id='soal'>$data[soal] </td>

</tr>"; $no++;

$sqli = mysql_query("select * from jawaban where id_soal='$data[id_soal]'");

while($data1 = mysql_fetch_array($sqli)){ echo"<tr>

<td><input type='radio' name='$data1[name]' class='radio' value='$data1[jawaban]'></td>

<td>$data1[pilihan]</td> </tr>";

} }

echo"</table>";

$sql = mysql_query("select * from soal_logika where id_soal between 'lgk11' and 'lgk15'");

$no = 11;

while($data = mysql_fetch_array($sql)){ echo"<table class='soal-tpa2'>";

echo"<tr rowspan='5'>

<td id='number'>$no.</td> <td id='soal'>$data[soal] </td>

</tr>"; $no++;

$sqli = mysql_query("select * from jawaban_logika where id_soal='$data[id_soal]'");

while($data1 = mysql_fetch_array($sqli)){ echo"<tr>

<td id='pilihan'><input type='radio'

name='$data1[name]' class='radio' value='$data1[jawaban]'></td> <td id='pilihan'>$data1[pilihan]</td>

</tr>"; }


(4)

}

echo"</table>"; ?>

<input type="submit" name="input"

class="button-selesai" onclick="selesai()" value="Selesai"> </form>


(5)

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma-III Teknik Informatika :

Nama : RICKY FACHREZA NIM : 102406249

Prog. Studi : Diploma - III Teknik Informatika

Judul TA : PERANCANGAN WEB TES POTENSI AKADEMIK ONLINE BERBASIS PHP DAN MYSQL

Telah melaksanakan tes program Tugas Akhir Mahasiswa tersebut di atas pada

tanggal……….

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juni 2013 Dosen Pembimbing

Drs. James P. Marbun, M.Kom NIP.195806111986031002


(6)

KEMENTERIAN PENDIDIKAN NASIONAL

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan - 20155 Telp. (061) 8211050, Fax (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : RICKY FACHREZA

Nomor Stambuk : 102406249

Judul Tugas Akhir : PERANCANGAN WEB TES POTENSI AKADEMIK ONLINE BERBASIS PHP DAN MYSQL

Dosen Pembimbing : Drs. James P. Marbun, M.Kom Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No Tanggal Asisten Bimbingan

Pembahasan pada Asistensi Mengenai, pada

Bab :

Paraf Dosen

Pembimbing Keterangan

1. Proposal Tugas Akhir

2. Bab I - BabVI

3. Revisi Bab I – Bab VI

4. Pengujian Program

*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui: Disetujui

Departemen Matematika FMIPA USU Pembimbing Utama/

Ketua, Penanggung Jawab

Prof. Drs. Tulus, M.Si. Drs. James P. Marbun, M.Kom NIP. 19620901 198803 1 002 NIP. 195806111986031002