Panduan Workshop Membangun User Interface lebih interaktif dengan ReactJS dan Postgresql

BUKU PANDUAN WORKSHOP 12 JP MEMBANGUN USER INTERFACE LEBIH INTERAKTIF DENGAN REACTJS DAN POSTGRESQL DENGAN BACKEND SPRINGBOOT PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI TEKNOLOGI INFORMASI NIIT JAKARTA 2021

KATA PENGANTAR Bismillahirrahmaanirrahiim Dengan senantiasa memanjatkan puji syukur Alhamdu lillah atas ridho, taufiq, hidayah dan inayah-Nya kita selalu dalam keadaan sehat wal afiat, sehingga kita dapat melaksanakan berbagai aktivitas sebagaimana mestinya, aamiin yaa Rabbal’alamiin. Sholawat dan salam semoga terlimpah kepada Nabi Muhammad SAW, keluarga, sahabat dan seluruh pengikutnya ilaa yaumil-qiyamah. Kegiatan ini merupakan salah satu dari unsur pendidikan dalam pengembangan skill bagi para peserta untuk mengembangkan keilmuan di bidang bahasa pemrograman dan basis data dan juga atas dorongan penugasan dari pimpinan STTI NIIT yang telah memberikan persetujuan untuk dapat aktif dalam mengembangkan keilmuan dan keterampilan melalui kegiatan workshop ini. Disamping itu, tentu atas izin dan ridho Allah SWT yang telah memberikan rahmah, taufiq dan ridha-Nya kepada penulis, sehingga penulis dapat melaksanakan seluruh proses kegiatan ini dapaat berjalan dengan baik, lancar dan dapat penulis selesaikan dengan baik dan penuh tanggung jawab sebagaimana mestinya. Kepada semua pihak yang telah berpartisipasi aktif dan mendukung kegiatan ini, khususnya para pimpinan STTI NIIT, rekan sejawat, dan para peserta tentunya, penulis mengucapkan terima kasih serta do’a jazaakumullahu ahsanal-jaza’. Aamiin yra. Apabila dalam melaksanakan proses kegiatan workshop ini terdapat kesalahan, kekurangan dan kekhilafan, penulis memohon maaf dan sekaligus memohon koreksi dan masukan-masukan yang baik, guna perbaikan dan penyempurnaan dalam kegiatan workshop berikutnya. Wassalaamu’alaikum warahmatullahi wa barakatuh. Penulis, (Tim )

Membangun User Interface lebih interaktif dengan ReactJS dan Postgresql dengan backend Springboot. Pengenalan React React adalah sebuah library yang dibuat oleh Facebook (Meta) untuk membuat UI pada platform Web (ReactJs) dan Mobile (React Native). Kebanyakan orang menyebutnya sebagai framework, tapi secara teknis, React merupakan library untuk membuat User Interface (UI). Reactjs ditemukan oleh Jordan Walke yang merupakan karyawan Facebook. Ia merilis prototipe pertama di tahun 2011 dengan nama “FaxJS” dan terinspirasi dari XHP (komponen library HTML dari PHP). Persiapan untuk belajar Reactjs 1. Web Browser (disarankan Chrome) 2. Text Editor (Visual Studio Code) 3. NodeJS dan NPM Lifecycle ReactJS Sumber : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Instalasi Visual Studio Code. Untuk dapat melakukan instalasi VS Code, kita dapat mendownload nya dari situs https://code.visualstudio.com/ Disarankan pilih Other downloads Dan pilih System Installer Untuk extentions yang dibutuhkan, 1. Extension Pack for Java 2. Maven for Java 3. Language Support for Java(TM) by Red Hat 4. Lombok Annotations Support for VS Code 5. Spring Boot Extension Pack 6. Visual Studio IntelliCode 7. Spring Boot Dashboard

