PEMBUATAN SISTEM INFORMASI PENERAPAN GENERATOR CSS3 BERBASIS FRAMEWORK CODEIGNITER

Transkripsi

1 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. M PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2016

2 ii

3 iii

4 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

5 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

6 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

7 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

8 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

9 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

10 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 Latar Belakang Rumusan Masalah Tujuan Kegiatan Manfaat Batasan Masalah Metodologi Penelitian Sistematika Penulisan... 4 BAB II... 6 LANDASAN TEORI Tinjauan Pustaka Landasan Teori Sistem Informasi Basis Data Hypertext Preprocessor (PHP) Model View Control (MVC) Unified Modeling Language (UML) Database MySQL Framework Code Igniter JQuery HTML (Hypertext markup Language) x

11 BAB III ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM Alat dan Bahan Alat Bahan Jalannya Penelitian Analisa Kebutuhan Sistem Alur Project Kebutuhan Fungsional Kebutuhan Non Fungsional Perancangan Sistem Diagram Use Case Activity diagram Sequence Diagram Class Diagram Perancangan Basis Data ERD (Entitas Relationship Diagram) Relasi Antar Tabel Tabel Fisik Perancangan Antar Muka (User Interface) BAB IV IMPLEMENTASI DAN ANALISA Deskripsi Sistem Implementasi Sistem Halaman Admin Halaman User/Member Pengujian Sistem BAB V KESIMPULAN DAN SARAN Kesimpulan Saran DAFTAR PUSTAKA xi

12 DAFTAR TABEL Tabel 2.1 Simbol Use Case Diagram Tabel 2.2 Simbol Sequence Diagram Tabel 2.3 Komponen-komponen ERD Tabel 3.1 Tabel Kebutuhan Fungsional Tabel 3.2 Tabel Admin Tabel 3.3 Tabel User Tabel 3.4 Tabel About Tabel 3.5 Tabel Komentar Tabel 3.6 Tabel Kode Tabel 3.7 Tabel Rating Tabel 3.8 Tabel Berita Tabel 3.9 Tabel Member Tabel 4.1 Tabel Pengujian Login dan Logout Tabel 4.2 Tabel Pengujian Data Master Tabel 4.3 Tabel Pengujian Implementasi Demo xii

13 DAFTAR GAMBAR Gambar 2.1 Notasi Class Diagram Gambar 3.1 Skema Penelitian Gambar 3.2 Use case diagram Admin Gambar 3.3 Usecase Diagram User/Member Gambar 3.4 Activity diagram Login Admin Gambar 3.5 Activity diagram Register Admin Gambar 3.6 Activity diagram mengubah data admin Gambar 3.7 Activity diagram menghapus data admin Gambar 3.8 Activity diagram melihat detail data admin Gambar 3.9 Activity diagram menghapus data member Gambar 3.10 Activity diagram melihat detail data member Gambar 3.11 Activity diagram menambah data berita Gambar 3.12 Activity diagram mengubah data berita Gambar 3.13 Activity diagram menghapus berita Gambar 3.14 Activity diagram melihat detail data berita Gambar 3.15 Activity diagram balas komentar Gambar 3.16 Activity diagram menghapus Komentar Gambar 3.17 Activity diagram memeberi rating Gambar 3.18 Activity diagram terapkan kode Gambar 3.19 Activity diagram melihat detail kode Gambar 3.20 Activity diagram login user Gambar 3.21 Activity diagram Register User Gambar 3.22 Activity diagram memberi rating Gambar 3.23 Activity diagram mengubah data user Gambar 3.24 Activity diagram view berita Gambar 3.25 Activity diagram copy kode Gambar 3.26 Activity diagram view komentar Gambar 3.27 Activity diagram menambah komentar Gambar 3.28 Sequence Diagram Login xiii

14 Gambar 3.29 Sequence Diagram Register User Gambar 3.30 Sequence Diagram Update Data Member Gambar 3.31 Sequence Diagram View Berita Gambar 3.32 Sequence Diagram View Komentar Gambar 3.33 Sequence Diagram Input Komentar Gambar 3.34 Sequence Diagram Memberi Rating Gambar 3.35 Sequence Diagram kelola admin Gambar 3.36 Sequence Diagram kelola berita Gambar 3.37 Sequence Diagram kelola kode Gambar 3.38 Class Diagram Gambar 3.39 Entitas Relationship Diagram Gambar 3.40 Relasi Antar Tabel Gambar 3.41 Rancangan Halaman Awal Gambar 3.42 Rancangan Halaman Login Gambar 3.43 Rancangan Halaman Dashboard Admin Gambar 3.44 Rancangan Halaman member Gambar 3.45 Rancangan Halaman Berita Gambar 3.46 Rancangan Generator CSS3 Button Gambar 3.47 Rancangan Halaman About Gambar 3.48 Rancangan Halaman Demo Gambar 4.1 Halaman Login Gambar 4.2 Halaman Masuk sebagai Admin Gambar 4.3 Halaman Kelola data kode Admin Gambar 4.4 Halaman kelola data berita Gambar 4.5 Halaman edit profil admin Gambar 4.6 Halaman generator CSS Gambar 4.7 Halaman Index User/Member Gambar 4.8 Halaman Preview Kode Gambar 4.9 Halaman Demo Gambar 4.10 Halaman Show Kode Demo xiv