vii 1. Pendahuluan
Indonesia mencatat penyebaran Covid-19 harian tertinggi dalam periode 24 jam pada Kamis 03 Desember 2020 mencapai 8.369 orang [1]. Pada awal Maret 2020, pemerintah menegaskan bahwa beberapa sektor kehidupan dikerjakan dari rumah untuk menekan penyebaran Covid-19 [2]. Berdasarkan permasalahan yang dialami saat ini, banyak event yang sudah direncanakan jauh-jauh hari tetapi harus dihentikan atau event tersebut harus dijalankan secara online. PT TYZ adalah salah satu perusahan yang bergerak dalam bidang teknologi yang ada di Indonesia. PT TYZ memiliki banyak event yang harus diselenggarakan baik itu setiap bulan ataupun setiap tahunnya, sehingga PT TYZ memberikan solusi dengan membuat suatu aplikasi Event Virtual. Adanya aplikasi Virtual Event ini bisa membantu PT TYZ untuk menyelenggarakan event, dan mempermudah untuk mengelola event yang dimiliki PT TYZ. Untuk mendukung aplikasi Virtual Event ini membutuhkan front end admin, yang dapat menampilkan informasi mengenai event dengan baik dan memiliki tampilan yang user friendly [3], maka dibutuhkan teknologi yang memiliki daya dukung yang baik.
Framework angular adalah framework yang dapat membantu meningkatkan produktivitas dalam pembangunan aplikasi serta mempermudah perawatan dan testing pada aplikasi [4].
Framework angular dapat mendukung pengembangan frontend admin application melalui dukungan cross browser. Framework angular secara otomatis menangani kode java script yang cocok untuk masing-masing browser. Framework angular sudah berbasis Model View Controller (MVC), dengan demikian framework angular dapat digunakan untuk membangun aplikasi web yang terstruktur dan dinamis dengan memperkaya sintaks HTML untuk membuat Rich Internet Application (RIA) [5]. Angular sendiri adalah salah satu framework JavaScript yang Open Source dan juga sudah menggunakan bahasa pemrograman Typescript guna meningkatkan kinerja lebih baik [6].
Adanya permasalahan yang dihadapi, maka MVC dan bahasa pemrograman typescript pada framework angular dapat membantu mempercepat pembangunan aplikasi. Framework angular mempermudah penggunaan tools pendukung seperti bootstrap, devextreme dan sweetalert2 untuk membuat tampilan yang lebih dinamis dan friendly. Framework angular yang sudah didukung cross browser membuat dimana tampilan aplikasi web ini dapat berjalan di semua browser, sehingga pengguna dapat menjalankan aplikasi melalui aplikasi apapun. Sebagai inovasi dalam menangani event yang diselenggarakan secara online makan PT TYZ memerlukan teknologi yang mendukung.
Penelitian ini bertujuan untuk menerapkan framework angular pada frontend admin application untuk membangun aplikasi web yang dapat membantu memfasilitasi kebutuhan dari aplikasi Virtual Event yang diadakan oleh PT TYZ. Hal ini menjadi nilai tambah dalam pengelolaan event pada PT TYZ, dimana semua event yang ada lebih terkontrol dan informasi lebih mudah untuk diperoleh.
2. Tinjauan pustaka
Pada penelitian yang berjudul Pengembangan Kalender Kegiatan Berbasis Web dengan Framework AngularJS di Fakultas Teknologi Informasi Universitas Kristen Maranatha, framework angular berhasil digunakan dalam membangun aplikasi berbasis web untuk mengatur jadwal.
Aplikasi ini memanfaatkan kerangka kerja AngularJS, berdasarkan model MVC. Framework angular dari hasil penelitian ini mempermudah menampilkan jadwal kegiatan dalam bentuk tabel dan juga mempermudah menampilkan jadwal kegiatan dalam bentuk kalender. Framework angular dapat melakukan sinkronisasi dari google calendar guna melakukan sinkronisasi penjadwalan dari para member pengguna aplikasi ini [5].
Penelitian lain yang berjudul Pembuatan Web Application untuk Mendukung Pelayanan Asisten Tutor di Universitas Kristen Petra, framework angular berhasil digunakan sebagai frontend yang berperan untuk menerima input yang dilakukan pengguna aplikasi untuk diteruskan menuju backend ataupun backend menyediakan data yang dibutuhkan frontend untuk ditampilkan. Dalam penelitian ini framework angular dapat mengirimkan request dengan baik dan dapat menerima respons untuk menunjukkan request yang dikirim berhasil dan valid. Framework angular mempermudah authentication dari user untuk menuju ke halaman web sesuai dengan roles yang sudah ditentukan [7].
viii Sementara itu, penelitian yang berjudul Aplikasi Pemrograman Linear Simpleks Dua Fase Berbasis Web Menggunakan Angular Javascript Framework, menyebutkan bahwa framework angular berhasil digunakan dalam membangun aplikasi web untuk menyelesaikan permasalahan pemrograman linear simpleks dua fase. Framework angular mempermudah untuk menjalankan algoritma pemrograman linear sehingga hasil yang ditampilkan dalam tabel sudah akurat [8].
Membandingkan dari beberapa penelitian terkait, maka pada penelitian ini frontend admin application dibangun menggunakan framework angular yang mempermudah menampilkan data dan dapat menerima respons serta mengirimkan request dengan baik kepada backend melalu API.
3. Metode Penelitian
Aplikasi Virtual Event adalah suatu aplikasi yang mempresentasikan data berupa multimedia. Selain dibutuhkan arsitektur backend yang kuat, juga dibutuhkan arsitektur frontend yang dinamis sehingga dapat mendukung presentasi data multimedia yang interaktif di berbagai jenis platform dan berbagai jenis user. Penggunaan framework angular untuk membangun frontend admin application pada penelitian ini menggunakan beberapa tahap yaitu: tahap analisis dan desain system kemudian implementasi framework. Pada tahap analisis dan desain system dilakukan analisis desain system yang sudah ada berdasarkan kerangka backend yang sudah disediakan oleh perusahaan. Data diberikan oleh backend melalui API yang kemudian disajikan dalam berbagai tampilan di frontend. Data yang diperoleh yakni data event dan data peserta, sehingga pada aplikasi ini memiliki dua modul yakni modul event dan modul participant. Dalam setiap modul tersebut terdapat fungsi create, read dan update yang selanjutnya akan ditampilkan pada frontend. Hasil analisis desain yang dilakukan pada tahap pertama ini disajikan dalam bentuk use case diagram.
Secara skema arsitektur pembangunan frontend admin application ditunjukkan pada Gambar 1.
Gambar 1 Architecture Pembangunan Frontend Admin Application
Tahap kedua dari penelitian ini adalah implementasi framework, dimana dimulai dengan membuat struktur MVC pada framework angular. MVC merupakan konsep yang digunakan untuk membungkus data bersamaan dengan proses pemodelan yang dibagi menjadi Pada tahap ini terjadi penempatan modul, component, service dan router agar menjadi lebih terstruktur dalam pembangunan aplikasi. Hubungan antara modul, component, service dan router ditunjukkan pada Gambar 2. Pada Gambar 2 ditunjukkan bahwa ngModules atau biasa disebut modul berfungsi untuk menstrukturkan component penyusun aplikasi. Dalam framework angular dapat memiliki banyak modul sehingga membutuhkan rooter global, yang digunakan untuk menghubungkan antar modul satu dengan yang lainnya. Di dalam modul memiliki component, setiap modul dapat memiliki banyak component sehingga diperlukan router untuk menghubungkan component satu dengan yang lainnya. Service terhubung secara langsung pada component, untuk menghubungkan frontend dengan API yang sudah disediakan oleh backend.
ix Gambar 2 Hubungan Antara Modul, Component, Service dan Router
Tahap selanjutnya adalah perancangan user interface, dimana pada tahap ini dirancang form create untuk membuat event dan menambahkan peserta, kemudian merancang form detail yang berfungsi untuk menampilkan detail dari event dan detail dari data diri peserta. Selanjutnya merancang tampilan tabel yang digunakan untuk menampilkan list event ataupun list peserta, dan membangun feedback yang dihasilkan ketika terjadi interaksi antar admin dan aplikasi.
Perancangan user interface yang dihasilkan seperti pada Gambar 3 dan Gambar 4.
Gambar 3 Mockup Form Create and Form Detail
Gambar 4 Mockup List Table
x 4. Hasil pembahasan
Pada tahap pertama dari penelitian ini dihasilkan desain system dalam bentuk Unified Modelling Language. UML adalah sebuah blue print yang digunakan untuk perancangan dalam pembangunan aplikasi [9]. Use case diagram merupakan pemodelan sistem informasi yang berguna untuk klasifikasi aspek perilaku terhadap aktor dan fungsi yang sudah disediakan oleh sistem [10].
Use case diagram yang dihasilkan ditunjukkan pada Gambar 3.
Gambar 5 Use Case Diagram
Pada Gambar 2 dapat dilihat use case diagram dari frontend admin application, dimana memiliki satu actor yaitu admin yang dapat mengakses dashboard page, dimana dashboard page terdiri dari event page, dan participant page. Pada event page, admin dapat melihat event yang ada, dapat membuat event baru atau mengubah event yang sudah ada. Sedangkan pada participant page, admin dapat melihat total participant yang ada di setiap event yang ada, serta dapat menambahkan peserta dan melakukan update peserta.
Data yang digunakan pada pembangun frontend admin application menggunakan data perusahaan PT TYZ, dimana data yang diolah dalam backend terpisah dari frontend. Sehingga frontend hanya menerima data yang sudah disediakan oleh backend melalui alamat API yang disediakan oleh web service [11]. Daftar API yang diberikan oleh backend ditunjukkan pada Tabel 1. Pada Tabel 1 ditunjukkan ada empat API dengan method GET yaitu eventList, eventDetail, participantList, participantDetail. Method GET digunakan untuk menampilkan data event dan data peserta. Method POST pada Tabel 1 memiliki dua API yaitu eventSave dan participantSave, yang digunakan untuk membuat event dan menambahkan peserta. Dua API menggunakan method PUT yaitu eventUpdate, dan participantUpdate, digunakan untuk melakukan update terhadap perubahan pada detail event dan detail peserta.
Table 1 API Routes yang Digunakan
Method URL
Get api/eventList Post api/eventSave
Get api/eventDetail/{id}
Put api/eventUpdate/{id}/{data}
Get api/participantList/{id_evnt}
Post api/participantSave/{id_evnt}
Get api/participantDetail/{id}
Put api/participantUpdate/{id}/{data}
Framework angular memiliki arsitektur yang melibatkan berbagai component penyusun yang diibaratkan sebagai blok-blok penyusun program seperti modul, component, dan router.
Modul adalah blok paling mendasar yang menyusun framework angular. Blok ini memiliki fungsi untuk menstrukturkan component penyusun angular lainnya. Modul secara singkatnya adalah blok
xi yang mengatur penyusunan atau kompilasi context dari aplikasi. Component tidak hanya terbatas pada kode template html, melainkan juga controller yang melibatkan view dan component bergantung pada service untuk memanggil API ke component dan sebagainya. Router berperan sebagai blok khusus untuk menangani navigasi halaman website [12]. Struktur angular dalam penelitian ini ditujukan pada Gambar 4.
Gambar 6 Struktur Angular
Pada Gambar 4 diperlihatkan struktur Angular terdiri dari tiga bagian utama yakni modul, routing, dan component, serta memiliki bagian pendukung lainnya seperti assets, environments, dan service. Bagian modul yang yang terdapat di dalam pembangunan frontend ini dibagi menjadi dua bagian yakni main modul dan share modul. Dalam folder main modul ini terdiri dari beberapa modul utama yang digunakan, seperti modul participant, modul event, dalam setiap modul ini terdiri dari beberapa component yang digunakan. Sedangkan pada folder share modul ini terdiri dari beberapa component pendukung yang digunakan untuk mendukung kebutuhan setiap modul yang berada pada main modul, seperti alert, breadcrumbs, loading dan sebagainya. Pembuatan modul dibuat dengan cara menuliskan perintah pada terminal atau command prompt seperti yang ditunjukkan pada Kode Terminal 1.
Kode Terminal 1 Pembuatan Modul
1. ng generate module file_name --routing
Pada kode terminal 1 perintah generate module digunakan untuk membuat satu modul, diikuti dengan perintah untuk membuat nama file atau nama folder yang digunakan. Sedangkan perintah routing hanya digunakan untuk membuat file routing, bila tidak membutuhkan file tersebut, maka tidak perlu ditambahkan. Bagian Selanjutnya adalah component, dimana component dibuat dengan cara menuliskan perintah seperti yang ditunjukkan pada Kode Terminal 2.
Kode Terminal 2 Pembuatan Component
1. ng generate module file_name --routing
Pada Kode Terminal 2, perintah generate component digunakan untuk membuat suatu component, kemudian perintah selanjutnya ialah module name dan file component name.
Component angular memiliki empat file utama yaitu: component.html, component.css, component.ts dan component.spec.ts. Component html digunakan untuk menuliskan source code html.
Selanjutnya component.css yang digunakan untuk menuliskan kode css untuk mempercantik tampilan. Selanjutnya file component.ts digunakan sebagai controller penghubung antara file html, file css dan juga file service untuk mengelola data [13]. File component.ts dapat juga digunakan untuk menghubungkan antar class yang satu dengan yang lain selama dalam satu modul yang sama.
xii Component yang terakhir ialah component.spec.ts, file ini adalah file pendukung yang akan langsung terbuat, berfungsi sebagai file sumber dari test unit saat menjalankan aplikasi.
Routing antar modul pada frontend admin application terdapat pada satu file routing utama yakni app.routing.ts yang digunakan untuk menghubungkan antara main modul dengan share modul. Sedangkan Pada folder main modul memiliki file routing sendiri yang digunakan untuk menghubungkan semua modul yang ada. Kode Program 1 menunjukkan isi dari app.routing.ts dan isi dari file routing antar modul. Pada Kode Program 1 terdapat path yang dimana digunakan untuk memberikan nama dari modul yang dituju, sedangkan loadChildren digunakan untuk memberikan lokasi dari modul.
Kode Program 1 File Routing Modul dan App Routing
1. export const Routes = [ 2. {
3. path: '',
4. redirectTo: 'participant', 5. pathMatch: 'full'
6. },{
7. path: 'participant', 8. loadChildren:
9. 'location-file/modulename/participant.module#ParticipantsModule' 10. },
11. {
12. path: 'unauthorized',
13. component: UnauthorizedComponent 14. }
15. ];
Component yang ada pada modul dihubungkan dengan file routing. Setiap modul memiliki satu file routing yang digunakan untuk menghubungkan antar component satu dengan yang lainnya.
Pada Kode Program 2 ditunjukkan contoh routing yang menghubungkan antar component. Pada Kode Program 2 terdapat path yang dimana digunakan untuk memberikan nama dari component yang dituju, sedangkan component digunakan untuk memberikan lokasi dari component tersebut.
Kode Program 2 File Routing Component
1. const routes: Routes = [ 2. {
3. path: '',
4. component: ComponentName, 5. pathMatch: 'full',
6. },{
7. path: 'add',
8. component: ComponentName, 9. },
10. ];
Service digunakan sebagai file pengirim data menuju ke alamat API yang digunakan. Setiap modul yang berada pada folder main modul memiliki satu file service sendiri. Pembuatan service sendiri dibuat dengan menuliskan perintah seperti pada Kode Terminal 3. Pada Kode Terminal 3 perintah generate service digunakan untuk membuat service, diikuti dengan nama modul yang digunakan, kemudian nama folder dan yang terakhir nama file.
Kode Terminal 3 Pembuatan Service
1. ng generate service module_name/folder_name/file_name
File Environments dalam pembangunan aplikasi ini, digunakan utuk memasukkan
alamat backend atau database yang digunakan, seperti alamat url path API yang digunakan,
xiii
atau url firebase yang kita gunakan, ataupun url database yang kita pakai. Sehingga disetiap service yang ada hanya perlu melakukan import file environments. Folder Assets ini berisikan file bawaan dari angular mulai dari font, css dan sebagainya, yang digunakan untuk mendukung framework angular ini.
Dalam pembangunan frontend admin application menggunakan beberapa tools pendukung yang digunakan untuk membantu memenuhi kebutuhan yang diperlukan. Tools pendukung yang digunakan yaitu: Devextreme, Bootstrap, Sweetalert. Devextreme adalah kumpulan fitur yang terdiri dari beberapa component UI, untuk mendukung dalam pengembangan aplikasi menggunakan framework angular dan framework lainnya.
Component yang ada pada devextreme meliputi antara lain table data grid, navigation, form, charts dan sebagainya. Bootstrap adalah kerangka kerja css yang digunakan untuk membantu memperindah UI. Dalam pembangunan aplikasi ini juga menggunakan ngx- bootstrap, dimana ngx-bootstrap ini adalah salah satu proyek dalam pengembangan bootstrap yang support dengan bootstrap 3 dan bootstrap 4, proyek ini dibuat untuk
membangun kembali component bootstrap hanya menggunakan angular tanpa menggunakan jQuery.Sweetalert adalah salah satu plugin javascript yang dibuat untuk memperindah popup atau alert.
Pada tahapan kedua adalah tahapan implementasi framework. Tahap ini diawali dengan form create. Langkah pertama yang dilakukan adalah membuat form pada file html sesuai dengan kebutuhan. Form untuk membuat suatu event memerlukan nama event, tanggal, deskripsi event dan sebagainya. Sedangkan yang dibutuhkan untuk membuat suatu form peserta memerlukan biodata peserta seperti nama, alamat, email, no handphone. Ada dua cara untuk membuat form yang pertama menggunakan ngmodel atau menggunakan formgroup.
Kode Program 3 File Component.html Form Create ngModel
1. <form #particpantForm="ngForm"
2. (ngSubmit)="saveParticipant()">
3. <label for="NAME"> Name </label>
4. <div>
5. <input required type="text" class="form-control"
6. [(ngModel)]="participants.NAME" name="NAME"
7. id="NAME" #fullNameControl="ngModel">
8. </div>
9. <label for="EMAIL"> Email </label>
10. <div>
11. <input required type="text" class="form-control"
12. [(ngModel)]="participants.EMAIL" name="EMAIL"
13. id="EMAIL" #emailControl="ngModel">
14. </div>
15. <button type="submit"> Create </button>
16. </form>
Pada Kode Program 3, semua data pada field disimpan pada ngModel sesuai dengan yang sudah ditentukan. Pada Kode Program 3 bagian tag input memiliki ngModel yang diisi sesuai dengan variable dimana data pada setiap field tersebut akan diletakkan dan setiap field memiliki variable yang dituju sendiri. Dalam pembangunan aplikasi ini menggunakan variable array yang dimana nanti meletakkan data yang ada pada setiap field berdasarkan index yang sudah ada. Pada file component.ts setelah data form sudah tersimpan pada variable yang ada maka menjalankan function untuk mengirim data ke file service seperti pada Kode Program 4.
Kode Program 4 File Component.ts Send Data to Service
1. addParticipant(){
2. this.Service.addParticipant(this.participants) 3. .subscribe((res) => {
xiv
4. let response: any = res;
5. if (response.Message.includes('Failed')) { 6. Swal({
7. title: 'Error',
8. text: response.result, 9. type: 'error'
10. });
11. } else { 12. Swal({
13. title: 'Success', 14. text: response.result, 15. type: 'success', 16. });
17. } 18. } 19. }
Pada Kode Program 4 dapat dilihat data yang sudah tersimpan pada variable akan dikirim menuju function yang ada pada file service, feedback yang diterima bila perintah berhasil diterima oleh backend dan hasilnya success maka akan muncul alert success, bila error makan akan muncul alert error [14]. Pembuatan alert ini menggunakan fitur sweetalert2 sehingga file component.ts hanya tinggal melakukan export library sweetalert2.
Kode Program 5 File Component.html Form Group
1. <form [formGroup]="EventForm">
2. <label class="col-4 pr-0 capitalized" for="NAME">
3. Name </label>
4. <div class="form-group">
5. <input required type="text" class="form-control"
6. formControlName="NAME" name="NAME" id="NAME">
7.
8. <label class="col-4 pr-0 capitalized"
9. for="DESCRIPTION"> Description </label>
10. <div class="form-group">
11. <input required type="text" class="form-control"
12. formControlDescription=" DESCRIPTION " name="
13. DESCRIPTION " id=" DESCRIPTION ">
14. </div>
15. <button type="submit" (click)="saveFormEvent()">
16. Create</button>
17. </form>
Pembuatan form yang kedua menggunakan form group seperti pada Kode Program 5. Pada Kode Program 5 data yang telah di isi pada setiap field akan langsung tersimpan pada variable form group yaitu variable EventForm. EventForm adalah variable yang bertipe FormGroup. Pembeda dari setiap field yang ada dibedakan dengan name yang berada pada tag input. Pada file component.ts setelah data dari form sudah tersimpan pada EventForm maka menjalankan function untuk mengirim data ke file service seperti pada Kode Program 6.
Kode Program 6 File Component.ts Send Data to Service Form Group
1. saveFormEvent(){
2. this.formData.set('data',
3. JSON.stringify(this.EventForm.value));
4. this.Service.saveEvent(this.formData).subscribe(
5. (res) => {
6. let response: any = res;
7. if (response.Message.includes('Failed')) { 8. Swal({
xv
9. title: 'Error',
10. text: response.result, 11. type: 'error'
12. });
13. } else { 14. Swal({
15. title: 'Success', 16. text: response.result, 17. type: 'success', 18. });
19. } 20. } 21. }
Pada Kode Program 6, yang dikirim dari file component.ts menuju ke file service adalah formData, dimana EventForm diletakkan pada formData dengan cara melakukan perintah set dan diikuti dengan pada bagian apa EventForm akan diletakkan. Pada Kode Program 6 EventForm diletakkan pada bagian data. Perintah JSON.stringify digunakan dimana data yang ada pada EventForm diubah menjadi string. Tahap selanjutnya barulah menjalankan function yang berada pada file service. Pada Kode Program 6, juga terlihat ada perintah Swal untuk menampilkan alert success atau error.
Kode Program 7 Service Save
1. saveEvent(params) {
2. return this.http.post<any>
3. (this.urlpath + 'save/', params).pipe(map(res => res));
4. }
Pada Kode Program 7, dimana mengirimkan data dari frontend ke backend menggunakan perintah POST, dan data yang dikirim berada pada params. Pada Kode Program 7 juga ada kode this.urlpath dimana variable urlpath adalah url backend yang sudah disediakan pada file environments sehingga pada file service ini melakukan export file environments untuk bisa mendapatkan alamat url path, kemudian dilanjutkan alamat detail lokasi pemanggilan API. Dari tahapan pembuatan form create tampilan yang dihasilkan seperti pada Gambar 7.
Gambar 7 Tampilan Form Create
Langkah selanjutnya adalah menampilkan data. Dalam aplikasi ini menampilkan data list event dan data list peserta menggunakan tabel. Menampilkan list event ataupun list peserta menggunakan tabel data grid dimana menggunakan fitur yang ada pada devextreme. Proses pengambilan data pertama melalui file component.ts yang menjalankan function untuk melakukan request pada file service dalam pengambilan data, seperti pada Kode Program 8.
Kode Program 8File Component.ts Get Data List
xvi
1. async getData() {
2. await this.Service.getList().subscribe(
3. (res) => {
4. DataSource(res.result);
5. });
6. }
Pada Kode Program 8, dapat dilihat dimana function getData memiliki perintah this.Service.getList, perintah ini digunakan untuk memanggil function getList pada file service sehingga function akan berjalan untuk mengambil data. Setelah data berhasil diambil maka data tersebut akan ditaruh pada variable datasource untuk ditampilkan pada tabel. Sedangkan function dalam file service memiliki perintah yang dijalankan seperti pada Kode Program 9. Pada kode program 9, dimana mengambil data dari backend menggunakan perintah GET.
Kode Program 9Service Get Data List
1. getList () {
2. return this.http.get<any>
3. (this.urlpath + 'list').pipe(map(res =>res.result));
4. }
Kode Program 10File Component.html Menampilkan Data List
1. <dx-data-grid id="gridContainer"
2. [dataSource]="dataSource" [showBorders]="true"
3. [columnMinWidth]="50">
4. <dxi-column dataField="NAME" caption="NAME"
5. dataType="string" [width]="200"></dxi-column>
6. <dxi-column dataField="DESCRIPTION"
7. caption="DESCRIPTION" dataType="string"
8. [width]="250"></dxi-column>
9. </dx-data-grid>
Pada file component.ts dimana data yang sudah diambil diletakkan pada variable data source. Pada Kode Program 10, file component.html hanya memanggil variable datasource pada tag html dx-data-grid, kemudian pada tag dxi-column bagian dataField ini harus sesuai dengan nama field yang ada pada database agar data bisa ditampilkan sesuai dengan kolom yang ada. Pada Kode Program 10 tag dxi-column bagian caption digunakan untuk memberikan nama kolom.
Kemudian bagian dataType digunakan untuk memberikan tipe data yang diterima seperti date, date time dan sebagainya. Dari tahapan menampilkan data dalam tabel, tampilan yang dihasilkan seperti pada Gambar 8.
Gambar 8 Tampilan List Table
Tahapan selanjutnya menampilkan data pada sebuah form, yang digunakan untuk menampilkan detail event ataupun detail peserta, service yang digunakan sama seperti Kode Program 11. Pada Kode Program 11 memanggil data menggunakan GET, diikuti dengan id dari event ataupun peserta. Setelah data berhasil diterima, maka data diletakkan pada form group seperti
xvi pada Kode Program 12.
Kode Program 11 Service Get Detail
1. getList (id) {
2. return this.http.get<any>
3. (this.urlpath + 'list/',id).pipe(map(res =>res.result));
4. }
Kode Program 12File Component.ts Get Detail Participant
1. getDetail(){
2. this.Service.detail(id).subscribe(
3. (res) => {
4. this.formParticipant.patchValue(res.result);
5. } 6. }
Pada Kode Program 12 data yang diterima akan diletakkan pada formParticipant dengan cara melakukan perintah patchValue, dimana formParticipant ini adalah form group. Data yang telah diterima lalu ditampilkan dalam bentuk sebuah form. Tampilan form untuk menampilkan data ini menggunakan seperti pada Kode Program 5, dimana data ditampilkan sesuai dengan name pada tag input yang ada. Dari tahapan menampilkan data dalam form, tampilan yang dihasilkan seperti pada Gambar 9.
Gambar 9 Tampilan Form Detail
User admin pada aplikasi ini ialah pemilik atau panitia dari event yang ada, dimana admin dapat membuat event, melakukan update, dan melihat data peserta, dan juga menambahkan peserta pada event yang ada
5. Simpulan
Dalam pembangunan web frontend admin application ini mempermudah dimana adanya framework angular yang sudah berbasis MVC, dimana proses pembangunan lebih terstruktur dengan baik dan tertata rapi. Dalam pembuatan dokumentasi dari frontend admin application ini dipermudah dikarenakan saat pembangunan aplikasi sudah dibedakan dibagian masih - masing.
Dengan menggunakan framework angular ini frontend admin application mudah untuk dikembangkan dimasa mendatang.
Dengan adanya web frontend admin application pada aplikasi Virtual Event membantu memenuhi kebutuhan dalam melakukan controlling pada event yang ada dimana admin dapat dengan mudah membuat suatu event, dan admin dengan mudah melakukan update. Admin juga dapat melihat list event yang ada. Dalam frontend admin application ada juga modul participant dimana modul ini membantu admin untuk menambahkan peserta pada event yang ada dan admin juga dapat melihat data peserta yang mengikuti event.
xvi Saran dalam pengembangan web frontend admin application kedepannya untuk memperbanyak fitur-fitur yang ada sehingga aplikasi Virtual Event bisa dipakai oleh banyak orang, dan aplikasi Virtual Event bisa dibuka untuk umum sehingga tidak hanya dari perusahaan saja tapi bisa untuk orang luar dengan dikenakan tarif.
–
–
–
–
–
