Salah satu website yang baik adalah website yang bisa digunakan untuk berinterkasi dengan pengunjungnya. Bentuk interaksi tersebut salah satunya adalah dengan melalui adanya kolom komentar untuk setiap informasi yang ada di dalam website kita. Nah, untuk menyediakan kolom komentar itu sendiri ada berbagai cara yang bisa dipakai dari nyekrip sendiri, bikin manajemen komentar sendiri, atau yang lebih mudah, lebih powerfull, dan bisa men-drive pengunjung ke website kita adalah dengan memanfaatkan kolom komentar facebook.

Untuk bisa memajang facebook comment form di website kita, langkah-langkahnya adalah sebagai berikut:

1. Ambil Codenya
2. Sispkan JavaScriptnya ke website
3. Customasi code yang sudah di dapat

Mengambil Code

Untuk mendapatkan code integrasi kita harus mengunjungi terlebih dahulu Facebook Comment Plug-in Page dan mengisi kolom sesuai spesifikasi yang kita butuhkan, seperti dapat dilihat pada gambar berikut:


Kosongkan URL jika kita ingin form bersifat dinamis/bisa muncul di setiap post. Sedikit saran, website yang kita buat sebaiknya terbagi menjadi beberapa modul sehingga nilai URL nantinya bisa lebih dinamis.

Dari halaman plug-in facebook kita akan mendapatkan dua macam code yaitu code javascript dan blok
 untuk meletakkan form komentar, seperti gambar berikut:


Sisipkan Code JavaScript

Langkah selanjutnya adalah menyisipkan code javascript. Sebaiknya letakkan langsung setelah tag body dibuka seperti contoh berikut:

[php]






/*Letakkan code javascript disini*/

[/php]

Kembali lagi ke modularisasi, dengan adanya modularisasi ini juga akan mempermudah kita dalam menyisipkan code javascript. Jika kita sudah menyediakan 1 file header yang mengandung code javascript maka script tersebut akan terbaca dari halaman apapun yang menginclude file header.

Langkah terkahir adalah meletakkan blok <div> di tempat dimana kita menginginkan kolom komentar muncul. Untuk mendapatkan URL dinamis, customasi code seperti berikut:

[php]
[/php]

  Read More

Sebelum melanjutkan pembahasan tentang reverse AJAX yang masi bersambung kemarin, kita pindah dulu sebentar ke sesuatu yang masih nyambung dengan reverse AJAX yaitu ke salah satu fitur di HTML 5 yang memungkinkan website kita dapat berinteraksi secara realtime. Fitur tersebut disebut dengan Server Sent Event (SSE).

SSE adalah API yang disediakan oleh HTML 5 untuk mem-push data dari server ke client. Dengan menggunakan SSE kita dapat mendapatkan update dari server tanpa harus mengirimkan data tertentu terlebih dahulu. Contoh implementasinya bisa berupa live notification, atau realtime timeline update, atau untuk untuk sistem penjualan bisa berupa realtime stock monitoring. Kelebihan SSE dibandingkan dengan web socket ataupun comet addalah, penggunaan SSE ini tidak memerlukan fitur tambahan pada server. Jadi kalaupun nantinya aplikasi kita dijalankan di shared hosting kita tetap bisa menggunakan fitur SSE ini.
Javascript API

Untuk bisa memperoleh event stream buat object EventSource dan arahkan ke URL Stream, seperti contoh berikut:

var source=new EventSource("path_to_event_file");

Kemudian untuk memperoleh message dari server kita panggil event onmessage dan memberikan handler apa yang akan kita lakukan terhadap message tersebut, seperti contoh berikut:

source.onmessage=function(event){

 /*event handler*/
};

Beberapa atribut yang terdapat pada SSE yaitu:

• new EventSource(URL) à digunakan untuk membuat object EventSource yang akan menerima event dari URL yang dispesifikasikan
• readyState à untuk mengetahui status EventSource apakah connecting, open, atau close
• onopen, onmessage à event yang dapat dikirimkan oleh EventSource
• event.dataà Konten dari message yang dikirimkan
• close à menutup koneksi dari client side

Property pada Server Sent Event

Server Sent Event memiliki beberapa fitur khusus yaitu:

• Stream koneksi dari server sifatnya read only.
• Menggunakan HTTP request biasa dan tidak membutuhkan protocol khusus.
• Jika koneksi terputus, EventSource akan mengirimkan event error kemudian mencoba mengkoneksikan kembali. Server juga akan mengelola timeout sebelum klien mencoba untuk mengkoneksikan kembali.
• Klien dapat mengirimkan ID unik di dalam pesan yang dikirimkan. Ketika klien mencoba untuk reconnect setelah koneksi terputus, server akan mengirimkan ID yang paling terakhir terkirim.

Event Stream Format

Untuk bisa mengirimkan data dari server maka harus mengawali dengan perintah ‘data:’ diikuti dengan pesan yang akan dikirimkan. Seperti contoh berikut:

data: My message\n\n

Jika pesan terdiri lebih dari satu baris, maka dapat dituliskan sebagai berikut:

data: first line\n
data: second line\n\n

Untuk mengirimkan data berupa JSON:

data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n

Client Side untuk menghandle:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.id, data.msg);
}, false);

Untuk memberikan nama tertentu dari Event:

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n

Client side untuk menghandle:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

Contoh Sederhana

Saya akan memberikan sedikit contoh sederhana untuk membuat live notification sistem. Pada contoh berikut, server akan mengirimkan jumlah notifikasi baru setiap ada penambahan data notifikasi belum terbaca pada database.

Langkah pertama kita buat tabel dulu di database bernama tabel notifikasi, dengan struktur sebagai berikut:

Atribut	Tipe Data	Keterangan
idnotifikasi	int	Auto_INCREMENT
isinotifikasi	varchar(100)	konten dari notifikasi
status	int	status notifikasi, 0 jika sudah terbaca, 1 jika belum terbaca

Buat file koneksi ke database dan query yang dibutuhkan:

$hostname="localhost";
$user="root";
$pass="";
$db="nama_db";

$con=mysql_connect($hostname, $user, $pass);
mysql_select_db($db,$con);

function getaktifnotifikasi(){
 require_once('koneksi.php');
 $notif=array();
 $sql="select * from notifikasi where status=1";
 $hasil=mysql_query($sql);
 $jumlah=mysql_num_rows($hasil);
 $i=1;
 if($jumlah > 0){
  while($pel=mysql_fetch_array($hasil)){
   $notif[$i]['idnotifikasi']=$pel['idnotifikasi'];
   $notif[$i]['isinotif']=$pel['isinotif'];
   $notif[$i]['status']=$pel['status'];
   $i++;
  }
 }
 return $notif;
}

Buat file notifikasi.php dengan isi sebagai berikut:

 0){
 echo "data: {$jumlah} \n\n"; /*pesan yang dikirimkan*/
}

flush();
?>

Buat file index.php untuk menampilkan notifikasi:

Data Baru

Jalankan. Coba tambah isi tabel dari database dengan bermacam status dan perhatikan hasilnya.

Setiap isi tabel bertambah maka jumlah notifikasi yang tampil pun akan berubah, begitu juga jika status notifikasi sudah terbaca maka jumlah notifikasi pun akan berkurang. Contoh ini adalah contoh paling sederhana, selamat mencoba… Read More

AJAX atau kepanjangannya Asynchronous Javascript and XML merupakan cara bertukar data dengan server tanpa harus me-reload halaman web. Penggunaan AJAX tidak bisa dilakukan secara berdiri sendiri tetapi digabungkan dengan teknologi yang lain seperti HTML dan CSS. Javascript dan XMLHttpRequest menyediakan metode untuk terjadinya pertukaran data secara asynchronous. Nah pada prinsipnya AJAX ini berfungsi untuk meminta server bisa mengirimkan data tanpa prosesnya diketahui oleh pengguna, jadi simplenya tiba-tiba data sudah disajikan kepada pengguna.

