PEMBUATAN APLIKASI DISPLAY JADWAL PERKULIAHAN DAN NILAI UJIAN BERBASIS GADGET.

PEMBUATAN APLIKASI DISPLAY
J ADWAL PERKULIAHAN DAN NILAI UJ IAN
BERBASIS GADGET

SKRIPSI

Oleh :
WIDYA SETYARINI
NPM. 0734010130
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
2012
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

PEMBUATAN APLIKASI DISPLAY
J ADWAL PERKULIAHAN DAN NILAI UJ IAN
BERBASIS GADGET


SKRIPSI

Diajukan Untuk Memenuhi Sebagai Per syaratan
Dalam Memperoleh Gelar Sarjana Komputer
J ur usan Teknik Infor matika

Oleh :
WIDYA SETYARINI
NPM. 0734010130

J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR

2012
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

Judul


: Pembuatan Aplikasi Display Jadwal Perkuliahan Dan Nilai Ujian Berbasis

Pembimbing I
Pembimbing II
Penyusun

: Basuki Rahmat, S.Si., MT
: Agus Hermanto, S.Kom
: Widya Setyarini

Gadget

ABSTRAK
Dalam pembuatan aplikasi display jadwal ini berbasis gadget ini untuk
membantu mahasiswa dalam penyampaian informasi tentang jadwal mata kuliah
sehari hari.
Pada dasarnya aplikasi gadget ini digunakan untuk menampilkan jadwal
matakuliah, tempat berlangsungnya mata kuliah tersebut, serta nilai yang telah di
capai pada semester sebelumnya yang bertujuan sebagai pemacu untuk memperbaiki

nilai selanjtnya. Pengertian gadget sendiri adalah mesin perkakas (Widget
Engine) Microsoft Gadgets, yang diletakkan di pinggir layar desktop windows.
Dengan menggunakan bahasa pemrograman xml serta javascript dalam pembuatan
aplikasi ini.
Dengan adanya aplikasi Display Jadwal Perkuliahan Dan Nilai Ujian Berbasis
Gadget dapat memberikan informasi kepada user.

Kata Kunci : Gadget, XML, Java Script

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

i

KATA PENGANTAR
Alhamdulillah, Penulis bersyukur kepada Allah SWT atas semua Rahmat,
Berkah, dan Ridho-Nya yang telah diberikan kepada penulis sehingga dapat
menyelesaikan Skripsi ini dengan baik.
Dalam menyelesaikan Skripsi ini, penulis berpegang pada teori serta
bimbingan dari para dosen pembimbing Skripsi, dan berbagai pihak yang banyak

membantu hingga terselesaikannya Skripsi ini. Skripsi merupakan salah satu
syarat bagi mahasiswa untuk menyelesaikan program studi Sarjana Strata Satu
(S1) di Jurusan Teknik Informatika Fakultas Teknologi Industri Universitas
Pembangunan Nasional “Veteran” Jawa Timur.
Terwujudnya Skripsi ini adalah berkat usaha, kerja keras serta dukungan dari
berbagai pihak. Dan tanpa menghilangkan rasa hormat, penulis mengucapkan
banyak terima kasih kepada pihak-pihak yang telah membantu penulis antara lain:
1.

Tuhan YME yang selalu memberikan kesehatan, rezeki, kemudahan, dan
kasih-Nya yang besar baik bagi penulis sendiri maupun orang – orang di
sekitar penulis.

2.

Bapak Sutiyono, selaku Dekan Fakultas Teknik Industri Universitas
Pembangunan Nasional "Veteran" Jatim.

3.


Bapak Basuki Rahmat,S.Si, MT., selaku Dosen Pembimbing I Skripsi,
yang telah membimbing, memberikan arahan, dan nasehat. Terima Kasih
Banyak atas bimbingan dan semua nasehat serta arahan yang telah
diberikan.

ii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4.

Bapak Agus Hermanto, S.Kom., selaku Dosen Pembimbing II Skripsi,
yang telah membimbing, memberikan arahan, dan nasehat. Terima Kasih
Banyak atas bimbingan dan semua nasehat serta arahan yang telah
diberikan.

5.

My wonderful parents, brother, n little sister, yang telah memberikan
dorongan baik moril maupun materiil sehingga laporan akhir ini dapat

penulis selesaikan.

6.

Kepada teman teman yaitu kiki’ndut’, indah, gilang, mas diki,
april’kupril’, eko’kribo’, arfin’mbah’, dan yang lainnya, yang senantiasa
mengajari, membantu dan memberi dukungan kepada kita.terima kasih
atas dukungan dan bantuannya.

Penulis menyadari bahwa penulisan ini masih jauh dari kesempurnaan, karena
tiada gading yang tak retak. Oleh sebab itu, penulis mengharapkan kritik dan
saran yang bersifat membangun guna terciptanya kesempurnaan penulisan ini
selanjutnya. Semoga penulisan ini dapat menambah wawasan serta ilmu
pengetahuan bagi siapa saja yang membacanya.
Surabaya,
Penulis