Instalasi NodeJS dan NPM Untuk dapat menggunakan Reactjs, kita harus download NodeJS sebagai runtime engine dan NPM sebagai package manager. Download di https://nodejs.org/en/ Lalu pilih versi LTS. Build Project ReactJs Untuk build project Reactjs, dapat menggunakan command di terminal / command prompt, dengan perintah : npx create-react-app <nama_project> Adapun struktur folder nya adalah sebagai berikut (mengutip https://www.petanikode.com) • ������ node_modules berisi paket-paket modul Nodejs; • ������ public berisi file untuk publik seperti HTML, CSS, icon, dan gambar; o ������ index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen • ������ src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen; o ������ App.js berisi kode untuk komponen App atau komponen inti dari aplikasi; o ������ App.test.js berisi kode untuk testing komponen App; o ������ index.js berisi kode untuk render komponen App ke Real DOM; o ������ serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps); o ������ setTests.js berisi kode untuk testing aplikasi. • ������ .gitignore berisi kode-kode yang akan diabaikan oleh Git. • ������ package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan. • ������ yarn.lock adalah file yang digunakan Yarn untuk mengunci versi-versi modul Nodejs yang digunakan. Untuk menjalakannya, dapat menggunakan perintah berikut : npm start

Pengenalan Database Postgresql PostgreSQL adalah sistem database objek-relasional open source yang sangat kuat, dimana memiliki lebih dari 15 tahun fase pengembangan aktif dan arsitektur yang terbukti membuatnya mendapatkan reputasi yang baik untuk keandalan, integritas data, dll. Apa itu PostgreSQL? PostgreSQL (diucapkan dengan post-gress-QL ) adalah sistem manajemen basis data relasional (DBMS) open source yang dikembangkan oleh tim sukarelawan sedunia. PostgreSQL tidak dikontrol oleh korporasi atau entitas swasta lainnya dan kode sumber tersedia secara gratis. Fitur Utama dari PostgreSQL PostgreSQL berjalan pada semua sistem operasi, termasuk Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64), dan Windows. Ini mendukung teks, gambar, suara, dan video, dan termasuk antarmuka pemrograman untuk C / C ++, Java, Perl, Python, Ruby, Tcl dan Open Database Connectivity (ODBC). PostgreSQL mendukung empat bahasa prosedural standar, yang memungkinkan pengguna untuk menulis kode mereka sendiri dalam salah satu bahasa pemrograman dan itu dapat dieksekusi oleh server database PostgreSQL. Diantaranya adalah - Perl, Python, pgSQL. Selain itu, bahasa prosedural non-standar lainnya seperti PHP, V8, Ruby, Java, dll. Instalasi Postgresql Untuk dapat menggunakan Postgresql, kita dapat mendowload di https://www.postgresql.org/ atau langsung ke situs downloader nya https://www.enterprisedb.com/downloads/postgres-postgresql- downloads atau https://www.enterprisedb.com/download-postgresql-binaries Bila instalasi terlalu lama, bisa coba register di https://scalegrid.io/ dan pilih opsi Free for 30 Days.

Pengenalan Springboot Springboot adalah salah satu framework Spring dengan konfigurasi minimal ketika akan membangun aplikasi Java. Untuk dapat memulai project Spring Boot dengan Spring Initializr, langkah awal yang dapat dilakukan adalah melakukan konfigurasi melalui browser. Silakan menuju ke halaman website https://start.spring.io/ tampilannya adalah sebagai berikut Berikut penjelasannya, Project: build tool yang akan digunakan dalam project, dipilih sesuai preferensi masing-masing. Language: bahasa pemrograman yang akan digunakan. Spring Boot: versi Spring Boot yang digunakan dalam project. Project Metadata: hal ini terkait dengan nama folder, penamaan mirip dengan sebuah domain tetapi membacanya dari belakang. Depedencies: library-library yang dibutuhkan. Packaging; output dari aplikasi kita yang akan dibangun. Java; versi Java yang digunakan, defaultnya adalah Java.

Memulai Project Reactjs dengan Database Postgresql dan Backend Springboot Di dalam tutorial ini, kita akan belajar develop aplikasi full-stack yang akan melibatkan 1. Frontend Reactjs 2. Backend API Springboot 3. Database Postgresql Dengan kemampuan untuk melakukan operasi CRUD (Create-Read-Update-Delete) Adapun arsitekturnya ada sebagai berikut,

Berikut hasil akhir yang diharapkan, Langkah Pertama Initiate Backend Berikut merupakan endpoint atau URL API yang akan kita bangun, 1. Buka https://start.spring.io/ Isi dengan data berikut

2. Lengkapi dependency-nya sebagai berikut, 3. Klik tombol Generate, 4. Temukan file hasil generate yang telah ter-download (biasanya ada di folder Downloads)

5. Buat folder baru di Documents dengan nama project-reactjs-crud 6. Copy dan Paste file yang telah ter-download di folder project-reactjs-crud 7. Extract file tersebut, dan buka dengan Visual Studio Code. 8. Di VS Code, pilih File > Open Folder … 9. Cari folder nya, 10. Klik Select Folder 11. Setelah folder di pilih, VS Code akan mengkonfirmasi, silahkan pilih : Yes, I trust

