Kebanyakan mahasiswa masih menggunakan microsoft word untuk mengerjakan skripsi dan penulisan ilmiah. Microsoft word memang salah satu tool yang sangat populer untuk kegiatan menulis dan lain sebagainya. Tapi tahu kah anda bahwa menulis sebuah skripsi dan penulisan ilmiah merupakan pekerjaan yang sangat merepotkan jika menggunakan microsoft word ? bagaimana bisa ? baiklah, penulis akan menjelaskan mengapa microsoft word dapat merepotkan anda untuk menulis ?

  • yang pertama adalah masalah penomoran halaman, microsoft word diharuskan untuk melakukan setting terlebih dahulu, anda tahu bahwa halaman paling depan menggunakan angka romawi dan dimulai bab 1 kita menggunakan angka biasa, ini membutuhkan settingan page break.
  • Yang kedua, tata letak penulisan, penulisan anda awalnya rapi, tapi ketika ada salah satu yang harus diganti maka otomatis dari secara tidak langsung penulisan setelahnya akan hancur terlebih jika terdapat gambar dan tabel.
  • Penulisan huruf yang tidak konsisten, ini dapat dilihat dari nama bab, nama section dan lain sebagainya.
  • Jarak antar spasi tidak konsisten, ada yg 1,5 ada yg 2 bahakan ada 2,5 ini membuat penulisan menjadi acak - acakan.
  • Daftar isi, daftar gambar dan daftar tabel diharuskan membuat sendiri, pembuatan nama tabel juga harus dibuat oleh pengguna misalnya gambar 3.2 : helloword
  • Untuk perpustakaan, kita diharuskan untuk membuat sendiri tanpa bantuan lain, sehingga banyak tulisan daftar pustaka yang tidak sesuai aturan penulisan.

Trus bagaimana mengatasinya ? untuk soal penulisan ada beberapa tool yang disarankan, diantaranya adalah dengan menggunakan LaTeX dan Markdown. Diantara 2 tool tersebut, LaTeX merupakan salah satu tool yang paling banyak digunakan dalam bidang akademik sedangkan markdown lebih ke arah pembuatan ebook dan dokumentasi. Untuk penulisan skripsi dan penulisan ilmiah kita gunakan LaTex saja, tapi tunggu bukankah LaTeX itu diharuskan kita untuk coding secara manual ? yups tapi jangan khawatir karena ada sebuah tool lagi yang mirip fungsinya seperti microsoft word yaitu LyX.

Instalasi LyX

Untuk pengguna windows silahkan anda download di LyX sedangkan pengguna linux, kita akan menggunakan terminal.

tambahkan repsitory terlebih dahulu.

sudo add-apt-repository ppa:lyx-devel/release

kemudian lakukan update.

sudo apt-get update

kemudian install lyx dengan perintah.

sudo apt-get install lyx

Di linux, belum tersedia bahasa indonesia yang dikenali oleh LyX sehingga kita melakukan instalasi dependencynya dengan perintah.

sudo apt-get install texlive-lang-other

Menggunakan LyX dan Template LyX

Silahkan download template LyX pada repository github saya di TemplatePenulisanLyX kemudian buka file yang berektensi .lyx misalnya disini saya membuka template skripsi. maka hasilnya seperti ini. Screenshot from 2015-09-20 14:57:16.png

Mengganti Nama Penulis, Dosen Pembimbing Dst

  • Klik menu document lalu pilih settings
  • lalu pilih menu LaTex Preamble
  • Anda dapat mengganti nama, nama dosen pembimbing, kajur, dan lain sebaginya. Berikut contoh gambarnya Screenshot from 2015-09-20 15:01:05.png

Membuat Table

  • Klik menu insert lalu pilih float lalu pilih table
  • maka dibuatkan sebuah frame beserta tabel yang keberapa, silahkan anda isi nama tabel tersebut
  • Untuk memasukkan tabel, klik insert lalu pilih table, anda dapat memilih berapa kolom dan berapa baris.
  • Untuk membuat agar tabel di tengah, klik kanan di dalam frame tabel lalu pilih paragraft setting lalu pilih center. Berikut merupakan hasilnya. Screenshot from 2015-09-20 15:07:19.png

Memasukkan Gambar

  • Klik menu insert lalu pilih float lalu pilih figure
  • maka dibuatkan sebuah frame beserta gambar yang keberapa, silahkan anda isi nama gambar tersebut
  • Untuk memasukkan tabel, klik insert lalu pilih Graphics, lalu pilih browse, cari gambar anda dan tekan oke.
  • Untuk membuat agar gambar di tengah, klik kanan di dalam frame gambar lalu pilih paragraft setting lalu pilih center. Berikut merupakan hasilnya. Screenshot from 2015-09-20 15:10:35.png

Membuat Kutipan

  • Cari kalimat yang merupakan kutipan
  • Kemudian pindahkan kursor pada akhir kalimat dikarenakan kutipan ada di akhir
  • Pilih menu insert dan pilih citation
  • pada menu citation, pada kolom available citation terdapat nama pengarang, pilih salah satu lalu add sehingga akan muncul pada kolom selected citation
  • Kemudian klik oke, maka akan muncul kutipan tersebut. Berikut adalah gambarnya. Screenshot from 2015-09-20 15:17:01.png

Membuat Daftar Pustaka

  • Download terlebih dahulu Jabef yang digunakan untuk memasukkan daftar isi
  • Jabref bersifat portable sehingga dapat langsung dibuka
  • Buka jabref, pilih menu file lalu pilih open database, pilih file biblio.bib maka tampilannya akan seperti ini. Screenshot from 2015-09-20 15:21:48.png
  • Kemudian kita akan mencari daftar pustaka dengan bantuan google scholar, buka google scholar lalu cari sebuah pengarang dengan judul bukunya misalnya ifnu bima java desktop maka akan muncul seperti ini. Screenshot from 2015-09-20 15:24:24.png
  • Pilih kutipan maka akan muncul sebuah popup, lalu pilih BibTeX maka akan muncul codingan BibTex
  • copy codingan BibTex, kemudian ke jabref pilih menu bibtex lalu pilih new entry lalu pilih buku
  • Akan muncul menu bibtex untuk mengisi data dari daftar perpustakaan, buka tab bibtex source, lalu pastekan codingan tadi save dan haslinya seperti ini. Screenshot from 2015-09-20 15:28:55.png
  • Tahap terakhir adalah melakukan setting daftar pustaka pada LyX, Buka pada halaman akhir, terdapat tulisan BibTex generated bibliography klik tulisan tersebut maka akan muncul sebuah pop up. Pada bagian style pilih apalike. Ini Merupakan format Model Harvard/APA, kemudian pilih oke dan berikut hasil akhirnya. Screenshot from 2015-09-20 15:32:54.png

konversi ke PDF

Untuk mendapatkan penulisan yang rapi, LyX dapat mengubah penulisan LaTeX menjadi pdf sehingga dapat dibuka di komputer mana pun. Untuk melakukan konversi dengan menggunakan tombol ctrl + R

Demikian tutorial singkat mengenai penulisan skripsi dan penulisan ilmiah, Semoga menjadi bahan pertimbangan ketika anda menulis dan terima kasih :).

