SKRIPSI ANALISIS PERBANDINGAN FRAMEWORK CSS MATERIALIZE DAN SEMANTIC-UI PADA FRONT END WEBSITE PENDAFTARAN MAHASISWA BARU PADA

(1)

SKRIPSI

ANALISIS PERBANDINGAN FRAMEWORK CSS MATERIALIZE DAN SEMANTIC-UI PADA FRONT END WEBSITE PENDAFTARAN

MAHASISWA BARU PADA

UTM (UNIVERSITAS TEKNOLOGI MATARAM)

INDRA JAYA KUSUMA 175410075

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM

YOGYAKARTA 2020

(2)

i SKRIPSI

Diajukan sebagai salah satu syarat untuk menyelesaikan studi jenjang strata satu (S1) Program Studi Teknik Informatika

Sekolah Tinggi Manajemen Informatika dan Komputer Akakom

Yogyakarta

Disusun Oleh INDRA JAYA KUSUMA

175410075

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AKAKOM

YOGYAKARTA 2020

(3)

ii

HALAMAN PERSETUJUAN

Judul : Analisis perbandingan framework css Materialize dan Semantic-Ui pada Front end website pendaftaran

Mahasiswa Baru Pada Universitas Teknologi Mat aram

Nama : Indra Jaya Kusuma

No. Mhs : 175410075

Jurusan : Teknik Informatika

Jenjang : Strata Satu (S1)

Tahun : 2020

Telah diperiksa dan disetujui Yogyakarta,……….

Mengetahui Dosen Pembimbing

Edi Iskandar,S.T., M.Cs

(4)

iii

HALAMAN PENGESAHAN

SKRIPSI

Telah dipertahankan di depan Dewan Penguji Skripsi dan dinyatakan diterima untuk memenuhi sebagai syarat guna memperoleh Gelar Sarjana Komputer

Sekolah Tinggi Manajemen Informatika dan Komputer Yogyakarta

Yogyakarta,………

Mengesahkan

Dewan Penguji Tanda Tangan

1. Edi Iskandar, S.T., M.Cs. ………..

2. Badiyanto, S.Kom., M.Kom. ………..

3. Sumiyatun, S.Kom., M.Kom. ………..

Mengetahui

Ketua Program Studi Teknik Informatika

Dini Fakta Sari, S.T., M.T.

(5)

iv

HALAMAN PERSEMBAHAN

Begitu banyak perjuangan dan pengorbanan untuk membuat karya yang sederhana ini. Karya tulis ini saya persembahkan kepada :

 Allah SWT. Alhadulillahirabbil’almin, atas segala limpahan rahmat dan karunia-NYA atas kuasa-NYA memberikan pertolongan hingga karya tulis ini mampu saya selesaikan, tiada daya upaya atas kehendak-Nya Semoga karya ini menjadi suatu bentuk ibadah dan mamfaat. Aaminn…

 Rasulullah SAW, yang menjadi suri tauladan dan panutan hingga akhir hayat nanti.

 Kedua orang tua saya Bapak baharudin dan Ibu Kustiati yang merawat saya sejak kecil, dan selalu memberikan semangat serta doa untuk segera menyelesaikan karya tulis ini.

 Sahabat – sahabat karya SIXMAN, kalianlah tempat berbagi cerita canda dan tawa disela – sela beratnya perjuangan mendapatkan gelar Sarjana Komputer. Semoga persahabatan ini akan terus sampai kapanpun. Aaminn..

 Pacarku, Erline yang tak pernah lelah untuk memberikan semangat di saat keadaan sedang terpuruk dan saling mengingatkan untuk terus berjuang dalam menggapai mempi – mimpi besar.

 Dan semua pihak yang tidak dapat saya sebutkan satu persatu.

(6)

v MOTTO

“Tidak ada kesuksesan yang bisa dicapai seperti membalikkan telapak tangan Tidak ada keberhasilan tanpa kerja keras, keuletan, kegigihan dan kedisiplinan.”

(Chairul Tanjung).

“Barang siapa yang menghendaki kehidupan dunia maka wajib baginya memiliki ilmu, dan barang siapa yang menghendaki kehidupan akherat, maka wajib baginya memiliki ilmu, dan barang siapa yang menghendaki keduanya maka wajib baginya memiliki ilmu”. (HR. Turmudzi).

“Kerendahan hati membuka pintu keilmuan, kemudian rezeki”. (Jaya Setyabudi).

“Jangan biarkan orang lain membentuk makna suksesmu, karena dirimu sendiri yang tau makna sukses sejatimu. Orang sukses adalah orang yang merdeka dari penilaian orang lain”. (Jaya Setyabudi).