Sudah sangat banyak pembahasan tentang si AJAX ini. Disini yang mau lebih saya bahas adalah sedikit pengenalan untuk Reverse Ajax. Jadi beberapa waktu yang lalu (sekitar akhir tahun 2013), saya membaca sebuah artikel dari IBM yang temanya adalah Streaming and Long Polling for Responsive Communication Between Your Server and Client dan artikel tersebut tertanggal 19 Juli 2011, hehehe telat banget saya taunya. Saya juga kebetulan nemu itu artikel karena saya waktu itu lagi butuh nyekrip  bikin live notification yang kaya punyanya si Facebook. Pertamanya saya pikir notifikasi model gitu itu pakainya AJAX tapi ternyata setelah baca teorinya agak lebih dalam, penggunaan AJAX untuk live notification  ini boros, karena bisa aja ketika client meminta kepada server untuk dikirimkan notifikasi ternyata tidak ada notifikasi baru alias permintaan seperti itu harusnya tidak perlu. Dari situlah akhirnya saya menemukan dan sedikit tahu tentang reverse Ajax.

Konsep dasar dari reverse AJAX adalah kemampuan untuk mengirimkan data secara cepat dari server ke client. Tujuan dari reverse AJAX adalah untuk mengijinkan server bisa segera mengirimkan informasi kepada client, tentunya tanpa harus ada reload halaman ataupun aksi tertentu yang dilakukan oleh pengguna.

Teknik-Teknik Reverse AJAX

HTTP Polling dan JSONP Polling

Polling melibatkan permintaan dari client ke server untuk meminta suatu data. Secara konsep Polling tidak ada bedanya dengan AJAX. Untuk bisa mendapatkan event dari server secepat mungkin maka interval waktu antar polling harus seminimal mungkin. Akibatnya adalah client akan meminta terlalu banyak permintaan dan dari permintaan tersebut tidak semuanya membawa data yang dibutuhkan sehingga boros bandwidth. Gambar berikut bisa dilihat untuk mengilustrasikan Polling:



Advantages

• Mudah diimplementasikan
• Tidak butuh resource tambahan pada server
• Bisa jalan di semua browser

Disadvantages

• Boros bandwidth

Piggyback

Teknik ini sedikit lebih cerdas dibandingkan dengan polling karena akan menghilangkan permintaan-permintaan tanpa hasil. Tidak ada interval waktu tertentu, permintaan dikirimkan ke server ketika client membutuhkan data dari server. Perbedaan dengan polling ada pada response yang dihasilkan. Pada teknik ini, response dibagi menjadi dua response untuk data yang diminta dan server event. Gambar berikut merupakan ilustrasi untuk teknik piggyback:



Advantages

• Client dapat mengontrol kapan permintaan dikirim
• Tidak membutuhkan resource tambahan pada server

Disadvantages

• Tidak diketahui kapan terdapat event di server akan dikirimkan karena membutuhkan permintaan dari client untuk megirimkan event

Comet

Comet merupakan salah satu model aplikasi web dimana permintaan akan dikirimkan kepada server dan permintaan tersebut akan tetap terjadi dalam waktu yang lama sampai time out atau sampai terjadi server event. Ketika sebuah permintaan selesai dijalankan, permintaan yang lain akan segera dikirimkan dan menunggu adanya server event lagi, begitu seterusnya.

Keuntungan dari comet adalah setiap client selalu memiliki sambungan yang terbuka ke server. Server dapat mem-push event sesegera mungkin setiap ada event terjadi. Karena itu, untuk bisa menggunakan comet dibutuhkan fitur tambahan pada server untuk menghadle permintaan jangka panjang ini. Gambar berikut merupakan ilustrasi Comet:



Terdapat dua jenis implementasi Comet yaitu Streaming mode dan Long Polling.

Streaming Mode

Pada mode ini satu koneksi dibuka. Hanya aka nada satu permintaan yang sifatnya long-lived dan setiap event yang terjadi di server akan dikirimkan melalui koneksi yang sama. Pada client side dibutuhkan langkah untuk membedakan response yang dating dari koneksi yang sama. Terdapat dua cara yang umum digunakan yaitu:

• Forever iframes

Menggunakan hidden iframe tag yang diletakkan pada halaman dengan atribut src yang merujuk pada servlet path yang mengembalikan event server. Setiap terdapat event yang diterima, servlet menuliskan code javascript baru di dalamnya. Konten pada iframe akan ditambahkan dengan kode ini untuk dieksekusi.

• Multipart XMLHttpRequest

Matode ini menggunakan AJAX yang dikirimkan dan terus terbuka di server. Setiap terdapat event, multipart response dituliskan melalui koneksi yang sama. Pada server side, harus di set terlebih dahulu multipart request kemudian melakukan suspend koneksi. Setiap terjadi event semua koneksi yang disuspend akan diiterasi kemudian menuliskan data didalamnya.

Long Polling

Long Polling mode dilakukan dengan membuat koneksi yang selalu terbuka dan ketika terjadi event response akan di commit dan koneksi ditutup. Kemudian sesegera mungkin koneksi baru dibuka. Terdapat dua cara mengimplementasikan mode ini, yaitu:

• Script Tags

Implementasi dilakukan dengan menambahkan script tag pada halaman supaya script tersebut dieksekusi. Server akan melakukan suspend koneksi sampai terdapat event, mengirimkan konten script ke browser, dan membuka script tag yang lain untuk mendapatkan event selanjutnya.

• XMLHttpRequest Long Polling

Implementasi dilakukan dengan membuka permintaan AJAX ke server dan menunggu response. Dibutuhkan fitur khusus pada server untuk mengijinkan permintaan untuk dapat di suspend. Segera setelah terjadi event server mengirimkan response dan menutup koneksi. Client kemudian menerima response dan membuka kembali permintaan AJAX ke server.

WebSocket

Pembahasan websocket bersambung suatu hari nanti ya, begitu juga dengan beberapa contoh implementasinya… Read More

Mumpung ada waktu senggang jadi pengen nulis lagi. Setelah ngublek-ngublek cari ide yang mau ditulis akhirnya saya memutuskan untuk menulis sedikit cara untuk mengkoneksikan PHP dengan MySQL. Seperti yang sudah kita tau, koneksi PHP dengan cara lama seperti <code>mysql_connect</code> sudah deprecated. Sebagai gantinya kita dapat menggunakan PDO atau mysqli untuk melakukan koneksi.

Dengan PDO, untuk bisa mengkoneksikan PHP dengan MySQL kita harus menspesifikasikan nama driver, nama basisdata, username, dan password. Penulisan pada PDO sebagai berikut:

new PDO('mysql:host=localhost;dbname=dbname', db_username, db_password);

Kemudian bagaimana jika terjadi error atau terjadi gagal koneksi? Nah kita dapat membungkus perintah koneksi di dalam block <code>try ... catch</code> seperti berikut:

try {
        $db_username = ""; //db_username
        $db_password = ""; //db_passwor
        $conn = new PDO('mysql:host=localhost;dbname=dbname', $db_username, $db_password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    return $conn;

Fetch Data

Setelah melakukan koneksi kita bisa mulai melakukan fetch data dari basisdata. Terdapat dua cara untuk melakukan fetch data yaitu dengan method query atau execute.

query

try {
    $conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
    $data = $conn->query('SELECT * FROM myTable WHERE name = 'lelly');
 
    foreach($data as $row) {
        print_r($row); 
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

execute

$id = 5;
try {
    $conn = new PDO('mysql:host=localhost;dbname=myDatabase', $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);    
     
    $stmt = $conn->prepare('SELECT * FROM myTable WHERE id = :id');
    $stmt->execute(array('id' => $id));
 
    while($row = $stmt->fetch()) {
        print_r($row);
    }
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

Output

Untuk bisa menampilkan output, terdapat beberapa cara:

1. PDO::FETCH_ASSOC menghasilkan array

2. PDO::FETCH_ALL menghassilkan array (index angka dan nama kolom)

Sementara sampai sini dulu, lain waktu kalau ada waktu saya sambung lagi dengan operasi CRUD. Read More

Pada kesempatan kali ini saya ingin menulis sedikit tutorial untuk membuat aplikasi Android menggunakan ionic framework. Niatnya sih tutorial yang saya buat ini nanti bentuknya serial, jadi semoga saja niat menulis tetap membara sehingga tidak berhenti pada bagian satu saja.

Oke, pertamanya mari kita berkenalan. Apakah ionic itu? Ionic merupakan sebuah MV* framework yang dibangun menggunakan library AngularJS. Nah jika Anda belum tau apa itu angular silakan di googling dulu. Tapi jangan khawatir, belum pernah berinteraksi dengan angular bukan berarti masa depan Anda suram untuk berinteraksi dengan ionic. Saya juga blank tentang angular waktu pertama kali belajar ionic.

Kemudian apa saja yang perlu kita pahami untuk bisa membuat aplikasi dengan ionic? Sederhana saja, untuk bisa membuat aplikasi Android yang perlu kita kenal adalah:

1. CSS dan HTML

2. Javascript

that's it.

Yak, mari kita mulai proses instalasi ionic. Ada beberapa dependency yang harus tersedia sebelum kita bisa membuat aplikasi dengan ionic:

1. Node.js

2. Cordova

3. CLI Ionic

4. SDK Android

Jika semua dependency sudah siap, melalui terminal kita tinggal jalankan:

$ npm install -g cordova ionic

Kemudian untuk memulai project baru:

$ ionic start namaProject blank //blank bisa diganti dengan tabs atau sidemenu. .



Untuk menjalankan:

$ cd namaProject

$ ionic platform add android

$ ionic build android

untuk menjalankan dari browser:

$ ionic serve

Sedang untuk testing apk bisa ditemukan di:

namaProject/platforms/android/ant-build

Setelah sukses instalasi ionic mari kita mulai membuat aplikasi pertama kita dengan ionic. Untuk aplikasi pertama kita, mari kita buat yang sederhana saja. Artinya yang hanya memerlukan data local saja, tidak perlu yang grabbing data dari server.
Ionic sendiri menyediakan banyak komponen siap pakai, yang saya tidak perlu jelaskan satu persatu disini, bisa dilihat di official website untuk mencoba setiap komponen satu per satu.

Oke, untuk aplikasi pertama kita, mari kita buat flashcard sederhana. Jadi konsepnya seperti ini:

1. User mengakses aplikasi

2. Muncul pilihan jenis flashcard

3. Muncul image dengan nama image dibawahnya

Flashcard ini nantinya bisa kita kembangkan menjadi games tebak-tebakan. Tapi kita pikir belakangan aja, mari kita buat dulu flashcardnya.

1. Akses folder www/js

2. Buat 3 file:

- app.js

- controller.js

- service.js

Pertama kita buat controller terlebih dahulu pada controller.js. Kita akan buat 3 buah controller:

1. home

angular.module('lellyApp.controller',[]).controller('HomeController',['$scope','$state','$ionicPopup','$ionicModal',function($scope,$state,$ionicPopup,$ionicModal){
    
    
    $scope.loadData=function(vars){
        if(vars == 'hewan'){
            $state.go('hewan');
        }
        if(vars == 'buah'){
            $state.go('buah'); /*$state.go untuk menuju state 'buah'*/
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              navigator.app.exitApp(); /*Untuk keluar dari aplikasi*/
            }
          })
            
        }
    }

}])

2. hewan

.controller('HewanController',['$scope','$state','$ionicPopup','$ionicModal','$ionicSlideBoxDelegate',function($scope,$state,$ionicPopup,$ionicModal,$ionicSlideBoxDelegate){
 $scope.slideimg=[{'pic':'ayam.jpg','nama':'Ayam'},{'pic':'bebek.jpg','nama':'Bebek'},{'pic':'gajah.jpg','nama':'Gajah'},{'pic':'harimau.jpg','nama':'Harimau'},{'pic':'jerapah.jpg','nama':'Jerapah'},{'pic':'kelinci.jpg','nama':'Kelinci'},{'pic':'koala.jpg','nama':'Koala'},{'pic':'lumba.jpg','nama':'Lumba-Lumba'},{'pic':'singa.jpg','nama':'Singa'}];  /*membuat object slideImg*/
 
 $scope.dir='hewan';
     $scope.nextSlide = function() { /*Aksi jika slide di klik*/
     $ionicSlideBoxDelegate.next(); 
   }
     $scope.loadData=function(vars){
        
        if(vars == 'back'){
            $state.go('home');
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              wnavigator.app.exitApp();
            }
          })
            
        }
    }

}])

