Problem
index.php is a page that displays albums from a server hosted by MAMP using SQL. In grid.php I query the server and displays the albums in a grid. index.php also has a form in addalbum.php that allows the user to add an album to the database.
However, when the user submits the form in addalbum.php although the database gets updated, the page doesn't show the new data even though I do:
<form action="../p3/index.php" method="post">
I have to either refresh the page or click on it again to see the updated data. I'm confused as to why this is happening since I set the form action to index.php so it should refresh the page.
If anyone has some advice on that it would be greatly appreciated!
Code
index.php
<?php
$name = "Albums";
require_once('config.php');
require_once("nav.php");
require_once("php/header.php");
require_once("php/grid.php");
require_once("php/footer.php");
// require_once("../P3_M2/php/header.php");
// require_once("../P3_M2/php/grid.php");
// require_once("../P3_M2/php/footer.php");
require_once('php/login.php');
require_once('php/addalbum.php');
$error_log = addAlbumToDatabase();
foreach($error_log as $error){ //debuggin
echo "<h1>$error</h1>";
}
?>
config.php
<?php
define( 'DB_HOST', 'blahblahblah');
define('DB_NAME', 'blahblahblah');
define('DB_USER', 'blahblahblah');
define('DB_PASS','blahblahblah');
//Set up sqli
$mysqli = new mysqli( DB_HOST, DB_USER, DB_PASS, DB_NAME );
if ($mysqli->errno) { //Was there an error connecting to the database?
//The page isn't worth much without a db connection so display the error and quit
print($mysqli->error);
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo "$name" ?>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Styling-->
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/grid.css" />
<link type="text/css" rel="stylesheet" href="css/form.css" />
<?php
$nameLowercased = strtolower($name);
echo "<link type='text/css' rel='stylesheet' href='css/$nameLowercased.css'/>";
?>
<!--Custom icon-->
<link href="https://file.myfontastic.com/fNQ9F99nd88vQm96ESUaLW/icons.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Javascript-->
<script type="text/javascript" src="js/main.js"></script>
</head>
grid.php
<?php
/*DATA*/
//Query for each page
$queryFor = array(
'Albums' => 'SELECT * FROM Album;',
'Photos' => 'SELECT * FROM Image;',
'Album' => "SELECT * FROM Image WHERE id IN
(SELECT image_id FROM AIDict WHERE album_id = $album_id);"
);
//Loop through the $result rows fetching each one as an associative array
$printGridFor = array(
'Albums'=> function($row){
$albumId = $row['id'];
$albumTitle = $row['title'];
$albumDate = $row['date_created'];
$dateFormatted = date("F d, Y", strtotime($albumDate));
$creator = $row['creator'];
print("<div class='grid-square'>
<a href='album.php?id=$albumId'class='grid-info'>
<h1>$albumTitle</h1>
<h2>$dateFormatted</h2>
<h2>$creator</h2>
</a>
<button class='delete'><span class='icon-trash-can'></span></button>
<button class='edit''><span class='icon-pencil'></span></button>
</div>");
},
'Photos' => function($row){
$imgTitle = $row['title'];
$filename = $row['file_name'];
$filepath = $row['file_path'].$filename;
print("<div class='grid-square'>
<img src='$filepath' alt='$imgTitle ''>
<button class='delete'><span class='icon-trash-can'></span></button>
<button class='edit'><span class='icon-pencil'></span></button>
</div>");
},
'Album' => function($row){ //Same as 'Photos'
$imgTitle = $row['title'];
$filename = $row['file_name'];
$filepath = $row['file_path'].$filename;
print("<div class='grid-square'>
<img src='$filepath' alt='$imgTitle ''>
<button class='delete'><span class='icon-trash-can'></span></button>
<button class='edit'><span class='icon-pencil'></span></button>
</div>");
}
);
/*SQL*/
//Get the data
$query = $queryFor[$name];
$result = $mysqli->query($query);
if (!$result) { //If no result, print the error
print($mysqli->error);
exit();
}
?>
<div class="grid">
<?php
while ($row = $result->fetch_assoc()) {
$printGridFor[$name]($row);
}
?>
</div>
<button class="add"><span class="icon-plus"></span></button>
addalbum.php
<?php
function addAlbumToDatabase(){
$errors = array();
if(isset($_POST['submit'])){
global $mysqli;
$maxIdQuery = "SELECT MAX(id) FROM Album";
$maxIdResult = $mysqli->query($maxIdQuery);
if (!$maxIdResult) { print($mysqli->error); exit();} //If no result, print the error
if($row = $maxIdResult->fetch_row()){
$maxId = $row[0]; //Get max id
//Insert album into database
$stmt = $mysqli->prepare("INSERT INTO Album (id, title, date_created, date_modified, location, creator)
VALUES (?, ?, ?, ?, ?, ?)");
$stmt->bind_param('ssssss', $album_id, $title, $date_created, $date_modified, $location, $creator);
$album_id = $maxId + 1;
$title = (isset($_POST['album-title'])) ? $_POST['album-title'] : "Untitled";
date_default_timezone_set('America/New_York');
$todays_date = date('Y-m-d');
$date_created = (!empty($_POST['date-created'])) ? $_POST['date-created'] : $todays_date;
$date_modified = (!empty($_POST['date-modified'])) ? $_POST['date-modified'] : $date_created;
$location = (isset($_POST['location'])) ? $_POST['location'] : NULL;
$creator = (isset($_POST['creator'])) ? $_POST['creator'] : NULL;
$executed = $stmt->execute(); //execute statement
$stmt->close(); //close statement
if(!$executed){ //Add to error log
$errors[] = "Unsucceful when inserting $title into database";
$errors[] = $mysqli->error;
}
return $errors;
}
$errors[] = "$title not inserted into database";
return $errors;
}
$errors[] = "Nothing added b/c submit button not pressed";
return $errors;
}
?>
<div class="form-screen">
<button class="close close-form"><span class="icon-x"></span></button>
<form action="../p3/index.php" method="post">
<div class="form-wrapper">
<h1>Add Album</h1>
<input type="text" name="album-title" placeholder="Album Title*" required>
<input type="text" name="date-created" class="date" placeholder="Date Created">
<input type="text" name="date-modified" class="date" placeholder="Date Modified">
<input type="text" name="location" placeholder="Location">
<input type="text" name="creator" placeholder="Author*" required="">
<button type="submit" class="field submit" name="submit" value="submit">Create Album</button>
</div>
</form>
</div>
main.js
$(document).ready(function () {
//Show/Hide edit & delete buttons
$(".grid").on("mouseenter", ".grid-square", function () {
$(this).find(".delete").fadeIn(100);
$(this).find(".edit").fadeIn(100);
});
$(".grid").on("mouseleave", ".grid-square", function () {
$(this).find(".delete").fadeOut(100);
$(this).find(".edit").fadeOut(100);
});
//Show/Hide nav bar
$(".closeNavBtn").on("click", function () {
$(".sidenav").css("width", "0px");
});
$(".menu").on("click", function () {
$(".sidenav").css("width", "250px");
});
$(window).scroll(function (event) {
if ($(".sidenav").width() === 250) {
$(".sidenav").css("width", "0vw");
}
});
//Show/Hide login screen
$(".login").on("click", function () {
$(".login-screen").fadeIn(300);
});
$(".close-login").on("click", function () {
$(".login-screen").fadeOut(300);
});
//Show/Hide form screen
$(".add").on("click", function(){
$(".form-screen").fadeIn(300);
});
$(".close-form").on("click", function(){
$(".form-screen").fadeOut(300);
});
//Customize input label based on file
var input = document.querySelector('.inputfile');
if(input != null){customizeInputLabel(input);}
//Datepicker
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(".date").datepicker({
inline: true,
showOtherMonths: true, dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});
});
//customizeInputLabel changes label when select file
function customizeInputLabel(input) {
var label = input.nextElementSibling
, labelVal = label.innerHTML;
input.addEventListener('change', function (e) {
var fileName = '';
if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
else fileName = e.target.value.split('\\').pop();
if (fileName) label.querySelector('span').innerHTML = fileName;
else label.innerHTML = labelVal;
})
}
File directory structure
