IV-1
Bab IV
Perancangan
Dari hasil analisis pada Bab III, dilakukan perancangan terhadap masing-masing komponen pembentuk sistem pelatihan kompetisi pemrograman. Perancangan ini dibagi ke dalam dua bagian. Bagian pertama menjelaskan perancangan kelas berdasarkan analisis dari rumusan masalah yang telah dikaji. Bagian kedua menjelaskan perancangan antarmuka.
4.1. Perancangan Kelas
Subbab ini akan menjelaskan perancangan kelas-kelas utama yang diperlukan dalam pengembangan.
4.1.1. Perancangan Kelas Model
Dari analisis yang telah dilakukan pada Bab 3, entitas perangkat lunak dimodelkan ke dalam beberapa kelas. Gambar IV-1 menggambarkan kelas-kelas
entity yang ada pada sistem dan relasi satu sama lain. Kelas User memiliki 3 relasi dengan kelas Contest yakni sebagai contest owner, contest supervisor, dan
contestant. Kelas ini juga memiliki relasi sebagai author sebuah problem type dan sebuah problem.
Gambar IV-1. Rancangan Kelas Entitas
Contest +ID +StartTime +EndTime User +ID +Name ProblemType +ID +Name Problem +ID +Title Submission +ID +SubmitTime author 0..* 1 owner 0..* 1 supervisor 0..* 1..* contestant 0..* 1..* 0..* 1 0..* 1 author 0..* 1 0..* 0..* 1 0..* 1 0..* Clarification +ID +Question +Answer 0..* 1 1 0..* questioner 0..* 1 answerer 0..* 1
4.1.2. Perancangan Kelas Berdasarkan Analisis Masalah
Bagian ini akan menjelaskan perancangan kelas yang dipakai sebagai solusi dari masalah yang dikaji.
4.1.2.1. Security
Seperti yang telah dijelaskan pada Subbab 3.1.3, peran utama security terdapat pada komponen sandbox. Fungsi utama Sandbox adalah untuk mengeksekusi sebuah program sekaligus membatasi interaksi program tersebut dengan lingkungan serta konsumsi resource. Sekarang ini sudah terdapat beberapa aplikasi sandbox yang ada, salah satunya aplikasi sandbox yang dimiliki oleh MO-Eval [MAR07]. Sandbox ini dipilih karena aplikasi ini memiliki fitur yang sangat lengkap dan memiliki API yang mudah digunakan berupa command line interface. Aplikasi ini berjalan pada lingkungan sistem operasi Linux. Kelas
Sandbox yang dibangun nantinya merupakan wrapper class yang akan
mengeksekusi aplikasi tersebut. Aplikasi selanjutnya akan dijelaskan pada Subbab 5.1.1
Gambar IV-2. Diagram Kelas Sandbox
4.1.2.2. Extensibility
Untuk memudahkan pembuatan evaluator, problem-setter dapat menggunakan beberapa kelas API yang telah disediakan seperti Compiler, Comparator, serta
Sandbox. Kelas Compiler bertugas untuk melakukan kompilasi kode sesuai dengan bahasa pemrograman kode tersebut. Kelas ini akan mengeksekusi
compiler dengan command line interface. Kelas Comparator bertugas untuk membandingkan 2 buah berkas byte per byte. Kelas Sandbox bertugas untuk
Sandbox
+createTempFile() +createTempDir() +cleanTemporary() +execute()
melakukan eksekusi pada lingkungan terisolasi seperti yang telah dijelaskan pada subbab sebelumnya.
Gambar IV-3. Diagram Kelas API Extensibility
Di dalam melakukan evaluasi terdapat kelas Dispatcher. Kelas ini pertama-tama mengambil sebuah instansiasi jawaban dari antrian jawaban. Selanjutnya kelas akan meload kelas-kelas API lain dan variabel-variabel konfigurasi. Selanjutnya instansiasi jawaban tersebut beserta kelas-kelas dan variabel konfigurasi akan diteruskan ke evaluator script yang dieksekusi oleh Dispatcher.
Tabel IV-1. Format Paket ProblemType
Nama Berkas Tipe Keterangan
view Directory Berisi berkas-berkas tampilan sebuah
problem type.
view/description.html HTML script Default template untuk sebuah soal. Halaman ini berupa HTML merupakan halaman statis.
vieww/submit.php PHP script Template tampilan jawaban. Berupa skrip PHP karena memiliki konfigurasi dinamis view/config.php PHP script Template tampilan form konfigurasi. view/submission.php PHP script Template tampilan sebuah jawaban. view/controllers.php PHP script Berisi fungsi-fungsi controller.
evaluator Directory Berisi berkas-berkas tampilan sebuah
problem type.
evaluator/config.json JSON script Berkas berisi konfigurasi default untuk sebuah problem.
evaluator/evaluator.php PHP script Berkas evaluator.
evaluator/files Directory Berisi berkas-berkas pembantu evaluasi pada sebuah problem type.
Tabel IV-2 dan Tabel IV-3 masing-masing menjelaskan format paket problem type dan problem yang akan dipakai oleh sistem. Berkas evaluator.php adalah berkas skrip PHP yang akan dieksekusi oleh Dispatcher tersebut. Konfigurasi
Sandbox +createTempFile() +createTempDir() +cleanTemporary() +execute() Compiler +compile() Comparator +compare()
yang akan dibuka oleh Dispatcher direpresentasikan oleh berkas config.json. Format JSON dipilih karena format ini sederhana dan tidak memakan space yang banyak jika dibandingkan dengan format data lainnya seperti XML. Berkas-berkas ini disimpan dalam sebuah repositori.
Tabel IV-2. Format Paket Problem
Nama Berkas Tipe Keterangan
view Directory Berisi berkas-berkas tampilan sebuah
problem.
view/description.html HTML script Halaman HTML merupakan halaman statis.
view/files Directory Berisi berkas-berkas view files. Yakni berkas-berkas pembantu seperti gambar dll.
evaluator Directory Berisi berkas-berkas tampilan sebuah
problem type.
evaluator/config.json JSON script Berkas berisi konfigurasi sebuah
problem.
evaluator/files Directory Berisi berkas-berkas pembantu evaluasi pada sebuah problem.
Gambar IV-4. Diagram Kelas Utama Extendibilty
Problem +getConfig() +getEvaluatorFile() +getViewFile() Submission +status +gradecontent +submitcontent +dequeueSubmission() ProblemType +getConfig() +getEvaluatorFile() +getViewFile() +getEvaluator() Dispatcher +dispatch() Packager +upack() +pack() ProblemController +showDescription() +submitDescription() +showSubmission() +submitSubmission() +showConfig() +submitConfig() +showSubmitForm() +renderViewFile()
Kelas ProblemController berguna sebagai controller yang akan mengatur interaksi antara pengguna dengan berkas-berkas soal. Kelas ini berfungsi sebagai gerbang interaksi dari bermacam-macam URL entry ke berkas soal karena berkas-berkas ini disimpan pada direktori yang tidak dapat diakses secara langsung melalui URL. Salah satu fungsinya juga adalah melakukan rendering berkas-berkas view dari soal seperti gambar, dsb.
Secara default semua berkas yang dilampirkan pada halaman description.html
akan memiliki relative URL dengan dokumen tersebut. Oleh karena itu semua
HTML tag terutama tag <a> dan tag <img> yang mencantu,kan lampiran tersebut akan dimanipulasi terlebih dahulu oleh ProblemController agar halaman yang sudah dirender dapat menampilkan berkas berkas tersebut. Proses manipulasi dapat dilihat pada Tabel IV-3.
Tabel IV-3. Contoh Pengubahan Lampiran pada Berkas Deskripsi
Awal Akhir <a href="files/dokumen.pdf">Dokum en</a> <a href="problemcontroller.php? renderfile=gambar.jpg"> Dokumen</a> <img src="files/gambar.jpg" /> <img
src="problemcontroller.php?renderfile=gam bar.jpg" />
Di aspek ini, kelas ProblemType dan Problem memiliki tanggung jawab untuk memberikan data mengenai berkas-berkas yang ada pada keduanya. Operasi-operasi yang ada pada kelas tersebut secara detil dijelaskan pada Tabel IV-4. Kelas Submission memiliki 3 buah atribut penting: status, gradecontent, submitcontent. Atribut status menandai sebuah submission ke dalam 4 buah status antara lain
• NOGRADE
Menandai submission agar tidak dievaluasi.
• UNGRADED
Menandai submission agar dievaluasi.
• PENDING
• GRADED
Menandai submission yang sudah berhasil dievaluasi.
• ERROR
Menandai submission yang gagal dievaluasi.
Tabel IV-4. Penjelasan Kelas ProblemType dan Problem
Kelas Operasi Keterangan
ProblemType getConfig Mengembalikan variabel konfigurasi yang ada di config.json pada paket problem type.
getEvaluatorFile Mengembalikan path ke berkas pembantu evaluator yang terdapat pada direktori
evaluator/files pada paket problem type
getViewFile Mengembalikan path ke berkas-berkas
view yang terdapat pada direktori view.
getEvaluator Mengembalikan path dari berkas
evaluator.php
Problem getConfig Mengembalikan variabel yang terdapat pada config.json milik paket problem. Jika variabel tersebut tidak ada maka variabel akan diload dari milik problemtype.
getEvaluatorFile Mengembalikan path dari sebuah berkas yang terdapat pada direktori
evaluator/files
getViewFile Mengembalikan path dari sebuah berkas di direktori view/files
ProblemController showDescription Menampilkan deskripsi soal. Method ini melakukan manipulasi tag img dan a seperti yang sudah dijelaskan.
submitDescription Menyunting berkas deskripsi soal.
showSubmission Menampilkan jawaban.
submitSubmission Melakukan pemrosesan pengumpulan
submission.
showConfig Menampilkan form pengaturan soal.
submitConfig Melakukan pemrosesan pengaturan soal.
showSubmitForm Menampilkan form pengumpulan
jawaban.
renderViewFile Menampilkan berkas view file.
Atribut submitcontent berisi data yang merupakan jawaban dari pengguna. Atribut
gradecontent berisi data yang merupakan hasil evaluasi submission. Kedua atribut ini memiliki format JSON string.
Kelas Packager memiliki tugas untuk pemaketan problem. Method pack()
memiliki fungsi untuk memaketkan sebuah problem menjadi paket portable problem yakni format soal yang dapat dibuka dan digunakan pada mode
standalone. Kedua format paket problem type dan problem pada Tabel IV-1 dan Tabel IV-2 akan direduksi secara cascade menjadi format pada Tabel IV-5. Format ini akan diarsipkan dengan menggunakan format arsip terkompresi ZIP. Method unpack() akan membuka arsip terkompresi tersebut dan meletakkannya pada filesystem mode standalone.
Tabel IV-5. Format Paket Portable Problem
Nama Berkas Tipe Keterangan
problem.json JSON script Berisi data-data mengenai problem
seperti judul, pengarang, dll.
views Directory Berisi berkas-berkas tampilan sebuah
problem.
views/description.html HTML script Default template untuk sebuah soal. Halaman ini berupa HTML merupakan halaman statis.
views/submit.php PHP script Template tampilan jawaban. Berupa skrip PHP karena memiliki konfigurasi dinamis
views/submission.php PHP script Template tampilan sebuah jawaban. views/controllers.php PHP script Berisi fungsi-fungsi controller.
evaluators Directory Berisi berkas-berkas tampilan sebuah
problem.
evaluators/config.json JSON script Berkas berisi konfigurasi default untuk sebuah problem.
evaluators/evaluator.php PHP script Berkas evaluator.
evaluators/files Directory Berisi berkas-berkas pembantu evaluasi pada sebuah problem.
4.1.2.3. Scalability
Di dalam aspek ini, diperlukan sebuah kelas yakni Slave untuk memodelkan mesin slave yang bekerja. Sebuah Slave akan memiliki 3 method utama yakni
fetchSubmission untuk mengambil submission yang akan dievaluasi,
reportSubmission untuk melaporkan submission yang sudah dievaluasi, dan
synchronizeProblem untuk melakukan sinkronisasi soal. Setelah melakukan
fetchSubmission, kelas Slave akan meneruskan submission tersebut ke kelas
.
Gambar IV-5. Diagram Kelas Slave
Slave akan selalu mencatat pemanggilan terakhirnya pada atribut lastCall dan sinkronisasi terakhirnya pada lastSync. Dengan demikian master masih bisa memeriksa status sinkronisasi problemnya dengan slave. Untuk mengambil
submission untuk dievaluasi, slave melakukan invokasi static method dequeueSubmission.
4.2. Perancangan Antar Muka
Sistem ini memiliki antarmuka berupa halaman-halaman web. Setiap role
pengguna memiliki navigasi yang mirip. Dari halaman awal, learner akan memiliki 3 pilihan utama yakni problem list, submission list, contest list. Dari
problem list, halaman akan menampilan soal yang dapat dipilih. Soal ini akan ditampilkan sesuai dengan berkas description.html yang ada pada paket soal. Pada deskripsi soal tersebut akan ada link menuju halaman pengumpulan jawaban. Jawaban yang disubmit akan diproses di controller dan halaman akan berganti ke halaman submission. Navigasi dapat dilihat pada Gambar IV-6. Peraga berupa lingkaran hitam adalah titik awal navigasi dan yang memiliki lingkaran di luarnya adalah akhir navigasi. Bagian Learner’s Menu merupakan bagian menu yang ada di semua halaman untuk role Learner. Garis horizontal menandakan link yang bisa diakses dari halaman yang sama.
Submission +SubmissionQueue +dequeueSubmission() Slave +lastCall +lastSynchronize +fetchSubmission() +reportSubmission() +synchronizeProblem()
Gambar IV-6. Diagram Navigasi untuk role Learner
Navigasi untuk role Coach mirip dengan navigasi untuk role Learner. Untuk role
ini akan terdapat beberapa halaman tambahan seperti create problem, edit problem, create problem type, dan edit problem type.
Gambar IV-7. Diagram Navigasi untuk role Coach
Home <<page>>
Learner's Menu <<all page part>>
Problem List <<page>> [link:signout] [link:problems] Contest List <<page>> [link:contests] Submission List <<page>> [link:submissions] Problem <<page>> [select problem] Submit Form <<part>> Submission View <<page>> [select submission] [submit] Contest <<page>> [select contest] Home <<page>> Coach Menu <<all page part>>
Problem List <<page>> [link:signout] [link:problems] Contest List <<page>> [link:contests] Problem <<page>> [select problem] Contest <<page>> [select contest] Create/Edit Problem <<page>> [link:create/edit problem] Submission List <<page>> [link:submissions] Submission View <<page>> [link:submission] Create/Edit ProblemType <<page>> Create Contest <<page>> [link:create contest]
Antarmuka umum pada sebuah soal maupun jawaban tergantung daripada apa yang didefinisikan oleh task setter pada task view files seperti pada Tabel IV-2 dan Tabel IV-3. Berikut contoh antar muka pada task dengan tipe batch:
1. Description View.
View ini menampilkan deskripsi soal yang nantinya dibaca oleh Learner. Deskripsi ini menjelaskan mengenai gambaran soal dan spesifikasi dari jawaban yang harus dibuat oleh Learner. Dalam tipe soal batch, deskripsi menejelaskan cerita gambaran singkat dari soal, format keluaran, format masukan, contoh masukan, dan contoh keluaran.
Gambar IV-8. Contoh tampilan description view
2. Submit View.
View ini berisi form pengumpulan jawaban untuk peserta. Pada tipe soal ini,
form berisi upload file field di mana peserta melakukan pengumpulan jawaban berupa berkas kode.
Gambar IV-9. Contoh tampilan submit view. 3. Submission View.
Submission View berisi tampilan submission beserta hasil penilaiannya.
4. Task Config View.
Task config view berisi antarmuka bagi coach untuk melakukan konfigurasi soal. Untuk tipe soal ini, task config berisi form konfigurasi untuk time limit, execution time limit, memory limit, dan pasangna-pasangan testcase.
Gambar IV-11. Contoh tampilan task config view
Selain itu ada tambahan WYSWYG form untuk melakukan penyuntingan berkas description.html untuk soal.
