Hvordan lage en stjernerating i php
Hvordan lage en stjernerating i php
av Ole Petter den 12. mai 2020
Sist oppdatert: 3 juli, 2020 kl 13:36Contents
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.
<?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.
<!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.
<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>
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.
<?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().
$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.
<?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.
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.
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="1" name="rating">
<button class="star-rating"><i class="fa fa-star <?php is_active(1, $avg_rating); ?>" aria-hidden="true"></i></button>
</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
<!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>
<div class="my-5">
<?php include 'includes/show_rating.php'; ?>
<?php
function is_active($rating, $avg_rating) {
if ($avg_rating >= $rating) {
echo 'text-warning';
} else {
echo '';
}
}
?>
<div class="d-flex justify-content-center">
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="1" name="rating">
<button class="star-rating"><i class="fa fa-star <?php is_active(1, $avg_rating); ?>" aria-hidden="true"></i></button>
</form>
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="2" name="rating">
<button type="submit" class="star-rating"><i class="fa fa-star <?php is_active(2, $avg_rating); ?>" aria-hidden="true"></i></button>
</form>
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="3" name="rating">
<button class="star-rating"><i class="fa fa-star <?php is_active(3, $avg_rating); ?>" aria-hidden="true"></i></button>
</form>
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="4" name="rating">
<button class="star-rating"><i class="fa fa-star <?php is_active(4, $avg_rating); ?>" aria-hidden="true"></i></button>
</form>
<form action="includes/add_rating.php" method="POST">
<input type="hidden" value="5" name="rating">
<button data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="star-rating <?php is_active(5, $avg_rating); ?>"><i class="fa fa-star" aria-hidden="true"></i></button>
</form>
</div>
</div>
</main>
</body>
</html>
add_rating.php
<?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
<?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>
