BAB II

LANDASAN TEORI

2.1 Konsep Dasar Informasi

2.1.1 Pengertian Informasi
Sumber informasi adalah data. Sedangkan data adalah kenyataan yang
menggambarkan kejadian-kejadian dan kesatuan nyata. Kejadian (event) adalah
sesuatu yang terjadi pada saat tertentu. Informasi diperoleh setelah data-data
mentah diproses atau diolah.
Informasi adalah data yang telah diolah menjadi bentuk yang lebih berarti
dan berguna bagi penerimanya untuk mengambil keputusan masa kini maupun
yang akan datang [5].
Informasi adalah data yang telah diolah menjadi bentuk yang lebih berarti
bagi penerimanya. Data terdiri dari fakta-fakta dan angka-angka yang relatif tidak
berarti bagi pemakai [6].
Melihat pengertian informasi di atas dapat disimpulkan bahwa informasi
adalah hasil dari pengolahan satu atau beberapa data yang memberikan arti dan
manfaat.

2.1.2 Kualitas Informasi

Agar informasi dihasilkan lebih berharga, maka informasi harus memenuhi
kriteria sebagai berikut :
a. Relevan
Informasi yang diberikan harus benar-benar terasa manfaatnya bagi yang
membutuhkan.
b. Akurat
Informasi harus bebas dari kesalahan-kesalahan dan tidak bias atau
menyesatkan. Informasi harus jelas mencerminkan maksudnya.

6
 7

c. Tepat Waktu
Informasi yang sudah usang tidak akan mempunyai nilai lagi, sehingga
informasi yang diberikan kepada penerima harus tepat 19 waktu, karena
informasi digunakan sebagai tindakan atau alat pengambilan keputusan. Jika
tindakan atau pengambilan keputusan terlambat, maka dapat berakibat fatal
bagi organisasi.
d. Ekonomis
Informasi yang dihasilkan mempunyai daya jual yang tinggi, serta biaya
operasional untuk menghasilkan informasi tersebut minimal, informasi
tersebut juga mampu memberikan dampak yang luas terhadap laju
pertumbuhan ekonomi dan teknologi informasi.
e. Efisien
Informasi yang berkualitas memiliki sintak atau kalimat yang sederhana,
namun memberikan makna dan hasil yang mendalam.
f. Dapat Dipercaya
Informasi tersebut berasal dari sumber yang dapat dipercaya. Sumber tersebut
juga telah teruji tingkat kejujurannya.

2.1.3 Nilai Informasi

Nilai suatu informasi ditentukan oleh dua hal, yaitu:
1) Suatu informasi dikatakan bernilai bila manfaatnya lebih efektif
dibandingkan dengan biaya mendapatkannya.
2) Suatu informasi dikatakan bernilai apabila informasi tersebut tidak
dinilai dengan keuntungan dengan nilai uang tetapi ditaksir dengan
nilai efektifitasnya.

2.2 Konsep Dasar Sistem Informasi

Sistem Informasi merupakan suatu sistem dalam suatu organisasi yang
mempertemukan kebutuhan pengolahan transaksi, mendukung operasi, bersifat
manajerial dan kegiatan strategi dari suatu organisasi dan menyediakan pihak luar
tertentu dengan laporan-laporan yang diperlukan [5].
 8

Mengacu pada definisi sistem yang telah dipaparkan sebelumnya, maka

sistem informasi dapat definisikan sebagai suatu sistem yang dibuat oleh manusia
yang terdiri atas komponen-komponen dalam suatu organisasi untuk memenuhi
kebutuhan akan informasi.
Sistem informasi mempunyai beberapa kompenen yang dapat kita ilustrasikan
pada Gambar 2.1. kelima komponen tersebut dapat diklasifikasikan sebagai
berikut :

Gambar 2. 1 Lima komponen Sistem Informasi

1) Hardware (perangkat keras), seperti : keyboard, monitor, microprocessor dan

lain sebagainya.
2) Software (perangkat lunak), merupakan kumpulan dari perintah/fungsi yang
ditulis dengan aturan tertentu untuk memerintahkan komponen melaksanakan
tugas tertentu.
3) Brainware (manusia) adalah mereka yang terlibat dalam kegiatan sistem
informasi seperti operator, pemimpim sistem informasi dan sebagainya.
4) Data, merupakan komponen dasar dari informasi yang akan diproses lebih
lanjut untuk menghasilkan informasi.
5) Prosedur atau metode-metode, menghubungkan berbagai perintah dan aturan
yang akan menentukan rancangan dan penggunaan sistem informasi.
Adapun sistem infomasi dapat diklasifikasikan menjadi 4 antara lain :

1. Berdasarkan Level Organisasi