Pada tutorial sebelumnya penulis telah membahas bagaimana cara instalasi untuk coding node js. Kali ini kita akan belajar bagaimana membagun sebuah aplikasi berbasis node js.

Berikut merupakan tahapan untuk membuat sebuah aplikasi dengan node js :

  • Initialisasi Project Node JS
  • Initialisasi dependency Library dengan bower
  • Membuat model
  • Membuat Router
  • Membuat view
  • Uji Coba

Initialisasi Project Node JS

Kita mulai dengan membuat sebuah folder aplikasi, disini penulis memberi nama folder dengan Belajar-ExpressJS kemudian masuk ke folder dengan menggunakan terminal. Jalankan perintah npm init kemudian masukkan inputan sesuai dengan anda inginkan. Jika berhasil maka akan dibuatkan sebuah file yaitu package.json sebagai konfigurasi project node js. Langkah selanjutnya adalah kita memerlukan banyak dependency library diantaranya seperti express, mongoose, jade dan lain - lain. Untuk melakukan instalasi dependency tersebut jalankan perintah berikut :

npm install body-parser cookie-parser csurf errorhandler express express-session jade method-override mongoose morgan node-uuid serve-favicon winston --save

Berikut merupakan list dari library diatas :

  • body-parser : digunakan untuk parsing sebuah url dan json
  • cookie-parser : digunakan untuk konfigurasi cookie
  • csurf : digunakan untuk konfigurasi CSRF(Cross Site Request Forgery), untuk pembahasan CSRF akan dibahas pada tutorial selanjutnya :)
  • errorhandler : digunakan untuk handle error pada node js
  • express : merupakan framework node js untuk membangun sebuah aplikasi web
  • express-session : digunakan sebagai session pada express
  • jade : digunakan sebagai template engine pada node js, sebenarnya masih ada banyak template engine lain seperti EJS akan tetapi kita akan menggunakan template jade dikarenakan jade termasuk template yang bagus terutama support terhadap extends template
  • method-override : biasnya digunakan untuk membangun protokol HTTP method
  • mongoose : sebagai framework ODM (Object Document Mapping) yang akan melakukan akses ke mongoDB. MongoDB adalah database yang berbasis NoSQL, silahkan install MongoDB berikut dokumentasi cara instalasi MongoDB
  • morgan : digunakan sebagai log aplikasi
  • node-uuid : digunakan untuk generate otomatis UUID, UUID merupakan key yang unik, biasanya digunakan untuk generate ID pada sebuah database yang bersifat primary key
  • serve-favicon : digunakan untuk favicon atau icon sebuah web
  • winston : digunakan sebagai library log aplikasi

Initialisasi dependency Library dengan bower

Setelah konfigurasi project node js, selanjutnya kita ingin download dependency library untuk front end. Jalanakn perintah bower init lalu masukkan inputan lagi dan akan digenerate sebuah file bower.json yang merupakan file konfigurasi bower. Jalankan perintah berikut untuk instalasi dependency library bootstrap dan jquery :

bower install jquery bootstrap --save

Membuat model

Framework express mendukung pattern MVC (model view controller) sama halnya seperti framework lain seperti Ruby On Rails dan Spring Framework. Buat sebuah folder models lalu buat sebuah file Pegawai.js. Berikut merupakan codingan dari file Pegawai.js.

(function() {
  'use strict';

  var pegawai,
    mongoose = require('mongoose'),
    Schema = mongoose.Schema;

  pegawai = new Schema({
    idPegawai: {
      type: 'String',
      required: true
    },
    namaPegawai: {
      type: 'String',
      required: true
    },
    alamat: {
      type: 'String'
    },
    tanggalLahir: {
      type: 'Date',
      required: true
    }
  }, {
    collection: 'tb_pegawai'
  });

  module.exports = mongoose.model('Pegawai', pegawai);

}).call(this);

Berikut penjelasan singkat tentang codingan diatas :

  • var pegawai, mongoose; merupakan deklarasi dari masing - masing variabel. variabel pegawai merupakan variabel kosong, variabel monggose merupakan variabel dengan type data mongoose dan variabel Schema merupakan variabel dari Schema mongoose. Tidak seperti bahasa pemrograman lain, javascript dapat langsung mendeklarasikan variabelnya tanpa type data. require(‘monggose’) artinya kita melakukan import dari library monggose, ini sama halnya ketika kita melakukan import pada bahasa pemrograman java.
  • codingan selanjutnya merupakan pendeklarasian dari pada column - column yang ada pada sebuah database. Konsep ODM dan ORM memiliki kemiripan akan tetapi terdapat perbedaan yaitu pada ODM terdapat document dan tidak ada relasi sedangkan pada ORM terdapat table dan terdapat relasi.
  • collection : merupakan definisi dari pada collection pada mongodb, jika pada database RDBMS (SQL) kita mengenalnya dengan table. Silahkan pelajari lebih lanjut mengenai database MongoDB :).
  • module.exports : merupakan kodingan untuk melakukan export variabel pegawai, sehingga variabel pegawai dapat diakses oleh file javascript yang lainnya.

Membuat Router

Router merupakan sebuah controller, hanya saja dari penamaannya saja. Developer express lebih suka menyebutkan router sehingga disini penulis menggunakan dengan nama router. Sebelum kita membuat router, penulis membuat sebuah konfigurasi untuk log sebuah aplikasi. Buat 3 folder dengan nama routes, utils dan logs dan buat sebuah file dengan nama logger.js di dalam folder utils. Berikut adalah kodingan dari logger.js.

var winston = require('winston');
winston.emitErrs = true;

var logger = new winston.Logger({
  transports: [
    new winston.transports.File({
      level: 'debug',
      filename: './logs/logs-aplikasi.log',
      handleExceptions: true,
      json: true,
      maxsize: 5242880,
      maxFiles: 5,
      colorize: false
    }),
    new winston.transports.Console({
      level: 'debug',
      handleExceptions: true,
      json: false,
      colorize: true
    })
  ],
  exitOnError: false
});

module.exports = logger;
module.exports.stream = {
  write: function(message, encoding) {
    logger.info(message);
  }
};

Untuk codingan diatas akan dibahas pada tutorial selanjutnya mengenai log sebuah aplikasi :). Oke selanjutnya buat sebuah file PegawaiRoute.js di dalam folder routes. Berikut codingannya.