iii
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.


DAF TAR ISI

ABSTRAK........................................................................................................

i

KATA PENGANTAR ..................................................................................

ii

DAFTAR ISI ..............................................................................................

iv

DAFTAR GAMBAR........................................................................................

vii

DAFTAR TABEL ...........................................................................................


ix

BAB I

BAB II

PENDAHULUAN
1.1.

Latar Belakang Masalah ....................................................

1

1.2.

Perumusan Masalah ..........................................................

2


1.3.

Batasan Masalah ...............................................................

3

1.4.

Tujuan ..............................................................................

3

1.5.

Manfaat.............................................................................

4

1.6.


Metodologi Penelitian .......................................................

4

1.7

Sistematika penulisan ........................................................

6

TINJAUAN PUSTAKA
2.1.

Gadget ..............................................................................

8

2.2.

Sejarah Gadget ..................................................................


9

2.3.

Macromedia Dreamweaver ...............................................

10

2.4.

XML .................................................................................

11

2.4.1. Tipe XML .............................................................

11

2.4.2. Tampilan dalam Berbagai Editor ............................

11

2.4.3. Tampilan Kesalahan...............................................

13

2.4.4. Dokumen XML......................................................

14

2.4.5. XML dan HTML ...................................................

18

Karekter XML dan Escaping .............................................

19

2.5.1. Karakter Valid .......................................................

19

2.5.2. Deteksi Encoding ...................................................

20

2.5.3. Escaping ................................................................

20

2.5.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

iv

2.6.

Keunggulan XML .............................................................

22

2.7.

HTML ..............................................................................

23

2.7.1. Kegunaan HTML ...................................................

24

2.7.2. Markup dan Tanda .................................................

26

Java Script ........................................................................

28

2.8.1. Sejarah JavaScript ..................................................

28

PHP ..................................................................................

28

2.9.1. Sejarah PHP ...........................................................

29

2.9.2. Kelebihan PHP ......................................................

30

2.9.3. Tipe Data ...............................................................

31

MySql .............................................................................

31

2.10.1. Keistimewaan MySql ...........................................

32

2.11. XAMPP ...........................................................................

34

2.12. IMK .................................................................................

34

2.8.

2.9.

2.10.

BAB III

BAB IV

Analisis Dan Perancangan Sistem
3.1.

Analisa sistem ....................................................................

38

3.2.

Analisa Kebutuhan .............................................................

38

3.3.

Perancangan Sistem ...........................................................

38

3.3.1. Diskripsi Umum Sistem .........................................

40

3.3.2. Kebutuhan Sistem ..................................................

40

3.3.3. Kebutuhan Pengguna .............................................

41

3.3.4. Block dan Flowchart ..............................................

41

3.4.

Perancangan Antar Muka ...................................................

44

3.5.

Contoh Tabel pada MySql..................................................

46

3.5.1. Tabel User .............................................................

46

3.5.2. Tabel Matakuliah ...................................................

47

3.5.3. Tabel Nilai .............................................................

48

3.5.4. Tabel Jadwal ..........................................................

49

IMPLEMENTASI SISTEM
4.1.

Lingkungan Implementasi ..................................................

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

v

51

4.2. Implementasi Sistem ...........................................................

51

4.2.1. Membut Project Pada M. Dreamweaver...................

52

Implementasi Antarmuka ...................................................

63

4.3.1. Form Informasi Jadwal ............................................

64

4.3.2. Form Informasi Nilai ...............................................

65

4.3.3. Form Option Setting ................................................

65

4.3.

BAB V

Uji Coba Dan Evaluasi
5.1.

Lingkungan Uji Coba.........................................................

66

5.2.

Skenario Uji Coba..............................................................

66

5.3.

Pelaksanaan Uji Coba ........................................................

67

5.3.1.

Uji coba Installasi .................................................

67

5.3.2.

Uji coba setting NPM ............................................

69

5.3.3.

Uji coba Menampilkan Nilai .................................

71

5.3.4.

Uji coba Uninstall Program ...................................

72

Evaluasi .............................................................................

72

5.4.

BAB VI

KESIMPULAN DAN SARAN
6.1.

Kesimpulan…….. ..............................................................

6.2.

Saran……………. ............................................................. .. 74

DAFTAR PUSTAKA

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

vi

73

D A F T AR G A M B A R

Gambar 2.1

Tampilan Notepad .................................................................

12

Gambar 2.2

Tampilan Firefox ...................................................................

12

Gambar 2.3

Tampilan Internet Explorer ....................................................

13

Gambar 2.4

Tampilan Kesalahan ..............................................................

13

Gambar 2.5

Keterangan XML ...................................................................

14

Gambar 2.6

Contoh HTML .......................................................................

18

Gambar 2.7

Contoh pseudocode................................................................

22

Gambar 2.8

Contog pseudocode HTML ....................................................

27

Gambar 3.1

