noprianto
noprianto
. 6 min read

Membangun Aplikasi Web Consume REST API

Bismillah,
Pada kesempatan yang lalu saya telah menulis tentang cara membuat aplikasi web menggunakan Spring Boot, pada kesempatan kali ini masih sama yaitu membangun aplikasi web juga menggunakan tool yang sama. Perbedaannya adalah jika yang sebelumnya manipulasi data dilakukan pada aplikasi tersebut, yang akan ditulis sekarang dihandle oleh web service. Beberapa point yang akan kita bahas adalah sebagai berikut

Tampilan Utama

Konfigurasi Spring Boot

Untuk konfigurasi sendiri lebih sederhana daripada ketika business proses terletak pada aplikasi, beberapa yang dibutuhkan adalah sebagai berikut

  • spring-boot-starter-thymeleaf; paket ini digunakan untuk template engine atau view pada aplikasi yang akan kita buat, nanti dikombinasikan dengan html.
  • spring-boot-starter-web; sebuah paket untuk development aplikasi web
  • spring-data-commons; menyediakan class untuk proses paging
  • thymeleaf-spring-data-dialect; mendukung fungsi untuk paging, digunakan untuk menangkap paging dari controller kemudian diterjemahkan dalam sebuah view

Jika diterjemahkan dalam sebuah file pom.xml, isinya adalah sebagai berikut

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-commons</artifactId>
        </dependency>
        <dependency>
            <groupId>io.github.jpenren</groupId>
            <artifactId>thymeleaf-spring-data-dialect</artifactId>
            <version>3.4.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

Selain file pom.xml, konfigurasi yang dibutuhkan adalah pada file application.properties pada folder resources. Isinya seperti di bawah ini

server.port=8083
server.rest=http://localhost:8082

server.port adalah port yang digunakan untuk menjalankan aplikasi, sedangkan server.rest merupakan service yang akan diakses oleh aplikasi ini.

Membuat DTO

DTO atau kepanjangan dari Data Transfer Object merupakan sebuah class untuk menampung hasil request dari sebuah service. Misalkan jika pada sebuah service terdapat entitas Mahasiswa, di dalam DTO juga terdapat Mahasiswa. Pada DTO tidak perlu membuat anotasi @Entity karena sifatnya hanya penampung, contoh penggunaannya adalah sebagai berikut

@Data
public class Mahasiswa {
    private String id;
    private String nim;
    private String nama;
    private String jurusan;
    private float ipk;
}

Anotasi yang digunakan hanya @Data, untuk menyediakan method getter dan setter saja.

Membuat Service

Service merupakan sebuah class yang berfungsi untuk melakukan akses service atau API, nanti service ini dipanggil oleh sebuah controller. Penerapannya adalah sebagai berikut

@Service
@Slf4j
public class MahasiswaRestClient {
    @Autowired
    private RestTemplate restTemplate;
    @Value(value = "${server.rest}")
    private String restServer;

    public Page<Mahasiswa> getMahasiswas(String param) {
        ParameterizedTypeReference<RestResponsePage<Mahasiswa>> ptr =
                new ParameterizedTypeReference<RestResponsePage<Mahasiswa>>() {
                };
        return restTemplate.exchange(restServer + "/api/mahasiswa" + (param == null ? "" : "?" + param), HttpMethod.GET, null, ptr).getBody();
    }

    public Mahasiswa getMahasiswa(String id) {
        return restTemplate.getForObject(restServer + "/api/mahasiswa/{id}", Mahasiswa.class, id);
    }

    public boolean insert(Mahasiswa mahasiswa) throws HttpStatusCodeException {
        try {
            HttpEntity<Mahasiswa> mahasiswaHttpEntity = new HttpEntity<>(mahasiswa);
            ResponseEntity<String> response = restTemplate.exchange(restServer + "/api/mahasiswa", HttpMethod.POST, mahasiswaHttpEntity, String.class);
            log.info("" + response.getStatusCode().value());
            log.info("" + response.getBody());
            return (HttpStatus.CREATED.value() == response.getStatusCodeValue());
        } catch (HttpStatusCodeException e) {
            throw e;
        }
    }

    public boolean delete(String id) throws HttpStatusCodeException {
        try {
            ResponseEntity<String> response = restTemplate.exchange(restServer + "/api/mahasiswa/{id}", HttpMethod.DELETE, null, String.class, id);
            log.info("" + response.getStatusCode().value());
            return (HttpStatus.OK.value() == response.getStatusCodeValue());
        } catch (HttpStatusCodeException e) {
            throw e;
        }
    }
}

