Beberapa praktikum yang terdapat pada Laboratorium Teknik Informatika mempunyai tugas membuat project seperti mata praktikum pemrograman web, grafkom, pengantar kecerdasan buatan dan lain sebagainya. Masing - masing project diwajibkan membuat manual book tentang project yang dikerjakan. Pada artikel kali ini, penulis mengajak anda untuk membuat manual book dengan berbagai teknologi open source :D. Teknologi yang akan kita gunakan adalah

Pandoc adalah aplikasi yang dibuat oleh John MacFarlane, seorang profesor filosofi di University of California, Berkeley. Pandoc dibuat dengan bahasa pemrograman Haskell.

Markdown adalah sebuah markup language dengan plain text formatting syntax sehingga bisa di convert ke HTML dan format lainnya menggunakan tools yang sama. Markdown biasanya digunakan untuk mengedit readme dari sebuah open source, untuk menulis pesan di online forum, dan juga untuk membuat rich text dengan plain text editor.

LaTeX adalah bahasa markup atau sistem penyiapan dokumen untuk peranti lunak TeX. Tex merupakan program komputer yang digunakan untuk membuat typesetting suatu dokumen, atau membuat formula matematika. LaTeX memungkinkan penulis/penggunanya untuk melakukan typesetting dan mencetak hasil kerjanya dalam bentuk tipografi yag terbaik. Oleh karenanya LaTeX paling banyak digunakan oleh para matematikawan, ilmuwan, insinyur, akademisi, dan profesional lainnya. Pada awalnya LaTeX ditulis pada awal 1980-an oleh Leslie Lamport di SRI International. Versi paling mutakhir adalah LateX2e.

Mengapa menggunakan markdown ? berikut beberapa alasannya.

  • Dapat di edit melalui editor apapun
  • Sintak Mudah dipahami
  • Dapat di convert ke dokument lain
  • Sintak highlighting
  • Auto generate daftar isi

Instalasi Pandoc

Untuk melakukan instalasi silahkan jalankan perintah berikut.

sudo apt-get install pandoc texlive-latex-base texlive-xetex latex-beamer

Download Template Manual Book

Silahkan download terlebih dahulu template manual book markdown. Di dalam template tersebut terdapat beberapa file yaitu 01-teori.md,02-perancangan.md dan lain - lain berfungsi mewakili dari masing - masing bab, misalnya 01-teori.md mewakili dari bab 1 dan sebagainya.

Cara Penggunaan Template

Silahkan buka template yang telah anda download dengan menggunakan editor anda misalnya dengan sublime, atom dan sebagainya. File yang akan kita ubah adalah file markdown dan latex.

Mengubah Cover Manual Book

Silahkan buka file template-penulisan.tex lalu cari pada bagian

\begin{framed}
    \begin{tabular}{ l c l }
        NPM & : & 58412085 \\
        Nama  & : & {$author$} \\
        Kelas & : & 4IA04 \\
        Jurusan & : & Teknik Informatika \\
        PJ & : & Mufrizal \\
    \end{tabular}
\end{framed}

Silahkan ubah sesuai dengan biodata anda. Setelah selesai, silahkan buka file 00-cover.md dan ubah datanya seperti judul manual book, nama author dan tanggal dibuat manual book tersebut. Berikut adalah hasilnya.

Screenshot from 2015-11-06 22:08:02.png

Penulisan Section

Untuk menulis section dan subsection gunakan # berikut adalah contohnya :

#Teori
##Apa itu CodeIgniter ?
###Apa itu MVC ?
  • tanda # berfungsi sebagai judul dari sebuah bab
  • tanda ## berfungsi sebagai section
  • tanda ### berfungsi sebagai subsection

Berikut adalah contoh hasilnya

Screenshot from 2015-11-06 21:55:41.png

Penulisan Highlighting

Salah Satu kelebihan markdown adalah sintak highlighting, untuk membuat sintak highlighting kita dapat menggunakan perintah berikut

```java
public class Latihan {
    public static void main(String[] args) {
        System.out.println("Hello Word");
    }
}
```

Anda tinggal mengubah tulisan java dengan bahasa pemrograman yang akan anda gunakan misalkan seperti php, javascript dan sebagainya. Berikut adalah hasilnya.

Screenshot from 2015-11-06 21:58:33.png

Menyisipkan Gambar

Markdown juga dapat menyisipankan yaitu melalui perintah LaTeX seperti berikut.

\begin{figure}[H]\centering\includegraphics[width=12.5cm]{gambar/mvc}\caption{Model View Controller}\end{figure}

Arti kodingan diatas kita akan memasukkan sebuah gambar yang berada pada folder gambar dengan nama file mvc. Disini terdapat \caption ini berfungsi untuk menamai gambar yang telah disisipkan. Sedangkan pada bagian width=12.5cm untuk menghitung lebar panjang sebuah gambar. \centering agar gambar yang digunakan berada pada bagian tengah dokument. Berikut adalah contoh penyisipan gambar.

Screenshot from 2015-11-06 22:00:21.png

Penulisan URL (Uniform Resource Locator)

Markdown juga mendukung penulisan URL sebuah situs. Berikut adalah contohnya.

["Heart Attack" - Demi Lovato (Sam Tsui & Chrissy Costanza of ATC)](https://www.youtube.com/watch?v=jDELybyZ4oU)

Diantara tanda [] kita dapat menyisipkan deskripsi dari pada URL tersebut sedangkan di dalam tanda () kita menyisipkan URL. Berikut adalah salah satu contoh URL.

Screenshot from 2015-11-06 22:03:30.png

Penulisn List Dan Nomor

Untuk menulis list atau penomoran kita dapat melakukannya dengan mudah. Berikut adalah sintak untuk menulis list.

* satu
* dua
* tiga

- empat
- lima
- enam

+ tujuh
+ delapan
+ sembilan

dapat dilihat bahwa penulisan untuk list dapat dilakukan dengan beberapa karakter yaitu dengan karakter *,-, dan +. Selanjutnya adalah untuk menulis penomoran pada markdown sangat mudah yaitu dengan perintah.

1. satu
2. dua
3. tiga
4. empat
5. lima
6. enam
7. tujuh
8. delapan
9. sembilan

Convert Markdown Menjadi PDF

Langkah terakhir adalah mengubah markdown menjadi pdf. Silahkan jalankan perintah berikut.

pandoc \
--template template-penulisan.tex \
--variable mainfont="Droid Serif" \
--variable sansfont="Droid Sans" \
--variable fontsize=12pt \
--variable version=1.0 \
--latex-engine=xelatex --toc -N -V documentclass=report -o output.pdf 00-cover.md 01-teori.md 02-perancangan.md 03-implementasi.md 04-uji-coba.md

Maka akan muncul sebuah pdf dengan nama file output. Ini merupakan hasil akhir dari markdown, penulisan daftar isi juga disusun lebih rapi. Berikut adalah gambar dari daftar isi.

Screenshot from 2015-11-06 22:05:36.png

Sekian artikel mengenai membuat manual book dengan teknologi markdown dan terima kasih :).

