Praktikum Pemrograman Framework

Axios + ​React

Muhammad Mahrus Zain

Politkenik Caltex Riau / [email protected]
Komponen, Props dan State
Didalam react state memiliki 3 bagian penting yaitu komponen, props dan state.

a. React is all about components. ​Component adalah bagian-bagian kecil dari suatu
aplikasi. Komponen-komponen ini nantinya diracik menjadi sebuah aplikasi.
Sebagai tukang racik yang budiman anda harus paham bahwa ada 2 unsur
penting dalam component yaitu UI (User Interface) & Data, rumusnya

b. Prop singkatan dari ​Property​. Ini cukup simple, apalagi jika anda sudah terbiasa
dengan HTML, ini mirip seperti atrribute pada tag HTML. Dalam pembuatannya,
jika dalam functional component maka prop ini adalah parameternya. Jika
componentnya dalam bentuk class maka prop ini property dari class nya yang di
akses melalui keyword ‘this’.
i. Functional Komponen Props

1
 ii. Class Komponen Props

c. State adalah data private sebuah component. Data ini hanya tersedia untuk
component tersebut dan tidak bisa di akses dari component lain. Component
dapat merubah state nya sendiri. Supaya lebih jelas mari kita lihat implementasi
pada component counter.

2
Perubahan data pada props dan state akan merender ulang component.

3
 1. Gunakan props untuk komunikasi data antar komponent ( parent to child component )
2. Gunakan state untuk komunikasi data internal, hanya dalam component itu sendiri
3. props dan state bisa memiliki default value

Tipe Komponen
Ada 2 jenis tipe dari komponen pada react js yaitu stateless dan statefull komponen.

1. Stateless Component — tidak memiliki state hanya prop. Umumnya component ini di buat
dengan function karena codenya lebih ringkas

4
2. Statefull Component — memiliki state & props. Component ini dibuat dengan class.
Kelebihan dari class component adalah memiliki lifecycle

5
Komponen Lifecycle
Component life cycle adalah tahap berurutan dari kondisi component ketika digunakan. Di tiap
kondisi, kita bisa melakukan macam-macam hal seperti memanggil data dari server (ajax),
memanipulasi data, validasi, etc. Tahapnya sendiri dikelompokkan menjadi dua yaitu initial phase
dan update phase Perhatikan gambar berikut :

6
initial phase yaitu tahap ketika component baru pertama kali di panggil. Tahap-tahapnya :

1. getDefaultProps() dan getInitialState() : tahap ketika data props dan data state di
deklarasikan. khusus untuk ES6, tahap ini dijalankan di constructor function.
2. componentWillMount() : tahap sebelum component di render.
3. componentDidMount() : tahap setelah component di render. pada tahap ini proses
pemanggilan ajax dan perubahan isi state setelah proses ajax di panggil.

update phase yaitu tahap ketika component mengalami perubahan “model” data.
Tahap-tahapnya :

1. componentWillReceiveProps() : tahap ketika terjadi perubahan pada props sebelum

component di render.
2. shouldComponentUpdate() : tahap untuk menentukan apakah perubahan akan di
tampilkan atau tidak. isinya di set true atau false.
3. componentWillUpdate() : tahap sebelum component di render.
4. componentDidUpdate() : tahap setelah component di render.

7
Pengenalan Axios

Axios adalah sebuah library open source yang saat ini paling booming untuk melakukan request
HTTP karena memiliki banyak kelebihan namun dengan penggunaan yang tidak lebih sulit
dibanding yang lain.

Axios : axios merupakan salah satu framework atau library yang paling sering digunakan untuk
melakukan proses http client server atau pengambilan/pengiriman data dari client ke back end
atau server. Karena didalam react belum include axios oleh karena itu harus kita lakukan instalasi
node package manager terlebih dulu dengan memasukkan perintah ​npm install axios --save.

