Perancangan Simulasi Mesin Cuci Umum Menggunakan Koin

(1)

PERANCANGAN SIMULASI MESIN CUCI UMUM

MENGGUNAKAN KOIN

TUGAS AKHIR

MAHA PERDANA TARIGAN

102406226

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGEAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

▸ Baca selengkapnya: mengambil koin di dalam air posisi badan

(2)

PERANCANGAN SIMULASI MESIN CUCI UMUM

MENGGUNAKAN KOIN

TUGAS AKHIR

Diajukan untuk melengkapi dan memenuhi syarat

mencapai gelar Ahli Madya Komputer

MAHA PERDANA TARIGAN

102406226

PROGRAM STUDI D3 TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGEAHUAN ALAM

(3)

PERSETUJUAN

Judul

: PERANCANGAN SIMULASI MESIN CUCI

UMUM MENGGUNAKAN KOIN

Kategori

: TUGAS AKHIR

Nama

: MAHA PERDANA TARIGAN

Nomor Induk Mahasiswa

: 102406226

Program Studi

: DIPLOMA (D3) TEKNIK INFORMATIKA

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN

ALAM(FMIPA) UNIVERSITAS SUMATERA

UTARA

DISETUJUI OLEH :

Pembimbing

Nip.

19631106 198902 2 001

(4)

ii

PERNYATAAN

PERANCANGAN SIMULASI MESIN CUCI UMUM

MENGGUNAKAN KOIN

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dan ringkasan yang masing-masing disebut sumbernya.

Medan,

Juni 2013

(5)

PENGHARGAAN

Puji Syukur penulis ucapkan serta panjatkan kepada Tuhan Yang Maha Esa telah

memberikan berkat, serta rahmat-Nya kepada penulis sehingga penulis dapat

menyelesaikan tugas akhir yang berjudul “PERANCANGAN SIMULASI MESIN

CUCI UMUM MENGGUNAKAN KOIN” sebagai salah satu syarat untuk

menyelesaikan perkuliahan pada Program Studi Diploma III Teknik Informatika Fakultas

Matematika Dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

Pada kesempatan ini penulis mengucapkan terima kasih serta penghargaan yang

sebesar-besarnya kepada ayahanda Pembangunen Tarigan dan ibunda tersayang Tetty br

Sitepu yang telah membimbing dengan penuh cinta kasih saying, memelihara dan

memperhatikan penulis sejak kecil selalu mencukupi segala keperluan baik secara moril

maupun materil hingga akhirnya penulis mampu menyelesaikan laporan tugas akhir ini.

Selanjutnya penulis menyampaikan rasa terima kasih dan penghargaan

sebesar-besarnya kepada semua pihak yang telah memberikan bantuan dan masukan, baik secara

moril dan materil dalam menyelesaikan penulisan tugas akhir ini, terutama sekali kepada :

1.

Ibu Dra. Normalina Napitupulu, M.Sc selaku Dosen pembimbing penulis yang

selalu memberikan masukan, baik kritik dan saran kepada penulis selama

pembuatan tugas akhir ini mulai dari awal sampai dengan selesai.

2.

Bapak Syahril Efendi, S.Si, MIT selaku Ketua Program Studi D III Teknik

Informatika Fakultas Matematika Dan Ilmu Pengetahuan Alam Universitas

Sumatera Utara.

3.

Bapak Prof.Drs.Tulus, Vordipl.Math,M.Si.,Ph.D selaku Ketua Departemen

Fakultas Matematika Dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

4.

Bapak Dr.Sutarman, M.Sc selaku Dekan Fakultas Matematika Dan Ilmu

Pengetahuan Alam Universitas Sumatera Utara.

5.

Bapak dan Ibu Dosen serta staf Fakultas Matematika Dan Ilmu Pengetahuan Alam

Universitas Sumatera Utara.

6.

Buat Adik-Adikku Tersayang Hari Yadi Tarigan dan Karina Alemina br Tarigan

yang telah memberikan semangat kepada penulis dalam penyelesaian tugas akhir

ini.

7.

Buat seluruh alumni D3 Teknik Infomatika yang selama ini telah membantu

penulis dalam memberikan saran untuk menyelesaikan program.

8.

Buat seluruh teman angkatan 2010 yang selama ini telah menjadi keluarga dan

sahabat penulis.

(6)

iv

Laporan ini sudah selesai, namun penulis menyadari bahwa masih ada kekurangan

didalamnya karena keterbatasan pengetahuan dan kemampuan penulis.Untuk itu,

diharapkan kritik dan saran yang bersifat membangun demi perbaikan dan

penyempurnaan laporan ini. Semoga laporan ini bermanfaat bagi semua yang

membaca sebagai wacana dalam memperluas cakrawala pengetahuan

Kiranya Tuhan Yang Maha Esa memberikan berkat-Nya kepada kita

semua sehingga sukses dalam menggapai cita-cita yang diinginkan. Amin.

Medan,

Juni 2013

Penulis,

(7)

ABSTRAK

Di Indonesia saat ini bidang kebersihan, dalam membersihkan pakaian masih banyak yang

menggunakan tenaga manusia pada umumnya, terutama daerah yang jauh dari perkotaan

menyebabkan kurangnya pengetahuan akan mesin cuci yang dapat membersihkan pakaian

secara otomatis dimana terbuangnya waktu menyuci dapat dihilangkan. Sehingga waktu

dapat terpakai lebih efektif.

(8)

vi

DAFTAR ISI

Halaman

Persetujuan

i

Pernyataan

ii

Penghargaan

iii

Abstrak

v

Daftar Isi

vi

Daftar Tabel

viii

Daftar Gambar

ix

Bab 1 Pendahuluan

1

1.1 Latar Belakang

1

1.2 Rumusan Masalah

2

1.3 Batasan Masalah

2

1.4 Tujuan dan Manfaat

3

1.5 Metodologi Penelitian

3

1.6 Sistematika Penulisan

4

Bab 2 Lantasan Teori

6

2.1 Sejarah Mesin Cuci

6

2.2 Pengertian Aplikasi Web

10

2.3 Pengertian Aplikasi

11

2.4 Mengenal PHP

12

2.5 Adobe Dreamweaver CS5

13

2.6 Cascading Style Sheet

14

2.7 Mengenal Photoshop

15

Bab 3 Perancangan Sistem

18

3.1 Defenisi Perancangan Sistem

18

3.2 Simbol-simbol pada Flowchart dan Penjelasannya

19

3.3 Gambaran Umum Sistem Perancangan Simulasi Mesin Cuci Koin 22

(9)

3.4.1 Perancangan Simulasi Mesin Cuci Koin

24

3.4.2 Mengkompile Program

27

Bab 4 Implementasi Sistem

30

4.1 Defenisi Implementasi Sistem

30

4.2 Kebutuhan Sistem

31

4.3 Pengujian Program

33

Bab 5 Kesimpulan dan Saran

40

5.1 Kesimpulan

40

5.2 Saran

31

(10)

viii

Daftar Tabel

Halaman

(11)

Daftar Gambar

Halaman

Gambar 3.1 Flowchart Simulasi Mesin Cuci

22

Gambar 3.2 Tampilan Awal Adobe Dreamweaver

23

Gambar 3.3 Tampilan Lembar Kerja Adobe Dreamweaver

24

Gambar 3.4 Tampilan Lembar Kerja CSS

25

Gambar 3.5 Lembar Kerja Javascript

26

Gambar 3.6 Form Tombol

26

Gambar 3.7 Perancangan Form Spinner

28

Gambar 3.8 Perancangan Form Progressbar

28

Gambar 4.1 Tampilan saat program simulasi dijalankan

32

Gambar 4.2 Tampilan koin telah dimasukkan kedalam mesin cuci

32

Gambar 4.3 Proses Menyuci Pakaian

33

Gambar 4.4 Proses Cuci Pakaian Telah Selesai

34

Gambar 4.5 Proses Cuci Dengan Timer Otomatis

35

Gambar 4.6 Proses Merendam Pakaian

36

Gambar 4.7 Proses Menyuci Pakaian

36

(12)

v

ABSTRAK

Di Indonesia saat ini bidang kebersihan, dalam membersihkan pakaian masih banyak yang

menggunakan tenaga manusia pada umumnya, terutama daerah yang jauh dari perkotaan

menyebabkan kurangnya pengetahuan akan mesin cuci yang dapat membersihkan pakaian

secara otomatis dimana terbuangnya waktu menyuci dapat dihilangkan. Sehingga waktu

dapat terpakai lebih efektif.

(13)

BAB 1

PENDAHULUAN

1.1

Latar Belakang

Dewasa ini perkembangan teknologi sangatlah pesat. Banyak sekali teknologi yang memudahkan manusia, seperti mesin cuci, lemari es untuk menyimpan makanan, TV, radio, dan masih banyak lagi. Kebutuhan akan itu pun semakin diminati oleh masyarakat awam maupun kaum intelektual.

Hal ini berkaitan dengan kegiatan-kegiatan yang dilakukan oleh manusia yang biasanya dilakukan secara manual dan konvensional akan semakin efisien dan efektif jika dilakukan dengan bantuan mesin yaitu mesin cuci koin. Dengan penggunaan teknologi dapat memudahkan manusia dalam menjalankan tugas mencuci pakaian sehari-hari.

(14)

2

Melihat hal itu penulis ingin membuat suatu aplikasi yang dapat membantu masyarakat

awam untuk dapat mengoperasikan mesin cuci koin dengan mudah, sehingga untuk

mengatasi permasalahan diatas penulis akan membuat tugas akhir dengan judul :

“PERANCANGAN SIMULASI MESIN CUCI UMUM MENGGUNAKAN

KOIN ”

1.3 Rumusan Masalah

Suatu aplikasi layaknya dirancang untuk mengatasi masalah yang dilakukan oleh

pengguna untuk mengatasi permasalahan agar dapat dilakukan lebih efektif dan efisien.

Namun untuk mengatasi hal tersebut perlu dibuat sebuah aplikasi yang bersifat terbuka

dan dapat digunakan oleh masyarakat luas. Untuk itu, penulis membuat sebuat aplikasi

dengan tujuan mempermudah pengoperasian mesin cuci koin oleh masyarakat.

1.4 Batasan Masalah

Perancangan simulasi ini dibangun menggunakan pemrograman berbasis web dikarenakan

pemrograman ini bersifat dinamis dan lebih tahan terhadap serangan virus. Batasan

masalah yang akan dibahas dalam penyusunan tugas akhir ini adalah :

(15)

2.

Proses kerja mesin cuci menggunakan koin tidak ditampilkan secara detail hingga

dalam motor penggerak.

3.

Menggunakan koin Rp.1000

4.

Menggunakan bahasa pemrograman berbasis web.

1.5 Tujuan dan Manfaat.

Tujuan dari penyusunan tugas akhir ini adalah untuk merancang sebuah simulasi mesin

cuci umum menggunakan koin.

Manfaat dari penyusunan tugas akhir ini adalah :

1.

Untuk mempermudah masyarakat mengoperasikan mesin cuci menggunakan koin.

2.

Membantu pemahaman proses kerja mesin cuci menggunakan koin kepada

masyarakat.

1.6 Metodologi Penelitian

Penelitian ini akan dilaksanakan dengan mengikuti beberapa langkah yang akan dilakukan

penulis, yaitu :

1.

Pengumpulan data-data pendukung

(16)

4

2.

Membuat Rancangan Aplikasi

Proses pembuatan ini meliputi pembuatan rancangan aplikasi dan pembuatan user

interface aplikasi.

3.

Pengujian Aplikasi

Menguji apakah aplikasi web yang dibuat telah berhasil berjalan sesuai dengan

keinginan dan melakukan perbaikan kesalahan jika masih terdapat error pada

aplikasi.

4.

Implementasi Aplikasi

Penerapan aplikasi yang dirancang setelah melalui tahap pengujian dan telah

berjalan dengan baik.

5.

Penyusunan dan pengadaan laporan

Tahap akhir dari penelitian yang dilakukan, yaitu membuat laporan tentang

penelitian yang telah dilakukan.

1.6

Sistematika Penulisan.

Agar dapat memberikan gambaran yang jelas pada penulisan tugas akhir ini, maka penulis

membaginya dalam beberapa bab sebagai berikut :

Bab 1 : Pendahuluan

(17)

Bab 2 : Landasan Teori

Bab ini mengungkapkan tentang konsep dasar dan teori – teori yang mendukunang

pembahasan untuk tema penulisan yang didapatkan dari beberapa literatur

Bab 3 : Perancangan Sistem

Bab ini membahas tentang perancangan dan pembuatan simulasi mesin jual otomatis

(vending machine) dan gambaran umum rancangannya.

Bab 4 : Implementasi Sistem

Bab ini membahas analisa hasil dan pembahasan simulasi mesin jual otomatis yang

dirancang. Pembuatan program yang diajukan, tampilan dari program dan pengujian game

tersebut.

Bab 5 : Kesimpulan dan Saran

(18)

BAB 2

LANDASAN TEORI

2.1

Sejarah Mesin Cuci

Diciptakan berdasarkan gerakan tangan manusia di papan cuci, mesin cuci pertama kali

dipatenkan di Amerika Serikat pada tahun 1846 dan bertahan pada akhir 1927. Awalnya,

mesin cuci listrik menggunakan motor yang diputar di dalam tabung, namun motor

tersebut tidak terlindung sehingga air cucian sering menetes dan menyebabkan sirkuit

pendek dan hentakan. Pada 1911, mesin cuci telah dilengkapi dengan silinder berbahan

metal dan tertutup.

Beatty Brothers dari Fergus, Ontario merupakan perusahaan pertama yang

memproduksi mesin cuci agitator, menggunakan tabung tembaga nikel atau

nikel-kromium berlapis. Di AS, perusahaan pertama yang mengadopsi teknologi agitator adalah

Maytag. Orientasi vertikal mesin ini menjadi standar industry menggantikan sumbu putar

(19)

Pada 1920-an, lembaran logam dienamel putih menggantikan tabung tembaga dan

kaki besi bersudut. Pada awal 1940-an, baja dienamel digunakan karena lebih bersih, lebih

mudah untuk membersihkan dan lebih tahan lama, juga dirancang untuk memperpanjang

umur motor

Perkembangan selanjutnya dari mesin cuci adalah pemasangan alat pengatur

waktu yang memungkinkan mesin diset untuk beroperasi sesuai siklus sehingga pengguna

tidak perlu terus memonitor jalannya mesin cuci.

Pada awal 1950-an, banyak produsen Amerika memasarkan mesin dengan fitur

tombol pengering yang menggantikan proses memeras pakaian yang menyebabkan

terkilir. Pada 1957, GE memperkenalkan mesin cuci yang dilengkapi dengan 5 tombol

untuk mengontrol suhu mencuci, suhu membilas, kecepatan mencuci dan kecepatan

putaran.

Mesin cuci digerakan oleh motor listrik satu fasa. Motor ini dapat bergerak dua

arah untuk mengucek pakaian saat di cuci. Motor dihubungkan ke bak cuci atau agitator

dengan belt dan roda pemutar (pully).

Proses pencucian dengan mesin cuci diawali dengan memasukkan pakaian kotor

ke dalam tabung cuci. Kontrol akan mendeteksi berat pakaian dan mengatur level air,

(20)

8

valve). Setelah level air tercapai, katup air masuk akan ditutup dan agitator mulai berputar

untuk menciptakan pusaran air.

Bila kontrol telah mendeteksi habisnya waktu cuci, motor akan berhenti memutar

agitator dan katup buang pun dibuka untuk membuang air hasil pencucian, kemudian

tabung akan berputar untuk membuang sisa-sisa air yang ada di dalam pakaian.

Setelah katup bilas ditutup dan katup air masuk dibuka, air masuk ke dalam tabung

sampai cukup level kemudian katup air masuk ditutup dan mesin mulai membilas. Jika

waktu bilas sudah habis, maka kontrol akan membuka katup buang untuk membuang air

bilasan. Proses pengeringan akan dilakukan setelahnya dengan meutar tabung mesin cuci.

Jika telah selesai maka mesin cuci akan berhenti secara otomatis dan ini menandakan

bahwa proses pencucian telah selesai.

Diciptakan berdasarkan gerakan tangan manusia di papan cuci, mesin cuci pertama

kali dipatenkan di Amerika Serikat pada tahun 1846 dan bertahan pada akhir 1927.

Awalnya, mesin cuci listrik menggunakan motor yang diputar di dalam tabung, namun

motor tersebut tidak terlindung sehingga air cucian sering menetes dan menyebabkan

sirkuit pendek dan hentakan. Pada 1911, mesin cuci telah dilengkapi dengan silinder

berbahan metal dan tertutup.

Produsen mesin cuci menghadapi tantangan berkaitan dengan perkembangan

(21)

tidak tersengat listrik. Pada awal perkembangannya, mesin cuci menggunakan rantai,

sabuk, poros dan roda gigi.

Untuk mengatasi hambatan awal dalam penggunaan mesin cuci, motor tenaga

kuda fraksional mulai digunakan. Kekuatan motor ini biasanya hanya 1/8 atau ¼ daya

kuda motor pada mesin pertama, mesin ini diproduksi oleh Westinghouse.

Untuk mencegah sengatan listrik, stator dan rator mesin dibungkus dan dilengkapi

kipas untuk mencegah panas.

Dari perspektif kepuasan konsumen, mesin yang akan mencuci pakaian tanpa

merobek-robek perlu dikembangkan. Ini berarti mesin harus dioperasikan dengan

kecepatan yang berbeda. Untuk mengatasi masalah tersebut , jatuhnya air ke pakaian pada

mesin cuci melalui agitasi perlu dikembangkan

Beatty Brothers dari Fergus, Ontario merupakan perusahaan pertama yang

memproduksi mesin cuci agitator, menggunakan tabung tembaga nikel atau

nikel-kromium berlapis. Di AS, perusahaan pertama yang mengadopsi teknologi agitator adalah

Maytag. Orientasi vertikal mesin ini menjadi standar industry menggantikan sumbu putar

horizontal pada mesin sebelumnya.

Pada 1920-an, lembaran logam dienamel putih menggantikan tabung tembaga dan

(22)

10

mudah untuk membersihkan dan lebih tahan lama, juga dirancang untuk memperpanjang

umur motor

Perkembangan selanjutnya dari mesin cuci adalah pemasangan alat pengatur

waktu yang memungkinkan mesin diset untuk beroperasi sesuai siklus sehingga pengguna

tidak perlu terus memonitor jalannya mesin cuci.

Pada awal 1950-an, banyak produsen Amerika memasarkan mesin dengan fitur

tombol pengering yang menggantikan proses memeras pakaian yang menyebabkan

terkilir. Pada 1957, GE memperkenalkan mesin cuci yang dilengkapi dengan 5 tombol

untuk mengontrol suhu mencuci, suhu membilas, kecepatan mencuci dan kecepatan

putaran.

2.2

Pengertian Aplikasi Web

(23)

mengunakan teknologi browser untuk menjalankan aplikasi dan diakses melalui jaringan

komputer (Remick, 2011).

Arsitektur aplikasi web meliputi klien, web server, middleware dan basis data.

Klien berinteraksi dengan web server. Secara internal, web server berkomunikasi dengan

middleware dan middleware yang berkomunikasi dengan basis data. Contoh middleware

adalah PHP dan ASP. Pada mekanisme aplikasi web dinamis, terjadi tambahan proses

yaitu server menerjemahkan kode PHP menjadi kode HTML. Kode PHP yang

diterjemahkan oleh mesin PHP yang akan diterima oleh klien.(Abdul Kadir, 2009).

2.3

Pengertian Aplikasi

Aplikasi adalah sebuah ‘mahakarya symphony orchestra’ dari pelaku Teknologi

Informasi, yang merupakan hasil kerjasama antara sumber daya manusia, tools dan

pengguna dalam sebuah manajemen yang terintegrasi dimana didalamnya ada

perencanaan, ujicoba, pelaksanaan dan pemeliharaan, dengan tujuan akhir untuk

mendukung aktifitas manusia agar lebih efisien dan efektif (Muhammad Safri Lubis,

2011).

(24)

12

2.4

Mengenal PHP

Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs personal).

PHP pertama kali dibuat oleh

masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang

digunakan untuk mengolah data formulir dari

Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan

menamakannya

banya

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

diimplementasikan dalam program

ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada tahun 1997, sebuah perusahaan bernama

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

tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai

(25)

abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun

aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.

Pada

mengalami perubahan besar. Versi ini juga memasukkan model

paradigma berorientasi objek.

2.5

Adobe Dreamweaver CS5

Dreamweaver adalah sebuah HTML editor professional untuk mendesain web secara

visual dan mengelola situs atau halaman web. Dreamweaver merupakan software utama

yang digunakan oleh desainer web maupun programmer web dalam mengembangkan

suatu situs web. Dreamweaver CS5 memiliki kemampuan :

1.

Code View : Berfungsi untuk hanya menampilkan script html saja.

2.

Desain View : Berfungsi menampilkan kode-kode html yang anda tulis

menjadi sebuah design/template yang nantinya akan ditampilkan di browser.

3.

Split View : Berfungsi menampilkan gabungan antara Code View dan Desain

(26)

14

2.6

CSS

CSS adalah kependekan dari Cascading Style Sheet, pengertiannya adalah sekumpulan

code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen

didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.

Cara mudah untuk memberikan gambaran CSS adalah dengan memberikan contoh

berikut. Kode CSS dibawah sebagai contoh :

<Style type=”text/css”>

.background

{

background-color: black;

width: 900px;

height: 600px;

}

Kode diatas akan membuat sebuah background dengan warna hitam dengan lebar

seluas 900 pixel dan tingginya 600 pixel.

(27)

2.7

Mengenal Photoshop

Pada tahun 1987,

sebuah program pada Macintosh Plus-nya untuk menampilkan gambar grayscale pada

layar monokrom. Program ini, yang disebut Display, menarik perhatian saudaranya

agar mengubah programnya menjadi program penyunting gambar penuh. Thomas

mengambil enam bulan istirahat dari studi pada tahun 1988 untuk berkolaborasi dengan

saudaranya pada program itu, yang telah diubah namanya menjadi ImagePro. Setelah

tahun itu, Thomas mengubah nama programnya menjadi Photoshop.

Adapun kebutuhan sistem Adobe Photoshop adalah sebagai berikut :

Sistem Operasi Windows

1.

Processor Intel Pentium 3 atau 4

2.

Microsoft Windows 2000

3.

RAM 192 MB

4.

Harddisk 280 MB

5.

Monitor dengan video card 16-bit color

6.

Resolusi monitor 1024 x 768

(28)

16

Sistem Operasi Macintosh

1.

Processor PowerPC

2.

Mac OS X versi 10.24

3.

RAM 192 MB

4.

Ruang Harddisk 192 MB

5.

Monitor warna dengan video card 16-bit

Sebuah aplikasi photoshop memiliki komponen-komponen yang

mendukung desain grafis yang lengkap, adapun beberapa komponen utama dalam

photoshop adalah sebagai berikut :

Title Bar :

Menampilkan nama file yang sedang aktif dan bisa di gunakan untuk

memindahkan posisi jendela photoshop pada dekstop.

Menu Bar :

Berisi deretan menu yang meliputi : File, Edit, Image, Layer, Select, Filter, View,

Windows, Help.

Ruler :

Atau yang disebut juga penggaris yang berguna untuk menentukan posisi serta

ukuran suatu objek.

Status Bar :

Bagian ini menampilkan berbagai informasi tentang objek dan perkakas yang

(29)

Drawing Windows :

Daerah yang digunakan sebagai lembar kerja untuk berkreasi dengan foto atau

gambar.

Toolbox :

Komponen yang digunakan untuk memberikan akses perintah ke photoshop.

Pallete :

Komponen ini digunakan untuk memilih dan mengatur berbagai parameter.

Sizing Button :

(30)

BAB 3

PERANCANGAN SISTEM

3.1 Defenisi Perancangan Sistem

Perancangan sistem adalah merancang atau mendesain suatu sistem yang baik, yang

isinya adalah langkah-langkah operasi dalam proses pengolahan data dan prosedur untuk

mendukung operasi sistem.

Menurut Jogiyanto. HM,(1991), Perancangan sistem dapat diartikan sebagai berikut :

1.

Tahap setelah analisis dari siklus pengembangan sistem

2.

Pendefinisian dari kebutuhan-kebutuhan fungsional

3.

Persipan untuk rancang bangun implementasi

4.

Menggambarkan bagaimana suatu sistem dibentuk

5.

Yang dapat berupa penggambaran perencanaan dan pembuatan sketsa atau

pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh

dan berfungsi.

(31)

3.2 Simbol simbol pada Flowchart dan penjelasannya

Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-simbol grafis yang

menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang

disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing

masing langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi

selangkah demi selangkah untuk penyelesaian masalah yang ada di dalam proses atau

algoritma tersebut.

Tabel Flowchart beserta fungsinya:

No

Nama

Gambar

Fungsi

1

Terminator

Terminator, fungsinya untuk

permulaan/ akhir program

2

Process

Process,

digunakan untuk

melambangkan kegiatan

pemrosesan input.

3

Input data

Input data, fungsi untuk proses

input data, parameter.

4

Garis alir

( flow line)

[image:31.612.101.551.357.714.2]

(32)

20

5

Preparation

Preparation, berfungsi untuk

proses inisialisasi/ pemberian

harga awal atau untuk

perulangan/ looping.

6

Proses

Proses, fungsinya untuk proses

perhitungan/proses pengolahan

data .

7

Connector

Connector,penghubung

bagian-bagian flowchart yang berada

pada satu halaman.

8

Output data

Output data, informasi

9

Off page

connector

Off page connector

penghubung bagian-bagian

flowchart yang berada pada

halaman berbeda.

10

Predefined

process

Predefined process, untuk

(33)

11

Display

Display,untuk

output

yang

diajukan suatu device, seperti

monitor.

12

Magnetic disk

[image:33.612.101.549.82.277.2]

Magnetic disk, untuk

penyimpanan data.

Tabel 3.1 Tabel Flowchart

3.3 Gambaran Umum Sistem Rancangan Simulasi Mesin Cuci Koin

Rancangan Simulasi Mesin Cuci Koin merupakan suatu rancangan yang dapat bekerja

sebagai sebuah simulator agar pengguna dapat mengoperasikan mesin cuci koin sehingga

tidak memerlukan pembimbing untuk mengoperasikannya. Perancangan sistem ini dibuat

dengan bahasa pemrograman berbasis web yang diantaranya seperti PHP,HTML, dan

CSS. Bahasa pemrograman berbasis web memiliki penampilan desain yang lebih bagus

dan dapat diperbaharui sesuai dengan keinginan pembuat perancangan sistem ini.

(34)

[image:34.612.246.484.99.695.2]

22

(35)

3.4 Proses Perancangan

3.4.1. Perancangan Simulasi Mesin Cuci Koin

Perancangan Simulasi Mesin Cuci Koin menggunakan bahasa pemrograman berbasis

web. Disini penulis menggunakan aplikasi Adobe Dreamweaver untuk merancang dan

membuat script-script yang diperlukan dalam membuat perancangan simulasi ini. Untuk

memulai merancang sebelumnya Adobe Dreamweaver telah diinstall dalam komputer.

[image:35.612.107.536.359.682.2]

1.

Buka Aplikasi Dreamweaver yang ada di komputer, akan muncul tampilan seperti

berikut ini :

(36)

24

[image:36.612.110.537.173.552.2]

2.

Pilih Create New, Klik more kemudian pilih HTML 5. Selanjutnya mulai

menuliskan script-script yang diperlukan dalam pengerjaan simulasi mesin cuci

koin

(37)

[image:37.612.111.535.174.490.2]

3.

Pilih Create New, Klik CSS. Selanjutnya menuliskan script-script untuk desain

perancangan simulasi mesin cuci koin, seperti warna background, jenis tulisan,

lebar dan tinggi desain yang digunakan untuk hasil yang bagus.

Gambar 3.4 Tampilan lembar kerja CSS

(38)

[image:38.612.108.541.84.332.2]

26

Gambar 3.5 Lembar kerja Javascript

5.

Perancangan Form Tombol, form ini terdapat beberapa button yang berfungsi

sebagai pengaturan cara kerja mesin cuci umum, dalam form ini terdapat beberapa

button yang akan ditampilkan sebagai berikut :

[image:38.612.188.455.473.690.2]

(39)

1.

Button ini berfungsi sebagai alat transaksi yang digunakan untuk

menjalankan mesin cuci.

2.

Button cuci berfungsi menentukan lamanya proses penyucian.

3.

Button rendam berfungsi menentukan lamanya proses, proses rendam

akan berjalan terlebih dahulu, setelahnya proses cuci akan berjalan.

4.

Button air hangat sebagai button penentu air yang akan digunakan

dalam proses cuci.

5.

Button start sebagai command untuk memulai proses penyucian

pakaian.

6.

Button air dingin sebagai button penentu air yang akan digunakan

dalam proses cuci.

7.

Text akan berisi keterangan lamanya proses rendam.

8.

Text akan berisi keterangan lamanya proses cuci

9.

Text berisi jumlah koin yang telah dimasukkan kedalam mesin.

(40)

[image:40.612.158.486.103.311.2]

28

Gambar 3.7 Perancangan Form Spinner

7.

Perancangan Proggresbar, form ini akan menampilkan waktu dan persentase

kesiapan penyucian yang sedang berjalan dalam mesin cuci, adapun gambarnya

sebagai berikut ini:

[image:40.612.170.479.486.594.2]

(41)

3.4.2. Mengkompile Program

Langkah terakhir dalam pembuatan simulasi mesin cuci koin ini adalah mengkompile

script-script yang telah dipersiapkan sebelumnya, adapun langkah-langkah dalam

mengkompile script adalah sebagai berikut :

1.

Aktifkan XAMPP Control Panel untuk mengaktifkan server local yang berfungsi

untuk mengkoneksikan script dengan web browser.

2.

Buka web browser yang ada dalam komputer sebagai media compiler untuk

menjalankan program yang telah dikerjakan sebelumnya.

3.

Ketik nama file atau folder yang akan dikompile oleh web browser (contoh :

(42)

BAB 4

IMPLEMENTASI SISTEM

4.1 Defenisi Implementasi Sistem

Implementasi merupakan tahap akhir dari proses pembuatan sistem baru yang dapat

dioperasikan secara menyeluruh. Implementasi aplikasi web simulasi mesin cuci koin ini

dilakukan dengan menggunakan bahasa pemrograman berbasis web. Dalam tahap ini ada

beberapa tahap yang akan dilaksanakan sebelum menjadi program aplikasi yang siap

pakai yaitu penulisan program,kompilasi dan membuat program. Aplikasi ini dapat

dijalankan pada berbagai web browser yang tersedia. Sebelum program aplikasi

diimplementasikan, maka aplikasi akan dilakukan pengujian untuk menghindari

kesalahan-kesalahan yang mungkin terjadi yaitu :

1.

Kesalahan tata bahasa adalah kesalahan pengetikan perintah atau statemen

menyalahi aturan pengkodean. Kesalahan ini mudah ditanggulangi, karena

setiap kesalahan yang terjadi akan tampil pada saat kompilasi di web browser

atau muncul pada saat pengetikan kode itu sendiri di macromedia

dreamweaver.

(43)

terjadi sebuah kekurangan sebuah file penting atau terjadi karena kesalahan

alokasi memori.

3.

Kesalahan Logika merupakan kesalahan yang cukup sulit ditemukan

penyebabnya, karena kesalahan ini tidak ada tampil pada saat proses

kompilasi, tetapi hasil yang dikeluarkan tidak sesuai dengan program yang

diinstruksikan. Kesalahan ini dapat diketahui setelah melakukan testing dan

membandingkan hasil pengolahannya dengan hasil yang sudah diketahui.

4.

Penulisan Program adalah proses menulis perintah-perintah program yang

akan diimplementasikan dengan bahasa pemrograman berbasis web.

5.

Pengujian program adalah tahapan akhir dimana program akan diuji untuk

mengetahui apakah program yang dibuat sesuai dengan spesifikasi yang

ditentukan, atau belum.

4.2

Kebutuhan Sistem

(44)

32

1.

Perangkat Lunak (Software)

Software adalah segala sesuatu yang berkaitan dengan program komputer.

Dalam membuat perancangan simulasi ini penulis menggunakan beberapa

perangkat lunak, yaitu :

1.

Sistem Operasi Minimum Microsoft Windows XP dan Maximum

Windows 7

2.

Macromedia Dreamweaver sebagai software desain dan pengembangan

web yang menyediakan kode editor

3.

Photoshop sebagai perancangan desain

4.

XAMPP sebagai server yang berdiri sendiri

5.

Mozilla Firefox sebagai web browser.

2.

Perangkat Keras (hardware)

Hardware adalah komponen-komponen komputer yang dapat dilihat dan

diraba secara langsung atau yang berbentuk nyata, yang berfungsi mendukung

proses komputerisasi. Umumnya komponen tersebut terdiri atas tiga jenis

perangkat yaitu masukan (input device), perangkat pengolahan (processor) dan

perangkat keluaran (output device). Adapun spesifikasi dari perangkat keras

tersebut adalah sebagai berikut :

1.

Input device, seperti : mouse, keyboard.

2.

Perangkat pengolahan, seperti : Prosessor core-i7, RAM 2GB,

motherboard, harddisk 500GB.

3.

Output device, seperti : monitor, printer.

(45)

3.

Unsur Manusia (Brainware)

Brainware merupakan aspek manusia yang menangani pengolahan komputer

maupun pengembangan, yang termasuk brainware adalah :

1.

Sistem analis adalah brainware yang bertanggungjawab untuk mendesain,

merancang dan menganalisa suatu program yang akan dibuat maupun

sudah jadi.

2.

Graphic designer seorang brainware yang berkecimpung di dunia design

grafis dan mahir dalam hal membuat suatu animasi.

3.

Programmer adalah orang yang mengerti dan ahli dalam bahasa

pemrograman yang digunakan dalam membuat dan merancang suatu

program.

4.

Public (pengguna), yaitu orang yang memakai sistem yang telah dirancang.

4.3

Pengujian Program

(46)

[image:46.612.108.545.83.355.2]

34

Gambar 4.1 Tampilan saat program simulasi dijalankan

Kemudian masukkan koin sebagai alat pembayaran untuk proses penyucian pakaian

[image:46.612.107.546.429.670.2]

(47)

Memasukkan lama waktu proses simulasi,disini ada 2 tahap dalam memasukkan proses

simulasi yaitu :

4.3.1 Proses Cuci

4.3.1.1 Proses Cuci Dengan Timer

[image:47.612.109.541.306.593.2]

Langkah - langkah menyuci ini akan menampilkan simulasi menyuci tanpa merendam

terlebih dahulu pakaian yang ingin dicuci proses penyucian akan terlihat pada gambar

berikut ini :

(48)

[image:48.612.107.546.81.341.2]

36

Gambar 4.4 Proses Cuci Pakaian Telah Selesai

4.3.1.2 Proses Cuci Dengan Timer Otomatis

(49)

[image:49.612.107.542.83.361.2]

Gambar 4.5 Proses Cuci Dengan Timer Otomatis

4.3.2 Proses Cuci dan Rendam

Proses simulasi ini akan dilakukan dengan langkah – langkah sebagai berikut :

1.

Koin dimasukkan dalam mesin cuci sesuai dengan banyaknya pakaian yang

akan dicuci.

2.

Waktu proses menyuci dan merendam dimasukkan oleh user sesuai dengan

kebutuhan user untuk membersihkan pakaian.

3.

Setelah user memilih waktu menyuci dan merendam maka user harus memilih

jenis air yang digunakan untuk menyuci.

(50)

[image:50.612.105.547.84.350.2]

38

Gambar 4.6 Proses merendam pakaian

[image:50.612.107.545.414.679.2]

(51)

[image:51.612.105.547.86.340.2]

(52)

BAB 5

KESIMPULAN DAN SARAN

5.1

Kesimpulan

Berdasarkan pembahasan pada bab – bab sebelumnya, maka pada bab ini yang merupakan

bab terakhir dari tugas akhir, penulis akan mencoba menarik kesimpulan dari penguraian

tersebut :

1.

Simulasi mesin cuci umum menggunakan koin dapat menerima inputan berupa

uang koin pecahan 1000, yang dapat digunakan sebagai alat transaksi penyucian

pakaian kedalam mesin.

2.

Dengan adanya perancangan program yang telah di buat dan di desain secara

sederhana maka dapat berfungsi sebagai media simulasi yang dapat memudahkan

dan mengurangi kesalahan – kesalahan yang akan dilakukan oleh masyarakat

awam dalam melakukan interaksi dengan mesin cuci umum menggunakan koin

yang telah beredar di masyarakat.

(53)

5.2

Saran

Beberapa saran berikut ini merupakan masukan – masukan yang penulis terima dari

mereka yang peduli kepada penulis dalam menyelesaikan tugas akhir ini :

1.

Bagi penulis, diharapkan dapat lebih konsisten dalam mengerjakan dan

menyelesaikan tugas akhir, terutama pada waktu kapan diselesaikannya tugas

akhir ini.

2.

Perangkat lunak dapat dikembangkan dan disempurnakan agar lebih menarik dan

memiliki beberapa fungsi yang berjalan sesuai dengan perkembangan teknologi

masa kini.

(54)

Daftar Pustaka

Lubis, Mohammad Safri. 2011. Teknologi pengembangan aplikasi web. USU Press,

Medan.

Miller, Marc D. 2003. Web Design Using Macromedia Dreamweaver. McGraw-Hill

Companies.Inc, New York.

Panduan Tata cara Penulisan Skripsi & Tugas Akhir.2010. Dokumen Nomor :

Akad/05/2005. Medan : Fakultas Matematika dan Ilmu Pengetahuan Alam

Sulhan, Moh. 2006. Pengembangan Aplikasi Berbasis Web dengan PHP & ASP. Gava

Media, Yogyakarta

Sulistya, Cristianus Sigit. 2008. Belajar Kilat Adobe Dreamweaver CS4. CV Andi Offset,

Yogyakarta

Yoga. 2004. Desain Kreatif dengan Adobe Photoshop CS. PT Elex Media Komputindo,

Jakarta.

tanggal 23 April 2013

(55)

KEMENTERIAN PENDIDIKAN NASIONAL

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM(FMIPA) Jl. Bioteknologi No.1 Kampus USU Telp. (061) 8211050 Fax (061) 8214290

MEDAN – 20155, Email : Dekanat@fmipa.usu.ac.id

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa

: MAHA PERDANA TARIGAN

Nomor Induk Mahasiswa

: 102406226

Judul Tugas Akhir

: Perancangan Simulasi Mesin Cuci Umum

Menggunakan Koin

Dosen Pembimbing

: Dra. Normalina Napitupulu, M.Sc.

Tanggal Mulai Bimbingan

:

Tanggal Selesai Bimbingan :

No TANGGAL

ASISTEN BIMBINGAN

PEMBAHASAN PADA ASISTENSI MENGENAI,

PADA BAB

PARAF DOSEN

PEMBIMBING KETERANGAN

* Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui:

Disetujui:

Departemen Matematika FMIPA USU,

Pembimbing Utama/

Ketua

Penanggung Jawab

(56)

Hasil Uji Program Tugas Akhir

SURAT KETERANGAN

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program

Diploma III Teknik Informatika/Statistika :

Nama

: MAHA PERDANA TARIGAN

NIM

: 102406226

Prog. Studi

: D3 TEKNIK INFORMATIKA

Judul TA

: Perancangan Simulasi Mesin Cuci Umum Menggunakan Koin

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal

Juni 2013

Dengan Hasil : SUKSES / GAGAL

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau

Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juni 2013

Dosen Pembimbing

(57)

Daftar Pustaka

Lubis, Mohammad Safri. 2011. Teknologi pengembangan aplikasi web. USU Press,

Medan.

Miller, Marc D. 2003. Web Design Using Macromedia Dreamweaver. McGraw-Hill

Companies.Inc, New York.

Panduan Tata cara Penulisan Skripsi & Tugas Akhir.2010. Dokumen Nomor :

Akad/05/2005. Medan : Fakultas Matematika dan Ilmu Pengetahuan Alam

Sulhan, Moh. 2006. Pengembangan Aplikasi Berbasis Web dengan PHP & ASP. Gava

Media, Yogyakarta

Sulistya, Cristianus Sigit. 2008. Belajar Kilat Adobe Dreamweaver CS4. CV Andi Offset,

Yogyakarta

Yoga. 2004. Desain Kreatif dengan Adobe Photoshop CS. PT Elex Media Komputindo,

Jakarta.

tanggal 23 April 2013

(58)

LISTING PROGRAM

index.php

<html>

<title>Perancangan Simulasi Mesin Cuci</title>

<head>

function goto(){

self.location.replace('index.php');

}

$(document).ready(function(){

$('#pilihdingin').live('click',function(){

(59)

$('#tempatgambardingin').html('<a href="#" id="pilihdingin"><img height="60"

src="img/coldwater2.png"></a>').show();

$('#tempatgambarpanas').html('<a href="#" id="pilihpanas"><img height="60"

src="img/hotwater.png"></a>').show();

});

$('#pilihpanas').live('click',function(){

$('#hasilpilihair').val('panas');

$('#tempatgambardingin').html('<a href="#" id="pilihdingin"><img height="60"

src="img/coldwater.png"></a>').show();

$('#tempatgambarpanas').html('<a href="#" id="pilihpanas"><img height="60"

src="img/hotwater2.png"></a>').show();

});

$('#tombolkoin').live('click',function(){

if($('#koin').val() > 17000){

alert('maks penyucian 3 Kg');

return false;

}

var nilai_koin_awal = $('#koin').val();

if(nilai_koin_awal == 0){

var nilai_koin_awal = 0;

} else {

var nilai_koin_awal = $('#koin').val();

}

(60)

var nilai_koin_akhir = eval(nilai_tambah_koin) + eval(nilai_koin_awal);

$('#koin').val(nilai_koin_akhir);

});

$('#tombolcuci').live('click',function(){

var menit_cuci_awal = $('#menitcuci').val();

var detik_cuci_awal = $('#waktucuci').val();

if(menit_cuci_awal == 0 || menit_cuci_awal == 15){

var menit_cuci_awal = 0;

var detik_cuci_awal = 0;

} else {

var menit_cuci_awal = $('#menitcuci').val();

var detik_cuci_awal = $('#waktucuci').val();

}

var nilai_tambah_menit = 5;

var nilai_tambah_detik = 300;

var nilai_menit_akhir = eval(nilai_tambah_menit) + eval(menit_cuci_awal);

var nilai_detik_akhir = eval(nilai_tambah_detik) + eval(detik_cuci_awal);

$('#menitcuci').val(nilai_menit_akhir);

(61)

});

$('#tombolrendam').live('click',function(){

var menit_rendam_awal = $('#menitrendam').val();

var detik_rendam_awal = $('#wakturendam').val();

if(menit_rendam_awal == 0 || menit_rendam_awal == 15){

var menit_rendam_awal = 0;

var detik_rendam_awal = 0;

} else {

var menit_rendam_awal = $('#menitrendam').val();

var detik_rendam_awal = $('#wakturendam').val();

}

var nilai_tambah_menit = 5;

var nilai_tambah_detik = 300;

var nilai_menit_akhir = eval(nilai_tambah_menit) + eval(menit_rendam_awal);

var nilai_detik_akhir = eval(nilai_tambah_detik) + eval(detik_rendam_awal);

$('#menitrendam').val(nilai_menit_akhir);

$('#wakturendam').val(nilai_detik_akhir);

});

$('#run').live('click',function(){

var cuci = $('#waktucuci').val();

(62)

var cuci = 900;

} else {

var cuci = eval($('#waktucuci').val());

}

var rendam = $('#wakturendam').val();

if(rendam == 0){

var rendam = 0;

} else {

var rendam = eval($('#wakturendam').val());

}

var totalwaktu = cuci + rendam;

if($('#koin').val()== '' ){ alert('Harap Isi Koin'); return false;}

if($('#menitcuci').val()== '' && $('#menitrendam').val()!= ''){ alert('Harap Isi Waktu

Cuci'); return false;}

if($('#hasilpilihair').val() == 'panas')

{}

else if($('#hasilpilihair').val() == 'dingin')

{}

else

{ alert('Harap Pilih Air'); return false;}

(63)

$('#showloading').html('<imgsrc="img/red.gif"

width="70%">').show().delay(cuci*1000).fadeOut();

$('#tempatgambardingin').html('<img height="60" src="img/coldwater.png">').show();

$('#tempatgambarpanas').html('<img height="60" src="img/hotwater2.png">').show();

} else if($('#hasilpilihair').val() == 'dingin'){

$('#showloading').html('<img src="img/blue.gif"

width="70%">').show().delay(cuci*1000).fadeOut();

$('#tempatgambardingin').html('<img height="60" src="img/coldwater2.png">').show();

$('#tempatgambarpanas').html('<img height="60" src="img/hotwater.png">').show();

}

$('#pbar-awal').html('').hide();

$('.pbar').css('border', '1px #000 solid');

$('#progress1').anim_progressbar();

$('#tempatkoin').html('<img src="img/koin.png" width="60">').show();

$('#tempatcuci').html('<img src="img/cuci.png" width="60">').show();

$('#tempattombolrendam').html('<img src="img/rendam.png" width="60">').show();

$('#tombolstart1').html('<a href="#" id="stop" onclick="goto()"><img width="60"

src="img/stop.png"></a>').show().delay(totalwaktu*1000).fadeOut();

$('#tombolstart2').html('<a href="#" id="restart" onClick="goto()"><img width="60"

(64)

if(rendam != 0){

$('#showkatarendam').html('Merendam Baju').show().delay(rendam*1000).fadeOut();

$('#showkatarendam2').html('Mencuci Baju').hide().delay(rendam*1000).fadeIn();

$('#showkatacucitanparendam').html(' - Selesai').hide().delay(totalwaktu*1000).fadeIn();

} else {

$('#showkatarendam').html('Mencuci Baju').show().delay(cuci*1000).fadeOut();

$('#showkatarendam2').html('Selesai').hide().delay(totalwaktu*1000).fadeIn();

}

});

</script>

<style>

/* progress bar container */

#progressbar{

border:0px solid black;

width:450px;

height:15px;

position:relative;

color:black;

}

/* color bar */

#progressbar div.progress{

position:absolute;

width:0;

(65)

overflow:hidden;

}

/* text on bar */

#progressbar div.progress .text{

position:absolute;

text-align:center;

color:white;

}

.backgroundblue{

background-color: #6188f5;

33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);

background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12)

33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);

-webkit-animation: pb 0.8s linear 0 infinite;

background-position: 0 0;

background-repeat: repeat-x;

background-size: 32px 16px;

width: 0;

}

.backgroundred{

background-color: #6188f5;

(66)

background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12)

33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);

-webkit-animation: pb 0.8s linear 0 infinite;

background-position: 0 0;

background-repeat: repeat-x;

background-size: 32px 16px;

width: 0;

}

/* text off bar */

#progressbar div.text{

position:absolute;

width:100%;

height:100%;

text-align:center;

}

</style>

.depan{

width:900px;

height:600px;

margin-left:200px;

margin-top:10px;

border-radius:px;

background-size:100%;

(67)

border-radius:7px;

}

.tengah{

float:right;

width:250px;

height:450px;

margin-right:30px;

margin-left:10px;

margin-top:40px;

background-image:url(img/tombol.png);

border-radius:7px;

}

.bawah{

float:left;

width:400px;

height:400px;

margin-left:0px;

margin-top:5px;

background-size:100%;

border-radius:0px;

}

.coin{

float:left;

width:115px;

height:20px;

margin-top:10px;

margin-left:5px;

}

.start{

(68)

width:100px;

height:50px;

margin-top:50px;

margin-right:1px;

margin-left:30px;

}

.timer2{

float:right;

width:100px;

height:50px;

margin-top:40px;

margin-right:5px;

margin-left:70px;

}

.air{

float:right;

width:100px;

height:50px;

margin-top:40px;

margin-right:5px;

margin-left:70px;

}

.Load{

float:left;

width:455px;

margin-top:40px;

height:100px;

background-color:;

(69)

margin-left:60px;

border-radius:1px;

margin-bottom:5px;

}

.td {

float:left;

margin-left:40px;

}

.tr{

float:left;

margin-left:10px;

}

#rombolstart1 {

width:400px;

height:400px;

margin:0px 0px 0px 60px;

}

.kata{

color:#FFF;

text-align:center;

font-family:Digital-7;

font-size:36px;}

</style>

</head>

<body>

<h2 class="kata">Simulasi Mesin Cuci Koin</h2>

(70)

<div id="katatimerendam"> <span id="showkatarendam" ></span><span

id="showkatarendam2" ></span><span id="showkatacucitanparendam" ></span></div>

</div>

</div>

<tr>

<td colspan="2" align="center"> <input style="font-size:12" type="text"

id="koin" name="koin" class="coin" placeholder="klik tombol koin" readonly="readonly" />

<span id="tempatkoin"><div style="margin-top:-12px;"><a href="#"

(71)

</td>

</tr>

<tr>

<input style="font-size:12" type="text" id="menitcuci" name="menitcuci"

class="coin" placeholder="klik tombol cuci" readonly="readonly" />   <div

style="margin-top:-12px;"><input type="hidden" name="waktucuci" id="waktucuci"></div>

<span id="tempatcuci"><div style="margin-top:-12px;"><a href="#"

id="tombolcuci" ><img src="img/cuci.png" width="60"></a></div></span>

</div>

</td>

</tr>

<tr>

<input style="font-size:12" type="text" id="menitrendam" name="menitrendam" class="coin"

placeholder="klik tombol rendam" readonly="readonly" />   <div

style="margin-top:-12px;"><input type="hidden" name="wakturendam" id="wakturendam">

<span id="tempattombolrendam"><div style="margin-top:-12px;"><a href="#"

id="tombolrendam" ><img src="img/rendam.png" width="60"></a></div></span>

</div>

(72)

</tr>

<td> <div style="float:left;margin-right:10px;margin-left:88px"

id="tempatgambardingin"><a href="#" id="pilihdingin"><img height="60"

src="img/coldwater.png"></a></div>

<div id="tempatgambarpanas" style="float:left;"><a href="#" id="pilihpanas"><img

height="60" src="img/hotwater.png"></a></div>

</tr>

<tr>

<td colspan="2" align="center"><div id="tombolstart1"><a href="#"

id="run"><img width="60" src="img/start.png"></a></div>

</td>

</tr>

</table>

</div>

</br></br>

</div>

(73)

</div>

</body>

</html>

dua.php

$(document).ready(function(){

$('#showkatacuci').html('Mencuci Baju').show().delay(<?php echo $_GET['time'];

?>*1000).fadeOut();

$('#showkatacuci2').html('Selesai').hide().delay(<?php echo $_GET['time']; ?>*1000).fadeIn();

})

</script>

<span id="timer">00 : 00 : 00</span> - <span id="showkatacuci"></span><span

id="showkatacuci2">Mencuci Baju</span>

</div>

$(function(){

var waktu = <?php echo $_GET['time']; ?>; // 3 menit

var sisa_waktu = waktu;

var longWayOff = sisa_waktu;

$("#timer").countdown({

until: longWayOff,

(74)

});

})

</script>

main.css

.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px

auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}

h3 {text-align:center}

.pbar .ui-progressbar-value {display:block !important}

.pbar {overflow: hidden;}

.percent {position:relative;text-align: right;}

.elapsed {position:relative;text-align: right;}

.pbar-awal{background:#FFF;height:8px;width:93%;font-size:80%;border:1px #000

solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius:

3px;-webkit-border-radius: 3px}

jquery.countdown.js

/* http://keith-wood.name/countdown.html

Countdown for jQuery v1.5.11.

Written by Keith Wood (kbwood{at}iinet.com.au) January 2008.

Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt)

and

MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.

(75)

/* Display a countdown timer.

Attach it with options like:

$('div selector').countdown(

{until: new Date(2009, 1 - 1, 1, 0, 0, 0), onExpiry: happyNewYear}); */

(function($) { // Hide scope, no $ conflict

/* Countdown manager. */

function Countdown() {

this.regional = []; // Available regional settings, indexed by language code

this.regional[''] = { // Default regional settings

// The display texts for the counters

labels: ['Years', 'Months', 'Weeks', 'Days', 'Hours', 'Minutes', 'Seconds'],

// The display texts for the counters if only one

labels1: ['Year', 'Month', 'Week', 'Day', 'Hour', 'Minute', 'Second'],

compactLabels: ['y', 'm', 'w', 'd'], // The compact texts for the counters

whichLabels: null, // Function to determine which labels to use

timeSeparator: ':', // Separator for time periods

isRTL: false // True for right-to-left languages, false for left-to-right

};

this._defaults = {

until: null, // new Date(year, mth - 1, day, hr, min, sec) - date/time to count down

to

// or numeric for seconds offset, or string for unit offset(s):

// 'Y' years, 'O' months, 'W' weeks, 'D' days, 'H' hours, 'M' minutes, 'S'

seconds

since: null, // new Date(year, mth - 1, day, hr, min, sec) - date/time to count up

from

// or numeric for seconds offset, or string for unit offset(s):

seconds

timezone: null, // The timezone (hours or minutes from GMT) for the target times,

(76)

serverSync: null, // A function to retrieve the current server time for

synchronisation

format: 'dHMS', // Format for display - upper case for always, lower case only if

non-zero,

seconds

compact: false, // True to display in a compact format, false for an expanded one

significant: 0, // The number of periods with values to show, zero for all

description: '', // The description displayed for the countdown

expiryUrl: '', // A URL to load upon expiry, replacing the current page

expiryText: '', // Text to display upon expiry, replacing the countdown

alwaysExpire: false, // True to trigger onExpiry even if never counted down

onExpiry: null, // Callback when the countdown expires -

// receives no parameters and 'this' is the containing division

onTick: null, // Callback when the countdown is updated -

// receives int[7] being the breakdown by period (based on format)

// and 'this' is the containing division

tickInterval: 1 // Interval (seconds) between onTick callbacks

};

$.extend(this._defaults, this.regional['']);

this._serverSyncs = [];

// Shared timer for all countdowns

function timerCallBack(timestamp) {

var drawStart = (timestamp || new Date().getTime());

if (drawStart - animationStartTime >= 1000) {

$.countdown._updateTargets();

animationStartTime = drawStart;

}

requestAnimationFrame(timerCallBack);

}

var requestAnimationFrame = window.requestAnimationFrame ||

(77)

window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||

window.msRequestAnimationFrame || null; // this is when we expect a fall-back

to setInterval as it's much more fluid

var animationStartTime = 0;

if (!requestAnimationFrame) {

setInterval(function() { $.countdown._updateTargets(); }, 980); // Fall back to

good old setInterval

}

else {

animationStartTime = window.mozAnimationStartTime || new Date().getTime();

requestAnimationFrame(timerCallBack);

}

var PROP_NAME = 'countdown';

var Y = 0; // Years

var O = 1; // Months

var W = 2; // Weeks

var D = 3; // Days

var H = 4; // Hours

var M = 5; // Minutes

var S = 6; // Seconds

$.extend(Countdown.prototype, {

/* Class name added to elements to indicate already configured with countdown. */

markerClassName: 'hasCountdown',

/* List of currently active countdown targets. */

_timerTargets: [],

/* Override the default settings for all instances of the countdown widget.

(78)

setDefaults: function(options) {

this._resetExtraLabels(this._defaults, options);

extendRemove(this._defaults, options || {});

},

/* Convert a date/time to UTC.

@param tz (number) the hour or minute offset from GMT, e.g. +9, -360

@param year (Date) the date/time in that timezone or

(number) the year in that timezone

@param month (number, optional) the month (0 - 11) (omit if year is a Date)

@param day (number, optional) the day (omit if year is a Date)

@param hours (number, optional) the hour (omit if year is a Date)

@param mins (number, optional) the minute (omit if year is a Date)

@param secs (number, optional) the second (omit if year is a Date)

@param ms (number, optional) the millisecond (omit if year is a Date)

@return (Date) the equivalent UTC date/time */

UTCDate: function(tz, year, month, day, hours, mins, secs, ms) {

if (typeof year == 'object' && year.constructor == Date) {

ms = year.getMilliseconds();

secs = year.getSeconds();

mins = year.getMinutes();

hours = year.getHours();

day = year.getDate();

month = year.getMonth();

year = year.getFullYear();

}

var d = new Date();

d.setUTCFullYear(year);

d.setUTCDate(1);

d.setUTCMonth(month || 0);

d.setUTCDate(day || 1);

d.setUTCHours(hours || 0);

(79)

d.setUTCSeconds(secs || 0);

d.setUTCMilliseconds(ms || 0);

return d;

},

/* Convert a set of periods into seconds.

Averaged for months and years.

@param periods (number[7]) the periods per

year/month/week/day/hour/minute/second

@return (number) the corresponding number of seconds */

periodsToSeconds: function(periods) {

return periods[0] * 31557600 + periods[1] * 2629800 + periods[2] * 604800 +

periods[3] * 86400 + periods[4] * 3600 + periods[5] * 60 + periods[6];

},

/* Retrieve one or more settings values.

@param name (string, optional) the name of the setting to retrieve

or 'all' for all instance settings or omit for all default settings

@return (any) the requested setting(s) */

_settingsCountdown: function(target, name) {

if (!name) {

return $.countdown._defaults;

}

var inst = $.data(target, PROP_NAME);

return (name == 'all' ? inst.options : inst.options[name]);

},

/* Attach the countdown widget to a div.

@param target (element) the containing division

@param options (object) the initial settings for the countdown */

_attachCountdown: function(target, options) {

var $target = $(target);

(80)

return;

}

$target.addClass(this.markerClassName);

var inst = {options: $.extend({}, options),

_periods: [0, 0, 0, 0, 0, 0, 0]};

$.data(target, PROP_NAME, inst);

this._changeCountdown(target);

},

/* Add a target to the list of active ones.

@param target (element) the countdown target */

_addTarget: function(target) {

if (!this._hasTarget(target)) {

this._timerTargets.push(target);

}

},

/* See if a target is in the list of active ones.

@param target (element) the countdown target

@return (boolean) true if present, false if not */

_hasTarget: function(target) {

return ($.inArray(target, this._timerTargets) > -1);

},

/* Remove a target from the list of active ones.

@param target (element) the countdown target */

_removeTarget: function(target) {

this._timerTargets = $.map(this._timerTargets,

function(value) { return (value == target ? null : value); }); // delete entry

},

/* Update each active timer target. */

(81)

for (var i = this._timerTargets.length - 1; i >= 0; i--) {

this._updateCountdown(this._timerTargets[i]);

}

},

/* Redisplay the countdown with an updated display.

@param target (jQuery) the containing division

@param inst (object) the current settings for this instance */

_updateCountdown: function(target, inst) {

var $target = $(target);

inst = inst || $.data(target, PROP_NAME);

if (!inst) {

return;

}

$target.html(this._generateHTML(inst));

$target[(this._get(inst, 'isRTL') ? 'add' : 'remove') + 'Class']('countdown_rtl');

var onTick = this._get(inst, 'onTick');

if (onTick) {

var periods = inst._hold != 'lap' ? inst._periods :

this._calculatePeriods(inst, inst._show, this._get(inst,

'significant'), new Date());

var tickInterval = this._get(inst, 'tickInterval');

if (tickInterval == 1 || this.periodsToSeconds(periods) % tickInterval ==

0) {

onTick.apply(target, [periods]);

}

var expired = inst._hold != 'pause' &&

(inst._since ? inst._now.getTime() < inst._since.getTime() :

inst._now.getTime() >= inst._until.getTime());

if (expired && !inst._expiring) {

inst._expiring = true;

(82)

this._removeTarget(target);

var onExpiry = this._get(inst, 'onExpiry');

if (onExpiry) {

onExpiry.apply(target, []);

}

var expiryText = this._get(inst, 'expiryText');

if (expiryText) {

var layout = this._get(inst, 'layout');