Jika kita bicara mengenai web pasti tidak terlepas dari bahasa pemrograman PHP, mengapa demikian ? dikarenakan PHP merupakan bahasa pemrograman yang sangat banyak digunakan untuk membuat sebuah web secara dinamis. Tidak hanya banyak digunakan, bahkan laboratorium teknik informatika di universitas gunadarma juga terdapat sebuah mata praktikum pemrograman web yang dikhususkan untuk tingkat 4 yang berfungsi menambah ilmu pengetahuan mahasiswa mengenai pemrograman berbasis web dengan menggunakan PHP. Salah satu framework yang akan digunakan adalah CodeIgniter.

Pada tutorial kali ini, penulis akan berbagi tulisan mengenai bagaimana membuat sebuah REST API dengan framework codeigniter.

CodeIgniter adalah sebuah framework PHP yang berfungsi untuk mempermudah sebuah development aplikasi dengan pattern MVC (model view controller).

Beberapa dari kita pernah mendengar framework, framework sebenarnya merupakan sebuah kerangka kerja yang akan kita gunakan. Dengan adanya kerangka kerja maka akan mempermudah development sebuah aplikasi, adanya standarisasi pembuatan aplikasi sehingga memperkecil kesalahan antara 1 developer dengan developer yang lain. Bagi yang belum melakukan instalasi kelengkapan coding PHP, silahkan akses di Instalasi Perlengkapan Coding PHP

Berikut merupakan tahapan yang akan kita kerjakan pada saat development REST API dengan codeigniter.

  • Membuat Database
  • Membuat Dan Setting Project CodeIgniter
  • Tahap Development REST API
  • Uji Coba REST API

Membuat Database

Oke setelah semua persiapan PHP selesai, kita mulai coding :D. Yang pertama kali kita buat adalah sebuah database beserta tabel dan columnnya. Silahkan buat sebuah database dengan nama akademik kemudian jalankan codingan berikut untuk membuat tabel dan columnnya.

create table mahasiswa(
    npm varchar(8) not null,
    nama varchar(45) not null,
    kelas varchar(5) not null,
    tanggalLahir date not null,
    primary key (npm)
) Engine=InnoDB;

Membuat Dan Setting Project CodeIgniter

Setelah selesai dengan database selanjutnya kita akan mulai membuat project codeigniter dengan composer. Jalankan perintah berikut :

composer.phar create-project kenjis/codeigniter-composer-installer Belajar-REST-CodeIgniter

Kemudian update project dengan perintah composer.phar update. Kita membuat project codeigniter berasal dari repository kenjis dikarenakan project codeigniter ini telah lengkap dan mudah dikonfigurasikan. Perintah diatas akan membuat sebuah project dengan nama Belajar-REST-CodeIgniter. Silahkan buka project tersebut dengan editor kesayangan anda.

Selanjutnya kita akan melakukan beberapa konfigurasi. Buka file autoload.php di dalam folder application/config/ kemudian ubah seperti berikut.

$autoload['libraries'] = array();

$autoload['libraries'] = array('database');

#batas

$autoload['helper'] = array();

$autoload['helper'] = array('url');

Menghilangkan index.php Pada URI (Uniform Resource Identifier)

Jika anda tidak ingin menggunakan index.php pada URI (Uniform Resource Identifier) maka buka file config.php di dalam folder application/config/ berikut perubahannya

$config['composer_autoload'] = FALSE;

$config['composer_autoload'] = realpath(APPPATH . '../vendor/autoload.php');

#batas

$config['index_page'] = 'index.php';

$config['index_page'] = '';

Tahap Development REST API

Silahkan buka file database.php di dalam folder application/config/ kemudian isi konfigurasi seperti username, password, database dan hostnamenya. Oke karena codeigniter merupakan sebuah framework MVC (Model View Controller) maka kita akan mulai coding dari model. Buat sebuah file Mahasiswa.php di dalam folder application/models/ dan berikut isi codingannya.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mahasiswa extends CI_Model {

  public function getCountMahasiswa()
  {
      return $this->db->count_all_results('mahasiswa', FALSE);
  }

  public function getMahasiswa($page, $size)
  {
      return $this->db->get('mahasiswa', $size, $page);
  }

  public function insertMahasiswa($dataMahasiswa)
  {
      $val = array(
        'npm' => $dataMahasiswa['npm'],
        'nama' => $dataMahasiswa['nama'],
        'kelas' => $dataMahasiswa['kelas'],
        'tanggalLahir' => $dataMahasiswa['tanggalLahir']
      );
      $this->db->insert('mahasiswa', $val);
  }

  public function updateMahasiswa($dataMahasiswa, $npm)
  {
    $val = array(
      'nama' => $dataMahasiswa['nama'],
      'kelas' => $dataMahasiswa['kelas'],
      'tanggalLahir' => $dataMahasiswa['tanggalLahir']
    );
    $this->db->where('npm', $npm);
    $this->db->update('mahasiswa', $val);
  }

  public function deleteMahasiswa($npm)
  {
    $val = array(
      'npm' => $npm
    );
    $this->db->delete('mahasiswa', $val);
  }

}

Berikut penjelasan mengenai kodingan diatas.

  • function getCountMahasiswa berfungsi untuk mengambil banyak data mahasiswa, ini berfungsi untuk melakukan paging sebuah REST API.
  • function getMahasiswa berfungsi untuk mengambil data dari tabel mahasiswa bisa dilihat dari codingan berikut $this->db->get('mahasiswa') bahwa tabel yang digunakan adalah tabel mahasiswa.
  • function insertMahasiswa berfungsi untuk menyimpan data mahasiswa, disini terdapat sebuah parameter yaitu $dataMahasiswa yang berisi data mahasiswa. Data ini masih berupa array yang belum beraturan, sehingga diubah terlebih dahulu menjadi array biasa kemudian data tersebut disimpan.
  • function updateMahasiswa juga sama seperti function insertMahasiswa, hanya saja function ini terdapat 2 parameter yaitu $dataMahasiswa dan $npm dikarenakan kita akan melakukan update berdasarakan npm seorang mahasiswa.
  • dan yang terakhir adalah function deleteMahasiswa yang berfungsi untuk menghapus data berdasarkan npm.