(function() {
  'use strict';

  var express = require('express'),
    Pegawai = require('../models/Pegawai'),
    logger = require('../utils/logger'),
    csrf = require('csurf'),
    router = express.Router(),
    csrfProtection = csrf({
      cookie: true
    }),
    uuid = require('node-uuid');

  router.get('/', function(req, res) {
    return Pegawai.find(function(err, pegawais) {

      if (err) {
        logger.error('error bung ', err);
        return res.render('500');
      }

      logger.debug('Berhasil ngambil data bung ', pegawais);
      return res.render('index', {
        pegawais: pegawais
      });

    });
  });

  router.get('/tambah/pegawai', csrfProtection, function(req, res) {
    logger.info('render page tambah');
    return res.render('tambah', {
      csrfToken: req.csrfToken()
    });
  });

  router.post('/save/pegawai', csrfProtection, function(req, res) {
    var pegawai = new Pegawai({
      idPegawai: uuid.v4(),
      namaPegawai: req.body.namaPegawai,
      alamat: req.body.alamat,
      tanggalLahir: req.body.tanggalLahir
    });

    return pegawai.save(function(err, pegawai) {
      if (err) {
        logger.error('error bung ', err);
        return res.render('500');
      }

      logger.debug('data tersimpan bung ', pegawai);
      logger.info('render page awal');
      return res.redirect('/');
    });

  });

  router.get('/edit/pegawai/:idPegawai', csrfProtection, function(req, res) {
    logger.info('edit pegawai');

    var idPegawai = req.params.idPegawai;

    Pegawai.findOne({
      idPegawai: idPegawai
    }, function(err, pegawai) {

      if (err) {
        logger.error('error bung ', err);
        return res.render('500');
      }

      logger.debug('data tersedia ', pegawai);
      logger.info('render page edit');
      return res.render('edit', {
        pegawai: pegawai,
        csrfToken: req.csrfToken()
      });
    });
  });

  router.post('/update/pegawai/:idPegawai', csrfProtection, function(req, res) {

    var idPegawai = req.params.idPegawai;

    Pegawai.findOne({
      idPegawai: idPegawai
    }, function(err, pegawai) {

      if (err) {
        logger.error('error bung ', err);
        return res.render('500');
      }

      pegawai.namaPegawai = req.body.namaPegawai;
      pegawai.alamat = req.body.alamat;
      pegawai.tanggalLahir = req.body.tanggalLahir;
      pegawai.save();

      logger.debug('data tersimpan bung ', pegawai);
      logger.info('render page awal');

      res.redirect('/');
    });
  });

  router.get('/delete/pegawai/:idPegawai', function(req, res) {
    Pegawai.remove({
      idPegawai: req.params.idPegawai
    }, function(err) {
      if (err) {
        logger.error('error bung ', err);
        return res.render('500');
      }

      logger.debug('data dihapus');
      logger.info('render page awal');
      res.redirect('/');
    });
  });

  module.exports = router;

}).call(this);

