store image in folder and get them to the frontend

In this Article we will see how we are able to add images or other files to our projects folder and show them to the frontend.

  1. The Controller,

[code]public function store(Request $request)
$store = new Post;

$filename = $request->file->getClientOriginalName();
$filename = $request->file(‘file’)->storeAs(‘/images’, $filename, ‘public’);
$store->image = $filename;

2. The model


class Post extends Model

public function getImageAttribute($value)
return asset(“storage/$value”);



3. The view

[code]<img src=”{{ $posts->image }}” alt=”post image” width=”50px” id=”imediateImage”>[/code]

show backend validation errors

it’s as simple as this: Just post the following code to a view.

@if ($errors->any())
<div class=”alert alert-danger”>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>

Form validaton Laravel V5.5

open up the CLI or command line, and add this command to it

php artisan make:request StoreBlogPost

Notice: give it a name that is not that same as a model or controller, because you’ll have to add it to the controller.
After then it will create a new file at app/Http/Requests open this file and add this to it

 * Get the validation rules that apply to the request.
 * @return array
public function rules()
    return [
        'title' => 'required|unique:posts|max:255',
        'body' => 'required',

This means that you are validation the title form and the body form of course you can add as many as you want.

at the authorize() method return it as true or add more validation for the authorization there.

public function authorize()
return true;

at your controller add the file or request name before the $request variable.

Notice: You’ll have to add the request file to this controller so add this: use AppHttpRequestsPostToPage ;

public function store(PostToPage $request)
{ … }

this is all you need to do

Create Symbolic link between storage and public folder in Laravel

ln -s /home/vagrant/Code/Project/project-app/storage/app/public /home/vagrant/Code/Project/project-app/public/storage

ln -s D:/xampp/htdocs/ D:/xampp/htdocs/

ln -s /home/lagjjail/personalitetet/storage/app/public /home/lagjjail/public_html/public/storage

or try

php artisan storage:link

Echo it like this:

echo asset('storage/file.png');

Call Dynamic css and javascript in app.blade.php and co.

to call a dynamic asset in laravel you simply add the asset or resource like this:

[code]<link href=”{{ asset(‘css/style.css’) }}” rel=”stylesheet”>[/code]

refering to the css directory or folder and calling for example the style.css

or for javascript files use:

[code]<script src=”{{ asset(‘js/jquery-ui.min.js’) }}”></script>[/code]

Get checkbox options from database in laravel

The view:


<div class=”form-group”>
@foreach($publicationPurposes as $publicationPurpose)
<div class=”checkbox”>
<input name=”purpose[]” id=”purpose{{ $publicationPurpose->id }}” type=”checkbox” value=”{{ $publicationPurpose->id }}” >
{{ $publicationPurpose->name }}


The database:

checkbox from database laravel

the Controller:


$publicationPurposes = PublicationPurpose::with([‘publicationPurposeMediaType’ => function($query){
$query->with([‘publicationPurposeTags’, ‘mediaType’]);

return view(‘the-view’)->with([‘publicationPurposes’ => $publicationPurposes,]);



Validate radio buttons with jquery

In this short article I’ll show you how you can validate some simple radio-buttons using jQuery, other then that we will, also scroll to the top and show a simple red text with the a message.

As you can see on the code below it’s a simple form with some radio-buttons and a submit button.


<input type=’radio’ name=’image_quality’ disabled=’disabled’>
<input type=’radio’ name=’image_quality’>
<input type=’radio’ name=’image_quality’>
<input type=’submit’ id=’save’>

<div class=”error-message”></div>


Then we vavlidate them using the jQuery bellow, this code says, when the save button is clicked, execute the function and look if the input with the name image_quality is not chaged (notice the ! mark), then do what is bellow, with is scroll to the top with the [code]window.scrollTo(0,0)[/code] functions to the Coordinates 0,0 which means all the way to the top, and also applend a paragraf to the divider with the class error-message which says please choose a radio button and return false so don’t let the form execute.


//validate the image qualification
if (!$(“input[name=’image_quality’]:checked”).val()) {
window.scrollTo(0, 0);
$( “.error-message” ).append( “<p style=’color:red;’>please choose a radio button</p>” );
return false;
//validate the image qualification


That is all. All you need is this small peace of jQuery.



Laravel rating system with 5 stars

This is a short tutorial on how to make a rating system with 5 stars basically a CRUD system. In this case we will rate images but of course you can use it for whatever you want.

First is the View so to show the stars you can use different Frontend code but we’ll show you one just in case.  here is one from codepen 

It’s pretty simple. the HTML


<h1>Pure CSS Star Rating Widget</h1>
<fieldset class=”rating”>
<input type=”radio” id=”star5″ name=”rating” value=”5″ /><label class = “full” for=”star5″ title=”Awesome – 5 stars”></label>
<input type=”radio” id=”star4″ name=”rating” value=”4″ /><label class = “full” for=”star4″ title=”Pretty good – 4 stars”></label>
<input type=”radio” id=”star3″ name=”rating” value=”3″ /><label class = “full” for=”star3″ title=”Meh – 3 stars”></label>
<input type=”radio” id=”star2″ name=”rating” value=”2″ /><label class = “full” for=”star2″ title=”Kinda bad – 2 stars”></label>
<input type=”radio” id=”star1″ name=”rating” value=”1″ /><label class = “full” for=”star1″ title=”Sucks big time – 1 star”></label>


And the CSS


@import url(//;

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating {
border: none;
float: left;

.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: “f005”;

.rating > .half:before {
content: “f089”;
position: absolute;

.rating > label {
color: #ddd;
float: right;

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }


Once the view is complete and it’s shown you need to add a new column on the database, we just assume you know the drill. You either add the column with the migration technique or directly on the database, at the end it’s must look something like this.


for the migration you can use a code like this:


Schema::create(‘Images’, function(Blueprint $table)


Next is the controller, of course we assume you know Laravel and by now you already have made all routs ready. You can create a new method or add the rating to the store function. in my case i used the store function and added the rating to the inserting process it looked something like this.


public function store(CreateStoryFormRequest $request)

DB::transaction(function (){
$createImages= iamges::create([

‘rating’ => $request->input(‘image_quality’),


It should by now fill the database with the right information.

But we also want to get the information for the database, so we need an edit method. the view will look something like this:


<label for=”rating”>Image quality</label>
<div class=”form-group”>
<fieldset class=”rating”>
<input type=”radio” id=”star5″ name=”image_quality” value=”5″ {{ $images->rating == ‘5’ ? ‘checked’ : ” }}/>
<label class = “full” for=”star5″ title=”Awesome – 5 stars”></label>

<input type=”radio” id=”star4″ name=”image_quality” value=”4″ {{ $images->rating == ‘4’ ? ‘checked’ : ” }}/>
<label class = “full” for=”star4″ title=”Pretty good – 4 stars”></label>

<input type=”radio” id=”star3″ name=”image_quality” value=”3″ {{ $images->rating == ‘3’ ? ‘checked’ : ” }} />
<label class = “full” for=”star3″ title=”Meh – 3 stars”></label>

<input type=”radio” id=”star2″ name=”image_quality” value=”2″ {{ $images->rating == ‘2’ ? ‘checked’ : ” }} />
<label class = “full” for=”star2″ title=”Kinda bad – 2 stars”></label>

<input type=”radio” id=”star1″ name=”image_quality” value=”1″ {{ $images->rating == ‘1’ ? ‘checked’ : ” }} />
<label class = “full” for=”star1″ title=”Sucks big time – 1 star”></label>


To update you need to add the folowing to your update controller [code]$story->all = $request->input(‘all’);[/code]

Or like this with the complete controller:


public function update(donatorStoryRequest $request, $id)

$story->rating = $request->input(‘image_quality’);


Basically this is it, now you can read, rate and edit the rating.


Disable other checkbox-es if one is checked

If you have to make some kind of validation where if one checkbox is checked there other should not be able to be checked or if you check a specific one the others or some other specific ones should be disabled then you can do this with some simple Javascript / jQuery

These fields that we want to control have an id and also a more specific name, but just in my case you of course can change it as you want/need.

<div class=”col-lg-8 data” style=”height: 270px;”>
<div class=”checkbox”>
<input name=”name”  value=”1″ checked=”” class=”someclass” id=”first” type=”checkbox”>
first      </label>

<div class=”checkbox”>
<input name=”name” value=”2″ class=”someclass” id=”second” type=”checkbox”>
second      </label>

<div class=”checkbox”>
<input name=”name” value=”3″ class=”someclass” type=”checkbox”>
something       </label>

<div class=”checkbox”>
<label><input name=”name” value=”4″ class=”someclass” type=”checkbox”>
something      </label>

<div class=”checkbox”>
<label><input name=”name” value=”5″ class=”someclass” type=”checkbox”>
something       </label>
<div class=”checkbox”>
<label><input name=”name” value=”6″ class=”someclass” id=”fourth” type=”checkbox”>
fourth        </label>

<div class=”checkbox”>
<label><input name=”name” value=”29″ class=”someclass” id=”fifth” type=”checkbox”>
fifth      </label>

<div class=”checkbox”>
<input name=”name” value=”11″ class=”someclass” type=”checkbox”>
something       </label>


<div class=”checkbox”>
<label><input name=”name” value=”7″ class=”someclass” type=”checkbox”>
something       </label>


in this example we are disabling the fourth and fifth fields if either the first or the second fields are checked or we check them. or vise versa as well if the fourth or the fifth fields are checked we are disabling the first and second fields.

$( document ).ready(function() {
if($(‘#first, #second’).is(“:checked”)){
$(‘#fourth’).attr(‘disabled’, true);
$(‘#fifth’).attr(‘disabled’, true);
} else if ($(‘#fourth, #fifth’).is(“:checked”)){
$(‘#first’).attr(‘disabled’, true);
$(‘#second’).attr(‘disabled’, true);

$(‘#first, #second’).change(function () {
if ($(this).is(“:checked”)) {
$(‘#fourth’).attr(‘disabled’, true);
$(‘#fifth’).attr(‘disabled’, true);
} else if($(‘#first, #second’).is(“:checked”)){
$(‘#fourth’).attr(‘disabled’, true);
$(‘#fifth’).attr(‘disabled’, true);
else {
$(‘#fourth’).attr(‘disabled’, false);
$(‘#fifth’).attr(‘disabled’, false);

//check if fourth is checked disable first
$(‘#fourth, #fifth’).change(function () {
if ($(this).is(“:checked”)) {
$(‘#first’).attr(‘disabled’, true);
$(‘#second’).attr(‘disabled’, true);
} else if ($(‘#fourth, #fifth’).is(“:checked”)){
$(‘#first’).attr(‘disabled’, true);
$(‘#second’).attr(‘disabled’, true);
else {
$(‘#first’).attr(‘disabled’, false);
$(‘#second’).attr(‘disabled’, false);

Export table to PDF and other formats with Javascript using tableExport.jquery.plugin

In this Article I’ll show you how to export tables using a js plugin called tableExport.jquery.plugin wich you can download from github.

this plugin allows you to download or export in various formats such as: CSV, DOC, JSON, PDF, PNG, SQL, TSV, TXT, XLS (Excel 2000 HTML format), XLSX (Excel 2007 Office Open XML format), XML (Excel 2003 XML Spreadsheet format), XML (Raw xml).

the installation is fairly simple import the scripts on your website like

To save the generated export files on client side, include in your html code:

<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>

To export the table in XLSX (Excel 2007+ XML Format) format, you need to include additionally:

<script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>

To export the table as a PDF file the following includes are required:

<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

To export the table in PNG format, you need to include:

<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>

Regardless of the desired format, finally include:

<script type="text/javascript" src="tableExport.min.js"></script>

lease keep this include order.


Library Version
jQuery >= 1.9.1
FileSaver >= 1.2.0
html2canvas >= 0.5.0-beta4
jsPDF 1.1.239 or 1.3.2
jsPDF-AutoTable 2.0.14 or 2.0.17


// CSV format

// Excel 2000 html format

// XML Spreadsheet 2003 file format with multiple worksheet support

                        worksheetName: ['Table 1','Table 2', 'Table 3']});
// PDF export using jsPDF only

                           jspdf: {orientation: 'p',
                                   margins: {left:20, top:10},
                                   autotable: false}
// PDF format using jsPDF and jsPDF Autotable 

                           jspdf: {orientation: 'l',
                                   format: 'a3',
                                   margins: {left:10, right:10, top:20, bottom:20},
                                   autotable: {styles: {fillColor: 'inherit', 
                                                        textColor: 'inherit'},
                                               tableWidth: 'auto'}
// PDF format with callback example

function DoCellData(cell, row, col, data) {}
function DoBeforeAutotable(table, headers, rows, AutotableSettings) {}

$('table').tableExport({fileName: sFileName,
                        type: 'pdf',
                        jspdf: {format: 'bestfit',
                                margins: {left:20, right:10, top:20, bottom:20},
                                autotable: {styles: {overflow: 'linebreak'},
                                            tableWidth: 'wrap',
                                            tableExport: {onBeforeAutotable: DoBeforeAutotable,
                                                          onCellData: DoCellData}}}

Options (Default settings)

consoleLog: false
csvEnclosure: '"'
csvSeparator: ','
csvUseBOM: true
displayTableName: false
escape: false
excelRTL: false
excelstyles: []
excelFileFormat: 'xlshtml'
fileName: 'tableExport'
htmlContent: false
ignoreColumn: []
ignoreRow: []
jsonScope: 'all'
jspdf: orientation: 'p'
       format: 'a4'
       margins: left: 20
                right: 10
                top: 10
                bottom: 10
       onDocCreated: null
       autotable: styles: cellPadding: 2
                          rowHeight: 12
                          fontSize: 8
                          fillColor: 255
                          textColor: 50
                          fontStyle: 'normal'
                          overflow: 'ellipsize'
                          halign: 'left'
                          valign: 'middle'
                  headerStyles: fillColor: [52, 73, 94]
                                textColor: 255
                                fontStyle: 'bold'
                                halign: 'center'
                  alternateRowStyles: fillColor: 245
                  tableExport: doc: null
                               onAfterAutotable: null
                               onBeforeAutotable: null
                               onAutotableText: null
                               onTable: null
                               outputImages: true
numbers: html: decimalMark: '.'
               thousandsSeparator: ','
         output: decimalMark: '.',
                 thousandsSeparator: ','
onCellData: null
onCellHtmlData: null
onIgnoreRow: null
onMsoNumberFormat: null
outputMode: 'file'
pdfmake: enabled: false
         docDefinition: pageOrientation: 'portrait'
                        defaultStyle: font: 'Roboto'
         fonts: {}
tbodySelector: 'tr'
tfootSelector: 'tr'
theadSelector: 'tr'
tableName: 'myTableName'
type: 'csv'
worksheetName: 'WorksheetName'

ignoreColumn can be either an array of indexes (i.e. [0, 2]) or field names (i.e. [“id”, “name”]).

  • Indexes correspond to the position of the header elements th in the DOM starting at 0. (If the th elements are removed or added to the DOM, the indexes will be shifted so use the functionality wisely!)
  • Field names should correspond to the values set on the “data-field” attribute of the header elements th in the DOM.
  • “Nameless” columns without data-field attribute will be named by their index number (converted to a string)

To disable formatting of numbers in the exported output, which can be useful for csv and excel format, set the option numbers: output to false.

Set the option excelFileFormat to 'xmlss' if you want to export in XML Spreadsheet 2003 file format. Use this format if multiple tables should be exported into a single file. Excel 2000 html format is the default excel file format which has better support of exporting table styles.

The excelstyles option lets you define the css attributes of the original html table cells, that should be taken over when exporting to an excel worksheet (Excel 2000 html format only).

To export in XSLX format protobi/js-xlsx forked from SheetJS/js-xlsx is used. Please note that the implementation of this format type lets you only export table data, but not any styling information of the html table.

For jspdf options see the documentation of jsPDF and jsPDF-AutoTable resp.

There is an extended setting for jsPDF option 'format'. Setting the option value to 'bestfit' lets the tableExport plugin try to choose the minimum required paper format and orientation in which the table (or tables in multitable mode) completely fits without column adjustment.

Also there is an extended setting for the jsPDF-AutoTable options 'fillColor', 'textColor' and 'fontStyle'. When setting these option values to 'inherit' the original css values for background and text color will be used as fill and text color while exporting to pdf. A css font-weight >= 700 results in a bold fontStyle and the italic css font-style will be used as italic fontStyle.

When exporting to pdf the option outputImages lets you enable or disable the output of images that are located in the original html table.

Optional html data attributes

(can be applied while generating the table that you want to export)


<td data-tableexport-cellformat="">...</td> -> An empty data value preserves format of cell content. E.g. no number seperator conversion
                                               More cell formats to be come...


<table style="display:none;" data-tableexport-display="always">...</table> -> A hidden table will be exported

<td style="display:none;" data-tableexport-display="always">...</td> -> A hidden cell will be exported

<td data-tableexport-display="none">...</td> -> This cell will not be exported

<tr data-tableexport-display="none">...</tr> -> All cells of this row will not be exported


<td data-tableexport-msonumberformat="@">...</td> -> Data value will be used to style excel cells with mso-number-format (Excel 2000 html format only)
                                                      "@"       excel treats cell content alway as text, even numbers
                                                      "0"        excel will display no decimals for numbers
                                                      "0.000"   excel displays numbers with 3 decimals
                                                      "0%"       excel will display a number as percent with no decimals
                                                      "Percent"  excel will display a number as percent with 2 decimals


<th data-tableexport-value=export title>title</th> -> “export title” instead of “title” will be exported <td data-tableexport-value=export content>content</td> -> “export content” instead of “content” will be exported

Thanks to hhurz for forking the original project and enabling us to do more with the plugin.

My experiance

What I’ve done is in a laravel project is this. First of all I’ve added a button. like this:

<button type="button"
             class="btn btn-default btn-xs pull-left mr-1 export_to_pdf"
             value="table-{{ $institution->InstitutionId .'-'. $periodIndex }}"
             onClick="$('#table-{{ $institution->InstitutionId }}').tableExport({type:'pdf',
                     ignoreColumn: [14],
                     jspdf: {orientation: 'l',
                     format: 'a4',
                     margins: {left:10, right:10, top:20, bottom:20},
                     autotable: {styles: {fillColor: 'inherit',
                     textColor: 'inherit'},
                     tableWidth: 'auto'}
        Export to PDF
This button had some bootstrap classes and Id and a value with was kinda the id of the table it represents after this I've added a onClick function with the table Id wich I names #table - and the table id in case there are more tables showing on this page and I need to export just the one I needed or the button represented.
Then I've added the tableExport function wich did the fundamental job to export to pdf. i ignored the column 14 with an array, the orientation was landscape, the document format an A4, some margins, and some styles.

The table had some bootstrap classes, an id with the table id.
<table class="table table-striped table-hover" id="table-{{ $institution->InstitutionId }}">

hope that helps you.