KUSTOM MENGGUNAKAN OPEN GRAPH PROTOCOL PADA STUDI KASUS WEB JURUSAN TEKNIK INFORMATIKA

  W ;/--n

  TUGAS AKHIR – KI1502

RANCANG BANGUN WEB KUSTOM

MENGGUNAKAN OPEN GRAPH PROTOCOL

PADA STUDI KASUS WEB JURUSAN TEKNIK

  INFORMATIKA NUGROHO WICAKSONO NRP 5113100171 Dosen Pembimbing Sarwosri, S.Kom., MT. Dwi Sunaryono, S.Kom., M.Kom. JURUSAN TEKNIK INFORMATIKA

  [Halaman ini sengaja dikosongkan]

  TUGAS AKHIR – KI1502

RANCANG BANGUN WEB KUSTOM MENGGUNAKAN

OPEN GRAPH PROTOCOL PADA STUDI KASUS WEB

JURUSAN TEKNIK INFORMATIKA NUGROHO WICAKSONO NRP 5113100171 Dosen Pembimbing Sarwosri, S.Kom., MT. Dwi Sunaryono, S.Kom., M.Kom. JURUSAN TEKNIK INFORMATIKA Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember Surabaya 2018

  

[Halaman ini sengaja dikosongkan]

  UNDERGRADUATE THESES – KI1502

DEVELOPMENT OF CUSTOM WEBSITE USING

OPEN GRAPH PROTOCOL ON CASE STUDY

WEBSITE DEPARTMENT OF

  INFORMATICS ENGINEERING NUGROHO WICAKSONO NRP 5113100171 Supervisors Sarwosri, S.Kom., MT. Dwi Sunaryono, S.Kom., M.Kom. DEPARTMENT OF INFORMATICS Faculty of Information Technology Institut Teknologi Sepuluh Nopember Surabaya 2018

  

[Halaman ini sengaja dikosongkan]

  LEMBAR PENGESAHAN RANCANG BANGUN WEB KUSTOM MENGGUNAKAN OPEN GRAPH PROTOCOL PADA STUDI KASUS WEB JURUSAN TEKNIK

INFORMATIKA TUGAS AKHIR

  Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer pada

  Bidang Studi Rekayasa Perangkat Lunak Program Studi S-1 Jurusan Teknik Informatika

  Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember

  Oleh

NUGROHO WICAKSONO NRP: 5113 100 171

  Disetujui oleh Dosen Pembimbing Tugas Akhir: Sarwosri, S.Kom., MT. ..................... (NIP 197608092001122001) (Pembimbing 1) .......................... Dwi Sunaryono, S.Kom., M.Kom. (NIP 197205281997021001) (Pembimbing 2)

SURABAYA JANUARI, 2018

  

[Halaman ini sengaja dikosongkan]

  

RANCANG BANGUN WEB KUSTOM

MENGGUNAKAN OPEN GRAPH PROTOCOL

PADA STUDI KASUS WEB JURUSAN TEKNIK

  

INFORMATIKA

Nama Mahasiswa : Nugroho Wicaksono NRP : 5113 100 171 Jurusan : Teknik Informatika Fit-ITS Dosen Pembimbing 1 : Sarwosri, S.Kom., MT.

  

Dosen Pembimbing 2 : Dwi Sunaryono, S.Kom., M.Kom.

  Abstrak Pengenalan institusi melalui media internet seperti

situs web dan sudah menjadi hal yang penting pada zaman

ini. Informasi yang disampaikan melalui situs web lebih

lengkap dan efisien dibanding media lain seperti televisi,

radio, majalah, atau koran. Bahkan, saat ini hampir setiap

orang dapat terhubung dengan media internet.

  Situs web jurusan Teknik Informatika sudah berjalan

selama bertahun-tahun, namun terdapat beberapa hal yang

perlu diperbaiki. Hal pertama yaitu performa kecepatan. Situs

web perlu cepat agar pembaca tidak menunggu lama untuk

mendapat informasi. Hal kedua yaitu banyaknya pembaca.

Konten situs web yang bagus tidak akan berguna tanpa

adanya pembaca. Salah satu cara untuk menjangkau pembaca

yang lebih banyak adalah dengan membagikannya di media

sosial seperti Facebook dan Twitter yang memiliki banyak

pengguna. Dalam pembagiannya, sekadar mencantumkan link

menuju situs web saja tidak cukup. Optimasi representasi situs

web di media sosial diperlukan agar pengguna tertarik untuk

mengunjungi link situs web tersebut. Hal ketiga yaitu

kemudahan pembuatan artikel. Artikel seperti info lomba dan

beasiswa membutuhkan penerbitan yang cepat.

  Hasil yang diharapkan dari pengerjaan tugas akhir

ini adalah berupa aplikasi situs web kustom jurusan Teknik

Informatika yang cepat, memudahkan penulis dalam

menyalurkan artikel dan menerapkan Open Graph Protocol

untuk memperbaiki representasi konten situs web di media

sosial.

  Kata kunci: web kustom, open graph protocol

  

DEVELOPMENT OF CUSTOM WEBSITE USING

OPEN GRAPH PROTOCOL ON CASE STUDY

WESITE DEPARTMENT OF INFORMATICS