Berikut merupakan penjelasan singkat :

  • var express = require('express') merupakan codingan untuk melakukan import file javascript.
  • dimulai dari router.get('/', function(req, res) merupakan sebuah method untuk mengambil data lalu data tersebut di lempar ke view sekaligus melakukan render terhadap sebuah page jade. Disana terdapat kodingan Pegawai.find yang berfungsi untuk mengambil semua data pegawai, Lalu bagaimana melempar ke view ? pada bagian res.render('index', {pegawais: pegawais}) merupakan aksi untuk melakukan render dengan nama page index lalu mengirim data dengan parameter pegawais.
  • router.get('/tambah/pegawai') merupakan kodingan untuk menampilkan halaman tambah data pegawai, disini penulis menggunakan token CSRF :).
  • router.post('/save/pegawai') merupakan method untuk menyimpan data pegawai. Untuk menyimpan, kita menggunakan Model yaitu Pegawai akan tetapi kita diharuskan membuat object baru, dapat dilihat di var pegawai = new Pegawai. Untuk idPegawai kita membuatnya dengan menggunakan bantuan node-uuid sedangkan data lain berdasarkan dari pada form, untuk mengambil data pada form kita menggunakan req.body.namaTextField. Jika data tersimpan maka kita akan melakukan redirect ke page awal.
  • method selanjutnya adalah router.get('/edit/pegawai/:idPegawai' yang berfungsi untuk melalukan render halaman edit, sebelum melakukan render, kita mengambil data terlebih dahulu berdasarkan idPegawai dapat diliha pada codingan router.get('/edit/pegawai/:idPegawai' lalu melakukan render ke page edit.
  • router.post('/update/pegawai/:idPegawai' sama seperti method save sebelumya bedanya adalah, disini kita melakukan query terlebih dahulu terhadap Pegawai kemudian kita melakukan update data, dapat dilihat pada codingan router.post('/update/pegawai/:idPegawai').
  • router.get('/delete/pegawai/:idPegawai)' merupakan method yang terakhir untuk menghapus sebuah data. Untuk menghapus data dapat dilihat pada Pegawai.remove({}).

Membuat view

Tahap selanjutnya adalah membuat view, silahkan buat folder views kemudian buat 5 file di dalam folder tersebut yaitu layout.jade, index.jade, tambah.jade, edit.jade dan 500.jade. Berikut adalah kodingan untuk layout.jade.

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='description')
      meta(name='keywords', content='keywords')
      meta(name='author', content='author')
      meta(name="robots", content="index, follow")

      //- ----- link website ----- //
      link(rel='icon' href='../favicon.ico' type='image/x-icon')

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

      block title
        title Default title

    body

      script(type='text/javascript', src='/jquery/dist/jquery.min.js')
      script(type='text/javascript', src='/bootstrap/dist/js/bootstrap.min.js')

      block content

codingan diatas berfungsi untuk mendeklarasikan layout untuk semua page, page lain akan melakukan extend terhadap layout ini sehingga kita hanya perlu melakukan import library jquery dan bootstrap di layout ini. Sama seperti html biasa hanya saja pada page engine jade kita tidak menggunakan penutup tag, akan tetapi secara otomatis akan dibuatkan oleh jade, untuk lebih lengkap silahkan baca dokumentasi dari jade. Selanjutnya kita ke page index.jade dan berikut codingannya.

extends ./layout.jade

block title
  title Data Pegawai
block content
  div.container
    div.row
      div.col-xs-6.col-md-1
      div.col-xs-6.col-md-10
        p
          a.class(href='/tambah/pegawai')
            button(type="button").btn.btn-primary Tambah
        p
        table.table.table-bordered.table-striped.table-hover
          thead
            tr
              th.text-center Id Pegawai
              th.text-center Nama Pegawai
              th.text-center Alamat
              th.text-center Tanggal Lahir
              th.text-center Aksi
          tbody
            each pegawai in pegawais
              tr
                td #{pegawai.idPegawai}
                td #{pegawai.namaPegawai}
                td #{pegawai.alamat}
                td #{pegawai.tanggalLahir}
                td.text-center
                  a.class(href='/edit/pegawai/#{pegawai.idPegawai}')
                    button(type="button").btn.btn-success Edit
                  a.class(href='/delete/pegawai/#{pegawai.idPegawai}', onclick='return confirm("Apakah anda ingin menghapus data ?")')
                    button(type="button").btn.btn-danger Delete
      div.col-xs-6.col-md-4

Bisa dilihat pada kodingan each pegawai in pegawais kita melakukan render data berdasarkan data pegawais yang tadinya kita kirim melalui router. Data yang dikirim berupa array sehingga kita dapat melakukan render data tersebut ke dalam sebuah table. Jade juga mendukung penggunaan javascript client, contohnya ada pada button delete. Selanjutnya kita beralih ke page tambah.jade dengan kodingan.

extends ./layout.jade

block title
  title Tambah Data Pegawai
block content
  div.container
    div.row
      div.col-xs-6.col-md-4
      div.col-xs-6.col-md-4
        form(id="form", method="post", action="/save/pegawai")
          .form-group
            label Nama Pegawai
            input(type="text", placeholder="Nama Pegawai", name="namaPegawai").form-control
          .form-group
            label Alamat
            textarea(placeholder="Alamat", name="alamat").form-control
          .form-group
            label Tanggal Lahir
            input(type="date", placeholder="Tanggal Lahir", name="tanggalLahir").form-control
          input(type="hidden", name="_csrf" value="#{csrfToken}")
          button(type="submit").btn.btn-primary Save
      div.col-xs-6.col-md-4

Sama seperti kodingan form biasa, disana kita deklarasikan nama masing - masing input agar dapat dibaca oleh server lalu datanya akan disimpan, disini penulis juga menggunakan CSRF dapat dilihat pada bagian

input(type="hidden", name="_csrf" value="#{csrfToken}")

Selanjutnya adalah page edit.jade.

extends ./layout.jade

block title
  title Edit Data Pegawai
block content
  div.container
    div.row
      div.col-xs-6.col-md-4
      div.col-xs-6.col-md-4
        form(id="form", method="post", action="/update/pegawai/#{pegawai.idPegawai}")
          .form-group
            label Id Pegawai
            input(type="text", placeholder="Id Pegawai", name="idPegawai", value="#{pegawai.idPegawai}", disabled).form-control
          .form-group
            label Nama Pegawai
            input(type="text", placeholder="Nama Pegawai", name="namaPegawai", value="#{pegawai.namaPegawai}").form-control
          .form-group
            label Alamat
            textarea(type="text",placeholder="Alamat", name="alamat").form-control
              | #{pegawai.alamat}
          .form-group
            label Tanggal Lahir
            input(type="text", placeholder="Tanggal Lahir", name="tanggalLahir", value="#{pegawai.tanggalLahir}").form-control
          input(type="hidden", name="_csrf" value="#{csrfToken}")
          button(type="submit").btn.btn-primary Save
      div.col-xs-6.col-md-4

Sama seperti page tambah.jade hanya saja disini kita langsung memberikan value, dikarenakan user dapat melihat value sebelumnya, dan disini penulis mendisable untuk inputan idPegawai dikarenakan idPegawai bersifat unik. Dan page terakhir adalah 500.jade, berikut kodingannya .

extends ./layout.jade

block title
  title Edit Data Pegawai
block content
  h1 Error 500 bung ... silahkan coba sesaat lagi :)

Page 500.jade hanya sebagai page yang digunakan jika terjadi error pada aplikasi web node js ini. Tahap terakhir adalah kita membuat konfigurasi server agar dapat dijalankan. Buatlah sebuah file app.js pada root folder. Kemudian masukkan codingan berikut.

(function() {
  'use strict';

  var http = require('http'),
    express = require('express'), //express
    path = require('path'), //untuk path folder
    favicon = require('serve-favicon'), //untuk favicon
    morgan = require('morgan'), //untuk log aplikasi
    methodOverride = require('method-override'),
    session = require('express-session'), //session
    bodyParser = require('body-parser'), //handle rest
    errorhandler = require('errorhandler'), //error
    logger = require('./utils/logger'), //loging
    mongoose = require('mongoose'), //mongoose
    cookieParser = require('cookie-parser'),
    PegawaiRoute = require('./routes/PegawaiRoute'),
    app = express();

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

  app.use(cookieParser());
  app.use(favicon(__dirname + '/public/favicon.ico'));
  app.use(morgan('combined', {
    stream: logger.stream
  }));
  app.use(methodOverride());
  app.use(session({
    resave: true,
    saveUninitialized: true,
    secret: 'uwotm8'
  }));
  app.use(bodyParser.urlencoded({
    extended: true
  }));
  app.use(express.static(path.join(__dirname, 'public')));
  app.use(express.static(path.join(__dirname, 'bower_components')));

  app.use('/', PegawaiRoute);

  mongoose.connect('mongodb://localhost/BelajarExpressJS', function(err, res) {
    if (err) {
      return logger.error('koneksi mongodb gagal bung', err);
    } else {
      return logger.info('koneksi mongodb berhasil bung');
    }
  });

  if ('development' === app.get('env')) {
    app.use(errorhandler());
  }

  app.use(function(err, req, res, next) {
    if (err.code !== 'EBADCSRFTOKEN') return next(err)

    // handle CSRF token errors here
    res.status(403)
    res.send('csrf token tidak tersedia bung');
  });

  var server = http.createServer(app);
  server.listen(app.get('port'), function() {
    return console.log('Server jalan pada port ' + app.get('port'));
  });

}).call(this);

Lumayan panjang :D baiklah, penulis menjelaskan beberapa hal saja.

  • app.set('port'); berfungsi untuk mendeklarasikan aplikasi akan jalan pada port 3000.
  • app.set('views'); berfungsi untuk mendeklarasikan folder view yang akan kita gunakan
  • app.set('view engine', 'jade'); berfungsi untuk mendeklarasikan bahwa kita menggunakan jade sebagai template enginenya.
  • mongoose.connect() untuk melakukan koneksi ke database mongodb
  • var server = http.createServer(app); berfungsi untuk membuat sebuah server lalu menjalankannya. berbeda dengan php, node js dapat dijalankan dengan menggunakan server yang bersifat embedded artinya ketika menjalankan sebuah server node js, kita tidak perlu mencopy project ke folder htdoc untuk dijalankan akan tetapi cukup menjalankannya di folder project maka aplikasi siap digunakan, konsep ini sama seperti pemrograman web pada java, kita dapat menjalankan web server baik jetty, tomcat maupun wildfly pada folder project dengan bantuan maven plugin.

Uji Coba

Akhirnya selesai juga, kita lakukan uji coba, jalankan aplikasi dengan menggunakan nodemon dengan perintah nodemon app.js maka hasilnya seperti ini.

Screenshot from 2015-09-20 13:26:32.png

Kemudian hit ke browser dengan url http://localhost:3000/ kemudian tambah data dengan menekan tombol tambah kemudian masukkan data anda, maka hasilnya seperti ini.

Screenshot from 2015-09-20 13:28:43.png

Data yang telah disimpan dapat di lihat pada index page, berikut hasilnya.

Screenshot from 2015-09-20 13:28:49.png

Untuk melakukan edit data, kita dapat menekan tombol edit, dah hasilnya seperti ini.

Screenshot from 2015-09-20 13:28:57.png

Untuk menghapus, kita dapat menekan tombol hapus dan terdapat alert javascript untuk memilik ya atau tidak dan hasilnya seperti ini.

Screenshot from 2015-09-20 13:29:05.png

Sekian tutorial belajar express dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Express.

Setelah mempelajari sedikit tentang framework hibernate, kali ini kita akan belajar tentang framework spring. Apa itu spring ?

Spring adalah salah satu framework untuk java enterprise. Hingga saat ini sangat banyak developer yang menggunakan framework ini dikarenakan kinerja tinggi, mudah diuji dan kode dapat digunakan kembali. Spring dibuat oleh Rod Johnson dan di di umumkan pada juni 2003 diatas lisensi apache. Spring digunakan untuk mengembangkan aplikasi java terutama dalam membangun sebuah aplikasi web diatas platfom JEE. Dan spring menerapakan kembali pemograman yang berbasis POJO (plain old java object).

Spring adalah salah satu framework yang menerapkan konsep DI (Depedency Injection) dimana depedency injection ini adalah salah satu penerapan dari konsep IoC (inversion of control). Banyak yang menjelaskan bahwa konsep DI dan IoC adalah dua hal yang sama. hal tersebut tidak benar, mengapa demikian ? karena IoC merupakan sebuah konsep yang paling umum dan salah satu penerapan konsep IoC dapat dengan menggunakan DI (depedency injection).

Oke kita akan mulai dengan membuat project spring. Seperti biasa, kita akan menggunakan maven sebagai build toolnya. Jalankan perintah berikut untuk membuat project.

mvn archetype:generate \
-DarchetypeArtifactId=maven-archetype-quickstart \
-DgroupId=com.rizki.mufrizal.belajarSpring \
-DartifactId=Belajar-Spring

Import project tersebut dengan menggunakan IDE kesukaan anda, disini penulis menggunakan Intellij IDEA. Kemudian tambahkan depedency library pada file pom.xml seperti berikut.

<dependencies>

  <!--testing -->
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
    <scope>test</scope>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>4.2.0.RELEASE</version>
    <scope>test</scope>
  </dependency>

  <!-- spring core -->
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>4.2.0.RELEASE</version>
  </dependency>
  <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>4.2.0.RELEASE</version>
  </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>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-compiler-plugin</artifactId>
      <version>3.2</version>
      <configuration>
        <source>1.8</source>
        <target>1.8</target>
      </configuration>
    </plugin>
  </plugins>
</build>

Oke setelah selesai, kita lanjut untuk melakukan coding. Berikut adalah tampilan struktur projectnya.

Screenshot from 2015-07-28 18:23:56.png

Kita akan mulai dari class Sistem Operasi. Class sistem operasi merupakan sebuah class domain atau class model. Di dalam class ini akan kita deklarasikan berbagai properti yang dimiliki oleh si sistem operasi. Class sistem operasi ini akan dibuatkan bean yang nantinya akan diinject oleh spring. Masukkan codingan berikut pada class sistem operasi seperti berikut.

public class SistemOperasi {

    private String namaSistemOperasi;
    private String versiSistemOperasi;

    //getter setter

    @Override
    public String toString() {
        return "Sistem Operasi anda adalah " + getNamaSistemOperasi() + " Dengan Versi " + getVersiSistemOperasi();
    }
}

Pada codingan diatas, kita mendeklarasikan dua property yaitu namaSistemOperasi dan versiSistemOperasi, property ini nantinya akan diinject melalui bean pada konfigurasi spring. Method toString berfungsi agar nanti kita dapat mengetahui apa isi dari property namaSistemOperasi dan versiSistemOperasi. Langkah selanjutnya buat sebuah file xml dengan nama spring-config-context.xml untuk konfigurasi spring dan berikut codingannya.

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

    <bean id="sistemOperasiUbuntu" class="com.rizki.mufrizal.belajarSpring.domain.SistemOperasi">
        <property name="namaSistemOperasi" value="Ubuntu"/>
        <property name="versiSistemOperasi" value="14.04"/>
    </bean>

    <bean id="sistemOperasiFedora" class="com.rizki.mufrizal.belajarSpring.domain.SistemOperasi">
        <property name="namaSistemOperasi" value="Fedora"/>
        <property name="versiSistemOperasi" value="fedora 22"/>
    </bean>

    <bean id="sistemOperasiElementary" class="com.rizki.mufrizal.belajarSpring.domain.SistemOperasi">
        <property name="namaSistemOperasi" value="Elementary os"/>
        <property name="versiSistemOperasi" value="Freya"/>
    </bean>

</beans>

konfigurasi diatas memiliki 3 bean, dan masing - masing bean mempunyai rujukan ke class Sistem Operasi, property namaSistemOperasi dan versiSistemOperasi akan diinject dengan value seperti diatas, dengan menggunakan id maka setiap bean mempunyai value yang berbeda - beda. Untuk dapat melakukan inject ini, spring menggunakan method setter yang telah kita deklarasikan pada class SistemOperasi sehingga apabila kita melakukan debug terhadap method getter maka akan muncul value dari masing - masing property. Kemudian gunakan class App.java yang dibuat oleh maven sebagai class main. Berikut codingan untuk main class.

public class App {

    private static final Logger LOGGER = LoggerFactory.getLogger(App.class);

    public static void main(String[]args) {

        ApplicationContext applicationContext = new ClassPathXmlApplicationContext("spring-config-context.xml");

        SistemOperasi sistemOperasiUbuntu = (SistemOperasi) applicationContext.getBean("sistemOperasiUbuntu");
        SistemOperasi sistemOperasiFedora = (SistemOperasi) applicationContext.getBean("sistemOperasiFedora");
        SistemOperasi sistemOperasiElementary = (SistemOperasi) applicationContext.getBean("sistemOperasiElementary");

        LOGGER.debug("Cek Spring Pertama : {}", sistemOperasiUbuntu.toString());
        LOGGER.debug("Cek Spring Kedua   : {}", sistemOperasiFedora.toString());
        LOGGER.debug("Cek Spring Ketiga  : {}", sistemOperasiElementary.toString());

    }

}

Berikut penjelasan singkat mengenai kodingan diatas.

  • ApplicationContext dan ClassPathXmlApplicationContext merupakan class yang bertanggung jawab untuk meload konfigurasi spring.
  • SistemOperasi merupakan class domain yang telah kita buat, disini penulis membuat 3 object dari class SistemOperasi untuk melakukan inject terhadap 3 bean yang terdapat pada konfigurasi spring.
  • dengan menggunakan bantuan library SLF4J maka kita lakukan debug terhadap masing - masing object.

Seperti biasa, untuk mempermudah debug aplikasi, silahkan buat sebuah file log4j.properties dan masukkan codingan berikut.

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 [%t] %p (%F:%L) - %m%n

# Direct log messages to stdout
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d [%t] %-5p %c - %m%n

# %d untuk tanggal pada saat log dibuat
# %t untuk nama tread
# %p untuk level log
# %c untuk nama class
# %F untuk nama file source code
# %L untuk no baris
# %m%n untuk isi log nya

Tahap terakhir untuk memperoleh sebuah program yang baik maka kita buat sebuah class untuk testing aplikasi. Untuk belajar testing aplikasi, penulis akan membuatnya pada tutorial selanjutnya. Dengan menggunakan class AppTest yang dibuat oleh maven, masukkan codingan berikut agar kita dapat melakukan testing.

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:spring-config-context.xml")
@TestExecutionListeners({
        DependencyInjectionTestExecutionListener.class
    }
)
public class AppTest {

    @Qualifier("sistemOperasiUbuntu")
    @Autowired
    private SistemOperasi sistemOperasiUbuntu;

    @Qualifier("sistemOperasiFedora")
    @Autowired
    private SistemOperasi sistemOperasiFedora;

    @Qualifier("sistemOperasiElementary")
    @Autowired
    private SistemOperasi sistemOperasiElementary;

    private static final Logger LOGGER = LoggerFactory.getLogger(AppTest.class);

    @Test
    public void testSistemOperasiPertama() throws Exception {
        assertEquals(sistemOperasiUbuntu.getNamaSistemOperasi(), "Ubuntu");
        assertEquals(sistemOperasiUbuntu.getVersiSistemOperasi(), "14.04");
        LOGGER.debug("Test Sistem Operasi Pertama");
    }

    @Test
    public void testSistemOperasiKedua() throws Exception {
        assertEquals(sistemOperasiFedora.getNamaSistemOperasi(), "Fedora");
        assertEquals(sistemOperasiFedora.getVersiSistemOperasi(), "fedora 22");
        LOGGER.debug("Test Sistem Operasi Kedua");
    }

    @Test
    public void testSistemOperasiKetiga() throws Exception {
        assertEquals(sistemOperasiElementary.getNamaSistemOperasi(), "Elementary os");
        assertEquals(sistemOperasiElementary.getVersiSistemOperasi(), "Freya");
        LOGGER.debug("Test Sistem Operasi Ketiga");
    }

}

Jika telah selesai, mari kita jalankan :D. Berikut jalankan perintah berikut untuk melakukan compile dan testing.

mvn compile test

Jika tidak ada error maka akan muncul pesan seperti ini.

Results :

Tests run: 3, Failures: 0, Errors: 0, Skipped: 0

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.903 s
[INFO] Finished at: 2015-07-28T19:24:13+07:00
[INFO] Final Memory: 16M/161M
[INFO] ------------------------------------------------------------------------

Kemudian jalankan aplikasi dengan perintah.

mvn exec:java -Dexec.mainClass="com.rizki.mufrizal.belajarSpring.App"

Sesuaikan dengan nama folder anda. Jika berhasil maka akan muncul output seperti ini.

2015-07-28 19:25:44,863 [com.rizki.mufrizal.belajarSpring.App.main()] DEBUG com.rizki.mufrizal.belajarSpring.App - Cek Spring Pertama : Sistem Operasi anda adalah Ubuntu Dengan Versi 14.04
2015-07-28 19:25:44,863 [com.rizki.mufrizal.belajarSpring.App.main()] DEBUG com.rizki.mufrizal.belajarSpring.App - Cek Spring Kedua   : Sistem Operasi anda adalah Fedora Dengan Versi fedora 22
2015-07-28 19:25:44,864 [com.rizki.mufrizal.belajarSpring.App.main()] DEBUG com.rizki.mufrizal.belajarSpring.App - Cek Spring Ketiga  : Sistem Operasi anda adalah Elementary os Dengan Versi Freya
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.982 s
[INFO] Finished at: 2015-07-28T19:25:44+07:00
[INFO] Final Memory: 12M/150M
[INFO] ------------------------------------------------------------------------

Sekian tutorial belajar spring dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Spring.

Perkembangan teknologi sangat pesat hingga menghasilkan berbagai teknologi. Diantaranya adalah berkembangannya bahasa pemrograman javascript. Javascript biasanya hanya berkerja pada bagian front end sebuah project akan tetapi pada hari ini, javascript telah dapat bekerja di bagian back end (server side) sebuah project. Javascript yang dapat jalan pada bagian server side adalah node js.

Node JS adalah sebuah platform software yang dipakai untuk membangun aplikasi – aplikasi serverside yang fleksibel di sebuah network / jaringan. Node.js menggunakan JavaScript sebagai bahasa pemrogaman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Node.js memiliki fitur built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx.

Node js pertama kali dibuat oleh Ryan Dahl pada tahun 2009 yang kemudian berkembang pesat di bawah licensi Open Source MIT oleh sebuah perusahaan bernama Joyent Inc. Pada hakikatnya Node js dikembangkan berdasarkan teknologi Google V8 JavaScript engine serta berisi kompilasi skrip inti dan banyak modul siap pakai yang bermanfaat sehingga pengguna (dalam hal ini web developer) tidak perlu melakukan coding dan mendesain segalanya dari awal.

Berbagai framework juga muncul pada perkembangan node js diantaranya adalah

  • express
  • sails
  • meteor
  • Hapi
  • Kraken
  • Strong Loop
  • dan lain - lain

Baiklah kita akan memulai bagaimana instalasi node js pada linux. Sebelum melakukan install node js, anda diwajibkan untuk melakukan instalasi version control git. Bagi yang belum melakukan instalasi git, silahkan lihat di tutorial belajar git. Yang perlu diperhatikan pada langkah instalasi node js adalah

  • Clone NVM
  • Instalasi dan konfigurasi Node JS
  • Latihan Sekilas Tentang Node JS

Clone NVM

Langkah selanjutnya adalah melakukan instalasi NVM. Jika pada instalasi ruby kita mengenal dengan RVM(ruby version manager) maka pada node js juga terdapat NVM(node version manager). Bedanya adalah pada NVM kita harus melakukan clone repository NVM dengan menggunakan version control git. Untuk melakukan clone, jalankan perintah berikut.

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

NVM telah di clone pada folder .nvm, untuk melihat folder tersebut pada linux, kita harus tampilkan terlebih dahulu dengan perintah ctrl + H dikarenakan folder tersebut bersifat hidden.

Instalasi dan konfigurasi Node JS

Kemudian kita akan melakukan PATH terhadap nvm. Jalankan perintah berikut.

sudo gedit /etc/environment

kemudian masukkan variabel berikut pada bagian atas.

NVM_HOME=/home/rizki/.nvm

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:/usr/lib/jvm/java-8-oracle/bin:/home/rizki/programming/build-tool/apache-maven/bin::/home/rizki/.rvm/bin:/home/rizki/.nvm"

Kemudian masuk ke folder .nvm dengan perintah

cd ~/.nvm/

kemudian jalankan perintah berikut untuk inisialisasi script nvm pada .bashrc

chmod a+x install.sh
./install.sh

Kemudian restart komputer anda dan lakukan pengecekan nvm dengan perintah.

nvm --version

Jika berhasil, kita akan melakukan instalasi node js dengan perintah.

nvm install stable

tunggu hingga proses download node js selesai. Node js yang di download adalah versi yang paling stable. Untuk mengecek versi node js dapat menggunakan perintah.

nvm list-remote

sedangkan jika ingin melihat list node js yang telah diinstall di pc dengan perintah.

nvm list

Untuk menghapus node js yang lama dapat dengan menggunakan perintah.

nvm uninstall versi yang mw di uninstall

contohnya seperti

nvm uninstall v0.12.6

Untuk mengaktifkan node js yang paling stable maka gunakan perintah berikut.

nvm alias default stable

lakukan pengecekan node js pada terminal dengan perintah.

node --version
npm --version

Latihan Sekilas Tentang Node JS

Setelah perjalanan panjang instalasi node js, kita mulai belajar sedikit bagaimana menggunakan node js :D. Buatlah sebuah folder untuk project kita, jika lewat terminal dengan perintah mkdir BelajarNodeJS. Kemudian buat sebuah file javascript dengan nama app.js, kemudian masukkan codingan berikut.

var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000, '127.0.0.1');

console.log('Server running at http://127.0.0.1:3000/');

Sintak diatas berfungsi untuk membuat sebuah server, kemudian kita menampilkan tulisan hello word pada saat user melakukan akses pada http://127.0.0.1:3000/ atau http://localhost:3000/. Untuk menjalankan servernya dengan perintah.

node app.js

Instalasi Nodemon

Untuk mempermudah pengembangan aplikasi, kita membutuhkan server yang bisa autoreload ketika developer mengubah source code. Salah satu tool yang mendukung tersebut adalah dengan menggunakan Nodemon. Untuk melakukan instalasi cukup dengan menggunakan perintah.

npm install -g nodemon

perintah -g berarti bersifat global. Kemudian untuk menjalankan source code tadi hanya dengan menggunakan perintah.

nodemon app.js

Salah satu kelebihan nodemon adalah dapat menjalankan source code dalam bentuk coffee script dan terdapat fitur autoreload server. Coba anda ganti source code tanpa mematikan server, kemudian di save maka nodemon akan melakukan reload server.

Instalasi Bower

Bower merupakan sebuah tool yang digunakan untuk melakukan manajemen kelengkapan library web seperti js, css dan img. Bower mirip dengan npm, bedanya adalah npm lebih di khususkan untuk manajemen kelengkapan library javascript. Baiklah untuk melakukan instalasi bower dapat dilakukan dengan perintah.

npm install -g bower

Sekian tutorial tentang instalasi perlengkapan coding node js, semoga bermanfaat dan terima kasih :).

