Massassignmentexception In Laravel 5 Pdf

Laravel 5.5 Tutorial With Example From Scratch is Laravel 5.5 CRUD tutorial for beginners. Laravel has recently launched its new version called Laravel 5.5, and it is also come up with a bunch of new Features. Today, we are not discussing in depth new features of Laravel 5.5, just list them but rather than focusing on the coding in Laravel 5.5. It’s small application in Laravel 5.5. Laravel is most flexible and elegant PHP Framework so far and always come up with new things. Laravel is the best representation of PHP Language in my opinion. It is the by far most in built functionality Framework. Creator has seriously put his own heart to make it and right now maintaining. Every Laravel events, we will see there is always new and new coming ready with this Framework, and that is why It is the most trusted framework among the PHP Community. It provides us the power to whatever we can build and play with this structure, with in scope and also with out its scope if you have in-depth knowledge of Latest PHP version.

Content Overview

Laravel 5.5 New Features

  1. Custom validation rules object.
  2. Returns response data from the validator.
  3. Improvements with the default error views.
  4. Great support for the custom error reporting.
  5. Support for email themes in mailable.
  6. We can render mailable in the browser.
  7. Vendor packages have provider support.
  8. It adds front end presets, which means we can use Vue, React.js or none of them if we want.
  9. Laravel Migrate Fresh command.
  10. Whoops, which was there in Laravel 4.2 is back in Laravel 5.5
  11. Laravel Package Auto Discovery.

Installation Requirments

  • PHP >= 7.0.0
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
Note:  Here Laravel 5.5 requires PHP 7 or above version. If you have PHP version like 5.4, 5.5, 5.6, then It will not work. Please upgrade it to PHP 7

Laravel 5.5 CRUD Tutorial From Scratch

Step 1: Installing The Laravel 5.5 Framework.

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

It will create a directory and install all the Laravel specific dependencies.

Note: Here, we are not going to in detail about front end dependencies like Vue.js or React.js using Laravel Mix so, we are not going to install any of the Node dependencies right now.

Step 2: Setup a MySQL database in .env file.

Create one database in MySQL and then switch to your editor and open the .env file.

// .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Laravel55 DB_USERNAME=root DB_PASSWORD=mysql

I have setup my local database credentials. You just need to change last three constants and you are ready to go.

Now, migrate two tables provided by Laravel 5.5. Switch to your terminal and type following command.

php artisan migrate

It will create two tables in your database.

  1. users
  2. password_resets

Step 3: Create a model as well as migration file for our Products table.

Type the following command in your terminal.

php artisan make:model Product -m

It will create two files.

  1. Product.php model.
  2. create_products_table migration file.

We need to create Schema for the products table. So navigate to Laravel55  >>  database  >>  migrations  >>  create_products_table.

// create_products_table public function up() { Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->integer('price'); $table->timestamps(); }); }

So, for our products table, there will be 5 columns. timestamps() have 2 columns

  1. created_at
  2. updated_at

Now, migrate the table by the following command.

php artisan migrate

In the database, you can see the products table.

Step 4:  Make one view file to add the form data in the database.

Make one folder called products and then create a file in the resources  >>  views  >>  products  >>  create.blade.php and put the following code in it.

<!-- create.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laravel 5.5 CRUD Tutorial With Example From Scratch </title> <link rel="stylesheet" href="{{asset('css/app.css')}}"> </head> <body> <div class="container"> <h2>Create A Product</h2><br /> <form method="post"> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="price">Price:</label> <input type="text" class="form-control" name="price"> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-success" style="margin-left:38px">Add Product</button> </div> </div> </form> </div> </body> </html>

Step 5: Create one controller and route to display the Product form

Go to the terminal and type the following command.

php artisan make:controller ProductController --resource

It will create one controller file called ProductController.php and It has all the CRUD Functions, we need to seek.

Here, we have used resource parameter, so by default, It provides us some routing patterns,  but right now, we will not see until we register one route in routes  >>  web.php file. So let us do it.

// web.php Route::resource('products','ProductController');

Now, switch to your terminal and type the following command.