3. buah

.controller('BuahController',['$scope','$state','$ionicPopup','$ionicModal','$ionicSlideBoxDelegate',function($scope,$state,$ionicPopup,$ionicModal,$ionicSlideBoxDelegate){
 $scope.slideimg=[{'pic':'alpukat.jpg','nama':'Alpukat'},{'pic':'apel.jpg','nama':'Apel'},{'pic':'jeruk.jpg','nama':'Jeruk'},{'pic':'lemon.jpg','nama':'Lemon'},{'pic':'naga.jpg','nama':'Buah Naga'},{'pic':'pisang.jpg','nama':'Pisang'},{'pic':'sawo.jpg','nama':'Sawo'},{'pic':'straw.jpg','nama':'Strawberry'}];
 $scope.dir='buah';
 
     $scope.nextSlide = function() {
     $ionicSlideBoxDelegate.next();
   }
     $scope.loadData=function(vars){
        
        if(vars == 'back'){
            $state.go('home');
        }
        if(vars == 'keluar'){
            $ionicPopup.confirm({
            title: 'System warning',
            template: 'Anda yakin akan Keluar?'
          }).then(function(res){
            if( res ){
              wnavigator.app.exitApp();
            }
          })
            
        }
    }

}])

Selanjutnya, kita buat template:

1. index.html

<!--
created by lelly
lelly@morebit.co
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
   
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/service.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="lellyApp">

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </body>
</html>

2. home.html

<!--
created by lelly
lelly@morebit.co
-->
<div class="bar bar-header bar-energized">
  <h1 class="title">Flashcard Anak</h1>
</div>
<ion-content>
<div class="main-content">
<div class="row">
  <div class="col" ng-click="loadData('hewan')"> <!-- Jika di click akan memanggil fungsi loadData dengan parameter 'hewan'-->
 <p><img class="img-menu" src="img/hewan.jpg"></p>
 <p>Hewan</p></div>
  <div class="col" ng-click="loadData('buah')">
 <p><img class="img-menu" src="img/fruit.png"></p>
 <p>Buah</p></div>
  
</div>
<div class="row">
  <div class="col" ng-click="loadData('keluar')">
 <p><img class="img-menu" src="img/keluar.jpg"></p>
 <p>Keluar</p></div>
</div>
<img class="img-background" src="img/background.jpg">
        
</div>

</ion-content>

3. hewan.html → digunakan baik untuk hewan ataupun buah