(7)

vi INTISARI

Saat ini telah banyak bermunculan framework PHP yang kemudian menjadi kendala tersendiri bagi developer web untuk memilihnya. Framework yang cukup populer dan banyak digunakan di antaranya adalah framework Materialize dan framework semantic ui. Sehingga penelitian ini difokuskan untuk menganalisa perbandingan antara framework Materialize dan framework semantic ui.

Dalam penelitian ini terdapat beberapa parameter perbandingan yang di gunakan dalam melakukan analisis, seperti perbandingan implementasi kedua framework dari sisi Integerasi( konfigurasi pada backend di dokumentasi pada tabel perbandingan tentang dukungan instalasi melalui CDN, File Arsip, dan Dependency Manager yang membandingkan mengenai ketersedia Fitur – fitur yang memiliki oleh masing – masing framework. Berikutnya parameter perbandingan performa aplikasi yang di lihat dari hasil kedua framework menggunakan Google Light House dan LambdaTest.

Kesimpulan dari penelitian ini adalah kedua framework memiliki metode Integerasi yang sudah cukup lengkap, Namun Materialize lebih unggul di karenakan mendukung bower sedangkan untuk semantic ui memiliki ketersedian startr-template yang lebih banyak yaitu 9 starter template

Kata Kunci : Perbandingan, SemanticUI CSS, Materialize CSS.

(8)

vii

KATA PENGANTAR

Bismillahirrahmanirrahim

Assalamu’alaikum warahmatullahi wabarakatuh

Alhamdulillah segala puji syukur kami panjatkan kehadirat Allah SWT, karena limpahan rahmat serta hidayah-nya penulis dapat menyelesaikan Skripsi ini yang berjudul “Analis Perbandingan Framework CSS Materialize dan Semantic UI Pada Front End Website Pendaftaran Mahasiswa Baru Pada UTM (Universita Teknologi Mataram)”. Skripsi ini di susun sebagai syarat untuk menyelesaikan studi jenjang strata satu (S1) pada Program Studi Teknik Informatika STMIK AKAKOM Yogyakarta.

Dalam penyusunan Skripsi ini penulis banyak mendapatkan saran, dorongan, bimbingan serta keterangan – keterangan dan berbagai pihak yang merupakan pengalaman yang tidak dapat diukur secara materi. Oleh karena itu dengan segala hormat dan keredahan hati perkenankanlah penulis mengucapkan terimakasih kepada 1. Bapak Totok suprawoto, Ir., M.T. selaku ketua Sekolah Tinggi Manajemen

Informatika dan Komputer AKAKOM Yogyakarta.

2. Ibu Dini Fakta Sari, S.T, M.T. selaku Ketua Program Studi Teknik Informatika 3. Bapak Edi Iskandar, S.T., M.Cs. selaku Dosen Pembimbing Skripsi

4. Bapak Badiyanto, S.Kom., M.Kom. dan Ibu Sumiyatun, S.Kom., M.Cs. selaku Dosen Penguji

(9)

viii

5. Keluarga serta teman – teman tercinta yang telah membantu dengan doa dan dukungannya

6. Semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah terlibat banyak membantu sehingga skripsi ini dapat diselesaikan

Dalam penyusunan ini, penulis menyadari masih banyak terdapat kekurangan baik yang di sengaja maupun yang tidak di sengaja, dikarenakan keterbatasan ilmu pengetahuan dan wawasan serta pengalaman yang penulis miliki. Untuk itu penulis mohon maaf atas segala kekurangan tersebut dan tidak menutup diri terhadap segala saran dan kritik serta masukan yang bersifat konstruktif bagi diri penulis.

Akhir kata semoga dapat bermamfaat bagi penulis sendiri, institusi pendidikan dan masyarakat luas. Aaminn.

Wassalamu’alaikum warahmatullahi wabarakatuh.

Yogyakarta,...2020

Penulis

(10)

ix DAFTAR ISI

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ... iii

HALAMAN PERSEMBAHAN... iv

MOTTO... v

INTISARI ... vi

KATA PENGANTAR ... vii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xii

DAFTAR TABEL ... xv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 2

1.3 Ruang Lingkup ... 3

1.4 Tujuan Penelitian ... 4

1.5 Mamfaat Penelitian ... 4

(11)

x

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI ... 5

2.1 Tinjauan Pustaka ... 5

2.2 Dasar Teori ... 6

2.2.1 Semantic-UI CSS Framework ... 6

2.2.2 Materialize CSS Framework ... 6

2.2.3 HTML ... 7

2.2.4 CSS ... 7

2.2.5 PHP ... 8

BAB III METODE PENELITIAN... 9

3.1 Bahan/Data ... 9

3.2 Peralatan ... 9

3.2.1 Kebutuhan Perangkat Keras ... 9

3.2.2 Kebutuhan Perangkat Lunak ... 9

3.3 Prosedur Pengumpulan Data ... 10

3.4 Analisis Kebutuhan Sistem ... 13

3.4.1 Kebutuhan Input Sistem ... 13

3.4.2 Kebutuhan Output ... 13

3.4.3 Kebutuhan Fungsional Sistem ... 14

(12)

xi

3.5 Perancangan Sistem ... 14

3.5.1 Arsitektur Sistem ... 14

3.5.2 Rancangan Data ... 15

3.5.3 Rancangan Antar Muka ... 15

BAB IV IMPLEMENTASI PEMBAHASAN SISTEM ... 19

4.1 Implementasi Sistem ... 19

4.2 Integerasi Framework Semantic UI dan Materialize ... 19

4.2.1 Integrasi Framework Semantic Ui dan Materialize ... 19

4.2.2 Implementasi Framework ... 24

4.3 Pembahasan Sistem/Pungujian ... 39

4.3.1 Ketersedian Metode Integerasi ... 40

4.3.2 Responsive Web Design ... 42

4.3.3 Cross Browser compatibility ... 44

BAB V PENUTUP ... 47

5.1 Kesimpulan ... 47

5.2 Saran ... 47

DAFTAR PUSTAKA ... 48 LAMPIRAN

(13)

xii

DAFTAR GAMBAR

Gambar 3.1 Arsistektur Sistem ... 15

Gambar 3.2 Rancangan Basis Data ... 15

Gambar 3.3 Halaman Utama Aplikasi Pendaftaran ... 16

Gambar 3.4 Konten Sekunder ... 16

Gambar 3.5 Form Pendaftaran ... 17

Gambar 3.6 Form Login ... 17

Gambar 3.7 Tabel Data Pendaftar ... 18

Gambar 4.1 Struktur Folder Aplikasi ... 21

Gambar 4.2 File Arsip Semantic UI CSS... 21

Gambar 4.3 Strukur folder SemanticUI ... 22

Gambar 4.4 load kompomen antarmuka ... 22

Gambar 4.5 File Arsip MaterializeCSS ... 23

Gambar 4.6 Struktur Folder MaterializeCSS ... 23

Gambar 4.7 Menghubungkan MaterializeCSS ... 24

Gambar 4.8 Penggunaan kompomen antarmuka Button SemanticUI ... 25

Gambar 4.9 Grid System Semantic UI 5/5... 25

Gambar 4.10 Row Pada Semantic UI ... 26

(14)

xiii

Gambar 4.11 Kode Sumber Menu Navigasi ... 27

Gambar 4.12 Menu Pada Desktop View ... 27

Gambar 4.13 Menu Pada Mobile View... 28

Gambar 4.14 Penggunaan Button SemanticUI ... 28

Gambar 4.15 Kode sumber Button daftar pada form pendaftaran ... 28

Gambar 4.16 Grid System MaterializeCSS ... 32

Gambar 4.17 Kompomen Antarmuka Badge ... 33

Gambar 4.18 Kode Sumber Bagde Kompomen ... 33

Gambar 4.19 Kompomen Antarmuka Button ... 33

Gambar 4.20 Kode Sumber Button ... 33

Gambar 4.21 Images di dalam sebuah Card Kompomen ... 34

Gambar 4.22 Kode Sumber Card ... 34

Gambar 4.23 Collection Tampilan Biaya Kuliah ... 35

Gambar 4.24 Kode Sumber Colletion ... 35

Gambar 4.25 Footer ... 36

Gambar 4.26 Kode Sumber Footer ... 36

Gambar 4.27 Icon pada form login ... 37

Gambar 4.28 kode sumber icon ... 37

(15)

xiv

Gambar 4.29 Bilah nagivasi MaterializeCSS... 38

Gambar 4.30 Kode sumber bilah navigasi ... 38

Gambar 4.31 Sidebar menu tampilan mobile ... 39

Gambar 4.32 kode sumber sidebar menu ... 39

(16)

xv

DAFTAR TABEL

Tabel 2.1 Tinjauan Pustaka ... 5

Tabel 3.1 Parameter Pengujian ... 10

Tabel 3.2 Contoh Tabel Perbadingan Metode Integerasi ... 13

Tabel 4.1 Ketersediaan Integerasi Framework... 40

Tabel 4.2 Perbandingan Ukuran ... 41