php artisan route:list

You will see following route list.

 

Next step would be to go to ProductController.php file and add into create() function some code.

// ProductController.php /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { return view('products.create'); }

After that, we need to start Laravel Development server. So in the terminal, hit the following command.

php artisan serve

Switch to the browser and hit this URL: http://localhost:8000/products/create
You will see the following screen.

Step 6: Put the Laravel 5.5 Validation in Product Form.

First, we need to apply an action to our product creation form.

<!-- create.blade.php --> <form method="post" action="{{url('products')}}">

Now, we need to handle CSRF issue. So, put the following code in the form

<!-- create.blade.php --> {{csrf_field()}}

We also need to handle Mass Assignment Exception. So we need to go to app  >>  Product.php  file and in that put the protected $fillable property in it.

// Product.php protected $fillable = ['name','price'];

If you see the resource routes then it has post request has ‘/products‘ route and store function in ProductController.php file. So we need to code the store function in order to save the data in the database.

One thing to keep in mind that, we need to include the namespace of Product.php model in the ProductController.php file. So type the following line at the starting of ProductController.php file.

use App\Product;

Also, we need to put the validation there.

Now, if validation fails then we need to show an error. So go back to create.blade.php and put the following code after h2 tag.

<!-- create.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laravel 5.5 CRUD Tutorial With Example From Scratch </title> <link rel="stylesheet" href="{{asset('css/app.css')}}"> </head> <body> <div class="container"> <h2>Create A Product</h2><br /> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div><br /> @endif @if (\Session::has('success')) <div class="alert alert-success"> <p>{{ \Session::get('success') }}</p> </div><br /> @endif <form method="post" action="{{url('products')}}"> {{csrf_field()}} <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="price">Price:</label> <input type="text" class="form-control" name="price"> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-success" style="margin-left:38px">Add Product</button> </div> </div> </form> </div> </body> </html>

At last, go to the browser and hit the development Laravel URL: http://localhost:8000

If you submit the form without any value then, you can see the errors like below image.

If you fill all the values then, you will redirect to this page with the success message. So, here One thing must be noticed.

In Laravel 5.5 we directly get the array of the values return by validation function and use it to insert in the database, which is new feature in Laravel 5.5

Step 7: Make an index page to list the products.

For that, first, we need to send the data to the index.blade.php. So, in ProductController.php file, we need to write the code to fetch the data and return it to the index view.

// ProductController.php /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $products = Product::all()->toArray(); return view('products.index', compact('products')); }

In resources  >>  views  >>  products, create one blade file called index.blade.php file and put the following code in it.

<!-- index.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index Page</title> <link rel="stylesheet" href="{{asset('css/app.css')}}"> </head> <body> <div class="container"> <br /> @if (\Session::has('success')) <div class="alert alert-success"> <p>{{ \Session::get('success') }}</p> </div><br /> @endif <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> <th colspan="2">Action</th> </tr> </thead> <tbody> @foreach($products as $product) <tr> <td>{{$product['id']}}</td> <td>{{$product['name']}}</td> <td>{{$product['price']}}</td> <td><a href="{{action('ProductController@edit', $product['id'])}}" class="btn btn-warning">Edit</a></td> <td> <form action="{{action('ProductController@destroy', $product['id'])}}" method="post"> {{csrf_field()}} <input name="_method" type="hidden" value="DELETE"> <button class="btn btn-danger" type="submit">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> </div> </body> </html>

So, when you hit the URL: http://localhost:8000/products

 

Step 8: Make an edit view for update the products.

Our step will be to add the edit function in ProductController.php file and put the following code in it.

// ProductController.php /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { $product = Product::find($id); return view('products.edit',compact('product','id')); }

Now, make an edit.blade.php file inside resources  >>  views  >>  products

