Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CRUD Menggunakan Laravel 7 dan React Js

10 min read

Tutorial CRUD Menggunakan Laravel 7 dan React Js

Jika kamu membutuhkan tutorial membuat CRUD menggunakan laravel 7 dan react Js, ini artikel yang tepat.

… dengan membaca artikel ini, Anda akan mempelajari:

  1. Cara menginstall React Js di Laravel
  2. Implementasi sistem CRUD sederhana menggunakan Laravel 7 dan React Js
  3. Belajar SweatAlert di React Js
  4. dan masih banyak lagi…

Tutorial ini saya khususnya untuk pemula yang ingin mengimplementasikan React Js di Laravel. Namun tidak menutup kemungkinan Anda yang sudah terbiasa pun dapat mengikuti tutorial ini.

Yuk langsung aja kita mulai…

Pendahuluan

Perkembangan Javascript saat ini sudah semakin berkembang.

Banyak situs besar maupun perusahaan yang mencari programmer dengan skill keahlian Javascript.

Dahulu, Javascript hanya dapat berjalan di sisi client saja, namun saat ini sudah berkembang ke sisi server.

… sebut saja NodeJs. Kehadiran NodeJs seketika membuat Javascript mulai banyak digunakan untuk membangun aplikasi web.

Untuk mempelajari NodeJs tidak susah-susah amat, sebab NodeJs sangat cocok untuk pemula.

Setelah NodeJs, berkembanglah library-library Javascript yang sangat populer.

Rekomendasi: Cara Install dan Menggunakan React Js di Laravel 7

Sebut saja Angular, ReactJs dan VueJs.

… pada tutorial ini kita akan lebih fokus ke React Js.

Tools yang Diperlukan

  1. Laravel 7
  2. Node Js
  3. Composer
  4. Web Server (Xampp, Wamp, Laragon dll)

Udah itu aja?

Iya itu aja.

Btw, pada tutorial ini sangat menggunakan Node Js versi 12.5.0 ya. Samaan versinya kaya punya sama ya boleh banget. Ga juga ga masalah.

Membuat CRUD Sederhana Menggunakan Laravel 7 dan React Js

Jika Anda ingin mempelajari gimana membuat CRUD sederhana menggunakan React Js dan Laravel, Anda boleh mengikuti contoh-contoh yang kami berikan.

Step 1 – Install Laravel 7

Gunakan composer untuk melakukan installasi Laravel 7.

Ketik command berikut ini jika menggunakan Laravel Installer:

composer global require laravel/installer
laravel new blog

… atau bisa juga menggunakan Composer Create Project seperti command di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Create Database dan Migration Table

Silahkan buat database baru bernama db_blog_react.

Kemudian buka file .env yang ada di direktori blog/.env:

Cari kode berikut ini di file .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Ubah menjadi:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_blog_react
DB_USERNAME=root
DB_PASSWORD=

Masih di direktori project, ketik command berikut untuk membuat Model Article dan Migration-nya:

php artisan make:model Article --migration

Sekarang buka file Article.php yang ada di dalam direktori app/Article.php dan modifikasi:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    protected $table = "articles";
    protected $fillable = ['title', 'content'];
}

Simpan.

Kemudian, buka file *******create_articles_table.php yang tersimpan di direktori database/migrations dan modifikasi seperti kode di bawah ini:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateArticlesTable extends Migration
{
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('content');
            $table->timestamps();
        });
    }
    
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}

Simpan.

Kemudian jalankan command berikut ini agar table yang kita buat migrate ke database:

php artisan migrate

Jika berhasil dengan baik, maka di database db_blog_react akan muncul table seperti gambar di bawah ini:

Step 2 selesai.

Udahan?

Belum, masih ada lanjutannya 🙂

Step 3 – Setting Route Web dan Api

Buka file routes/web.php dan silahkan modifikasi:

<?php

use Illuminate\Support\Facades\Route;

Route::view('/articles', 'app');
Route::view('/article/edit/{id}', 'app');
Route::view('/article/{id}', 'app');
Route::view('/', 'app');
Route::view('/{path}', 'app');

Simpan.

