问题
index.php 是一个页面，显示MAMP使用SQL托管的服务器中的相册 . 在 grid.php 中，我查询服务器并在网格中显示相册 . index.php 在 addalbum.php 中也有一个表单，允许用户将相册添加到数据库中 .
但是，当用户在 addalbum.php 中提交表单时，尽管数据库已更新，但即使我这样做，页面也不会显示新数据：
<form action="../p3/index.php" method="post">
我必须刷新页面或再次单击它以查看更新的数据 . 我很困惑为什么会发生这种情况，因为我将 form action 设置为 index.php 所以它应该刷新页面 .
如果有人对此有一些建议，将不胜感激！
代码
的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;
})
}
文件目录结构
