Scribd
Unggah
135 tayangan10 halaman

Kumpul4semut Com Fullstack Codeigniter 4 Dan React Js 1 Persiapan

Diunggah oleh

xserver
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
135 tayangan10 halaman

Kumpul4semut Com Fullstack Codeigniter 4 Dan React Js 1 Persiapan

Diunggah oleh

xserver
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

Tutorial Lengkap CRUD Codeigniter 4 dan


React js #1 Persiapan
Home  codeigniter 4  Tutorial Lengkap CRUD Codeigniter 4 dan React js #1 Persiapan

6 Komentar Posted in codeigniter 4, react js By semut Posted on Juni 19, 2020


Tagged codeigniter 4, crud, react js

Framework codeigniter baru saja meluncurkan versi terbarunya


yaitu codeigniter 4. Codeigniter memang salah satu framework
favorit saya bahkan saya sudah terbiasa dengan codeigniter 3.
karena sudah ada versi terbaru maka tak salah saya harus
mencobanya.
CRUD Codeigniter 4 dan React.js

Agar lebih keren kita akan mencoba frontendnya menggunakan


framework yang cukup terkenal juga yaitu react js. Fraemwork react
js diciptkan oleh perushaan facebook jadi kita sebagai seorang
yang suka mencoba tak salah mencobanya karena kita tahu
facebook sangat keren.

Untuk menggabungkan codeigniter dengan react itu menurut saya


ada 2 jenis.

1. Kita buat secara terpisah atau beda folder dengan cara kita membuat rest api nya menggunakan
codeigniter lalu react js nya yang akan mengkonsumsi rest apinya.
2. Kita buat dalam satu folder yang akan dibahas kali ini

Penggabungan codeigniter dengan react


js
Untuk menggabungkan framework js dengan php biasany butuh
sesuatu untuk menggenerate framework jsnya menjadi file
javascript biasa maka dari itu kita memerlukan

Webpack untuk mengubahnya. Langkah nya sebagai berikut.

Install Codeigniter 4 dengan 2 cara


1. Mendownload filenya bisa download Codeigniter
2. Menggunakan composer. Bagi yang belum terinstall composer di komputernya bisa cek
website composer . Jika sudah bisa langsung install codeigniter 4 nya dengan perintah!.

composer create‐project codeigniter4/appstarter namaproject

atau

composer create‐project codeigniter4/appstarter ‐‐no‐dev namaproject

setelah proses selesai kita bisa menjalankan codeigniternya


dengan perintah.

php spark serve

Install webpack dan react js


Baik sekarang kita harus menginstall webpack dan react js di folder
codeigniter4 yang sudah terinstall. silahkan buka foldernya lalu
codeigniter4 yang sudah terinstall. silahkan buka foldernya lalu
buka terminal bashnya!.

Inisialisasi package.json

npm init ‐y

Install react jsnya

sudo npm install path @babel/core @babel/preset‐react react babel‐loader react‐dom ‐‐save

untuk penggguna window bisa hapus sudo nya!.

Install webpack

npm install webpack webpack‐cli ‐‐global

Buat file bernama webpack.config.js

var path = require('path'); 
module.exports = { 
  entry: './components/app.js', 
  output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].js' 
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: { 
          loader: 'babel‐loader', 
          options: { 
            presets: ['@babel/preset‐react'] 
          } 
        } 
      } 
    ] 
  } 
}

Penggabungan codeigniter dengan react

Baik dalam webpack.config.js kalian bisa sesuaikan kehendak lihat


pada entry disini saya setting di folder components lalu file app.js.
Maka untuk membuat reactnya saya harus membuat folder
components dan didalamnya membuat file app.js. Untuk isi file
app.js nya.

import React, { Component } from 'react'; 
import ReactDOM from 'react‐dom'; 
export default class Root extends Component { 
  render() { 
    return ( 
      <h1>Hello World from React</h1>
    ) 
  } 
} 
let container = document.getElementById('app'); 
let component = <Root />; 
ReactDOM.render(component, container);

Lalu generate react tersebut menggunaka webpacknya dengan


perintah

webpack ‐‐config webpack.config.js

Selanjutnya kalian bisa ubah view pada codeigniter di folder


app/views

<div id="app"></div> 
<script src="dist/main.js" charset="utf‐8"></script>

itu kode yang pentingnya kalian bisa tambahkan header dan footer
sesui kehendak. OH ya. untuk melakukan update pada react js
misalkan kalian telah mengedit project react jsnya menggunakan
perintah

sudo webpack ‐‐watch

untuk window tanpa sudo ya.


 Mengelola Inputan Python Yang BenarTutorial Lengkap CRUD Codeigniter 4 dan React js #2 Create Data 

6 thoughts on “Tutorial Lengkap CRUD


Codeigniter 4 dan React js #1 Persiapan”
admin
November 8, 2020 pukul 7:23 am

permission fordernya mungkin

Balas

Flycoro
November 27, 2020 pukul 8:58 am

tulis aja ini di git/terminal


Set‐ExecutionPolicy ‐Scope CurrentUser ‐ExecutionPolicy

Unrestricted

Balas

Adistira Dyiputra
Desember 21, 2020 pukul 10:46 am

Kutip 1 diganti jadi kutip 2 mas

Balas

mujab
Maret 6, 2021 pukul 12:36 pm

maaf gak jelas gan tutorialnya yg bagian terakhir. saya bingung


suruh ngapain yg ini. .webpack –config webpack.config.js
Balas

mujab
Maret 6, 2021 pukul 12:37 pm

sama yg bagian ini.. gan suruh ngapain


Selanjutnya kalian bisa ubah view pada codeigniter di folder
app/views

ini kode diletakkan dimana ya.. terimakasih

Balas

Jujun Jamaludin
September 4, 2021 pukul 1:38 am

cek video tutorialnya mas di youtube

Balas

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib


ditandai *

Komentar
Nama *

Email *

Situs Web

Simpan nama, email, dan situs web saya pada peramban ini untuk
komentar saya berikutnya.

Kirim Komentar

Kategori

Bash Shell ﴾1﴿

codeigniter 4 ﴾5﴿
codeigniter 4 ﴾5﴿

Git dan Github ﴾4﴿

PHP ﴾4﴿

Python ﴾7﴿

react js ﴾5﴿

Termux ﴾5﴿

vps ﴾1﴿

Copyright © 2021 kumpul4semut. Theme: Zakra By ThemeGrill.

Anda mungkin juga menyukai