ENGINEERING

Student Name : Nugroho Wicaksono NRP : 5113 100 171 Major : Informatics Department FTIf – ITS Advisor I : Sarwosri, S.Kom., MT. Advisor II : Dwi Sunaryono, S.Kom., MKom. Abstract

  The introduction of institutions through the internet

media such as websites has become an important thing at this

time. Information submitted through the website is more

complete and efficient than other media such as television,

radio, magazines, or newspapers. In fact, today almost

everyone can connect with the internet media.

  The website of Informatics Engineering has been

running for years, but there are some things that need to be

revised. The first thing is speed performance. Website needs to

be quick so readers do not wait long for information. The

second thing is the number of readers. Good content will be

useless without the reader. One way to reach more readers is

to share them on social media. When sharing a website link,

simply listing link to website is not enough. Website

representation optimization in social media is required for

users to be interested visiting the website. The third thing is

the ease of article creation. Articles such as race and

scholarships info require quick publishing.

  The purpose of this web application development as

the final task is a custom website for Informatics Engineering

which is fast, easier for authors to distribute articles and

applying the Open Graph Protocol to improve the

  

Keywords: custom website, open graph protocol

KATA PENGANTAR

  Alhamdulillahirabbil’alamin, segala puji bagi Allah SWT, yang telah melimpahkan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul

  

“RANCANG BANGUN WEB KUSTOM

MENGGUNAKAN OPEN GRAPH PROTOCOL PADA

STUDI KASUS WEB JURUSAN TEKNIK

INFORMATIKA”.

  Pengerjaan tugas akhir ini merupakan suatu kesempatan yang sangat baik bagi penulis. Dengan pengerjaan tugas akhir ini, penulis bisa belajar lebih banyak untuk memperdalam dan meningkatkan apa yang telah didapatkan penulis selama menempuh perkuliahan di Teknik Informatika ITS. Selesainya tugas akhir ini tidak lepas dari bantuan dan dukungan beberapa pihak, sehingga pada kesempatan ini penulis mengucapkan syukur dan terima kasih kepada: 1. Allah SWT dan Nabi Muhammad SAW.

2. Ibu, Ayah dan keluarga, yang selalu mendoakan penulis dan mendukung setiap pilihan yang penulis ambil.

  3. Ibu Sarwosri, S.Kom., M.T. selaku pembimbing I yang selalu memberikan motivasi dan membimbing penulis selama pengerjaan tugas akhir.

  4. Bapak Dwi Sunaryono S.Kom., M.Kom. selaku pembimbing II yang selama ini telah membantu dan membimbing penulis selama pengerjaan tugas akhir.

  5. Bapak Dony Kusuma Hadi, S.E. yang selama ini telah membantu dan membimbing penulis selama pengerjaan

  6. Bapak Dr.Eng Darlis Herumurti, S.Kom.,M.Kom. selaku Kepala Jurusan Teknik Informatika ITS, Bapak Dr.

  Radityo Anggoro, S.Kom.,M.Sc. selaku koordinator TA, dan segenap dosen Teknik Informatika yang telah banyak memberikan ilmu kepada penulis.

  7. Teman-teman angkatan 2013 yang telah membantu, berbagi ilmu, menjaga kebersamaan, dan memberi motivasi kepada penulis, serta adik-adik angkatan 2014 dan 2015 yang membuat penulis untuk selalu belajar.

  8. Teman-teman SMAN 1 Malang angkatan 2013 yang menginspirasi dan memberi motivasi.

  9. Serta semua pihak yang yang telah turut membantu penulis dalam menyelesaikan tugas akhir ini. Penulis menyadari bahwa tugas akhir ini masih memiliki banyak kekurangan, sehingga dengan kerendahan hati, penulis mengharapkan kritik dan saran dari pembaca untuk perbaikan ke depannya.

  Surabaya, Januari 2018 Nugroho Wicaksono

  

DAFTAR ISI

LEMBAR PENGESAHAN ................................................... v

Abstrak ................................................................................. vii

Abstract .................................................................................. ix

KATA PENGANTAR ........................................................... xi

DAFTAR ISI ....................................................................... xiii

DAFTAR GAMBAR ........................................................... xix

DAFTAR TABEL ............................................................. xxiv

