BAB II

TINJAUAN PUSTAKA DAN LANDASAN TEORI

2.1 Tinjauan Pustaka
Aplikasi generator CSS sudah banyak di buat dan banyak situs diinternet
yang memuat generator CSS, tetapi pengaturan dan menu aplikasi yang ada
berbeda-beda. Adapun aplikasi yang berkaitan dengan aplikasi generator CSS
yang pernah di buat adalah sebagai berikut :
Firma Sahrul Bahtiar (2008) yaitu “Rancang Bangun Aplikasi Cascading
Style Sheet (CSS) Menggunakan Javascript”. Aplikasi tersebut berbasis web dan
berfungsi untuk membuat style CSS, tetapi aplikasi tersebut tidak dapat
menampilkan preview style CSS yang dibuat secara langsung pada aplikasi
tersebut. Aplikasi tersebut menggunakan tombol generate untuk mendapatkan
kode yang diatur oleh pengguna aplikasi dan belum di lengkapi dengan tombol
download untuk men-download file kode.
Randy Jensen (2016) yaitu “CSS3 Generator”. Aplikasi tersebut berbasis
web dan berfungsi untuk membuat style CSS, tetapi hanya CSS3 dan pengaturan
dengan cara inputan manual sehingga aplikasi akan sulit digunakan bagi pengguna
yang tidak begitu tahu tentang CSS. Pengaturan style pada aplikasi dibuat secara
terpisah pada menu-menu sehingga pengguna hanya dapat mengatur satu style
saja dan hanya terdapat tombol copy pada aplikasi tersebut.
Sementara itu, pada penelitian ini aplikasi generator yang dibuat sudah
dilengkapi dengan preview langsung pada aplikasi ketika terjadi pengaturan style
pada aplikasi generator, Aplikasi generator CSS pada penelitian ini dengan CSS
versi 3, dan menggunakan Ajax untuk menampilkan preview ketika upload
gambar atau font pada aplikasi. Aplikasi ini juga dilengkapi dengan tombol
download yang dapat digunakan untuk men-download file kode yang bernama
styles.css. Aplikasi generator CSS3 ini memiliki sistem informasi untuk
penerapan CSS yang dibuat dengan aplikasi generator CSS3 dan dapat digunakan
sebagai template pada sistem informasi tersebut. Sehingga pengguna dapat
membuat dan memilih style yang ingin dilihat dan ditampilkan di preview pada

5
 6

sistem informasi penerapan CSS3 dengan cara menyimpan kode yang telah diatur
oleh pengguna atau meng-click tombol terapkan pada style yang dipilih.
2.2 Landasan Teori
Penyusunan tugas akhir ini berisi tentang pembuatan aplikasi generator
CSS3 yang berfungsi sebagai generator pembuat style CSS sehingga
memudahkan dalam pembuatan style CSS untuk membantu web designer dan web
programmer dalam pembuatan desain web untuk web yang dibuat. Pembahasan
teori yang akan dijelaskan adalah mengenai teori umum, CSS, teknologi
Javascript dan tools yang mendukung pengerjaan aplikasi generator ini.
2.2.1 Aplikasi
Menurut Jogiyanto (1999:12), Aplikasi adalah penggunaan dalam suatu
komputer, instruksi (instruction) atau pernyataan (statement) yang disusun
sedemikian rupa sehingga komputer dapat memproses input menjadi output.
2.2.2 Hypertext markup Language (HTML)
Menurut Connolly, et al (2010:1031), HTML adalah format dokumen
bahasa yang digunakan untuk merancang halaman web. HTML adalah sistem
untuk membuat atau menandai, sebuah dokumen sehingga dapat dipublikasikan di
web. HTML mendefinisikan apa yang umumnya ditularkan antara node dalam
network. HTML telah dikembangkan dengan maksud agar berbagai macam jenis
perangkat harus dapat memanfaatkan informasi di web seperti PC dengan
tampilan grafis dari kedalaman resolusi dan warna yang bervariasi, telepon
seluler, perangkat genggam, perangkat untuk pidato untuk input dan output, dan
sebagainya.
2.2.3 Hypertext Preprocessor (PHP)
Menurut M.Syafii (2005:15), PHP adalah bahasa pemrograman berbasis
web yang akan memberikan penampilan canggih jika dipadukan dengan web
server yang memberikan keamanan cukup tinggi. Jika terjadi error pada suatu
fungsi atau kegagalan akses, PHP mempunyai fungsi khusus yang
memungkinkan pengiriman email langsung ke programmer tersebut. Penangan
variabel yang memberikan ‘pelemparan’ variabel antar halaman juga menjadi
lebih aman.
 7

