I am trying to figure out how to achieve what I have in mind using laravel's blade. I want to make a reusable table template that I can extend (for example different header and body for different pages). From the research I did, I figured that templates are only for overall page structure, not partial components. So how could I achieve this? Example below
Let's say I have defined a table with some styling and draggable events and so on, I don't wat to copy and paste this table to every page just with different table body and header.
<table class="table-selectable table table-hover bg-white">
<thead class="thead-dark">
<th>Image</th>
<th>Title</th>
<th>Tags</th>
**{{SOME APPENDED HEADERS DEPENDING ON PAGE}}**
</thead>
<tbody>
#if(!empty($objects))
#foreach($objects as $object)
<tr onclick="someFunction()">
<td class="align-middle"><img class="list-image" src="some-image.jpg"></td>
<td class="align-middle"><h5>Title</h5></td>
<td class="align-middle">
Tags
</td>
**{{SOME APPENDED BODY FIELDS DEPENDING ON PAGE}}**
</tr>
#endforeach
#endif
</tbody>
</table>
Seems like a fairly simple task but I could not find a solution for this.
Blade does allow for this out of the box.
Layouts ( Docs )
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
includes (Docs)
You can then add smaller templates to your layout using includes
#include('view.name', ['some' => 'data'])
Components (Docs)
And finally, if you want you have even more control, try components.
Note: Components are now a little more complicated than they were but are still backward compatible. So you can still define components like so:
modal.blade (Component)
<!-- Modal -->
<div
class="modal fade {{ $class ?? '' }}"
id="{{ $id }}"
tabindex="-1"
role="dialog"
aria-labelledby="{{ $id }}Title"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered {{ $size ?? '' }}" role="document">
<div class="modal-content shadow">
<div class="modal-header">
<h5 class="modal-title font-weight-normal" id="{{ $id }}Title">
{{ $title }}
</h5>
<button type="button" class="close close-icon" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#if ($form) {{ $action }} #endif
<div class="modal-body">
{{ $body }}
</div>
<div class="modal-footer">
{{ $footer }}
</div>
#if ($form) {!! Form::close() !!} #endif
</div>
</div>
</div>
Usage
#component('components.modal', [
'id' => 'myModalID',
'class' => 'modal-info',
'form' => true
])
#slot('title')
My Modal
#endslot
#slot('action')
{!! Form::open([]) !!}
#endslot
#slot('body')
Some content
#endslot
#slot('footer')
<button type="submit" class="btn">
Submit
</button>
#endslot
#endcomponent
Related
I made a website with Laravel. For design of web site I use Bootstrap. In on my page I needed modal component. Now I deployed my web site on server link on website and I was testing website with my iPhone. When I tested modal I get only grey background without modal. I also tested on PC and Android mobile phone and work fine. I try on Edge, Safari and Chrome on iPhone but I always get the same result.
Here is my code:
#extends('layouts.frontend')
#section('title', 'TK Pazin | Rang-liste Piramida')
#section('content')
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<h1 class="my-4" style="text-align:center; color: #ba3631;">Rang-lista | Piramida {{ $sezona->godina }}</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
#foreach($sezone as $sezona)
#if($sezona->id == session('odabrana_godina'))
<li class="breadcrumb-item active" aria-current="page">{{ $sezona->godina }}</li>
#else
<li class="breadcrumb-item">{{ $sezona->godina }}</li>
#endif
#endforeach
</ol>
</nav>
<div>
<div class="media mb-5">
<div class="mr-3"><a href="../datoteke/Pravila-Pojedinačni-turniri.pdf" target="_blank"><i
class="far fa-file-pdf fa-3x"></i></a></div>
<div class="media-body mt-3">
<a href="/datoteke/Pravila-Piramida.pdf" target="_blank">
<h5 class="mt-0">Pravila
natjecanja u piramidi
</h5>
</a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Ime i prezime</th>
#foreach($kola as $kolo)
<th scope="col">{{ $kolo->naziv }}</th>
#endforeach
<th scope="col">Ukupno</th>
</tr>
</thead>
<tbody>
#foreach($igraci as $igrac)
#if($igrac->igrac_piramida()->whereIn('turnir_piramida_id', $kola_id)->sum('bodovi') != 0)
<tr>
<td scope="row" class="sno"> </td>
<td>
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#view_{{ $igrac->id }}">{{ $igrac->ime . " " . $igrac->prezime }}</button>
<!-- Modal -->
<div class="modal fade" id="view_{{ $igrac->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Natjecatelj: {{ $igrac->ime . " " . $igrac->prezime }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<img src="{{ $igrac->slika }}" alt="..." class="img-thumbnail">
</div>
<div class="col-6">
<b>Prebivalište: </b>
<p> {{ $igrac->prebivaliste }}</p>
<b>Igra: </b>
<p> {{ $igrac->igra }}</p>
<b>Član kluba od:</b>
<p> {{ $igrac->clanstvo }}. godine</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
</td>
#foreach($kola as $kolo)
#foreach($igrac->igrac_piramida as $ip)
#if($ip->pivot->turnir_piramida_id == $kolo->id)
<td>{{ $ip->pivot->bodovi }}</td>
#endif
#endforeach
#endforeach
<td>{{ $igrac->igrac_piramida()->whereIn('turnir_piramida_id', $kola_id)->sum('bodovi') }}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
<!-- /.container -->
#endsection
#section('script')
<script>
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});
</script>
#endsection
Hello for everyone I have a problem in laravel that about the showing images in one view, the problem is: I have a page that just show the images but it show all the images stored in table with specific id but I want to show some of that and have a button (show more) and when click on button it show the other images I don't know hove can I do this if someone can help me please!
This is my controller code:
public function listHostel()
{
$hostels = Hostel::all();
return view('front/khabgah_list',compact('hostels'));
}
And this is my blade code:
#foreach($hostels as $hostel)
#foreach($hostel->attachments as $photo)
<div class=" col-12 col-sm-6 col-md-6 col-lg-3 px-1 mt-3">
<div class="card card-shadow custom-height-1 " style="border-radius: 0%">
<a href="">
<img src="/assets-/app/media/img/blog/hostels-img/{{$photo->file_name}}"
class="card-img-top card-img custom-card-img-height" alt="">
</a>
<div class="car-body">
<div class="card-footer">
<div class="custom-circle">
<p class="custom-circle-text card-text">
<b>
#if($hostel->type == 1)
{{ 'ذکور'}}
#else
{{ 'اناث' }}
#endif
</b>
</p>
</div>
<div class="custom-prices card-text text-left"> کرایه فی ماه
: {{$hostel->remark }}
</div>
</div>
</div>
</div>
</div>
#endforeach
#endforeach
Pagination is likely what you're looking for. Change your controller to:
public function listHostel()
{
$hostels = Hostel::all()->paginate(5);
return view('front/khabgah_list',compact('hostels'));
}
Then you can get the links in your Blade template:
{{ $hostels->links() }}
You might need to change it a bit to work for your specific situation. The documentation gives some more info: https://laravel.com/docs/5.8/pagination
Im making a laravel SPA and I recently learned how to use vue and I know how v-for works for vue using my components. I only know how to loop only in a single table without relation thats why I'm having a difficult time changing it. I have two tables which are news and comments, and this table news hasMany comments in it.
my blade file for now.
#foreach($news->comments as $comment)
<div class="comment" style="background-color: #f6efef;" >
<div class="author-info">
<img src={{"https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=retro" }} class="author-image" id="image">
<div class="author-name">
<h4>{{$comment->name}} </h4>
<p class="author-time"> {{ date('jS F, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
</div>
</div>
<div class="comment-content">
{{$comment->comment}}
</div>
</div>
#endforeach
your component goes like this in vue2.0
**block.vue**
<template>
<div class="comment" style="background-color: #f6efef;" v-for="comment in
news.comments" >
<div class="author-info">
<img :src="comment.author_image" }} class="author-image" id="image">
<div class="author-name">
<h4>{{ comment.name }} </h4>
<p class="author-time"> {{ comment.time }}</p>
</div>
</div>
<div class="comment-content">
{{ comment.comment }}
</div>
</div>
</template>
<script>
export default {
name: "block",
props: [ "news" ], //or
data() => ({ news: [] })
}
</script>
I need allow links in messages, when user send message. How I can do this?
#foreach($mess as $message)
<li data-mid="{{ $message->id }}">
<div class="row margin-left-none margin-right-none">
<div class="col-md-2 padding-right-none">
<div class="avatar-user text-center">
<img src="{{ $message->sender->avatar }}" alt="$message->sender->name">
</div>
</div>
<div class="col-md-10 padding-left-none">
<div class="user-name">
<span>{{ $message->sender->name }}
#if(Helper::getOnlineUser($message->sender->id))
<i data-toggle="tooltip" title="Онлайн" class="material-icons online">fiber_manual_record</i>
#else
<i data-toggle="tooltip" title="Оффлайн" class="material-icons offline">fiber_manual_record</i>
#endif
<span class="date float-right">{{ $message->created_at->formatLocalized('%H:%m') }}</span></span>
</div>
<div class="message">
{{ $message->body }}
</div>
</div>
</div>
</li>
#endforeach
This is view of messages.
How I can allow links?
Example: http://example.com in messages =>
http://example.com
I need {!! $message->body !!} ? Or How?
In controller:
$mess = Chat::conversations($conversation)->for($user)->getMessages($limit, $request->page);
I use this package: https://github.com/musonza/chat
There are built in PHP functions to handle this:
<div class="message">
{!! strip_tags($message->body, '<a>') !!}
</div>
Where the second argument is your whitelist.
This has the following advantages:
You're not messing with regex
You're still using blade {!!!!}
You're using well tested code dev'ed by the core team
You can do it by using following php function in your blade,
<?php
function getDataWithURL($text){
// The Regular Expression filter
$reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/";
// Check if there is a url in the text
if(preg_match($reg_exUrl, $text, $url)) {
// make the urls hyper links
echo preg_replace($reg_exUrl, "".$url[0]." ", $text);
} else {
// if no urls in the text just return the text
echo $text;
}
}
?>
You just need to add this code in your blade file and then you can check and replace the links in your text like this,
<div class="message">
<?php getDataWithURL($message->body);?>
</div>
I hope you will understand.
I want to create a view in laravel that has a function to import an excel file into the database and show it in a table inside a view.
I created a controller and it imports the excel data in database but fails to show it in view.
Please Help solve my issue.
Many Thanks in advance.
Best Regards,
Dian
I am using laravel 5.5 and maatwebsite excel
public function importFileIntoDB(Request $request){
if($request->hasFile('sample_file')){
$path = $request->file('sample_file')->getRealPath();
$data = Excel::load($path, function($reader) {})->get();
if($data->count()){
foreach ($data as $key => $value) {
$arr[] = ['name' => $value->name, 'details' => $value->details];
}
if(!empty($arr)){
\DB::table('products')->insert($arr);
dd('Insert Record successfully.');
}
}
}
return back()->with($arr);
}
this is my view
#extends('frontpage')
#section('title', 'Dashboard')
#section('content_header')
<h1>Upload File From Excel Into Database</h1>
#stop
#section('content')
<div class="panel panel-primary">
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="padding:12px 0px;font-size:25px;"><strong>Test - import export csv or excel file into database example</strong></h3>
</div>
<div class="panel-body">
#if ($message = Session::get('success'))
<div class="alert alert-success" role="alert">
{{ Session::get('success') }}
</div>
#endif
#if ($message = Session::get('error'))
<div class="alert alert-danger" role="alert">
{{ Session::get('error') }}
</div>
#endif
<h3>Import File Form:</h3>
<form style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 20px;" action="{{ URL::to('importExcel') }}" class="form-horizontal" method="post" enctype="multipart/form-data">
<input type="file" name="import_file" />
{{ csrf_field() }}
<br/>
<button class="btn btn-primary">Import CSV or Excel File</button>
</form>
<br/>
<h3>Import File From Database:</h3>
<div style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 20px;">
<button class="btn btn-success btn-lg">Download Excel xls</button>
<button class="btn btn-success btn-lg">Download Excel xlsx</button>
<button class="btn btn-success btn-lg">Download CSV</button>
</div>
<h3>Table Import List </h3>
<div style="border: 4px solid #a1a1a1;margin-top: 15px;padding: 20px;" >
print_r($arr->count());
#if(!empty($arr))
<table class="table table-striped table-hover table-reflow">
#foreach($arr as $key=>$value)
<tr>
<th ><strong> {{ $key }}: </strong></th>
<td> {{ $value }} <td>
</tr>
#endforeach
</table>
#endif
</div>
</div>
</div>
</div>
#stop
#section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
#stop
#section('js')
<script> console.log('Hi! this is frontpage'); </script>
#stop
As conveyed by #gbalduzzi you need to return the data to the view as
return back()->with(['arr' => $arr]);
and access in your view as
#if(session()->has('arr'))
<table class="table table-striped table-hover table-reflow">
#php $arr = session('arr'); #endphp
#foreach($arr as $key => $value)
<tr>
<th ><strong> {{ $value['name'] }}: </strong></th>
<td>{{ $value['details'] }} <td>
</tr>
#endforeach
</table>
#endif
Docs
Change
return back()->with($arr);
with
return back()->with(['arr' => $arr]);
return back()->with('arr', $arr); // Should be equivalent
return back()->compact($arr); // Should be equivalent
The with method doesn't accept only a single value: you need to specify an array, a key and a value or use the compact method