DAFTAR KODE SUMBER ............................................ xxvii

  1 BAB I PENDAHULUAN ....................................... 29

  1.1. Latar Belakang .......................................................... 29

  1.2. Rumusan Masalah ..................................................... 30

  1.3. Batasan Masalah ....................................................... 30

  1.4. Tujuan ....................................................................... 30

  1.5. Manfaat ..................................................................... 30

  1.6. Metodologi Pembuatan Tugas Akhir ........................ 31

  1.7. Sistematika Penulisan Laporan Tugas Akhir ............ 33

  2 BAB II TINJAUAN PUSTAKA ............................ 35

  2.1 Kustom ...................................................................... 35

  2.2 Website ...................................................................... 35

  2.3 Jurusan Teknik Informatika ITS ............................... 36

  2.4 Situs Web Jurusan Teknik Informatika ..................... 37

  2.5 WordPress ................................................................. 38

  2.7 Open Graph Protocol ................................................ 40

  3.1.3 Spesifikasi Kebutuhan Perangkat Lunak .................. 55

  4.2 Implementasi Antarmuka Pengguna ......................... 90

  4.1 Lingkungan Implementasi Perangkat Lunak ............ 89

  BAB IV IMPLEMENTASI .................................... 89

  3.2.5 Perancangan Antarmuka Pengguna .......................... 73 4.

  3.2.4 Perancangan Basis Data ............................................ 67

  3.2.3 Perancangan Diagram Kelas ..................................... 67

  3.2.2 Perancangan Arsitektur Sistem ................................. 67

  3.2.1 Lingkungan Perancangan Perangkat Lunak .............. 66

  3.2 Perancangan .............................................................. 66

  3.1.2 Deskripsi Umum Sistem ........................................... 54

  2.8 Rendering Halaman Web .......................................... 41

  3.1.1 Analisis Permasalahan .............................................. 53

  3.1 Analisis ..................................................................... 53

  3 BAB III ANALISIS DAN PERANCANGAN SISTEM ................................................................................ 53

  2.15 MySQL ..................................................................... 51

  2.14 Sequelize ................................................................... 51

  2.13 Object-Relational Mapping (ORM) .......................... 50

  2.12 GraphQL ................................................................... 46

  2.11 Webpack .................................................................... 45

  2.10 React-Helmet ............................................................ 45

  2.9 React .......................................................................... 44

  4.2.1. Implementasi Antarmuka Komponen Login ............. 90

  4.2.3. Implementasi Antarmuka Komponen Header .......... 90

  4.2.4. Implementasi Antarmuka Komponen Sider .............. 90

  4.2.5. Implementasi Antarmuka Komponen Konten .......... 90

  4.2.6. Implementasi Antarmuka Container Utama ............. 91

  4.2.7. Implementasi Antarmuka Halaman Beranda ............ 91

  4.2.8. Implementasi Antarmuka Halaman Daftar Artikel ... 91

  4.2.9. Implementasi Antarmuka Halaman Artikel .............. 91

  4.2.10. Implementasi Antarmuka Halaman Artikel Saya ..... 92

  4.2.11. Implementasi Antarmuka Halaman Buat Artikel ...... 92

  4.2.12. Implementasi Antarmuka Halaman Ubah Artikel .... 92

  4.3 Implementasi Kasus Penggunaan .............................. 98

  4.3.1 Implementasi Kasus Penggunaan Melihat Artikel .... 98

  4.3.2 Implementasi Kasus Penggunaan Melihat Daftar Artikel ................................................................................... 99

  4.3.3 Implementasi Kasus Penggunaan Melihat Daftar Artikel Berdasarkan Kategori .............................................. 101

  4.3.4 Implementasi Kasus Penggunaan Membagikan Artikel ................................................................................. 101

  4.3.5 Implementasi Kasus Penggunaan Melihat Daftar Usulan Artikel ...................................................................... 101

  4.3.6 Implementasi Kasus Penggunaan Menambah Usulan Artikel ................................................................................. 103

  4.3.7 Implementasi Kasus Penggunaan Memperbarui Usulan Artikel ...................................................................... 104

  4.3.8 Implementasi Kasus Penggunaan Menghapus Usulan Artikel ................................................................................. 105

  4.4.1. Implementasi Open Graph Protocol pada Halaman Beranda ................................................................................ 106

  4.4.2. Implementasi Open Graph Protocol pada Halaman Daftar Artikel ....................................................................... 107

  4.4.3. Implementasi Open Graph Protocol pada Halaman Artikel ................................................................................. 108

  5 BAB V PENGUJIAN DAN EVALUASI ............. 111

  5.1 Lingkungan Pengujian ............................................ 111

  5.2 Pengujian Fungsionalitas ........................................ 111

  5.2.1. Pengujian Fungsionalitas Melihat Artikel ............... 112

  5.2.2. Pengujian Fungsionalitas Melihat Daftar Artikel ... 113

  5.2.3. Pengujian Fungsionalitas Melihat Daftar Artikel Berdasarkan Kategori ........................................................... 114

  5.2.4. Pengujian Fungsionalitas Membagikan Artikel ...... 115

  5.2.5. Pengujian Fungsionalitas Melihat Daftar Usulan Artikel ................................................................................. 116

  5.2.6. Pengujian Fungsionalitas Menambah Usulan Artikel ................................................................................. 117

  5.2.7. Pengujian Fungsionalitas Memperbarui Usulan Artikel ................................................................................. 118

  5.2.8. Pengujian Fungsionalitas Menghapus Usulan Artikel ................................................................................. 120

  5.3 Pengujian Non-Fungsionalitas ................................ 127

  5.4.1. Pengujian Representasi ........................................... 127

  5.4.2. Pengujian Performa Kecepatan ............................... 136

  5.4 Kesimpulan Pengujian ............................................ 141

  5.4.1. Kecepatan ................................................................ 141

  5.4.3. Fungsionalitas ......................................................... 142

  6 BAB VI KESIMPULAN DAN SARAN .............. 143

  6.1 Kesimpulan ............................................................. 143

  6.2 Saran ........................................................................ 143

  

DAFTAR PUSTAKA ......................................................... 145

LAMPIRAN ........................................................................ 147