<!--
created by lelly
lelly@morebit.co
-->
<div class="bar bar-header bar-energized">
  <h1 class="title">Flashcard Anak</h1>
</div>

<ion-content>
<div class="main-content">
<ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-click="nextSlide()" ng-repeat="hewan in slideimg" > <!-- perulangan object slideimg-->
 <h1>{{hewan.nama}}</h1>    <!-- menampilkan index nama-->
 <p><img src="img/{{dir}}/{{hewan.pic}}" ></p> <!-- menampilkan index pic -->
   
</ion-slide>

  
</ion-slide-box>
<button class="button button-block button-royal" ng-click="loadData('back')">
  Kembali
</button>
<img class="img-background" src="img/background.jpg">
        
</div>

</ion-content>

Selanjutnya kita definisikan state pada service.js:

Terakhir, kita definisikan pada app.js

Setelah selesai, hasil bila dijalankan sebagai berikut:





Sekian tutorial dari saya, semoga bermanfaat. Script dapat di download DI SINI. Read More

Assalamualaikum

Pada kesempatan kali ini saya akan menulis tutorial singkat tentang langkah - langkah membuat aplikasi untuk menampilkan waktu shalat berdasarkan lokasi. Beberapa teknologi yang akan saya pakai pada tutorial kali ini adalah:

1. HTML 5 GeoLocation untuk memperoleh data lokasi saat ini
2. Google Map API untuk mengetahui detail lokasi berdasar latitude dan longitude
3. AngularJS
4. API ke http://aladhan.com untuk memperoleh waktu shalat, jadi disini saya tidak menggunakan perhitungan sendiri
5. Angular Bootstrap untuk mempercantik aja

Aplikasi yang akan saya buat ini akan terdiri satu halaman saja, karena hanya aplikasi sederhana jadi CSS dan js saya jadi satukan di halaman yang sama saja. Oke, overall aplikasi kita nanti hasilnya akan seperti dibawah ini:





Skenario penggunaan aplikasi:

1. User mengakses halaman
2. Sistem menampilkan halaman dengan tombol "Tampilkan waktu shalat"
3. User klik tombol tampilkan waktu shalat
4. Jika user sedang berada di lokasi yang tidak disupport oleh geolocation maka akan muncul peringatan bahwa lokasi ditemukan.
5. Jika lokasi ditemukan, sistem akan mengakses Rest API aladhan.com mengirimkan informasi waktu dan lokasi
6. Selain itu sistem juga akan mengakses API google map untuk memperoleh informasi detail lokasi
7. Sistem menampilkan detail lokasi dan waktu shalat

Oke skenario sudah jadi mari kita mulai implementasikan.

• Kita buat terlebih dahulu template tag.
• Include bootstrap dan angular:

• Pada <body> kita isikan script utama sebagai berikut:

Penjelasan:
<div class="main" ng-app="salahApp" ng-controller="salahtimeController"> atribut ng-App menunjukkan aplikasi yang akan diload pada template ini adalah "salahApp" dan controller yang digunakan adalah "salahtimeController" ingat javascript sifatnya case sensitive jadi penulisan nama App dan Controller pastikan sama persis dengan pendefinisiannya

<div class="alert alert-danger" ng-if="error"> ng-if asrtinya kondisional, jadi baris ini akan tampil hanya jika variabel error terisi

<button class="btn btn-info" ng-click="waktu()"> jika tombol diklik akan memanggil fungsi waktu

<div class="tampil" ng-if="alamat">{{alamat}}</div> untuk menampilkan variabel dalam Angular selalu di tuliskan diantara double kurawal {{}}

• Sebelum </body> kita tambahkan dengan script angular sebagai berikut:

Read More

Assalamualaikum