Berdasarkan level organisasi, sistem informasi dikelompokan menjadi 3,
antara lain :
 9

a. Sistem informasi departemen (departemental information systems),

sistem informasi yang hanya digunakan dalam sebuah departemen.
b. Sistem informasi perusahaan (enterprise information system), sistem
terpadu yang dapat digunakan oleh sejumlah departemen secara bersama-
sama.
c. Sistem informasi antar organisasi (inter organizational systems), sistem
informasi yang menghubungkan dua organisasi atau lebih.
2. Berdasarkan Area Funsional
Pengklasifikasian sistem informasi ini didasari oleh funsional yang masih
bersifat tradisional dari department dalam suatu organisasi.
a. Sistem informasi akuntansi, sistem informasi yang menyediakan
informasi yang dipakai oleh fungsi akuntansi. sistem ini mencakup
semua transaksi yang berhubungan dengan keuangan dalamperusahaan
b. Sistem informasi keuangan, sistem informasi yang menyediakan
informasi pada fungsi keuangan yang menyangkut keuangan perusahaan.
c. Sistem informasi manufaktur, sistem informasi yang bekerja sama
dengan sistem informasi lain untuk mendukung manajemen perusahaan
dalam menyelesaikan masalah yang berhubungan dengan produk atau
jasa yang dihasilkan perusahaan.
d. Sistem informasi pemasaran, sistem informasi yang menyediakan
informasi yang dipakai oleh fungsi pemasaran.
e. Sistem informasi SDM, sistem informasi yang menyediakan informasi
yang dipakai oleh fungsi personalia

3. Berdasarkan Dukungan yang Tersedia

a. Sistem Pemrosesan Transaksi
Menghimpun dan menyimpan informasi transaksi. Fokus utama sistem
ini adalah data-data transaksi.
 10

b. Sistem Informasi Manajemen

Sistem informasi yang digunakan untuk menyajikan informasi yang
digunakan untuk mendukung operasi, manajemen, dan pengambilan
keputusan dalam suatu organisasi.
c. Sistem Otomasi Perkantoran
Sistem yang memberikan fasilitas tugas-tugas pemrosesan informasi
sehari-hari di dalam perkantoran dan organisasi busnis.
d. Sistem Pendukung Keputusan
Sistem informasi interaktif yang menyediakan informasi, pemodelan,
dan manipulasi data yang digunakan untuk membantu pengambilan
keputusan di mana tak seorangpun tahu secara pasti bagaimana
keputusan seharusnya dibuat.
e. Sistem Informasi Eksekutif
Sistem informasi yang menyediakan fasilitas yang fleksibel bagi
manajer dan eksekutif dalam mengakses informasi eksternal dan
internal yang berguna untuk mengidentifikasi masalah dan mengenali
peluang.
f. Sistem Pendukung Cerdas
Menyediakan pengetahuan pakar pada bidang tertentu untukmembantu
pemecahan masalah.

4. Berdasarkan Aktivitas Management

a. Sistem berbasis mainframe
b. Sistem stand alone.
c. Sistem tersebar

2.3 Perancangan Sistem Informasi

Perancangan sistem adalah tahap yang dilakukan setelah melakukan analisis
sistem, pendefinisian kebutuhan–kebutuhan sistem yang akan dibangun dan
persiapan untuk merancang bangun implementasi sistem dengan menggambarkan
sistem yang akan dibangun [14].
 11

Perancangan sistem dimulai dengan memahami sistem yang sedang berjalan

dan kriteria–kriteria sistem yang akan dibangun biasanya menggunakan
pemodelan secara terstruktur yang digambarkan oleh grafik atau diagram.
Hal–hal yang harus diperhatikan dalam merancang dan membangun sebuah
sistem [7] adalah :
1) Kebutuhan perusahaan, organisasi, atau lembaga, yaitu dengan cara
memahami bidang yang akan dikembangkan,sasaran yang dibidik serta
media yang akan digunakan.
2) Kebutuhan operator, yaitu kebutuhan operator untuk memperoleh sistem
yang mudah dipahami dan dioperasikan serta tampilan yang interaktif.
Kebutuhan operator dapat diperoleh melalui proses wawancara atau
kuisioner.
3) Kebutuhan pemakai, yaitu keinginan – keinginan dari si pemakai sistem
informasi, seperti jaminan keamanan, standarisasi tampilan, kecepatan
akses, dan kemudahan dalam pengoperasian.
4) Kebutuhan teknis, yaitu meliputi arsitektur dan konfigurasi sistem. Secara
teknis peralatan dan teknologi yang digunakan, termasuk pertimbangan
penggunaan peralatan yang tidak standar, seperti peralatan multimedia,
kebutuhan interface, database, dan perangkat lunaknya.

