PEMBUATAN SISTEM INFORMASI PENERAPAN GENERATOR CSS3 BERBASIS FRAMEWORK CODEIGNITER Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh : SARTIKA APRIYANI NIM. M3113132 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2016
ii
iii
ABSTRACT Sartika Apriyani, 2016, INFORMATION SYSTEM GENERATOR CSS3 BASED FRAMEWORK CODEIGNITER. Informatics Engineering, DIII Computer Program, Mathematics and Natural Sciences Faculty, Sebelas Maret University. Generator CSS3 style can be seen the full results of its implementation can be found at page website complete with a display full of design and style that has been prearranged by the user. Generator CSS3 is a feature related to web design, we need more knowledge to make its features and implementation process in an information system. Generator CSS3 information system application built using the PHP programming language which is implemented using CodeIgniter framework and also using MySql database that can be helped by tools phpmyadmin as a database management tool. With this information system implementation generator CSS3 is expected to become a tool that is good enough to be able to add to the beauty of the web design of an information system. Keywords: Systems, Information Systems, Generator CSS3 iv
ABSTRAK Sartika Apriyani, 2016, PEMBUATAN SISTEM INFORMASI PENERAPAN GENERATOR CSS3 BERBASIS FRAMEWORK CODEIGNITER Program Diploma III Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta. Pembuatan style dari generator CSS3 dapat dilihat hasil implementasinya dapat dilihat penuh dihalaman website penuh yang lengkap dengan tampilan desain dan style yang telah diatur sebelumnya oleh user. Generator CSS3 merupakan fitur yang berhubungan dengan web desain, maka dibutuhkan pengetahuan lebih untuk membuat fitur-fiturnya dan proses penerapannya pada sebuah sistem informasi. Sistem informasi penerapan generator CSS3 dibangun menggunakan Bahasa pemograman PHP yang diimplementasikan menggunakan framework codeigniter dan juga menggunakan database MySql yang dapat dibantu dengan tools PhpMyAdmin sebagi tool pengelola basis data. Dengan adanya sistem informasi penerapan generator CSS3 ini diharapkan dapat menjadi sarana atau alat yang cukup baik agar dapat menambah keindahan web desain pada sebuah sistem informasi. Kata kunci : Sistem, Sistem Informasi, Generator CSS3 v
MOTTO Keberhasilan adalah hasil akhir setiap usaha, tetapi keberhasilan hanya dapat diraih dengan kemauan yang kuat entah bagaimana caranya dan bagaimana kita melewatinya yakinlah bahwa semua kesulitan akan berlalu (Sartika Apriyani) "Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah " (Thomas Alfa Edison) vi
HALAMAN PERSEMBAHAN Tugas Akhir ini penulis persembahkan kepada : 1. Keluarga yang telah menjadi motivasi dan inspirasi dan tiada henti memberikan dukungan do'a kepadaku. 2. Dosen Pembimbing, Bapak Firma Sahrul Bahtiar, S.Kom., M.Eng. yang tak pernah lelah dan sabar memberikan bimbingan dan arahan kepadaku. 3. Dosen dan Staf Pengajar Program DIII Teknik Informatika UNS. 4. Sahabatku Ulfah Faridah yang senantiasa menjadi penyemangat dan menemani disetiap hariku. 5. Teman-teman D3 Teknik Informatika UNS, khususnya kelas TIC yang selalu membantu, berbagi keceriaan dan melewati setiap suka dan duka selama kuliah. 6. Para pembaca yang budiman. vii
KATA PENGANTAR Puji syukur kehadirat Allah SWT yang telah menanamkan keimanan, kesabaran dan keistiqomahan dalam hati, Rabb semesta alam. Karena hanya atas segala kuasa dan ridho-nya penulis dapat menyelesaikan Laporan Tugas Akhir yang berjudul PEMBUATAN SISTEM INFORMASI PENERAPAN GENERATOR CSS3 BERBASIS FRAMEWORK CODEIGNITER. Laporan Tugas Akhir ini disusun untuk memenuhi syarat dalam memeperoleh gelar Amd.) Program Studi Diploma III Teknik Informatika MIPA Universitas Sebelas Maret. Dalam melakukan penelitian dan penyusunan Tugas Akhir ini penulis telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak. Penulis ingin mengucapkan terima kasih tak terhingga kepada: 1. Prof. Ir. Ari Handono Ramelan, M.Sc.(Hons)., Ph.D. selaku Pimpinan Fakultas MIPA Universitas Sebelas Maret yang telah memberikan izin kepada penulis untuk belajar. 2. Bapak Abdul Aziz, S.Kom., M.Cs. selaku Ketua Program DIII Teknik Informatika Universitas Sebelas Maret yang telah memberikan izin kepada penulis untuk belajar.. 3. Bapak Firma Sahrul Bahtiar, S.Kom., M.Eng. selaku pembimbing, yang telah dengan penuh ketulusan dan kesabaran memberikan ilmu serta bimbingan terbaik kepada penulis. 4. Para Dosen Program Studi Diploma III Teknik Informatika MIPA Universitas Sebelas Maret yang telah memberikan bekal ilmu kepada penulis. 5. Teman-teman angkatan 2013 dan khususnya mahasiswa Diploma III Teknik Informatika C, terima kasih atas bantuan dan kerjasamanya selama perkuliahan ini. 6. Kepada semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah banyak membantu dalam penyusunan laporan ini. viii
Penulis menyadari sepenuhnya bahwa laporan Tugas Akhir ini masih jauh dari sempurna. Untuk itu, semua jenis saran, kritik dan masukkan yang bersifat membangun sangat diharapkan. Akhir kata, semoga tulisan ini dapat memberikan manfaat dan memberikan wawasan tambahan terutama bagi para pembaca dan bagi penulis sendiri. Surakarta, 15 April 2015 Sartika Apriyani ix
DAFTAR ISI HALAMAN PERSETUJUAN... ii HALAMAN PENGESAHAN... iii ABSTRACT... iv ABSTRAK... v MOTTO... vi HALAMAN PERSEMBAHAN... vii KATA PENGANTAR... viii DAFTAR ISI... x DAFTAR TABEL... xii DAFTAR GAMBAR... xiii BAB I... 1 PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Tujuan Kegiatan... 2 1.4 Manfaat... 2 1.5 Batasan Masalah... 3 1.6 Metodologi Penelitian... 3 1.7 Sistematika Penulisan... 4 BAB II... 6 LANDASAN TEORI... 6 2.1 Tinjauan Pustaka... 6 2.2 Landasan Teori... 7 2.2.1 Sistem Informasi... 7 2.2.2 Basis Data... 8 2.2.3 Hypertext Preprocessor (PHP)... 8 2.2.4 Model View Control (MVC)... 9 2.2.5 Unified Modeling Language (UML)... 10 2.2.6 Database MySQL... 16 2.2.7 Framework Code Igniter... 17 2.2.8 JQuery... 18 2.2.9 HTML (Hypertext markup Language)... 18 x
BAB III... 19 ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM... 19 3.1 Alat dan Bahan... 19 3.1.1 Alat... 19 3.1.2 Bahan... 21 3.2 Jalannya Penelitian... 21 3.3 Analisa Kebutuhan Sistem... 22 3.3.1 Alur Project... 22 3.3.2 Kebutuhan Fungsional... 23 3.3.3 Kebutuhan Non Fungsional... 24 3.4 Perancangan Sistem... 25 3.4.1 Diagram Use Case... 25 3.4.2 Activity diagram... 27 3.4.3 Sequence Diagram... 43 3.4.4 Class Diagram... 48 3.5 Perancangan Basis Data... 50 3.5.1 ERD (Entitas Relationship Diagram)... 50 3.5.2 Relasi Antar Tabel... 50 3.5.3 Tabel Fisik... 51 3.6 Perancangan Antar Muka (User Interface)... 55 BAB IV... 63 IMPLEMENTASI DAN ANALISA... 63 4.1 Deskripsi Sistem... 63 4.2 Implementasi Sistem... 63 4.2.1 Halaman Admin... 63 4.2.2 Halaman User/Member... 68 4.3 Pengujian Sistem... 71 BAB V... 75 KESIMPULAN DAN SARAN... 75 5.1 Kesimpulan... 75 5.2 Saran... 75 DAFTAR PUSTAKA... 76 xi
DAFTAR TABEL Tabel 2.1 Simbol Use Case Diagram... 11 Tabel 2.2 Simbol Sequence Diagram... 13 Tabel 2.3 Komponen-komponen ERD... 15 Tabel 3.1 Tabel Kebutuhan Fungsional... 23 Tabel 3.2 Tabel Admin... 51 Tabel 3.3 Tabel User... 51 Tabel 3.4 Tabel About... 52 Tabel 3.5 Tabel Komentar... 52 Tabel 3.6 Tabel Kode... 53 Tabel 3.7 Tabel Rating... 53 Tabel 3.8 Tabel Berita... 54 Tabel 3.9 Tabel Member... 54 Tabel 4.1 Tabel Pengujian Login dan Logout... 71 Tabel 4.2 Tabel Pengujian Data Master... 72 Tabel 4.3 Tabel Pengujian Implementasi Demo... 74 xii
DAFTAR GAMBAR Gambar 2.1 Notasi Class Diagram... 15 Gambar 3.1 Skema Penelitian... 21 Gambar 3.2 Use case diagram Admin... 26 Gambar 3.3 Usecase Diagram User/Member... 27 Gambar 3.4 Activity diagram Login Admin... 28 Gambar 3.5 Activity diagram Register Admin... 28 Gambar 3.6 Activity diagram mengubah data admin... 29 Gambar 3.7 Activity diagram menghapus data admin... 30 Gambar 3.8 Activity diagram melihat detail data admin... 30 Gambar 3.9 Activity diagram menghapus data member... 31 Gambar 3.10 Activity diagram melihat detail data member... 31 Gambar 3.11 Activity diagram menambah data berita... 32 Gambar 3.12 Activity diagram mengubah data berita... 33 Gambar 3.13 Activity diagram menghapus berita... 34 Gambar 3.14 Activity diagram melihat detail data berita... 34 Gambar 3.15 Activity diagram balas komentar... 35 Gambar 3.16 Activity diagram menghapus Komentar... 35 Gambar 3.17 Activity diagram memeberi rating... 36 Gambar 3.18 Activity diagram terapkan kode... 36 Gambar 3.19 Activity diagram melihat detail kode... 37 Gambar 3.20 Activity diagram login user... 37 Gambar 3.21 Activity diagram Register User... 38 Gambar 3.22 Activity diagram memberi rating... 39 Gambar 3.23 Activity diagram mengubah data user... 40 Gambar 3.24 Activity diagram view berita... 41 Gambar 3.25 Activity diagram copy kode... 41 Gambar 3.26 Activity diagram view komentar... 42 Gambar 3.27 Activity diagram menambah komentar... 42 Gambar 3.28 Sequence Diagram Login... 43 xiii
Gambar 3.29 Sequence Diagram Register User... 44 Gambar 3.30 Sequence Diagram Update Data Member... 44 Gambar 3.31 Sequence Diagram View Berita... 45 Gambar 3.32 Sequence Diagram View Komentar... 45 Gambar 3.33 Sequence Diagram Input Komentar... 46 Gambar 3.34 Sequence Diagram Memberi Rating... 46 Gambar 3.35 Sequence Diagram kelola admin... 47 Gambar 3.36 Sequence Diagram kelola berita... 47 Gambar 3.37 Sequence Diagram kelola kode... 48 Gambar 3.38 Class Diagram... 49 Gambar 3.39 Entitas Relationship Diagram... 50 Gambar 3.40 Relasi Antar Tabel... 50 Gambar 3.41 Rancangan Halaman Awal... 55 Gambar 3.42 Rancangan Halaman Login... 56 Gambar 3.43 Rancangan Halaman Dashboard Admin... 57 Gambar 3.44 Rancangan Halaman member... 58 Gambar 3.45 Rancangan Halaman Berita... 59 Gambar 3.46 Rancangan Generator CSS3 Button... 60 Gambar 3.47 Rancangan Halaman About... 61 Gambar 3.48 Rancangan Halaman Demo... 62 Gambar 4.1 Halaman Login... 64 Gambar 4.2 Halaman Masuk sebagai Admin... 65 Gambar 4.3 Halaman Kelola data kode Admin... 65 Gambar 4.4 Halaman kelola data berita... 66 Gambar 4.5 Halaman edit profil admin... 67 Gambar 4.6 Halaman generator CSS3... 67 Gambar 4.7 Halaman Index User/Member... 68 Gambar 4.8 Halaman Preview Kode... 69 Gambar 4.9 Halaman Demo... 69 Gambar 4.10 Halaman Show Kode Demo... 70 xiv