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

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

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

Kita mulai dengan membuat project melalui terminal seperti berikut.

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

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

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

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

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

    <dependencies>

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

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

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

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

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

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

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

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

package com.rizki.mufrizal.belajarSpringMVCHibernate.domain;

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

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

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

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

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

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

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

    //getter
    //setter

}

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

package com.rizki.mufrizal.belajarSpringMVCHibernate.repository;

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

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

public interface MakananRepository {

    public void save(Makanan makanan);

    public void update(Makanan makanan);

    public void delete(Makanan makanan);

    public Makanan getMakanan(String idMakanan);

    public List<Makanan> getMakanans();
}

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

package com.rizki.mufrizal.belajarSpringMVCHibernate.repository;

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

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

@Repository
public class MakananRepositoryImpl implements MakananRepository {

    @Autowired
    private SessionFactory sessionFactory;

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

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

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

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

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

}

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

package com.rizki.mufrizal.belajarSpringMVCHibernate.service;

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

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

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

    @Autowired
    private MakananRepository makananRepository;

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

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

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

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

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

}

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

package com.rizki.mufrizal.belajarSpringMVCHibernate.controller;

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

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

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

    @Autowired
    private MakananService makananService;

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

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

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

        return m;
    }

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

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

        return m;
    }

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

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

        return m;
    }

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</beans>

Berikut adalah penjelasan singkatnya.

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

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

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

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

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

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

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

</web-app>

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

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

log4j.rootLogger=DEBUG, file, stdout

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

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

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

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

Kemudian uji coba dengan menggunakan method GET untuk mengambil data

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

Kemudian uji coba dengan menggunakan method PUT untuk merubah data

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

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

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

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

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

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

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

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

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

Instalasi Android

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

sudo gedit /etc/environment

kemudian masukkan variabel berikut pada bagian atas

ANDROID_HOME=/home/rizki/Android/Sdk

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

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

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

Instalasi Ionic

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

npm install -g cordova ionic

tunggu hingga instalasi selesai.

Membuat Sebuah Aplikasi Android

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

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

Jalankan perintah berikut untuk membuat aplikasi android dengan ionic.

ionic start Belajar-Ionic blank

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

ionic platform add android

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

ionic run

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

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

ionic serve

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

Membuat File APK

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

cordova build --release android

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

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

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

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

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

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

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

Instalasi File APK Ke Device Android

Install Ke Emulator Android

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

adb install Belajar-Ionic.apk

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

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

Install Ke Device Android

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

adb devices

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

Kemudian install ke device dengan perintah

adb install Belajar-Ionic.apk

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

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.