Melanjutkan pembahasan sebelumnya, setelah kita tau dasar dari penulisan HTML kita sudah bisa mulai menulis kode kita. Pertanyaannya apa yang harus kita tulis? Tag apa yang harus kita pakai? Nah HTML ini memiliki banyak sekali tag yang memiliki fungsi sendiri-sendiri. Saya tidak akan membahas satu per satu tetapi saya akan memberikan link download kamus pdf yang berisi daftar tag dan atribut HTML. Anda tidak perlu menghapal, cukup pahami apa yanga akan Anda buat.

Download: Cheatsheet HTML Read More

Assalamualaikum

Sebelum masuk ke penjelasan tag pada HTML, sebelumnya akan saya bahas terlebih dahulu mengenai definisi elemen dan atribut.

Elemen

Setiap dokumen HTML terdiri dari elemen HTML. Elemen HTML diawali dengan tag pembuka, konten, dan diakhiri dengan tag penutup.


Read More

Assalamualaikum

Pada kesempatan kali ini saya akan menuliskan tutorial mengenai pemrograman Web dari level yang sangat dasar. Sebenarnya yang saya tuliskan ini dulunya adalah materi perkuliahan saya ketika mengajar pemrograman Web jadi, dari pada tidak terpakai lebih baik kok saya publish saja dengan beberapa pembaruan menyesuaikan perkembangan jaman.

Bagi yang sudah level intermediate ke atas tidak melanjutkan membaca tidak apa-apa karena yang saya sampaikan di post pertama saya ini murni basic dari pemrograman Web. Oke, langsung saja ya kita mulai.

Apakah HTML itu?

HTML merupakan sebuah bahasa yang digunakan untuk mendeskripsikan sebuah halaman Web. Kepanjangan dari HTML adalah Hyper Text Markup Language. Markup sendiri merupakan sekumpulan tags yang mendeskripsikan setiap bagian yang berbeda dari sebuah halaman. Nah, jadi pada intinya sebuah halaman HTML isinya adalah tag-tag yang punya definisi sendiri-sendiri.

Penggunaan HTML memiliki beberapa keuntungan yaitu:

• Mudah digunakan. Tenang saja ini bukan klaim sepihak yang mengatakan bahwa HTML mudah digunakan. Jika Anda sudah mengenal HTML saya yakin Anda akan merasa bahwa HTML sangat mudah digunakan.
• Multiplatform artinya dapat dimengerti oleh banyak platform berbeda.
• Free
• W3C Standard
• Memiliki struktur yang pasti

Arsitektur HTML

• Client side
• Di parsing oleh browser
• Kode dapat dilihat oleh pengguna

Syntax Dasar HTML

Seperti yang sudah saya tuliskan sebelumnya, setiap elemen pada HTML didefiniskan dengan tag. Format penulisan tag adalah sebagai berikut:

• Pendefinisian versi HTML

          Pendefinisian versi HTML digunakan untuk memberitahu browser versi HTML yang kita pakai. Pendefinisian dituliskan pada bagian DOCTYPE. Beberapa jenis DOCTYPE:
HTML 4.01

• Tag <html>, menunjukkan bahwa halaman tersebut adalah halaman HTML.
• Header HTML

Header menyediakan informasi mengenai dokumen yang dibuat. Yang dapat diletakkan pada header yaitu:

1. <title></title>  merupakan judul dokumen, akan muncul pada bagian paling atas browser
2. <meta> digunakan untuk menspesifikasikan informasi mengenai data pada halaman HTML. Tidak akan terlihat pada tampilan. Meta memberikan informasi berupa: keyword, description, atau author
3. <script> mendefinisikan client side scriting seperti javascript
4. <style> menuliskan informasi penggayaan pada dokumen salah satunya CSS
5. <link> memberikan informasi tentang tautan di luar dokumen

• Body HTML berisi tag yang kontennya akan ditampilkan di browser. Apa saja yang dapat ditampilkan pada body HTML? Saya akan tuliskan pada posting saya selanjutnya.

Terimakasih sudah membaca sampai selesai. Semoga bermanfaat.
Read More