DIREKTORAT PENGEMBANGAN TEKNOLOGI DAN SISTEM …

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

Surabaya 2020

2

[Halaman ini sengaja dikosongkan]

3

KERJA PRAKTIK – KI141330




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:



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

Surabaya 2020

4


5

LEMBAR PENGESAHAN

KERJA PRAKTIK




Oleh:



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

SURABAYA, 5 OKTOBER 2020

6


7




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

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

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


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

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.1. Latar Belakang .......................................................... 33

5.2. Rumusan Masalah ..................................................... 34

5.3. Isi ............................................................................. 34

5.4. Implementasi............................................................. 34

BAB VI MEMBENAHI TAMPILAN ANTAR MUKA APLIKASI

MYITS URL SHORTENER..................................................... 38

6.1. Latar Belakang .......................................................... 38

6.2. Rumusan Masalah ..................................................... 39

6.3. Isi ............................................................................. 39

6.4. Implementasi............................................................. 41

BAB VII MENGUBAH PREFIKS DOMAIN URL SHORTENER

DAN MEMBEDAKAN PERAN (ROLE) AKUN MYITS URL

SHORTENER ANTARA MAHASISWA DAN TENAGA DIDIK

............................................................................................... 46

7.1. Latar Belakang .......................................................... 46

7.2. Rumusan Masalah ..................................................... 46

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.2. Rumusan Masalah ...................................................... 51

8.3. Isi ............................................................................. 51

8.4. Implementasi ............................................................. 52

BAB IX MELAKUKAN PENYESUAIAN FITUR YANG

TERSEDIA KETIKA PENGGUNA LOGIN MENGGUNAKAN

AKUN MYITS PADA APLIKASI SERVICEDESK ITS............ 58

9.1. Latar Belakang........................................................... 58

9.2. Rumusan Masalah ...................................................... 58

9.3. Isi ............................................................................. 58

9.4. Implementasi ............................................................. 59

BAB X KESIMPULAN DAN SARAN ..................................... 62

10.1. Kesimpulan ............................................................... 62

10.2. Saran ......................................................................... 62

DAFTAR PUSTAKA ............................................................... 63

BIODATA PENULIS I............................................................. 64

BIODATA PENULIS II ........................................................... 65

14

BAB I

PENDAHULUAN

1.1. Latar Belakang


(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 &


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

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

Jam Kerja : Fleksibel

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

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

6. Saran

Dalam bab ini berisikan saran – saran untuk pengembangan

selanjutnya dari sebuah software atau perangkat lunak atau

proses alur kerja.

19


20

BAB II

PROFIL PERUSAHAAN

2.1. Profil DPTSI ITS


(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

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

4) Peningkatan Layanan Prima berbasis Digital

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.

5) Mengikuti dan mengembangkan teknologi informasi.

23


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

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

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


28

BAB IV

INTEGRASI APLIKASI MYITS URL SHORTENER

DENGAN MYITS SSO

4.1. Latar Belakang


(DPTSI) yang memiliki beberapa visi dan misi dalam rangka

mewujudkan ITS sebagai “World Class Research and Innovative

University”. Salah satu misinya adalah Pengembangan &


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

(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

4.4.2. Melakukan login MYITS SSO. Dalam hal ini, aplikasi akan

menghubungi server SSO dengan membuat objek

OpenIDConnectClient.

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

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

BAB V

MEMPERBARUI DATA AKUN PENGGUNA SECARA

OTOMATIS KETIKA LOGIN PADA APLIKASI

MYITS URL SHORTENER

5.1. Latar Belakang

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


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

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

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

BAB VI

MEMBENAHI TAMPILAN ANTAR MUKA APLIKASI

MYITS URL SHORTENER

6.1. Latar Belakang

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


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

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

6.4. Implementasi

6.4.1. Menambahkan logo MYITS URL SHORTENER pada

navbar.

6.4.2. Menghapus menu ubah password dari dropdown.

Sebelum:

Sesudah:

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

BAB VII

MENGUBAH PREFIKS DOMAIN URL SHORTENER

DAN MEMBEDAKAN PERAN (ROLE) AKUN MYITS

URL SHORTENER ANTARA MAHASISWA DAN

TENAGA DIDIK

7.1. Latar Belakang

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.


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

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. Implementasi

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

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

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

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

BAB VIII

INTEGRASI APLIKASI SERVICEDESK ITS DENGAN

MYITS SSO

8.1. Latar Belakang


(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

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. Implementasi

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

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

8.4.4 Selanjutnya adalah memproses email pengguna. Akan

diambil berdasarkan prioritas email utama lalu email

alternatifnya. Jika tidak ada, maka email kosong.

8.4.5 Mengatur format first name dan last name.

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

8.4.8 Kemudian terakhir adalah menyimpan cookie agar tidak

perlu login lagi diwaktu berikutnya.

57

8.4.9 Berikut adalah kode yang bertugas untuk logout dari akun

MYITS.

58

BAB IX

MELAKUKAN PENYESUAIAN FITUR YANG

TERSEDIA KETIKA PENGGUNA LOGIN

MENGGUNAKAN AKUN MYITS PADA APLIKASI

SERVICEDESK ITS

9.1. Latar Belakang

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

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. Implementasi

9.4.1 Melakukan pengecekan proses login yang dilakukan oleh

pengguna apakah melalui akun myITS atau tidak untuk

menu Settings

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

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

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

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 : [email protected]

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)

IPK : 3.91 (Semester 6)

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 : [email protected]

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) IPK : 3.71 (Semester 6)

Documents

DIREKTORAT PENGEMBANGAN TEKNOLOGI DAN SISTEM …