BIODATA PENULIS ........................................................ 161

  

[Halaman ini sengaja dikosongkan]

  

DAFTAR GAMBAR

Gambar 2.1 Perbedaan CMS Tradisional dengan Headless

  CMS ....................................................................................... 40

Gambar 2.2 Representasi Web yang menggunakan Open

  Graph Protocol di Media Sosial ............................................. 41

Gambar 2.3 Cara Kerja Client Side Rendering ...................... 42Gambar 2.4 Cara Kerja Server Side Rendering ..................... 43Gambar 2.5 Cara Kerja Isomorphic Rendering ..................... 43Gambar 2.6 Komponen React ................................................ 45Gambar 2.7 Cara Kerja Webpack .......................................... 46Gambar 2.8 Response Data GraphQL .................................... 48Gambar 2.9 Perbandingan Request Data pada REST dan

  GraphQL ................................................................................ 48

Gambar 2.10 Sistem Type pada GraphQL ............................. 49Gambar 2.11 Pembaruan GraphQL API ................................ 49Gambar 2.12 GraphiQL ......................................................... 50Gambar 3.1 Arsitektur Sistem ................................................ 55Gambar 3.2 Diagram Kasus Penggunaan .............................. 58Gambar 3.3 Class Diagram .................................................... 70Gambar 3.4 Conceptual Data Modeling ................................ 71Gambar 3.5 Physical Data Modeling ..................................... 72Gambar 3.6 Rancangan Antarmuka Komponen Login untuk

  

Reader .................................................................................... 84

Gambar 3.7 Rancangan Antarmuka Komponen User untuk

  

Contributor ............................................................................ 84

Gambar 3.8 Rancangan Antarmuka Komponen Header untuk

  

Reader pada Ukuran Perangkat Desktop ............................... 84

Gambar 3.9 Rancangan Antarmuka Komponen Header untuk

  

Contributor pada Ukuran Perangkat Desktop ........................ 84

Gambar 3.10 Rancangan Antarmuka Komponen Header untuk

  

Reader pada Ukuran Perangkat Bergerak .............................. 84

Gambar 3.11 Rancangan Antarmuka Komponen Header untuk

  

Contributor pada Ukuran Perangkat Bergerak ...................... 84

Gambar 3.12 Rancangan Antarmuka Komponen Sider pada

  Ukuran Perangkat Bergerak ................................................... 84

Gambar 3.13 Rancangan Antarmuka Komponen Konten pada

  Ukuran Desktop ..................................................................... 85

Gambar 3.14 Rancangan Antarmuka Komponen Konten pada

  Ukuran Perangkat Bergerak ................................................... 85

Gambar 3.15 Rancangan Antarmuka Container Utama ........ 86Gambar 3.16 Rancangan Antarmuka Halaman Beranda ....... 86Gambar 3.17 Rancangan Antarmuka Halaman Daftar Artikel

  ................................................................................................ 86

Gambar 3.18 Rancangan Antarmuka Halaman Kategori ...... 87Gambar 3.19 Rancangan Antarmuka Halaman Laman ......... 87Gambar 3.20 Rancangan Antarmuka Halaman Artikel Saya 87Gambar 3.21 Rancangan Antarmuka Halaman Buat Artikel . 88Gambar 3.22 Rancangan Antarmuka Halaman Ubah Artikel 88Gambar 4.1 Implementasi Antarmuka Komponen Login ...... 92Gambar 4.2 Implementasi Antarmuka Komponen User ....... 93Gambar 4.3 Implementasi Antarmuka Komponen Header untuk Reader pada Ukuran Desktop ...................................... 93Gambar 4.4 Implementasi Antarmuka Komponen Header untuk Contributor pada Ukuran Desktop .............................. 93Gambar 4.5 Implementasi Antarmuka Komponen Header untuk Reader pada Ukuran Perangkat Bergerak .................... 93Gambar 4.6 Implementasi Antarmuka Komponen Header untuk Contributor pada Ukuran Perangkat Bergerak ............ 93Gambar 4.7 Implementasi Antarmuka Komponen Sider ....... 94Gambar 4.8 Implementasi Antarmuka Komponen Konten pada

  Ukuran Desktop ..................................................................... 94

Gambar 4.9 Implementasi Antarmuka Komponen Konten pada

  Ukuran Perangkat Bergerak ................................................... 95

Gambar 4.10 Implementasi Antarmuka Container Utama .... 95Gambar 4.11 Implementasi Antarmuka Halaman Beranda ... 96Gambar 4.12 Implementasi Antarmuka Halaman Daftar

  Artikel .................................................................................... 96

Gambar 4.14 Implementasi Antarmuka Halaman Artikel Saya

  ................................................................................................ 97

Gambar 4.15 Implementasi Antarmuka Halaman Buat Artikel

  ................................................................................................ 98

Gambar 4.16 Implementasi Antarmuka Halaman Ubah Artikel

  ................................................................................................ 98

