<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

@extends('layouts.app')

@section('content')

<div class="container">
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">Dashboard</div>

            <div class="card-body">
                @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                @endif

                Has iniciado sesion
            </div>
        </div>
    </div>
</div>
</div>
<br></br>
<center><div class="w3-container">

<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink w3-red"
onclick="opentab(event,'London')">Meter datos</button>
<button class="w3-bar-item w3-button tablink"
onclick="opentab(event,'Paris')">Ver datos</button>
</div></center>

<div id="London" class="w3-container w3-border city">
<div class="row">

<div class="col-md-12">
<br />
<center><h3>Meter datos del producto</h3></center>
<br />
<form method="post" action="{{url('home/sendData')}}">
{{csrf_field()}}
<div class="form-group" align="center">
<input type="text" name="nombre" class="form-control" placeholder="Coloque el nombre del producto" />
</div>
<div class="form-group" align="center">
<input type="number" name="precio" class="form-control" placeholder="Coloque el precio" />
</div>
<div class="form-group" align="center">
<input type="text" name="empresa" class="form-control" placeholder="Coloque el nombre de la empresa" />
</div>
<div class="form-group" align="center">
<input type="submit" class="btn btn-primary" />
</div>

</form>

</div>
</div>

</div>

<div id="Paris" class="w3-container w3-border city" style="display:none">
<h2>Productos actuales </h2>
        <table class="table table-bordered" id="table">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Nombre</th>
                 <th>Precio</th>
                 <th>Empresa</th>
              </tr>
           </thead>
        </table>
     </div>
   <script>
     $(function() {
           $('#table').DataTable({
           processing: true,
           serverSide: true,
           ajax: '{{ url('home') }}',
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'nombre', name: 'nombre' },
                    { data: 'precio', name: 'precio' }
                    { data: 'empresa', name: 'empresa' }
                 ]
        });
     });
     </script>

<script>
function opentab(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
 }
 tablinks = document.getElementsByClassName("tablink");
 for (i = 0; i < x.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " w3-red";
  }
  </script>


@endsection

<?php

namespace AppHttpControllers;
use AppProduct;
use IlluminateHttpRequest;
use IlluminateSupportFacadesDB;
use YajraDataTablesFacadesDataTables;

class HomeController extends Controller
{
/**
 * Create a new controller instance.
 *
 * @return void
 */
public function __construct()
{
    $this->middleware('auth');
}

/**
 * Show the application dashboard.
 *
 * @return IlluminateHttpResponse
 */
public function index()
{
    return view('home');
    return Datatables::of(Product::query())->make(true);
}

public function sendData(Request $request){
    $this->validate($request, [
        'nombre'    =>  'required',
        'precio'     =>  'required',
        'empresa'     =>  'required'
    ]);

    $product = new product([
        'nombre'    =>  $request->get('nombre'),
        'precio'     =>  $request->get('precio'),
        'empresa'     =>  $request->get('empresa')
    ]);
    $product->save();
    return redirect()->route('home')->with('success', 'Data Added');
}

public function create()
{
    return view('home');
}


}

Route::get('/', function () {
return view('welcome');
});


Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::post('/home/sendData', 'HomeController@sendData')->name('home/sendData');

Route::get('/home/create', 'HomeController@create');
Route::get('/home/index', 'HomeController@index');

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Product extends Model
 {
 protected $fillable = ['nombre', 'precio', 'empresa'];
}

CREATE TABLE `products` (
`id` int(10) UNSIGNED NOT NULL,
`producto` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
`precio` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
`empresa` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;