Tutorial kali ini akan membahas tentang salah satu framework ruby yaitu ruby on rails atau sering disebut dengan ROR. Banyak yang mengambil struktur project dari ruby on rails beberapa diantaranya seperti play framework (scala/java), Spring Roo (java) dan sails (node js). Salah satu kelebihan ruby on rails adalah framework ini sudah support dengan teknologi ORM, untuk penjelasan ORM ada di tutorial belajar hibernate. Tidak hanya fitur ORM, akan tetapi framework ini dilengkapi dengan dokumentasi yang lengkap serta komunitas framework yang paling banyak di dalam bahasa pemrograman ruby. Baiklah lets coding ruby with ruby on rails :D.

Instalasi Ruby On Rails

Untuk melakukan instalasi ruby on rails, kita menggunakan gem. Bagi yang belum melakukan instalasi ruby, dapat dilihat pada tutorial instalasi ruby. Gem ini ibarat NPM di dalam node js. Bingung dengan NPM ? pada tutorial selanjutnya akan ada postingan tentang node js. Untuk melakukan instalasi ruby on rails pada linux jalankan perintah berikut.

gem install rails

tunggu hingga instalasi selesai, biasanya memakan waktu sedikit dikarenakan butuh banyak dependency dan jangan lupa hidupakan internet anda.

Generate Project Ruby On Rails

Untuk membuat project Ruby On rails sangatlah gampang, jalankan perintah berikut.

rails new Belajar-RubyOnRails

Perintah diatas akan membuat sebuah project dengan nama projectnya Belajar-RubyOnRails. Setelah membuat project, selanjutnya kita mendownload dependency yang dibutuhkan oleh project kita. Masuk ke folder project atau root project lalu jalankan perintah berikut.

bundle install

untuk mengupdate library juga dapat dilakukan dengan perintah.

bundle update

Untuk menjalankan aplikasinya, jalankan perintah rails server maka server rails akan jalan pada port 3000. Buka browser lalu hit pada localhost:3000. Berikut gambar ketika server dijalankan.

Screenshot from 2015-07-25 22:14:15.png

Oke sekilas kita telah dapat menggunakan ruby on rails, kita akan memulai dengan basic CRUD pada ror.

ror merupakan salah satu framework yang bersifat mvc, maka kita membutuhkan view, controller dan model. kita akan mulai dari controller. ror menyediakan fitur scaffolding sehingga kita dapat generate controller melalui terminal. jalankan perintah berikut.

rails generate controller bukus index

Pada tutorial ini, kita akan menggunakan contoh data buku. Oke selanjutnya adalah memasukkan library twitter bootstrap ke project, kita akan menggunakan gem, buka file Gemfile pada root project dan sisipkan sintak.

gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'autoprefixer-rails'

Setiap tambah atau ganti gem maka jangan lupa lakukan update dengan perintah bundle install atau bundle update. Buka file application.css yang ada dalam folder app/assets/stylesheets, ganti nama file tersebut dengan application.css.sass. Kemudian import library bootstrap ke dalam file application.css.sass dengan sintak.

@import "bootstrap-sprockets"
@import "bootstrap"

Bootstrap juga punya library dalam bentuk javascript maka kita butuh import juga ke javascript. Buka file application.js pada folder app/assets/javascripts dan sisipkan.

//= require bootstrap-sprockets

Untuk mengecek bootstrap maka buka file index.html.erb pada folder app/views/bukus Kemudian sisipkan sintak berikut.

<button class="btn btn-default">cek</button>

Silahkan jalankan server kembali, untuk melihat urlnya ada di file routes.rb di dalam folder config. Secara default, urlnya berada pada http://localhost:3000/bukus/index. Jika anda ingin melihat routes semua url maka gunakan perintah rake routes.

Oke kita akan memulai generate model, untuk generate model jalankan perintah berikut.

rails generate model buku idBuku:string judulBuku:string namaPengarang:string penerbit:string tahunTerbit:integer

Perintah diatas akan membuat sebuah file ruby dengan nama buku. untuk idBuku, judulBuku, namaPengarang, penerbit dan tahunTerbit merupakan kolom pada basis data yang akan digenerate nantinya. Jika ingin melihat strukturnya ada pada folder db/migrate. Untuk membuat tabel pada basis data silahkan jalankan perintah rake db:migrate.

Setelah berhasil dengan model, kita lanjut untuk membuat konfigurasi controllernya. Buka file bukus_controller.rb yang ada di dalam folder app/controllers, Kemudian masukkan sintak berikut.

class BukusController < ApplicationController

  def index
    @bukus = Buku.all
  end

  def show
    @buku = Buku.find(params[:id])
  end

  def new
    @buku = Buku.new
  end

  def create
    @buku = Buku.new(buku_params)

    if @buku.save
      redirect_to bukus_path
    else
      render 'new'
    end

  end

  def edit
    @buku = Buku.find(params[:id])
  end

  def update
    @buku = Buku.find(params[:id])

    if @buku.update(buku_params)
      redirect_to bukus_path
    else
      render 'edit'
    end

  end

  def destroy
    @buku = Buku.find(params[:id])
    @buku.destroy
    redirect_to bukus_path
  end

  private
    def buku_params
      params.require(:buku).permit(:idBuku, :judulBuku, :namaPengarang, :penerbit, :tahunTerbit)
    end

end

Penulis akan menjelaskan beberapa fungsi sintak diatas.

  • fungsi dari def adalah untuk mendeklarasikan sebuah function atau fungsi pada ruby.
  • @bukus merupakan variabel yang diisi dengan nilai data seluruh buku. Data tersebut diperoleh dari Buku.all.
  • Pada bagian method show kita akan menampilkan 1 object saja. Untuk mengambil object berdasarkan id maka kita gunakan sintak Buku.find(params[:id]).
  • Method new berfungsi untuk redirect page baru sekalian membuat sebuah object baru.
  • Method create berfungsi untuk melakukan penyimpanan data pada basis data. Jika data telah tersimpan maka akan dilakukan redirect ke index page.
  • Method edit sama seperti method new hanya saja, method edit mengambil berdasarkan id tanpa membuat object baru.
  • Method Update sama seperti method create, berbeda pada saat melakukan pengambilan object berdasarkan id.
  • Method destroy berfungsi untuk menghapus data. Dilakukan pengambilan object terlebih dahulu baru dilakukan penghapusan data.

Lumayan panjang juga, oke lanjut ke bagian view. View pada ror dapat melakukan import antar page, kita akan membuat default page terlebih dahulu, dimulai dari _navigation.erb.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        Belajar Ruby On Rails
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

diatas adalah codingan untuk navigator sebuah web aja. selanjutnya kita membuat sebuah form, buat sebuah file _form.erb lalu masukkan sintak berikut.

<div class="container">
  <div class="row">
    <%= form_for(@buku) do |buku| %>

        <div class="form-group">
          <%= buku.label :ID_Buku %>
          <%= buku.text_field :idBuku, class:'form-control', type: 'text', placeholder: 'ID Buku' %>
        </div>

        <div class="form-group">
          <%= buku.label :Judul_Buku %>
          <%= buku.text_field :judulBuku, class:'form-control', type: 'text', placeholder: 'Judul Buku' %>
        </div>

        <div class="form-group">
          <%= buku.label :Nama_Pengarang %>
          <%= buku.text_field :namaPengarang, class:'form-control', type: 'text', placeholder: 'Nama Pengarang' %>
        </div>

        <div class="form-group">
          <%= buku.label :Penerbit %>
          <%= buku.text_field :penerbit, class:'form-control', type: 'text', placeholder: 'Penerbit' %>
        </div>

        <div class="form-group">
          <%= buku.label :Tahun_Terbit %>
          <%= buku.text_field :tahunTerbit, class:'form-control', type: 'number', placeholder: 'Tahun Terbit' %>
        </div>

        <%= buku.submit :Save, class:'btn btn-success' %>

    <% end %>
  </div>
</div>

Berikut adalah penjelasan tentang codingan diatas.

  • <%= form_for(@buku) do |buku| %> merupakan sintak ruby, sintak ini berfungsi untuk melakukan render sebuah object @buku yang telah di deklarasikan pada controller.
  • <%= buku.label :ID_Buku %> berfungsi sebagai label
  • <%= buku.text_field :idBuku %> berfungsi sebagai text field yang nantinya dapat diinput oleh user.
  • <%= buku.submit :Save %> berfungsi sebagai button agar dapat disubmit.

Buatlah file new.html.erb dan edit.html.erb di dalam folder app/views/bukus kemudian masukkan sintak.

<%= render 'navigation' %>

<%= render 'form' %>

Codingan diatas berfungsi untuk melakukan render terhadap page navigation dan form yang telah kita buat tadi atau bahasa kerennya kita include pagenya. Oke selanjutnya kita akan membuat sebuah page detail. Sama seperti tadi buat sebuah file show.html.erb dan masukkan kodingan berikut.

<%= render 'navigation' %>

<div class="container">
  <div class="row">
    <%= form_for(@buku) do |buku| %>

        <div class="form-group">
          <%= buku.label :ID_Buku %>
          <%= buku.text_field :idBuku, class:'form-control', type: 'text', placeholder: 'ID Buku', disabled: true %>
        </div>

        <div class="form-group">
          <%= buku.label :Judul_Buku %>
          <%= buku.text_field :judulBuku, class:'form-control', type: 'text', placeholder: 'Judul Buku', disabled: true %>
        </div>

        <div class="form-group">
          <%= buku.label :Nama_Pengarang %>
          <%= buku.text_field :namaPengarang, class:'form-control', type: 'text', placeholder: 'Nama Pengarang', disabled: true %>
        </div>

        <div class="form-group">
          <%= buku.label :Penerbit %>
          <%= buku.text_field :penerbit, class:'form-control', type: 'text', placeholder: 'Penerbit', disabled: true %>
        </div>

        <div class="form-group">
          <%= buku.label :Tahun_Terbit %>
          <%= buku.text_field :tahunTerbit, class:'form-control', type: 'number', placeholder: 'Tahun Terbit', disabled: true %>
        </div>

    <% end %>
  </div>
</div>

Codingan tersebut sama seperti dengan form pada page new dan edit hanya berbeda pada setiap text field akan disable berikut perintah disable ada di disabled: true. Dan yang terakhir adalah file index.html.erb merupakan page awal yang akan berisi tentang data. Masukkan codingan berikut.

<%= render 'navigation' %>

<div class="container">
  <div class="row">
    <%= link_to 'Tambah Data', new_buku_path, class: 'btn btn-default' %>
    <p></p>
    <table class="table table-bordered table-hover table-responsive">
      <thead>
      <tr>
        <th class="text-center">Id Buku</th>
        <th class="text-center">Judul Buku</th>
        <th class="text-center">Nama Pengarang</th>
        <th class="text-center">Penerbit</th>
        <th class="text-center">Tahun Terbit</th>
        <th class="text-center">Aksi</th>
      </tr>
      </thead>
      <tbody>
      <% @bukus.each do |buku| %>
          <tr>
            <td><%= buku.idBuku %></td>
            <td><%= buku.judulBuku %></td>
            <td><%= buku.namaPengarang %></td>
            <td><%= buku.penerbit %></td>
            <td><%= buku.tahunTerbit %></td>
            <td class="text-center">
              <%= link_to 'Detail', buku_path(buku), class: 'btn btn-default' %>
              <%= link_to 'Edit', edit_buku_path(buku), class: 'btn btn-success' %>
              <%= link_to 'Delete',buku_path(buku), method: :delete, data: {confirm: 'Data Dihapus ? '}, class: 'btn btn-danger' %>
            </td>
          </tr>
      <% end %>
      </tbody>
    </table>
  </div>
</div>

Sedikit penjelasan dari codingan diatas.

  • <%= link_to 'Tambah Data' %> berfungsi sebagai button tambah data yang akan melakukan redirect page ke new page.
  • @bukus.each do |buku| berfungsi untuk melakukan render data pada tabel html. @bukus merupakan variabel yang terdapat di controller yang berisi data - data buku.
  • <%= buku.idBuku %> berfungsi untuk menampilkan data yang berbentuk array ke dalam tabel - tabel html.
  • <%= link_to 'Detail' %> merupakan sebuah button detail untuk menampilkan detail data.
  • <%= link_to 'Edit' %> merupakan sebuah button edit untuk redirect ke page edit.
  • <%= link_to 'Delete' %> meruapkan sebuah button delete untuk menghapus data. sebelum menghapus akan ada muncuk tampilan info validasi penghapusan data.

Akhirnya selesai juga, sekarang kita lakukan testing Berikut tampilan halaman awalnya.

Screenshot from 2015-07-27 11:14:10

Tampilan form untuk insert data baru

Screenshot from 2015-07-27 11:14:00.png

Tampilan detail data buku

Screenshot from 2015-07-27 11:14:14.png

Tampilan delete data buku

Screenshot from 2015-07-27 11:14:34.png

Sekian tutorial belajar Ruby On Rails dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Ruby On Rails.