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 M3113143
PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2016
ii
iii
ABSTRACT ULFAH FARIDAH. 2016. 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
ABSTRAK ULFAH FARIDAH. 2016. 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
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
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
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
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
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 .................................................................................................. 1 1.1
Latar Belakang.......................................................................................... 1
1.2
Rumusan Masalah .................................................................................... 2
1.3
Batasan Masalah ....................................................................................... 2
1.4
Tujuan ....................................................................................................... 2
1.5
Manfaat ..................................................................................................... 3
1.6
Metodologi Penelitian .............................................................................. 3
1.7
Sistematika Penulisan ............................................................................... 3
BAB II ..................................................................................................................... 5 TINJAUAN PUSTAKA DAN LANDASAN TEORI ............................................. 5 2.1
Tinjauan Pustaka....................................................................................... 5
2.2
Landasan Teori ......................................................................................... 6
x
2.2.1
Aplikasi ............................................................................................. 6
2.2.2
Hypertext markup Language (HTML) .............................................. 6
2.2.3
Hypertext Preprocessor (PHP) .......................................................... 6
2.2.4
Cascading Style Sheet (CSS) ............................................................ 7
2.2.5
JavaScript .......................................................................................... 7
2.2.6
Asynchronous JavaScript and XMLHTTP (AJaX)............................ 7
2.2.7
JQuery ............................................................................................... 7
2.2.8
Unified Modeling Language (UML) ................................................. 7
BAB III ................................................................................................................. 10 ANALISIS DAN PERANCANGAN.................................................................... 10 3.1
Analisis Kebutuhan Perangkat ............................................................... 10
3.3.1
Analisis Kebutuhan Software.......................................................... 10
3.3.2
Analisis Kebutuhan Hardware ........................................................ 10
3.2
Analisis Kebutuhan Sistem......................................................................11
3.2.1
Kebutuhan Fungsional .....................................................................11
3.2.2
Kebutuhan Non Fungsional .............................................................11
3.3
Rancangan Aplikasi ................................................................................ 12
3.3.1
Alur Pembuatan Aplikasi ................................................................ 12
3.3.2
Struktur Aplikasi ............................................................................. 12
3.3.3
Interaksi Aplikasi ............................................................................ 13
3.4
Rancangan Algoritma Aplikasi ............................................................... 14
3.5
Rancangan Interface Aplikasi ................................................................. 29
BAB IV ................................................................................................................. 33 IMPLEMENTASI DAN ANALISA ..................................................................... 33 4.1
Detail Aplikasi ........................................................................................ 33
xi
4.2
Teknis Pemrograman .............................................................................. 45
4.3
Implementasi .......................................................................................... 50
4.4
Pengujian ................................................................................................ 59
BAB V ................................................................................................................... 61 PENUTUP ............................................................................................................. 61 5.1
Kesimpulan ............................................................................................. 61
5.2
Saran ....................................................................................................... 61
DAFTAR PUSTAKA ............................................................................................ 62
xii
DAFTAR GAMBAR
Gambar 3.1 Alur Pembuatan Aplilkasi ................................................................ 12 Gambar 3.2 Struktur Aplikasi Generator CSS3 ................................................... 13 Gambar 3.3 Use Case Interaksi Aplikasi ............................................................. 14 Gambar 3.4 Flowchart Pengaturan Style Generator CSS3 .................................. 15 Gambar 3.5 Flowchart Pengaturan Style Generator CSS3 .................................. 16 Gambar 3.6 Flowchart Pengaturan Fontface ....................................................... 17 Gambar 3.7 Flowchart Pengaturan Header.......................................................... 18 Gambar 3.8 Flowchart Pengaturan Content ........................................................ 18 Gambar 3.9 Flowchart Pengaturan Grid .............................................................. 19 Gambar 3.10 Flowchart Pengaturan Navbar ....................................................... 19 Gambar 3.11 Flowchart Pengaturan Heading ...................................................... 20 Gambar 3.12 Flowchart Pengaturan Text Decoration ......................................... 20 Gambar 3.13 Flowchart Pengaturan Textbox ...................................................... 21 Gambar 3.14 Flowchart Pengaturan Background................................................ 22 Gambar 3.15 Flowchart Pengaturan Button ........................................................ 22 Gambar 3.16 Flowchart Pengaturan Tabel .......................................................... 23 Gambar 3.17 Flowchart Pengaturan Dropdown .................................................. 24 Gambar 3.18 Flowchart Pengaturan Checkbox ................................................... 24 Gambar 3.19 Flowchart Pengaturan List ............................................................. 25 Gambar 3.20 Flowchart Pengaturan Border ........................................................ 25 Gambar 3.21 Flowchart Pengaturan Flexbox ...................................................... 26 Gambar 3.22 Flowchart Pengaturan Footer ......................................................... 27 Gambar 3.23 Flowchart Pengaturan Scrollbar .................................................... 28 Gambar 3.24 Flowchart Pengaturan Link............................................................ 29 Gambar 3.25 Rancangan Halaman Home Generator CSS3 ................................ 30 Gambar 3.26 Rancangan Halaman Setting pada Home Generator CSS3 ........... 31 Gambar 3.27 Rancangan Generator CSS3 Preview ............................................ 32 Gambar 4.1 Kode Default @fontface .................................................................. 33 Gambar 4.2 Kode Default Scrollbar .................................................................... 34 xiii
Gambar 4.3 Kode Default Navigtion Bar ............................................................ 35 Gambar 4.4 Kode Default Navigation Bar .......................................................... 36 Gambar 4.5 Kode Default Navigation Bar .......................................................... 37 Gambar 4.6 Kode Default Button ........................................................................ 38 Gambar 4.7 Kode Default Background ............................................................... 38 Gambar 4.8 Kode Default Table .......................................................................... 39 Gambar 4.9 Kode Default List ............................................................................ 40 Gambar 4.10 Kode Default Border Radius ......................................................... 40 Gambar 4.11 Kode Default Flexbox .................................................................... 40 Gambar 4.12 Kode Default Footer ...................................................................... 41 Gambar 4.13 Kode Default Text Box .................................................................. 41 Gambar 4.14 Kode Default Link ......................................................................... 42 Gambar 4.15 Kode Default Text Decoration ....................................................... 42 Gambar 4.16 Alur Aplikasi Generator CSS3 ....................................................... 44 Gambar 4.17 Script Interface @fontface ............................................................. 45 Gambar 4.18 Script menu @fontface .................................................................. 46 Gambar 4.19 Script Javascript ............................................................................. 46 Gambar 4.20 Script HTML ................................................................................. 46 Gambar 4.21 Script Preview @fontface .............................................................. 47 Gambar 4.22 Script PHP Button Save Code ....................................................... 47 Gambar 4.23 Script Clipboard Javascript ............................................................ 48 Gambar 4.24 Script Function Button Download Code........................................ 48 Gambar 4.25 Script download.php ...................................................................... 49 Gambar 4.26 Script Ajax ..................................................................................... 49 Gambar 4.27 Halaman Utama Generator CSS3 .................................................. 50 Gambar 4.28 Font-face setting Generator CSS3 ................................................. 50 Gambar 4.29 Scrollbar Setting Generator CSS3 ................................................. 51 Gambar 4.30 Button Setting Generator CSS3 ..................................................... 51 Gambar 4.31 Background Setting Generator CSS3 ............................................ 52 Gambar 4.32 Table Setting Generator CSS3 ....................................................... 52 Gambar 4.33 List Setting Generator CSS3 .......................................................... 53
xiv
Gambar 4.34 Border Radius Setting Generator CSS3 ......................................... 53 Gambar 4.35 Flexbox Setting Generator CSS3 ................................................... 54 Gambar 4.36 Footer Setting Generator CSS3 ..................................................... 54 Gambar 4.37 Text box Setting Generator CSS3 .................................................. 55 Gambar 4.38 Link Setting Generator CSS3 ........................................................ 56 Gambar 4.39 Navigation Bar Setting Generator CSS3 ....................................... 56 Gambar 4.40 Text Decoration Setting Generator CSS3 ...................................... 57 Gambar 4.41 Tampilan preview default Generator CSS3 ................................... 58 Gambar 4.42 Contoh Tampilan Preview Setelah Pengaturan Style .................... 59
xv
DAFTAR TABEL Table 2.1 Simbol Use Case Diagram ...................................................................... 8 Table 3.1 Software Requirement Specification ......................................................11 Tabel 4.1 Tabel Kesesuaian Browser .................................................................... 43 Table 4.2 Tabel Pengujian Generator CSS3 .......................................................... 59
xvi
