Disusun Oleh : ULFAH FARIDAH M

Transkripsi

1 PEMBUATAN APLIKASI GENERATOR CSS3 BERBASIS WEB MENGGUNAKAN TEKNOLOGI JAVASCRIPT TUGAS AKHIR diajukan untuk memenuhi salah satu syarat mencapai gelar Ahli Madya Program Diploma III Teknik Informatiksa Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Disusun Oleh : ULFAH FARIDAH M PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2016

2 ii

3 iii

4 ABSTRACT ULFAH FARIDAH WEB BASED CSS3 GENERATOR APPLICATION USING JAVASCRIPT TECHNOLOGY. Diploma program Informatics Engineering, Faculty of Mathematics and Natural Sciences, Sebelas Maret University Surakarta. For making the CSS code will spend a lot of time having to write a lot of code and make the results become as good as possible so it needed the applications to facilitate the manufacture of CSS is an application generator CSS3. The application was built by using Javascript technology. This generator application is the web applications that can run on web browser that supports CSS3. This application provides the editing program for users to be able to create and edit CSS which is created. Generator application can create a CSS style by settings on the applications that can display and preview CSS code and can generate styles.css file. This application is expected to simplify the user in making the CSS style so that users do not need to spend a lot of time in making CSS. Keywords : Web-Based Application Generator, CSS3 Generator, CSS Style, Javascript, Web Design. iv

5 ABSTRAK ULFAH FARIDAH PEMBUATAN APLIKASI GENERATOR CSS3 BERBASIS WEB MENGGUNAKAN TEKNOLOGI JAVASCRIPT. Program Diploma III Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta. Dalam pembuatan kode CSS akan menghabiskan banyak waktu karena harus menuliskan banyak kode dan membuat hasilnya menjadi sebaik mungkin sehingga dibutuhkan sebuah aplikasi untuk mempermudah pembuatan CSS yaitu aplikasi generator CSS3. Aplikasi dibangun dengan menggunakan teknologi Javascript. Aplikasi generator ini berupa aplikasi web yang dapat dijalankan pada web browser yang sudah mendukung CSS3. Aplikasi ini menyediakan editor untuk pengguna agar dapat membuat dan mengedit CSS yang dibuat. Aplikasi generator ini dapat membuat style CSS dengan cara melakukan pengaturan pada aplikasi yang dapat menampilkan kode dan preview CSS dan dapat menghasilkan file styles.css. Aplikasi ini diharapkan mempermudah pengguna dalam membuat style CSS sehingga pengguna tidak perlu menghabiskan banyak waktu dalam pembuatan CSS. Kata kunci : Aplikasi Generator Berbasis Web, Generator CSS3, Style CSS, Javascript, Desain Web. v

6 MOTTO Pikirkanlah apa yang kamu inginkan, terus pikirkan dan dorong dengan usaha, seberapa sering kamu terjatuh dan gagal jangan pernah menyerah, tetaplah pikirkan dan ambil tindakan, karena semua yang kamu rancang dipikiranmu akan menjadi nyata. (Ulfah Faridah) Sesungguhnya sesudah kesulitan pasti ada kemudahan. (QS. Al Insyirah : 6) When there s something that I want to do so badly but it doesn t work out, I do it until it works. Even if I stop in the middle I still do it. I m the type of person that only satisfied when I see the end of it. (B.I) Everybody in this country should learn how to program a computer, because it teaches you how to think. (Steve Jobs) vi

7 HALAMAN PERSEMBAHAN Kupersembahkan Tugas Akhir ini untuk : 1. Kedua orang tuaku tercinta, Ibu Semirah dan Bapak Sudiman yang selalu memberikan doa, semangat, dukungan dan kasih sayang yang begitu tulus kepadaku. 2. Kakak-kakakku tersayang, Nur Khayati, Hardianto dan Nurul Kholifah yang telah memberikan dukungan kepadaku. 3. Teman seperjuangan Sela Yusti A, Nur Etika Sari dan Sartika Apriyani yang telah menemani hari-hariku. vii

