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

[code]

<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>
</fieldset>

[/code]

And the CSS

[code]

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

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; }

[/code]

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.

rating-column

for the migration you can use a code like this:

[code]

Schema::create(‘Images’, function(Blueprint $table)
{
$table->smallInteger(‘rating’);
});

[/code]

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.

[code]

public function store(CreateStoryFormRequest $request)
{

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

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

[/code]

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:

[code]

<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>
</fieldset>
</div>

[/code]

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:

[code]

public function update(donatorStoryRequest $request, $id)
{

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

[/code]

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

 

CategoriesUncategorized

Leave a Reply

Your email address will not be published.