8
Get Data React + Axios
React+Axios : ​kita akan menampilkan data dengan react dan axios dari
back/end yang sudah kita buat sebelumnya menggunakan codeigniter
(modul 7)​. ​Pastikan proses CRUD pada backend yang sudah kita coba
menggunakan postman berjalan dengan baik. Untuk menghindari error
access allow origin pada saat get data tambahkan coding pada line 12 dan
13 pada gambar di bawah ini didalam project codeigniter didalam folder
app/controller/User.php. ​Coding ini berguna untuk mengizinkan akses
seluruh method dan seluruh ip yang mengakses dapat mengakses data
melalui frontend.

● Data user akan kita tampilkan dalam content oleh karena itu silahkan buka file ​Content.js
yang ada pada folder ​src/component/Content.js​. Kemudian masukkan coding dibawah
ini

9
● Simpan file ​Content.js ​seharusnya data akan muncul seperti pada gambar dibawah ini.

10
React + Bootstrap (reactstrp)
Untuk tampilan ui/ux lebih menarik kita akan gunakan bootstrap sebagai library tambahan.
Reactstrap merupakan sebuah library bootstrap yang dibangun untuk React. Reactstrap
menyediakan beberapa component yang bisa kita gunakan langsung pada react.

Instalasi Reactstrap
Untuk melakukan instalasi reactstrap silahkan ketikkan perintah

1. npm​ ​install​ --save bootstrap

2. npm​ i​ nstall​ --save reactstrap react react-dom

(pastikan sudah masuk ke dalam directory projek masing-masing). Kita akan menggunakan npm
untuk mendownload library react strap jadi nanti file ​reactstrap​ yang kita download akan
tersimpan di dalam folder ​node_modules.

11
Cara penggunaan komponen reactstrap pada react bisa di lihat pada
https://reactstrap.github.io/components/​. Kita akan coba implementasikan navbar pada
komponen ​Header.js ​yang sudah kita buat.

1. Tambahkan​ import 'bootstrap/dist/css/bootstrap.min.css'; ​pada file src/index.js

2. Tambahkan Coding dibawah ini

import​ ​React​,​ ​{​ ​useState​ ​}​ ​from​ ​"​react​";

import​ ​{

​Collapse​,

​Navbar​,

​NavbarToggler​,

​NavbarBrand​,

​Nav​,

​NavItem​,

​NavLink​,

​UncontrolledDropdown​,

​DropdownToggle​,

​DropdownMenu​,

​DropdownItem​,

​NavbarText​,

}​ ​from​ ​"​reactstrap​";

const​ ​Header​ ​=​ ​(​props​)​ ​=>​ ​{

​const​ ​[​isOpen​,​ ​setIsOpen​]​ ​=​ ​useState​(​false​)​;

​const​ ​toggle​ ​=​ ​()​ ​=>​ ​setIsOpen​(​!​isOpen​)​;

12
​return​ (

​<​div​>

​ "​light​"​ ​light​ ​expand=

​<​Navbar​ ​color= ​ "​md​"​>

​<​NavbarBrand​ ​href​="​/​"​>​Framework SI​</​NavbarBrand​>

​ {​toggle​}​ />
​<​NavbarToggler​ ​onClick=

​ {​isOpen​}​ ​navbar>
​<​Collapse​ ​isOpen= ​

​ "​mr-auto​"​ ​navbar>
​<​Nav​ ​className= ​

​<​NavItem​>

​ "​/components/​"​>​Beranda​</​NavLink​>
​<​NavLink​ ​href=

​</​NavItem​>

​<​NavItem​>

​ "​https://github.com/reactstrap/reactstrap​"​>
​<​NavLink​ ​href=

GitHub

​</​NavLink​>

​</​NavItem​>

​<​UncontrolledDropdown​ ​nav​ ​inNavbar​>

​<​DropdownToggle​ ​nav​ ​caret​>

Profile

​</​DropdownToggle​>

​
​<​DropdownMenu​ ​right>

​<​DropdownItem​>​SI A​</​DropdownItem​>

​<​DropdownItem​>​SI B​</​DropdownItem​>

​<​DropdownItem​>​SI C​</​DropdownItem​>

​<​DropdownItem​ ​divider​ />

13
 ​<​DropdownItem​>​Reset​</​DropdownItem​>

​</​DropdownMenu​>

​</​UncontrolledDropdown​>

​</​Nav​>

​<​NavbarText​>​Logout​</​NavbarText​>

​</​Collapse​>

​</​Navbar​>

​</​div​>

)​;

};

export​ ​default​ ​Header​;

3. Laporkan analisa coding di atas

Selanjutnya kita akan menggunakan tabel react-strap untuk menampilkan data user dari back
end . Silahkan tambahkan coding di bawah ini.

import​ ​React​,​ ​{​ ​Component​ ​}​ ​from​ ​"​react​";

import​ ​axios​ ​from​ ​"​axios​";

import​ ​{​ ​Table​,​ ​Badge​ ​}​ ​from​ ​"​reactstrap​";

export​ ​default​ ​class​ ​Content​ ​extends​ ​Component​ ​{

​state​ ​=​ ​{

​users​:​ []​,

​};

​componentDidMount​()​ ​{

14
 ​axios

​.​get​(​"​http://localhost:8888/dts-ci-restserver-master/index.php/user​"​)

​.​then​(​(​res​)​ ​=>​ ​{

​const​ ​users​ ​=​ ​res​.​data​;

​console​.​log​(​res​)​;

​this​.​setState​(​{​ ​users​ ​}​)​;

​}​)​;

​}

​render​()​ ​{

​return​ (

​<​div​>

​
​<​Table​ ​hover>

​<​thead​>

​<​tr​>

​<​th​>​#​</​th​>

​<​th​>​Nama​</​th​>

​<​th​>​Prodi​</​th​>

​<​th​>​Email​</​th​>

​<​th​>​Password​</​th​>

​<​th​>​Aksi​</​th​>

​</​tr​>

​</​thead​>

​<​tbody​>

15
 ​{​this​.​state​.​users​.​map​(​(​user​)​ ​=>​ (

​<​tr​>

​<​th​ ​scope​="​row​"​>​1​</​th​>

​<​td​>​ ​{​user​.​nama​}​</​td​>

​<​td​>​ ​{​user​.​prodi​}​</​td​>

​<​td​>​ ​{​user​.​email​}​</​td​>

​<​td​>​ ​{​user​.​password​}​</​td​>

​<​td​>

​<​Badge​ ​href​="​#​"​ ​color​="​warning​"​>

​<​svg

​ "​1em​"
​width=

​height​="​1em​"

​viewBox​="​0 0 16 16​"

​ "​bi bi-pencil-square​"
​class=

​fill​="​currentColor​"

​ "​http://www.w3.org/2000/svg​"
​xmlns=

>

​<​path​ ​d​="​M15.502 1.94a.5.5 0 0 1 0 .706L14.459

3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0
0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0
.196-.12l6.813-6.814z​"​ />

​<​path

​fill-rule​="​evenodd​"

​d​="​M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0

1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1
.5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z​"

16
 />

​</​svg​>

​</​Badge​>

​<​Badge​ ​href​="​#​"​ ​color​="​danger​"​>

​<​svg

​ "​1em​"
​width=

​height​="​1em​"

​viewBox​="​0 0 16 16​"

​ "​bi bi-trash-fill​"
​class=

​ "​currentColor​"
​fill=

​ "​http://www.w3.org/2000/svg​"
​xmlns=

>

​<​path

​fill-rule​="​evenodd​"

​d​="​M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2

0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3
4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0
1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z​"

/>

​</​svg​>

​</​Badge​>

​</​td​>

​</​tr​>

))​}

​</​tbody​>

17
 ​</​Table​>

​{​/* <ul>

{this.state.users.map((user) => (

<li>

Nama : {user.nama}

<br />

Prodi : {user.prodi}

<br />

email : {user.email}

<br />

</li>

))}

​
</ul> */}

​</​div​>

)​;

​}

18
Tugas
Silahkan buat function delete untuk menghapus. Jadi ketika button delete di tekan dia akan
mengakses function delete dan function deletenya akan mengakses backend untuk menghapus
data.

19