Alur Sistem............................................................................

40

Gambar 3.2

Block Gadget .........................................................................

42

Gambar 3.3

Flowchart Utama Program .....................................................

43

Gambar 3.4

Flowchart Proses Program .....................................................

44

Gambar 3.5

Rancangan Antarmuka ...........................................................

45

Gambar 3.6

Antarmuka Menu Utama ........................................................

45

Gambar 3.7

Antarmuka Option .................................................................

46

Gambar 4.1

Memulai Project Macromedia Dreamweaver .........................

52

Gambar 4.2

Tombol Icon .........................................................................

53

Gambar 4.3

Insert Bar ...............................................................................

53

Gambar 4.4

Cara Menyimpan ..................................................................

56

Gambar 4.5

Tampilan di Control Panel .....................................................

57

Gambar 4.6

Tampilan Form Informasi Jadwal ..........................................

64

Gambar 4.7

Tampilan Form Informasi Nilai ............................................

65

Gambar 4.8

Tampilan Form Option Setting...............................................

65

Gambar 5.1

Laptop Toshiba L645 .............................................................

67

Gambar 5.2

File Gadget ............................................................................

68

Gambar 5.3

Tampilan installasi ................................................................

68

Gambar 5.4

Tampilan Gadget ...................................................................

68

Gambar 5.5

Option Setting........................................................................

69

Gambar 5.6

Perubahan NPM .....................................................................

69

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

vii

Gambar 5.7

Tampilan Pemindahan NPM ..................................................

70

Gambar 5.8

Tampilan tidak ada NPM .......................................................

70

Gambar 5.9

Tampilan Nilai .......................................................................

71

Gambar 5.10

Tampilan di Control Panel ...................................................

71

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

viii

DAFTAR TABEL

Tabel 3.1

Tabel User .................................................................................

46

Tabel 3.2

Tabel Matakuliah .......................................................................

47

Tabel 3.3

Tabel Nilai ................................................................................

48

Tabel 3.4

Tabel Jadwal..............................................................................

49

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

ix

BAB I
PENDAHULUAN

1.1. Latar Belakang Masalah

Saat ini perkembangan komputer terutama aplikasi, berkembang dengan
pesatnya guna mengurangi batasan-batasan yang dapat menghambat berbagai
macam kinerja manusia dalam mencari suatu informasi. Setelah meraih
kesuksesan dengan Windows XP dalam kurun waktu lebih dari 10 tahun,
Microsoft akhirnya mengeluarkan versi Windows 7. Windows 7 mempunyai
banyak keistimewaan yang baru, khususnya pada bagian keamanan dan
ketahanan. Terpisah dengan itu, juga terdapat banyak perubahan tampilan,
khususnya yang berguna untuk user. Berinteraksi dengan sistem operasi dan
bagaimana mengatur sekumpulan informasi yang banyak.
Salah satu fitur yang penting dalam Windows 7 adalah Gadget atau Sidebar.
Windows Gadget atau Sidebar adalah panel transparan yang berada di
halaman desktop yang berisi aplikasi - aplikasi kecil yang menyediakan informasi
yang dapat dilihat secara sekilas oleh user yang dikenal dengan Sidebar
Gadget. Sidebar Gadget memberikan cara yang mudah untuk mengakses
informasi yang terbaru yang dengan segera dapat dipergunakan tanpa user harus
menggunakan aplikasi dengan skala yang besar terlebih dahulu dan dapat dengan
mudah dibuat oleh developer yang menguasai HTML dan bahasa script seperti
JavaScript. Sidebar Gadget mirip seperti Yahoo! Widget Engine milik Yahoo dan
Apple’s Dashboard pada Mac OS.
Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

1

2

Dengan adanya Sidebar Gadget dan teknologi internet yang semakin
maju, hal tersebut dapat dimanfaatkan untuk memperoleh informasi mengenai
jadwal mata kuliah yang telah berlangsung serta mengetahui tempat
berlangsungnya dan juga dapat menampilkan nilai ujian pada semester
sebelumnya. Berguna untuk penyampaian informasi yang lebih akurat ke
mahasiswa untuk keperluan pendidikan.
Penggunaan

Teknologi

Informasi

dalam

suatu

instansi

harus

disesuaikan dengan sistem informasi operasional yang dibutuhkan oleh
instansi tersebut. Untuk itu, perlu pengembangan sistem informasi agar dapat
memperoleh kesempatan-kesempatan yang tidak dapat dimiliki oleh
penggunaan sistem manual, misalnya untuk menampilkan jadwal mata kuliah
yang sedang berlangsung kepada mahasiswa yang bersangkutan. Gadget
merupakan salah satu bentuk aplikasi informasi yang digunakan untuk
membantu menampilkan suatu informasi. Gadget bermanfaat untuk
menyediakan informasi yang cukup akurat di dalam menyediakan informasi
jadwal mata kuliah yang sedang berlangsung.