12. Edit file application.properties, 13. Dengan value berikut,

spring.datasource.url = jdbc:postgresql://SG-dev-2601-pgsql- master.servers.mongodirector.com:5432/employee spring.datasource.username = sgpostgres spring.datasource.password = YNl$LNm0k0CphBTf spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect spring.jpa.hibernate.ddl-auto = update Create Database 14. Sebagai catatan, untuk koneksi ke database, bisa dengan local database postgresql yang sudah ter-install atau melalui cloud. Bila teman-teman merasa kecepatan download di tempat masing-masing kurang kencang, bisa melalui cloud dengan mendaftar terlebih dahulu melalui web https://scalegrid.io/ dan klik Try Free for 30 Days Pilih Sign up with Google, masukan akun Google dan password nya

ScaleGrid akan melakukan konfigurasi. Pilih pilihan default saja (Postgresql dan Digital Ocean) Ketik dev sebagai Instance Postgresql nya, lalu klik Next

Klik Next saja, karena untuk Akun Free, pilihannya hanya satu saja. Klik Open to Current IP, dan Next

Klik Create dan tunggu 15 – 20 Menit. Develop Backend 1. Buatlah folder/package di dalam folder reactjsdemo dengan nama model. Folder model sebagai penampung dari class yang akan di mapping ke Table di database

2. Di dalam folder model, create satu class dengan nama Employee.java package id.ac.itech.reactjsdemo.model; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import lombok.Getter; import lombok.Setter; @Entity @Getter@Setter public class Employee { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String firstName; private String lastName; private String emailId; } 3. Di dalam folder reactjsdemo, buat folder/package lagi, dengan nama repository 4. Buat interface di dalam folder repository, dengan nama EmployeeRepository.java import id.ac.itech.reactjsdemo.model.Employee; @Repository public interface EmployeeRepository extends JpaRepository<Employee, Long>{ } 5. Kemudian, buat lagi folder di dalam reactjsdemo, dengan nama exception

6. Buat class, di dalam folder exception, dengan nama ResourceNotFoundException.java import org.springframework.web.bind.annotation.ResponseStatus; @ResponseStatus(value = HttpStatus.NOT_FOUND) public class ResourceNotFoundException extends RuntimeException{ private static final long serialVersionUID = 1L; public ResourceNotFoundException(String message){ super(message); } } 7. Buat folder lagi, di dalam reactjsdemo, dengan nama controller 8. Buat class di dalam folder controller, dengan nama EmployeeController.java package id.ac.itech.reactjsdemo.controller;

import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.DeleteMapping; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.PutMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import id.ac.itech.reactjsdemo.exception.ResourceNotFoundException; import id.ac.itech.reactjsdemo.model.Employee; import id.ac.itech.reactjsdemo.repository.EmployeeRepository; @CrossOrigin(origins = \"http://localhost:3000\") @RestController @RequestMapping(\"/api/v1/\") public class EmployeeController { @Autowired private EmployeeRepository employeeRepository; // get all employees @GetMapping(\"/employees\") public List<Employee> getAllEmployees(){ return employeeRepository.findAll(); } // create employee rest api @PostMapping(\"/employees\") public Employee createEmployee(@RequestBody Employee employee) { return employeeRepository.save(employee); } // get employee by id rest api @GetMapping(\"/employees/{id}\") public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id) { Employee employee = employeeRepository.findById(id) .orElseThrow(() -> new ResourceNotFoundException(\"Employee not exist with id :\" + id)); return ResponseEntity.ok(employee); } // update employee rest api @PutMapping(\"/employees/{id}\") public ResponseEntity<Employee> updateEmployee(@PathVariable Long id, @RequestBody Employee employeeDetails){ Employee employee = employeeRepository.findById(id) .orElseThrow(() -> new ResourceNotFoundException(\"Employee not exist with id :\" + id)); employee.setFirstName(employeeDetails.getFirstName()); employee.setLastName(employeeDetails.getLastName()); employee.setEmailId(employeeDetails.getEmailId()); Employee updatedEmployee = employeeRepository.save(employee); return ResponseEntity.ok(updatedEmployee); } // delete employee rest api @DeleteMapping(\"/employees/{id}\") public ResponseEntity<Map<String, Boolean>> deleteEmployee(@PathVariable Long id){ Employee employee = employeeRepository.findById(id) .orElseThrow(() -> new ResourceNotFoundException(\"Employee not exist with id :\" + id));

employeeRepository.delete(employee); Map<String, Boolean> response = new HashMap<>(); response.put(\"deleted\", Boolean.TRUE); return ResponseEntity.ok(response); } } 9. Final struktur folder, sebagai berikut, 10. Bila sudah sesuai, springboot akan kita coba running, buka Terminal di VS Code 11. Klik icon berikut [SPRING BOOT DASHBOARD]

12. Pastikan aplikasi telah berjalan, dengan cek log berikut, [Tomcat started xxx] 13. Dan table di DB sudah terbentuk.

Langkah Kedua Initiate Frontend Berikut merupakan final design untuk Frontend 1. Buka cmd dan masuk ke folder project-reactjs-crud 2. Ketik : npx create-react-app frontend 3. Tunggu sampai download package dari NPM selesai

4. Buka folder react yang barusan kita build dengan VS Code. 5. Supaya Reactjs berjalan, kita perlu menambah library [email protected], axios, react-router- [email protected] 6. Cara menambah library, di terminal, ketik npm install axios 7. Untuk bootstrap, lakukan hal serupa. 8. Setelah bootstrap selesai di install, tambahkan syntax di bawah di file src/index.js import 'bootstrap/dist/css/bootstrap.min.css'; 9. Setelah selesai semua, kita mulai develop Frontend. Develop Frontend 1. Buat struktur folder seperti berikut,

2. Buat class component di folder Services, dengan nama EmployeeService.js import axios from 'axios'; const EMPLOYEE_API_BASE_URL = \"http://localhost:8080/api/v1/employees\"; class EmployeeService { getEmployees(){ return axios.get(EMPLOYEE_API_BASE_URL); } createEmployee(employee){ return axios.post(EMPLOYEE_API_BASE_URL, employee); } getEmployeeById(employeeId){ return axios.get(EMPLOYEE_API_BASE_URL + '/' + employeeId); } updateEmployee(employee, employeeId){ return axios.put(EMPLOYEE_API_BASE_URL + '/' + employeeId, employee); } deleteEmployee(employeeId){ return axios.delete(EMPLOYEE_API_BASE_URL + '/' + employeeId); } } export default new EmployeeService() 3. Buat class component di folder components, dengan nama FooterComponent.js import React, { Component } from 'react' class FooterComponent extends Component { constructor(props) { super(props) this.state = { } } render() { return ( <div> <footer className = \"footer\"> <span className=\"text-muted\">All Rights Reserved 2020 @JavaGuides</span> </footer> </div> ) } } export default FooterComponent 4. Buat class component di folder components, dengan nama HeaderComponent.js import React, { Component } from 'react' class HeaderComponent extends Component { constructor(props) { super(props) this.state = { } }

render() { return ( <div> <header> <nav className=\"navbar navbar-expand-md navbar-dark bg- dark\"> <div><a href=\"https://javaguides.net\" className=\"navbar- brand\">Employee Management App</a></div> </nav> </header> </div> ) } } export default HeaderComponent 5. Buat class component di folder components, dengan nama ListEmployeeComponent.js import React, { Component } from 'react' import EmployeeService from '../services/EmployeeService' class ListEmployeeComponent extends Component { constructor(props) { super(props) this.state = { employees: [] } this.addEmployee = this.addEmployee.bind(this); this.editEmployee = this.editEmployee.bind(this); this.deleteEmployee = this.deleteEmployee.bind(this); } deleteEmployee(id){ EmployeeService.deleteEmployee(id).then( res => { this.setState({employees: this.state.employees.filter(employee => employee.id !== id)}); }); } viewEmployee(id){ this.props.history.push(`/view-employee/${id}`); } editEmployee(id){ this.props.history.push(`/add-employee/${id}`); } componentDidMount(){ EmployeeService.getEmployees().then((res) => { this.setState({ employees: res.data}); }); } addEmployee(){ this.props.history.push('/add-employee/_add'); } render() { return ( <div> <h2 className=\"text-center\">Employees List</h2> <div className = \"row\"> <button className=\"btn btn-primary\" onClick={this.addEmployee}> Add Employee</button> </div> <br></br> <div className = \"row\"> <table className = \"table table-striped table- bordered\"> <thead> <tr> <th> Employee First Name</th>

<th> Employee Last Name</th> <th> Employee Email Id</th> <th> Actions</th> </tr> </thead> <tbody> { this.state.employees.map( employee => <tr key = {employee.id}> <td> { employee.firstName} </td> <td> {employee.lastName}</td> <td> {employee.emailId}</td> <td> <button onClick={ () => this.editEmployee(employee.id)} className=\"btn btn-info\">Update </button> <button style={{marginLeft: \"10px\"}} onClick={ () => this.deleteEmployee(employee.id)} className=\"btn btn- danger\">Delete </button> <button style={{marginLeft: \"10px\"}} onClick={ () => this.viewEmployee(employee.id)} className=\"btn btn- info\">View </button> </td> </tr> ) } </tbody> </table> </div> </div> ) } } export default ListEmployeeComponent 6. Buat class component di folder components, dengan nama ViewEmployeeComponent.js import React, { Component } from 'react' import EmployeeService from '../services/EmployeeService' class ViewEmployeeComponent extends Component { constructor(props) { super(props) this.state = { id: this.props.match.params.id, employee: {} } } componentDidMount(){ EmployeeService.getEmployeeById(this.state.id).then( res => { this.setState({employee: res.data}); }) } render() { return ( <div> <br></br> <div className = \"card col-md-6 offset-md-3\"> <h3 className = \"text-center\"> View Employee Details</h3> <div className = \"card-body\"> <div className = \"row\"> <label> Employee First Name: </label> <div> { this.state.employee.firstName }</div> </div> <div className = \"row\"> <label> Employee Last Name: </label> <div> { this.state.employee.lastName }</div>

</div> <div className = \"row\"> <label> Employee Email ID: </label> <div> { this.state.employee.emailId }</div> </div> </div> </div> </div> ) } } export default ViewEmployeeComponent 7. Buat class component di folder components, dengan nama UpdateEmployeeComponent.js import React, { Component } from 'react' import EmployeeService from '../services/EmployeeService'; class UpdateEmployeeComponent extends Component { constructor(props) { super(props) this.state = { id: this.props.match.params.id, firstName: '', lastName: '', emailId: '' } this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this); this.changeLastNameHandler = this.changeLastNameHandler.bind(this); this.updateEmployee = this.updateEmployee.bind(this); } componentDidMount(){ EmployeeService.getEmployeeById(this.state.id).then( (res) =>{ let employee = res.data; this.setState({firstName: employee.firstName, lastName: employee.lastName, emailId : employee.emailId }); }); } updateEmployee = (e) => { e.preventDefault(); let employee = {firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId}; console.log('employee => ' + JSON.stringify(employee)); console.log('id => ' + JSON.stringify(this.state.id)); EmployeeService.updateEmployee(employee, this.state.id).then( res => { this.props.history.push('/employees'); }); } changeFirstNameHandler= (event) => { this.setState({firstName: event.target.value}); } changeLastNameHandler= (event) => { this.setState({lastName: event.target.value}); } changeEmailHandler= (event) => { this.setState({emailId: event.target.value}); } cancel(){ this.props.history.push('/employees'); } render() {

return ( <div> <br></br> <div className = \"container\"> <div className = \"row\"> <div className = \"card col-md-6 offset-md-3 offset-md-3\"> <h3 className=\"text-center\">Update Employee</h3> <div className = \"card-body\"> <form> <div className = \"form-group\"> <label> First Name: </label> <input placeholder=\"First Name\" name=\"firstName\" className=\"form-control\" value={this.state.firstName} onChange={this.changeFirstNameHandler}/> </div> <div className = \"form-group\"> <label> Last Name: </label> <input placeholder=\"Last Name\" name=\"lastName\" className=\"form-control\" value={this.state.lastName} onChange={this.changeLastNameHandler}/> </div> <div className = \"form-group\"> <label> Email Id: </label> <input placeholder=\"Email Address\" name=\"emailId\" className=\"form-control\" value={this.state.emailId} onChange={this.changeEmailHandler}/> </div> <button className=\"btn btn-success\" onClick={this.updateEmployee}>Save</button> <button className=\"btn btn-danger\" onClick={this.cancel.bind(this)} style={{marginLeft: \"10px\"}}>Cancel</button> </form> </div> </div> </div> </div> </div> ) } } export default UpdateEmployeeComponent 8. Buat class component di folder components, dengan nama CreateEmployeeComponent.js import React, { Component } from 'react' import EmployeeService from '../services/EmployeeService'; class CreateEmployeeComponent extends Component { constructor(props) { super(props) this.state = { // step 2 id: this.props.match.params.id, firstName: '', lastName: '', emailId: '' } this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this); this.changeLastNameHandler = this.changeLastNameHandler.bind(this); this.saveOrUpdateEmployee = this.saveOrUpdateEmployee.bind(this); } // step 3 componentDidMount(){

// step 4 if(this.state.id === '_add'){ return }else{ EmployeeService.getEmployeeById(this.state.id).then( (res) =>{ let employee = res.data; this.setState({firstName: employee.firstName, lastName: employee.lastName, emailId : employee.emailId }); }); } } saveOrUpdateEmployee = (e) => { e.preventDefault(); let employee = {firstName: this.state.firstName, lastName: this.state.lastName, emailId: this.state.emailId}; console.log('employee => ' + JSON.stringify(employee)); => { // step 5 } if(this.state.id === '_add'){ EmployeeService.createEmployee(employee).then(res =>{ this.props.history.push('/employees'); }); }else{ EmployeeService.updateEmployee(employee, this.state.id).then( res this.props.history.push('/employees'); }); } changeFirstNameHandler= (event) => { this.setState({firstName: event.target.value}); } changeLastNameHandler= (event) => { this.setState({lastName: event.target.value}); } changeEmailHandler= (event) => { this.setState({emailId: event.target.value}); } cancel(){ this.props.history.push('/employees'); } getTitle(){ if(this.state.id === '_add'){ return <h3 className=\"text-center\">Add Employee</h3> }else{ return <h3 className=\"text-center\">Update Employee</h3> } } render() { return ( <div> <br></br> <div className = \"container\"> <div className = \"row\"> <div className = \"card col-md-6 offset-md-3 offset-md-3\"> { this.getTitle() } <div className = \"card-body\"> <form> <div className = \"form-group\"> <label> First Name: </label> <input placeholder=\"First Name\" name=\"firstName\" className=\"form-control\"

value={this.state.firstName} onChange={this.changeFirstNameHandler}/> </div> <div className = \"form-group\"> <label> Last Name: </label> <input placeholder=\"Last Name\" name=\"lastName\" className=\"form-control\" value={this.state.lastName} onChange={this.changeLastNameHandler}/> </div> <div className = \"form-group\"> <label> Email Id: </label> <input placeholder=\"Email Address\" name=\"emailId\" className=\"form-control\" value={this.state.emailId} onChange={this.changeEmailHandler}/> </div> <button className=\"btn btn-success\" onClick={this.saveOrUpdateEmployee}>Save</button> <button className=\"btn btn-danger\" onClick={this.cancel.bind(this)} style={{marginLeft: \"10px\"}}>Cancel</button> </form> </div> </div> </div> </div> </div> ) } } export default CreateEmployeeComponent 9. Selanjutnya, kita edit App.js, menjadi seperti ini, import React from 'react'; import logo from './logo.svg'; import './App.css'; import {BrowserRouter as Router, Route, Switch} from 'react-router-dom' import ListEmployeeComponent from './components/ListEmployeeComponent'; import HeaderComponent from './components/HeaderComponent'; import FooterComponent from './components/FooterComponent'; import CreateEmployeeComponent from './components/CreateEmployeeComponent'; import UpdateEmployeeComponent from './components/UpdateEmployeeComponent'; import ViewEmployeeComponent from './components/ViewEmployeeComponent'; function App() { return ( <div> <Router> <HeaderComponent /> <div className=\"container\"> <Switch> <Route path = \"/\" exact component = {ListEmployeeComponent}></Route> <Route path = \"/employees\" component = {ListEmployeeComponent}></Route> <Route path = \"/add-employee/:id\" component = {CreateEmployeeComponent}></Route> <Route path = \"/view-employee/:id\" component = {ViewEmployeeComponent}></Route> {/* <Route path = \"/update-employee/:id\" component = {UpdateEmployeeComponent}></Route> */} </Switch> </div> <FooterComponent /> </Router> </div> ); }

export default App; 10. Di App.css edit sebagai berikut, .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .footer { position: absolute; bottom: 0; width:100%; height: 50px; background-color: black; text-align: center; color: white; } 11. Berikut final struktur nya, bila sudah sama, bisa di jalankan dengan perintah : npm start

Terimakasih