Gambar 5.1 Menu Navigasi ................................................. 121Gambar 5.2 Halaman Artikel ............................................... 122Gambar 5.3 Halaman Daftar Artikel .................................... 122Gambar 5.4 Daftar Kategori ................................................ 123Gambar 5.5 Halaman Daftar Artikel Berdasarkan Kategori 123Gambar 5.6 Halaman Konfirmasi untuk Membagikan Laman atau Artikel di Facebook ...................................................... 124Gambar 5.7 Halaman Konfirmasi untuk Membagikan Laman atau Artikel di Google Plus .................................................. 124Gambar 5.8 Navigasi Tambahan untuk Contributor ........... 124Gambar 5.9 Halaman Artikel Saya ...................................... 125Gambar 5.10 Halaman Buat Artikel .................................... 125Gambar 5.11 Notifikasi Penambahan Berhasil .................... 125Gambar 5.12 Halaman Ubah Artikel ................................... 126Gambar 5.13 Notifikasi Pembaharuan Berhasil ................... 126Gambar 5.14 Popconfirm Penghapusan Usulan Artikel ...... 126Gambar 5.15 Notifikasi Penghapusan Berhasil ................... 126Gambar 5.16 Representasi Halaman Beranda Web Saat Ini

  (if.its.ac.id) di Facebook ...................................................... 129

Gambar 5.17 Representasi Halaman Beranda Web Rancangan

  (beta.if.its.ac.id) di Facebook ............................................... 129

Gambar 5.18 Representasi Halaman Beranda Web Saat Ini

  (if.its.ac.id) di Twitter .......................................................... 130

Gambar 5.19 Representasi Halaman Beranda Web Rancangan

  (beta.if.its.ac.id) di Twitter .................................................. 130

Gambar 5.20 Representasi Halaman Beranda Web Saat Ini

  (if.its.ac.id) di Google Plus .................................................. 130

Gambar 5.21 Representasi Halaman Beranda Web RancanganGambar 5.22 Representasi Halaman Artikel Web Saat Ini

  (if.its.ac.id) di Facebook ...................................................... 131

Gambar 5.23 Representasi Halaman Artikel Web Rancangan

  (beta.if.its.ac.id) di Facebook ............................................... 132

Gambar 5.24 Representasi Halaman Artikel Web Saat Ini

  (if.its.ac.id) di Twitter .......................................................... 132

Gambar 5.25 Representasi Halaman Artikel Web Rancangan

  (beta.if.its.ac.id) di Twitter .................................................. 132

Gambar 5.26 Representasi Halaman Artikel Web Saat Ini

  (if.its.ac.id) di Google Plus .................................................. 133

Gambar 5.27 Representasi Halaman Artikel Web Rancangan

  (beta.if.its.ac.id) di Google Plus ........................................... 133

Gambar 5.28 Representasi Halaman Daftar Artikel Web Saat

  Ini (if.its.ac.id) di Facebook ................................................. 134

Gambar 5.29 Representasi Halaman Daftar Artikel Web

  Rancangan (beta.if.its.ac.id) di Facebook ............................ 134

Gambar 5.30 Representasi Halaman Daftar Artikel Web Saat

  Ini (if.its.ac.id) di Twitter ..................................................... 135

Gambar 5.31 Representasi Halaman Daftar Artikel Web

  Rancangan (beta.if.its.ac.id) di Twitter ................................ 135

Gambar 5.32 Representasi Halaman Daftar Artikel Web Saat

  Ini (if.its.ac.id) di Google Plus ............................................. 135

Gambar 5.33 Representasi Halaman Daftar Artikel Web

  Rancangan (beta.if.its.ac.id) di Google Plus ........................ 136

Gambar 5.34 Chrome DevTools .......................................... 136Gambar 5.35 Waktu Konten Dapat Dilihat Setelah Menekan

  Tombol Reload ..................................................................... 137

Gambar 5.36 Waktu Link Menuju Halaman Beranda Ditekan

  .............................................................................................. 139

Gambar 5.37 Waktu Konten Dapat Dilihat Setelah Link

  Menuju Halaman Beranda Ditekan ...................................... 139

Gambar 0.1 Diagram Aktivitas UC-01 ................................ 147Gambar 0.2 Diagram Aktivitas UC-02 ................................ 148Gambar 0.3 Diagram Aktivitas UC-03 ................................ 148Gambar 0.5 Diagram Aktivitas UC-05 ................................ 149Gambar 0.6 Diagram Aktivitas UC-06 ................................ 150Gambar 0.7 Diagram Aktivitas UC-07 ................................ 151Gambar 0.8 Diagram Aktivitas UC-08 ................................ 152Gambar 0.9 Diagram Sekuens UC-01 ................................. 153Gambar 0.10 Diagram Sekuens UC-02 ............................... 154Gambar 0.11 Diagram Sekuens UC-03 ............................... 155Gambar 0.12 Diagram Sekuens UC-04 ............................... 156Gambar 0.13 Diagram Sekuens UC-05 ............................... 157Gambar 0.14 Diagram Sekuens UC-06 ............................... 158Gambar 0.15 Diagram Sekuens UC-07 ............................... 159Gambar 0.16 Diagram Sekuens UC-08 ............................... 160

  

[Halaman ini sengaja dikosongkan]

  

DAFTAR TABEL