2.2.4 Cascading Style Sheet (CSS)

Menurut Wiswakarma (2010:1), CSS (Cascading Style Sheet) adalah salah
satu bahasa pemrograman desain web (style sheet language) yang mengontrol
format tampilan sebuah halaman web yang ditulis dengan menggunakan bahasa
penanda (mark up language).
2.2.5 JavaScript
Menurut Sunyoto (2007:17), Javascript adalah bahasa pemrograman
scripting yang popular di internet dan dapat bekerja di sebagian besar browser
populer seperti Internet Explorer (IE), Mozilla Firefox dan Opera.
2.2.6 Asynchronous JavaScript and XMLHTTP (AJaX)
Menurut Abdul Kadir (2019), Asynchronous JavaScript and XMLHTTP,
atau disingkat AJaX adalah suatu teknik pemrograman berbasis web untuk
menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan
sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data
dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang
secara keseluruhan setiap kali seorang pengguna melakukan perubahan kodenya.
2.2.7 JQuery
Menurut Utomo (2012:62), JQuery merupakan library Javascript yang
banyak digunakan saat ini. jQuery di buat oleh John Resig pada tahun 2006.
Banyak website yang memanfaatkan library ini untuk menyederhanakan fungsi-
fungsi yang ada pada Javascript. Sesuai dengan slogannya jQuery sendiri “Write
less, do more”, menulis sedikit namun dapat mengerjakan banyak hal, sehingga
dapat menghemat coding program.
2.2.8 Unified Modeling Language (UML)
Menurut Hend (2006:5), Unified Modeling Language (UML) adalah
bahasa yang telah telah menjadi standard untuk visualisasi, menetapkan,
membangun dan mendokumentasikan artifak suatu sistem perangkat lunak.
Use Case Diagram
Menurut Satzinger, et al (2009, p242), use case adalah diagram untuk
menunjukkan peran dari berbagai pengguna dan bagaimana peran-peran
menggunakan sistem.
 8

Pendefinisian aktor dan use case.

1. Aktor merupakan orang, proses, atau sistem lain yang berinteraksi

dengan sistem informasi yang akan dibuat di luar sistem informasi yang
dibuat itu sendiri, walaupun simbol dari aktor adalah gambar orang, tapi
aktor belum tentu merupakan orang.
2. Use case merupakan fungsionalitas yang disediakan sistem sebagai
unit-unit yang saling bertukar pesan antar unit atau aktor. Simbol use
case diagram dapat dilihat pada tabel 2.1.
Table 2.1 Simbol Use Case Diagram

Simbol Deskripsi

Use Case fungsionalitas yang disediakan sistem

sebagai unit-unit yang saling bertukar pesan

antar unit atau aktor; biasanya dinyatakan
menggunakan kata kerja.
Actor orang, proses, atau sistem lain yang
berinteraksi dengan sistem informasi yang
akan dibuat di luar sistem informasi yang
akan dibuat itu sendiri, biasanya dinyatakan
menggunakan kata benda di awal frase nama
aktor
Association komunikasi antara aktor dan use case yang
berpartisipasi pada use case atau use case
memiliki interaksi dengan aktor
Ekstensi / extend relasi use case tambahan ke sebuah use case
dimana use case yang ditambahkan dapat
<<extend>> berdiri sendiri walau tanpa use case
tambahan itu. Arah panah mengarah pada use
case yang ditambahkan.
 9

Simbol Deskripsi

Generalisasi / generalization Hubungan generalisasi dan spesialisasi

(umum-khusus) antara dua buah use case
dimana fungsi yang satu adalah fungsi yang
lebih umum dari lainnya
Menggunakan / include / uses relasi use case tambahan ke sebuah use case
<<include>> dimana use case yang ditambahkan
memerlukan use case ini untuk menjalankan
<<uses>> fungsinya atau sebagai syarat dijalankan use
case ini.