Akhir - akhir ini, linux sudah banyak digunakan terutama mahasiswa yang suka ngoprek hal baru. Akan tetapi terdapat kendala diantara user windows yang migrasi ke linux yaitu masalah instalasi software. Tidak hanya di kalangan orang awam, bahkan mahasiswa juga mengalami hal yang serupa. Jika pada windows kita hanya klik pada file setup lalu tinggal klik tombol next dan finish selesai, hal ini berbeda dengan linux, bagaimana caranya ? sebelum kita membahas cara instalasi linux, penulis akan terlebih dahulu membahas tentang management package di dalam linux karena management package merupakan hal dasar yang harus dimengerti oleh seorang linux user :D.

Package Management Pada Linux

Setiap distro linux memiliki package management yang berbeda - beda. Apa itu Distro linux ?

Distro Linux (singkatan dari distribusi Linux) adalah sebutan untuk sistem operasi komputer dan aplikasinya, merupakan keluarga Unix yang menggunakan kernel Linux. Distribusi Linux bisa berupa perangkat lunak bebas (open source) dan bisa juga berupa perangkat lunak komersial seperti Red Hat Enterprise, SuSE, dan lain-lain.

Dari pengertian diatas dapat kita simpulkan bahwa setiap yang menggunakan kernel linux maka dia termasuk salah satu distro linux. Berikut adalah contoh distro linux.

  • Ubuntu
  • Open Suse
  • Linux Mint
  • Fedora
  • Red Hat
  • Slackware
  • Centos
  • Elementary OS
  • Kali Linux
  • Dan lain - lain

Itu merupakan beberapa contoh dari distro linux, dan ada banyak sekali distro linux yang telah dikembangkan. Dari sekian banyak linux, yang menjadi induknya ada 3 distro yaitu debian, slackware dan red hat. Dari ketiga dsitro tersebut maka dikembangkan lah distro - distro lain seperti ubuntu, open suse, fedora dan lain sebagainya. Setiap distro yang merupakan turunan dari distro sebelumnya maka distro tersebut akan mengikuti package management pada distro sebelumnya, Apa itu Package Management ?

package management (atau package management system atau sistem manajemen paket) adalah kumpulan perangkat untuk mengotomatisasi proses instalasi, upgrade (perbaikan), konfigurasi, atau menghapus paket perangkat lunak dari sebuah komputer menggunakan cara tertentu.

Dari pengertian diatas dapat kita simpulkan bahwa package management setiap distro beda - beda. Pada artikel ini, penulis hanya membahas tentang package management pada keluarga debian. Berikut adalah contoh dari keluarga debian

  • Debian
    • Ubuntu
      • Ubuntu Mate
      • Kubuntu
      • Xubuntu
      • Elementary OS
    • Kali Linux

Bisa dilihat bahwa distro ubuntu merupakan turunan dari distro debian sehingga package management yang akan digunakan oleh ubuntu akan sama seperti pada debian. Begitu pula halnya seperti distro ubuntu mate, kubuntu dan lain sebagainya. Package management yang terdapat pada keluarga debian yaitu apt-get, apt-get merupakan package management yang terdapat pada keluarga debian, salah satu fungsinya adalah mempermudah user dalam mencari dependency yang dibutuhkan oleh sebuah aplikasi, misalnya penulis ingin melakukan instalasi aplikasi daftar barang, nah aplikasi ini membutuhkan aplikasi lain untuk bisa jalan misalnya dia membutuhkan gcc maka secara otomatis package management akan mencari dependency yang dibutuhkan oleh aplikasi tersebut. apt-get sebenarnya adalah sebuah front end sedangkan back end nya adalah dpkg yang akan melakukan instalasi software. Bedanya apa ? bedanya adalah apt-get dapat mencari dependency sebuah aplikasi sedangkan dpkg tidak dapat mencari dependency tetapi dpkg hanya bertugas untuk melakukan instalasi sebuah aplikasi.

Instalasi Software Dengan Package Management (apt-get)

Setelah mengetahui bagaimana package management pada keluarga debian, selanjutnya kita akan melakukan instalasi sebuah aplikasi. Misalnya disini penulis ingin melakukan instalasi software sticky notes pada ubuntu. Untuk melakukan instalasi sticky notes kita membutuhkan yang namanya PPA.

PPA (“Personal Package Archive”) adalah penyedia repositori buatan pihak ketiga di Launchpad yang dapat anda gunakan untuk menginstal (atau upgrade) paket yang tidak tersedia dalam repository Ubuntu resmi.

Mengapa menggunakan PPA ? dikarenakan di dalam repository ubuntu resmi tidak menyediakan software - software yang kita inginkan misalnya seperti java oracle dan sebagainya. Untuk menambahkan PPA berikut adalah bentuk umumnya :

sudo add-apt-repository ppa:Pembuat PPA/Nama PPA

Jika kita ingin melakukan instalasi sticky notes maka kita akan menambahkan PPA seperti berikut ini, jangan lupa bahwa perintah ini menggunakan terminal linux.

sudo add-apt-repository ppa:umang/indicator-stickynotes