Tabel 3.1 Kebutuhan Fungsional ........................................... 56Tabel 3.2 Kualitas Perangkat Lunak ...................................... 56Tabel 3.3 Kasus Penggunaan ................................................. 57Tabel 3.4 Spesifikasi Kasus Penggunaan UC-01 ................... 58Tabel 3.5 Spesifikasi Kasus Penggunaan UC-02 ................... 59Tabel 3.6 Spesifikasi Kasus Penggunaan UC-03 ................... 60Tabel 3.7 Spesifikasi Kasus Penggunaan UC-04 ................... 61Tabel 3.8 Spesifikasi Kasus Penggunaan UC-05 ................... 62Tabel 3.9 Spesifikasi Kasus Penggunaan UC-06 ................... 62Tabel 3.10 Spesifikasi Kasus Penggunaan UC-07 ................. 63Tabel 3.11 Spesifikasi Kasus Penggunaan UC-08 ................. 65Tabel 3.12 Lingkungan Perancangan Perangkat Lunak ........ 66Tabel 3.13 Atribut Antarmuka Komponen Login untuk Reader

  ................................................................................................ 73

Tabel 3.14 Atribut Antarmuka Komponen User untuk

  

Contributor ............................................................................ 74

Tabel 3.15 Atribut Antarmuka Komponen Header pada

  Ukuran Desktop ..................................................................... 75

Tabel 3.16 Atribut Antarmuka Komponen Sider pada Ukuran

  Perangkat Bergerak ................................................................ 76

Tabel 3.17 Atribut Antarmuka Komponen Konten ............... 77Tabel 3.18 Atribut Antarmuka Container Utama .................. 77Tabel 3.19 Atribut Antarmuka Halaman Beranda ................. 78Tabel 3.20 Atribut Antarmuka Halaman Daftar Artikel ........ 79Tabel 3.21 Atribut Antarmuka Halaman Artikel ................... 80Tabel 3.22 Atribut Antarmuka Halaman Artikel Saya .......... 80Tabel 3.23 Atribut Antarmuka Halaman Buat Artikel ........... 82Tabel 3.24 Atribut Antarmuka Halaman Ubah Artikel ......... 83Tabel 4.1 Lingkungan Implementasi Perangkat Lunak ......... 89Tabel 4.2 Penjelasan Kode Sumber 4.1 ................................. 99Tabel 4.3 Penjelasan Kode Sumber 4.2 ............................... 100Tabel 4.4 Penjelasan Kode Sumber 4.3 ............................... 101Tabel 4.6 Penjelasan Kode Sumber 4.5 ............................... 104Tabel 4.7 Penjelasan Kode Sumber 4.6 ............................... 105Tabel 4.8 Penjelasan Kode Sumber 4.7 ............................... 106Tabel 4.9 Penjelasan Kode Sumber 4.8 ............................... 108Tabel 4.10 Penjelasan Kode Sumber 4.9 ............................. 109Tabel 5.1 Lingkungan Pengujian Fungsionalitas Perangkat

  Lunak ................................................................................... 111

Tabel 5.2 Skenario Pengujian Fungsionalitas Melihat Artikel

  .............................................................................................. 112

Tabel 5.3 Skenario Pengujian Fungsionalitas Melihat Daftar

  Artikel .................................................................................. 113

Tabel 5.4 Skenario Pengujian Fungsionalitas Melihat Daftar

  Artikel Berdasarkan Kategori .............................................. 114

Tabel 5.5 Skenario Pengujian Fungsionalitas Membagikan

  Artikel .................................................................................. 115

Tabel 5.6 Skenario Pengujian Fungsionalitas Melihat Daftar

  Usulan Artikel ...................................................................... 116

Tabel 5.7 Skenario Pengujian Fungsionalitas Menambah

  Usulan Artikel ...................................................................... 117

Tabel 5.8 Skenario Pengujian Fungsionalitas Memperbarui

  Usulan Artikel ...................................................................... 118

Tabel 5.9 Skenario Pengujian Fungsionalitas Menghapus

  Usulan Artikel ...................................................................... 120

Tabel 5.10 Pengujian Waktu Muat Awal Web Saat Ini

  (if.its.ac.id) ........................................................................... 137

Tabel 5.11 Pengujian Waktu Muat Awal Web Rancangan

  (beta.if.its.ac.id) ................................................................... 138

Tabel 5.12 Pengujian Waktu Respon Web Saat Ini (if.its.ac.id)

  .............................................................................................. 140

Tabel 5.13 Pengujian Waktu Respon Web Rancangan

  (beta.if.its.ac.id) ................................................................... 140

  

DAFTAR KODE SUMBER

  Kode Sumber 4.1 Halaman Artikel ........................................ 99 Kode Sumber 4.2 Halaman Daftar Artikel .......................... 100 Kode Sumber 4.3 Tombol Bagikan ..................................... 101 Kode Sumber 4.4 Halaman Artikel Saya ............................. 102 Kode Sumber 4.5 Halaman Buat Artikel ............................. 103 Kode Sumber 4.6 Halaman Ubah Artikel ............................ 105 Kode Sumber 4.7 Implementasi Open Graph Protocol pada Halaman Beranda ................................................................. 106 Kode Sumber 4.8 Halaman Ubah Artikel ............................ 108 Kode Sumber 4.9 Implementasi Open Graph Protocol pada Halaman Artikel ................................................................... 109

  