1.2. Perumusan Masalah
Berdasarkan latar belakang masalah di atas, dapat dirumuskan beberapa
permasalahan antara lain:
a) Bagaimana cara membuat Sidebar Gadget pada Windows 7?
b) Bagaimana menampilkan jadwal mata kuliah dan nilai pada semester
sebelumnya dengan praktis sebagai pengingat?

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

3

c) Bagaimana cara menghubungkan Sidebar Gadget dengan database
(sebagai penyimpan data) untuk dapat menampilkannya di gadget?

1.3. Batasan Masalah
Adapun batasan masalah dari pembahasan aplikasi ini adalah sebagai
berikut:
a) Aplikasi ini hanya dapat memberikan informasi jadwal kuliah, serta
tempat berlangsungnya mata kuliah tersebut dan nilai dari mata kuliah
pada semester yang telah di tempuh (satu semester di bawah semester
yang berlangsung).
b) Nilai yang muncul hanya nilai dari nilai semester yang lalu (satu
semester di bawah semester yang berlangsung).
c) Aplikasi ini tidak dapat menampilkan jadwal ujian, baik jadwal ujian
tengah semester maupun jadwal ujian akhir semester ataupun jadwal
ujian lainnya.
d) pengguna aplikasi ditujukan pada semua merk laptop atau computer
dengan system operasi windows 7.

1.4. Tujuan
Ditinjau dari latar belakang tersebut diatas maka, tujuan dibuatnya aplikasi
ini adalah untuk mempermudah dan membantu Mahasiswa memperoleh informasi
tentang jadwal perkuliahannya, tempat berlangsungnya serta nilai yang telah
didapat pada semester sebelumnya.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

4

1.5. Manfaat
Adapun manfaat dari dibuatnya Tugas Akhir ini adalah :
a)

Dengan dibuatnya aplikasi ini, maka diharapkan dapat membantu
mahasiswa untuk mengetahui jadwal perkuliahan yang sedang
berlangsung serta dapat melihat nilai yang telah didapat pada semester
sebelumnya.

b) Aplikasi ini dapat digunakan untuk semua mahasiswa yang sedang
mengikuti kuliah dan memiliki jadwal tetap pada semester tersebut.
c)

aplikasi ini sebagai pengingat mahasiswa akan jadwal mata kuliahnya.

1.6. Metodologi Penelitian
Langkah – langkah yang digunakan dalam penyusunan Tugas Akhir disini
menggunakan metode penelitian berikut :
a)

Studi Literatur
Pada tahap ini dipelajari literatur dan perencanaan serta konsep awal
untuk membentuk program yang akan dibuat yaitu didapat dari
referensi buku, internet, maupun sumber – sumber yang lain.

b) Pengumpulan Data Dan Analisis
Pada tahap ini adalah prosses pengumpulan data yang dibutuhkan untuk
pembuatan program, serta melakukan analisis serta pengamatan pada
data yang sudah terkumpul untuk selanjutnya diolah lebih lanjut.
c) Analisis Dan Perancangan Sistem
Setelah selesai pada tahap pengumpulan data dan analisis maka tahap
selanjutnya adalah melakukan analisis dan perancangan sistem. Pada

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

5

tahap ini adalah prosses perancangan dari sistem yang akan dibuat
untuk selanjutnya akan diprosses lebih lanjut.
d) Pembuatan Program
Setelah tahap perancangan sistem maka tahap selanjutnya adalah
pembuatan program. Pada tahap ini sistem yang sebelumnya telah
dibuat akan diterapkan pada program yang akan dibuat. Pembuatan
program ini menggunakan XML (Extensible Markup Language)
adalah bahasa

markup untuk

keperluan umum yang

disarankan

oleh W3C untuk membuat dokumen markup keperluan pertukaran data
antar sistem yang

beraneka

ragam. XML

merupakan

kelanjutan

dari HTML (HyperText Markup Language) yang merupakan bahasa
standar untuk melacak Internet. Pada pembuatan program ini tidak
hanya menggunakan XML maupun HTML saja, tetapi juga didukung
oleh PHP serta JavaScript.
e) Uji Coba Program
Setelah program selesai dibuat maka dilakukan pengujian program
untuk mengetahui apakah program tersebut telah bekerja dengan benar
dan sesuai dengan sistem yang dibuat.
f) Pembuatan Kesimpulan
Pada tahap akhir ini adalah peembuatan kesimpulan atau ringkasan dari
makalah Tugas Akhir ini dan kesimpulan tentang program yang telah
dibuat.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

6

1.7. Sistematika Penulisan
Penulisan yang digunakan dalam laporan Tugas Akhir ini adalah sebagai
berikut :
BAB I

PENDAHULUAN
Pada bab

ini membahas mengenai latar

permasalahan,

tujuan,

manfaat,

batasan

belakang,
masalah,

metodologi penulisan, dan sistematika penulisan.
BAB II

LANDASAN TEORI
Bab ini berisikan mengenai teori – teori yang behubungan
tentang pembuatan aplikasi

gadget dan sistematika

penulisan laporan Tugas Akhir.
BAB III

ANALISIS DAN PERANCANGAN SISTEM
Berisi tentang analisis dan perancangan dari sistem yang
akan dibangun meliputi analisis data, analisis masalah,
analisis pemecahan masalah dan perancangan sistem yang
meliputi penyusunan desain antar muka (interface) yang
nantinya akan dipakai pada sistem.

BAB IV

IMPLEMENTASI PROGRAM
Berisi tentang implementasi sistem secara keseluruhan
mulai dari implementasi data yang diperlukan oleh sistem
hingga coding program untuk implementasi aplikasi.

BAB V

UJI COBA DAN EVALUASI
Bab ini membahas tentang cara menjalankan aplikasi serta
uji coba dari program yang telah dibuat tersebut.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

7

BAB VI

PENUTUP
Bab ini berisikan kesimpulan yang dapat diambil dari
keuntungan sistem serta berisi tentang saran – saran yang
diambil dari kelemahan sistem untuk perbaikan guna
pengembangan lebih lanjut bagi sistem yang telah dibuat.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

BAB II
TINJ AUAN PUSTAKA

2.1. Gadget
Windows Sidebar (disebut sebagai "Windows Desktop Gadgets" pada
Windows 7) adalah mesin perkakas (Widget Engine) Microsoft Gadgets, yang
diletakkan di pinggir layar desktop windows. Fitur ini pertama kali diperkenalkan
pada Windows Vista dan dapat melakukan berbagai jenis operasi, seperti
menampilan waktu, tanggal, pemanfaatan CPU, dan lain-lain. Beberapa jenis
perkakas ini telah disediakan bersama distribusi WIndows, namun siapapun bisa
membuat dan menambahkan perkakas-perkakas lainnya.
Windows Sidebar terdiri atas sejumlah aplikasi mini atau disebut sebagai
gadget berbasis kombinasi atas skrip dan HTML. Kombinasi tersebut digunakan
untuk menampilkan informasi seperti halnya waktu sistem, dan fitur-fitur lainnya
yang memanfaatkan keberadaan internet seperti menampilkan unduhan file RSS,
dan mengontrol aplikasi eksternal seperti Windows Media Player. Gadget-gadget
tersebut dapat dilabuhkan pada Windows Sidebar, atau dapat pula ditampilkan
dalam posisi mengambang pada layar. Selain itu pula beberapa gadget yang sama
dapat berjalan secara bersamaan.
Windows Vista membawa serta delapan macam gadget siap pakai. Gadgetgadget tersebut adalah: Calendar, Clock, Contact, CPU Meter, Currency
conversion, RSS Feed Headlines, Notes, Picture Puzzle, Slide Show, Stocks, dan
Weather. Dari gadget-gadget tersebut, Clock, Slide Show, dan Feed Headlines
merupakan gadget standar yang ditampilkan pada setiap instalasi baru Windows

8

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

9

Vista. Microsoft menyediakan tautan ke situs web yang disebut sebagai
Windows Live Gallery sebagai tempat mengunduh Gadget-Gadget lain yang telah
dibuat oleh pihak ketiga.

2.2. Sejarah Gadget
Sidebar berawal dari proyek Microsoft Research yang dinamakan Sideshow
(dalam ini pengertian SideShow tidak sama dengan Windows SideShow) yang
dikembangkan pada musim panas tahun 2000, dan digunakan oleh Microsoft
secara internal. Sideshow banyak memiliki kemiripan dengan perangkat lunak
desktop Gadget saat ini, termasuk dalam hal ini Gadget jam, laporan lalu lintas,
dan integrasi Instant Messenger (IM).
Sidebar pertama kali muncul pada versi "Longhorn" (Windows Vista) awal
september 2002, dan ditujukan sebagai pengganti area notifikasi pada Taskbar
(Quick Lauch) yang terdapat di Windows, namun rencana tersebut akhirnya
dibatalkan pada pertengahan tahun 2004. Windows Sidebar akhirnya dibuat ulang
dan muncul kembali di Windows Vista pada pertengahan tahun 2005.
Beberapa pengamat dan fanatik Macintosh mendapati kemiripan baik fungsi
maupun bentuk antara Microsoft Sidebar dengan Yahoo! Widgets, dan widget
dasbor yang disertakan pada komputer Mac OS X, yang telah dirilis beberapa
bulan lebih awal. Namun patut dicatat dalam hal ini bahwa Windows Sidebar
sebelumnya telah muncul pada Longhorn jauh sebelum Yahoo! Widget dan
Dasborad membuat debut pertama mereka. Pada Windows 7, nama Windows
Sidebar diubahsuai menjadi Windows Desktop Gadgets, dan keberadaan Sidebar
itu sendiri pada Windows 7 telah dihilangkan.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

10

2.3. Macr omedia Dr eamweaver
Adobe

Dr eamweaver merupakan program

web keluaran Adobe

Systems yang

dulu

penyunting

dikenal

halaman

sebagai Macr omedia

Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh
pengembang

web

karena

fitur-fiturnya

yang

menarik

dan

kemudahan

penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia
dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran
Adobe Systems adalah versi 10 yang ada dalam Adobe Creative Suite 4 (sering
disingkat Adobe CS4).
Macromedia Dreamweaver is sebuah editor HTML profesional untuk
mendesain

secara

visual

dan

mengelola website dan

halaman

web.

Konsep WYSYWIG (What You See IS What You Get) HTML (HyperText Markup Language) akan memberikan anda membuat membuat halaman web dan web
sites secara mudah dan cepat. Tetapi dibalik semuanya itu, dreamweaver juga
memberikan anda kemudahan mempelajari DHTML (Dynamic HTML), yang bisa
membuat website lebih menarik dan lebih interaktif. Tidak hanya berhenti disini,
dreamweaver juga mempunyai fasilitas FTP (File Transfer Protocol) untuk upload
situs anda ke Internet ketika proses desain sudah selesai dibuat.
Fasilitas Dreamweaver termasuk juga coding tools dan features: HTML,
CSS, dan J avaScript reference, a JavaScript Debugger, dan code editors (the
Code view and Code inspector)yang bisa untuk mengedit JavaScript, XML, dan
dokumen text lainnya secara langsung dalam

Dreamweaver. Teknologi

Macromedia tentang HTML mengimport dokumen HTML tanpa memformat

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

11

ulang code nya - dan anda bisa dengan mudah mengeset Dreamweaver untuk
membersihkan dan memformat ulang HTML kapan pun anda inginkan.

2.4. XML
XML (Extensible

Markup

Language)

adalah bahasa

markup untuk

keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup
keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan
kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa
standar untuk melacak Internet.
XML didesain untuk mempu menyimpan data secara ringkas dan mudah
diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah
bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun
bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya,
XML dapat digunakan untuk menggambarkan sembarang viewdatabase, tetapi
dengan suatu cara yang standar.
2.4.1

Tipe XML:

XML memiliki tiga tipe file:
a) XML: merupakan standar format dari struktur berkas (file)
b) XSL: merupakan standar untuk memodifikasi data yang diimpor atau
diekspor.
c) XSD: merupakan standar yang mendefisinikan struktur database dalam
XML
2.4.2

Tampilan dalam berbagai editor teks:

a) Notepad:

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

12

Kita dapat menggunakan editor teks biasa seperti notepad untuk membuat
atau melihat file XML sederhana. Inilah file XML yang terlihat seperti di notepad:

Gambar 2.1 Tampilan Notepad

b) Fir efox:
Berikut adalah cara file XML muncul di firefox 2.0. perbedaan antara
Notepad dengan firefox, firefox benar – benar mencoba untuk menafsirkan
dokumen.

Gambar 2.2 Tampilan Firefox

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

13

c) Internet Explor er :
Inilah tampilan dalam internet explorer

Gambar 2.3 Tampilan Internet Explorer

2.4.3

Tampilan kesalahan
Jika dokumen XML mengandung kesalahan, maka dokumen XML harus

menampilkan kesalahan tersebut. Inilah contoh tampilan apabila terjadi kesalahan.
Berikut tampilan kesalahan dalam Internet Explorer:

Gambar 2.4 Tampilan Kesalahan

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

14

2.4.4

Dokumen XML
Ini adalah bagaimana dokumen XML di bangun. Mirip dengan sebuah

dokumen HTML. Dokumen XML terdiri dari barang – barang di bagian atas, di
ikuti oleh konten (isi). Perhatikan contoh XML berikut:






XML Tutorial
http://www.quackit.com/xml/tutorial


HTML Tutorial
http://www.quackit.com/html/tutorial


Keterangan dari bagian di atas, sebagai berikut:

Gambar 2.5 Keterangan XML

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

15

a) Prolog: Tepat di bagian atas dokumen, terdiri atas Prolog. Prolog adalah
opsional, tetapi jika dimasukkan maka harus pada awal dokumen. Prolog
dapat berisi hal – hal seperti deklarasi XML, komentar, instruksi
pemrosesan, deklarasi dokumen. Meskipun prolog dan segala isinya
adalah opsional atau pilihan, direkomendasikan untuk menyertakan
deklarasi XML dalam deklarasi XML.
b) Deklarasi XML: menunjukkan bahwa dokumen ditulis dalam XML dan
menentukan versi XML. Deklarasi XML, jika disertakan, harus pada baris
pertama dokumen. Deklarasi XML juga dapat menentukan bahasa untuk
pengkodean dokumen (opsional) dan jika aplikasi mengacu pada entitas
eksternal (opsional). Dalam contoh diatas, ditetapkan bahwa dokumen
menggunakan

UTF-8

encoding

(meskipun kita

tidak benar-benar

perlu sebagai UTF-8 adalah default), dan bahwa dokumen mengacu pada
entitas eksternal dengan menggunakan standalone=”no”, ini bukan
dokumen mandiri karena bergantung pada sumber daya eksternal (yaitu
DTD). Meskipun deklarasi XML adalah opsional, W3C menyarankan
menggunakannya dalam dokumen XML. Dalam hal apapun perlu
deklarasi XML untuk berhasil memvalidasi dokumen.
c) DTD (Definisi Tipe Dokumen): mendefinisikan aturan dokumen XML.
Meskipun XML itu sendiri memiliki aturan, aturan yang ditetapkan dalam
DTD adalah khusus untuk kebutuhan sendiri. Lebih khusus, DTD
memungkinkan untuk menentukan nama-nama unsur-unsur yang diizinkan
dalam dokumen, yang unsur-unsur yang diizinkan untuk bersarang di
dalam unsur-unsur lain, dan yang elemen hanya dapat berisi data.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

16

DTD digunakan ketika memvalidasi dokumen XML. Setiap aplikasi yang
menggunakan dokumen harus menghentikan pengolahan jika dokumen
tidak mematuhi DTD. DTD dapat internal (yaitu yang ditentukan dalam
dokumen) atau eksternal (yaitu ditentukan di file eksternal). Dalam contoh
tersebut, DTD eksternal.
d) Komentar: XML komentar dimulai dengan .
Mirip dengan komentar HTML, komentar XML memungkinkan untuk
menuliskan hal-hal dalam dokumen tanpa menjadi diurai oleh prosesor.
Biasanya menulis komentar sebagai penjelasan untuk diri sendiri atau
programmer lain. Komentar dapat muncul di mana saja dalam dokumen.
e) Instruksi Pengolahan: Instruksi pemrosesan dimulai dengan . Instruksi pemrosesan,

instruksi untuk prosesor

XML. Instruksi pengolahan tidak dibangun ke dalam rekomendasi
XML. Sebaliknya, mereka tergantung prosesor sehingga tidak semua
prosesor memahami semua instruksi pemrosesan.
f) Ruang Putih: Spasi hanyalah ruang kosong yang diciptakan oleh baris, tab,
dan / atau spasi. Ruang putih tidak mempengaruhi pengolahan dokumen,
sehingga

dapat

memilih

untuk

menyertakan

spasi

atau

tidak.

Secara teknis, rekomendasi XML menetapkan bahwa dokumen XML
menggunakan konvensi UNIX untuk akhir baris. Ini berarti bahwa harus
menggunakan karakter linefeed saja (kode ASCII 10) untuk menunjukkan
akhir baris. Berbicara tentang ruang putih, ada atribut khusus (xml: spasi)
yang dapat digunakan untuk melestarikan spasi dalam elemen.

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

17

g) Elemen dan Konten: Ini adalah di mana isi dokumen berjalan. Ini terdiri
dari satu atau lebih elemen, bersarang dalam elemen root. Elemen akar
Membuka Tag Semua dokumen XML harus memiliki satu (dan hanya
satu) elemen root. Semua elemen lainnya harus bersarang di dalam elemen
root. Dengan kata lain, elemen root harus mengandung semua elemen
lainnya dalam dokumen. Oleh karena itu, tag pertama dalam dokumen
akan selalu tag pembuka dari elemen root (tag penutup akan selalu di
bagian bawah dokumen).
h) Anak Elemen dan Konten: Ini adalah elemen-elemen yang terkandung

dalam elemen root. Elemen biasanya diwakili oleh pembuka dan tag
penutup. Data dan elemen lainnya berada antara pembukaan dan tag
penutup dari suatu elemen. Meskipun elemen yang paling mengandung
pembuka dan tag penutup, XML memungkinkan untuk menggunakan
elemen

kosong. Sebuah

elemen

kosong

adalah

satu

tanpa

tag

penutup. Anda mungkin akrab dengan beberapa elemen kosong yang
digunakan dalam HTML seperti elemen atau elemen . Dalam
XML, harus menutup elemen kosong dengan garis miring sebelum
simbol>. Sebagai contoh, . Elemen juga dapat berisi satu atau lebih
atribut. Sebuah atribut adalah pasangan nama / nilai, yang menempatkan
dalam tag pembuka, yang memungkinkan untuk memberikan informasi
tambahan tentang elemen. Mungkin akrab dengan atribut dalam
HTML. Sebagai contoh, HTML membutuhkan tag img src atribut yang
menentukan lokasi dari suatu gambar (misalnya, ).

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

18

i) Root

Element

Closing

Tag

(Akar

Elemen

Tag

Penutup

Tag): terakhir dari dokumen akan selalu menutup tag dari elemen root. Hal
ini karena semua elemen lain yang bersarang di dalam elemen root
(Choiroel, 2010).
2.4.5

XML dan HTML:

XML dan HTML, keduanya dapat digunakan untuk aplikasi web dan
pertukaran data. Lalu buat apa membuat bahasa baru untuk keperluan yang sama,
apakah XML akan menggantikan HTML? Jawabannya tentu saja tidak. Meski
kelihatannya mirip dengan HTML (HyperText Markup Language), kedua bahasa
ini berbeda. HTML menitikberatkan pada bagaimana format tampilan dari data,
sedangkan XML menitikberatkan pada struktur dan konteksnya.
XML dan HTML dibuat untuk tujuan yang berbeda dan keduanya saling
melengkapi. Sebuah file HTML tersusun atas tag-tag yang mengatur bagaimana
data dalam file itu akan ditampilkan, tetapi tidak ada informasi mengenai isi dari
data tersebut. Didalam file XML, kandungan informasi berbentuk format yang
terstruktur. Dengan XML data dan tampilannya dibuat terpisah.
Perhatikan contoh sebuah file HTML seperti berikut:

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

19

Gambar 2.6 Contoh HTML
2.5.

Karakter XML dan Escaping
Dokumen XML terdiri sepenuhnya karakter dari Unicode repertoar. Kecuali

untuk sejumlah kecil khusus dikecualikan kontrol karakter , setiap karakter
didefinisikan oleh Unicode mungkin muncul dalam konten dari sebuah dokumen
XML. Pemilihan karakter yang mungkin muncul dalam markup agak lebih
terbatas namun tetap besar.
XML

termasuk

fasilitas

untuk

mengidentifikasi pengkodean karakter

Unicode yang menyusun dokumen, dan untuk mengekspresikan karakter yang,
untuk satu alasan atau lainnya, tidak dapat digunakan secara langsung.
2.5.1

Karakter Valid:
poin kode Unicode dalam rentang berikut ini berlaku di XML 1.0

dokumen:
a) 0009 U, U +000 A, U +000 D: ini adalah C0 hanya mengendalikan
diterima XML 1.0;
b) U

+0020-

U

+

D7FF,

U

+

E000-U

+

FFFD:

ini

termasuk beberapa (tidak semua) non-karakter dalam BMP (semua
pengganti, U + FFFE dan U + FFFF dilarang);
c) U +10000- U +10 FFFF: ini termasuk poin semua kode di pesawat
tambahan, termasuk non-karakter.
XML 1.1 memperpanjang set karakter yang diizinkan untuk memasukkan
semua di atas, ditambah karakter yang tersisa dalam kisaran U +0001- U 001
F. Pada saat yang sama, bagaimanapun, membatasi penggunaan C0 dan karakter

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

20

kontrol C1 selain 0009 U, U +000 A, U +000 D, dan U 0085 dengan
mengharuskan mereka yang akan ditulis dalam bentuk lolos (misalnya U 0001
harus ditulis sebagai atau setara). Dalam kasus C1 karakter, pembatasan ini adalah
ketidakcocokan

mundur,

melainkan diperkenalkan untuk memungkinkan

kesalahan pengkodean umum untuk dideteksi. Titik kode U +0000 adalah satusatunya karakter yang tidak diperbolehkan dalam XML 1.0 atau 1.1 dokumen.
2.5.2

Deteksi Encoding:

Set karakter Unicode dapat dikodekan ke dalam byte untuk penyimpanan atau
transmisi dalam berbagai cara yang berbeda, yang disebut "encoding". Unicode
itu sendiri mendefinisikan pengkodean yang meliputi seluruh repertoar dikenal
dengan baik termasuk UTF-8 dan UTF-16. Ada banyak pengkodean teks yang
lain yang pra-date Unicode, seperti ASCII dan ISO / IEC 8859; karakter mereka
repertoar di hampir setiap kasus adalah subset dari set karakter Unicode.
XML memungkinkan penggunaan salah satu encoding Unicode-didefinisikan,
dan setiap pengkodean karakter lain yang juga muncul dalam Unicode. XML juga
menyediakan mekanisme dimana prosesor XML dipercaya bisa, tanpa
pengetahuan sebelumnya, menentukan encoding yang digunakan. Encodings
selain UTF-8 dan UTF-16 belum tentu diakui oleh setiap parser XML.
2.5.3

Escaping
XML menyediakan escaping, termasuk fasilitas untuk karakter yang

bermasalah untuk memasukkan langsung. Sebagai contoh:

Hak Cipta © milik UPN "Veteran" Jatim :
Dilarang mengutip sebagian atau seluruh karya tulis ini tanpa mencantumkan dan menyebutkan sumber.

21

a) Karakter "", & merupakan ' mewakili ', dan " mewakili "sebuah.
diizinkan Semua Unicode karakter dapat diwakili dengan acuan karakter
numerik . Pertimbangkan karakter Cina "中", yang kode numerik dalam Unicode
adalah 4E2D heksadesimal, atau desimal 20.013. Seorang pengguna keyboard
yang tidak memberikan suatu metode untuk memasukkan karakter ini masih bisa
menyisipkan

dalam

dokumen

XML

disandikan

baik

sebagai 中 atau 中 ". Demikian pula, string I