I have installed recent version of Laravel and PHP. I am getting no errors but when passing the parameters to the component with controller it's not rendering in view page.bla.
Controller file - Input.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Input extends Component
{
/**
* Create a new component instance.
*
* #return void
*/
public $name;
public $type;
public $label;
public function __construct($type,$name,$label)
{
$this->type = $type;
$this->name = $name;
$this->label = $label;
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render(){
return view('components.input');
}
}
View Blade file - input.blade.php
<div>
<!-- Smile, breathe, and go slowly. - Thich Nhat Hanh -->
<div class="form-group">
<label for="">{{$label}}</label>
<input type="{{$type}}" id = "" class="form-control" name="{{$name}}">
<span class = "text-danger">
{{--
#error('name')
{{$message}}
#enderror
--}}
</span>
</div>
</div>
Home page for - home.blade.php
<!doctype html>
<html lang="en">
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
</head>
<body>
<h1 class = "text-center">Register</h1>
<form action="{{url('/')}}/register" method = "post">
#csrf
<div class="container">
<x-input type = "text" name = "name" label = "Name"/>
<button class="btn btn-primary">Submit</button>
</div>
</form>
</body>
</html>
This is the result of about code its input tag is not rendering
I tried passing the data without controller. It worked certainly for some variable names not for different all variable names.
Component calling:
<x-header users="John"/>
Component file:
use Illuminate\View\Component;
class Header extends Component
{
/**
* Create a new component instance.
*
* #return void
*/
public $users;
public function __construct($users)
{
$this->users = $users;
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.header');
}
}
View:
<div>
<!-- Breathing in, I calm body and mind. Breathing out, I smile. - Thich Nhat Hanh -->
<h2 class = "text-center">Hi This is Header Page</h2>
<p class = "text-center">{{$users}}</p>
</div>
This worked for only this user's variable. What might be wrong here?
Have you tried calling it using livewire magic tag?
Just like mention in livewire documentation here.
https://laravel-livewire.com/docs/2.x/rendering-components
<livewire:input :type="text" :name="name" :label="{{ __('Label name') }}" />
This will receive your parameters and render the view properly.
And than use mount inside your Input component
class Input extends Component
{
public $name;
public $type;
public $label;
public function mount(string $type, string $name, string $label)
{
$this->type = $type;
$this->name = $name;
$this->label = $label;
}
public function render()
{
return view('components.input');
}
}
Related
I want to display a DataTable of job applications with an application_status_id of 8, meaning completed applications where the jobseeker has been deployed. I'm very new to DataTables in Laravel and PHP, and I've only been following this tutorial: https://www.youtube.com/watch?v=ZqPzSIK2N-Y
However, Nothing's showing up, only the table headings.
I'm also having trouble on how I can display column data that are related to another table, which are
application_status_id = jobApplication->step->name
jobseeker_id = jobApplication->jobseeker->getFullNameAttribute()
jobpost_id = jobApplication->jobPost->job_position
jobApplicationDataTable
class jobApplicationDataTable extends DataTable
{
/**
* Build DataTable class.
*
* #param mixed $query Results from query() method.
* #return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
return datatables()
->eloquent($query)
->addColumn('action', 'jobapplication.action');
}
/**
* Get query source of dataTable.
*
* #param \App\Models\jobApplication $model
* #return \Illuminate\Database\Eloquent\Builder
*/
public function query(jobApplication $model)
{
return $model->newQuery()->where('application_status_id','=',8)->with(['step','jobseeker','jobPost']);
}
/**
* Optional method if you want to use html builder.
*
* #return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->setTableId('jobapplication-table')
->columns($this->getColumns())
->minifiedAjax()
->orderBy(1)
->buttons(
// Button::make('create'),
Button::make('export'),
Button::make('print'),
// Button::make('reset'),
// Button::make('reload')
);
}
/**
* Get columns.
*
* #return array
*/
protected function getColumns()
{
return [
// Column::computed('action')
// ->exportable(false)
// ->printable(false)
// ->width(60)
// ->addClass('text-center'),
'id',
'name' => new \Yajra\DataTables\Html\Column(['title' => "Applicant Name",'data' => 'jobseeker.getFullNameAttribute','name' => 'jobseeker'])
];
}
/**
* Get filename for export.
*
* #return string
*/
protected function filename()
{
return 'jobApplication_' . date('YmdHis');
}
web.php
Route::get('/employee/fordeployment',[employeeController::class,'viewDeployedApplicants'])->middleware(['auth','employee'])->name('deployed-list');
Controller:
public function viewDeployedApplicants(jobApplicationDataTable $dataTable){
return $dataTable->render('employee.view-deployed-applicants');
}
View:
<x-admin.admin-layout>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.1.1/b-html5-2.1.1/date-1.1.1/r-2.2.9/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/b-2.1.1/b-html5-2.1.1/date-1.1.1/r-2.2.9/datatables.min.js"></script>
</head>
<section class="content" style="margin-left: 18em; margin-top: 5em; margin-right: 2em;">
<h3> Deployed Applicants </h3>
<div class="row input-daterange">
<div class="col-md-4">
<input type="date" name="from_date" id="from_date" class="form_control" placeholder="From">
</div>
<div class="col-md-4">
<input type="date" name="to_date" id="to_date" class="form_control" placeholder="To">
</div>
<div class="col-md-4">
<button type="button" name="filter" class="btn btn-success">Filter</button>
<button type="button" name="refresh" class="btn btn-success">Refresh</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
{!! $dataTable->table() !!}
</div>
</div>
</x-admin.admin-layout>
I'm very new to datatables and I've been stuck here for hours. I have to add more features such as select records by to and from date, and export to pdf. But I have no idea where to start debugging. There aren't many resources on what I want to accomplish. What's wrong with my code? Is there a simpler way to approach this without the package?
I am new to Laravel and ReactJS, am trying to achieve a CRUD operation, I am trying to display the 4 rows from the table but am able to insert records into the table but not able to read. Any help is appreciated.
Laravel Framework 7.10.3
PHP 7.4.5
Composer version 1.10.6
Mysql
And following is the code details
DisplayProduct.js
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
import TableRow from './TableRow';
import MyGlobleSetting from './MyGlobleSetting';
class DisplayProduct extends Component {
constructor(props) {
super(props);
this.state = {value: '', products: ''};
}
componentDidMount(){
axios.get(MyGlobleSetting.url + '/api/products')
.then(response => {
this.setState({ products: response.data });
console.log(response.data);
console.log(this.state.products);
})
.catch(function (error) {
console.log(error);
})
}
tabRow(){
if(this.state.products instanceof Array){
return this.state.products.map(function(object, i){
return <TableRow obj={object} key={i} />;
})
}
}
render(){
return (
<div>
<h1>Products</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Product</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Product Title</td>
<td>Product Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
export default DisplayProduct;
TableRow.js
import React, { Component } from 'react';
import { Link, browserHistory } from 'react-router';
import axios from 'axios';
import MyGlobleSetting from './MyGlobleSetting';
class TableRow extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
let uri = MyGlobleSetting.url + `/api/products/${this.props.obj.id}`;
axios.delete(uri);
browserHistory.push('/display-item');
}
render() {
return (
<tr>
<td>
{this.props.obj.id}
</td>
<td>
{this.props.obj.title}
</td>
<td>
{this.props.obj.body}
</td>
<td>
<form onSubmit={this.handleSubmit}>
<Link to={"edit/"+this.props.obj.id} className="btn btn-primary">Edit</Link>
<input type="submit" value="Delete" className="btn btn-danger"/>
</form>
</td>
</tr>
);
}
}
export default TableRow;
welcome.blade.php
<!DOCTYPE html>
<html>
<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 ReactJS CRUD Example</title>
<link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id='crud-app'></div>
<script src="{{mix('js/app.js')}}" ></script>
</body>
</html>
ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return response()->json($products);
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$product = new Product([
'title' => $request->get('title'),
'body' => $request->get('body')
]);
$product->save();
return response()->json('Product Added Successfully.');
}
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
$product = Product::find($id);
return response()->json($product);
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$product = Product::find($id);
$product->title = $request->get('title');
$product->body = $request->get('body');
$product->save();
return response()->json('Product Updated Successfully.');
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
$product = Product::find($id);
$product->delete();
return response()->json('Product Deleted Successfully.');
}
}
?>
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="/">Products Maintenance</a>
</div>
<ul className="nav navbar-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="add-item">Create Product</Link></li>
<li><Link to="display-item">Products</Link></li>
</ul>
</div>
</nav>
<div>
{this.props.children}
</div>
</div>
)
}
}
export default Master
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 CreateProduct from './components/CreateProduct';
import DisplayProduct from './components/DisplayProduct';
import UpdateProduct from './components/UpdateProduct';
render(
<Router history={browserHistory}>
<Route path="/" component={Master} >
<Route path="/add-item" component={CreateProduct} />
<Route path="/display-item" component={ DisplayProduct} />
<Route path="/edit/:id" component={UpdateProduct} />
</Route>
</Router>,
document.getElementById('crud-app'));
UPDATED CODE
In your main js file, lets say App.js component you will have a router set already for this link
<li><Link to="display-item">Products</Link></li>
The router will looks something like this
<Route path="/display-item" exact component={DisplayProduct} />
Include your DisplayProduct.js component and this way when you click products link you will be able to show whole component.
I have used this way and it's working see if it helps you too.
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/student" exact component={Student} />
<Route path="/classes" exact component={Classes} />
</Switch>
</div>
</BrowserRouter>
)
}
}
if (document.getElementById('app')) {
ReactDOM.render(<App />, document.getElementById('app'));
}
I see in your code that you don't have a <div> for rendering in your render method, you need to have it atleast one. Also I think you have included document.getElement.... inside your render method, that may be causing the problem.
I am working on a library application and I want to create a function where the user can rent out a book to a customer. However, I want the books that are rented out right now to not show up in the select box when renting out another book.
I have looked up several articles about this, but couldn't really make up a solution so I would be happy about any help.
The idea is, that when a book has the attribute "maxreturndate" set it won't show up.
CheckedOutController:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\CheckedOut;
use App\Book;
use App\Reader;
class CheckedOutController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$checkedOuts = CheckedOut::with(['book', 'reader'])->get();
return view('checkedouts/index', compact('checkedOuts'));
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
$books = Book::all();
$readers = Reader::all();
return view('checkedouts/create', compact('books','readers'));
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$validatedData = $request->validate([
'book_id' => 'required',
'reader_id' => 'required',
'maxreturndate' => 'required|date',
'returndate' => 'nullable',
]);
$checkedOut = CheckedOut::create($validatedData);
return redirect('checkedouts')->with('success', 'Buch wurde erfolgreich verliehen!');
}
/**
* 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)
{
//
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
index.blade.php
#extends('layout')
#section('title')
<title>Alle ausgeliehen Bücher</title>
#section('content')
<style>
.uper {
margin-top: 40px;
}
</style>
<div class="uper">
#if(session()->get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div><br />
#endif
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Titel</td>
<td>Verliehen an</td>
<td>Verleihdatum</td>
<td>Fällig am</td>
<td>Zurückgebracht am</td>
<td colspan="2">Funktionen</td>
</tr>
</thead>
<tbody>
#foreach($checkedOuts as $checkedOut)
<tr>
<td>{{$checkedOut->id}}</td>
<td>{{$checkedOut->book->title}}</td>
<td>{{$checkedOut->reader->name}}</td>
<td>{{$checkedOut->created_at}}</td>
<td >{{$checkedOut->maxreturndate}}</td>
<td>{{$checkedOut->returndate}}</td>
<td></td>
<td>Bearbeiten</td>
<td>Anzeigen</td>
<td>
<form action="{{ route('checkedouts.destroy', $checkedOut->id)}}" method="post">
#csrf
#method('DELETE')
<button class="btn btn-danger" type="submit">Löschen</button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
<div>
#endsection
Migrations:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCheckedOutsTable extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('checked_outs', function (Blueprint $table) {
$table->bigIncrements('id');
$table->bigInteger('book_id')->unsigned();
$table->foreign('book_id')->references('id')->on('books')->onDelete('cascade');
$table->bigInteger('reader_id')->unsigned();
$table->foreign('reader_id')->references('id')->on('readers')->onDelete('cascade');
$table->date('maxreturndate');
$table->date('returndate')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('checked_outs');
}
}
create.blade.php
#extends('layout')
#section('title')
<title>Buch verleihen</title>
#section('stylesheets')
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet" />
#endsection
#section('content')
<style>
.uper {
margin-top: 40px;
}
</style>
<div class="card uper">
<div class="card-header">
Buch verleihen
</div>
<div class="card-body">
<form method="post" action="{{ route('checkedouts.store') }}">
<div class="form-group">
#csrf
<label for="book_id">Buch:</label>
<select name="book_id" class="form-control select2-single <!-- #error('book_id') is-invalid #enderror -->">
#foreach ($books as $book)
<option value="{{ $book->id }}">{{ $book->title }}</option>
#endforeach
</select>
#error('book_id')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
<div class="form-group">
<label for="reader_id">Verleihen an:</label>
<select name="reader_id" class="form-control select2-single <!-- #error('reader_id') is-invalid #enderror -->">
#foreach ($readers as $reader)
<option value="{{ $reader->id }}">{{ $reader->name }}</option>
#endforeach
</select>
#error('reader_id')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
<div class="form-group">
<label for="maxreturndate">Zurückbringen bis:</label>
<input type="date" class="form-control" name="maxreturndate" />
#error('name')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
<button type="submit" class="btn btn-primary">Verleihen</button>
</form>
</div>
</div>
<script type="text/javascript">
$(".select2-single").select2();
</script>
#endsection
The relationship between the 3 Models:
Book:
public function checkedOut(){
return $this->hasOne(CheckedOut::class);
}
Reader:
public function checkedOut()
{
return $this->belongsTo(CheckedOut::class);
}
CheckedOut:
public function book(){
return $this->belongsTo(Book::class);
}
public function reader(){
return $this->belongsTo(Reader::class);
}
My suggestion is to set up Books and Readers with a many-to-many relationship. Now, your models could look like this:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\Pivot;
class Book extends Model
{
public function readers()
{
return $this
->belongsToMany(\App\Reader::class, 'checked_outs')
->using(\App\Checkout::class)
->withPivot(['returndate', 'maxreturndate']);
}
}
class Reader extends Model
{
public function books()
{
return $this
->belongsToMany(\App\Book::class, 'checked_outs')
->using(\App\Checkout::class)
->withPivot(['returndate', 'maxreturndate']);
}
}
class Checkout extends Pivot
{
// this should be named `book_reader` but we override it here
$table = "checked_outs";
$dates = [
"maxreturndate",
"returndate",
];
}
I have created a pivot model which isn't necessary, but allows you to operate directly on the pivot table and cast the extra attributes to dates automatically. Whether this is useful is a matter of opinion. You should rename the checked_outs table to book_reader which is the naming convention that Laravel expects for a pivot table.
Getting the books that aren't checked out is simple enough to do as follows, using the doesntHave method to check for absence of a relationship.
public function create()
{
$books = Book::doesntHave("readers")->get();
$readers = Reader::all();
return view('checkedouts/create', compact('books','readers'));
}
And "checking out" a book could look like this:
public function store(Request $request)
{
$reader = Reader::find($request->reader_id);
$reader
->books()
->attach(
$request->book_id,
["returndate" => Carbon\Carbon::now()->addDays(7)]
);
}
when a book has the attribute "maxreturndate" set it won't show up
Since you did not specify in your migration, I am going to assume here that you have a maxreturndate nullable field in your books table, then you should be able to simply create a local scope when you want your list of "not rented" books.
Here's an example on creating a notRented scope:
// in your Book model define the local scope
public function scopeNotRented($query){
return $query->whereNotNull('maxreturndate');
}
// in the create method of your controller
public function create()
{
$books = Book::notRented()->get();
$readers = Reader::all();
return view('checkedouts/create', compact('books','readers'));
}
I am new to laravel and i am working in resource controller CRUD operation.i have done with show function and my front end will get the id from the user and i need to show the details using id. For this i have used resource controller show function . Problem is , how to return the id ? i tried with below formats
http://localhost/sbadmin/public/invoice/invoice/show?12
http://localhost/sbadmin/public/invoice/invoice/show/12
both are returning 404 only.
Can anyone suggest how to write this uri ?
Here is my web.php
<?php
Route::prefix('invoice')->group(function() {
Route::get('/createInvoice', 'Invoice\InvoiceController#getAllInvoiceDetails');
Route::post('/addInvoice', 'Invoice\InvoiceController#addInvoice');
Route::post('/checkPhoneNumberAndFetchData', 'Invoice\InvoiceController#checkPhoneNumberAndReturnData');
Route::resource('invoice', 'Invoice\InvoiceManagementController')->only([
'index', 'show'
]);
Route::get('/searchInvoice','Invoice\InvoiceController#searchInvoice');
Route::get('/viewAllInvoice','Invoice\InvoiceController#viewAllInvoice');
Route::get('/viewInvoicesAsJson','Invoice\InvoiceController#viewInvoicesAsJson');
});
Controller:
namespace Modules\Invoice\Http\Controllers\Invoice;
use Illuminate\Routing\Controller;
use Illuminate\Http\Request;
use Modules\Invoice\Entities\Invoice;
class InvoiceManagementController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
return view('invoice::viewinvoices');
}
/**
* 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)
{
//
}
/**
* Display the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function show($id)
{
//return $id;
$invoices = Invoice::findOrFail($id)->with(['user','events','payments'])->get();
return view('invoice::invoice');
}
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
/**
* Responds to requests to GET /users/show/1
*/
public function getShow($id)
{
//
}
}
blade.php:
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Search Invoice</h1>
</div>
<form id="form" onsubmit="return OnSubmitForm();" >
#csrf
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" name="invoice_id" id="id" placeholder="Enter Invoice number" >
</div>
</div>
<button type="submit" class="btn btn-primary btn-user btn-block">
View Invoice
</button>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block" hidden="">
<i class="fab fa-google fa-fw"></i> Register with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block" hidden="">
<i class="fab fa-facebook-f fa-fw"></i> Register with Facebook
</a>
</form>
<div class="text-center" hidden="">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center" hidden="">
<a class="small" href="login.html">Already have an account? Login!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{{ asset('sbadmin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('sbadmin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ asset('sbadmin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('sbadmin/js/sb-admin-2.min.js') }}"></script>
<script type="text/javascript">
function OnSubmitForm()
{
$('#form').prop('action',"invoice/show/"+$('#id').val());
return true;
}
</script>
For Laravel resource controller actions no need to add the CRUD actions
GET/invoice, mapped to the index() method,
GET /invoice/create, mapped to the create() method,
POST /invoice, mapped to the store() method,
GET /invoice/{id}, mapped to the show() method,
GET /invoice/{id}/edit, mapped to the edit() method,
PUT/PATCH /invoice/{id}, mapped to the update() method,
DELETE /invoice/{id}, mapped to the destroy() method.
And try to access your show route action like this:
http://localhost/sbadmin/public/invoice/invoice/12
You don't need to append show in url.
Route::resource('invoice', 'Invoice\InvoiceManagementController')->only([
'index', 'show'
]);
http://localhost/sbadmin/public/invoice/invoice/show/12 -> remove show from here.
Now you url look like.
http://localhost/sbadmin/public/invoice/invoice/12 -> show method
Here, I elaborate more.
Get | http://localhost/sbadmin/public/invoice/invoice | index method
Post | http://localhost/sbadmin/public/invoice/invoice | store method
get | http://localhost/sbadmin/public/invoice/invoice/12 | show method.
first of all change your prefix in routes to:
Route::group(['prefix' => 'invoice', 'as' => 'invoice.'], function(){
then in your script :
function OnSubmitForm()
{
$('#form').prop('action',"invoice/invoice/"+$('#id').val());
return true;
}
i hope this works.
I'm new to laravel and I got stuck.
My problem is I want 2 sections (navigation, content) that has dynamic data
Here's some code
Main Blade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<body>
<div class="navigation">
#yield('menu')
</div>
<div class="content">
#yield('content')
</div>
</body>
</html>
portfolio blade
#extends('main')
#section('content')
#foreach($data as $portfolio)
<img src='{{ URL::asset("images/$portfolio->picture.jpg") }}'/>
#endforeach
#stop
and my navigation blade
#extends('main')
#section('menu')
#foreach($menuknoppen as $menuknop)
<a href='{{ URL::to("$menuknop->menu_url") }}'>{{$menuknop->menutitle}}</a>
#endforeach
#stop
the portfolio blade has a controller, but also the menu blade has a controller
Edit1:
the problem is the navigation isn't showing even if I add static text
Edit2:
My controllers
my portfolio controller
/**
* Show the profile for the given user.
*
* #param int $id
* #return Response
*/
public function index(){
//here comes a whole list with what i've done
$results = DB::table('projects')->get();
//return $results;
$data = array();
foreach ($results as $key => $result) {
$data[] = $result;
}
return view('portfolio.portfolio')->with('data', $data);
}
public function getProject($portfolio_url){
//this gets the project thats clicked
$results = DB::select('select * from projects where portfolio_url = ?', array($portfolio_url));
return view('portfolio.single')->with('data', $results['0']);
}
}
my navigation controller
class menuController extends Controller {
/**
* Show the profile for the given user.
*
* #param int $id
* #return Response
*/
// public function __construct($table){
// $results = DB::table($table)->get();
// return view('menu')->with('menuknoppen', $results);
// }
public function index(){
$results = DB::table('navigation')->get();
return view('menu')->with('menuknoppen', $results);
}
}
Your main blade should be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
</head>
<body>
<div class="navigation">
#include('menu');
</div>
<div class="content">
#yield('content')
</div>
</body>
</html>
Your portfolio should be:
#extends('main')
#section('content')
#foreach($data as $portfolio)
<img src='{{ URL::asset("images/$portfolio->picture.jpg") }}'/>
#endforeach
#stop
Navigation field should be:
//Don't use extends here
#foreach($menuknoppen as $menuknop)
<a href='{{ URL::to("$menuknop->menu_url") }}'>{{$menuknop->menutitle}}</a>
#endforeach
Pass multiple data
public function index()
{
$data = //data code;
$results = // results code
return view(portfolio.portfolio, compact('data', 'results'));
}
You have mixed the concept of #yield , #include and #extend
#yield provides a place for you to replace, so when you call #extend in other view you can reuse the template in view which you extend and replace the part with #yield
#include means this part of code is always replaced by the view it defined
So when you are designing a webpage, you need to make sure what is "always called" (use #include) and what could be replaced (use #yield)
As an assisting explanation to aldrin27 working code, I hope this make your mind clearer on the blade template, it rocks! :D