adeguntoro/Database and Model

## Database and Model
//database
Schema::create('reseps', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('nama_masakan');
    $table->string('foto_masakan');
    $table->string('nama_kategori');
    $table->json('bahan');
    $table->longText('langkah');
    $table->timestamps();
});

//model
class Resep extends Model {
    protected $guarded  = [];
    protected $casts    = ['ingredients' => 'array'];
}

## index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ config('app.name') }}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">Recipe</div>
                        <div class="card-body">
                        <form action="{{ route('resep.store')}}" method="post">
                            @csrf
                            <table class="table table-bordered" id="ingredients">
                                <thead>
                                    <tr>
                                        <th>Total</th>
                                        <th>ingredients</th>
                                        <th>Option</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                            <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){

                var count = 1;
                dynamic_field(count);

                function dynamic_field(number) {
                    html = '<tr>';

                    html += '<td><input type="text" name="keperluan[]" class="form-control" /></td>';
                    html += '<td><input type="text" name="nama_bahan[]]" class="form-control" /></td>';

                    if(number > 1) {
                        html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
                        $('tbody').append(html);
                    } else {
                        html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
                        $('tbody').html(html);
                    }
                }

                $(document).on('click', '#add', function(){
                    count++;
                    dynamic_field(count);
                    console.log(count);
                });

                $(document).on('click', '.remove', function(){
                    count--;
                    $(this).closest("tr").remove();
                });

            });

        </script>
    </body>
</html>

## RecipeController.php
<?php

namespace App\Http\Controllers;

use App\Resep;
use Illuminate\Http\Request;

class ResepController extends Controller {

    public function index() {
        return view('resep.create2');
    }

    public function store(Request $request) {
        dd($request->all());
    }
}
	//database
	Schema::create('reseps', function (Blueprint $table) {
	$table->bigIncrements('id');
	$table->string('nama_masakan');
	$table->string('foto_masakan');
	$table->string('nama_kategori');
	$table->json('bahan');
	$table->longText('langkah');
	$table->timestamps();
	});

	//model
	class Resep extends Model {
	protected $guarded = [];
	protected $casts = ['ingredients' => 'array'];
	}
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{{ config('app.name') }}</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	</head>
	<body>
	<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
	<div class="container">
	<a class="navbar-brand" href="{{ url('/') }}">
	{{ config('app.name') }}
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<!-- Left Side Of Navbar -->
	<ul class="navbar-nav mr-auto">
	</ul>
	</div>
	</div>
	</nav>

	<div class="container">
	<div class="row justify-content-center">
	<div class="col-md-12">
	<div class="card">
	<div class="card-header">Recipe</div>
	<div class="card-body">
	<form action="{{ route('resep.store')}}" method="post">
	@csrf
	<table class="table table-bordered" id="ingredients">
	<thead>
	<tr>
	<th>Total</th>
	<th>ingredients</th>
	<th>Option</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>


	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){

	var count = 1;
	dynamic_field(count);

	function dynamic_field(number) {
	html = '<tr>';

	html += '<td><input type="text" name="keperluan[]" class="form-control" /></td>';
	html += '<td><input type="text" name="nama_bahan[]]" class="form-control" /></td>';

	if(number > 1) {
	html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
	$('tbody').append(html);
	} else {
	html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
	$('tbody').html(html);
	}
	}

	$(document).on('click', '#add', function(){
	count++;
	dynamic_field(count);
	console.log(count);
	});

	$(document).on('click', '.remove', function(){
	count--;
	$(this).closest("tr").remove();
	});

	});

	</script>
	</body>
	</html>
	<?php

	namespace App\Http\Controllers;

	use App\Resep;
	use Illuminate\Http\Request;

	class ResepController extends Controller {

	public function index() {
	return view('resep.create2');
	}

	public function store(Request $request) {
	dd($request->all());
	}
	}