Hvordan lage en stjernerating i php



Data

Hvordan lage en stjernerating i php

av Ole Petter den 12. mai 2020

Sist oppdatert: 3 juli, 2020 kl 13:36

Contents [hide]

Sette opp databasen og koble til

For å lagre stjernevurderingene bruker jeg MySQL , og PHP for å hente dataene fra databasen.

Jeg oppretter en database kalt star_rating, og i denne databasen lager jeg en tabell kalt rating.

Tabellen rating inneholder en kolonne id, og en kolonne rating, samt en kolonne username.

1
2
<?php
$link = mysqli_connect("localhost", "root", "", "star_rating");

Lage index.php-filen

For å vise stjernevurderingsskjemaet bruker jeg font-awesome-biblioteket for å hente ikoner, og gir hver rating et form med en knapp med et stjerneikon.

Jeg bruker også bootstrap for å sette opp siden kjapt og enkelt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Star Rating</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
 
<main>
 
  <h2 class="text-center">Legg til en stjernevurdering!</h2>

Hver stjernevurdering har en skjult input med name=»rating», 1 stjerne har value=»1″, 2 stjerner har value=»2″ osv.

1
2
3
4
<form action="includes/add_rating.php" method="POST">
  <input type="hidden" value="1" name="rating">
  <button class="star-rating"><i class="fa fa-star" aria-hidden="true"></i></button>                           
</form>
Når man sender inn en vurdering, sendes verdien av stjernen til skjemaet add_rating.php

Behandle innsendte ratinger

For å sette inn hver rating i databasen star_rating oppretter jeg en ny mappe kalt includes, og i denne mappen oppretter jeg en fil kalt add_rating.php.

Denne filen håndterer innsendte ratinger og kommuniserer med databasen.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$link = mysqli_connect("localhost", "root", "", "star_rating");
 
$rating = mysqli_real_escape_string($link, $_POST['rating']);
$username = mysqli_real_escape_string($link, $_POST['username']);
 
$sql = "INSERT INTO rating (rating, username) VALUES ('$rating', '$username')";
if (mysqli_query($link, $sql)) {
    header("Location: ../index.php?msg=rated");
} else {
    header("Location: ../index.php?msg=rating_failed");
}
?>

Hver gang jeg trykker på en av rating-knappene, sendes et skjema med verdien av stjernevurderingen, 5 stjerner gir en verdi på 5 som sendes til add_rating.php.

add_rating.php sender da denne verdien til tabellen rating i databasen, og oppretter en ny rad i tabellen.

Finne antall ratinger og sum av alle ratingene

For å finne antall ratinger og summen av disse bruker jeg en SQL funksjon kalt COUNT(), og for å finne summen av alle ratinger bruker jeg en annen SQL funksjon kalt SUM().

1
$sql = "SELECT COUNT(id) AS num_ratings, SUM(rating) AS sum_ratings FROM rating";

COUNT teller antall rader i tabellen basert på id, mens SUM summerer alle radene i kolonnen rating. Når jeg har samlet disse to verdiene, kan jeg bruke SQL-funksjonen AS til å knytte disse verdiene til spesifikke navn.

Deretter bruker jeg PHP til å opprette to variabler som knytter databaseresultatene til spesifikke php-variabler slik at de kan brukes i index.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
$link = mysqli_connect("localhost", "root", "", "star_rating");
 
$sql = "SELECT COUNT(id) AS num_ratings, SUM(rating) AS sum_ratings FROM rating";
$result = mysqli_query($link, $sql);
$sums = mysqli_fetch_array($result);
 
$num_ratings = $sums['num_ratings'];
$sum_ratings = $sums['sum_ratings'];
 
$avg_rating = $sum_ratings/$num_ratings;
$avg_rating_rounded = floor($sum_ratings/$num_ratings); ?>

Vise rating på index.php

For å vise ratingen i index.php bruker jeg variabelen $avg_rating_rounded og sammenligner den verdien med verdien til hver enkelt rating-knapp.

For å gjøre ting enklere oppretter jeg en funksjon kalt is_active() som tar i mot to parametere, verdien av rating-knappen som trykkes, og gjennomsnittsverdien.

1
2
3
4
5
6
7
function is_active($rating, $avg_rating) {
    if ($avg_rating >= $rating) {
        echo 'text-warning';
    } else {
        echo '';
    }
}

Deretter kan denne funksjonen brukes i hvert enkelt form for å vise en gul stjerne hvis gjennomsnittsrating er lik eller større enn verdien av den gjeldende knappen som trykkes.