[Halaman ini sengaja dikosongkan]

1 PENDAHULUAN

  Bab ini menjelaskan garis besar tugas akhir yang meliputi latar belakang, tujuan, rumusan, batasan permasalahan, metodologi pembuatan tugas akhir, dan sistematika penulisan.

1.1. Latar Belakang

  Pengenalan institusi melalui media internet seperti situs web dan sudah menjadi hal yang penting pada zaman ini. Informasi yang disampaikan melalui situs web lebih lengkap dan efisien dibanding media lain seperti televisi, radio, majalah, atau koran. Bahkan, saat ini hampir setiap orang dapat terhubung dengan media internet.

  Situs web jurusan Teknik Informatika sudah berjalan selama bertahun-tahun, namun terdapat beberapa hal yang perlu diperbaiki. Hal pertama yaitu performa kecepatan. Situs web perlu cepat agar pembaca tidak menunggu lama untuk mendapat informasi. Hal kedua yaitu banyaknya pembaca. Konten situs web yang bagus tidak akan berguna tanpa adanya pembaca. Salah satu cara untuk menjangkau pembaca yang lebih banyak adalah dengan membagikannya di media sosial seperti Facebook dan Twitter yang memiliki banyak pengguna. Dalam pembagiannya, sekadar mencantumkan link menuju situs web saja tidak cukup. Optimasi representasi situs web di media sosial diperlukan agar pengguna tertarik untuk mengunjungi link situs web tersebut. Hal ketiga yaitu kemudahan pembuatan artikel. Artikel seperti info lomba dan beasiswa membutuhkan penerbitan yang cepat.

  Hasil yang diharapkan dari pengerjaan tugas akhir ini adalah berupa aplikasi situs web kustom jurusan Teknik Informatika yang cepat, memudahkan penulis dalam menyalurkan artikel dan menerapkan Open Graph Protocol untuk memperbaiki representasi konten situs web di media sosial.

1.2. Rumusan Masalah

  Rumusan masalah yang diangkat dalam Tugas Akhir ini dapat dipaparkan sebagai berikut:

  1. Bagaimana cara merancang situs web kustom yang cepat?

  2. Bagaimana cara merancang situs web kustom menggunakan Open Graph Protocol?

  3. Bagaimana rancangan fungsionalitas situs web kustom jurusan Teknik Informatika?

1.3. Batasan Masalah

  Permasalahan yang dibahas dalam Tugas Akhir ini memiliki beberapa batasan, yaitu sebagai berikut:

  1. Content Management System menggunakan WordPress.

  2. Pengguna pada situs web adalah reader dan contributor.

  3. Aktifitas editor dan administrator menggunakan WordPress.

1.4. Tujuan

  Tujuan dari pembuatan Tugas Akhir ini dapat dipaparkan sebagai berikut:

  1. Merancang situs web kustom yang cepat.

  2. Merancang situs web kustom menggunakan Open Graph Protocol.

  3. Merancang fungsionalitas situs web kustom jurusan Teknik Informatika

1.5. Manfaat

  Manfaat dari hasil pembuatan Tugas Akhir ini adalah sebagai berikut:

  1. Memperbaiki desain situs web jurusan Teknik Informatika menjadi lebih cepat.

  2. Memperbaiki representasi situs web jurusan Teknik Informatika di media sosial.

  3. Mempermudah pembuatan artikel pada situs web jurusan

  31

  4. Dapat menjadi referensi bagi penelitian Tugas Akhir selanjutnya

1.6. Metodologi Pembuatan Tugas Akhir

  Tahapan-tahapan yang dilakukan dalam pengerjaan tugas akhir ini adalah sebagai berikut:

  1. Penyusunan proposal tugas akhir.

  Tahap pertama dalam proses pengerjaan Tugas Akhir ini adalah menyusun proposal Tugas Akhir. Pada proposal Tugas Akhir ini diajukan rancang bangun web kustom dengan Open Graph Protocol pada studi kasus jurusan Teknik Informatika. Proposal Tugas Akhir berisi tentang deskripsi pendahuluan dari Tugas Akhir yang akan dibuat. Pendahuluan ini terdiri dari hal yang latar belakang diajukannya usulan Tugas Akhir, rumusan masalah yang diangkat, batasan masalah untuk Tugas Akhir, tujuan dari pembuatan Tugas Akhir serta manfaat dari hasil pembuatan Tugas Akhir. Dijabarkan pula tinjauan pustaka yang digunakan sebagai referensi pendukung pembuatan Tugas Akhir. Sub bab metodologi berisi penjelasan mengenai tahapan penyusunan Tugas Akhir mulai dari penyusunan proposal hingga penyusunan buku Tugas Akhir. Terdapat pula sub bab jadwal kegiatan yang menjelaskan jadwal pengerjaan Tugas Akhir.

  2. Studi literatur Studi literatur yang dilakukan pada perancangan aplikasi situs web sebagai pengerjaan tugas akhir ini adalah mengenai Open Graph Protocol. Studi literatur mengenai Open Graph Protocol diambil dari internet.

  3. Analisis dan desain perangkat lunak Tahap ini meliputi perumusan kebutuhan fungsional, aktivitas, diagram kelas, diagram sekuens, rancangan antarmuka pengguna untuk reader dan contributor, serta pembuatan rancangan API dan basis data.