<!-- edit.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Laravel 5.5 CRUD Tutorial With Example From Scratch </title> <link rel="stylesheet" href="{{asset('css/app.css')}}"> </head> <body> <div class="container"> <h2>Edit A Product</h2><br /> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div><br /> @endif <form method="post" action="{{action('ProductController@update', $id)}}"> {{csrf_field()}} <input name="_method" type="hidden" value="PATCH"> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="name">Name:</label> <input type="text" class="form-control" name="name" value="{{$product->name}}"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="price">Price:</label> <input type="text" class="form-control" name="price" value="{{$product->price}}"> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-success" style="margin-left:38px">Update Product</button> </div> </div> </form> </div> </body> </html>

A further step would be to code the update function.

Step 9: Delete the product.

// ProductController.php /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { $product = Product::find($id); $product->delete(); return redirect('products')->with('success','Product has been deleted'); }

Our Laravel 5.5 CRUD Tutorial With Example From Scratch is over. I put the Github Link over here.

Download On Github

Github Steps:

  1. Clone the repository.
  2. Type this command: composer update
  3. Configure the database in the .env file.
  4. Start the Laravel development server: php artisan serve
  5. Switch to the URL: http://localhost:8000/products/create

Laravel 5.5 ReactJS Tutorial topic, we will cover today. For the frontend framework, there are lots of ReactJS developers out there, who want to deep dive into Laravel PHP Framework and vice versa for Laravel Developers. So this tutorial is created because, from this tutorial, you will do the following things.

  1. How to connect Laravel API to ReactJS
  2. How to define Laravel and ReactJS Project structure.
  3. How to use Laravel Mix to make ReactJS Scaffold.

Content Overview

Prerequisites of Laravel ReactJS Tutorial

  1. Laravel 5.5 Tutorial With Example From Scratch
  2. ReactJS Tutorial For Beginners 2017

Laravel 5.5 React Preset

Laravel 5.5 ships with one add on called React Preset.

On any fresh Laravel application, you may use the command with the  option:

php artisan preset react

This command will create a basic scaffold for us. Now, let us start our project ReactJS Laravel Tutorial

Laravel 5.5 ReactJS Tutorial

Step 1: Install Laravel 5.5 and Configure the database.

Type the following command to get Laravel 5.5

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

After installation was done, we need to install the JavaScript dependencies of our project. By default, package.json file is there, so we just need to type the following command to get the NPM dependencies.

npm install

Now go to your database manager, for example, phpMyAdmin or MySQL work bench and create one database.

Go to .env file and enter your database credentials.

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

Next step, would be, go to the project root and open the terminal and type the following command.

php artisan migrate

It will create the two tables, which is by default ships by Laravel 5.5

Step 2: Make ReactJS Frontend For Laravel backend.

As we have discussed earlier, type the following command for React Preset.

php artisan preset react

In the terminal, you can see like this.

React scaffolding installed successfully.
Please run “npm install && npm run dev” to compile your new scaffolding.
Next, switch to the following structure directories.

ReactJSLaravelTutorial  >> resources  >>  assets  >>  js  there is one folder and two javascript files.

The folder name is components, which is react component and the second file is app.js other file is bootstrap.js

Go to the resources  >>  views  >>  welcome.blade.php file and copy the following code to it. Remove the existing code.

<!-- welcome.blade.php --> <!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"> <title>Laravel</title> <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"> </head> <body> <div id="example"></div> <script src="{{asset('js/app.js')}}" ></script> </body> </html>

Go to the CMD and type the following command.

npm run dev

It will compile all of our assets and put bundled javascript file into the public >> js  >>  app.js file.

Again, go to the CMD and type the following command.

php artisan serve

It will boot up a development server, which is started at port 8000

Step 3: We need to install some dependencies regarding reactjs.

The first thing we will install is a react-router package for routing our application. So type the following command.

npm install react-router@2.8.1

For better convenient experience, I have installed an old version of react-router.

Go to terminal and type the following command.

npm run watch

It will watch the changes done in the assets folder and recompile automatically.

We are modifying ReactJS by default scaffold and shape the project structure to our need.

First, copy the following code and paste it into the App.js file.

// app.js require('./bootstrap'); import React from 'react'; import { render } from 'react-dom'; import { Router, Route, browserHistory } from 'react-router'; import Example from './components/Example'; render(<Example />, document.getElementById('example'));

