Really scratching my head on this one. I'm hoping a fresh pair of eyes can spot my error.
I've got a section heading on each page, but the heading is only showing on home.blade.php but not other pages.
master.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, shrink-to-fit=no" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>#yield('title')</title>
#stack('styles')
</head>
<body class="bg-light">
<div class="container-fluid h-100">
#yield('app')
</div>
#include('sweetalert::alert')
{{ Session::forget('alert') }}
#stack('scripts')
</body>
</html>
app.blade.php
#extends('layout.master')
#prepend('styles')
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/overrides.css') }}" />
#endprepend
#section('app')
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
#if (Request::path() === '/')
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4> <!-- [my #yield directive is here] -->
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
#endif
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content')
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
#endsection
#prepend('scripts')
#include('layout.js.footer-js')
#yield('form-js')
#endprepend
home.blade.php
#extends('layout.app')
#section('title', 'Asset Management')
#section('content-heading', 'View All Assets') //This works
#section('content')
<div class="table-responsive">
<table class="table table-striped text-nowrap">
<caption>Recently Added Assets</caption>
<thead>
<tr>
<th scope="col">Tag #</th>
<th scope="col">Type</th>
<th scope="col">Device</th>
<th scope="col">Serial #</th>
<th scope="col">Assigned</th>
<th scope="col">To</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
#foreach ($assets as $asset)
<tr>
<td>{{ $asset->asset_tag }}</td>
<td>{{ $asset->cat_name }}</td>
<td>{{ $asset->man_name }} {{ $asset->model_name }}</td>
<td>{{ $asset->serial }}</span></td>
<td>{{ \Carbon\Carbon::parse($asset->assign_date)->format('D M d, Y g:iA') }}</td>
<td>{{ $asset->name }}</td>
<td>{{ $asset->status }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endsection
#section('form-js')
#endsection
#push('scripts')
#endpush
My other pages are all laid out the same as home.blade.php, e.g:
#extends('layout.app')
#section('title', 'Checkout Asset')
#section('content-heading', 'Checkout Asset') //Does not output to template
#section('content')
Content here...
#endsection
#push('scripts')
#endpush
Why is <h4>#yield('content-heading')</h4> only working on home.blade.php?
The code which displays #yield('content-heading') is wrapped in:
#if (Request::path() === '/')
...
#endif
which is restricting the display to just that url.
:)
Related
View
#extends('dashboard.app' , ['title'=>'Faculties'] )
#section('body')
<div class="d-grid gap-2 d-md-flex justify-content-md-end ">
<!-- Button trigger modal -->
<button class="btn btn-outline-success me-md-2 rounded-pill" data-bs-toggle="modal"
data-bs-target="#addBtn" style="width:80px;" type="button"> + Add
</button>
</div>
<br>
#if(session()->has('message'))
#if(session('type') =='error')
<div class="alert alert-light-danger alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
aria-hidden="true"></button>
</div>
#endif
#if(session('type') == 'success')
<div class="alert alert-light-success alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
aria-hidden="true"></button>
</div>
#endif
#endif
{!! $html->table([],true) !!}
{{--Create Faculty Table --}}
{{-- <table class="table table-striped table-hover table-bordered col-12 shadow p-3 mb-5 rounded">--}}
{{-- <thead>--}}
{{-- <tr>--}}
{{-- <th scope="col" class="col-1"> SR NO</th>--}}
{{-- <th scope="col" class="col-6"> Faculty Name--}}
{{-- <span style="text-align:right;">--}}
{{-- <i class="bi bi-arrow-up-circle-fill "--}}
{{-- data-toggle="tooltip" data-placement="top" title="Sort Ascending order">--}}
{{-- </i>--}}
{{-- <i class="bi bi-arrow-down-circle-fill "--}}
{{-- data-toggle="tooltip" data-placement="top" title="Sort Descending order">--}}
{{-- </i>--}}
{{-- </span>--}}
{{-- </th>--}}
{{-- <th scope="col" class="col-1"> No Of Departments</th>--}}
{{-- <th scope="col" class="col-3" style="text-align: right;"> Actions  </th>--}}
{{-- </tr>--}}
{{-- </thead>--}}
{{-- <tbody>--}}
{{-- #foreach( $faculties as $faculty)--}}
{{-- <tr>--}}
{{-- --}}{{-- <input type="hidden" class="deleteValueID" value="{{ $counter }}">--}}
{{-- <td scope="row"> {{ $faculty->id }} </td>--}}
{{-- --}}{{-- <input type="hidden" class="deleteValue" value="{{ $faculty->name }}">--}}
{{-- <td class="overflow-hidden" data-toggle="tooltip" data-placement="top"--}}
{{-- title="{{ $faculty->name }}">--}}
{{-- {{ $faculty->name }} </td>--}}
{{-- <td> {{ $faculty->departments->count() }} </td>--}}
{{-- <td class="d-md-flex justify-content-md-end ">--}}
{{-- <button type="" class="btn btn-outline-success rounded-circle btn-sm"--}}
{{-- data-toggle="tooltip" data-placement="top" title="Add Departments">--}}
{{-- <i class="bi bi-file-plus"> </i></button>--}}
{{--  --}}
{{-- <button type="" class="btn btn-outline-primary rounded-circle btn-sm editData"--}}
{{-- data-bs-toggle="modal"--}}
{{-- data-bs-target="#editModal"--}}
{{-- data-toggle="tooltip"--}}
{{-- data-placement="top"--}}
{{-- title="Edit Faculty">--}}
{{-- <i class="bi bi-pen"> </i></button>--}}
{{--  --}}
{{-- --}}{{-- <form action="{{ url('admin/faculties', $faculty->id) }}" method="post">--}}
{{-- <form action="{{ route('faculties.destroy', $faculty->id) }}" method="post">--}}
{{-- #csrf--}}
{{-- #method('delete')--}}
{{-- <button type="submit"--}}
{{-- onclick="return confirm('Do you want to delete {{ $faculty->name }} ')"--}}
{{-- class="btn btn-outline-danger rounded-circle btn-sm deletebtn"--}}
{{-- data-toggle="tooltip" data-placement="top" title="Delete Faculty">--}}
{{-- <i class="bi bi-trash"> </i></button>--}}
{{-- </form>--}}
{{--  --}}
{{-- <a href="{{ url('admin/faculties', $faculty->id) }}"--}}
{{-- class="btn btn-outline-secondary rounded-circle btn-sm"--}}
{{-- data-toggle="tooltip" data-placement="top" title="View">--}}
{{-- <i class="bi bi-eye-fill"> </i> </a>--}}
{{-- </td>--}}
{{-- </tr>--}}
{{-- #endforeach--}}
{{-- </tbody>--}}
{{-- </table>--}}
{{-- Faculty Table Ended --}}
{{-- </div>--}}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
app
<!DOCTYPE html>
<html>
#include('dashboard.head_section', ['title' => "$title"])
<body class="bg-light">
<div class="row" id="app">
#include('dashboard.navbar')
<div class="col-10" id="main">
<!-- header image and heading -->
#include('dashboard.header')
{{-- Main body of users list page started--}}
<div class="card ">
<div class="card-header">
<h2 class="font-weight-bold" style="font-weight: bold;">{{ $title }}</h2>
</div>
<div class="card-body">
#section('body')
#show
</div>
</div>
</div>
</div>
</body>
</html>
Controller
if (request()->ajax()) {
// dd('test');
return DataTables::of(Faculty::query())
->setRowClass(function ($faculty){
return $faculty->id % 2 == 0 ? 'alert-success' : 'alert-warning';
})
->setRowId(function ($faculty){
return $faculty->id;
})
->setRowAttr([
'align' => 'center'
])
->addColumn('action', '<button>kljsfd b</button>')
->editColumn('created_at', function($faculty){
return $faculty->created_at->diffForHumans();
})
->editColumn('updated_at', function($faculty){
return $faculty->updated_at->diffForHumans();
})
->make(true);
}
$html = $builder
->parameters([
'searching' => true,
'deferRender' => true,
'scrollY' => true,
'stateSave' => true,
'pagingType' => 'full_numbers',
'renderer' => 'bootstrap',
'scrollCollapse' => true,
// 'search.search' => 'Fac'
'fixedHeader.header' => true,
'responsive' => true,
// 'scroller' => true,
// 'scrollY' => 450,
'select' => true,
'select.className' => 'alert alert-success',
'select.blurable' => true,
// 'drawCallback' => 'function() { alert("Table Draw Callback") }',
// 'initComplete' => "function () {
// this.api().columns().every(function () {
// var column = this;
// var input = document.createElement(\"input\");
// $(input).appendTo($(column.footer()).empty())
// .on('keyup', function () {
// column.search($(this).val(), false, false, true).draw();
// });
// });
// }",
])
->columns([
['data' => 'id', 'name' => 'id', 'title' => 'Sr. #'],
['data' => 'name', 'name' => 'name', 'title' => 'Name'],
['data' => 'created_at', 'name' => 'created_at', 'title' => 'Created At'],
['data' => 'updated_at', 'name' => 'updated_at', 'title' => 'Updated At'],
['data' => 'action', 'name' => 'action', 'title' => 'Action', 'orderable' => false, 'printable' => false],
]);
return view('admin.faculties.index', compact('html'));
Page is visible table is rendering too but theres no ajax request
Head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>STMS - {{ $title }} </title>
<link rel="stylesheet" href="{{ asset('assets/bootstrap5/css/bootstrap.min.css') }}">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="{{ asset('assets/bootstrap5/js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ asset('assets/bootstrap5/custom.css') }}">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/datatables/datatables.min.css') }}">
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
</head>
Same thing works on other project and on other page in same project...
Working one...
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Builder</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/datatables/datatables.min.css') }}">
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
</head>
<body>
<div class="container">
#section('contents')
#show
</div>
#stack('scripts')
</body>
</html>
#extends('test.app')
#section('contents')
{!! $html->table([],true) !!}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
htmlBuilder
#extends('test.app')
#section('contents')
{!! $html->table([],true) !!}
#endsection
#push('scripts')
{!! $html->scripts() !!}
#endpush
Conrtoller is same
On same controller it works on one file but not on other file...
I have tried to replace all js and bootstrap through CDN and copy pasted same of working one but same issue... it also do not give any error...
As indicated I have 2 tables that have similar content... the only difference is the 'watchlist has an extra 'reason field
what I'm trying to achieve is moving the selected data from 1 table to another table and adding ...
so the process is like
I need to select the row of data and click the button 'add to watchlist ' and input the 'reason' then submit the form. but after I have to click the submit button the following error occurs.. may I ask what part I miss? sorry, I'm just new in Laravel .. Really appreciate any help.
here is my controller
public function AddToWatchlist(Request $request, $id)
{
$watchlist = new watchlist();
//Select the data from visitor
$record = DB::table('visitors')
->select('firstname')
->select('lastname')
->select('email')
->select('phonenumber')
->where('id',$id)
->first();
//Insert data from visitor to watchlist
DB::table('watchlist')->insert([
'firstname' => $record->firstname,
'lastname' => $record->lastname,
'email' => $record->email,
'phonenumber' => $record->phonenumber,
'reason' => $request->reason
]);
//Delete the data from visitor after shifted
$record->delete();
$watchlist->save();
return redirect('visitor.visitorlist')>with('status','Student Image Added Successfully' );
}
my viewpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if(session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"></td>
<td>{{ $item->id}}</td>
<td>{{ $item->firstname}}</td>
<td>{{ $item->lastname}}</td>
<td>{{ $item->email}}</td>
<td>{{ $item->phonenumber}}</td>
<!-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> -->
</tr>
#endforeach
</tbody>
</table>
<!-- Modal -->
<form action="{{ url('addtowatch/'.$visitor->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to watchlist</label>
<input type="text" name="reason " class="form-control" name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
my web.php code
Route::post('addtowatch/{id}', [WatchlistController::class, 'AddToWatchlist']);
update new problem
now the problem are being solve but there is no error ,on getting the property item of 'firstname'.. any idea ?
ok i got your point.
Please use the laravel comment {{-- body --}} instead of the because it is the blade template engine, not your html file.
Your mistake is that you call the modal outside your foreach loop,
so that the visitor id not found because it is the array not model.
so...
Replace your blade file code with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
#if (session('status'))
<h6 class="alert alert-success">{{ session('status') }}</h6>
#endif
<div class="card">
<div class="card-header">
<h4> Visitor List</h4>
Add Visitor
<a href="{{ url('addwatchlist') }}" class="btn btn-primary float-end" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Add to watchlist
</a>
</div>
<div class="card-body">
<table class="table table-borderd table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody>
#foreach ($visitor as $item)
<tr>
<td><input class="form-check-input" type="checkbox" value=""
id="flexCheckDefault"></td>
<td>{{ $item->id }}</td>
<td>{{ $item->firstname }}</td>
<td>{{ $item->lastname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phonenumber }}</td>
{{-- <td>
<form action="{{ url('delete-student/'.$item->id) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>`
</form>
</td> --}}
</tr>
<!-- Modal -->
<form action="{{ url('addtowatch/' . $item->id) }}" method="POST">
#csrf
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="reason"> Indicate the reason for adding to
watchlist</label>
<input type="text" name="reason " class="form-control"
name="reason">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</form>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js"></script>
</body>
</html>
I want my modal to pop-up in a blade when the quantity of a stock item is below a specific number like 5. I have the modal but I don't know how to call/instantiate it. Help me please.
https://laracasts.com/discuss/channels/laravel/models-views-controllers There wasn't a solution in this dicussion, thats why I pleading for your assistance.
Here is my modal in index.blade.php:
<div class="modal fade" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content bg-danger">
<div class="modal-header">
<h4 class="modal-title">Danger Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Here is my controller:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sales Report</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
</head>
<body>
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<caption><h3>Sales Report</h3></caption>
<thead>
<tr>
<th>Sales ID</th>
<th>Stock ID</th>
<th>Product Name</th>
<th>Sale Quantity</th>
<th>Unit Selling Price</th>
<th>Total Sales Cost</th>
<th>Sold On</th>
</tr>
</thead>
<tbody>
#foreach($sales as $key => $sale)
<tr>
<td>{{$sale->sales_id}}</td>
<td>{{$sale->stock_id}}</td>
<td>{{$sale->product_name}}</td>
<td>{{$sale->sale_quantity}}</td>
<td>{{$sale->unit_selling_price}}</td>
<td>{{$sale->total_sales_cost}}</td>
<td>{{$sale->updated_at}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
</html>
Here is screenshot of the stock table:
screenshot of the stock table
I believe you have a controller to return your view. So, just count the stock items and return it as a variable to your view, like this:
$items = Stock::count();
return view('your-view')->with([
'itemsCount' => $items,
]);
Then, in your view, do something like this:
<input type='hidden' value='{{ $itemsCount }}' id="items-count">
<script>
$(document).ready(function(){
if($("#items-count").val() < 5) {
$("#your-modal-id").modal("show");
}
});
</script>
Update
To count a specific stock;
$items = Stock::where('stock_name', $stockName)->first()->stock_quantity;
//If you want to count every single stock, just do it with a for or foreach loop
return view('your-view')->with([
'itemsCount' => $items,
]);
Hope this helps.
I hosted my Laravel Project to 000webhost, my project can make report in pdf format. I use dompdf to do all pdf things. When in my localhost server (xampp), dompdf works fine with no error and rendering html very well. In live server i got error 500 "Whoops, something went wrong on our servers.". I can't find any solution, i thought it was execution time, i rise it to 2000 seconds still got 500.
here is my controller
public function retur_preport(Request $request)
{
ini_set('max_execution_time', '2000');
ini_set('memory_limit','512M');
$tgl1 = date('Y-m-d', strtotime($request->input('tanggal_mulai')));
$tgl2 = date('Y-m-d', strtotime($request->input('sampai_tanggal')));
if($tgl1 > date('Y-m-d') || $tgl2 > date('Y-m-d')){
return redirect('upper/laporan/retur')->with('error','Tanggal yang diinput tidak bisa lebih besar dari '.date('d M Y').' (hari ini)');
}elseif($tgl2 != '1970-01-01' && $tgl1 > $tgl2){
return redirect('upper/laporan/retur')->with('error','Tanggal mulai tidak bisa lebih besar dari inputan tanggal sampai');
}elseif($tgl1 == '1970-01-01' && $tgl2 == '1970-01-01'){
return redirect('upper/laporan/retur')->with('error','Salah satu dari kedua tanggal harus diisi');
}elseif($tgl1 == '1970-01-01'){
$r = \App\Retur::whereDate('tgl_retur',$tgl2)->orderBy('tgl_retur','desc')->get();
$pdf = PDF::loadview('pimpinan/laporan/retur/report', compact('r','tgl1','tgl2'))->setPaper('a4','landscape');
return $pdf->download('laporan retur tanggal '.date('d-M-Y', strtotime($tgl2)).'.pdf');
}elseif($tgl2 == '1970-01-01'){
$r = \App\Retur::whereBetween('tgl_retur',[$tgl1, date('Y-m-d')])->orderBy('tgl_retur','desc')->get();
$pdf = PDF::loadview('pimpinan/laporan/retur/report',compact('r','tgl1','tgl2'))->setPaper('a4','landscape');
return $pdf->download('laporan retur tanggal '.date('d-M-Y', strtotime($tgl1)).' sampai tanggal '.date('d-M-Y').'.pdf');
}else{
$r = \App\Retur::whereBetween('tgl_retur',[$tgl1,$tgl2])->orderBy('tgl_retur','desc')->get();
$pdf = PDF::loadview('pimpinan/laporan/retur/report', compact('r','tgl1','tgl2'))->setPaper('a4','landscape');
return $pdf->download('laporan retur tanggal '.date('d-M-Y', strtotime($tgl1)).' sampai tanggal '.date('d-M-Y', strtotime($tgl2)).'.pdf');
}
}
and here is my html that rendered from controller
<html>
<head>
<link rel="stylesheet" href="{{ asset('assets') }}/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ asset('assets') }}/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('assets') }}/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('assets') }}/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{{ asset('assets') }}/dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<style>
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
table, td, th, tr, thead, tbody {
border: 1px solid black !important;
}
</style>
</head>
<body>
<div class="content-header row text-center">
<img src="{{ asset('uploads') }}/kadatuan_logo/logo.jpg" width="120" height="120"><br>
Jl. Karawitan No. 48, Bandung
</div>
<section class="content">
<div class="box box-primary box-solid">
<div class="box-header">
Laporan Retur
#if($tgl1 == '1970-01-01')
Tanggal <strong>{{ date('d-M-Y', strtotime($tgl2)) }}</strong>
#elseif($tgl2 == '1970-01-01')
Tanggal <strong>{{ date('d-M-Y', strtotime($tgl1)) }}</strong> Sampai <strong>{{ date('d-M-Y') }}</strong>
#else
Tanggal <strong>{{ date('d-M-Y', strtotime($tgl1)) }}</strong> Sampai <strong>{{ date('d-M-Y', strtotime($tgl2)) }}</strong>
#endif
<div class="pull-right">Dicetak pada tanggal <strong>{{ date('d-M-Y') }}</strong></div>
</div>
<div class="box-body">
<div class="d-flex justify-content-center">
<table class="table text-center">
<thead>
<tr>
<th>No</th>
<th>ID Pemesanan</th>
<th>ID Retur</th>
<th>Tanggal Retur</th>
<th>Nama Mitra</th>
<th>Barang Retur</th>
<th>Jumlah Retur</th>
<th>Status Retur</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
#foreach ($r as $row)
<tr>
<td rowspan="{{ \App\DRetur::where('id_retur',$row->id_retur)->count() }}">{{ !empty($i) ? ++$i : $i = 1}}</td>
<td rowspan="{{ \App\DRetur::where('id_retur',$row->id_retur)->count() }}">{{ $row->id_pemesanan }}</td>
<td rowspan="{{ \App\DRetur::where('id_retur',$row->id_retur)->count() }}">{{ $row->id_retur }}</td>
<td rowspan="{{ \App\DRetur::where('id_retur',$row->id_retur)->count() }}">{{ date('d-M-Y', strtotime($row->tgl_retur)) }}</td>
<td rowspan="{{ \App\DRetur::where('id_retur',$row->id_retur)->count() }}">{{ $row->mitra->nama_mitra }}</td>
#foreach (\App\DRetur::where('id_retur',$row->id_retur)->limit(1)->get() as $row2)
<td>{{ \App\TPemesanan::join('t_dpemesanan','t_tpemesanan.id_dpemesanan','=','t_dpemesanan.id_dpemesanan')->join('t_stock','t_dpemesanan.id_stock','=','t_stock.id_stock')->where('t_tpemesanan.id_tpemesanan',$row2->id_tpemesanan)->first()->nama_stock }}</td>
<td>{{ $row2->jumlah_dretur }}{{ \App\TPemesanan::join('t_dpemesanan','t_tpemesanan.id_dpemesanan','=','t_dpemesanan.id_dpemesanan')->join('t_stock','t_dpemesanan.id_stock','=','t_stock.id_stock')->where('t_tpemesanan.id_tpemesanan',$row2->id_tpemesanan)->first()->satuan }}</td>
#if( $row2->status_dretur == 1 )
<td>Menunggu Diperiksa</td>
#elseif( $row2->status_dretur == 2 )
<td>Diterima</td>
#elseif( $row2->status_dretur == 3 )
<td>Ditolak</td>
#endif
<td>{{ $row2->keterangan }}</td>
</tr>
#foreach(\App\DRetur::where('id_retur',$row->id_retur)->get() as $row3)
#if($row2->id_dretur != $row3->id_dretur)
<tr>
<td>{{ \App\TPemesanan::join('t_dpemesanan','t_tpemesanan.id_dpemesanan','=','t_dpemesanan.id_dpemesanan')->join('t_stock','t_dpemesanan.id_stock','=','t_stock.id_stock')->where('t_tpemesanan.id_tpemesanan',$row3->id_tpemesanan)->first()->nama_stock }}</td>
<td>{{ $row3->jumlah_dretur }}{{ $row2->jumlah_dretur }}{{ \App\TPemesanan::join('t_dpemesanan','t_tpemesanan.id_dpemesanan','=','t_dpemesanan.id_dpemesanan')->join('t_stock','t_dpemesanan.id_stock','=','t_stock.id_stock')->where('t_tpemesanan.id_tpemesanan',$row3->id_tpemesanan)->first()->satuan }}</td>
#if( $row3->status_dretur == 1 )
<td>Menunggu Diperiksa</td>
#elseif( $row3->status_dretur == 2 )
<td>Diterima</td>
#elseif( $row3->status_dretur == 3 )
<td>Ditolak</td>
#endif
<td>{{ $row3->keterangan }}</td>
</tr>
#endif
#endforeach
#endforeach
#endforeach
</tbody>
</table>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
Sistem Informasi Supply
<div class="pull-right">
Hormat Saya, <strong>Reyhan (Admin)</strong>
</div>
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->
</section>
<!-- jQuery 3 -->
<script src="{{ asset('assets') }}/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('assets') }}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{ asset('assets') }}/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{ asset('assets') }}/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="{{ asset('assets') }}/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{ asset('assets') }}/dist/js/demo.js"></script>
<script>
$(document).ready(function () {
$('.sidebar-menu').tree()
})
</script>
Ran into a bit of a problem with combining Laravel and Vue.js to populate a table.
Essentially, I was trying to use the v-repeat property in combination with a http:get request using the vue-resources extension. The problem is that no values appear to be getting passed through by Vue - I simply get the {{first_name}} and {{email_address}} in brackets.
I can confirm that the API method that is called by the http:get request is in fact spitting out data (manually accessing the URL in the browser reveals data).
Here is the code in the routes.php file that is responsible for outputting the data:
get('api/v1_users',function()
{
return App\User::all()->toJson();
});
And here is what it spits out in the browser:
[{"email_address":"test123#gmail.com,"first_name":"John","password":"test123"}]
The Chrome console displays no errors nor warnings.
Here is my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
<!-- Custom styles for this template -->
{!! Html::style('css/navbar.css') !!}
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Password Operations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="inactive">Reset New User</li>
<li class="inactive">Pending Users</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Pending 1.0 Users</h1>
<p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div id = "user">
<tr v-repeat = "user: v1_user">
<td>
#{{ first_name }}
</td>
<td>
#{{ email_address }}
</td>
<td>
<button type="button" class="btn btn-success">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
<div class="jumbotron">
<h1>Pending 2.0 Users</h1>
<p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div>
<tr v-repeat = "user: v1_user">
<td>
#{{user.first_name}}
</td>
<td>
#{{user.email_address}}
</td>
<td>
<button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Vue.js file REP -->
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<!-- Main Vue file-->
<script src="/js/main.js"></script>
</body>
</html>
Here is the accompanying javascript file with the Vue.js code: (main.js)
new Vue({
el: "#user",
data:
{
v1_user:[],
},
ready : function()
{
this.fetchV1IntermediaryUsers();
},
methods:
{
fetchV1IntermediaryUsers: function() {
this.$http.get('/api/v1_users',function(v1users) {
this.$set('v1_user',v1users);
});
}
}
});
You have multiple DIV's with the same ID's. ID's in HTML must be unique. When you start a VUE instance you bind it to an element, in this case which is in your code twice. Remove the ID's and add an ID to the <Body> tag, then check your code.