Berikutnya adalah codingan dibagian controller.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class MahasiswaController extends CI_Controller {

  public function __construct()
  {
    parent::__construct();
    $this->load->model('Mahasiswa');
  }

  public function getMahasiswa($page, $size)
  {

    $response = array(
      'content' => $this->Mahasiswa->getMahasiswa(($page - 1) * $size, $size)->result(),
      'totalPages' => ceil($this->Mahasiswa->getCountMahasiswa() / $size));

    $this->output
      ->set_status_header(200)
      ->set_content_type('application/json', 'utf-8')
      ->set_output(json_encode($response, JSON_PRETTY_PRINT))
      ->_display();
      exit;
  }

  public function saveMahasiswa()
  {
      $data = (array)json_decode(file_get_contents('php://input'));
      $this->Mahasiswa->insertMahasiswa($data);

      $response = array(
        'Success' => true,
        'Info' => 'Data Tersimpan');

      $this->output
        ->set_status_header(201)
        ->set_content_type('application/json', 'utf-8')
        ->set_output(json_encode($response, JSON_PRETTY_PRINT))
        ->_display();
        exit;
  }

  public function updateMahasiswa($npm)
  {
    $data = (array)json_decode(file_get_contents('php://input'));
    $this->Mahasiswa->updateMahasiswa($data, $npm);

    $response = array(
      'Success' => true,
      'Info' => 'Data Berhasil di update');

    $this->output
      ->set_status_header(200)
      ->set_content_type('application/json', 'utf-8')
      ->set_output(json_encode($response, JSON_PRETTY_PRINT))
      ->_display();
      exit;
  }

  public function deleteMahasiswa($npm)
  {
    $this->Mahasiswa->deleteMahasiswa($npm);

    $response = array(
      'Success' => true,
      'Info' => 'Data Berhasil di hapus');

    $this->output
      ->set_status_header(200)
      ->set_content_type('application/json', 'utf-8')
      ->set_output(json_encode($response, JSON_PRETTY_PRINT))
      ->_display();
      exit;
  }

}

berikut penjelasan mengenai codingan diatas.

  • function __construct berfungsi untuk meload model yang telah kita deklarasikan agar model tersebut dapat kita gunakan.
  • function getMahasiswa berfungsi untuk mengambil seluruh data mahasiswa berdasarkan page dan size yang akan di request oleh client. Hasil query tersebut akan di encode menjadi format JSON, bisa dilihat pada bagian json_encode.
  • function saveMahasiswa berfungsi untuk menyimpan data mahasiswa, data diambil dari response JSON, data yang berupa JSON di decode terlebih dahulu sehingga menjadi object array, lalu object array ini di kirim ke model untuk disimpan. Jika berhasil maka nanti akan muncul tampilan success tersimpan dalam bentuk format JSON.
  • function updateMahasiswa sama seperti function saveMahasiswa, hanya saja function ini memiliki sebuah parameter $npm untuk memperbarui data.
  • function deleteMahasiswa hanya menerima parameter $npm saja sehingga tidak ada JSON yang dikirim. Function ini berfungsi untuk menghapus data mahasiswa.

Tahap terakhir adalah melakukan konfigurasi routes, buka file routes.php di dalam folder application/config, berikut adalah codingannya.

$route['api/mahasiswa/(:num)/(:num)']['GET'] = 'MahasiswaController/getMahasiswa/$1/$2';
$route['api/mahasiswa']['POST'] = 'MahasiswaController/saveMahasiswa';
$route['api/mahasiswa/(:any)']['PUT'] = 'MahasiswaController/updateMahasiswa/$1';
$route['api/mahasiswa/(:any)']['DELETE'] = 'MahasiswaController/deleteMahasiswa/$1';

Bisa dilihat bahwa kita melakukan custom terhadap URI tersebut, berikut penjelasannya.

  • api/mahasiswa/(:num)/(:num)[GET] berfungsi untuk mengambil data mahasiswa melalui method GET pada protokol HTTP. jangan lupa bahwa URI ini mempunyai 2 parameter yaitu page dan size untuk melakukan paging data.
  • api/mahasiswa[POST] berfungsi untuk menyimpan data mahasiswa, disini penulis menggunakan method POST, data yang dikirim berupa JSON.
  • api/mahasiswa/(:any)[PUT] berfungsi untuk memperbarui data, karena memperbarui data, URI ini mempunyai sebuah parameter npm, data yang dikirim dalam bentuk JSON dan menggunakan method PUT pada protokol HTTP.
  • api/mahasiswa/(:any)[DELETE] berfungsi untuk menghapus data mahasiswa menggunakan method DELETE pada protokol HTTP dan juga menggunakan parameter npm.

Uji Coba REST API

Akhirnya selesai juga :D, Yuks lakukan uji coba REST API dengan postman. Jalankan server PHP terlebih dahulu dengan cara, masuk ke folder root project dengan terminal lalu jalankan perintah

php -S localhost:8000 -t public/ bin/router.php

dan berikut adalah hasilnya.

Screenshot from 2015-10-18 10:02:57.png

Kemudian kita lakukan uji coba dengan menggunakan method POST untuk menyimpan data seperti berikut.

Screenshot from 2015-10-18 10:08:21.png

Berikut uji coba dengan menggunakan method GET untuk mengambil data

Screenshot from 2015-10-18 10:09:17.png

Berikut uji coba dengan menggunakan method PUT untuk memperbarui data.

Screenshot from 2015-10-18 10:10:01.png

Berikut uji coba dengan menggunakan method DELETE untuk menghapus data.

Screenshot from 2015-10-18 10:10:47.png

Sekian tutorial membuat REST API dengan codeigniter dan terima kasih :). Untuk source code lengkap, penulis publish di Belajar REST CodeIgniter.

Yups kali ini kita akan mencoba membuat sebuah aplikasi chat :D dengan menggunakan teknologi WebSocket. Apa itu WebSocket ?

WebSocket merupakan protokol yang digunakan untuk komunikasi dua arah. Berbeda dengan AJAX (Asynchronous JavaScript and XMLHTTP) yang hanya menggunakan komunikasi satu arah.

Pada AJAX, server menunggu request dari client sehingga jika client tidak mengirim request maka server tidak akan mengembalikan response. Berbeda dengan WebSocket, WebSocket dapat mengirim response ke client meskipun client tidak mengirim request. Penggunaan WebSocket sangat disarankan di beberapa tempat seperti pada aplikasi chat, aplikasi monitoring naik turun saham sebuah perusahaan, aplikasi monitoring naik turun kurs dan lain sebagainya. Dengan menggunakan komunikasi dua arah sehingga memungkinkan WebSocket menjadikan sebuah aplikasi berbasis realtime. Berikut adalah perbandingan sequence diagram pada AJAX dan WebSocket.

