BAB II
LANDASAN TEORI
2.1 ATM (Automatic Teller Machine)
ATM adalah sebuah alat elektronik yang mengijinkan nasabah perbankan untuk mengambil uang dan mengecek rekening tabungan mereka tanpa perlu dilayani oleh seorang "Teller" di Bank. Banyak ATM juga berfungsi untuk penyetoran transfer uang dan transaksi perbankan lainnya. Pada mulanya mesin pintar ini ditemuka n oleh Don Wetzel, Vice President of Product Planning pada perusahaan Docutel. Konsep ATM pertama kali lahir pada tahun 1968, lalu prototipenya muncul setahun kemudian, dan akhirnya Ducotel mendaftarkannya pada Kantor paten pada tahun 1973.
Perusahaan Docutel membeli mesin ATM dari tiga orang pembuatnya, yaitu Don Wetzel, yang pada saat itu adalah seorang Vice President of Product Planning di Docutel, Tom Barnes (kepala mekanik) dan George Chastian, seorang insyinyur listrik. Ide awalnya berasal dari Wetzel, ketika mengantri di bank. Wetzel kerapkali merasa kesulitan ketika berurusan dengan bank yang harus selalu mengantri untuk satu layanan sebagai nasabah bank. Hingga akhirnya ketiga penemu ini menciptakan mesin ATM yang di Indonesia dikenal dengan istilah Anjungan Tunai Mandiri. Dan dana yang dihabiskan untuk sebuah mesin ATM pertama kali adalah sekitar lima juta dollar.
2.2 EDC (Electronic Data Capture)
1. Magnetic Stripe adalah panel berwarna hitam yang berada pada sisi belakang Kartu, yang berisi data pemilik kartu
2. Chip adalah komponen elektronik yang memilki fungsi sama seperti magnetic stripe yang dirancang untuk menjalankan fungsi penyimpanan dan pemprosesan data
3. EMV singkatan dari Europay, MasterCard dan VISA, sebuah standar global untuk operasi IC (Integrated Circuit) Card atau umumnya disebut "kartu chip". IC Card ini dipakai pada terminal EDC untuk melakukan transaksi penjualan (POS) dan anjungan tunai mandiri (ATM), sebagai alat transaksi kartu kredit dan kartu debit.
4. Swipe adalah menggesekkan magnetic stripe yang ada pada kartu pada mesin EDC
5. Dip adalah memasukkan Chip kartu pada Chip Reader pada mesin EDC 6. Sales Slip/Sales Draft adalah kertas yang disediakan oleh Bank untuk
dipergunakan oleh Merchant pada saat mencetak data Transaksi Kartu dan berfungsi sebagai alat bukti bagi Merchant pada saat melakukan penagihan kepada Bank.
7. Void : Pembatalan transaksi
8. Settlement adalah proses penutupan transaksi oleh Merchant dengan pihak Bank melalui EDC agar Merchant dapat dibayar atas total jumlah transaksi dan pemegang kartu akan tertagih oleh bank.
9. Chargeback adalah penagihan/pembebanan kembali oleh Bank kepada Merchant atas tagihan yang telah dibayar oleh Bank kepada Merchant. 10.Merchant Discount Rate (MDR) adalah sejumlah/prosentase fee yang
diberikan oleh Merchant kepada Bank atas setiap transaksi yang dilakukan pada mesin edc.
Setelah Kartu digesekkan (Swipe atau dip) pada EDC, maka respon yang akan muncul pada layar EDC dapat berupa :
1. Approved: limit kredit cukup untuk transaksi dan transaksi disetujui 2. Decline: limit kredit tidak cukup untuk transaksi
4. Pick Up/Capture Card: perintah kepada Merchant untuk menahan Kartu
2.3 PhoneGap
PhoneGap adalah sebuah development framework yang berbasis standar open source yang dapat digunakan untuk membangun aplikasi-aplikasi mobile. Aplikasi yang dikembangkan dengan PhoneGap dapat dijalankan secara lintas platform. Hal ini dikarenakan development framework yang digunakan menggunakan bahasa scripting HTML, CSS dan JavaScript. PhoneGap memiliki slogan yang cukup bombastis yaitu Write Once. Compile in the cloud. Run Anywhere. Adapun Requirement pada PhoneGap Framework dapat dilihat pada gambar 2.1.
Gambar 2.1 : Requirement PhoneGap
PhoneGap SDK menyediakan sebuah API, yaitu sebuah lapisan abstrak yang menyediakan pengembang dengan akses ke fitur hardware dan platform tertentu. PhoneGap menjelaskan bahwa dengan kode yang sama dapat digunakan pada sejumlah platform mobile dengan sedikit perubahan koding ataupun tidak, yang membuat aplikasi kita dapat dipakai untuk kalangan pengguna yang lebih luas.
Gambar 2.2 : PhoneGap Support
2.4 Xcode
Xcode adalah sebuah suite of tools, yang dikembangkan oleh Apple, untuk mengembangkan software untuk platform Mac OS X dan iOS. Untuk menggunakan Xcode, tentunya kita harus menggunakan Mac OS X. Untuk mendownload Xcode, dapat didownload dari situs resmi developer Apple secara gratis di http://developer.apple.com/technologies/xcode.html.
perpustakaan yang berisi kode-kode untuk dibangun kedalam sebuah XCode, sama seperti class-class pada java, dan unit-unit VCL pada delphi. Adapun tampilan Compiler Xcode pada Maverick OS X dapat dilihat pada gambar 2.3.
Gambar 2.3 : Xcode Maverick OS X
2.5 HTML 5
HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Banyak pengembangan website yang dibuat menggunakan HTML 5. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG (Web Hypertext Application Technology Working Group). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML. Berikut tujuan dibuatnya HTML5 :
1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (Seperti Flash)
3. Penanagan kesalahan yang lebih baik
6. Proses pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5 :
1. Unsur kanvas untuk menggambar
2. Video dan elemen audio untuk media pemutaran
3. Dukungan yang lebih baik untuk penyimpanan secara offline
4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
5. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML 5. Pembuatan HTML 5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut
<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie"
value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" />
Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini
<object width="300" height="300"
data="data:application/x-silverlight-2," type="application/x-silverlight-2" > <param name="source"
value="SilverlightApplication1.xap"/> </object>
HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut
<video src=tutorialku.mp4> </video>
Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita. Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut: http://html5test.com
2.6 Node.JS
Node.js adalah platform yang dibangun atas JavaScript runtime Chrome untuk membuat aplikasi jaringan dengan peforma tinggi dan skalabel. Node.js menggunakan I/O model non-blocking serta event-driven, yang membuatnya ringan serta effisien, sehingga tepat untuk aplikasi data-intensive real-time yang berjalan di perangkat terdistribusi. Adapun tampilan halaman website node.js dapat dilihat pada gambar 2.4.
Gambar 2.4 : Node.js
2.6.1 Model I/O Non-Blocking
Hal yang harus diperhatikan dalam development dengan node.js adalah sifat non-blocking dari platform ini. Untuk menjabarkan sifat non-non-blocking dapat dilihat pada gambar 2.5.
Ga mbar 2.5 : Non Blocking Node.js
Gambar 2.6 : Flowchart Node.js
Tiga query kecil dijalankan secara bersamaan dengan waktu eksekusi yang lebih cepat daripada satu query besar, sehingga total waktu yang dibutuhkan aplikasi untuk menampilkan hasil menjadi lebih singkat. Kesimpulan: Sifat non-blocking dan event driven adalah hal yang sangat mendasar dari node.js dan harus dijadikan pertimbangan dalam membuat aplikasi ringan dan berperforma tinggi dengan platform node.js.
2.7 Eclipse
Eclipse adalah sebuah IDE (Integrated Development Environment) untuk mengembangkan perangkat lunak dan dapat dijalankan di semua platform (platform-independent). Eclipse dikembangkan dengan bahasa pemrograman Java, akan tetapi Eclipse mendukung pengembangan aplikasi berbasis bahasa pemrograman lainnya, seperti C/C++, Cobol, Python, Perl, PHP, dan lain sebagainya. Selain sebagai IDE untuk pengembangan aplikasi, Eclipse pun bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak, seperti dokumentasi, test perangkat lunak, pengembangan web, dan lain sebagainya. Eclipse pada saat ini merupakan salah satu IDE favorit dikarenakan gratis dan open source, yang berarti setiap orang boleh melihat kode pemrograman perangkat lunak ini. Selain itu, kelebihan dari Eclipse yang membuatnya populer adalah kemampuannya untuk dapat dikembangkan oleh pengguna dengan komponen yang dinamakan plug-in.
sistem operasi yang digunakan. Jika menggunakan GNU/Linux, caranya adalah Resolving dl.google.com... 64.233.181.190, 64.233.181.91, 64.233.181.93, ... Connecting to
dl.google.com|64.233.181.190|:80... connected. HTTP request sent, awaiting response... 200 OK Length:
16971139 (16M) [application/x-tar] Saving to: `android-sdk_r06-linux_86.tgz'
100%[==================================================== ========================================================= ===================>] 16,971,139 73.5K/s in 4m 16s 2010-08-29 05:27:23 (64.8 KB/s) -
`android-sdk_r06-linux_86.tgz' saved [16971139/16971139] martinus@martinusadyh:[~]$
Proses download sudah selesai, sekarang ekstrak pada direktori yang diinginkan (jika menggunakan windows bisa diekstrak pada C:\> atau /home/[nama-user] jika menggunakan GNU/Linux) yang nantinya akan membuat sebuah direktori seperti C:\android-sdk-windows_86 di Windows atau /home/[nama-user]/android-sdk-linux_86 jika menggunakan GNU/Linux. Jika proses ekstrak sudah selesai, sekarang downloadlah Android Component dengan cara masuklah pada direktori /home/[nama-user]/android-sdk-linux_86/tools melalui terminal dan jalankan perintah android seperti dibawah ini :
line parameters provided, launching UI. See 'android --help' for operations from the command line.
Setelah kita mengetikkan android pada terminal, maka tidak lama akan muncul Android SDK and AVD Manager. Untuk menginstall dan menambahkan komponen, sekarang pilihlah menu Available Packages dan pilihlah semua opsi yang terdapat
pada menu sebelah kanan seperti gambar 2.7.
Gambar 2.7 : Menambahkan komponen Android SDK
2.8 Teknik CSS (Cascading Style Sheet) for Retina Display
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam
seperti style, misalnya heading,
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warn antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
CSS 3 adalah versi beberapa 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti:
1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis
2. Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap".
3. Jenis huruf eksternal, sehingga dapat menggunakan huruf yang tidak termasuk "web-safe fonts".
Smartphone ataupun tablet PC memiliki karakteristik full layout dimana website ditampilkan sesuai dengan ukuran layar perangkat dengan kemampuan zoom-in & zoom-out yang mudah. Sebenarnya jika website kita sudah Responsive, hal tersebut tidak akan menjadi masalah. Tetapi karena Smartphone dan tablet PC sekarang kebanyakan memiliki resolusi yang tinggi (Retina Display), maka website yang dioptimalkan untuk layar monitor juga dapat ditampilkan dengan tajam dan teksnya tetap enak dilihat. Hanya saja kadang-kadang kita menemukan beberapa permasalahan kecil pada layout website yang umum terjadi apabila kita membuka website kita di perangkat Mobile.
Viewport merupakan attribut baru untuk tag <meta> yang berguna untuk mengatur bidang tampilan layar (viewport). Dengan menambahkan tag ini di <head> akan membuat layar Mobile Device menampilkan seluruh tampilan layout full. Kodenya seperti ini:
<meta name="viewport" content="width=device-width">
Apple pertama kali memperkenalkan layar dengan kualitas kerapatan 2 kali lipat pada tahun 2010 ketika peluncuran iPhone 4 dengan istilah Retina Display. Dimana jumlah pixel 2 kali lipat lebih banyak dan dirapatkan sehingga kualitas teks dan gambar lebih tajam. Jika layar ini membuka image di website terutama icon yang ukurannya kecil atau logo, maka logonya akan buram (Blur). Karena gambar kita tidak dioptimalkan untuk Retina Display, kita harus membuat logo yang sama dengan ukuran 2 kali lipat logo biasa dan ditampilkan dalam ukuran logo biasa. Misal logo website kita ukurannya 100×50 pixel dengan file logo.png dan kita mempunyai logo lain dengan nama file logo-retina.png yang ukurannya 2x lipat yaitu 200×100 pixel. Jika kita memanggil logo-retina.png dan menampilkannya dalam ukuran 100×50 pixel maka kita akan memiliki logo yang lebih tajam dan jelas ketika dibuka di layar perangkat mobile dengan Retina Display atau HiDPI. Adapun kodenya seperti ini: @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
#logo {
width:100px; height:50px;
} }
<img src="logo-retina.png" width="100" height="50" /> $('img[data-retina]').retina({checkIfImageExists: true}); <img src="logo.png" data-retina="logo-retina.png"
id="logo" />
Sekarang bagaimana membuat background pada CSS menjadi Retina Display dengan menggunakan Media Query. Hasil ukuran gambar berdasarkan density dapat dilihat pada gambar 2.8.
body {
width:100px; height:50px;
background:url(background.png); }
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
body {
background:url(background-retina.png); background-size:100px 50px;
} }