8 KATA PENGANTAR Assalamu Alaikum Wr.Wb. Bismillahirrohmanirrohim, Syukur Alhamdulillah selalu penulis haturkan kepada Allah SWT yang selalu memberikan segala kenikmatan yang tidak terhitung jumlahnya dan segala puji bagi Allah SWT yang telah melimpahkan rahmat serta hidayah-nya. Atas kuasa dan karunia-nya sehingga penulis dapat menyelesaikan Laporan Tugas Akhir yang berjudul PEMBUATAN APLIKASI GENERATOR CSS3 BERBASIS WEB MENGGUNAKAN TEKNOLOGI JAVASCRIPT. Shalawat serta salam selalu tercurahkan kepada Rasulullah SAW. Laporan Tugas Akhir ini disusun sebagai salah satu syarat memperoleh gelar Amd pada Diploma III Teknik Informatika Universitas Sebelas Maret Surakarta. Penulis berharap semoga Laporan Tugas Akhir ini dapat bermanfaat bagi berbagai pihak. Penyusunan laporan Tugas Akhir ini tidak lepas dari bimbingan dan bantuan dari banyak pihak. Dalam kesempatan ini penulis mengucapkan terima kasih kepada : 1. Bapak Prof. Ir. Ari Handono Ramelan, M.Sc.(Hons)., Ph.D., selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta yang telah berkenan memberikan izin dalam pembuatan Tugas Akhir ini. 2. Bapak Abdul Aziz, S.Kom., M.Cs., selaku Ketua Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. 3. Bapak Firma Sahrul Bahtiar, S.Kom., M.Eng., selaku pembimbing Tugas Akhir yang telah memberikan bimbingan dalam penyelesaian Tugas Akhir ini. 4. Seluruh Dosen Program Studi Diploma III Teknik Informatika Fakultas MIPA Universitas Sebelas Maret yang telah memberikan ilmu dan berbagi pengalaman kepada penulis. viii

9 5. Teman-teman DIII Teknik Informatika FMIPA UNS angkatan 2012 dan 2013 yang telah memberi semangat dan menyediakan waktunya untuk berbagi ilmu dengan penulis. 6. Kepada semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah banyak membantu dalam penyusunan laporan ini. Demikian laporan ini disusun, penulis menyadari bahwa banyak kekurangan dalam laporan ini oleh karenanya penulis mengaharapkan kritik dan saran yang membangun. Semoga laporan ini dapat bermanfaat bagi semua pihak yang membaca terutama bagi mahasiswa DIII Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Unversitas Sebelas Maret Surakarta. Wassalamu Alaikum Wr. Wb Surakarta, 25 April 2016 Penulis ix

10 DAFTAR ISI HALAMAN PERSETUJUAN... Error! Bookmark not defined. HALAMAN PENGESAHAN... Error! Bookmark not defined. ABSTRACT... iii ABSTRAK... v MOTTO... vi HALAMAN PERSEMBAHAN... vii KATA PENGANTAR... viii DAFTAR ISI... x DAFTAR GAMBAR... xiii DAFTAR TABEL... xvi BAB I... 1 PENDAHULUAN Latar Belakang Rumusan Masalah Batasan Masalah Tujuan Manfaat Metodologi Penelitian Sistematika Penulisan... 3 BAB II... 5 TINJAUAN PUSTAKA DAN LANDASAN TEORI Tinjauan Pustaka Landasan Teori... 6 x

11 2.2.1 Aplikasi Hypertext markup Language (HTML) Hypertext Preprocessor (PHP) Cascading Style Sheet (CSS) JavaScript Asynchronous JavaScript and XMLHTTP (AJaX) JQuery Unified Modeling Language (UML)... 7 BAB III ANALISIS DAN PERANCANGAN Analisis Kebutuhan Perangkat Analisis Kebutuhan Software Analisis Kebutuhan Hardware Analisis Kebutuhan Sistem Kebutuhan Fungsional Kebutuhan Non Fungsional Rancangan Aplikasi Alur Pembuatan Aplikasi Struktur Aplikasi Interaksi Aplikasi Rancangan Algoritma Aplikasi Rancangan Interface Aplikasi BAB IV IMPLEMENTASI DAN ANALISA Detail Aplikasi xi

