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 .