Jika berhasil maka akan muncul gambar seperti berikut.

Screenshot from 2015-12-10 09:36:29.png

Setelah selesai, selanjutnya silahkan update repository di dalam komputer anda dengan perintah

sudo apt-get update

Jika telah selesai melakukan update maka hasilnya akan seperti ini.

Screenshot from 2015-12-10 09:40:25.png

Langkah selanjutnya adalah melakukan instalasi sticky notes nya sendiri, berikut adalah bentuk umum instalasi dengan apt-get.

sudo apt-get install Nama Software

maka untuk instalasi sticky notes jalankan perintah berikut

sudo apt-get install indicator-stickynotes

Jika berhasil maka sticky notes akan terinstall dan diterminal anda akan muncul seperti ini.

Screenshot from 2015-12-10 09:45:16.png

Instalasi Software Dengan dpkg (Debian Package Manager)

Sebelumnya kita melakukan instalasi dengan menggunakan apt-get nah kali ini kita akan menggunakan fungsi dpkg untuk melakukan instalasi software. Syarat yang dibutuhkan untuk instalasi software dengan menggunakan dpkg adalah kita diharuskan mendownload file executable dengan extensi .deb. Misalnya penulis ingin melakukan instalasi sofware mysql workbench, silahkan anda download terlebih dahulu di Mysql Workbench jangan lupa sesuaikan dengan versi ubuntu anda.

Berikut merupakan bentuk umum untuk melakukan instalasi dengan menggunakan dpkg

sudo dpkg -i File Executable.deb

Setelah selesai mendownload file executable mysql workbench langkah selanjutnya pindahkan file tersebut ke folder home. Kemudian jalankan perintah berikut.

sudo dpkg -i mysql-workbench-community-6.3.5-1ubu1404-amd64.deb

Beberapa software jika kita melakukan instalasi dengan dpkg akan mengeluarkan error, contohnya adalah ketika kita melakukan instalasi mysql workbench akan muncul pesan error seperti berikut ini.

Screenshot from 2015-12-10 10:03:06.png

Dari gambar diatas dapat dilihat bahwa software mysql workbench diinstall akan tetapi terdapat error sehingga software tidak dapat dibuka. Bagaimana cara mengatasinya ? silahkan scroll terminal anda ke atas maka terdapat tulisan seperti ini.

Screenshot from 2015-12-10 10:03:24.png

Artinya adalah bahwa mysql workbench membutuhkan beberapa dependency library akan tetapi library tersebut belum diinstall di dalam komputer anda. Untuk mengatasi dependency library ini maka kita harus menggunakan fungsi apt-get silahkan sambungkan internet anda lalu jalankan perintah berikut.

sudo apt-get install -f

Fungsi perintah diatas adalah dia akan mencarikan dependency library apa saja yang dibutuhkan oleh software mysql workbench sehingga akan muncul seperti ini.

Screenshot from 2015-12-10 10:14:01.png

Lalu ketik huruf y dan tekan enter maka dia akan mendownload dependency library dan melakukan instalasi software mysql workbench, Jika berhasil maka akan muncul seperti ini.

Screenshot from 2015-12-10 10:16:50.png

Uninstall Software

Setelah mengetahui bagaimana instalasi software, maka langkah selanjutnya adalah bagaimana cara uninstall software. Ada 2 cara, berikut adalah bentuk umumnya.

sudo apt-get remove Nama Sofware

dan

sudo apt-get purge Nama Sofware

Perbedaanya adalah ketika menggunakan remove maka software akan diunstall sedangkan dengan menggunakan purge maka software diuninstall berserta konfigurasi softwarenya. Penulis akan melakukan uninstall terhadap software sticky notes maka jalankan perintah berikut.

sudo apt-get purge indicator-stickynotes

maka hasil akhirnya adalah seperti berikut ini.

Screenshot from 2015-12-10 10:31:50.png

Membuat Shortcut Software

Bagaimana membuat shortcut pada ubuntu jika software tersebut tidak perlu diinstall seperti Eclipse, IntelliJ IDEA, Spring Tool Suite, dan Andoid Studio ? kita bisa menggunakan aplikasi lain untuk membuat shortcut aplikasi tersebut. Silahkan jalankan perintah berikut.

sudo apt-get install --no-install-recommends gnome-panel

Misalnya penulis ingin membuat shortcut untuk spring tool suite, silahkan download terlebih dahulu di Spring Tool Suite dan extrack. Setelah selesai buka terminal dan jalankan perintah.

sudo gnome-desktop-item-edit --create-new /usr/share/applications/

maka akan muncul sebuah windows create launcher silahkan isi sesuai dengan nama aplikasi, pada bagian command silahkan browser file executable. Setelah selesai lalu jalankan perintah berikut untuk memberikan hak akses.

sudo chmod a+x /usr/share/applications/Spring\ Tool\ Suite.desktop

Setelah selesai silahkan cari aplikasi tersebut di dashboard ubuntu anda :D. Sekian artikel mengenai belajar instalasi software di linux dan terima kasih :).

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.