Next change is to modify the Example.js component, copy paste the following code in that file.

// Example.js import React, { Component } from 'react'; export default class Example extends Component { render() { return ( <div className="container"> <div className="row"> <div className="col-md-8 col-md-offset-2"> <div className="panel panel-default"> <div className="panel-heading">Example Component</div> <div className="panel-body"> I am an example component! </div> </div> </div> </div> </div> ); } }

After saving the file, Laravel Mix will recompile all of our assets and build successful bundled app.js file.

When you switch to the browser and refresh the page, you will see as it is, nothing changes, but we are now going through our flow, which is great news.

Now, we need to create one another component called Master.js inside components folder.

// Master.js import React, {Component} from 'react'; import { Router, Route, Link } from 'react-router'; class Master extends Component { render(){ return ( <div className="container"> <nav className="navbar navbar-default"> <div className="container-fluid"> <div className="navbar-header"> <a className="navbar-brand" href="#">AppDividend</a> </div> <ul className="nav navbar-nav"> <li className="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div> {this.props.children} </div> </div> ) } } export default Master;

Now, modify the app.js file and put this component as a root component.

// app.js require('./bootstrap'); import React from 'react'; import { render } from 'react-dom'; import { Router, Route, browserHistory } from 'react-router'; import Master from './components/Master'; render(<Master />, document.getElementById('example'));

Step 4: Configure the ReactJS routes for our application.

Create three components inside components folder.

  1. CreateItem.js
  2. DisplayItem.js
  3. EditItem.js

Make a CreateItem.js form to save the items data.

// CreateItem.js import React, {Component} from 'react'; class CreateItem extends Component { render() { return ( <div> <h1>Create An Item</h1> <form> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Name:</label> <input type="text" className="form-control" /> </div> </div> </div> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Price:</label> <input type="text" className="form-control col-md-6" /> </div> </div> </div><br /> <div className="form-group"> <button className="btn btn-primary">Add Item</button> </div> </form> </div> ) } } export default CreateItem;

In app.js, we need to configure the routes.

// app.js require('./bootstrap'); import React from 'react'; import { render } from 'react-dom'; import { Router, Route, browserHistory } from 'react-router'; import Master from './components/Master'; import CreateItem from './components/CreateItem'; render( <Router history={browserHistory}> <Route path="/" component={Master} > <Route path="/add-item" component={CreateItem} /> </Route> </Router>, document.getElementById('example'));

If you have done all correct and save the file, then Laravel Mix recompile it and if you have not started the Laravel development server, then please start it by php artisan serve

Switch the browser to this URL: http://localhost:8000/

Now, click the CreateItem link, you will see the following screen.

Your URL will like this: http://localhost:8000/add-item

Step 5: Use axios to make AJAX Post request to the Laravel 5.5 Development Server.

Add some events to get the input data from the form and send the AJAX post request to the server.

// CreateItem.js import React, {Component} from 'react'; class CreateItem extends Component { constructor(props){ super(props); this.state = {productName: '', productPrice: ''}; this.handleChange1 = this.handleChange1.bind(this); this.handleChange2 = this.handleChange2.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange1(e){ this.setState({ productName: e.target.value }) } handleChange2(e){ this.setState({ productPrice: e.target.value }) } handleSubmit(e){ e.preventDefault(); const products = { name: this.state.productName, price: this.state.productPrice } let uri = 'http://localhost:8000/items'; axios.post(uri, products).then((response) => { // browserHistory.push('/display-item'); }); } render() { return ( <div> <h1>Create An Item</h1> <form onSubmit={this.handleSubmit}> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Name:</label> <input type="text" className="form-control" onChange={this.handleChange1}/> </div> </div> </div> <div className="row"> <div className="col-md-6"> <div className="form-group"> <label>Item Price:</label> <input type="text" className="form-control col-md-6" onChange={this.handleChange2}/> </div> </div> </div><br /> <div className="form-group"> <button className="btn btn-primary">Add Item</button> </div> </form> </div> ) } } export default CreateItem;

Step 6: Make Laravel 5.5 Backend

Next step would be from moving ReactJS to Laravel and make a backend for our project. We will use Web routes for this project, so we need to put all of our routes in the routes  >>  web.php file.

We will perform CRUD operations on items data. So first let’s define the schema for it. Then we create controller and routes.

Switch to your command line interface and type the following command.

php artisan make:model Item -m

It creates two files.

  1. Model file.
  2. Migration file.

Navigate to the migration file in the database  >>  migrations  >>  create_items_table and copy the following code into it.

<?php // create_items_table use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateItemsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('items', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->integer('price'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('items'); } }

Switch to the command line and type the following command.

php artisan migrate

It creates the items table in the database. Also, one model file Item.php is created which is in the app folder.

Also, create one resource controller called ItemController by the hitting following command.

php artisan make:controller ItemController --resource

ItemController contains all its functions of CRUD operations. We just need to put the code in it. I am right now putting the whole file with all the functions in it.

<?php // ItemController.php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Item; class ItemController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $items = Item::all(); return response()->json($items); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { $item = new Item([ 'name' => $request->get('name'), 'price' => $request->get('price') ]); $item->save(); return response()->json('Successfully added'); } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { $item = Item::find($id); return response()->json($item); } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { $item = Item::find($id); $item->name = $request->get('name'); $item->price = $request->get('price'); $item->save(); return response()->json('Successfully Updated'); } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { $item = Item::find($id); $item->delete(); return response()->json('Successfully Deleted'); } }

We also need to create protected $fillable field in Item.php file otherwise ‘mass assignment exception‘ will be thrown.

<?php // Item.php namespace App; use Illuminate\Database\Eloquent\Model; class Item extends Model { protected $fillable = ['name', 'price']; }

Update the routes >> web.php file.

<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::resource('items', 'ItemController');

Now, if you try to insert the values in the database, you might face the following issue.

Possible Errors: XMLHttpRequest cannot load http://localhost:8000/items. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 500.

This error is caused by CORS security. When Browser hits the request to another domain, by default, it denies the request.

We need to allow this origin to Laravel server side. So we need to create one middleware at the backend and apply this middleware to every API request. By putting this middleware, we are explicitly told Laravel that we are allowing this request to access our resources.

Download the following Laravel Specific CORS package to avoid this issue and follow the steps.

composer require barryvdh/laravel-cors

Add the Cors\ServiceProvider to your  provider’s array

Barryvdh\Cors\ServiceProvider::class,

To allow CORS for all your routes, add the  middleware in the  property of class:

protected $middleware = [ // ... \Barryvdh\Cors\HandleCors::class, ];

You can publish the config using this command:

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

Now, try again, it will save the data into the database. I have not set the redirect after saving the data but will set in short, while you can check the values in the database.

Step 7: Display the data into ReactJS Frontend

Make DisplayItem.js component inside components folder.

// DisplayItem.js import React, {Component} from 'react'; import axios from 'axios'; import { Link } from 'react-router'; import TableRow from './TableRow'; class DisplayItem extends Component { constructor(props) { super(props); this.state = {value: '', items: ''}; } componentDidMount(){ axios.get('http://localhost:8000/items') .then(response => { this.setState({ items: response.data }); }) .catch(function (error) { console.log(error); }) } tabRow(){ if(this.state.items instanceof Array){ return this.state.items.map(function(object, i){ return <TableRow obj={object} key={i} />; }) } } render(){ return ( <div> <h1>Items</h1> <div className="row"> <div className="col-md-10"></div> <div className="col-md-2"> <Link to="/add-item">Create Item</Link> </div> </div><br /> <table className="table table-hover"> <thead> <tr> <td>ID</td> <td>Item Name</td> <td>Item Price</td> <td>Actions</td> </tr> </thead> <tbody> {this.tabRow()} </tbody> </table> </div> ) } } export default DisplayItem;

Now, make TableRow.js component.

// TableRow.js import React, { Component } from 'react'; class TableRow extends Component { render() { return ( <tr> <td> {this.props.obj.id} </td> <td> {this.props.obj.name} </td> <td> {this.props.obj.price} </td> <td> <button className="btn btn-primary">Edit</button> </td> <td> <button className="btn btn-danger">Delete</button> </td> </tr> ); } } export default TableRow;

Register this route in our application.

// app.js import DisplayItem from './components/DisplayItem'; render( <Router history={browserHistory}> <Route path="/" component={Master} > <Route path="/add-item" component={CreateItem} /> <Route path="/display-item" component={DisplayItem} /> </Route> </Router>, document.getElementById('example'));

One thing we need to change is that, when we save the data, we need to redirect to this component. So in CreateItem.js file, we need to modify a bit of code.

// CreateItem.js import {browserHistory} from 'react-router'; axios.post(uri, products).then((response) => { browserHistory.push('/display-item'); });

Step 8: Edit and Update the data.

Make EditItem.js component inside components folder.

// EditItem.js import React, {Component} from 'react'; import axios from 'axios'; import { Link } from 'react-router'; class EditItem extends Component { constructor(props) { super(props); this.state = {name: '', price: ''}; this.handleChange1 = this.handleChange1.bind(this); this.handleChange2 = this.handleChange2.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } componentDidMount(){ axios.get(`http://localhost:8000/items/${this.props.params.id}/edit`) .then(response => { this.setState({ name: response.data.name, price: response.data.price }); }) .catch(function (error) { console.log(error); }) } handleChange1(e){ this.setState({ name: e.target.value }) } handleChange2(e){ this.setState({ price: e.target.value }) } handleSubmit(event) { event.preventDefault(); const products = { name: this.state.name, price: this.state.price } let uri = 'http://localhost:8000/items/'+this.props.params.id; axios.patch(uri, products).then((response) => { this.props.history.push('/display-item'); }); } render(){ return ( <div> <h1>Update Item</h1> <div className="row"> <div className="col-md-10"></div> <div className="col-md-2"> <Link to="/display-item" className="btn btn-success">Return to Items</Link> </div> </div> <form onSubmit={this.handleSubmit}> <div className="form-group"> <label>Item Name</label> <input type="text" className="form-control" value={this.state.name} onChange={this.handleChange1} /> </div> <div className="form-group"> <label name="product_price">Item Price</label> <input type="text" className="form-control" value={this.state.price} onChange={this.handleChange2} /> </div> <div className="form-group"> <button className="btn btn-primary">Update</button> </div> </form> </div> ) } } export default EditItem;

Now, register this route in the app.js file.

// app.js import EditItem from './components/EditItem'; render( <Router history={browserHistory}> <Route path="/" component={Master} > <Route path="/add-item" component={CreateItem} /> <Route path="/display-item" component={DisplayItem} /> <Route path="/edit/:id" component={EditItem} /> </Route> </Router>, document.getElementById('example'));

We need to update the TableRow.js component file.

<Link to={"edit/"+this.props.obj.id} className="btn btn-primary">Edit</Link>

Step 9: Delete The Data.

For delete the data, we just need to define the delete function in the TableRow.js file.

// TableRow.js import React, { Component } from 'react'; import { Link, browserHistory } from 'react-router'; class TableRow extends Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { event.preventDefault(); let uri = `http://localhost:8000/items/${this.props.obj.id}`; axios.delete(uri); browserHistory.push('/display-item'); } render() { return ( <tr> <td> {this.props.obj.id} </td> <td> {this.props.obj.name} </td> <td> {this.props.obj.price} </td> <td> <Link to={"edit/"+this.props.obj.id} className="btn btn-primary">Edit</Link> </td> <td> <form onSubmit={this.handleSubmit}> <input type="submit" value="Delete" className="btn btn-danger"/> </form> </td> </tr> ); } } export default TableRow;

So, finally our Laravel 5.5 ReactJS Tutorial CRUD Operations From Scratch is over.

Fork Me On Github

If you have any doubt then ask in a comment below.

0 Thoughts to “Massassignmentexception In Laravel 5 Pdf

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *