PEMBUATAN APLIKASI DISPLAY JADWAL PERKULIAHAN DAN NILAI UJIAN BERBASIS GADGET.

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

J ADWAL PERKULIAHAN DAN NILAI UJ IAN

BERBASIS GADGET

SKRIPSI

Diajukan Untuk Memenuhi Sebagai Per syar atan

Dalam Memper oleh Gelar Sar jana 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

Pembimbing II : Agus Hermanto, S.Kom Penyusun : Widya Setyarini

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.

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

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,

2.7.1. Kegunaan HTML ... 24

BAB III Analisis Dan Perancangan Sistem 3.1. Analisa sistem ... 38

4.3. Implementasi Antarmuka ... 63

4.3.1. Form Informasi Jadwal ... 64

4.3.2. Form Informasi Nilai ... 65

4.3.3. Form Option Setting ... 65

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

5.4. Evaluasi ... 72

BAB VI KESIMPULAN DAN SARAN 6.1. Kesimpulan…….. ... 73

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

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 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 5.9 Tampilan Nilai ... 71

Tabel 3.1 Tabel User ... 46

Tabel 3.2 Tabel Matakuliah ... 47

Tabel 3.3 Tabel Nilai ... 48

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

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

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

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

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

1.7. Sistematika Penulisan

Penulisan yang digunakan dalam laporan Tugas Akhir ini adalah sebagai

berikut :

BAB I PENDAHULUAN

Pada bab ini membahas mengenai latar belakang,

permasalahan, tujuan, manfaat, batasan 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

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

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.

Gadget-gadget 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

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. Sejar ah 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

2.3. Macr omedia Dr eamweaver

Adobe Dr eamweaver merupakan program penyunting halaman

web keluaran Adobe Systems yang dulu dikenal sebagai Macr omedia

Dr eamweaver 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

Mark-up 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 avaScr ipt 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

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 ber bagai editor teks:

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.

c) Inter net Explor er :

Inilah tampilan dalam internet explorer

Gambar 2.3 Tampilan Internet Explorer

2.4.3 Tampilan k esalahan

Jika dokumen XML mengandung kesalahan, maka dokumen XML harus

menampilkan kesalahan tersebut. Inilah contoh tampilan apabila terjadi kesalahan.

Berikut tampilan kesalahan dalam Internet Explorer:

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 version="1.0" encoding="UTF-8" standalone="no"?>

<name>XML Tutorial</name>

<url>http://www.quackit.com/xml/tutorial</url> </tutorial>

<tutorial>

<name>HTML Tutorial</name>

<url>http://www.quackit.com/html/tutorial</url> </tutorial>

</tutorials>

Keterangan dari bagian di atas, sebagai berikut:

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 (meskipunkita tidakbenar-benar

perlusebagai 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

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 <- dan diakhiri 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 <?dan

diakhiri 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)

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

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 <img> atau elemen <br>.Dalam

XML, harus menutup elemen kosong dengan garis miring sebelum

simbol>.Sebagai contoh, <br />.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, <img src="myImage.gif"

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 da n 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.

Gambar 2.6 Contoh HTML

2.5. Kar akter 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 Kar akter Valid:

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

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

satu-satunya 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

a) Karakter "<" dan "&" adalah penanda sintaksis kunci dan

mungkin tidak pernah muncul dalam konten luar

sebuah CDATA bagian.

b) Beberapa pengkodean karakter hanya mendukung subset dari Unicode:

misalnya, adalah legal untuk mengkodekan dokumen XML dalam

ASCII, tetapi tidak memiliki poin ASCII kode untuk karakter Unicode

seperti "é".

c) Ini mungkin tidak mungkin untuk mengetik karakter pada mesin

penulis.

d) Beberapa karakter memiliki mesin terbang yang tidak dapat secara

visual dibedakan dari karakter lain: contoh non-breaking-ruang ( ) dan

Surat Modal Cyrillic A ( &#xa0; &#x410; ).

Ada lima entitas yang telah ditetapkan: &lt; mewakili &gt; mewakili

">", &amp; merupakan &apos; mewakili ', dan &quot; 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 &#20013; atau &#x4e2d; ". Demikian pula, string I <3 Jörg"dapat

dikodekan untuk dimasukkan dalam dokumen XML sebagai" I &lt;3

J&#xF6;rg "." &#0; "tidak diperbolehkan, namun sebagai karakter null adalah

referensi karakter angka. Sebuah mekanisme pengkodean alternatif

seperti Base64 diperlukan untuk mewakili karakter seperti.

<? Xml? Version = "1.0" encoding = "UTF-8">

< > мова Кит айська </ >

2.6. Keunggulan XML

Beberapa keunggulan XML adalah

a) Pintar (Intelligence). XML dapat menangani berbagai tingkat (level)

kompleksitas.

b) Dapat beradaptasi. Dapat mengadaptasi untuk membuat bahasa sendiri,

seperti Microsoft membuat bahasa MAXML atau Macromedia

mengembangkan MXML.

c) Mudah pemeliharaannya.

d) XML lebih sederhana.

e) Mudah dipindah-pindahkan (Portability). XML mempunyai kemudahan

perpindahan (portabilitas) yang lebih bagus.

Ga mbar 2.7 Contoh pseudocode

2.7.

HTML

Hyper Text Mar kup Language (HTML) adalah sebuah bahasa markup yang

digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi

di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang

ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud

yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak

pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi

home page dengan perintah-perintah HTML (Komputer, Wahana. 2006).

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia

penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized

Markup Language), HTML adalah sebuah standar yang digunakan secara luas

untuk menampilkan halaman web. HTML saat ini merupakan

standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World

dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989

(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

1) Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan

mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM

kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks

dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan

Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai

basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup

Language atau GML.

2) Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang

dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (

ISO 8879 ) yang menyatakan markup language sebagai standar untuk

pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik

IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized

Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk

pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar

perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna

untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World

Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah

berkembang XHTML yang merupakan pengembangan dari HTML.

2.7.1 Kegunaan HTML:

b) Membuat Pranala.

c) Mengintegerasikan berkas suara dan rekaman gambar hidup.

d) Membuat form interaktif.

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam

dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau

lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan

ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya

dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk

mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan

diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

HTML lebih menekankan pada penggambaran komponen-komponen struktur

dan formating di dalam halaman web daripada menentukan penampilannya.

Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan

halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab,

warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan

halaman web.

Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua

franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda.

Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana

tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft

Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan

yang terlihat pada pengguna yang menggunakan Produk-produk Sun

Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua

2.7.2 Mar kup atau Tanda:

Secara garis besar, terdapat 4 jenis elemen dari HTML:

a) structural. tanda yang menentukan level atau tingkatan dari sebuah

tulisan (contoh, <h1>Golf</h1> akan memerintahkan browser untuk

menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan

sebagai Heading 1.

b) presentational. tanda yang menentukan tampilan dari sebuah tulisan

tidak peduli dengan level dari tulisan tersebut

(contoh, <b>boldface</b> akan menampilkan bold. Tanda

presentational saat ini sudah mulai digantikan oleh CSS dan tidak

direkomendasikan untuk mengatur tampilan tulisan.

c) hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen

tersebut atau pranala ke dokumen lain (contoh, <a

href="http://www.wikipedia.org/">Wikipedia</a> akan

menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu).

d) Elemen widget yang membuat objek-objek lain seperti tombol

(<button>), list (<li>), dan garis horizontal (<hr>), Konsep hypertext

pada HTML memungkinkan kita untuk membuat link pada suatu

kelompok kata atau frasa untuk menuju ke bagian manapun dalam

World Wide Web,

Ada tiga macam link yang dapat kita gunakan :

a) Link menuju bagian lain dari page

c) Link menuju resource atau web site yang berbeda.

Selain markup presentational , markup yang lain tidak menentukan

bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag

HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan,

dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana:

Gambar 2.8 Contoh pseudocode HTML

HTML memungkinkan kita untuk menyunting tampilan atau format berkas

yang akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan

dalam menentukan format berkas adalah:

a) Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran

yang dapat digunakan untuk judul, heading dan sebagainya.

b) Kita dapat menampilkan tulisan dalam bentuk cetakan tebal.

c) Kita dapat menampilkan sekelompok kata dalam bentuk miring.

d) Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan

hasil ketikan mesin ketika Kita dapat mengubah-ubah ukuran tulisan untuk

2.8. J avaScr ipt

J avaScr ipt adalah bahasa skrip yang populer di internet dan dapat bekerja di

sebagian besar penjelajah web populer seperti Internet Explorer(IE), Mozilla

Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan

dalam halaman web menggunakan tag SCRIPT.

2.8.1 Sejar ah:

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape

dibawah nama Mocha, yang nantinya namanya diganti menjadiLiveScript, dan

akhirnya menjadi JavaScript. Navigator sebelumnya telah mendukung Java untuk

lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah

bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut.

Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama

JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat

efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk

membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX

(http://id.wikipedia.org/wiki/JavaScript).

2.9. PHP

PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan

atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs

web dinamis. PHP dapat digunakan untuk membangun sebuah CMS

Pada prinsipnya server akan bekerja apabila ada permintaan dari client.

Dalam hal ini client menggunakan kode-kode PHP untuk mengirimkan

permintaan ke server. Ketika menggunakan PHP sebagai server-side embedded

script language maka server akan melakukan hal-hal sebagai berikut :

a) Membaca permintaan dari client/browser

b) Mencari halaman/page di server

c) Melakukan instruksi yang diberikan oleh PHP untuk melakukan

modifikasi pada halaman/page.

d) Mengirim kembali halaman tersebut kepada client melalui internet atau

intranet (pusdatin, 2002).

2.9.1 Sejar ah PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs

personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada

waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa

sekumpulan skrip yang digunakan untuk mengolah data formulir dariweb.

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan

menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi sumber

terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP

sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga

modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter

PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998,

tersebut sebagai PHP 3.0 dan singkatan PHP diubah menjadi akronim

berulang PHP: Hypertext Preprocessing.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis

tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak

dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan

kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki

kecepatan dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter

PHP mengalami perubahan besar. Versi ini juga memasukkan

model pemrograman berorientasi objek ke dalam PHP untuk menjawab

perkembangan bahasa pemrograman ke arah paradigma berorientasi objek (Syafii,

M. 2005).

2.9.2 Kelebihan PHP Dar i Bahasa Pemrogaman Lain

Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:

1) Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaanya.

2) Web Server yang mendukung PHP dapat ditemukan dimana - mana dari

mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif

mudah.

3) Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan

developer yang siap membantu dalam pengembangan.

4) Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah

5) PHP adalah bahasa open source yang dapat digunakan di berbagai mesin

(Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime

melalui console serta juga dapat menjalankan perintah-perintah system.

2.9.3 Tipe Data

PHP memiliki 8 (delapan) tipe data yaitu :

1) Integer

MySQL adalah database yang sangat popular digunakan bersama PHP. PHP

dengan MySQL adalah kombinasi yang baik untuk menampilkan kekuatan

sesungguhnya dari Server-Side scripting. Dengan MySQL, pengguna dapat

membuat table, dimana data dapat disimpan lebih efisien dibandingkan

menyimpan data dalam array. Untuk menggunakan MySQL ataupun database lain

secara efektif, diperlukan pemahaman Structured Query Language (SQL) (Soetam

Langkah – langkah yang dapat dilakukan untuk menjalankan MySQL adalah

:

a) Koneksi ke server MySQL

b) Memilih sebuah database

c) Menjalankan sebuah query

2.10.1 Keistimewaan Mysql

MySQL memiliki beberapa keistimewaan, antara lain :

1) Por tabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi

seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan

masih banyak lagi.

2) Per angkat lunak sumber ter buka. MySQL didistribusikan

sebagai perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga

dapat digunakan secara gratis.

3) Multi-user . MySQL dapat digunakan oleh beberapa pengguna dalam

waktu yang bersamaan tanpa mengalami masalah atau konflik.

4) Per for mance tuning', MySQL memiliki kecepatan yang menakjubkan

dalam menangani query sederhana, dengan kata lain dapat memproses lebih

banyak SQL per satuan waktu.

5) Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya,

seperti signed / unsigned integer, float, double, char, text, date, timestamp,

dan lain-lain.

6) Per intah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh

7) Keamanan. MySQL memiliki beberapa lapisan keamanan seperti

level subnetmask, nama host, dan izin akses user dengan sistem perizinan

yang mendetail serta sandi terenkripsi.

8) Skalabilitas dan Pembatasan. MySQL mampu menangani basis data

dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan

60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat

ditampung mencapai 32 indeks pada tiap tabelnya.

9) Konektivitas. MySQL dapat melakukan koneksi dengan klien

menggunakan protokol TCP/IP, Unix soket (UNIX), atau Named

Pipes (NT).

10)Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan

menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa

Indonesia belum termasuk di dalamnya.

11)Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai

aplikasi dan bahasa pemrograman dengan menggunakan

fungsi API (Application Programming Interface).

12)Klien dan Per alatan. MySQL dilengkapi dengan berbagai peralatan

(tool)yang dapat digunakan untuk administrasi basis data, dan pada setiap

peralatan yang ada disertakan petunjuk online.

13)Str uktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam

menangani ALTER TABLE, dibandingkan basis data lainnya

2.11.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, merupakan web server yang

mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.

Untuk mendapatkanya dapat melakukan download langsung dari web resminya.

Mengenal bagian XAMPP yang biasa digunakan pada umumnya:

a) htdoc adalah folder tempat meletakkan berkas-berkas yang akan

dijalankan, seperti berkas PHP, HTML dan skrip lain.

b) phpMyAdmin merupakan bagian untuk mengelola basis data MySQL

yang ada dikomputer. Untuk membukanya, buka browser lalu ketikkan

alamat http://localhost/phpMyAdmin, maka akan muncul halaman

phpMyAdmin.

c) Kontr ol Panel yang berfungsi untuk mengelola layanan (service)

XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai (start).

2.12. IMK (Interaksi Manusia dan Komputer )

Interaksi manusia dan komputer (Bahasa Inggris: human–computer

antara manusiadan komputer yang meliputi perancangan, evaluasi, dan

implementasi antarmuka pengguna komputer agar mudah digunakan oleh

manusia. Ilmu ini berusaha menemukan cara yang paling efisien untuk

merancang pesan elektronik. Sedangkan interaksi manusia dan komputer sendiri

adalah serangkaian proses, dialog dan kegiatan yang dilakukan oleh manusia

untuk berinteraksi dengan komputer yang keduanya saling memberikan masukan

dan umpan balik melalui sebuah antarmuka untuk memperoleh hasil akhir yang

diharapkan. Sistem harus sesuai dengan kebutuhan manusia dan dirancang

berorientasi kepada manusia sebagai pemakai.

Beberapa aspek yang menjadi fokus dalam perancangan sebuah antarmuka

adalah:

1) Metodologi dan proses yang digunakan dalam perancangan sebuah

antarmuka.

2) Metode implementasi antarmuka.

3) Metode evaluasi dan perbandingan antarmuka.

4) Pengembangan antarmuka baru.

5) Mengembangkan sebuah deskripsi dan prediksi atau teori dari sebuah

antarmuka baru

Delapan aturan emas desain antarmuka:

1) Upayakan untuk konsistensi.

a) urutan tindakan yang konsisten harus diminta dalam situasi yang

b) terminologi identik harus digunakan pada prompt, menu, dan

membantu layar.

c) warna yang konsisten, tata letak, kapitalisasi, font, dan sebagainya

harus digunakan seluruhnya.

2) Memungkinkan pengguna sering untuk menggunakan jalan pintas

a) untuk meningkatkan laju singkatan menggunakan interaksi, tombol

khusus, perintah tersembunyi, dan makro.

3) Penawaran informatif umpan balik

a) untuk setiap tindakan pengguna, sistem harus merespon dalam

beberapa cara (dalam desain web, hal ini dapat dicapai

dengan DHTML - misalnya, tombol akan membuat suara klik atau

mengubah warna saat diklik untuk menampilkan sesuatu yang

pengguna telah terjadi).

4) Desain dialog untuk menghasilkan penutupan.

a) Urutan tindakan harus diatur ke dalam kelompok dengan awal,

tengah, dan akhir. Umpan balik yang informatif pada penyelesaian

sekelompok pengguna tindakan menunjukkan aktivitas mereka

telah selesai dengan sukses.

5) Penawaran kesalahan pencegahan dan penanganan kesalahan sederhana.

a) desain bentuk sehingga pengguna tidak dapat membuat kesalahan

serius, misalnya, lebih memilih pilihan menu untuk membentuk

mengisi dan tidak mengizinkan karakter abjad di bidang entri

b) jika pengguna melakukan kesalahan, instruksi harus ditulis untuk

mendeteksi kesalahan dan menawarkan instruksi sederhana,

konstruktif, dan khusus untuk pemulihan.

c) segmen panjang formulir dan mengirimkan bagian terpisah,

sehingga pengguna tidak dikenakan sanksi karena harus mengisi

formulir lagi - tapi pastikan Anda menginformasikan kepada user

bahwa beberapa bagian yang datang

6) Izin tindakan pemulihan.

7) Dukungan internal lokus kontrol

a) Pengguna yang berpengalaman ingin bertanggung

jawab. Mengejutkan sistem tindakan, urutan membosankan data,

ketidakmampuan untuk memasukan atau kesulitan dalam

mendapatkan informasi yang diperlukan, dan ketidakmampuan

untuk menghasilkan tindakan yang diinginkan semua membangun

kecemasan dan ketidakpuasan.

8) Kurangi beban memori jangka pendek.

a) Sebuah studi menunjukkan bahwa manusia terkenal dapat

menyimpan hanya 7 buah (plus atau minus 2) informasi dalam

memori jangka pendek mereka. Anda dapat mengurangi beban

memori jangka pendek dengan merancang layar di mana pilihan

yang jelas terlihat, atau menggunakan pull-down menu dan ikon.

Tujuan utama disusunnya berbagai cara interaksi manusia & komputer : untuk

mempermudah manusia dalam mengoperasikan komputer dan mendapatkan

komputer. Para perancang antarmuka manusia dan komputer berharap agar sistem

komputer yang dirancangnya dapat bersifat akrab dan ramah dengan penggunanya

(user friendly).

Sebagai contoh, misalnya sebuah komputer lengkap dipasang pada sebuah

tempat yang tidak nyaman bagi seorang pengguna yang menggunakan. Atau

keyboard yang digunakan pada komputer tersebut tombol-tombolnya keras

sehingga susah untuk mengetik sesuatu. Contoh-contoh diatas merupakan

beberapa hal mengapa kita membutuhkan mempelajari Interaksi Manusia dan

Komputer.

Kita butuh Interaksi manusia komputer adalah agar kita lebih cepat dalam

menyelesaikan suatu pekerjaan. serta dapat membuat waktu pengerjaannya lebih

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Pada bagian ini akan dirumuskan kebutuhan sistem yang akan menjadi

dasar dalam perancangan gadget pada aplikasi Display Jadwal Perkuliahan dan

Nilai Ujian Berbasis gadget. Perumusan kebutuhan sistem tersebut dilakukan

dengan cara menentukan jalannya yang terjadi dalam aplikasi ini. Alur tersebut

kemudian akan digambarkan dengan Block. Untuk memudahkan didalam

menentukan alur yang mungkin terjadi dalam sistem ini, ditentukan terlebih

dahulu pengguna sistem ini. Pada sub bab berikut akan dibahas tentang pengguna

sistem ini.

3.2 Analisis Kebutuhan

Spesifikasi kebutuhan sistem aplikasi menjelaskan mengenai apa saja yang

akan dibutuhkan oleh pengguna aplikasi dan cara dalam penginstallan serta cara

untuk mengatur setting.

3.3 Per ancangan Sistem

Perancangan sistem digunakan untuk menggambarkan sejumlah proses

terstruktur dalam sistem aplikasi, berorientasikan pada aliran sistem yang terjadi,

agar memperjelas sistem alur aplikasi yang dibuat. Penjelasan mengenai sistem

3.3.1 Deskr ipsi Umum Sistem

Gambar 3.1 Alur Sistem

Deskripsi dari arsitektur pada gambar 3.1 adalah sebagai berikut:

1) Pengguna / user dapat berinteraksi dengan sistem apabila telah menginstall

aplikasi ke dalam laptop atau komputer.

2) Dapat di install pada semua jenis laptop atau komputer dengan sistem operasi

windows 7 ataupun windows vista

3) Pengisian NPM adalah suatu form dimana pada saat selesai installasi

dilakukan harus memberikan NPM atau Nomor Pokok Mahasiswa, karena

NPM tersebut akan menjadi nilai default pada proses selanjutnya.

4) Display jadwal mata kuliah, jam dan ruangan serta nilai ujian adalah informasi

yang akan di dapatkan oleh user.

3.3.2 Kebutuhan Sistem

Dengan mengidentifikasi arsitektur pada gambar 3.1 telah di ketahui

jam dan ruangan serta nilai ujian, dengan default NPM yang di masukkan pada

saat proses instalasi. Dengan demikian kebutuhan sistemnya adalah kebutuhan

pengguna.

3.3.3 Kebutuhan Pengguna

Berdasarkan arsitektur pada gambar 3.1 untuk memenuhi kebutuhan

pengguna dalam berinteraksi dengan sistem serta untuk mengetahui

kebutuhan-kebutuhan apa saja yang berpengaruh pada sistem nantinya, maka perlu

dijabarkan kebutuhan apa saja yang akan di butuhkan oleh pengguna, antara lain:

1) Laptop atau komputer, tidak bergantung pada merek. Semua merek laptop

dapat menggunakan aplikasi ini.

2) Sistem operasi yang digunakan adalah windows 7 maupun windows vista.

3) NPM untuk nilai default pada pemberian informasi display jadwal mata

kuliah, jam, dan ruangan serta nulai ujian.

3.3.4 Block dan Flowchart

Perancangan block digunakan untuk menggambarkan sejumlah proses

terstuktur dalam sistem, berorientasi pada aliran proses yang terjadi. Demi

memudahkan pengguna orang awam dalam mengerti isi dan maksud dari aplikasi

ini. Perancangan block dibuat semudah dan sesimpel mungkin demi memudahkan

pembacaan. Adapun block Aplikasi Display Jadwal Perkuliahan Dan Nilai Ujian

Berbasis Gadget adalah sebagai berikut:

Proses yang terdapat pada gadget yaitu pertama kali menginstal program,

Kemudian memilih menu option setting untuk merubah NPM default menjadi

NPM user (pengguna) dan memilih tombol change agar NPM baru tersimpan,

seteah itu menekan tombol ok. Jika user (pengguna) ingin membatalkan proses

perubahan maka tekan tombol cancel. Untuk lebih lengkapnya dapat dilihat pada

gambar 3.2 berikut ini:

Gambar 3.2 Block Gadget

Perancangan flowchart digunakan untuk menggambarkan sejumlah proses

terstuktur dalam sistem, berorientasi pada aliran proses yang terjadi. Demi

memudahkan pengguna orang awam dalam mengerti isi dan maksud dari aplikasi

memudahkan pembacaan. Adapun flowchart Aplikasi Display Jadwal

Perkuliahan Dan Nilai Ujian Berbasis Gadget adalah sebagai berikut:

Gambar 3.3 Flowchart Utama Program

Setelah menggambarkan flowchart utama program, prose yang terjadi

Gambar 3.4 Flowchart Proses Jadwal

3.4 Per ancangan Antar muka

Perancangan antarmuka merupakan perancangan halaman aplikasi yang

nantinya akan berinteraksi secara langsung dengan pengguna. Perancangan

antarmuka system merupakan salah satu bagian penting dalam tahap perancangan

sistem. Dalam merancang antarmuka aplikasi harus memudahkan penggunadalam

mengoperasikan system atau aplikasi tersebut.

Konsep rancangan yang sangat penting untuk mendesain halaman sebuah

aplikasi adalah yang sesuai dengan kebutuhan. Adapun perancangan yang akan

dibuat pada aplikasi Display Jadwal Perkuliahan dan Nilai Ujian Berbasis gadget

Gambar 3.5 Rancangan Antarmuka

Pada gambar 3.6 antarmuka menu utama, terdapat 4 tombol pilihan yaitu

next, back, refresh, dan tombol untuk melihat Nilai. Dan disamping kanan atas

ada tombol close, option.

Ga mbar 3.6 Antarmuka Menu Utama

1) Gambar 3.7 adalah tampilan option setting, untuk mengganti defaut NPM

yang terpasang pada system. Terdapat 3 tombol change (untuk merubah NPM

default tang diatasnya), ok (menyetujui NPM yang diinputkan), dan cancel

Ga mbar 3.7 Antarmuka Option.

3.5 Contoh Tabel pada Mysql

Pada sub bab ini akan dibahas secara khusus tentang tabel-tabel yang

digunakan dalam MySql. setelah penyusunan hirarki, maka langkah selanjutnya

adalah pembuatan tabel-tabel yang nantinya akan dipanggil oleh gadget.

3.5.1 Tabel User

Tabel 3.1 Tabel User

NPM NAMA sesi

0734010101 Reni Yes

0734010102 Bono No

0734010103 Anis No

0734010105 Vina No

0734010130 Widya No

Tabel di atas merupakan tabel user yang berisikan NPM(Nomor pokok

Mahasiswa), Nama, dan sesi(yang mengarahkan NPM aktif atau tidak).

3.5.2 Tabel Matakuliah

Tabel 3.2 Tabel Matakuliah

Kode Keter angan Semester

D01 Sistem Informasi 4

D02 Grafika Komputer 4

D03 Sistem Operasi 4

D04 Statistika Komputer 4

D05 TBO 4

E01 Jaringan Komputer 5

E02 Kecerdasan Buatan 5

E03 RPL 5

E04 ADT 5

Tabel diatas merupakan tabel matakuliah, yang berisikan kode(kode untuk

matakuliah), keterangan(untuk nama matakuliah), dan semester.

3.5.3 Tabel Nilai

Tabel 3.3 Tabel Nilai

NPM Kodemk Nilai Semester Sks bobot J umlah

0734010101 D03 A 4 3 4 12

0734010102 D03 A- 4 3 3,75 11,25

0734010130 D03 A 4 3 4 12

0734010103 D03 B 4 3 3 9

0734010104 D03 B+ 4 3 3,5 11,25

0734010105 D03 B+ 4 3 3,5 11,25

0734010130 D04 B 4 3 3 9

0734010101 D04 A 4 3 4 12

0734010102 D04 A 4 3 4 12

0734010103 D04 A- 4 3 3,75 11,25

Tabel diatas merupakan tabel Nlai, yang berisikan NPM, kode(kode untuk

3.5.4 Tabel Jadwal

Tabel 3.4 Tabel Jadwal

NPM HARI Kodemk MASUK SELESAI RUANG SEME

STER

Dosen

0734010130 Senin E01 08:00 10:00 TF102 5 Basuki

Rahmat

0734010101 Senin E01 08:00 10:00 TF102 5 Priza P.

0734010102 Senin E01 08:00 10:00 TF102 5 Muttasim

0734010101 Senin E02 13:00 15:00 TF303 5 Agus H.

0734010103 Senin E02 13:00 15:00 TF303 5 Budi N.

0734010104 Senin E02 13:00 15:00 TF303 5 Faisal

0734010105 Selasa E03 13:00 15:00 TF101 5 Intan

0734010102 Selasa E03 13:00 15:00 TF101 5 Fetty A.

0734010130 Rabu E04 13:00 15:00 TF305 5 Asti Dwi

0734010104 Rabu E04 13:00 15:00 TF305 5 Kartini

0734010101 Kamis E05 08:00 10:00 TF303 5 Urip

0734010130 Kamis E05 08:00 10:00 TF303 5 Bimo

0734010104 Kamis E05 08:00 10:00 TF303 5 Nita Y.

0734010105 Kamis E05 08:00 10:00 TF303 5 Nur Cahyo

Tabel diatas merupakan tabel Nlai, yang berisikan NPM, hari, kodemk, jam

masuk, jam selesai, ruangan, semester yang sedang berjalan, serta nama pengajar

Pada bab ini akan membahas tentang implementasi program dari hasil

analisa dan perancangan sistem pada bab III, serta bagaimana cara sistem tersebut

dijalankan

4.1 Lingkungan Implementa si

pada bagian ini akan dijelaskan mengenai perangkat keras dan perangkat

lunak yang digunakan dalam implementasi sistem.

Per angkat Ker as:

a) Min Prosesor Intel Core2Duo 1,8 Ghz

b) Memori 2 GB

c) Hardisk 120 GB

Per angkat Lunak:

a) Sistem Operasi Vista ataupun Windows 7

4.2 Implementasi Sistem

Pada tahap ini akan dibahas mengenai implementasi sistem dari perancangan

berbagai file bertipe, seperti: XML, HTML, dan JAVASCRIP. Dengan

menggunakan software Macromedia Dreamweaver.

4.2.1 Membuat project pada Macr omedia Dr eamwea ver

Macromedia Dreamweaver merupakan tools yang digunakan untuk

membuat aplikasi pada display jadwal ini. Didalam Macromedia Dreamweaver ini

terdapat berbagai macam pilihan pembuatan project. Untuk studi kasus kali ini,

akan digunakan tipe file XML, HTML, JS sebagai tipe file projectnya.

Untuk memulainya, buka aplikasi macromedia dreamweaver dan memilih

Create New xml sebagai file projectnya.

Dreamweaver adalah program yang sangat fleksibel, program ini