1
2
3
4
&lt;form action="includes/add_rating.php" method="POST">
  &lt;input type="hidden" value="1" name="rating">
  &lt;button class="star-rating">&lt;i class="fa fa-star &lt;?php is_active(1, $avg_rating); ?>" aria-hidden="true">&lt;/i>&lt;/button>                           
&lt;/form>

Hvis gjennomsnittlig vurdering er lik eller høyere enn 3 for eksempel, vil stjerne 1-3 være gul, og hvis gjennomsnittlig vurdering er 4.1, hvil stjerne 1-4 være gul.

Kildekode

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  &lt;meta http-equiv="x-ua-compatible" content="ie=edge">
  &lt;title>Star Rating&lt;/title>
  &lt;!-- Font Awesome -->
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  &lt;!-- Bootstrap core CSS -->
  &lt;link rel="stylesheet" href="css/bootstrap.min.css">
&lt;/head>
&lt;body>
 
&lt;main>
 
  &lt;h2 class="text-center">Legg til en stjernevurdering!&lt;/h2>
  &lt;div class="my-5">
 
    &lt;?php include 'includes/show_rating.php'; ?>
 
    &lt;?php
    function is_active($rating, $avg_rating) {
        if ($avg_rating >= $rating) {
            echo 'text-warning';
        } else {
            echo '';
        }
    }
    ?>
 
    &lt;div class="d-flex justify-content-center">
      &lt;form action="includes/add_rating.php" method="POST">
        &lt;input type="hidden" value="1" name="rating">
        &lt;button class="star-rating">&lt;i class="fa fa-star &lt;?php is_active(1, $avg_rating); ?>" aria-hidden="true">&lt;/i>&lt;/button>                           
      &lt;/form>
      &lt;form action="includes/add_rating.php" method="POST">
        &lt;input type="hidden" value="2" name="rating">
        &lt;button type="submit" class="star-rating">&lt;i class="fa fa-star &lt;?php is_active(2, $avg_rating); ?>" aria-hidden="true">&lt;/i>&lt;/button>                           
      &lt;/form>
      &lt;form action="includes/add_rating.php" method="POST">
        &lt;input type="hidden" value="3" name="rating">
        &lt;button class="star-rating">&lt;i class="fa fa-star &lt;?php is_active(3, $avg_rating); ?>" aria-hidden="true">&lt;/i>&lt;/button>                           
      &lt;/form>
      &lt;form action="includes/add_rating.php" method="POST">
        &lt;input type="hidden" value="4" name="rating">
        &lt;button class="star-rating">&lt;i class="fa fa-star &lt;?php is_active(4, $avg_rating); ?>" aria-hidden="true">&lt;/i>&lt;/button>                           
      &lt;/form>
      &lt;form action="includes/add_rating.php" method="POST">
        &lt;input type="hidden" value="5" name="rating">
        &lt;button data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="star-rating &lt;?php is_active(5, $avg_rating); ?>">&lt;i class="fa fa-star" aria-hidden="true">&lt;/i>&lt;/button>                           
      &lt;/form>
    &lt;/div>
 
  &lt;/div>
 
&lt;/main>
 
 
&lt;/body>
&lt;/html>

add_rating.php

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$link = mysqli_connect("localhost", "root", "", "star_rating");
 
$rating = mysqli_real_escape_string($link, $_POST['rating']);
$username = mysqli_real_escape_string($link, $_POST['username']);
 
$sql = "INSERT INTO rating (rating, username) VALUES ('$rating', '$username')";
if (mysqli_query($link, $sql)) {
    header("Location: ../index.php?msg=rated");
} else {
    header("Location: ../index.php?msg=rating_failed");
}
?>

show_rating.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
$link = mysqli_connect("localhost", "root", "", "star_rating");
 
$sql = "SELECT COUNT(id) AS num_ratings, SUM(rating) AS sum_ratings FROM rating";
$result = mysqli_query($link, $sql);
$sums = mysqli_fetch_array($result);
 
$num_ratings = $sums['num_ratings'];
$sum_ratings = $sums['sum_ratings'];
 
$avg_rating = $sum_ratings/$num_ratings;
$avg_rating_rounded = floor($sum_ratings/$num_ratings); ?>
 
<div class="text-center">
    <p>Gjennomsnittlig vurdering: <strong><?php echo $avg_rating; ?></strong><p>
    <p>Gjennomsnittlig vurdering avrundet til nærmeste heltall: <strong><?php echo $avg_rating_rounded; ?></strong><p>
</div>
useCallback

useImperativeHandle

Lag en node app med ejs

Legg igjen en kommentar

Søk på siden
Siste innlegg
Siste kommentarer
Arkiv
Kategorier
Meta