Secara berurutan penjelasannya adalah sebagai berikut

  • @Service; sebuah anotasi untuk memberitahukan Spring bahwa class tersebut harus dilakukan scaning, atau class tersebut berarti terdapat anotasi Spring yang lain untuk fungsi tertentu.
  • @Slf4j; digunakan untuk logger, anotasi tersebut disediakan oleh depedensi Lombok.
  • @Autowire; untuk menginjek sebuah objek, dalam hal ini adalah objek restTemplate. Karena objek restTemplate adalah class bawaan Spring sehingga kita harus membuatkan sebuah Bean, nanti akan kita bahas terkait itu.
  • @Value(value = "${server.rest}"); digunakan untuk membaca konfigurasi yang terdapat pada file application.properties dengan tag property "server.rest"

iso yo,,haha, kudune pancen ditangkep nganggo jaring sek pas..nek default cok ra paham.

Inti dari pernyataan di atas adalah untuk menggunakan catch harus menggunakan catch yang sesuai, misalkan penerapan di atas menggunakan HttpStatusCodeException. Ketika sebelumnya menggunakan Exception, saya selalu gagal mengambil error code dan error message. 🙂

temen telegram

Membuat Controller

Controller merupakan pintu masuk dari sebuah request, berfungs untuk memproses request ataupun mengembalikan reqeust. Ketika memproses request untuk meminta sebuah data, controller akan berhubungan pada sebuah class service. Seperti dicontohkan potongan program di bawah ini

@PostMapping("/mahasiswa/form")
    public String editMahasiswa(@ModelAttribute @Valid Mahasiswa mahasiswa, BindingResult errors, SessionStatus status) {
        log.info(mahasiswa.toString());
        log.info(errors.toString());
        log.info("" + errors.hasErrors());
        log.info("" + errors.hasGlobalErrors());
        try {
            mahasiswaRestClient.insert(mahasiswa);
            status.setComplete();
            return "redirect:/";
        } catch (HttpStatusCodeException e) {
            ResponseEntity<String> response = ResponseEntity.status(e.getStatusCode()).headers(e.getResponseHeaders()).body(e.getResponseBodyAsString());
            log.error(response.getBody());
            log.error("" + response.getStatusCodeValue());
            errors.reject("error.object", response.getBody());
        }
        return "/mahasiswa/form";
    }

Potongan kode di atas digunakan untuk menerima request dari view, berfungsi untuk edit data ataupun menyimpan data. @ModelAttribute menandakan bahwa terdapat parameter sebuah objek yaitu Mahasiswa, sedangkan @Valid berfungsi untuk memvalidasi sebuah objek yang dilewatkan. Objek errors berfungsi untuk menampung error jika terdapat error dan objek status untuk menampung data session status. Nilai balik dari method tersebut adalah String, ketika berhasil insert data maka akan dikembalikan ke halaman index sedangkan jika gagal insert akan tetapi di form yang sama dengan menampilkan errornya apa.

Membuat View

Untuk view sendiri sebenarnya tidak banyak perubahan dengan postingan saya yang sebelumnya, karena untuk view-nya memang tetap. Perbedaan sedikit hanya bagian action ketika klik tombol tertentu, misalkan seperti pada potongan kode pada file index.html di bawah ini

<form method="get" th:action="@{'/mahasiswa/detail_form/'+${mhs.id}}" class="d-inline">
                    <button type="submit" class="btn btn-link btn-sm">Detail</button>
                </form>

Kode di atas adalah sebuah form yang di dalamnya terdapat sebuah tombol, ketika tombol tersebut diklik akan melakukan sebuah aksi yaitu menampilkan detail mahasiswa. Method yang diakses GET dengan path variabel. Kode lengkap dapat didapatkan di sini. 🙂

Demikianlah artikel saya tentang membangun sebuah aplikasi web menggunakan Spring Boot, dengan data yang diperoleh dari sebuah web service. Semoga menambah ilmu baru dan menimbulkan semangat terus untuk belajar java. Kritik dan saran sangat diharapkan untuk membantu saya untuk memperbaiki tulisan pada blog ini. ^_^

Referensi

comments powered by Disqus