2.4 Aplikasi Web

Aplikasi web adalah suatu jenis aplikasi komputer yang dapat diakses dengan
web browser, selama pemakai dapat mengakses web server. Web server adalah
server yang melayani permintaan aplikasi web [8].
Aplikasi web yang paling dasar ditulis dengan menggunakan HTML (Hyper
Text Markup Language). HTML adalah bahasa standar untuk membuat halaman-
halaman web. Dalam perkembangannya HTML biasanya disandingkan dengan
bahasa permrograman lain.
 12

Gambar 2. 2 Mekanisme pemanggilan halaman web bertipe HTML

Langkah 1 menunjukan saat pemakai melakukan permintaan terhadap sebuah

halaman web. Langkah 2 menggambarkan saat web server mengambil file.
Langkah 3 menunjukan saat web server mengirimkan kode HTML kepada
pemakai yang meminta. Sedangkan langkah 4 menggambarkan ketika browser
melakukan penerjemhan kode HTML ke dalam bentuk tampilan pada layar.

2.5 Perangkat Lunak Pendukung

Dalam penelitian ini, penulis menggunakan beberapa perangkat lunak
pendukung terutama dalam hal pembuatan database dan program. Berikut adalah
sedikit penjelasan tentang perangkat lunak pendukung.

2.5.1 Sekilas tentang HTML

Hypert Text Markup Language (HTML) adalah format bahasa standar
yang digunakan untuk menampilkan halaman web [3].

Setiap halaman web yang ada ditulis dengan bahasa HTML, bisa dikatakan
HTML adalah suatu struktur rangka yang membentuk suatu halaman web. Untuk
penamaan file HTML berektensi .HTML, contoh ketika membuat file HTML
bernama profil maka file tersebut disimpan dengan nama profil HTML. Beberapa
hal yang bisa dilakukan dengan menggunakan HTML yaitu :
1. Mengatur tampilan halaman web dan isinya.
2. Membuat tabel dalam halaman web.
 13

3. Membuat form yang bisa digunakan untuk menangani registrasi dan

transaksi melalui web.
4. Menampilkan objek-objek seperti citra, audio, video, animasi pada halaman
web.
5. Menampilkan area gambar (canvas) pada browser.
Struktur HTML:

<HTML>

<head>

.......

</head>

<body>

......

</body>

</HTML>

2.5.1.1 Tag atau Element HTML

Tag adalah suatu penada perintah atau kata kunci dalam HTML [3]. Tag
digunakan untuk menentukan isi dari suatu dokumen HTML. Dalam penulisan tag
terdapat dua bentuk yaitu tag dengan penutup dan tag tanpa penutup. Berikut
adalah format tag yang berpasangan dengan penutup:
<tag> isi tag ....... </tag>

Kebanyakan dari tag menggunakan format ini, contohnya HTML, head, body, div
dan lain-lain. Berikut adalah format tag tanpa penutup:
<tag>

Contoh yang menggunakan tag tanpa peutup adalah img, br, hr, link, input dan
lain-lain.
 14

Tabel 2. 1 Elemen pada HTML

Tag Penjelasan

<!--...--> Mendefinisikan Komentar

<!DOCTYPE> Mendefinisikan tipe atau jenis dokumen

<a> Mendefinisikan hyperlink

<b> Mendefinisikan teks bold atau cetak tebal

<body> Mendefinisikan tubuh atau badan dokumen

Mendefinisikan satu baris tunggal atau sama dengan fungsi

<br>
enter

<button> Mendefinisikan sebuah tombol

<div> Mendefinisikan sebuah bagian dalam sebuah dokumen

<font> Mendefinisikan font, warna, dan ukuran dari sebuah teks

Mendefinisikan sebuah footer dari sebuah dokumen atau

<footer>
section

<form> Mendefinisikan sebuah form HTML untuk input pengguna

<h1> sampai
Mendefinisikan headings pada HTML
<h6>

<head> Mendefinisikan informasi tentang dokumen

<header> Mendefinisikan sebuah header untuk dokumen atau bagian

dokumen

<HTML> Mendefinisikan root dari sebuah dokumen HTML

<img> Mendefinisikan sebuah image

<input> Mendefinisikan sebuah input control

<label> Mendefinisikan sebuah label dari sebuah <input> element

<li> Mendefinisikan sebuah daftar item

<ol> Mendefinisikan sebuah daftar tersusun

<option> Mendefinisikan sebuah option dari sebuah daftar drop-down

 15

Tag Penjelasan

<p> Mendefinisikan sebuah paragraph

<script> Mendefinisikan sebuah script dari sisi klien

