Skip to content

Instantly share code, notes, and snippets.

@kraigh

kraigh/index.html

Created November 1, 2016 20:31
Show Gist options
  • Save kraigh/6dc57509257b0f8e2f57b466948f808a to your computer and use it in GitHub Desktop.
Save kraigh/6dc57509257b0f8e2f57b466948f808a to your computer and use it in GitHub Desktop.
Download ZIP
CSE 104 Reviews Page
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<div class="container">
<h1>Restaurant Reviews</h1>
<ul id="reviews-list" class="list-group">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
jQuery(document).ready(function ($) {
// get JSON data from server
$.getJSON("http://kraigh.com/cse104/reviews.php", function(data) {
// Loop through each JSON item
$.each(data, function(index, val) {
console.log(val);
var starsHtml = '';
// Loop 5 times, 1 for each possible star
for (var i = 0; i < 5; i++) {
// subtract 1 from rating since i starts at 0
if (i > (parseInt(val.rating, 10) - 1)) {
// If current loop index is greater than the rating level, use an empty star
starsHtml += '<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>';
} else {
// If current loop index is equal to or less than the rating level, use a filled star
starsHtml += '<span class="glyphicon glyphicon-star" aria-hidden="true"></span>';
}
}
// Add review item <li>
$('#reviews-list').append('<li id="review-'+index+'" class="list-group-item row"></li>');
// Add user name and stars
$('#review-'+index).append('<div class="col-md-3 review-name">'+val.name+'<br />'+starsHtml+'</div>');
// Add user menu choice
$('#review-'+index).append('<div class="col-md-2 review-menu">'+val.menu+'</div>');
// Add user greeted entry
$('#review-'+index).append('<div class="col-md-3 review-greeted"><b>Was greeted when:</b> '+val.greeted+'</div>');
// Add user comments
$('#review-'+index).append('<div class="col-md-4 review-comments"><b>Comments:</b> '+val.comments+'</div>');
});
});
});
Raw
reviews.php
<?php
// If data is being submitted, process it and save
if (!empty($_POST)) {
// Replace empty values with a default value
if (empty($_POST['name'])) {
$_POST['name'] = 'anonymous';
}
if (empty($_POST['greeted'])) {
$_POST['greeted'] = 'none';
}
if (empty($_POST['comments'])) {
$_POST['comments'] = 'none';
}
// Load results from json file
$allResults = file_get_contents('results.json');
// Parse json into array
$tempArray = json_decode($allResults);
if (is_array($tempArray)) {
// If values already exist, add our POST values
array_push($tempArray, $_POST);
} else {
// If no values exist (empty file) create new array
$tempArray = array($_POST);
}
// Reverse array so newest are last
$tempArray = array_reverse($tempArray, true);
// Encode array as json and save to file
$jsonData = json_encode($tempArray);
file_put_contents('results.json', $jsonData);
// Redirect to reviews page
header("Location: http://kraigh.com/cse104/index.html?success=1");
die();
} else {
// No data submitted, so this is a GET request for existing submissions. Return JSON.
$jsonData = file_get_contents('results.json');
echo $jsonData;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment