bab 3 pelaksanaan magang
TRANSCRIPT
11
BAB 3
PELAKSANAAN MAGANG
3.1 Kedudukan dan koordinasi
Kerja magang dilaksanakan pada divisi IT di PT Info Cemerlang Andal Nusa.
Kerja magang ini dilaksanakan di bawah bimbingan dan tanggung jawab Nyoman
Tri Anjasmara selaku supervisor IT. Koordinasi dan pemberian tugas dilaksanakan
secara langsung atau tatap muka. Selain itu, untuk hal pembahasan sejauh mana
progress pengerjaan project sudah berjalan, dilaksanakan meeting setiap minggu
sekali, termasuk demo aplikasi. Kesulitan dan masalah yang sering dihadapi dalam
proses magang sering kali dikonsultasikan bersama dengan supervisor.
3.2 Tugas yang dilakukan
Dalam melaksanakan kerja magang, adapun tugas yang dilakukan adalah
membuat menu Class Schedule dan Teacher Schedule pada website icanenglish.
Tugas dan tanggung jawab yang diberikan selama pelaksanaan kerja magang adalah
sebagai berikut.
1. Pembuatan sistem untuk pengadaan jadwal kelas kursus bahasa Inggris pada
PT Info Cemerlang Andal Nusa.
2. Pembuatan kalender yang berkaitan dengan seluruh jadwal kelas kursus bahasa
Inggris pada PT Info Cemerlang Andal Nusa yang tersebar di seluruh kantor
cabang.
12
3. Membuat sistem pembagian role untuk melihat jadwal kelas untuk masing-
masing teacher pada PT Info Cemerlang Andal Nusa.
4. Membuat grid view untuk menampilkan data siswa pada website icanenglish.
5. Memisahkan login crudential untuk website icedalnusa.com dan icanenglish.
6. Merevisi beberapa fitur pada website icedalnusa.com dan icanenglish.
7. Membuat form untuk survey kepuasan murid dalam proses mengikuti kursus
bahasa Inggris di PT Info Cemerlang Andal Nusa.
3.3 Uraian Pelaksanaan Kerja Magang
Pada saat pelaksanaan magang di PT Info Cemerlang Andal Nusa, kegiatan
yang dilaksanakan akan diuraikan dalam bentuk mingguan. Tugas yang diberikan
juga masih berkaitan dengan pengembangan dan pengoptimalan website
perusahaan dalam mengolah data agar lebih terstruktur. Berikut uraian pekerjaan
yang dilaksanakan selama 14 minggu.
Tabel 3.1 Tabel uraian pelaksanaan kerja magang Minggu ke Uraian
1 − Pengenalan dan instalasi tools yang akan digunakan − Pengenalan struktur website dan briefing pemberian tugas
2 − Mengubah layout student monitoring kedalam bentuk tabel − Mengubah session website icanenglish sehingga berdiri
sendiri tanpa terintegrasi dengan website icedal.
3 − Mengubah path master dari setiap file agar terbaca di local
storage − Design page schedule
4 − Show & hide content (button collapse) untuk setiap kantor cabang dan level untuk kursus bahasa Inggris.
5 − Briefing untuk mengubah konsep UI tampilan halaman
schedule. − Rollback halaman web karena error yang tidak diketahui
13
Tabel 3. 1 Tabel uraian pelaksanaan kerja magang (lanjutan)
Minggu ke Uraian
5 − Ubah konsep button dari collapse ke dropdown
6
− Membuat module action button add dan design form schedule
− Membuat fungsi autoform pada field student − Membuat database untuk session dan skill dan looping
untuk membaca datanya.
7
− Testing input data ke database melalui form scheduling
− Fix module action add dan membuat module action button edit dan delete pada halaman web scheduling
− Menambahkan tanggal dan teacher signature pada form
8
− Memunculkan pop-up detail class di halaman scheduling − Input field class type 1 dan 2 dan edit AJAX untuk
pemanggilan tabel g_student. − Fix bug tanggal dan teacher signature.
9 − Hide tabel session, skill, date selain pada role edit − Teacher hanya bisa melihat jadwalnya sendiri − Mencari calendar script
10
− Branch color untuk membedakan jadwal kursus berasal dari cabang mana.
− Class hour diubah menjadi day 1 – day 6 − Menampilkan data di calendar sesuai dengan database
11 − Filter teacher dan city di calendar − Buat database teacher − Edit details scheduling (scheduling_frame.php)
12
− Membuat master level − Membuat master course (level, skills) − Memambahkan role yang belum ditambah untuk akses
module scheduling
13 − Design form kepuasan mengikuti kelas − Filter teacher muncul sesuai city yang dipilih − Tambah field score test di student monitoring form
14 − Menyelesaikan survey tingkat kepuasan mengikuti kelas, field score test, dan class hour.
14
Pada minggu pertama, dilakukan pengenalan dan instalasi tools yang
digunakan dalam pengembangan website dan penerapannya dalam menggunakan
PHP, JavaScript, HTML, dan CSS agar disesuaikan dengan kebutuhan perusahaan
serta pemberian briefing oleh supervisor dan atasan perusahaan terkait pemberian
project yang dilakukan. Selain itu dilakukan juga pembelajaran dan pemahaman
struktur file website yang sebelumnya telah ada dan dikerjakan dengan
menggunakan local storage sebelum di-upload dan digunakan secara online.
Pada minggu kedua, hal yang dilakukan adalah menulis kode program untuk
mengubah tampilan untuk membaca data seperti tabel agar data lebih mudah dilihat
secara keseluruhan. Selain itu mengubah session icanenglish agar terpisah dan
berdiri sendiri tanpa terintegrasi ke website icedalnusa.com.
Pada minggu ketiga, tugas yang dilakukan adalah mengubah path master dari
tiap file PHP agar bisa dibaca pada local storage untuk pengembangan lebih lanjut.
Kemudian mulai memikirkan konsep tampilan pada halaman schedule sehingga
mudah untuk digunakan user.
Pada minggu keempat, proses pengembangan fitur dilakukan dengan
menggunakan konsep button collapse untuk show dan hide content yang berisi
tentang semua data terkait jadwal kursus bahasa Inggris. Adapun kategori dari
button collapse yang dibuat yaitu meliputi setiap kantor cabang PT Info Cemerlang
Andal Nusa dan level kursus yang tertera pada setiap kantor cabang.
15
Pada minggu kelima, dilakukan briefing untuk membahas konsep UI dari
halaman schedule agar mudah untuk digunakan pengguna dalam mengelola data
perusahaan. Selain itu dilakukan rollback halaman web scheduling yang dibantu
oleh supervisor dikarenakan mengalami error yang tidak diketahui pada saat proses
pengembangan situs.
Pada minggu keenam, proses pengembangan telah sampai pada fitur
penambahan kelas dan perancangan formulir untuk mengisi data jadwal kursus
yang di dalamnya terdapat input field, dropdown, autocomplete, dan looping.
Pada minggu ketujuh, proses testing penambahan data dilakukan secara
langsung untuk memastikan proses pengolahan data sudah berjalan dengan baik
tanpa ada kesalahan. Selain itu juga dilakukan testing dan perbaikan pada action
button dan formulir penjadwalan kelas kursus.
Pada minggu kedelapan, proses pembuatan function pop-up untuk
menampilkan schedule information agar memudahkan user dalam melihat
informasi kelas secara detail dan melakukan perbaikan bug pada proses
penyimpanan data ke basis data.
Pada minggu kesembilan, tugas yang dilakukan adalah mencari script kalender
yang digunakan untuk melihat jadwal mengajar kelas kursus. Kemudian mengatur
role agar tiap teacher hanya bisa melihat jadwal mengajar kelas kursusnya masing-
masing.
16
Pada minggu kesepuluh, hal yang dilakukan adalah mengembangkan branch
color yang berfungsi sebagai pembeda atau identitas dari setiap kantor cabang dan
digunakan dalam menampilkan jadwal kursus. Kemudian melakukan perubahan
pada form Add Class dan menampilkan jadwal kursus pada script kalender yang
telah dibuat sesuai dengan data yang ada pada database.
Pada minggu kesebelas, tugas yang dilakukan adalah menambahkan fitur filter
teacher dan city pada halaman Teacher Schedule dan membuat modal untuk melihat
informasi detil kelas kursus sesuai pilihan user. Filter ini dibuat dengan tujuan
untuk memudahkan user dalam melihat penjadwalan sesuai dengan kriteria filter
yang diinginkan.
Pada minggu kedua belas, dilakukan pembuatan database master level dan
course yang digunakan untuk keperluan pada saat penjadwalan kelas kursus. Hal
lain yang dilakukan adalah menambahkan role access yang sebelumnya belum
ditambahkan agar mendapat akses untuk masuk ke Module Scheduling.
Pada minggu ketiga belas, dilakukan pembuatan form kepuasan murid dalam
mengikuti kelas kursus dan melakukan beberapa perubahan pada form menu
Student Monitoring. Form yang dibuat dan rencananya akan dikirim ke murid
dengan e-mail oleh supervisor.
Pada minggu keempat belas, dilakukan testing dan fixing secara menyeluruh
yang berkaitan dengan Modul Scheduling dan form kepuasan murid dalam
mengikuti kelas kursus. Selain itu membantu supervisor dalam menyelesaikan bug
kecil yang berkaitan dengan pembuatan modul Scheduling.
17
3.3.1 Proses Pelaksanaan
Dalam proses pengembangan website internal perusahaan PT Info Andal
Cemerlang Nusa, adapun beberapa software dan hardware yang digunakan dalam
pelaksanaan proses kerja magang. Hal ini tentu berpengaruh agar pengembangan
dapat sesuai target dan kebutuhan perusahaan. Berikut adalah hardware dan
software yang digunakan.
a) Hardware:
Laptop ASUS ROG GL553VD
a) Processor : Intel® Core™ i7-7700HQ CPU @ 2.80Hz
b) Memory : 16 GB
c) Graphics : Nvidia GeForce GTX 1050
d) Operating System : Windows 10
e) HDD : 1 TB
f) SSD : 128 GB
b) Software:
a) XAMPP Control Panel versi 7.4.7
b) Sublime Text
c) Visual Studio Code versi 1.51.1
d) PHPMyAdmin
18
3.3.2 Perancangan Sistem
Istilah scheduling dalam ilmu komputer merupakan sistem operasi yang
mengatur penjadwalan serta eksekusi secara otomatis menggunakan algoritma.
Sedangkan sistem scheduling yang dibuat dalam proses kerja magang merupakan
sistem secara manual yang masih menggunakan database untuk menampilkan dan
menyimpan data.
A. User Requirements
Dalam pengembangan Modul Scheduling, adapun user requirement pada
menu Class Schedule dan Teacher Schedule. Berikut adalah beberapa User
requirement dari menu Class Schedule dan menu Teacher Scheduling.
a) Class Schedule:
i. Selain user dengan role admin, counsellor, HRD, dan marketing, tidak
ada user dengan role lain yang dapat mengakses menu Class Schedule.
ii. User dengan role admin dan marketing mempunyai hak akses untuk
melakukan add, edit, dan delete pada halaman Class Schedule,
sedangkan role cousellor dan HRD hanya dapat melihat halaman Class
Schedule tanpa mendapat akses untuk memodifikasi data yang ada.
b) Teacher Schedule:
i. Selain user dengan role admin, HRD, teacher, counsellor, dan
marketing, tidak ada user dengan role lain yang dapat mengakses menu
Teacher Schedule.
ii. User dengan role teacher hanya bisa melihat penjadwalan kursusnya
sendiri tanpa bisa melihat jadwal mengajar kursus bahasa Inggris guru
lainnya.
19
B. Flowchart
Gambar 3.1 Flowchart Keseluruhan Modul Scheduling
Gambar 3.1 merupakan gambaran proses flowchart keseluruhan modul
Scheduling dari awal hingga akhir. Untuk masuk ke Modul Scheduling, user dapat
memilih tombol Scheduling pada menu. Kemudian, user akan diberi dua pilihan
yaitu Class Schedule dan Teacher Schedule. Setelah itu, halaman akan berpindah
sesuai dengan pilihan dari user. Gambar 3.2 merupakan flowchart dari subproses
Class Schedule apabila user memilih menu Class Schedule.
20
Gambar 3.2 Flowchart Subprocess Class Schedule
Setelah masuk ke halaman Class Schedule, maka semua data yang berkaitan
dengan jadwal kursus akan ditampilkan pada halaman tersebut. Terdapat beberapa
button yang memiliki masing-masing fungsi yang berbeda, antara lain seperti
tombol Add, Edit, dan Delete. Terdapat juga filter yang dapat menampilkan data
pada halaman Class Schedule sesuai dengan apa yang diinginkan user. Berikut
adalah flowchart subprocess yang ada pada halaman Class Schedule.
21
Gambar 3.3 Flowchart Subprocess Add Class
22
Gambar 3.3 merupakan flowchart subprocess dari Add Class yang diakses
melalui tombol Add pada halaman Class Schedule. Tujuan utama pada halaman
Add Class ini adalah untuk menambahkan informasi terkait kelas kursus di PT Info
Cemerlang Andal Nusa.
Gambar 3.4 Flowchart Subprocess Edit Class
23
Gambar 3.4 merupakan flowchart subproses dari Edit Class yang diakses
melalui tombol Edit pada halaman Class Schedule. Tujuan dari halaman Edit Class
adalah untuk mengubah data kelas yang sebelumnya telah ada dan mengisi tanggal
dan waktu pelaksanaan tiap pertemuan pada suatu kelas kursus.
Gambar 3.5 Flowchart Subprocess Teacher Schedule
Gambar 3.5 merupakan flowchart subprocess dari Teacher Schedule. Pada
halaman ini, semua data yang telah diolah pada menu Class Schedule akan
ditampilkan semua dalam bentuk kalender pada halaman Teacher Schedule.
Tersedia juga filter untuk menampilkan data sesuai kriteria yang ditentukan oleh
user.
24
C. Database Schema
Gambar 3.6 Database Schema
Gambar 3.6 menunjukkan 8 tabel utama dalam database perusahaan yang
digunakan dalam Modul Scheduling, termasuk proses menampilkan data, add, edit
dan delete pada halaman Class Schedule serta digunakan pada halaman Teacher
Schedule untuk menampilkan jadwal kelas kursus.
D. Struktur Tabel
Database yang digunakan dalam pengembangan modul Scheduling ini
adalah MySQL. Berikut adalah beberapa struktur tabel yang digunakan pada modul
Scheduling.
25
Tabel 3.2 Struktur Tabel gm_course Nama Variabel Tipe Data Panjang
REC_ID int 10 LEVEL_ID varchar 20 LEVEL_NAME varchar 200 SESSION varchar 50 SKILLS varchar 50
Tabel 3.2 merupakan struktur tabel gm_course pada database. Tabel
gm_course digunakan untuk membuat tabel yang terkait dengan jadwal
pelaksanaan kelas kursus pada halaman Edit Class Schedule.
Tabel 3.3 Tabel gm_level_schedule Nama Variabel Tipe Data Panjang
ID varchar 100 NAME varchar 50 DESCRIPTION varchar 200
Tabel 3.3 merupakan struktur tabel gm_level_schedule pada database.
Tabel gm_level_schedule digunakan pada saat proses input data pada halaman Add
Class Schedule dan Edit Class Schedule. Selain itu tabel ini juga digunakan untuk
proses filter pada halaman Class Schedule.
Tabel 3.4 Tabel gm_teacher Nama Variabel Tipe Data Panjang ID varchar 50 NAME varchar 50 DESCRIPTION varchar 200
Tabel 3.4 merupakan struktur tabel gm_teacher pada database. Tabel
gm_teacher digunakan pada saat proses input data pada halaman Add Class
Schedule dan Edit Class Schedule. Selain itu tabel ini juga digunakan untuk proses
filter pada halaman Teacher Schedule.
26
Tabel 3.5 Tabel g_schedule Nama Variabel Tipe Data Panjang
ID int 11 LOCATION_ID varchar 100 LOCATION_NAME varchar 100 LEVEL_ID varchar 100 LEVEL_NAME varchar 100 CLASS_TYPE_1 varchar 50 CLASS_TYPE_2 varchar 50 TEACHER_NIP varchar 100 TEACHER_ID varchar 50 TEACHER_NAME varchar 100 CREATED datetime 50 STATUS varchar 100 START_CLASS date END_CLASS date CLASS_HOUR varchar 100
Tabel 3.5 merupakan struktur tabel g_schedule pada database. Tabel
g_schedule digunakan untuk menyimpan data kelas kursus yang dibuat melalui
halaman Add Class Schedule dan Edit Class Schedule. Selain itu tabel g_schedule
digunakan untuk menampilkan semua data kelas kursus pada halaman Class
Schedule dan halaman Teacher Schedule.
Tabel 3.6 Tabel g_schedule_course Nama Variabel Tipe Data Panjang ID int 50 CLASS_ID int 50 DATE date START_TIME time END_TIME time SESSION varchar 50 SKILLS varchar 50 STATUS varchar 50 NOTES text
Tabel 3.6 merupakan struktur tabel g_schedule_course pada database.
Tabel g_schedule_course digunakan untuk menyimpan data kelas kursus terkait
27
waktu pelaksanaan, notes, dan status yang dibuat melalui halaman Add Class
Schedule dan Edit Class Schedule. Selain itu tabel g_schedule_course digunakan
untuk menampilkan semua data kelas kursus pada halaman Class Schedule dan
halaman Teacher Schedule.
Tabel 3.7 Tabel g_student Nama Variabel Tipe Data Panjang
ID int 11 NAME varchar 100 ADDRESS varchar 150 MOBILE varchar 50 EMAIL varchar 50 PHONE varchar 50 DOB date PROGRAM varchar 250 PROGRAM_ID varchar 30 COUNSELLOR_ID varchar 15 COUNTRY_ID varchar 15 BRANCH_ID int 50 UNIVERSITY_ID int 11 DESCRIPTION longtext INTAKE date STATUS varchar 15 USER_ID varchar 15 CREATED datetime UPDATED datetime INTAKE_REMINDER date LASTEST_EDUCATION varchar 100 LEVEL_ID varchar 20 IMAGE_NAME varchar 50 CLOSE_TIME date ACCO_STATUS int 11 VISA_STATUS int 11 DEPARTURE_DATE date AIRPORT_PICK int 11 PROMOTION_ID varchar 30 PROMOTION_BY_ID varchar 30 SCHOLARSHIP_ID varchar 30 SCHOLARSHIP_BY_ID varchar 30 LEAD_SCORE int 11 READING int 20 WRITING int 20
28
Tabel 3.7 Tabel g_student (lanjutan) Nama Variabel Tipe Data Panjang LISTENING int 20 SPEAKING int 20 TARGET int 20 LAST_ASSIGNED datetime DATE_VISA date DATE_ACCO date FUTURE_PROGRAM varchar 250 REMINDER_FUTURE date TYPE_FLAG varchar 30 LAST_UPDATED date LOCATION_USER_ID varchar 50
Tabel 3.7 merupakan struktur tabel g_student pada database. Tabel
g_student digunakan untuk mengambil data murid pada form Add Class Schedule.
Data murid digunakan sebagai partisipan program kursus dari perusahaan PT Info
Cemerlang Andal Nusa.
Tabel 3.8 Tabel g_student_class Nama Kolom Tipe Data Panjang
ID int 50 STUDENT_ID int 50 STUDENT_NAME varchar 50 CLASS_ID int 50 CREATED datetime EMAIL varchar 50
Tabel 3.8 merupakan struktur tabel g_student_class pada database. Tabel
g_student_class digunakan sebagai penghubung antara tabel g_student dan
g_schedule. Fungsi dari tabel ini adalah untuk menyimpan jumlah keseluruhan data
murid dalam suatu kelas.
29
Tabel 3.9 Tabel o_location Nama Kolom Tipe Data Panjang
ID varchar 15 NAME varchar 50 DESCRIPTION varchar 150
Tabel 3.9 merupakan struktur tabel o_location pada database. Tabel
o_location digunakan untuk menyimpan lokasi semua kantor cabang PT Info
Cemerlang Andal Nusa yang tersebar di Indonesia. Selain itu tabel ini juga
digunakan untuk proses filter pada halaman Class Schedule dan Teacher Schedule.
30
E. Rancangan Antarmuka
Gambar 3.7 Rancangan Antarmuka Halaman Class Schedule
Gambar 3.7 merupakan rancangan awal tampilan halaman Class Schedule.
Halaman Class Schedule menampilkan semua data kelas yang telah ada pada
database. Terdapat beberapa button pada halaman ini yang masing-masing
memiliki fungsinya sendiri, contohnya seperti button add untuk menambah atau
membuat data. Selain itu tersedia juga filter city dan level berupa dropdown apabila
user ingin data yang ditampilkan pada tabel dibawahnya sesuai dengan kriteria yang
diinginkan, juga tersedia field search untuk membantu user jika ingin menemukan
data secara cepat dan spesifik.
31
Gambar 3.8 Rancangan Antarmuka Halaman Add Class Schedule
Gambar 3.8 merupakan rancangan awal tampilan halaman Add Class
Schedule yang digunakan user dalam menambahkan jadwal kelas kursus. Ada
beberapa jenis field yang tersedia dalam halaman Add Class Schedule, seperti input
text, dropdown, autocomplete, dan datepicker. Apabila user ingin menyimpan data
yang telah diinput, maka user dapat menekan tombol Save, namun sebaliknya
apabila user tidak ingin menyimpan data, terdapat tombol Cancel yang
mengarahkan user kembali ke halaman Class Schedule tanpa menyimpan data
apapun.
32
Schedule Edit. Desain halaman Edit ini hampir mirip menyerupai halaman
Add, namun yang membedakan adalah pada halaman Edit, terdapat tabel yang
berisikan tanggal jadwal pertemuan, jam mulai kelas, jam berakhir kelas, notes, dan
teacher signature yang menandakan pertemuan tersebut telah dilaksanakan, dan
diisi sesuai data yang diinginkan user. Setelah itu, perubahan data tersebut bisa
disimpan apabila user menekan tombol Save, dan sebaliknya apabila user tidak
ingin menyimpan perubahan yang ada, maka user bisa menekan tombol Cancel.
Gambar 3.9 Rancangan Antarmuka Halaman Edit Class Schedule
33
Gambar 3.10 Rancangan Antarmuka Halaman Teacher Schedule
Gambar 3.10 merupakan rancangan awal untuk tampilan halaman Teacher
Schedule. Pada halaman Teacher Schedule, semua jadwal kursus akan ditampilkan
sesuai dengan data yang telah di-input pada halaman Class Schedule. Terdapat
keterangan warna yang dapat memudahkan user untuk mengetahui jadwal tersebut
berasal dari kantor cabang mana. Selain itu, disediakan filter untuk memudahkan
user dalam melihat penjadwalan yang tertera pada tabel. Jika user menggunakan
filter, maka kalender akan menampilkan data berdasarkan kriteria yang diinginkan.
34
3.3.3 Implementasi
Gambar 3.11 Halaman Menu
Gambar 3.11 merupakan tampilan halaman Menu website
icedalnusa.com/icanenglish. Untuk masuk ke modul Scheduling, user dapat
menekan tombol Scheduling. Website akan memberi feedback berupa menu Class
Schedule dan menu Teacher Schedule. Website akan berpindah halaman sesuai
dengan pilihan user.
Gambar 3.12 Halaman Class Schedule
Gambar 3.12 merupakan tampilan halaman Class Schedule yang berisi
semua data terkait kelas kursus yang sebelumnya telah dibuat oleh user. Pada
halaman ini tersedia beberapa button yang memiliki fungsi yang berbeda. Untuk
35
menambahkan kelas, user bisa memilih button Add. Untuk mengakses button Edit
dan Delete, user harus memilih salah satu data yang berada pada tabel.
Gambar 3.13 Halaman Add Class Schedule
Gambar 3.13 merupakan tampilan halaman Add Class Schedule. User
dapat mengisi form untuk menyimpan data terkait penjadwalan kelas kursus bahasa
Inggris.
Gambar 3.14 Implementasi Tambah Student Pada Halaman Add Class Schedule
Gambar 3.14 merupakan tambah kolom Student pada halaman Add Class
Schedule dengan cara menekan button “+”. User dapat menambah Student dengan
jumlah maksimal 7 dalam satu kelas kursus.
36
Gambar 3.15 Tampilan Alert Tambah Student Pada Halaman Add Class Schedule
Gambar 3.15 merupakan alert yang muncul saat user menambahkan
Student lebih dari 7. User hanya boleh memiliki 7 Student untuk di-input dalam
satu kelas kursus. User dapat menekan tombol OK untuk menutup alert.
Gambar 3.16 Tampilan Data Berhasil Ditambahkan
Gambar 3.16 merupakan tampilan jika data berhasil ditambahkan.
Notifikasi akan muncul pada bagian atas halaman Class Schedule. Data yang telah
ditambahkan juga akan muncul pada tabel Class Schedule.
37
Gambar 3.17 Tampilan Alert Jika Menekan Tombol Edit Atau Delete Tanpa
Memilih Data
Gambar 3.17 merupakan tampilan alert yang muncul pada bagian atas
halaman Class Schedule apabila user menekan tombol Edit atau Delete tanpa
memilih data kelas kursus terlebih dahulu. User yang memilih data sebelum
menekan tombol Edit atau Delete, tidak akan mendapatkan alert.
Gambar 3.18 Halaman Edit Class Schedule
Gambar 3.18 merupakan halaman Edit Class Schedule saat user memilih
tombol Edit pada halaman Class Schedule. Pada halaman Edit Class Schedule, data
sebelumnya diambil berdasarkan ID dari Class Schedule yang ada pada database.
38
Halaman Edit Class Schedule berbeda karena pada form edit terdapat tabel untuk
mengisi tanggal dan waktu pelaksanaan kelas kursus terkait.
Gambar 3.19 Tampilan Data Berhasil Ditambahkan
Gambar 3.19 merupakan tampilan alert pada bagian atas halaman Class
Schedule yang menunjukan bahwa data penjadwalan kelas kursus berhasil
ditambahkan. Selain itu, penjadwalan kelas yang telah ditambahkan tersebut juga
akan muncul pada tabel halaman Class Schedule.
Gambar 3.20 Tampilan Alert Konfirmasi Hapus Data
Gambar 3.20 merupakan tampilan alert yang muncul pada bagian atas
halaman Class Schedule. Alert tersebut berisi konfirmasi pada saat user ingin
menghapus data penjadwalan yang sebelumnya telah dipilih. Apabila user memilih
tombol OK pada alert maka data akan terhapus, dan jika memilih Cancel maka data
tidak dihapus.
39
Gambar 3.21 Tampilan Halaman Teacher Schedule
Gambar 3.21 merupakan tampilan halaman Teacher Schedule dalam
bentuk kalender yang menampilkan seluruh jadwal kursus yang sebelumnya telah
ditambahkan pada halaman Class Schedule. Selain itu, adapun keterangan warna
yang dibuat untuk bisa membedakan jadwal kursus tersebut berasal dari cabang
mana.
Gambar 3.22 Tampilan halaman Teacher Schedule Berdasarkan Filter City
40
Gambar 3.22 merupakan tampilan halaman Teacher Schedule apabila user
hanya ingin menampilkan data penjadwalan kursus bahasa Inggris pada kantor
cabang di Jakarta Barat. Setelah user memilih filter City yang diinginkan dan
menekan tombol Go, maka halaman Teacher Schedule akan melakukan refresh
kemudian akan menampilkan data sesuai yang diinginkan user pada kolom filter.
Gambar 3.23 Tampilan Halaman Teacher Schedule Berdasarkan Filter City dan Teacher
Gambar 3.23 merupakan tampilan halaman Teacher Schedule apabila user
menggunakan filter City dan Teacher untuk melihat data pada kalender. User bisa
saja menggunakan 2 filter sekaligus untuk membantu menemukan data dengan
cepat dan spesifik.
41
3.3.4 Kendala Yang Ditemukan
Dalam proses kerja magang di PT Info Cemerlang Andal Nusa, terdapat
beberapa kendala yang ditemukan sebagai berikut.
a) Kendala dalam pembuatan rancangan antarmuka yang selalu berubah atau
tidak konsisten karena disesuaikan dengan keinginan dari CEO perusahaan.
b) Kendala lain yang ditemukan adalah pada saat proses pemahaman struktur file
website yang dikerjakan secara local storage. Proses ini memerlukan waktu
yang tidak sedikit karena website memiliki struktur file yang cukup besar.
3.3.5 Solusi Atas Kendala Yang Ditemukan
Solusi atas kendala yang ditemukan dalam proses kerja magang yang
dilakukan adalah sebagai berikut.
a) Merancang dan mendiskusikan rancangan antarmuka bersama supervisor agar
tampilan aplikasi yang dibuat, memudahkan user dalam pemakaiannya.
b) Pemahaman terkait struktur file dari website juga dikonsultasikan dengan
supervisor agar struktur file menjadi lebih mudah untuk dimengerti .