<tabel> Mendefinisikan sebuah tabel

<tbody> Grup isi tubuh dalam sebuah tabel

<td> Mendefinisikan sebuah cell didalam sebuah tabel

<tfoot> Grup isi footer dalam sebuah tabel

<th> Mendefinisikan sebuah header cell didalam sebuah tabel

<thead> Grup header dalam sebuah tabel

2.5.1.2 Atribut
Atribut merupakan suatu informasi tambahan dari suatu tag HTML.
Atribut terletak pada suatu tag dan terdiri dari dua bagian yaitu nama atribut dan
nilai. Berikut adalah contoh suatu atribut pada tag a.
<input type=”password”>

Pada contoh di atas type merupakan nama atribut sedangkan password

merupakan nilai dari attribut. Setiap tag memiliki atribut yang berbeda.

Tabel 2. 2 Atribut pada HTML

Atribut Penjelasan

class Menentukan elemen untuk digunakan pada CSS

disable Menentukan bahwa elemen input harus dinonaktifkan

href Menentukan URL (Alamat web) untuk link

id Menentukan ID link untuk elemen

Digunakan untuk menyatakan hubungan dengan link yang dituju

rel
baik menuju ke situs yang sama maupun menuju ke situs lain.
 16

src Menentukan URL (Alamat web) untuk gambar

style menentukan style CSS inline untuk suatu elemen

title Menampilkan tool tip tentang informasi tambahan pada elemen

2.5.1.3 Karakter Khusus dalam HTML

Dalam HTML terdapat karakter khusus yang ditampilkan dengan cara
mengetikkan kode tertentu. Contoh pengetikan karakter khusus pada HTML dapat
dilihat pada Tabel 2.3.
Tabel 2. 3 Karakter Khusus pada HTML

Simbol Penjelasan Karakter

&copy; Simbol Hak Cipta ©

&#153; Simbol merk dagang ™

&lt; Simbol kurang dari <

Simbol lebih besar >

&gt;
dari

&amp; Simbol Ampersand &

&quot; Simbol tanda kutip “

2.5.2 Sekilas tentang Bahasa pemrograman PHP

PHP (Personal Home Page) diciptakan oleh Ramus Lerdorf, seorang
pemogram C yang andal. Semula PHP hanya digunakan untuk mencatat jumlah
pengunjung pada homepage-nya. Rasmus adalah seorang pendukung Open
Source. Karena itulah ia mengeluarkan Personal Home Page Tools versi 1.0
secara gratis. Setelah mempelajari YACC dan GNU Buson, Rasmus menambah
kemampuan PHP 1.0 dan menerbitkan PHP 2.0.
PHP adalah program aplikasi yang bersifat server side, artinya hanya dapat
berjalan pada sisi server saja dan tidak dapat berfungsi tanpa adanya sebuah
server di dalamnya. Secara khusus, PHP dirancang untuk membentuk web
dinamis. Artinya, ia dapat membentuk suatu tampilan berdasarkan permintaan
 17

terkini. Pada 43 prinsipnya, PHP mempunyai fungsi yang sama dengan skrip-skrip
seperti ASP (Active Server Page), Cold Fusion, maupun Perl
PHP juga bukan bahasa pemograman yang lengkap. Maksudnya program
ini tidak menyertakan compiler tersendiri yang membuat program hasilnya
menjadi program .exe yang dapat di jalankan tersendiri. PHP (Hypertext
Preprocessor) merupakan sebuah bahasa pemograman scripting berlisensi Open
Source. Script ini dapat bercampur dengan script Tag HTML sehingga karena
kemampuannya tersebut, ia disebut bahasa yang embeded pada Tag HTML.

2.5.3 Sekilas tentang XAMPP

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem
operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai
server yang berdiri sendiri (localhost), yang terdiri atas program Apache, HTTP
Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa
pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat
sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia
dalam GNU (General Public License) dan bebas (gratis) dan merupakan web
server yang mudah digunakan yang dapat melayani tampilan halaman web yang
dinamis [15].

2.5.4 Sekilas tentang MySQL

MySQL adalah suatu software sistem manajemen database yang
menggunakan standar SQL (Structured Query Language), yaitu bahasa standar
yang paling banyak digunakan untuk mengakses database.
Mendefinisikan bahwa MySQL merupakan software yang tergolong
database server dan bersifat Open Source. Open Source menyatakan bahwa
software ini di lengkapi oleh source code (kode yang di pakai untuk membuat
MySQL), selain tentu saja bentuk executable-nya atau kode dapat di jalankan
secara langsung di dalam sistem operasi. Hal menarik lainnya adalah MySQL juga
bersifat multiplatform. MySQL dapat dijalankan pada berbagai sistem operasi [8].
Keunggulan dari MySQL adalah :
 18