4. Implementasi perangkat lunak

  Aplikasi ini diimplementasikan dengan menggunakan kakas bantu:

  1. Bahasa pemrograman Javascript.

  2. Node.js v7.6++ 3. Text Editor Atom.

  4. Database MySQL.

  5. Pengujian dan evaluasi Pengujian ini dilakukan berupa pengujian fungsionalitas dan kegunaan situs web secara langsung oleh pengguna.

  Pengujian fungsionalitas dilakukan dengan model blackbox. Pengujian kemudahan situs web dilakukan dengan pengujian langsung kepada pengguna situs web dan mengambil hasil dari kuisioner yang disebarkan kepada pengguna situs web.

  6. Penyusunan buku tugas akhir Pada tahap ini dilakukan penyusunan laporan yang menjelaskan dasar teori dan metode yang digunakan dalam tugas akhir ini serta hasil dari implementasi aplikasi perangkat lunak yang telah dibuat. Sistematika penulisan buku tugas akhir secara garis besar antara lain:

1. Pendahuluan

  a. Latar Belakang

  b. Rumusan Masalah

  c. Batasan Masalah

  d. Tujuan

  e. Manfaat Metodologi Pembuatan Tugas Akhir f.

  g. Sistematika Penulisan Laporan Tugas Akhir

  33

  3. Analisis dan Perancangan Sistem

  4. Pengujian dan Evaluasi

  5. Kesimpulan dan Saran

  6. Daftar Pustaka

1.7. Sistematika Penulisan Laporan Tugas Akhir

  Buku tugas akhir ini bertujuan untuk mendapatkan gambaran dari pengerjaan tugas akhir ini. Selain itu, diharapkan dapat berguna untuk pembaca yang tertarik untuk melakukan pengembangan lebih lanjut. Secara garis besar, buku tugas akhir terdiri atas beberapa bagian seperti berikut ini.

  Bab I Pendahuluan Bab yang berisi mengenai latar belakang, rumusan

  masalah, batasan masalah, tujuan, dan manfaat dari pembuatan tugas akhir. Selain itu metodologi yang digunakan dan sistematika penulisan laporan akhir juga merupakan bagian dari bab ini.

  Bab II Tinjauan Pustaka Bab ini berisi penjelasan secara detail mengenai dasar-

  dasar penunjang dan teori-teori yang digunakan untuk mendukung pembuatan tugas akhir ini.

  Bab III Analisis dan Perancangan Sistem Bab ini berisi tentang analisis permasalahan, deskripsi

  umum sistem, spesifikasi kebutuhan perangkat lunak, lingkungan perancangan, perancangan arsitektur sitem, diagram kelas, dan struktur data.

  Bab IV Implementasi Bab ini membahas implementasi dari desain yang telah

  dibuat pada bab sebelumnya. Penjelasan berupa kode

  Bab V Pengujian dan Evaluasi Bab ini menjelaskan kemampuan perangkat lunak

  dengan melakukan pengujian kebenaran dan pengujian kinerja dari sistem yang telah dibuat.

  Bab VI Kesimpulan dan Saran Bab ini menjelaskan kemampuan perangkat lunak

  dengan melakukan pengujian kebenaran dan pengujian kinerja dari sistem yang telah dibuat.

2 TINJAUAN PUSTAKA

  Bab ini menjelaskan teori-teori yang berkaitan dengan pembangunan aplikasi situs web jurusan Teknik Informatika yang diajukan untuk tugas akhir ini. Penjelasan ini bertujuan untuk memberikan gambaran secara umum terhadap perangkat lunak yang dibuat dan berguna sebagai penunjang dalam pengembangan perangkat lunak.

  2.1 Kustom

  Kustom atau dalam bahasa Inggris yaitu custom. Kustom memiliki banyak makna. Arti dari kata kustom akan berbeda jika diletakkan pada konteks yang berbeda. Bila diletakkan pada konteks pembuatan, kustom berarti dibuat sesuai dengan pesanan khusus atau spesifikasi tertentu [1].

  2.2 Website Website atau situs web adalah halaman informasi yang

  disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Situs web bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pengunjung melalui browser [2].

  Situs web memiliki 2 macam desain, yaitu web template dan web kustom. Web template adalah web yang sudah dirancang sebelumnya, atau web yang dapat digunakan siapapun untuk memasukkan konten teks dan gambar mereka ke dalam membuat situs web. Biasanya dibuat dengan kode HTML dan CSS. Web template memungkinkan seseorang untuk membuat situs web tanpa harus menyewa pengembang atau perancang web profesional, walaupun banyak pengembang menggunakan template situs untuk membuat situs untuk klien mereka. Hal ini terdaftar di mesin pencari sehingga pengguna dapat mencari produk atau layanan spesifiknya [3]. Web template memiliki beberapa kelebihan, yaitu:

  1. Tidak membutuhkan biaya yang mahal untuk menyewa pengembang. Biaya digunakan untuk membeli template.

  2. Pengembangan lebih cepat, karena hanya tinggal mengganti beberapa teks dan gambar. Namun web template juga memiliki beberapa kekurangan, yaitu: