I want to print the content of laravel blade file....file contains the html table of users...when user click on print button it must redirect to pop up window of print... Please help to resolve this issue.
Current code of reading the content of file...i don't know how to give the path of this file.....file is in resource/views/reports/table.blade.php
Current code shows me exception:
FileNotFoundException in Filesystem.php line 41:
File does not exist at path printview_table
Code in Controller
public function printfile()
{
$filename = '/reports/printview_table.blade.php';
try
{
$contents = File::get($filename);
printfile($contents);
}
catch (Illuminate\Filesystem\FileNotFoundException $exception)
{
die("The file doesn't exist");
}
}
I know it's too late to answer but I did the same thing today and decided to post my solution here as well so that it might help someone in the future.
Required Tools:
jQuery
jQuery.print
Solution Steps:
Step 1: The view where the print button is located in.
dashboard.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
</head>
<body>
<button id="print"> Print </button>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery.print.js') }}"></script>
<script src="{{ asset('js/scripts.js') }}"></script>
</body>
</html>
Step 2: The view that is going to be printed.
Assume I have a view like this and I want to print this out:
print.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Step 2: The route.
We need a route to call our view through that.
web.php
Route::post('/print', function() { return view('print'); });
Step 3: The jQuery script.
We are going to call the view content by AJAX and pass it to the jQuery.print() function for printing.
scripts.js
$('#print').on('click', function() {
let CSRF_TOKEN = $('meta[name="csrf-token"').attr('content');
$.ajaxSetup({
url: '/print/',
type: 'POST',
data: {
_token: CSRF_TOKEN,
},
beforeSend: function() {
console.log('printing ...');
},
complete: function() {
console.log('printed!');
}
});
$.ajax({
success: function(viewContent) {
$.print(viewContent); // This is where the script calls the printer to print the viwe's content.
}
});
});
That's all, customize the codes according to your own requirements.
Why don't you just pass this task to JS. In the view add a btn and on the click event call the print func.
window.print();
https://www.w3schools.com/jsref/met_win_print.asp
Related
I try build a React Laravel webpage.
The main.blade.php responsible the layout and that pass data and React components to other blade
I test my app and make few blade.php
So I try comment out several way this line:
/* const data = {{ Illuminate\Support\Js::from($data)}};*/
but not work. It still perceives it as if it were there
I have to pass data for every route for testing because I can't comment the above line
Route::get('/react', function () {
$data = User::find(1);
return view('reactpractice', compact("data"));
})->name('react');
main.blade.php
<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">
<link rel="stylesheet" href="/css/app.css"/>
<title>#yield('title')</title>
<title>{{env('APP_NAME')}}</title>
</head>
<body>
<header>
Motto
</header>
<nav>
Index
About
React
Users
Login
Register
</nav>
#yield('contenttop')
#if(Session::has('successmessage'))
<div class="alert alert-success my-3">
{{Session::get('successmessage')}}
</div>
#endif
#yield('example')
<script>
const data = {{ Illuminate\Support\Js::from($data)}};
const token = '{{#csrf_token()}}'
</script>
<h2> React</h2>
<script src="js/app.js"></script>
</body>
</html>
So how comment script tag content in blade.php?
Rather than comment the line in JavaScript, why not make it conditional?
#if (isset($data))
const data = {{ Illuminate\Support\Js::from($data)}};
#endif
This way, if $data is provided, the JavaScript variable will be created. If $data is missing, it will be ignored and won't break your code.
<!-- Try like this -->
// or /* */
I hope it was helpfull.
With my current Laravel project I am using (attempting) both Bootstrap and MDBoostrap. Currently, I'm getting the error TypeError: $(...).DataTable is not a function and from reading up on this online, this is usually due to jquery being called multiple times. I believe the error has to do with app.js but if I only include the scripts Bootstraps requires for a datatable I get the error that $ is undefined. Note: index.blade.html is extending from app.blade.html. With Laravel, I'm only trying to use MDB to create a datatable. This may be a duplicate from here but this question never got answered. I've been banging my head on this problem for a whole day now, any input is appreciative.
app.blade.html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Laravel Project</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
<script>
// Material Design example
$(document).ready(function () {
$('#dtMaterialDesignExample').DataTable();
$('#dtMaterialDesignExample_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
const $this = $(this);
$this.attr("placeholder", "Search");
$this.removeClass('form-control-sm');
});
$('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
$('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
$('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect();
$('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});
</script>
</body>
</html>
index.blade.html
#extends('layouts.app')
#section('content')
<h1>User Table</h1>
#if(count($users) > 0)
<table id="dtMaterialDesignExample" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">ID
</th>
<th class="th-sm">Name
</th>
<th class="th-sm">Occupation
</th>
<th class="th-sm">Location
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->occupation}}</td>
<td>{{$user->location}}</td>
<td>{{$user->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
#endif
#endsection
UsersController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$users = User::orderBy('id', 'asc')->paginate(10);
return view('users.index',['users'=>$users]);
}
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbootstrap');
} catch (e) {}
app.js
require('./bootstrap');
var moment = require('mdbootstrap');
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// MDBootstrap
#import '~mdbootstrap/css/mdb.min.css';
If this is the DataTables.net package I believe you have to include JS and possibly the CSS in order to have $('#dtMaterialDesignExample').DataTable(); succeed. I know those do not come with Bootstrap out of the box. I have a Laravel package using vanilla Bootstrap and I had to include the JS and CSS to render data tables.
I'm not terribly familiar with MDB. They may provide CSS, but I don't know if they provide the JS. It doesn't appear that you should have a duplicate definition so you need to make sure you're app is rendering something like the following to the browser:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>
That would include the JS definition of the DataTable() function.
I'm trying to use vue.js. I have these Components named Home where I try to display a list of posts from a WordPress api.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div v-for='post in posts'>
{{ post.title.cleared }}
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Welcome to Mik Vue.js App',
posts: []
}
},
methods: {
},
created: function(){
this.$http.get('wp/v2/posts?per_page=6').then(response => {
this.posts=response.data;
console.log(this.posts);
}, error => {
alert("shit");
});
}
}
</script>
I understand that it works correctly.
But if I look "Page Source" this is the result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>VueJS-Project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
How can I prerend this list and see it in page source? is there a way to do this without using PHP?
I want also to add meta informations.
thank you
can you help me solve this problem ? so in this case i want to show flash message in the next page after button click & action (save, update, delete) success perform...
i've read this https://www.tutorialspoint.com/materialize/materialize_dialogs.htm and also http://materializecss.com/dialogs.html but idk how to use it in my controller
public function hapuskeluhan($id){
$keluh = keluhan::findOrFail($id);
$keluh->delete();
return redirect('lihatkeluhan');
}
For Example is function delete, how could my toast appear before it redirect ? or maybe after ? please kindly help me brother
Try this
#if(session('message'))
<script>
Materialize.toast("{{ #session('message') }}", 5000);
</script>
#endif
I think you need to pass the message along with the redirection to be displayed on the view.
public function hapuskeluhan($id)
{
$keluh = keluhan::findOrFail($id);
$keluh->delete();
return redirect('lihatkeluhan')->with(['message', 'Record Deleted!']);
}
and in your view you could access the session variable message as
Materialize.toast({{ session('message') }}, duration, 'rounded');
and initiate a click so that the toast is displayed
$(document).ready(function () {
$("your element containing materialize handle").click();
});
The answer of #Mohammad Arshad is correct. Thank you.
Just to clarify things, I put my code bellow to communicate the system login.
If you want to work with colors, for example, on login success (green) or login fail (red). Just populate the third parameter of materialize toast with 'green' or 'red' respectively.
On UserController.php file:
<?php
namespace App\Http\Controllers\Login;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Auth;
use Hash;
use App\User;
class UserController extends Controller
{
public function login(Request $request)
{
$data = $request->all();
if(Auth::attempt([ 'email'=>$data['email'], 'password'=>$data['password'] ]))
{
\Session::flash('message', ['msg'=>'Login done successfully!', 'class'=>'green']);
return redirect()->route('user.index');
}
\Session::flash('message', ['msg'=>'Login failed. Check your data.', 'class'=>'red']);
return redirect()->route('user.index');
}
}
On site.blade.php file:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('site.name', 'YourSite') }}</title>
<link rel="stylesheet" type="text/css" href="{{ asset('lib/materialize/dist/css/materialize.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<header>
#include('yourHeaderCode._site._nav')
</header>
<main>
<!-- Your main code -->
#yield('content')
</main>
#include('yourFooterCode._site._footer')
<!-- Scripts -->
<script src="{{ asset('lib/jquery/dist/jquery.js') }}"></script>
<script src="{{ asset('lib/materialize/dist/js/materialize.js') }}"></script>
#if(Session::has('message'))
<script type="text/javascript">
Materialize.toast("{{ Session::get('message')['msg'] }}", 4000, "{{ Session::get('mensagem')['class'] }}");
</script>
#endif()
</body>
</html>
Trying to get some data from database using Vuejs. There are some dummy data in my users table. I want to show them in my view. Problem is though the page loads, It cannot fetch the data from the users table. It does not give any console error. I have checked database connection, restarted server and also checked api data with postman. It's working fine.
Views:
layout.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
</head>
<body>
<div class="container">
#yield('content')
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"></script>
#yield('scripts')
</body>
</html>
fetchUser.blade.php
#extends('layout')
#section('content')
<div id="UserController">
<table class="table table-hover table-striped">
<thead>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
</thead>
<tbody>
<tr v-for="user in users">
<td>#{{ user.id }}</td>
<td>#{{ user.name }}</td>
<td>#{{ user.email }}</td>
<td>#{{ user.address }}</td>
<td>#{{ user.created_at }}</td>
<td>#{{ user.updated_at }}</td>
</tr>
</tbody>
</table>
</div>
#endsection
#section('scripts')
<script src="{{ asset('js/script.js') }}" charset="utf-8"></script>
#endsection
script.js
var vm = new Vue({
el: '#UserController',
methods: {
fetchUser: function(){
this.$http.get('api/users', function(data) {
this.$set('users', data )
})
}
},
ready: function(){
}
});
web.php
Route::get('/', function () {
return view('fetchUser');
});
api.php
<?php
use Illuminate\Http\Request;
use App\User;
Route::get('/users', function(){
return User::all();
});
You should use then , and call the fetchUser in the ready function as well
data:{
users: []
},
methods:{
fetchUser: function(){
this.$http.get('api/users').then(function(response){
this.$set('users', response.data);
}, function(response){
// error callback
});
},
ready: function(){
this.fetchUser();
}
vue-resource docs