1. MySQL dapat digunakan dan dimanfaatkan oleh banyak CPU sekaligus.

MySQL mendukung penggunaan oleh beberapa user pada waktu yang
bersamaan, oleh karena itu database server dapat diakses oleh client secara
bersamaan pula.
2. MySQL merupakan Open Source software. Untuk menggunakan MySQL,
yang mana merupakan lisensi dari GPL, user dapat mempergunakannya secara
cuma-cuma, tanpa dipungut biaya.
3. MySQL mampu berjalan dalam berbagai sistem operasi (Portability). MySQL
dapat berjalan stabil pada berbagai sistem operasi seperti Microsoft Windows,
Mac OS X server, Solaris, Amiga, Linux, FreBSD, HP-UX, dan lainnya.
4. Performance Tuning yang baik MySQL memiliki kecepatan yang sangat baik
dalam menangani query sederhana.
5. Scalability and Column Types Support
MySQL mampu menangani database yang besar dengan tipe kolom yang
sangat kompleks.
6. High Security
MySQL memiliki sistem sekuritas yang tinggi dengan disertai beberapa lapisan
sekuriti seperti level subnetmask, nama host, dan ijin akses user dengan sistem
perijinan yang disertai dengan serta password terenkripsi.
7. Standard Command and Function MySQL memiliki operator dan fungsi secara
penuh yang mendukung perintah SELECT dan WHERE dalam query, yang
mana merupakan fungsi standar dari SQL.
8. Connectivity
MySQL dapat melakukan koneksi dengan client menggunakan protocol
TCP/IP, Named Pipes (NT), dan Unix soket (Unix).
9. Flexibility
Table Structure MySQL memiliki struktur tabel yang lebih fleksibel dalam
menangani ALTER TABLE, dibandingkan database lainnya seperti Oracle.
10. Localisation
MySQL dapat mendeteksi pesan kesalahan (error code) pada client dengan
menggunakan lebih dari dua puluh bahasa.
 19

11. Interface
MySQL memiliki interface terhadap berbagai aplikasi dan bahasa
pemrograman menggunakan fungsi API.
12. Clients dan Tools
MySQL dilengkapi dengan berbagai tool yang dapat digunakan untuk
administrasi database, yang mana pada setiap tool disertakan petunjuk online.

2.5.5 Sekilas tentang Sublime Text 3

Sublime Text adalah aplikasi editor untuk kode dan teks yang dapat
berjalan diberbagai platform operating system dengan menggunakan teknologi
Phyton API. Terciptanya aplikasi ini terinspirasi dari aplikasi Vim, Aplikasi ini
sangatlah fleksibel dan powerfull. Fungsionalitas dari aplikasi ini dapat
dikembangkan dengan menggunakan sublime-packages. Sublime Text bukanlah
aplikasi Open Source dan juga aplikasi yang dapat digunakan dan didapatkan
secara gratis, akan tetapi beberapa fitur pengembangan fungsionalitas (packages)
dari aplikasi ini merupakan hasil dari temuan dan mendapat dukungan penuh dari
komunitas serta memiliki linsensi aplikasi gratis.
Sublime Text mendukung berbagai bahasa pemrograman dan mampu
menyajikan fitur syntax highlight hampir di semua bahasa pemrogramman yang
didukung ataupun dikembangkan oleh komunitas seperti; C, C++, C#, CSS, D,
Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua,
Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile
and XML. Biasanya bagi bahasa pemrograman yang didukung ataupun belum
terdukung secara default dapat lebih dimaksimalkan atau didukung dengan
menggunakan add-ons yang bisa didownload sesuai kebutuhan user.

Berikut beberapa fitur yang diunggulkan dari aplikasi Sublime Text:

a. Goto Anything
Fitur yang sangat membantu dalam membuka file ataupun menjelajahi isi dari
file hanya dengan beberapa keystrokes.
b. Multiple Selections
 20

Fitur ini memungkinkan user untuk mengubah secara interaktif banyak baris
sekaligus, mengubah nama variabel dengan mudah, dan memanipulasi file
lebih cepat dari sebelumnya.
c. Command Pallete
Dengan hanya beberapa keystorkes, user dapat dengan cepat mencari fungsi
yang diinginkan, tanpa harus menavigasi melalu menu.
d. Distraction Free Mode
Bila user memerlukan fokus penuh pada aplikasi ini, fitur ini dapat membantu
user dengan memberikan tampilan layar penuh.
e. Split Editing
Dapatkan hasil yang maksimal dari monitor layar lebar dengan dukungan
editing perpecahan. Mengedit sisi file dengan sisi, atau mengedit dua lokasi di
satu file. Anda dapat mengedit dengan banyak baris dan kolom yang user
inginkan.
f. Instant Project Switch
Menangkap semua file yang dimasukkan kedalam project pada aplikasi ini.
Terintegrasi dengan fitur Goto Anything untuk menjelajahi semua file yang
ada ataupun untuk beralih ke file dalam project lainnya dengan cepat.
g. Plugin API
Dilengkapi dengan plugin API berbasis Phyton sehingga membuat aplikasi ini
sangat tangguh.
h. Customize Anything
Aplikasi ini memberikan user fleksibilitas dalam hal pengaturan fungsional
dalam aplkasi ini.
i. Cross Platform
Aplikasi ini dapat berjalan hampir disemua operating system modern seperti
Windows, OS X, dan Linux based operating system.

2.5.6 Sekilas Tentang CSS

Cascading Style Sheet (CSS) adalah kumpulan kode program yang
digunakan untuk mempercantik tampilan halaman HTML [8]. Selain dapat
 21

mengubah tampilan, CSS juga dapat digunakan untuk memberikan efek tertentu
pada sebuah halaman web. Tujuan dari CSS yaitu agar dapat membedakan konten
dari dokumen dan tampilan dokumen.

2.5.6.1 Aturan Penulisan CSS

Satu blok aturan dari CSS terdiri dari selector dan blok deklarasi.
Selector {
Properti : value;
}

Pada penulisan diatas selector dapat berupa id, class atau elemen pada
HTML. Sebagai contoh mengubah warna tulisan pada paragraf

P{
Color: blue;
}

Pada contoh diatas maka pada setiap content yang berada pada tag p akan
berubah menjadi biru.
Contoh di atas merupakan cara penulisan CSS, Satu blok deklarasi berisi
satu deklarasi atau lebih yang dipisahkan oleh titik koma, dan blok deklarasi
dikelilingi oleh tanda kurung kurawal.

CSS membagi Class menjadi dua :

1. ID Selector
2. Class Selector

2.5.6.2 ID Selector
ID selector menggunakan id dari elemen HTML untuk memilih selector
tertentu. ID elemen harus unik dalam satu halaman yang nantinya akan digunakan
sebagai selector.
 22

Untuk memilih elemen dengan id tertentu, penulisan dimulai dengan

menggunakan karakter hash (#) diikuti oleh id elemen dan id elemen tidak bisa
diawali dengan angka. Berikut contoh penggunaan ID selector.

#selector_id {
Property:value}

2.5.6.3 Class Selector

Class selector menggunakan atribut class dari elemen HTML untuk
memilih selector. Dalam menggunakan class selector penulisan diawali dengan
karakter titik (.) diikuti dengan nama class. Berikut contoh penggunaan class
selector.

.selector_class {
Property:value}

Pada class selector dapat menentukan bahwa hanya elemen HTML

tertentu yang akan dilakukan oleh class.

a.selector_class {
Property:value}

Penulisan class selector di atas hanya akan berpengaruh pada elemen

HTML ‘a’.Terdapat 3 teknik yang digunakan untuk memasukkan CSS ke dalam
HTML, yaitu:
1. External style sheet
2. Internal style sheet
3. Inline style

2.5.6.4 External Style Sheet

External Style Sheet yaitu suatu teknik yang digunakan untuk memasukkan
CSS dengan cara membuat kode program CSS menjadi satu file. Setiap halaman
harus menyertakan referensi ke file style sheet eksternal di dalam elemen <link>.
 23

Dimana elemen <link> merupakan bagian dari elemen <head>. Berikut

merupakan contoh penulisan referensi file style sheet.
File HTML :

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

File CSS :

body {
background-color: blue;
}

p{
color: black;
margin-right: 20px;
}

Pada contoh di atas saat menulis kode program CSS file disimpan
dengan ekstensi .css.
2.5.6.5 Internal Style Sheet
Internal Style Sheet yaitu suatu teknik yang digunakan untuk memasukkan
CSS dengan cara membuat kode program CSS menjadi satu file yang sama
dengan kode program HTML. Kode Program CSS berada di dalam elemen
<style> yang terdapat di bagian <head> pada HTML. Berikut contoh penggunaan
Internal style sheet.
 24

<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

2.5.6.6 Inline Styles

Inline Styles yaitu suatu teknik yang digunakan untuk memasukkan CSS
dengan cara memasukkan kode program CSS ke dalam elemen tag HTML. Inline
styles dituliskan dengan menambahkan atribut ke dalam elemen HTML. Berikut
contoh penulisan Inline styles.

<h1 style="color:red;margin-top:50px;">Ini adalah contoh Inline

Styles</h1>

2.5.6.7 Komentar
Komentar pada CSS ditulis diantara tanda /* dan */. Contoh:
/* komentar */
P{
Color:blue;
}

2.5.6.8 Pseudo Class

Pseudo class digunakan untuk menentukan gaya khusus suatu elemen.
Gaya ini berupa gaya yang membuat tampilan terkesan lebih menarik dan hidup.
Pseudo class pada HTML dapat dilihat pada Tabel 2.4.
 25

Tabel 2.4 Pseudo Class pada HTML

Pseudo Penjelasan

:active Link yang sedang aktif

::after Menambah konten tertentu setelah suatu elemen

::before Menambah konten tertentu sebelum suatu elemen

:checked Memilih checkbox yang sedang terpilih

2.5.7 Sekilas Tentang JavaScript

JavaScript adalah bahasa pemrograman yang memiliki ciri-ciri: tingkat
tinggi (high-level), dinamis, tidak bertipe dan diproses secara interpreted.
JavaScript menggunakan standar spesifikasi ECMAScript. Bersama-sama dengan
HTML dan CSS, JavaScript menjadi salah satu teknologi inti dari pembuatan
konten halaman web (World Wide Web).

2.5.8 Sekilas Tentang Bootstrap

Bootstrap merupakan framework untuk membangun desain web secara
responsive [1]. Responsif memiliki arti bahwa web secara otomatis dapat
menyesuaikan diri agar tampilan terlihat menarik di semua perangkat. Bootstrap
menyediakan class CSS dan plugin JavaScript untuk mempermudah dalam
pembangunan web. Keuntungan menggunakan Bootstrap adalah sebagai berikut.
1. Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar
tentang HTML dan CSS dapat menggunakan Bootstrap.
2. Fitur responsive: Bootstrap menyesuaikan dengan ponsel, tablet, dan
desktop.

3. Kompatibilitas browser: Bootstrap kompatibel dengan semua browser

modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera).
 26

2.5.8.1 Sistem Grid Bootstrap

Sistem grid pada Bootstrap memungkinkan 12 kolom di sepanjang
halaman pada web. Kolom akan mengatur ulang kolom secara otomatis tergantung
pada ukuran layar. Sistem grid Bootstrap memiliki 4 kelas antara lain:
1. Xs (untuk ponsel – layar kurang dari 768px lebar).
2. Sm (untuk tablet – layar sama atau lebih besar dari 768 piksel).
3. Md (untuk laptop kecil – layar sama atau lebih besar dari lebar 992px).
4. Lg (untuk laptop dan desktop – layar sama atau lebih besar dari 1200
piksel).
Contoh penggunaan Bootstrap adalah sebagai berikut.

<button type=”button” class=”btn btn-danger”>Ini merupakan tombol danger

berwarna merah</button>

Pada contoh di atas untuk membuat tombol berarna merah tidak perlu
menuliskan kode program HTML beserta CSS. Namun hanya menggunakan class
‘btn btn-danger’ maka tombol merah yang seakan-akan tombol bahaya sudah
terbentuk.

2.5.9 Sekilas tentang Balsamiq Mockups

Balsamiq mockups adalah program aplikasi yang digunakan dalam
pembuatan tampilan user interface sebuah aplikasi. Balsamiq mockups
menyediakan tools yang dapat memudahkan dalam membuat desain prototyping
aplikasi yang akan dibuat. Software ini berfokus pada konten yang ingin digambar
dan fungsionalitas yang dibutuhkan oleh pengguna [12].

2.5.10 Sekilas tentang UML

Unified Modelling Language (UML) merupakan alat perancangan sistem
yang berorientasi pada objek. [11] UML merupakan bahasa yang berdasarkan
grafik/gambar untuk memvisualisasi, menspesifikasikan, membangun, dan
mendokumentasikan dari sebuah sistem pengembangan software berbasis OO
(Object-Oriented). Jenis-jenis diagram UML antara lain.
 27

2.5.10.1 Use Case Diagram

Use Case Diagram menggambarkan sekelompok use case dan aktor yang
disertai dengan hubungan diantaranya. Diagram use case ini menjelaskan dan
menerangkan kebutuhan yang diinginkan pengguna, serta sangat berguna dalam
menentukan struktur organisasi dan model dari pada sebuah sistem. Komponen
use case diagram dapat dilihat pada Tabel 2.5.

Tabel 2.5 Komponen Use Case Diagram

GAMBAR NAMA KETERANGAN

Mewakili peran seseorang

Actor atau alat yang berkomunikasi
dengan use case

Menunjukkan bahwa suatu

use case seluruhnya
Include
merupakan fungsionalitas
dari use case lainnya
Menunjukkan bahwa suatu
use case merupakan
Extend tambahan fungsionalitas dari
use case lain jika suatu
kondisi terpenuhi
Penghubung antara actor
Association
dengan use case

Mengartikan paket yang

System menampilkan sistem secara
terbatas

Merupakan abstraksi dari

Use Case interaksi antara sistem
dengan aktor
 28

2.5.10.2 Class Diagram

Class diagram yaitu salah satu jenis diagram pada UML yang digunakan
untuk menampilkan kelas-kelas maupun paket-paket yang ada pada suatu sistem
yang nantinya akan digunakan. Relasi yang terdapat pada Class Diagram antara
lain.
1. Association, menghubungkan link antar elemen
2. Generalization, sebuah elemen yang menjadi spesialisasi dari elemen
lain
3. Dependency, sebuah elemen yang bergantung beberapa cara kepada
elemen lain
4. Aggregation, bentuk association yang dimana sebuah elemen berisi
elemen lain

2.5.10.3 Activity Diagram

Activity Diagram merupakan diagram UML yang menggambarkan tentang
aktifitas yang terjadi pada sebuah sistem. Activity diagram dibuat berdasarkan
sebuah atau beberapa use case pada use case diagram. Komponen activity
diagram dapat dilihat pada Tabel 2.6.

Tabel 2. 6 Komponen Activity Diagram

GAMBAR NAMA KETERANGAN

Tanda dimulai Activity

Star Point
Diagram

Tanda diakhiri Activity

End Point
Diagram

Memperlihatkan
bagaimana masing-
Activities
masing kelas antarmuka
saling berinteraksi
 29

GAMBAR NAMA KETERANGAN

Percabangan yang
Folk
menunjukkan aliran
(Percabangan)
pada Activity Diagram

Penggabungan yang
Join
menjadi arah aliran
(Penggabungan)
pada Activivty Diagram

Pilihan untuk
Decision
mengambil keputusan

2.5.10.4 Flowchart Diagram

Flowchart Diagram merupakan diagram UML yang mempunyai arus yang
menggambarkan suatu langkah untuk menyelesaikan masalah. Sebuah flowchart
berfungsi untuk menggambarkan sebuah alur proses program aplikasi, mulai dari
aplikasi tersebut dijalankan hingga aplikasi tersebut berhenti. Komponen
Flowchart Diagram terdapat pada Tabel 2.7.
Tabel 2. 7 Tabel Komponen Flowchart Diagram

GAMBAR NAMA KETERANGAN

Menyatakan permulaan
Terminator
atau akhir suatu program

Menyatakan jalannya
Flow
arus suatu proses

Menyatakan suatu
Process tindakan (proses) yang
dilakukan oleh komputer
 30

Menunjukkan suatu
kondisi tertentu yang
Decision akan menghasilkan
kemungkinan dua
jawaban iya atau tidak
Memasukkan data secara
manual dengan
Manual Input
menggunakan manual
online keyboard

Menyatakan proses
input/output tanpa
Input/Output
tergantung jenis
peralatannya

2.6 Struktur Navigasi

Struktur navigasi adalah struktur atau alur suatu program yang merupakan
rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat
membantu mengorganisasikan seluruh elemen pembuatan website [13]. Struktur
navigasi sangat membantu dalam pembuatan suatu website. Berikut bentuk dasar
dari struktur navigasi.

1.6.1 Struktur Navigasi Linier

Merupakan struktur navigasi yang hanya mamiliki satu rangkaian alur
berurut seperti yang ditunjukkan pada Gambar 2.7.

Gambar 2. 3. Bagan Struktur Navigasi Linear

1.6.2 Struktur Navigasi Non-Linier

 31

Struktur navigasi Non-linear merupakan pengembangan dari struktur

navigasi linear. Pada struktur navigasi Non-linear diperbolehkan untuk membuat
percabangan seperti yang ditunjukkan pada Gambar 2.8.

Gambar 2. 4. Bagan Struktur Navigasi Non Linear

1.6.3 Struktur Navigasi Hirarki

Merupakan strukur navigasi yang mengutamakan percabangan untuk
menampilkan data. Struktur navigasi hirarki biasa disebut struktur bercabang.
Struktur hirarki bercabang dapat dilihat pada Gambar 2.9.

Gambar 2. 5. Bagan Struktur Navigasi Hirarki

1.6.4 Struktur Navigasi Campuran

Struktur navigasi campuran sering disebut struktur navigasi bebas karena
merupakan gabungan dari tiga struktur navigasi yang berbeda.Struktur navigasi
campuran dapat dilihat pada Gambar 2.10.

Gambar 2. 6. Bagan Struktur Navigasi Campuran