mengijinkan anda untuk melihat kode dalam tampilan yang berbeda : Code View,

Code dan Design View, dan Design View. Anda bisa berpindah antara tampilan

ini dengan menggunakan tiga tombol icon yang terdapat diatas sebelah kiri

monitor.

Gambar 4.2 Tombol Icon

Dalam Code view, Dreamweaver Menampilkan halaman web dalam

bentuk format baris : HTML code. Jika anda sudah akrab dengan HTML, anda

bisa mengedit halaman web ini dari yang ditampilkan. The Code dan Design View

membagi layar dalam setengah tampilan, tampilan code HTML untuk halaman

web dibagian atas, dan setengahnya lagi tampilan Design View yang bisa kita

edit.

Gambar 4.3 Insert Bar

Insert bar, terletak diseberang atas layar, berbeda dari panel diatas. Insert

bar berisi lebih tabs dari pada panel lain, dan memiliki beberapa pilihan untuk

memasukkan dan manipulasi objek dan fungsi ke halaman web. Anda akan

menemukan banyak cara anda untuk membiasakan diri dengan option ini, mereka

mengijinkan untuk mempercepat dan cara mudah untuk memasukkan objek dalam

1) Hyper link : Klik diatas dan akan membuat anda untuk link ke lokasi lain

dari halaman web, file atau lokasi pada halaman yang sama.

2) Email Link: Email link mengijinkan pengunjung situs mengirimkan

seseorang email dengan mengklik pada special link. Gunakan tool ini

untuk mempermudah link.

3) Named Anchor : Tanda anchor ini adalah istimewa dalam melakukan link,

akan membawa user ke bagian lain pada halaman yang sama. Klik nama

tombol nama anchor untuk mempercepat membuat link untuk anchor.

4) Inser t Table: Ketika anda mengklik tool ini, akan muncul jendela

menanyakan jika anda ingin memasukkan informasi dan membuat tabel.

Ketika itu selesai, klik pada “OK” dan akan muncul tabel dalam halaman

web.

5) Dr aw Layer : Layer bisa membantu ketika mendesain layout untuk

halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisadii si teks,

gambar, atau apa saja, dan bisa ditempatkan dimana saja dilayar. Ketika

anda mengklik tombol ini, kursor anda akan berubah menjadi salib, dan

anda bisa menarik layer pada halaman.

6) Image: Anda bisa dengan mudah menempatkan gambar dalam halaman

web dengan mengklik tombol ini. Ketika anda melakukannya, jendela baru

akan muncul. Dari sini, anda bisa membrowser komputer anda untuk

mencari gambar yang ingin dimasukkan ke dalam halaman web. Ingat, jika

anda berencana untuk menempatkan halaman anda dalam internet, anda

harus menaruh semua gambar yang digunakan dalam web dengan baik. Ini

7) Image Placeholder : Penempatan gambar bisa digunakan secara efektif

dalam web desain. Mereka akan terlihat sederhana, tapi mereka sangat

penting. “image”. Ini merupakan pixel kosong yang bisa digunakan untuk

berbagai hal, seperti membuat ruang antar objek, atau membuat garis dan

kotak untuk layouts.

8) Fir ewor k s HTML: Jika anda membuat halaman web memakai

Macromedia Fireworks, anda akan bisa memasukkannya ke dalam

halaman Dreamweaver MX dengan menggunakan tool ini.

9) Flash: Mengijinkan anda untuk memasukkan elemen flash dalam halaman

web.

10)Rollover image: Suatu efek khusus pada gambar, ketika kursor mouse

digerakkan pada gambar maka gambar akan berubah.

11)Navigation Bar : Ini merupakan fungsi yang komplek dan akan membuat

anda untuk mengendalikan bar situs anda, dan mengubah gambar untuk

link ke halaman lain.

12)Hor izontal Rule: suatu garis sederhana yang bisa digunakan untuk

beberapa bagian isi halaman web. Klik tombol ini, memutuskan panjang

garis horizontal, dan ini akan dimasukkan ke halaman.

13)Date: Klik tombol ini untuk memasukkan tanggal ke halaman web,

14)Tabular Data: Memasukkan data ke dalam tabular.

15)Comments: Komentar bisa digunakan dalam halaman web, tanpa

benar-benar muncul pada halaman web. Ini akan membantu jika anda ingin