Screenshot from 2015-10-14 15:22:24.jpg

Sebelum adanya WebSocket terdapat beberapa teknik untuk membuat aplikasi realtime yaitu.

  • Pooling : Ini merupakan teknik yang sangat lama, dimana client setiap N (dalam angka) menit akan melakukan request secara berkala, sehingga apabila ada perubahan pada server, maka client akan ikut berubah akan tetapi disini terdapat kekurangan yaitu beban server akan semakin besar dikarenakan setiap N (dalam angkan) menit akan melakukan request ke server dan bayangkan jika terdapat ribuan client.

  • Piggyback : Teknik ini akan mengembalikan sebuah response perubahan jika si client melakukan request ke server, dan perubahan ini dikirim melalui response, terdapat kelamahan juga yaitu apabila si client tidak melakukan request maka perubahan pun tidak akan terjadi.

  • Reverse Ajax / Comet/ Long Pooling : merupakan teknik yang efisien yaitu client melakukan request ke server, server tidak akan langsung mengembalikan response akan tetapi server akan membuka request dalam waktu tertentu, jika sudah pada waktunya, server akan mengembalikan response ke semua client. Teknik ini bisa realtime akan tetapi membutuhkan waktu karena server membuka request dalam waktu tertentu.

Oke dari sekian teknik, akhirnya kita menggunakan teknik WebSocket dikarenakan beberapa alasan, diantaranya WebSocket memungkinkan komunikasi dua arah, teknologi Html 5 telah mendukung WebSocket dan lain sebagainya.

Pada tutorial ini, kita akan membangun sebuah aplikasi chat dengan menggunakan node js. Mengapa dengan node js ? dikarenakan node js mendukung teknologi I/O Non Blocking sehingga mempermudah kita dalam mengembangkan aplikasi yang bersifat realtime.

Berikut tahapan yang akan kita lakukan.

  • Setup Kebutuhan Server
  • Setup Kebutuhan Client
  • Membuat Server WebSocket Dengan Socket.IO
  • Membuat Client WebSocket Dengan Socket.IO Dan Material Design
  • Uji Coba Aplikasi Chat
  • Deploy Aplikasi ke Heroku

Setup Kebutuhan Server

Seperti biasa, buat sebuah folder dengan nama Belajar-WebSocket-Socket.IO kemudian masuk ke folder tersebut dengan terminal. Jalankan perintah npm init lalu input data anda sesuai dengan yang diminta. Kita membutuhkan beberapa library dan framework untuk membuat websocket, maka jalankan perintah berikut.

npm install express jade socket.io --save

Setup Kebutuhan Client

Jalankan perintah bower init, sama seperti npm init input data sesuai dengan yang diminta. Pada tutorial ini, kita akan menggunakan material design, maka memerlukan beberapa library. Jalankn perintah berikut.

bower install bootstrap-material-design bootstrap socket.io-client --save

Membuat Server WebSocket Dengan Socket.IO

Buatlah sebuah file app.js di dalam root folder project. Berikut adalah codingan untuk servernya.

'use strict';

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var path = require('path');

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(require('express').static(path.join(__dirname, 'public')));
app.use(require('express').static(path.join(__dirname, 'bower_components')));

app.get('/', function(req, res) {
  return res.render('index');
});

io.on('connection', function(socket) {
  socket.on('chat:pesan', function(pesan) {
    io.emit('chat:pesan', pesan);
  });
});

http.listen(app.get('port'), function() {
  console.log('Server jalan di port ' + app.get('port'));
});

