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

iv

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.

v

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.

vi

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)

vii

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.

viii

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.

ix

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

x

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

xi

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

xii

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

xiii

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

xiv

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

xv

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

xvi

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