12 4.2 Teknis Pemrograman Implementasi Pengujian BAB V PENUTUP Kesimpulan Saran DAFTAR PUSTAKA xii

13 DAFTAR GAMBAR Gambar 3.1 Alur Pembuatan Aplilkasi Gambar 3.2 Struktur Aplikasi Generator CSS Gambar 3.3 Use Case Interaksi Aplikasi Gambar 3.4 Flowchart Pengaturan Style Generator CSS Gambar 3.5 Flowchart Pengaturan Style Generator CSS Gambar 3.6 Flowchart Pengaturan Fontface Gambar 3.7 Flowchart Pengaturan Header Gambar 3.8 Flowchart Pengaturan Content Gambar 3.9 Flowchart Pengaturan Grid Gambar 3.10 Flowchart Pengaturan Navbar Gambar 3.11 Flowchart Pengaturan Heading Gambar 3.12 Flowchart Pengaturan Text Decoration Gambar 3.13 Flowchart Pengaturan Textbox Gambar 3.14 Flowchart Pengaturan Background Gambar 3.15 Flowchart Pengaturan Button Gambar 3.16 Flowchart Pengaturan Tabel Gambar 3.17 Flowchart Pengaturan Dropdown Gambar 3.18 Flowchart Pengaturan Checkbox Gambar 3.19 Flowchart Pengaturan List Gambar 3.20 Flowchart Pengaturan Border Gambar 3.21 Flowchart Pengaturan Flexbox Gambar 3.22 Flowchart Pengaturan Footer Gambar 3.23 Flowchart Pengaturan Scrollbar Gambar 3.24 Flowchart Pengaturan Link Gambar 3.25 Rancangan Halaman Home Generator CSS Gambar 3.26 Rancangan Halaman Setting pada Home Generator CSS Gambar 3.27 Rancangan Generator CSS3 Preview Gambar 4.1 Kode 33 Gambar 4.2 Kode Default Scrollbar xiii

14 Gambar 4.3 Kode Default Navigtion Bar Gambar 4.4 Kode Default Navigation Bar Gambar 4.5 Kode Default Navigation Bar Gambar 4.6 Kode Default Button Gambar 4.7 Kode Default Background Gambar 4.8 Kode Default Table Gambar 4.9 Kode Default List Gambar 4.10 Kode Default Border Radius Gambar 4.11 Kode Default Flexbox Gambar 4.12 Kode Default Footer Gambar 4.13 Kode Default Text Box Gambar 4.14 Kode Default Link Gambar 4.15 Kode Default Text Decoration Gambar 4.16 Alur Aplikasi Generator CSS Gambar 4.17 Script 45 Gambar 4.18 Script 46 Gambar 4.19 Script Javascript Gambar 4.20 Script HTML Gambar 4.21 Script 47 Gambar 4.22 Script PHP Button Save Code Gambar 4.23 Script Clipboard Javascript Gambar 4.24 Script Function Button Download Code Gambar 4.25 Script download.php Gambar 4.26 Script Ajax Gambar 4.27 Halaman Utama Generator CSS Gambar 4.28 Font-face setting Generator CSS Gambar 4.29 Scrollbar Setting Generator CSS Gambar 4.30 Button Setting Generator CSS Gambar 4.31 Background Setting Generator CSS Gambar 4.32 Table Setting Generator CSS Gambar 4.33 List Setting Generator CSS xiv

15 Gambar 4.34 Border Radius Setting Generator CSS Gambar 4.35 Flexbox Setting Generator CSS Gambar 4.36 Footer Setting Generator CSS Gambar 4.37 Text box Setting Generator CSS Gambar 4.38 Link Setting Generator CSS Gambar 4.39 Navigation Bar Setting Generator CSS Gambar 4.40 Text Decoration Setting Generator CSS Gambar 4.41 Tampilan preview default Generator CSS Gambar 4.42 Contoh Tampilan Preview Setelah Pengaturan Style xv

16 DAFTAR TABEL Table 2.1 Simbol Use Case Diagram... 8 Table 3.1 Software Requirement Specification Tabel 4.1 Tabel Kesesuaian Browser Table 4.2 Tabel Pengujian Generator CSS xvi