Integrasi Aplikasi myits URL Shortener dan Aplikasi Servicedesk ITS dengan myits Single Sign On (SSO) Menggunakan Protokol OpenID Connect

(1)

KERJA PRAKTIK – KI141330

Integrasi Aplikasi myITS URL Shortener dan Aplikasi

Servicedesk ITS dengan myITS Single Sign On (SSO)

Menggunakan Protokol OpenID Connect

DIREKTORAT PENGEMBANGAN TEKNOLOGI DAN

SISTEM INFORMASI (DPTSI) - ITS

Kampus Sukolilo, Gedung Pusat Riset Lantai 4, Jl. Teknik

Kimia, Keputih, Sukolilo, Kota Surabaya, Jawa Timur 60117

Periode: 1 Juni 2020 - 31 Agustus 2020

Oleh:

Bayu Laksana 05111740000020 Moh. Adam Rahmatullah 05111740000032

Pembimbing Departemen

Dini Adni Navastara S.Kom., M.Sc. Pembimbing Lapangan

Rizky Januar Akbar, S.Kom., M.Eng. DEPARTEMEN TEKNIK INFORMATIKA Fakultas Teknologi Elektro dan Informatika Cerdas Institut Teknologi Sepuluh Nopember

(2)

2

(3)

3 KERJA PRAKTIK – KI141330

Integrasi Aplikasi myITS URL Shortener dan Aplikasi

Servicedesk ITS dengan myITS Single Sign On (SSO)

Menggunakan Protokol OpenID Connect

DIREKTORAT PENGEMBANGAN TEKNOLOGI

DAN SISTEM INFORMASI (DPTSI) - ITS

Kampus Sukolilo, Gedung Pusat Riset Lantai 4, Jl.

Teknik Kimia, Keputih, Sukolilo, Kota Surabaya, Jawa

Timur 60117

Oleh:

Bayu Laksana 05111740000020

Moh. Adam Rahmatullah 05111740000032

Pembimbing Departemen

Dini Adni Navastara S.Kom., M.Sc. Pembimbing Lapangan

Rizky Januar Akbar, S.Kom., M.Eng. DEPARTEMEN TEKNIK INFORMATIKA Fakultas Teknologi Elektro dan Informatika Cerdas Institut Teknologi Sepuluh Nopember

(4)

4

(5)

5

LEMBAR PENGESAHAN

KERJA PRAKTIK

Integrasi Aplikasi myITS URL Shortener dan Aplikasi

Servicedesk ITS dengan myITS Single Sign On (SSO)

Menggunakan Protokol OpenID Connect

Oleh:

Bayu Laksana 05111740000020

Moh. Adam Rahmatullah 05111740000032

Mengetahui, Direktorat Pengembangan Teknologi dan Sistem Informasi

ITS,

Pembimbing Kerja Praktik

Menyetujui, Dosen Pembimbing,

Kerja Praktik

Rizky Januar Akbar, S.Kom., M.Eng.

NIP. 19870103 201404 1 001

Dini Adni Navastara S.Kom., M.Sc.

NIP. 198510172015042001

(6)

6

(7)

7

Integrasi Aplikasi myITS URL Shortener dan Aplikasi

Servicedesk ITS dengan myITS Single Sign On (SSO)

Menggunakan Protokol OpenID Connect

Nama Mahasiswa : Bayu Laksana

NRP : 05111740000020

Nama Mahasiswa : Moh. Adam Rahmatullah

NRP : 05111740000032

Departemen : Teknik Informatika FTEIC-ITS

Pembimbing Departemen: Dini Adni Navastara, S.Kom., M.Sc. Pembimbing Lapangan : Rizky Januar Akbar, S.Kom.,M.Eng.

(8)

8

ABSTRAK

Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) bertugas untuk menyediakan dan mengelola layanan Teknologi Informasi di lingkungan ITS. Terkait peran, DPTSI berperan untuk mendukung aktivitas akademik, penelitian dan pengabdian masyarakat, serta manajerial di lingkungan ITS dalam rangka membantu ITS mencapai visi misinya.

Salah satu misi DPTSI adalah Pengembangan & Pemeliharaan Sistem Informasi Terintegrasi menuju ITS in One Hand dengan memanfaatkan Single Sign On MyITS menggunakan protokol OAuth. Sistem integrasi (integrated system) merupakan sebuah rangkaian proses untuk menghubungkan beberapa sistem komputerisasi dan software aplikasi, baik secara fisik maupun secara fungsional. Sistem terintegrasi akan menggabungkan komponen sub-sub sistem ke dalam satu sistem dan menjamin fungsi-fungsi dari sub sistem tersebut sebagai satu kesatuan sistem. Hal ini dapat menjadi salah satu solusi dari ancaman peretasan yang selalu menghantui pengguna yang mana tanpa terintegrasinya beberapa situs yang ada maka pengguna harus merangkai kata sandi yang unik dan kuat di setiap situs yang digunakan.

Kata Kunci: Integrated System, OAuth, Single Sign On MyITS, Sistem Informasi

(9)

9

KATA PENGANTAR

Puji syukur kami haturkan kepada Allah SWT karena berkat rahmat-Nya kami dapat melaksanakan salah satu kewajiban kami sebagai mahasiswa Departemen Informatika, yakni Kerja Praktek (KP).

Kami menyadari masih ada kekurangan baik dalam pelaksanaan kerja praktik maupun penyusunan buku laporan ini. Namun, kami berharap buku laporan ini dapat menambah wawasan pembaca dan dapat menjadi sumber referensi. Kami mengharapkan kritik dan saran yang membangun untuk kesempurnaan buku laporan kerja praktik ini.

Melalui buku ini, kami juga ingin menyampaikan rasa terima kasih kepada orang-orang yang telah membantu, baik langsung maupun tidak langsung, dalam pelaksanaan kerja praktik hingga penyusunan laporan. Orang-orang tersebut antara lain adalah:

1. Kedua orang tua penulis.

2. Dini Adni Navastara S.Kom., M.Sc., selaku dosen pembimbing kerja praktik.

3. Ary Mazharuddin Shiddiqi, S.Kom., M.Comp.Sc., Ph.D, selaku koordinator Kerja Praktik.

4. Rizky Januar Akbar, S.Kom., M.Eng., selaku pembimbing lapangan kami di Direktorat Pengembangan Teknologi dan Sistem Informasi Institut Teknologi Sepuluh Nopember (DPTSI – ITS)

Surabaya, September 2020 Bayu Laksana, Moh. Adam Rahmatullah

(10)

10

(11)

11

DAFTAR ISI

LEMBAR PENGESAHAN...5 ABSTRAK ...8 KATA PENGANTAR ...9 DAFTAR ISI ... 11 BAB I PENDAHULUAN ... 14 1.1. Latar Belakang... 14 1.2. Tujuan ... 15 1.3. Manfaat ... 15

1.4. Lokasi dan Waktu Kerja Praktik... 15

1.5. Metodologi Kerja Praktik ... 16

1.6. Sistematika Laporan ... 17

BAB II PROFIL PERUSAHAAN ... 20

2.1. Profil DPTSI ITS ... 20

2.2. Struktur Organisasi DPTSI ITS ... 21

2.3. Visi, Misi dan Tujuan DPTSI ITS ... 21

BAB III TINJAUAN PUSTAKA ... 24

3.1. Aplikasi Web ... 24 3.2. HTML ... 24 3.3. CSS... 24 3.4. Bootstrap ... 24 3.5. PHP ... 25 3.6. Javascript ... 25 3.7. Laravel ... 25 3.8. Code Igniter... 25

(12)

12

3.9. Web Server ... 26

3.10. Visual Studio Code ... 26

BAB IV INTEGRASI APLIKASI MYITS URL SHORTENER DENGAN MYITS SSO ... 28

4.1. Latar Belakang ... 28

4.2. Rumusan Masalah ... 28

4.3. Isi ... 29

4.4. Implementasi... 29

BAB V MEMPERBARUI DATA AKUN PENGGUNA SECARA OTOMATIS KETIKA LOGIN PADA APLIKASI MYITS URL SHORTENER ... 33

5.3. Isi ... 34

BAB VI MEMBENAHI TAMPILAN ANTAR MUKA APLIKASI MYITS URL SHORTENER... 38

6.3. Isi ... 39

BAB VII MENGUBAH PREFIKS DOMAIN URL SHORTENER DAN MEMBEDAKAN PERAN (ROLE) AKUN MYITS URL SHORTENER ANTARA MAHASISWA DAN TENAGA DIDIK ... 46

(13)

13

7.3. Isi ... 46

7.4. Implementasi ... 47

BAB VIII INTEGRASI APLIKASI SERVICEDESK ITS DENGAN MYITS SSO ... 51

8.1. Latar Belakang... 51

8.3. Isi ... 51

BAB IX MELAKUKAN PENYESUAIAN FITUR YANG TERSEDIA KETIKA PENGGUNA LOGIN MENGGUNAKAN AKUN MYITS PADA APLIKASI SERVICEDESK ITS... 58

9.1. Latar Belakang... 58

9.3. Isi ... 58

BAB X KESIMPULAN DAN SARAN ... 62

10.1. Kesimpulan ... 62

10.2. Saran ... 62

DAFTAR PUSTAKA ... 63

BIODATA PENULIS I... 64

(14)

14

BAB I

PENDAHULUAN

1.1. Latar Belakang

Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) bertugas untuk menyediakan dan mengelola layanan Teknologi Informasi di lingkungan ITS. Terkait peran, DPTSI berperan untuk mendukung aktivitas akademik, penelitian dan pengabdian masyarakat, serta manajerial di lingkungan ITS dalam rangka membantu ITS mencapai visi misinya.

Salah satu misi DPTSI adalah Pengembangan & Pemeliharaan Sistem Informasi Terintegrasi menuju ITS in One Hand. Sistem integrasi (integrated system) merupakan sebuah rangkaian proses untuk menghubungkan beberapa sistem komputerisasi dan software aplikasi, baik secara fisik maupun secara fungsional. Sistem terintegrasi akan menggabungkan komponen sub-sub sistem ke dalam satu sistem dan menjamin fungsi-fungsi dari sub sistem tersebut sebagai satu kesatuan sistem. Hal ini dapat menjadi salah satu solusi dari ancaman peretasan yang selalu menghantui pengguna yang mana pengguna harus merangkai kata sandi yang unik dan kuat di setiap situs yang digunakan. Oleh karena itu pada kegiatan kerja praktik ini, penulis bertugas untuk membantu beberapa pekerjaan yang dilakukan oleh DPTSI yaitu melakukan integrasi Aplikasi myITS URL Shortener dan Aplikasi Servicedesk ITS dengan myITS Single Sign On (SSO) sehingga meminimalisir ancaman peretasan yang selalu menghantui pengguna yang mana tanpa terintegrasinya beberapa situs yang ada maka pengguna harus merangkai kata sandi yang unik dan kuat di setiap situs yang digunakan.

(15)

15 1.2. Tujuan

Tujuan dari kerja praktik ini adalah untuk membantu DPTSI dalam mengintegrasikan dua layanan aplikasi web dengan sistem login menggunakan myITS SSO. Dua layanan aplikasi web tersebut adalah myITS URL Shortener dan Servicedesk ITS. Selain mengintegrasikannya dengan myITS SSO, kami juga membantu dalam memperbarui tampilan antarmuka dan pengalaman pengguna dari aplikasi web tersebut agar menjadi lebih baik.

1.3. Manfaat

Manfaat yang kami peroleh dari kerja praktik selama menyelesaikan proyek ini adalah:

- Dapat memahami bagaimana alur kerja (sisi klien) dari sistem Single Sign On (SSO) yang ada di ITS.

- Lebih memahami proses-proses perancangan aplikasi web yang baik.

- Menjadi lebih tahu mengenai penggunaan framework yang berbeda-beda untuk pengembangan aplikasi web. - Lebih memahami bagaimana cara pengelolaan kode dan

kerja sama tim yang baik. 1.4. Lokasi dan Waktu Kerja Praktik

Kerja praktik ini dilaksanakan pada waktu dan tempat sebagai berikut:

Lokasi : Dilaksanakan secara Work From Home (WFH)

Waktu : 1 Juni 2020 – 31 Agustus 2020 Hari Kerja : Senin s.d. Jumat

(16)

16 1.5. Metodologi Kerja Praktik

Tahapan pengerjaan kerja praktik dapat dijabarkan sebagai berikut:

1. Perumusan Masalah

Dalam tahap ini kami perlu mengetahui permasalahan apa saja yang terjadi dan dapat diselesaikan atau dioptimasi. Lalu kami juga perlu mengetahui semua kebutuhan dalam permasalahan tersebut.

2. Studi Literatur

Dalam tahap ini kami telah mengetahui semua masalah dan kebutuhan yang dapat diselesaikan atau dioptimasi. Untuk menyelesaikan masalah atau melakukan optimasi kami perlu melakukan studi untuk mendapatkan beberapa penyelesaian masalah yang memiliki masalah dan kebutuhan yang sama dengan masalah dan kebutuhan yang sudah kami dapatkan. 3. Analisis dan Perancangan

Dalam tahap ini kami melakukan Analisis dan membuat rancangan terhadap solusi yang akan kamu buat. Dari analisis alur kerja, perancangan system, perancangan basis data, perancangan tampilan, analisis kompleksitas algoritma. 4. Implementasi

Dalam tahap ini kamu membuat semua yang sudah dilakukan analisis dan sudah tercipta rancangannya.

5. Pengujian dan Evaluasi

Dalam tahap ini kami melakukan Pengujian secara Unit Test yaitu melakukan pengujian pada setiap fungsi yang ada dan Integration Test yaitu melakukan pengujian dengan Uji Kasus yang sudah diberikan oleh user. Pengujian selanjutnya dilakukan oleh user secara langsung. Hasil dari pengujian

(17)

17

tersebut yang akan kami kumpulkan dan jika diperlukan maka kami kembali pada tahap 1, yaitu Perumusan Masalah. 1.6. Sistematika Laporan

Laporan kerja praktik ini terdiri dari tujuh bab dengan rincian sebagai berikut:

1. Latar Belakang

Dalam bab ini berisikan informasi yang tersusun sistematis berkenaan dengan fenomena dan masalah problematik yang merupakan landasan dalam pekerjaan atau pembuatan sebuah software atau perangkat lunak

2. Rumusan Masalah

Dalam bab ini berisikan sebuah pertanyaan yang berkaitan dengan pembahasan atau solusi dari permasalahan yang dijabarkan dalam Latar Belakang

3. Isi

Dalam bab ini berisikan jawaban dari rumusan masalah dan penjelasan – penjelasan dalam proses pengerjaan suatu pekerjaan atau pembuatan sebuah software atau perangkat lunak.

4. Implementasi

Dalam bab ini berisikan kode-kode implementasi yang digunakan untuk menyelesaikan permasalahan yang ada pada rumusan masalah.

5. Kesimpulan

Dalam bab ini berisikan kesimpulan hasil riset atau hasil dari pekejeraan sebuah pekerjaan atau pembuatan sebuah software atau perangkat lunak.

(18)

18 6. Saran

Dalam bab ini berisikan saran – saran untuk pengembangan selanjutnya dari sebuah software atau perangkat lunak atau proses alur kerja.

(19)

19

(20)

20

BAB II

PROFIL PERUSAHAAN

2.1. Profil DPTSI ITS

Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) pada awalnya merupakan sebuah unit yakni UPT Pusat Komputer. Pada masa itu atau tepatnya tahun 1982, UPT Pusat Komputer banyak mendukung staf peneliti ITS dalam melakukan penelitian yang membutuhkan komputer untuk melakukan baik data prosessing maupun menyelesaikan persamaan matematik. 10 tahun kemudian, UPT Puskom dipercaya untuk melakukan pemprosesan data test untuk masuk perguruan tinggi negeri di wilayah Indonesia Timur dan pengalaman dalam pemprosesan data tersebut dikembangkan untuk juga kerjasama dengan Pemkot/Pemkab di Jawa Timur dalam memproses data untuk test Pegawai Negeri.

Sejak tahun 1999 UPT Pusat Komputer dimandatkan untuk mengelola ITS-net yaitu jaringan baik intranet maupun internet untuk ITS secara keseluruhan. Dengan adanya tugas tersebut maka semua data dan informasi di ITS bisa di hubungkan secara menyeluruh. Dengan terbitnya SK Rektor nomor 2769.1/K03/OT/2006 tanggal 8 Juni 2006 merubah nama UPT Pusat Komputer (PUSKOM) menjadi ITS-ICT Services (ITS-Information and Comunication Technology Services) Permendikbud No.49 tahun 2011 tentang Statuta ITS dan Peraturan Rektor ITS No.03 tahun 2012 tentang OTK ITS, merubah nama ITS-ICT Services dan sekaligus menggabungkan bagian Sistem Informasi dari BAPSI, menjadi Badan Teknologi dan Sistem Informasi.

BTSI berubah nama menjadi LPTSI (Lembaga Pengembangan Teknologi Sistem Infromasi) berdasarkan Permendikbud No. 86, Tahun 2013 tentang OTK ITS. LPTSI mempunyai tugas melaksanakan, mengkoordinasi, memonitor dan mengevaluasi kegiatan penelitian dan pengembangan teknologi dan

(21)

21

sistem informasi. Pada bulan Oktober 2016, LPTSI berubah nama menjadi DPTSI (Direktorat Pengembangan Teknologi dan Sistem Informasi).

2.2. Struktur Organisasi DPTSI ITS

Berikut merupakan struktur organisasi dari DPTSI ITS :

Gambar 2.1 : Struktur Organisasi DPTSI ITS

2.3. Visi, Misi dan Tujuan DPTSI ITS

DPTSI memiliki visi Membangun Budaya dan Transformasi Digital untuk Peningkatan Kualitas Kinerja dan Layanan Berbasis TIK dalam rangka mewujudkan ITS sebagai “World Class Research and Innovative University”. Sementara Misi DPTSI seperti di bawah ini.

1) Peningkatan Kapasitas Jaringan

2) Pengembangan & Pemeliharaan Sistem Informasi Terintegrasi menuju ITS in One Hand

3) Peningkatan Efisiensi dan Efektifitas Pelaporan dengan ITS Satu Data

(22)

22

DPTSI ITS memiliki tujuan sebagai berikut. 1) Meningkatkan SDM yang profesional. 2) Meningkatkan aksesibilitas informasi. 3) Meningkatkan proses efisiensi. 4) Menyediakan pelayanan dan support.

(23)

23

(24)

24

BAB III

TINJAUAN PUSTAKA

3.1. Aplikasi Web

Aplikasi Berbasis Web adalah sebuah aplikasi yang dapat diakses melalui internet atau intranet, dan pada sekarang ini ternyata lebih banyak dan lebih luas dalam pemakaiannya. Banyak dari perusahaan-perusahaan berkembang yang menggunakan Aplikasi Berbasis Web dalam merencanakan sumber daya mereka dan untuk mengelola perusahaan mereka.

3.2. HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.

3.3. CSS

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

3.4. Bootstrap

Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS dan javascript dan telah menyediakan kumpulan komponen class interface dasar yang

(25)

25

dirancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan.

3.5. PHP

PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang digunakan untuk mengembangkan situs web statis atau situs web dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang sebelumnya disebut Personal Home Pages. Karena php merupakan scripting server-side maka jenis bahasa pemrograman ini nantinya script/program tersebut akan dijalankan/diproses oleh server.

3.6. Javascript

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox. 3.7. Laravel

Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT, dibangun dengan konsep MVC (model view controller). MVC adalah sebuah pendekatan perangkat lunak yang memisahkan aplikasi logika dari presentasi. MVC memisahkan aplikasi berdasarkan komponen- komponen aplikasi, seperti : manipulasi data, controller, dan user interface.

3.8. Code Igniter

CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP.

(26)

26 3.9. Web Server

Web server adalah suatu perangkat lunak (software) yang fungsinya untuk menerima permintaan HTTP atau HTTPS yang berasal dari client (web browser) dan mengirimkan respon atas permintaan tersebut kepada client dalam bentuk halaman web. Atau secara singkat definisi Web server yaitu server yang memberikan layanan kepada client yang dimana client tersebut meminta informasi dan ada hubungannya dengan halaman web.

3.10. Visual Studio Code

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).

(27)

27

(28)

28

BAB IV

INTEGRASI APLIKASI MYITS URL SHORTENER

DENGAN MYITS SSO

Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) yang memiliki beberapa visi dan misi dalam rangka mewujudkan ITS sebagai “World Class Research and Innovative University”. Salah satu misinya adalah Pengembangan & Pemeliharaan Sistem Informasi Terintegrasi menuju ITS in One Hand. Sistem informasi terintegrasi dilakukan untuk meminimalisir ancaman peretasan yang selalu menghantui pengguna yang mana ketika sistem informasi yang ada masih terpisah di setiap situs yang berbeda maka pengguna harus merangkai kata sandi yang unik dan kuat di setiap situs yang digunakan.

Salah satu layanan yang dimiliki oleh DPTSI yang dikelola pada portal MYITS SSO adalah layanan aplikasi berbasis web bernama MYITS URL SHORTENER. Pada penerapannya, layanan ini hanya bisa diakses oleh pengguna civitas akademik ITS (pengguna harus terautentikasi) yang mana akunnya telah terdaftar pada MYITS SSO. Untuk itu, perlu dilakukan integrasi antara aplikasi MYITS URL SHORTENER dan MYITS SSO agar visi dan misi dalam mewujudkan Sistem Informasi Terintegrasi ITS in One Hand dapat tercapai.

4.2. Rumusan Masalah

Berikut rumusan masalah dari kasus ini.

(1) Alat atau tools apa saja yang digunakan dalam melakukan integrasi aplikasi MYITS URL SHORTENER dengan MYITS SSO?

(29)

29

(2) Bagaimana prosedur dalam melakukan integrasi aplikasi MYITS URL SHORTENER dengan MYITS SSO?

4.3. Isi

Dalam melakukan integrasi aplikasi MYITS URL SHORTENER dengan MYITS SSO, protokol SSO yang digunakan adalah protokol OAuth Open ID. Open ID adalah standar autentikasi terbuka yang diperkenalkan oleh Open ID Foundation. Diperkenalkan pada tahun 2006, dan pada Februari 2014 generasi ketiga Open ID disebut Open ID Connect (OIDC) diluncurkan. Penyempurnaan ini menambahkan layer autentikasi yang berbasis otorisasi OAuth 2.0, yang dapat digunakan untuk bertukar informasi pengguna menggunakan RESTful HTTP API dengan format JSON. 4.4. Implementasi

4.4.1. Memeriksa sistem, apakah pengguna sudah masuk atau belum. Akan dialihkan ke halaman login SSO jika belum login.

(30)

30

4.4.2. Melakukan login MYITS SSO. Dalam hal ini, aplikasi akan menghubungi server SSO dengan membuat objek OpenIDConnectClient.

(31)

31

4.4.3. Setelah berhasil login, akan didapatkan info pengguna dan id token kemudian disimpan dalam session aplikasi.

4.4.4. Pengguna yang belum pernah login akan didaftarkan pada basis data aplikasi shortener. Jika pernah login, maka akan diperbarui datanya.

4.4.5. Untuk proses logout dari MYITS SSO, pertama yang dilakukan adalah logout aplikasi.

(32)

32

4.4.6. Kemudian, melakukan logout dari sisi MYITS SSO dengan menghubungi server SSO dan logout menggunakan id token.

4.4.7. Saat melakukan logout, juga sekaligus menghapus session aplikasi. Dapat dilihat pada perintah session_destroy().

(33)

33

BAB V

MEMPERBARUI DATA AKUN PENGGUNA SECARA

OTOMATIS KETIKA LOGIN PADA APLIKASI

MYITS URL SHORTENER

Aplikasi MYITS URL SHORTENER yang merupakan aplikasi yang dibangun dari proyek kode sumber terbuka bernama POLR. Dalam aplikasi POLR terdapat fitur yang memungkinkan pengguna untuk login agar setiap data yang dikelola dapat tersimpan dalam basis data yang kemudian dapat digunakan kembali kemudian. Namun, fitur login ini tidak perlu dilakukan lagi ketika terhubung dengan Single Sign On (SSO) MYITS karena data pengguna yang mengakses aplikasi MYITS URL SHORTENER akan diambil berdasarkan data pengguna dari SSO MYITS. Data-data pengguna yang diambil dari MYITS SSO kemudian akan digunakan sebagai acuan data MYITS URL SHORTENER dan disimpan dalam basis data itu sendiri.

Akan tetapi, ketika pengguna melakukan perubahan data pada akun mereka (pada MYITS SSO), maka perubahan data tersebut tidak bisa berubah (tidak dapat ter-refleksi) secara otomatis pada basis data aplikasi MYITS URL SHORTENER sehingga hal ini akan menyebabkan data yang tersimpan setelah terjadi perubahan data pengguna menjadi tidak sama dan tidak konsisten. Salah satu properti yang harus diterapkan dalam basis data adalah konsistensi agar nantinya tidak terjadi kesalahan saat aplikasi telah mencapai tahap produksi. Untuk itu, salah satu strategi yang dapat diterapakan agar konsistensi data dapat terjaga adalah dengan melakukan pembaruan data secara otomatis ketika pengguna melakukan login pada MYITS URL SHORTENER.

(34)

34 5.2. Rumusan Masalah

Berikut adalah rumusan masalah dari kasus ini.

(1) Bagaimana alur proses dalam melakukan pembaruan data pengguna?

(2) Apa saja data yang perlu mendapatkan pembaruan dalam proses ini?

5.3. Isi

Dalam memperbarui data pengguna pada aplikasi MYITS URL SHORTENER terdapat beberapa hal yang perlu diperhatikan yaitu :

1. Atribut data pengguna yang bernilai unik sebagai acuan 2. Atribut data pengguna yang perlu diperbarui yaitu username

dan password

Langkah selanjutnya adalah menambahkan kode program untuk melakukan pembaruan data pengguna ketika pengguna telah sukses login dengan akun miliknya. Dalam proses ini kami tidak melakukan pengecekan apakah data pengguna mengalami perubahan atau tidak, tetapi kami langsung memperbarui data pengguna pada database MYITS URL SHORTENER yang didapat dari MYITS SSO baik data pengguna mengalami perubahan atau tidak. Untuk detail code program yang ditambahkan akan ditampilkan pada bagian selanjutnya.

5.4. Implementasi

Terdapat beberapa data yang diperiksa dan diperbarui jika perlu. Hal ini dilakukan setelah login SSO berhasil dilakukan. Berikut adalah implementasinya.

(35)

35

5.5.1. Mengekstraksi data-data yang dibutuhkan, yakni id SSO, username, role dari SSO, dan group dari SSO.

5.5.2. Memeriksa email. Jika email berbeda, maka data email akan diperbarui.

5.5.3. Memeriksa role pengguna dari SSO apakah merupakan admin atau bukan.

(36)

36

5.5.4. Memeriksa apakah status pengguna merupakan mahasiswa atau non-mahasiswa. Hal ini dilakukan karena terdapat perbedaan perilaku berdasar status (mahasiswa/non-mahasiswa).

(37)

(38)

38

BAB VI

MEMBENAHI TAMPILAN ANTAR MUKA APLIKASI

MYITS URL SHORTENER

Dalam melakukan integrasi antara aplikasi MYITS URL SHORTENER dengan MYITS Single Sign On maka perlu adanya keselarasan tampilan antara beberapa aplikasi yang telah dapat diakses melalui MYITS Single Sign On dengan aplikasi MYITS URL SHORTENER agar pengguna merasa nyaman karena dapat dikatakan semua aplikasi pada MYITS Single Sign On telah berada dalam satu tema. Tampilan antarmuka MYITS URL SHORTENER pada awalnya bernuansa gelap dan tenang yang merupakan tampilan default dari proyek POLR. Berikut adalah tampilan default MYITS URL SHORTENER.

Selain itu, karena aplikasi MYITS URL SHORTENER ini menggunakan bawaan dari polr maka terdapat beberapa fitur yang tidak sesuai dengan kebutuhan ketika dilakukan integrasi terhadap MYITS Single Sign on.

(39)

39 6.2. Rumusan Masalah

Berikut rumusan masalah dari kasus ini.

(1) Pada bagian halaman mana saja yang dibenahi untuk menyesuaikan dengan tema MY ITS SSO ?

(2) Bagaimana proses dalam melakukan pembenahan tampilan antar muka?

6.3. Isi

Dalam proses pembenahan tampilan antar muka ini terdapat beberapa bagian yang dibenahi, yaitu :

1. Penambahan Logo MYITS di halaman utama MYITS URL SHORTENER pada bagian navbar. Dalam proses ini hal yang perlu diperhatikan adalah posisi peletakan logo pada bagian navbar.

2. Menghapus menu ganti password yang terdapat di drop-down menu pada navbar. Hal ini dilakukan karena proses penggantian password hanya melalui MYITS SSO, tidak melalui sub sub aplikasi. Penghapusan menu ini tidak hanya

(40)

40

menghilangkannya pada drop-down menu, tetapi juga ketika diakses melalui url secara langsung juga tidak dapat diakses.

3. Menyesuaikan penggunaan warna pada aplikasi MYITS URL SHORTENER dengan tema yang telah diterapkan pada MYITS SSO.

(41)

41 6.4. Implementasi

6.4.1. Menambahkan logo MYITS URL SHORTENER pada navbar.

6.4.2. Menghapus menu ubah password dari dropdown. Sebelum:

(42)

42

6.4.3. Meghilangkan tab ubah password pada halaman admin dengan cara menghapus bagian kode berikut pada view admin.

6.4.4. Memastikan bahwa fitur ubah password tidak dapat diakses melalui URL secara manual. Hal ini dilakukan dengan menghapus routing berikut pada level server.

6.4.5. Mengubah skema warna tampilan antarmuka MyITS URL SHORTENER. Hal ini dilakukan dengan menggunakan style CSS.

(43)

(44)

(45)

(46)

46

BAB VII

MENGUBAH PREFIKS DOMAIN URL SHORTENER

DAN MEMBEDAKAN PERAN (ROLE) AKUN MYITS

URL SHORTENER ANTARA MAHASISWA DAN

TENAGA DIDIK

Aplikasi MYITS URL SHORTENER yang terintegrasi dengan MYITS Single Sign On akan digunakan hanya untuk kalangan internal kampus ITS, baik itu mahasiswa maupun tenaga pendidik yang berjumlah sekitar 15000 pengguna dengan kebutuhan yang berbeda beda. Oleh karena itu, untuk mengurangi beban akses domain pada aplikasi MYITS URL SHORTENER maka antara mahasiswa dan tenaga pendidik disediakan domain yang berbeda. 7.2. Rumusan Masalah

Berikut rumusan masalah dari kasus ini

(1) Bagaimana alur proses dalam mengubah prefix domain URL SHORTENER pada aplikasi tersebut?

(2) Pada bagian apa saja yang membedakan antara fasilitas antara mahasiswa dan tenaga didik?

(3) Bagaimana alur proses dalam membedakan fasilitas antara mahasiswa dan tenaga didik pada aplikasi tersebut?

7.3. Isi

Dalam penerapannya, aplikasi MYITS URL Shortener ini akan membedakan antara pengguna mahasiswa dan non-mahasiswa. Perbedaan fasilitas yang diterima antara mahasiswa dan tenaga didik adalah pada prefix pada url shortener, sehingga dapat dengan mudah mengenali pengguna url shortener. Pada pengguna mahasiswa, hasil perpendekkan URL akan diimbuhi dengan prefiks “/m/” sehingga menjadi “its.id/m/” lalu dilanjutkan dengan URL pendeknya.

(47)

47

Sedangkan pengguna non-mahasiswa akan mendapat hasil perpendekkan URL normal, yakni “its.id/” tanpa imbuhan apapun.

Untuk menerapkan perbedaan prefix URL ini, diperlukan beberapa penyesuaian dan perubahan pada alur kode. Secara umum, alurnya adalah sebagai berikut.

1. Saat login, status pengguna disimpan dalam session.

2. Proses-proses/operasi yang berkaitan dengan URL akan mengalami tahap pemeriksaan dengan mengacu pada status pengguna.

3. Penambahan prefiks string “/m/” dilakukan jika status pengguna adalah mahasiswa.

Berikut adalah hal-hal yang perlu diperhatikan dalam penyesuaian pembedaan URL.

1. Pada saat pengecekkan ketersediaan URL. 2. Saat pengguna membuat URL baru.

3. Saat pengguna mengakses URL hasil perpendekkan.

4. Tampilan halaman awal yang membedakan pengguna mahasiswa dan non-mahasiswa (tendik).

7.4.1. Mengubah implementasi saat melakukan pengecekkan ketesediaan link (dalam hal ini menggunakan request Ajax). Dapat dilihat pada baris 5 s.d 6.

(48)

48

7.4.2. Bagian selanjutnya adalah mengubah implementasi saat melakukan pembuatan link baru. Terdapat beberapa kasus yang harus disesuaikan.

Pertama adalah kasus jika pengguna tidak menggunakan custom link. Akan diperiksa apakah link yang dimasukkan sudah pernah di-shorten oleh pengguna lain.

(49)

49

Kedua adalah kasus jika pengguna menggunakan custom link. Dalam hal ini, yang dilakukan adalah memeriksa apakah custom link nya sudah pernah digunakan. Tentunya dengan mengacu pada status mahasiswa atau non-mahasiswa.

7.4.3. Penyesuaian lainnya adalah impelementasi untuk generasi hasil shorten acak yang hanya berlaku saat pengguna tidak menggunakan custom link. Perlu disesuaikan dengan menambahkan prefiks “/m/”.

(50)

50

7.4.4. Kemudian implementasi saat mengakses link juga perlu disesuaikan. Dapat dilihat pada baris 4 s.d 9.

7.4.5. Tampilan halaman awal perlu diberikan kondisi berdasarkan pengguna mahasiswa dan non-mahasiswa.

(51)

51

BAB VIII

INTEGRASI APLIKASI SERVICEDESK ITS DENGAN

MYITS SSO

Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) yang sebelumnya bernama LPTSI memiliki beberapa visi dan misi dalam rangka mewujudkan ITS sebagai “World Class Research and Innovative University”. Salah satu misinya adalah Pengembangan & Pemeliharaan Sistem Informasi Terintegrasi menuju ITS in One Hand. Sistem Informasi Terintegrasi dilakukan untuk meminimalisir ancaman peretasan yang selalu menghantui pengguna yang mana ketika sistem informasi yang ada masih terpisah di setiap situs yang berbeda maka pengguna harus merangkai kata sandi yang unik dan kuat di setiap situs yang digunakan.

(1) Apa saja yang dilakukan dalam melakukan integrasi aplikasi SERVICEDESK ITS dengan MYITS SSO?

(2) Alat atau tools apa saja yang digunakan dalam melakukan integrasi aplikasi SERVICEDESK ITS dengan MYITS SSO? (3) Bagaimana prosedur dalam melakukan integrasi aplikasi

SERVICEDESK ITS dengan MYITS SSO? 8.3. Isi

Dalam melakukan integrasi aplikasi SERVICEDESK ITS dengan MYITS SSO, protokol SSO yang digunakan adalah protokol OAuth Open ID. Open ID adalah standar autentikasi terbuka yang diperkenalkan oleh Open ID Foundation. Diperkenalkan pada tahun 2006, dan pada Februari 2014 generasi ketiga Open ID disebut Open

(52)

52

ID Connect (OIDC) diluncurkan. Penyempurnaan ini menambahkan layer autentikasi yang berbasis otorisasi OAuth 2.0, yang dapat digunakan untuk bertukar informasi pengguna menggunakan RESTful HTTP API dengan format JSON.

8.4.1 Membuat controller yang menangani proses login MYITS SSO. Dalam hal ini, aplikasi akan menghubungi server SSO dengan membuat objek OpenIDConnectClient. Proses ini sekaligus menyimpan session aplikasi.

(53)

53

8.4.2 Menambahkan aturan dalam kode yang menyatakan akses login menggunakan MYITS.

8.4.3 Setelah berhasil login MYITS, data-data pengguna akun akan diekstrak dan diambil untuk diproses selanjutnya.

(54)

54

8.4.4 Selanjutnya adalah memproses email pengguna. Akan diambil berdasarkan prioritas email utama lalu email alternatifnya. Jika tidak ada, maka email kosong.

(55)

55

8.4.6 Lalu, menyalin foto profil/avatar dari MYITS ke servicedesk agar bisa ditampilkan pada aplikasi.

8.4.7 Pengguna yang belum pernah login akan didaftarkan pada basis data aplikasi shortener. Jika pernah login, maka akan diperbarui datanya.

(56)

56

8.4.8 Kemudian terakhir adalah menyimpan cookie agar tidak perlu login lagi diwaktu berikutnya.

(57)

57

8.4.9 Berikut adalah kode yang bertugas untuk logout dari akun MYITS.

(58)

58

BAB IX

MELAKUKAN PENYESUAIAN FITUR YANG

TERSEDIA KETIKA PENGGUNA LOGIN

MENGGUNAKAN AKUN MYITS PADA APLIKASI

SERVICEDESK ITS

Aplikasi SERVICEDESK ITS merupakan salah satu aplikasi yang akan diintegrasikan dengan Single Sign On (SSO) myITS, sehingga pengguna dapat login menggunakan akun myITS masing - masing. Dalam proses pengintegrasian aplikasi SERVICEDESK ITS ini diperlukan beberapa penyesuaian antara SERVICEDESK ITS dengan sistem Single Sign On (SSO) myITS, seperti pada menu settings dan profile yang tersedia ketika pengguna login tanpa menggunakan akun myITS tetapi ketika pengguna login menggunakan akun myITS maka menu settings dan profile yang dimanfaatkan untuk menyesuaikan data pengguna tidak perlu tersedia pada aplikasi ini karena fungsi dari dua menu ini telah tersedia pada Single Sign On (SSO) myITS.

(1) Apa saja fitur yang perlu mendapat penyesuaian dalam proses ini?

(2) Bagaimana alur proses dalam melakukan beberapa penyesuaian menu?

9.3. Isi

Dalam melakukan penyesuaian beberapa fitur yang terdapat pada aplikasi SERVICEDESK ITS antara pengguna yang login menggunakan akun myITS dengan akun non myITS terdapat fitur atau menu yang perlu dibedakan, yaitu menu Settings dan Profile.

(59)

59

Kedua menu ini tidak tersedia ketika pengguna login menggunakan akun myITS karena kedua menu ini yang digunakan untuk memperbarui data pribadi pengguna masing – masing telah tersedia pada sistem Single Sign On (SSO) myITS sehingga dapat meningkatkan kepraktisan dalam memproses data.

9.4.1 Melakukan pengecekan proses login yang dilakukan oleh pengguna apakah melalui akun myITS atau tidak untuk menu Settings

(60)

60

9.4.2 Melakukan pengecekan proses login yang dilakukan oleh pengguna apakah melalui akun myITS atau tidak untuk menu Profile

9.4.3 Menghapus menu Settings dan Profile yang tampil di navbar.

(61)

(62)

62

BAB X

KESIMPULAN DAN SARAN

10.1. Kesimpulan

Kesimpulan yang didapat setelah melakukan integrasi aplikasi myITS URL SHORTENER dan SERVICEDESK ITS dengan sistem Single Sign On (SSO) myITS pada kegiatan kerja praktik di Direktorat Pengembangan Teknologi dan Sistem Informasi (DPTSI) Institut Teknologi Sepuluh Nopember (ITS) adalah sebagai berikut. 1. Protokol OpenID Connect yang digunakan untuk melakukan integrasi aplikasi myITS URL SHORTENER dan SERVICEDESK ITS bertujuan untuk memudahkan pengguna ketika login pada aplikasi yang telah memanfaatkan protocol ini sehingga pengguna tidak perlu membuat username dan password baru

2. Dengan melakukan integrasi pada kedua aplikasi ini dapat mempermudah pemrosesan data karena tidak dilakukan pada masing-masing aplikasi yang ada, tetapi hanya dilakukan sekali pada server database backendnya.

3. Protokol yang digunakan dalam melakukan integrasi kedua aplikasi ini adalah OpenID Connect

10.2. Saran

Saran yang penulis berikan untuk pengembangan sistem integrasi dengan memanfaatkan Single Sign On (SSO) myITS yaitu proses integrasi dengan Single Sign On (SSO) myITS agar dilakukan juga terhadap aplikasi lain yang berada di lingkup ITS sehingga semakin memudahkan pengguna baik mahasiswa maupun Tendik ITS ketika login ke aplikasi-aplikasi yang ada di ITS.

(63)

63

DAFTAR PUSTAKA

[1] EllisLab, "CodeIgniter," CodeIgniter Foundation, [Online]. Available: https://codeigniter.com/docs. [Accessed 10 November 2020].

[2] J. McDade, "Lumen," Taylor Otwell, [Online]. Available: https://lumen.laravel.com/docs/8.x. [Accessed 10 November 2020].

[3] MkDocs, "Polr," [Online]. Available: https://docs.polrproject.org/en/latest/. [Accessed 10 November 2020].

[4] [Online]. Available: https://github.com/dptsi/php-openid-connect-client. [Accessed 10 November 2020].

(64)

64

BIODATA PENULIS I

Nama : Bayu Laksana

Tempat, Tanggal Lahir : Bojonegoro, 5 Februari 1999 Jenis Kelamin : Laki-laki

Agama : Islam

Status : Belum Menikah

Alamat Asal : Gg. Citra, Ds. Temayang, Kec. Temayang, Kab. Bojonegoro Alamat Surabaya : -

Telepon : 085850063169

Email : bayu.laksana0502@gmail.com

PENDIDIKAN FORMAL

2017 – sekarang : Mahasiswa S1 Teknik Informatika ITS

2014 – 2017 : SMA Negeri 2 Bojonegoro 2011 – 2014 : SMP Negeri 1 Temayang 2005 – 2011 : SD Negeri 1 Temayang KEMAMPUAN

• Programming (C/C++, Python, Javascript/TS, PHP, Java) • Web Programming (PHP, Javascript/Typescript, HTML,

CSS, ReactJS, jQuery)

• Database Management (MySQL, SQL Server, Oracle) • Software Perkantoran (Ms. Excel, Word, Powerpoint) • Bahasa (Indonesia, Inggris)

AKADEMIS

Kuliah : Departemen Teknik Informatika, Fakultas Teknologi Elektro dan Informatika Cerdas, Institut Teknologi Sepuluh Nopember Surabaya Angkatan : 2017

Semester : 7 (Tujuh)

(65)

65

BIODATA PENULIS II

Nama : Moh. Adam Rahmatullah

Tempat, Tanggal Lahir : Sampang, 08 Maret 2000 Jenis Kelamin : Laki-laki

Agama : Islam

Status : Belum Menikah

Alamat Asal : Jalan Syamsul Arifin No. 91 Kec. Sampang, Kab. Sampang Alamat Surabaya : -

Telepon : 085231093375

Email : moh.adam.83@gmail.com

PENDIDIKAN FORMAL

2017 – sekarang : Mahasiswa S1 Teknik Informatika ITS

2014 – 2017 : SMA Negeri 1 Sampang 2011 – 2014 : SMP Negeri 3 Sampang 2005 – 2011 : SD Negeri Polagan 2 Sampang KEMAMPUAN

• Programming (C/C++, Python, Javascript, PHP) • Web Programming (PHP, Javascript, HTML, CSS) • Database Management (MySQL, SQL Server, Oracle) • Software Perkantoran (Ms. Excel, Word, Powerpoint) • Bahasa (Indonesia, Inggris)

AKADEMIS

Kuliah : Departemen Teknik Informatika, Fakultas Teknologi Elektro dan Informatika Cerdas, Institut Teknologi Sepuluh Nopember Surabaya Angkatan : 2017

Semester : 7 (Tujuh)