Berikut penjelasan dari codingan diatas :

  • var app = require('express')(); berfungsi untuk mendeklarasikan variabel untuk framework express js
  • var http = require('http').Server(app); berfungsi untuk membuat server
  • var io = require('socket.io')(http); berfungsi untuk membuat server dengan teknologi websocket
  • var path = require('path'); berfungsi sebagai path dari aplikasi
  • app.set('port', process.env.PORT); berfungsi untuk deklarasi port dari aplikasi
  • app.set('views'); berfungsi untuk deklarasikan folder view / halaman html
  • app.set('view engine', 'jade'); berfungsi untuk mendeklarasikan bahwa kita menggunakan template engine Jade
  • app.get('/' berfungsi untuk melakukan render terhadap file index.jade, ini berfungsi sebagai root halaman dari aplikasi
  • io.on('connection', function(socket) berfungsi untuk inisialisasi koneksi dengan websocket
  • socket.on('chat:pesan', function(pesan) function ini menunggu event sebuah request dari client, sedangkan chat:pesan merupakan perintah socket yang akan dikirim dari client, jika perintah sama maka perintah yang di dalam function ini akan dijalankan. pesan yang merupakan parameter dari function diatas berfungsi sebagai data yang dikirim dari client, data dapat berupa object atau array dalam format JSON.
  • io.emit('chat:pesan', pesan); berfungsi untuk memberikan response ke seluruh client, seperti pengertian diatas, jika client tidak melakukan request, server tetap dapat memberikan response ke client. Nah disini hanya 1 client yang melakukan request maka seluruh client nantinya akan mendapatkan response agar dapat yang diterima antara 1 client dengan clientnya sama.
  • http.listen(app.get('port') berfungsi untuk menjalankan server.

Panjang juga penjelasannya :D , sekarang kita mulai coding untuk bagian clientnya.

Membuat Client WebSocket Dengan Socket.IO Dan Material Design

Untuk client, kali ini kita akan gunakan material design, loh knp gx pakai bootstrap aja ? alasannya penulis pengen nyobain material design :P . Bosen kan kalau terus - terusan pakai bootstrap, sekali - kali pakai material design biar bagus tampilannya. Oke silahkan buat sebuah folder views di dalam root folder project. buat file layout.jade di dalam folder views, layout.jade berfungsi sebagai layout utama sehingga kita akan lakukan import js, css, img dan lain - lain disini. Berikut kodingannya.

doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
    meta(name='description', content='Belajar WebSocket')
    meta(name='keywords', content='keywords')
    meta(name='author', content='Rizki Mufrizal')
    meta(name="robots", content="index, follow")

    block title
      title Default title

    //- ----- CSS Files ----- //
    link(rel='stylesheet', href='/bootstrap/dist/css/bootstrap.min.css')
    link(rel='stylesheet', href='/bootstrap-material-design/dist/css/material.min.css')

  body
    block content

    //- ----- JS Files ----- //
    script(type='text/javascript', src='/jquery/dist/jquery.min.js')
    script(type='text/javascript', src='/socket.io-client/socket.io.js')
    script(type='text/javascript', src='/bootstrap/dist/js/bootstrap.min.js')
    script(type='text/javascript', src='/bootstrap-material-design/dist/js/material.min.js')

    script(type='text/javascript', src='/scripts/BelajarWebSocket.js')  

Sama seperti html biasa, bedanya disini kita menggunakan template engine jade sehingga tidak perlu tag penutup. Oke selanjutnya buat file index.jade di dalam folder views, file index.jade nantinya akan berfungsi sebagai root page. Berikut kodingannya.

extends ./layout.jade

block title
  title Belajar WebSocket
block content
  div.container
    div.row
      div.col-xs-5.col-md-3
      div.col-xs-5.col-md-6
        div.panel.panel-primary
          div.panel-heading
            h3.panel-title Aplikasi Chat
          div.panel-body
            ul(id="listPesan")
          div.panel-footer
            div.form-group
              input(id="nama", type="text", placeholder="Masukkan Nama Anda").form-control.floating-label
            div.form-group
              textarea(id="pesan", placeholder="Masukkan Pesan Anda").form-control.floating-label
            button(id="kirim", type="button").btn.btn-primary.btn-fab.btn-raised.mdi-content-send

Teryata tidak hanya java yang bisa menggunakan extend, template engine juga bisa :D secara otomatis file layout.jade akan di include di dalam file index.jade ini salah satu fungsi template engine, jadinya kita tidak perlu banyak - banyak mendeklarasikan file js, css dan img :) . jangan lupa dari masing - masing komponent seperti input, button dan list dikasih id fungsinya nanti kita akan mengambil value dari masing - masing komponent tersebut dengan bantuan JQuery.

Selesai untuk layoutnya, selanjutnya buat folder public di dalam folder root folder project, buat juga folder scripts di dalam folder public. Buat sebuah file BelajarWebSocket.js di dalam folder scripts. Nah file BelajarWebSocket.js kita akan isi dengan konfigurasi JQuery dan Socket.IO. Berikut codingan nya.

'use strict';

var socket = io();
var DataChatKirim = {};

$(document).ready(function() {
  $('#kirim').on('click', function() {
    DataChatKirim.nama = $('#nama').val();
    DataChatKirim.pesan = $('#pesan').val();

    socket.emit('chat:pesan', DataChatKirim);
    $('#nama').val('');
    $('#pesan').val('');
  });
});

socket.on('chat:pesan', function(DataChat) {
  if (DataChatKirim.nama === DataChat.nama) {
    $('#listPesan').prepend($('<li class="list-group-item text-right">').text(DataChat.nama + ' : ' + DataChat.pesan));
  } else {
    $('#listPesan').prepend($('<li class="list-group-item text-left">').text(DataChat.nama + ' : ' + DataChat.pesan));
  }
});

Berikut penjelasan singkat dari codingan diatas.

  • var socket = io(); berfungsi untuk mendeklarasikan koneksi websocket
  • var DataChatKirim = {}; deklarasi untuk data chat yang dikirim
  • $(document).ready merupakan deklarasi jquery untuk awal sebuah dokument
  • $('#kirim').on('click', function() merupakan deklarasik jquery dengan mengambil sebuah id dengan nama kirim, id ini berasal dari sebuah button, kemudian jika ada yang mengirim pesan maka function dibawahnya akan dijalankan.
  • DataChatKirim.nama = $('#nama').val() berfungsi untuk mengambil data nama, dapat dilihat bahwa $('#nama').val() berfungsi untuk mengambil data yang berasal dari id nama.
  • socket.emit('chat:pesan') berfungsi untuk mengirim data chat ke server melalui websocket
  • $('#nama').val(''); merupakan perintah jquery untuk menghapus data yang terdapat di dalam form inputan
  • socket.on('chat:pesan') sama seperti pada server, function ini berfungsi untuk menunggu response dari server, jika ada response maka perintah dibawah function ini akan dijalankan.
  • $('#listPesan').prepend() berfungsi untuk menambah tag <li> pada tag <ul>, id listPesan berasal dari tag <ul> sehingga apabila ada chat yang masuk, maka tag <li> akan ditambah secara otomatis, ini merupakan salah satu konsep dari JQuery yaitu DOM (data object ).

Uji Coba Aplikasi Chat

Silahkan jalankan aplikasi dengan perintah nodemon app.js atau node app.js kemudian hit pada browser dengan url http://localhost:3000/ kemudian buka 2 browser lakukan chat. Berikut adalah hasilnya pada saat anda chat.

Screenshot from 2015-10-14 13:56:19.png

Berikut tampilan list chat

Screenshot from 2015-10-14 13:56:37.png

Deploy Aplikasi ke Heroku

Heroku merupakan hosting gratis untuk percobaan aplikasi, heroku mendukung beberapa bahasa pemrograman diantaranya adalah javascript, disini node js sebagai javascript yang jalan pada bagian server. Silahkan daftar di Heroku kemudian jangan lupa setting key ssh anda.

Buatlah sebuah file Procfile di dalam root folder, kemudian isikan kodingan berikut.

web: node app.js

buat sebuah file .gitignore agar folder node_modules dan bower_components tidak ikut dicommit, masukkan codingan berikut pada file .gitignore.

bower_components/
node_modules/

Inisialisasi dengan menggunakan perintah git init, buatlah sebuat project pada dashboard heroku. Kemudian buka file package.json pada bagian scripts ganti test menjadi

"postinstall": "./node_modules/bower/bin/bower install"

hasilnya seperti ini

"scripts": {
  "postinstall": "./node_modules/bower/bin/bower install"
}

Install bower pada aplikasi dengan perintah npm install bower --save. Disini penulis membuat aplikasi pada heroku dengan nama aplikasichat kemudian jalankan perintah heroku git:remote -a aplikasichat pada root folder project. Tambah semua file agar dapat dicommit dengan perintah git add . Kemudian commit dengan perintah git commit -am "aplikasi chat" kemudian push semua source code ke heroku dengan perintah git push heroku master. Tunggu hingga selesai, jika berhasil maka akan muncul seperti ini.

Screenshot from 2015-10-14 15:22:23.png

Oke aplikasi chat akhirnya berhasil online :D silahkan akses di Aplikasi Chat :) . Sekian tutorial membuat aplikasi chat dengan teknologi node js dan socket.io dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar WebSocket.

Kali ini penulis ingin mengajak anda untuk membuat sebuah aplikasi RESTful Web Service dengan menggunakan teknologi Spring MVC dan Hibernate.

RESTful merupakan salah satu dari jenis web service, dimana RESTful ini sendiri menggunakan pertukaran data antar state dengan menggunakan protokol HTTP (Hypertext Transfer Protocol). RESTful merupakan suatu gaya arsitektur perangkat lunak untuk pendistribusian sistem hipermedia seperti WWW. Istilah ini diperkenalkan pertama kalu pada tahun 2000 dengan disertai doktoral Roy Fielding yang merupakan salah seorang penulis utama spesifikasi HTTP.

Oke…teknologi RESTful ini sendiri dapat menggunakan beberapa format data sebagai pertukaran data yaitu JSON, XML dan lain - lain. Pada tutorial kali ini, penulis menggunakan format JSON.

Kita mulai dengan membuat project melalui terminal seperti berikut.

mvn archetype:generate \
-DarchetypeArtifactId=maven-archetype-quickstart \
-DgroupId=com.rizki.mufrizal.belajarSpringMVCHibernate \
-DartifactId=Belajar-SpringMVC-Hibernate

Silahkan buka project dengan IDE anda, disini saya menggunakan netbeans. Struktur Aplikasi penulis seperti ini. Screenshot from 2015-09-27 19:21:30.png

buka file pom.xml, berikut adalah codingan untuk konfigurasinya.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.rizki.mufrizal.belajarSpringMVCHibernate</groupId>
    <artifactId>Belajar-SpringMVC-Hibernate</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>Belajar-SpringMVC-Hibernate</name>
    <url>http://maven.apache.org</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.2.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>5.0.0.Final</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.6.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.36</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- slf4j -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.12</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.12</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.12</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.6</version>
            </plugin>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.3.4.RC0</version>
            </plugin>
        </plugins>
    </build>
    
</project>

Kita mulai dari class domain, disini saya membuat sebuah class dengan nama Makanan berikut adalah kodingannya.

package com.rizki.mufrizal.belajarSpringMVCHibernate.domain;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Temporal;
import org.hibernate.annotations.GenericGenerator;

/**
 *
 * @author rizki
 * @since Sep 27, 2015
 */

@Entity
@Table(name = "tb_makanan")
public class Makanan implements Serializable {

    @Id
    @Column(name = "idMakanan", length = 150)
    @GeneratedValue(generator = "system-uuid")
    @GenericGenerator(name = "system-uuid", strategy = "uuid")
    private String idMakanan;

    @Column(name = "namaMakanan", length = 40)
    private String namaMakanan;

    @Column(name = "hargaMakanan")
    private BigDecimal hargaMakanan;

    @JsonFormat(pattern = "dd/MM/yyyy", shape = JsonFormat.Shape.STRING)
    @Column(name = "tanggalKadaluarsa")
    @Temporal(javax.persistence.TemporalType.DATE)
    private Date tanggalKadaluarsa;

    //getter
    //setter

}

Class Makanan merupakan class domain yang akan kita gunakan sebagai model di dalam konsep MVC. Class ini nantinya akan dimapping oleh hibernate. Terdapat 4 properti yaitu id makanan, nama makanan, harga makanan dan tanggal kadaluarsa. Kemudian kita beralih ke package repository, buat 2 class yaitu MakananRepository dan MakananRepositoryImpl. Class MakananRepository nantinya akan kita inject ke class MakananServiceImpl. Baiklah berikut adalah codingan dari class MakananRepository.

package com.rizki.mufrizal.belajarSpringMVCHibernate.repository;

import com.rizki.mufrizal.belajarSpringMVCHibernate.domain.Makanan;
import java.util.List;

/**
 *
 * @author rizki
 * @since Sep 27, 2015
 */

public interface MakananRepository {

    public void save(Makanan makanan);

    public void update(Makanan makanan);

    public void delete(Makanan makanan);

    public Makanan getMakanan(String idMakanan);

    public List<Makanan> getMakanans();
}

Class MakananRepositoryImpl akan melakukan implementasi terhadap class MakananRepository. Semua yang berurusan dengan query kita satukan di dalam class repository. Berikut adalah codingannya.

package com.rizki.mufrizal.belajarSpringMVCHibernate.repository;

import com.rizki.mufrizal.belajarSpringMVCHibernate.domain.Makanan;
import java.util.List;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

/**
 *
 * @author rizki
 * @since Sep 27, 2015
 */

@Repository
public class MakananRepositoryImpl implements MakananRepository {

    @Autowired
    private SessionFactory sessionFactory;

    @Override
    public void save(Makanan makanan) {
        sessionFactory.getCurrentSession().save(makanan);
    }

    @Override
    public void update(Makanan makanan) {
        sessionFactory.getCurrentSession().update(makanan);
    }

    @Override
    public void delete(Makanan makanan) {
        sessionFactory.getCurrentSession().delete(makanan);
    }

    @Override
    public Makanan getMakanan(String idMakanan) {
        return sessionFactory.getCurrentSession().get(Makanan.class, idMakanan);
    }

    @Override
    public List<Makanan> getMakanans() {
        return sessionFactory.getCurrentSession().createCriteria(Makanan.class).list();
    }

}

Bisa dilihat kita menggunakan annotation @Repository, annotation ini berfungsi untuk memanage bean - bean, sedangkan disana juga terdapat @Autowired yang berfungsi untuk melakukan inject ke bean sessionFactory. Kemudian dari SessionFactory kita dapat melakukan perintah CRUD. Tahap selanjutnya kita membuat lagi 2 class yaitu MakananService dan MakananServiceImpl. Untuk class MakananService sama seperti class MakananRepository. Sedangkan class MakananServiceImpl berikut codingannya.

package com.rizki.mufrizal.belajarSpringMVCHibernate.service;

import com.rizki.mufrizal.belajarSpringMVCHibernate.domain.Makanan;
import com.rizki.mufrizal.belajarSpringMVCHibernate.repository.MakananRepository;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

/**
 *
 * @author rizki
 * @since Sep 27, 2015
 */

@Service
@Transactional(readOnly = true)
public class MakananServiceImpl implements MakananService {

    @Autowired
    private MakananRepository makananRepository;

    @Transactional
    @Override
    public void save(Makanan makanan) {
        makananRepository.save(makanan);
    }

    @Transactional
    @Override
    public void update(Makanan makanan) {
        makananRepository.update(makanan);
    }

    @Transactional
    @Override
    public void delete(Makanan makanan) {
        makananRepository.delete(makanan);
    }

    @Override
    public Makanan getMakanan(String idMakanan) {
        return makananRepository.getMakanan(idMakanan);
    }

    @Override
    public List<Makanan> getMakanans() {
        return makananRepository.getMakanans();
    }

}

Mirip dengan class MakananRepositoryImpl hanya saja disini kita menggunakan annotation @Service karena class ini merupakan bagian dari pada bisnis coding. Disana kita menggunakan annotation @Transactional yang berfungsi untuk menghandle transaction pada database, konsep ini dikenal dengan ‘AOP (Aspect Oriented Programming)’. Setelah selesai, kita buat lagi class MakananController, class ini yang akan berfungsi sebagai penerima request dan mengembalikan request, Berikut codingannya.

package com.rizki.mufrizal.belajarSpringMVCHibernate.controller;

import com.rizki.mufrizal.belajarSpringMVCHibernate.domain.Makanan;
import com.rizki.mufrizal.belajarSpringMVCHibernate.service.MakananService;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestController;

/**
 *
 * @author rizki
 * @since Sep 27, 2015
 */

@RestController
@RequestMapping(value = "/api")
public class MakananController {

    @Autowired
    private MakananService makananService;

    @ResponseStatus(HttpStatus.OK)
    @RequestMapping(value = "/makanan", method = RequestMethod.GET, produces = {MediaType.APPLICATION_JSON_VALUE})
    public List<Makanan> getMakanans() {
        return makananService.getMakanans();
    }

    @ResponseStatus(HttpStatus.CREATED)
    @RequestMapping(value = "/makanan", method = RequestMethod.POST, produces = {MediaType.APPLICATION_JSON_VALUE}, consumes = {MediaType.APPLICATION_JSON_VALUE})
    public Map<String, Object> saveMakanan(@RequestBody Makanan makanan) {
        makananService.save(makanan);

        Map<String, Object> m = new HashMap<>();
        m.put("Success", Boolean.TRUE);
        m.put("Info", "Data Tersimpan");

        return m;
    }

    @ResponseStatus(HttpStatus.OK)
    @RequestMapping(value = "/makanan", method = RequestMethod.PUT, produces = {MediaType.APPLICATION_JSON_VALUE}, consumes = {MediaType.APPLICATION_JSON_VALUE})
    public Map<String, Object> updateMakanan(@RequestBody Makanan makanan) {
        makananService.update(makanan);

        Map<String, Object> m = new HashMap<>();
        m.put("Success", Boolean.TRUE);
        m.put("Info", "Data Berhasil di update");

        return m;
    }

    @ResponseStatus(HttpStatus.OK)
    @RequestMapping(value = "/makanan/{idMakanan}", method = RequestMethod.DELETE, produces = {MediaType.APPLICATION_JSON_VALUE})
    public Map<String, Object> deleteMakanan(@PathVariable("idMakanan") String idMakanan) {
        makananService.delete(makananService.getMakanan(idMakanan));

        Map<String, Object> m = new HashMap<>();
        m.put("Success", Boolean.TRUE);
        m.put("Info", "Data Berhasil di hapus");

        return m;
    }

}

Wah makin banyak annotationnya :D ,Berikut adalah penjelasan singkatnya.

  • @RestController : Merupakan annotaion dari spring mvc yang khusus untuk RESTful sehingga dia akan langsung mengambalikan data yang di return dari sebuah method.
  • @RequestMapping : berfungsi sebagai mendeklarasikan URI yang akan kita gunakan.
  • @ResponseStatus : berfungsi untuk membuat response status yang kita inginkan.
  • @RequestBody : berfungsi untuk menerima request berupa JSON dari client.
  • @PathVariable : berfungsi untuk mengambil data yang ada pada path URI

Oke untuk class java nya telah selesai, kita beralih ke konfigurasi XML untuk sprng mvc dan hibernate. Buat folder webapp sejajar dengan folder java, dan resources, kemudian di dalamnya buat sebuah folder dengan nama WEB-INF. Di dalam folder ini tambahkan sebuah file jdbc.properties untuk konfigurasi database, berikut codingannya.

#
# @author rizki
# @since Sep 27, 2015
#

jdbc.driverClassName = com.mysql.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/belajar
jdbc.username = root
jdbc.password = root

Kemudian buat sebuah file hibernate.cfg.xml untuk konfigurasi hibernate, berikut adalah codingannya.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
    <session-factory>
        <property name="hibernate.dialect">org.hibernate.dialect.MySQLDialect</property>
        <property name="hibernate.hbm2ddl.auto">update</property>
        <property name="hibernate.show_sql">true</property>
        <property name="hibernate.format_sql">true</property>

        <mapping class="com.rizki.mufrizal.belajarSpringMVCHibernate.domain.Makanan" />

    </session-factory>
</hibernate-configuration>

Kodingan diatas telah dibahas pada tutorial Belajar Hibernate. Selanjutnya adalah kita membuat sebuah file lagi yaitu mvc-dispatcher-servlet.xml untuk konfigurasi spring mvc. Berikut kodingannya.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">

    <context:annotation-config/>
    <mvc:annotation-driven/>
    <tx:annotation-driven transaction-manager="transactionManager"/>
    <context:property-placeholder location="/WEB-INF/jdbc.properties"/>

    <context:component-scan base-package="com.rizki.mufrizal.belajarSpringMVCHibernate"/>

    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="/WEB-INF/hibernate.cfg.xml"/>
    </bean>

    <bean id="transactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory"/>
    </bean>

</beans>

Berikut adalah penjelasan singkatnya.

  • tx:annotation-driven memberitahukan kepada spring bahwa kita mengaktifkan transaction dengan menggunakan annotation @Transactional.
  • context:property-placeholder untuk meload file konfigurasi database.
  • context:component-scan berfungsi untuk mendefinisikan class - class mana saja yang akan menggunakan annotation seperti @Repository, @Service, @Controller dan @RestController.
  • bean id="dataSource" merupakan bean yang berfungsi sebagai konfigurasi database.
  • bean id="sessionFactory" merupakan bean yang berfungsi untuk meload konfigurasi hibernate.
  • bean id="transactionManager" merupakan bean yang berfungsi sebagai transaction.

Untuk meload semua konfigurasi tersebut, buatlah sebuah file web.xml, kemudian masukkan codingan berikut.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>mvc-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>mvc-dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            /WEB-INF/mvc-dispatcher-servlet.xml
        </param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

</web-app>

Yang terakhir adalah buatlah sebuah file log4j.properties di dalam folder resources, berikut adalah codingannya.

#
# @author rizki
# @since Sep 27, 2015
#

log4j.rootLogger=DEBUG, file, stdout

# Direct log messages to a log file
log4j.appender.file=org.apache.log4j.RollingFileAppender
log4j.appender.file.File=logs/LogFile.log
log4j.appender.file.MaxFileSize=5MB
log4j.appender.file.MaxBackupIndex=10
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss:SSS} %C:%L %-5p - %m%n

# Direct log messages to stdout
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss:SSS} %C:%L %-5p - %m%n

Untuk menjalankannya dengan perintah mvc clean jetty:run mari kita lakukan uji coba dengan menggunakan Postman. Buka postman lalu lakukan uji coba dengan method POST untuk menyimpan data seperti ini.

Screenshot from 2015-09-27 21:30:25.png

Kemudian uji coba dengan menggunakan method GET untuk mengambil data

Screenshot from 2015-09-27 21:30:36.png

Kemudian uji coba dengan menggunakan method PUT untuk merubah data

Screenshot from 2015-09-27 21:31:11.png

Dan yang adalah uji coba dengan menggunakan method DELETE untuk menghapus data

Screenshot from 2015-09-27 21:31:28.png

Sekian tutorial membuat aplikasi resftful web service dengan teknologi spring mvc, hibernate dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Spring MVC dan Hibernate.

Beberapa tahun kebelakang, android merupakan sebuah teknologi yang sangat pesat berkembang. Seiring berkembanganya teknologi, para developer mulai banyak mengembangkan aplikasi - aplikasi berbasis android baik secara native maupun hybrid. Kali ini kita akan mencoba membuat sebuah aplikasi android dengan menggunakan teknologi ionic.

Ionic merupakan sebuah framework untuk membuat aplikasi mobile hybrid dengan teknologi web.

Salah satu kelebihan ionic adalah mobile hybrid artinya kita hanya perlu melakukan 1 kali coding, dan hasil coding tersebut dapat kita build menjadi aplikasi Android dan IOS.

Berikut merupakan tahapan yang akan kita lakukan untuk membuat project dengan menggunakan ionic.

  • Instalasi Android
  • Instalasi Ionic
  • Membuat Sebuah Aplikasi Android
  • Membuat File APK
  • Instalasi File APK Ke Device Android

Instalasi Android

Bagi yang belum melakukan instalasi java, silahkan dilihan di instalasi perlengkapan coding java Silahkan anda download android studio. Kemudian extract dan install sdk android versi 5.1.1 atau API 22. Setelah selesai, kita akan mulai melakukan path android. Jalankan perintah berkut.

sudo gedit /etc/environment

kemudian masukkan variabel berikut pada bagian atas

ANDROID_HOME=/home/rizki/Android/Sdk

Sesuaikan dengan directory anda. Kemudian tambahkan pada bagian PATH seperti ini

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/rizki/Android/Sdk/platform-tools:/home/rizki/Android/Sdk/tools"

Silahkan restart komputer anda agar variabel tersebut dapat terbaca di terminal anda.

Instalasi Ionic

Untuk melakukan instalasi ionic, diwajibkan untuk melakukan instalasi node js, bagi yang belum melakukan instalasi node js silahkan lihat di instalasi perlengkapan coding node JS. Kemudian jalankan perintah berikut.

npm install -g cordova ionic

tunggu hingga instalasi selesai.

Membuat Sebuah Aplikasi Android

Setelah selesai instalasi ionic, sekarang saatnya coding :D. sebelumnya berikut adalah syarat untuk coding ionic.

  • Mengerti HTML khususnya html5
  • Mengerti Angular JS, ini yang wajib anda kuasai untuk membuat aplikasi dengan ionic

Jalankan perintah berikut untuk membuat aplikasi android dengan ionic.

ionic start Belajar-Ionic blank

artinya kita ingin membuat sebuah aplikasi dengan nama Belajar-Ionic dengan menggunakan template ‘blank’. Setelah selesai, kemudian masuk ke root folder project dengan menggunakan terminal lalu jalankan perintah berikut.

ionic platform add android

perintah diatas berfungsi untuk mendeklarasikan bahwa kita ingin membuat sebuah aplikasi mobile untuk android. Tunggu hingga hasil download selesai. Setelah selesai, kita coba jalankan dengan perintah.

ionic run

Berikut adalah hasilnya. Screenshot from 2015-09-24 23:02:16.png

sedangkan jika kita ingin melakukan uji coba terlebih dahulu, kita dapat melakukan akses aplikasi melalui browser dengan perintah.

ionic serve

lalu akses pada http://localhost:8100/. Berikut adalah tampilan pada web nya. Screenshot from 2015-09-24 23:35:09.png

Membuat File APK

Tidak seperti android studio, untuk membuat file APK, kita akan menggunakan terminal :D dikarenakan ionic belum memiliki IDE seperti halnya kita melakukan coding android secara native. Masuk ke root folder project lalu jalankan perintah berikut.

cordova build --release android

Tunggu sejenak karena gradle akan melakukan build terhadap aplikasi kita, dan nantinya akan muncul file apk dengan nama android-release-unsigned.apk pada folder platforms/android/build/outputs/apk/. File apk ini masih belum bisa diinstall di hp dikarenakan belum adanya keystore. Langkah selanjutnya adalah masuk ke folder platforms/android/build/outputs/apk/ dengan terminal lalu jalankan perintah berikut.

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Masukkan password dan data lainnya. Jika berhasil maka di dalam folder tersebut akan digenerate sebuah keystore dengan nama my-release-key.keystore. Kemudian kita harus melakukan sign terhadap file apk agar dapat diinstall pada device android. File apk ini di sign dengan menggunakan keystore yang telah kita buat tadi dengan perintah.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name

Tahap selanjutnya adalah silahkan anda download zipaligner. Zipaligner berfungsi untuk membuat file apk yang telah release. Extract kemudian copy semua file zipaligner ke folder platforms/android/build/outputs/apk/ kemudian beri hak akses dengan sintak chmoa a+x zipalign kemudian untuk membuat apk jalankan perintah berikut.

./zipalign -v 4 android-release-unsigned.apk Belajar-Ionic.apk

Jika berhasil maka terdapat file Belajar-Ionic.apk di dalam folder platforms/android/build/outputs/apk/.

Instalasi File APK Ke Device Android

Install Ke Emulator Android

Agar dapat melakukan instalasi pada emulator, silahkan jalankan terlebih dahulu emulator anda kemudian masuk ke folder platforms/android/build/outputs/apk/ lalu install file apk tersebut dengan perintah.

adb install Belajar-Ionic.apk

Jika berhasil maka hasilnya seperti ini Screenshot from 2015-09-24 23:28:06.png

Kemudian cari aplikasi Belajar-Ionic pada menu emulator android anda.

Install Ke Device Android

Silahkan sambungkan HP anda dengan menggunakan kabel data ke komputer anda. Kemudian aktifkan debungging USB pada menu opsi pengembangan. Kemudian lakukan pengecekan device dengan perintah.

adb devices

maka jika device ada akan muncul berdasarkan device anda, berikut contoh device saya. Screenshot from 2015-09-24 23:31:33.png

Kemudian install ke device dengan perintah

adb install Belajar-Ionic.apk

Sekian tutorial tentang Belajar Ionic, semoga bermanfaat dan terima kasih :).