Kemudian buka file routes/api.php dan modifikasi menjadi:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/articles', 'ArticleController@index');
Route::post('/article/store', 'ArticleController@store');
Route::get('/article/edit/{id}', 'ArticleController@getArticle');
Route::get('/article/{id}', 'ArticleController@getArticle');
Route::put('/article/{id}', 'ArticleController@update');
Route::delete('/article/delete/{id}', 'ArticleController@delete');

Simpan.

Step 4 – Buat Controller Article

Ketik command di bawah ini untuk membuat controller baru bernama ArticleController

php artisan make:controller ArticleController

Sekarang buka file ArticleController.php yang terdapat di app/Http/Controllers.

Kemudian ketik kode berikut ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ArticleController extends Controller
{
    public function index()
    {
        $articles = \App\Article::all();

        return $articles->toJson();
    }

    public function store(Request $request)
    {
        $validatedData = $request->validate([
          'title' => 'required',
          'content' => 'required',
        ]);

        $project = \App\Article::create([
          'title' => $validatedData['title'],
          'content' => $validatedData['content'],
        ]);

        $msg = [
            'success' => true,
            'message' => 'Article created successfully!'
        ];

        return response()->json($msg);
    }

    public function getArticle($id) // for edit and show
    {
        $article = \App\Article::find($id);

        return $article->toJson();
    }

    public function update(Request $request, $id)
    {
        $validatedData = $request->validate([
          'title' => 'required',
          'content' => 'required',
        ]);

        $article = \App\Article::find($id);
        $article->title = $validatedData['title'];
        $article->content = $validatedData['content'];
        $article->save();

        $msg = [
            'success' => true,
            'message' => 'Article updated successfully'
        ];

        return response()->json($msg);
    }

    public function delete($id)
    {
        $article = \App\Article::find($id);
        if(!empty($article)){
            $article->delete();
            $msg = [
                'success' => true,
                'message' => 'Article deleted successfully!'
            ];
            return response()->json($msg);
        } else {
            $msg = [
                'success' => false,
                'message' => 'Article deleted failed!'
            ];
            return response()->json($msg);
        }
    }
}

Simpan.

Step 5 – Install Package UI React, React Router Dom dan Sweat Alert

Jika Anda ingin menginstall package React Js, React Router Dom dan Sweat Alert, silahkan dimulai dari install package laravel ui dan laravel ui react berikut ini:

composer require laravel/ui  

Kemudian install react js:

php artisan ui react

Lalu install NodeJsnya:

npm install && npm run dev  

Kemudian install react router dom nya:

npm install react-router-dom

… dan terakhir sweat alertnya:

npm i react-bootstrap-sweetalert 

Step 6 – Manejement CRUD React Js di Laravel 7

Buat file baru bernama App.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import ArticleIndex from './ArticleIndex'
import ArticleCreate from './ArticleCreate'
import ArticleShow from './ArticleShow'
import ArticleEdit from './ArticleEdit'

class App extends Component {
    render () {
        return (
            <BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                    <Route exact path='/' component={ArticleIndex}/>
                    <Route exact path='/create' component={ArticleCreate} />
                    <Route path='/article/edit/:id' component={ArticleEdit} />
                    <Route path='/article/:id' component={ArticleShow} />
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

Buat lagi file baru bernama Header.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => (
    <nav className='navbar navbar-dark bg-dark'>
        <div className='container'>
            <Link className='navbar-brand' to='/'>Ilmu Coding</Link>
        </div>
    </nav>
)

export default Header

Buat lagi file baru bernama ArticleIndex.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import axios from 'axios'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import SweetAlert from 'react-bootstrap-sweetalert';

class ArticleIndex extends Component {
    
    constructor () {
        super()
        this.state = {
            articles: [],
            msg: null,
            type: null,
            flash:false,
            alert: null,
        }
    }

    hideAlert() {
        this.setState({
            alert: null
        });
    }

    componentDidMount () {
        axios.get('/api/articles').then(response => {
            this.setState({
                articles: response.data
            })
        })  
    }

    confirmDelete(id){
        const getAlert = () => (
            <SweetAlert
                warning
                showCancel
                confirmBtnText="Hapus Deh"
                cancelBtnText="Nggak Jadi"
                confirmBtnBsStyle="default"
                cancelBtnBsStyle="danger"
                title="Tunggu ..."
                onConfirm={() => this.deleteItem(id)}
                onCancel={() => this.hideAlert()}
                focusCancelBtn
                >
                Kalau udah dihapus, nggak bakal balik lagi.
            </SweetAlert>
        );
        this.setState({
            alert: getAlert()
        });
    }

    deleteItem(id) {
        axios.delete(`/api/article/delete/${id}`).then(response => {
            var msg = response.data.success;
            if(msg == true){
                this.hideAlert();
                this.goToHome();
            }
        })
    }

    goToHome(){
        const getAlert = () => (
            <SweetAlert
                success
                title="Success!"
                onConfirm={() => this.onSuccess() }
                onCancel={this.hideAlert()}
                timeout={2000}
                confirmBtnText="Oke Siap"
                >
                Deleted article successfully
            </SweetAlert>
        );
        this.setState({
            alert: getAlert()
        });
    }

    onSuccess(){
        this.componentDidMount();
        this.hideAlert();
    }

    render () {
        const { articles } = this.state
        return (
          <div className='container py-4'>
            <div className='row justify-content-center'>
              <div className='col-md-8'>
                <div className='card'>
                  <div className='card-header'>All Article</div>
                  <div className='card-body'>
                    <Link className='btn btn-primary btn-sm mb-3' to='/create'>
                      Create new article
                    </Link>
                    <div className="table-responsive">
                        <table className="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th width="50" className="text-center">No</th>
                                    <th>Title</th>
                                    <th width="200" className="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {articles.map((article, i) => (
                                <tr key={i}>
                                    <td width="50" className="text-center">{i + 1}</td>
                                    <td>{article.title}</td>
                                    <td width="200" className="text-center">
                                        <div className="btn-group">
                                        <Link
                                            className='btn btn-primary'
                                            to={`/article/${article.id}`}
                                            >Detail
                                        </Link>
                                        <Link
                                            className='btn btn-success'
                                            to={`/article/edit/${article.id}`}
                                            >Edit
                                        </Link>
                                        <button
                                            className='btn btn-danger'
                                            onClick={() => this.confirmDelete(article.id)}
                                            >Delete
                                        </button>
                                        </div>
                                    </td>
                                </tr>
                                ))}
                            </tbody>
                        </table>
                        {this.state.alert}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
    }
}

export default ArticleIndex

Buat lagi file baru bernama ArticleCreate.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import axios from 'axios'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import SweetAlert from 'react-bootstrap-sweetalert';

class ArticleCreate extends Component {
    
    constructor (props) {
        super(props)
        this.state = {
            title: '',
            content: '',
            alert: null,
            errors: []
        }
        this.handleFieldChange = this.handleFieldChange.bind(this)
        this.handleCreateNewArticle = this.handleCreateNewArticle.bind(this)
        this.hasErrorFor = this.hasErrorFor.bind(this)
        this.renderErrorFor = this.renderErrorFor.bind(this)
    }

    handleFieldChange (event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    goToHome(){
        const getAlert = () => (
            <SweetAlert
                success
                title="Success!"
                onConfirm={() => this.onSuccess() }
                onCancel={this.hideAlert()}
                timeout={2000}
                confirmBtnText="Oke Siap"
                >
                Created article successfully
            </SweetAlert>
        );
        this.setState({
            alert: getAlert()
        });
    }

    onSuccess() {
        this.props.history.push('/');
    }

    hideAlert() {
        this.setState({
            alert: null
        });
    }

    handleCreateNewArticle (event) {
        event.preventDefault()
        const article = {
          title: this.state.title,
          content: this.state.content
        }
        axios.post('/api/article/store', article).then(response => { 
            var msg = response.data.success;
            if(msg == true){
                return this.goToHome();
            }
        })
    }

    hasErrorFor (field) {
        return !!this.state.errors[field]
    }

    renderErrorFor (field) {
        if (this.hasErrorFor(field)) {
            return (
            <span className='invalid-feedback'>
                <strong>{this.state.errors[field][0]}</strong>
            </span>
            )
        }
    }

    render () {
        return (
        <div className='container py-4'>
            <div className='row justify-content-center'>
              <div className='col-md-6'>
                <div className='card'>
                  <div className='card-header'>Create new project</div>
                  <div className='card-body'>
                    <form onSubmit={this.handleCreateNewArticle}>
                      <div className='form-group'>
                        <label htmlFor='title'>Title</label>
                        <input
                          id='title'
                          type='text'
                          className={`form-control ${this.hasErrorFor('title') ? 'is-invalid' : ''}`}
                          name='title'
                          value={this.state.title}
                          onChange={this.handleFieldChange}
                        />
                        {this.renderErrorFor('title')}
                      </div>
                      <div className='form-group'>
                        <label htmlFor='content'>Project content</label>
                        <textarea
                          id='content'
                          className={`form-control ${this.hasErrorFor('content') ? 'is-invalid' : ''}`}
                          name='content'
                          rows='10'
                          value={this.state.content}
                          onChange={this.handleFieldChange}
                        />
                        {this.renderErrorFor('content')}
                      </div>
                      <Link
                        className='btn btn-secondary'
                        to={`/`}
                        >Back
                      </Link>
                      &nbsp;
                      &nbsp;
                      <button className='btn btn-primary'>Create</button>
                      {this.state.alert}
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
    }
}
export default ArticleCreate

Buat lagi file baru bernama ArticleEdit.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import axios from 'axios'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import SweetAlert from 'react-bootstrap-sweetalert';

    class ArticleEdit extends Component {
      constructor (props) {
        super(props)
        this.state = {
          title: '',
          content: '',
          alert: null,
          message:'',
          errors: []
        }
        this.handleFieldChange = this.handleFieldChange.bind(this)
        this.handleUpdateArticle = this.handleUpdateArticle.bind(this)
        this.hasErrorFor = this.hasErrorFor.bind(this)
        this.renderErrorFor = this.renderErrorFor.bind(this)
      }

      handleFieldChange (event) {
        this.setState({
          [event.target.name]: event.target.value
        })
      }

      componentDidMount () {

        const articleId = this.props.match.params.id

        axios.get(`/api/article/edit/${articleId}`).then(response => {
          this.setState({
            title: response.data.title,
            content: response.data.content,
          })
        })
      }

      goToHome(){
        const getAlert = () => (
            <SweetAlert
                success
                title="Success!"
                onConfirm={() => this.onSuccess() }
                onCancel={this.hideAlert()}
                timeout={2000}
                confirmBtnText="Oke Siap"
                >
                {this.state.message}
            </SweetAlert>
          );
          this.setState({
            alert: getAlert()
          });
      }

      onSuccess() {
        this.props.history.push('/');
      }

      hideAlert() {
        this.setState({
          alert: null
        });
      }

      handleUpdateArticle (event) {
        event.preventDefault()

        const article = {
          title: this.state.title,
          content: this.state.content
        }

        const articleId = this.props.match.params.id

        axios.put(`/api/article/${articleId}`, article)
          .then(response => {
            // redirect to the homepage
            var msg = response.data.success;
            if(msg == true){
                this.setState({
                    message: response.data.message
                })
                return this.goToHome();
            }

          });
      }

      hasErrorFor (field) {
        return !!this.state.errors[field]
      }

      renderErrorFor (field) {
        if (this.hasErrorFor(field)) {
          return (
            <span className='invalid-feedback'>
              <strong>{this.state.errors[field][0]}</strong>
            </span>
          )
        }
      }

      render () {
        const { article } = this.state
        return (
          <div className='container py-4'>
            <div className='row justify-content-center'>
              <div className='col-md-6'>
                <div className='card'>
                  <div className='card-header'>Create new project</div>
                  <div className='card-body'>
                    <form onSubmit={this.handleUpdateArticle}>
                      <div className='form-group'>
                        <label htmlFor='title'>Title</label>
                        <input
                          id='title'
                          type='text'
                          className={`form-control ${this.hasErrorFor('title') ? 'is-invalid' : ''}`}
                          name='title'
                          value={this.state.title}
                          onChange={this.handleFieldChange}
                        />
                        {this.renderErrorFor('title')}
                      </div>
                      <div className='form-group'>
                        <label htmlFor='content'>Project content</label>
                        <textarea
                          id='content'
                          className={`form-control ${this.hasErrorFor('content') ? 'is-invalid' : ''}`}
                          name='content'
                          rows='10'
                          value={this.state.content}
                          onChange={this.handleFieldChange}
                        />
                        {this.renderErrorFor('content')}
                      </div>
                      <Link
                        className='btn btn-secondary'
                        to={`/`}
                        >Back
                      </Link>
                      &nbsp;
                      &nbsp;
                      <button className='btn btn-primary'>Update</button>
                      {this.state.alert}
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      }
    }
export default ArticleEdit

Buat lagi file baru bernama ArticleShow.js dan simpan di direktori resourses/js/components.

Ketik kode berikut ini:

import axios from 'axios'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

    class ArticleShow extends Component {
      constructor (props) {
        super(props)
        this.state = {
          article: {}
        }
      }

      componentDidMount () {

        const articleId = this.props.match.params.id

        axios.get(`/api/article/${articleId}`).then(response => {
          this.setState({
            article: response.data
          })
        })
      }

      render () {
        const { article } = this.state

        return (
          <div className='container py-4'>
            <div className='row justify-content-center'>
              <div className='col-md-8'>
                <div className='card'>
                  <div className='card-header'>Judul Artikel: {article.title}</div>
                  <div className='card-body'>
                    <p>{article.content}</p>
                    <Link
                        className='btn btn-primary'
                        to={`/`}
                        >Back
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
      }
    }

export default ArticleShow

Step 6 – Buat Halaman View

Buat file baru bernama app.blade.php dan simpan di direktori resource/views.

Sekarang ketik kode berikut:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>React Laravel</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app"></div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Simpan.

Step 7 – Edit app.js

Silahkan buka file resources/js/app.js kemudian cari kode berikut:

require('./components/Example'); 

Ubah menjadi kode berikut:

require('./components/App'); 

Simpan.

Fungsinya agar antara file resourses/js/app.js dan resourses/js/components/App.js terhubung.

Step 8 – Testing CRUD Laravel 7 dan React Js

Ketik command berikut untuk menginstall perubahan yang terjadi:

npm run dev

Kemudian ketik command berikut:

php artisan serve

URL Halaman Index:

localhost:8000

Hasilnya:

Tutorial CRUD Menggunakan Laravel 7 dan React Js - Bagian 1

URL Halaman Create:

localhost:8000/create

Hasilnya:

halaman create

URL Halaman Edit:

localhost:8000/article/edit/{id}

Hasilnya:

halaman edit

URL Halaman Detail:

localhost:8000/article/{id}

Hasilnya:

halaman detail

Hapus Artikel:

Tutorial CRUD Menggunakan Laravel 7 dan React Js - Bagian 4

Apa Selanjutnya

Alhamdulillah, di artikel yang cukup panjang ini telah terselesaikan juga.

… tapi jangan puas dulu.

Sebab masih ada yang perlu dipelajari, di antaranya:

  1. Tutorial CRUD Menggunakan Laravel 7 dan Vue Js
  2. Cara Install dan Menggunakan Bootstrap 4 di Laravel 7
  3. … dan masih banyak lagi.

Selamat belajar …

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

18 Replies to “Tutorial CRUD Menggunakan Laravel 7 dan React Js”

  1. Mas punya saya salah dibagian App.js yang ada di direktori resouces/js/components. waktu menjalankan perintah npm run dev gagal. Untuk semua script saya copas. bisa minta bantuan

  2. Mantap kak.. Lagi ekplor laravel 7 dan reactjs biar bisa satu folder project. Saya coba berhasil.
    Selama ini saya pisah project backend dan frontendnya. Itupun masih laravel versi 5

  3. mantap bang…
    kalau boleh kasih saran, tolong dijelaskan maksud dan tujuan dari setiap source code agar para pembaca bisa lebih memahami source codenya.

  4. testing berhasil, mantap, terimakasih telah berbagi
    request bang, tutorial Laravel 7 react js dipadu dengan admin template CoreUI free.

  5. mas kalo kita rubah sintaknya engga auto refes ya harus kompile npm run dev

  6. mas klo awalnya saya instal reactjs dlu terus laravel gimana tuh ntar pas ngekonfigurasi CRUD nya?masih belum paham saya

    1. Ikuti aturan main saja sesuai dengan artikel ini, Mas.

      Jika masih keberatan, copas seluruh kode yang di reactnya ke laravel react

      Semoga membantu …

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.