Ajax が問題の解決策のようです。
jQuery を使用すると、ページを簡単に更新できます。スタイルシート全体を切り替えることもできます。詳細については、この質問を参照してください
Ajax を使用すると、サーバーに呼び出しを送信して、ページを更新することなく、データベースに格納されている値を更新できます。JavaScript を取得して PHP と通信する方法の詳細については、この質問を参照してください。
例：
表示されるページを と呼びましょうindex.php:
<?php require_once("ajax.php"); //include your functions ?>
<html>
<head>
<title>Toggle</title>
<!-- include jQuery -->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<!-- include your javascript -->
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- This div will hold the current album layout -->
<div id="albumLayoutDiv">
<?php
// Gets the album specified in $album['layout'] so it will
// display on page load. This is defined in ajax.php
echo GetAlbumLayout($album['layout']);
?>
</div>
<input id="layout1" type="button" value="layout 1" />
<input id="layout2" type="button" value="layout 2" />
<input id="layout3" type="button" value="layout 3" />
</body>
</html>
ご覧のとおりGetAlbumLayout、ここでは定義されていません。次の外部ファイルに移動しましたajax.php。
<?php
function GetAlbumLayout($layout) {
if ($layout == 1) {
// UPDATE THE DATABASE TO LAYOUT 1
return $htmlForLayout1; // Display Album Layout 1
} else if ($layout == 2) {
// UPDATE THE DATABASE TO LAYOUT 2
return $htmlForLayout2; // Display Album Layout 2
} else if ($layout == 3) {
// UPDATE THE DATABASE TO LAYOUT 3
return $htmlForLayout3; // Display Album Layout 3
}
}
// Here is where we look at the values that were passed though
// Ajax. Remember the we used POST, and set the values in 'data'?
// You can see all of that here. You get the values by using
// $_POST['key'] = value. In this case I am using "action" to
// determine what PHP function we want to call.
// If 'action' is set from the Ajax call
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
// We set action to 'changeLayout' in the Ajax call
case 'changeLayout':
// likewise, we set "layoutNum" to be the number that the
// user clicked on. We access this value in the same was as
// the action
GetAlbumLayout($_POST['layoutNum']);
break;
/*
case 'anotherAction' :
someOtherFunction();
break;
*/
// ...etc... Add more here if you want to perform different
// ajax calls down the road
}
}
?>
最後に、Ajax 呼び出しとそれをまとめる Javascript について説明しますfunctions.js。
// This function fetches the layout number that we want from
// php and updates the "albumLayout" div on the page when
// successful.
function changeLayout(layoutNumber) {
// Start the Ajax call
$.ajax({
// set the url to your ajax.php file. This is what this
// Ajax call will POST to.
url: '/php/ajax.php',
type: 'post',
// the data can be thought of as the paramaters that you can
// use on the PHP side of things. Think of it as a dictionary
// or a map of values. You can pass in anything here that you
// need in PHP to call a function
data: {
action: 'changeLayout', // what we want to do
layoutNum: layoutNumber // the layout that was requested
},
// After we get the results back from PHP, it is stored as a
// string inside of output. Ajax is async - this won't happen
// until the results are received from PHP. In this case, I am
// updating the albumLayout div with the output gathered from
// the PHP function `GetAlbumLayout(layoutNumber)`
success: function(output) {
$('#albumLayout').html(output);
}
});
}
/* document ready waits till the DOM is fully loaded to do anything */
$(document).ready(function() {
// When the user clicks button 1
$('#layout1').click(function() {
changeLayout(1);
});
// When the user clicks button 2
$('#layout2').click(function() {
changeLayout(2);
});
// When the user clicks button 3
$('#layout3').click(function() {
changeLayout(3);
});
});
提供されたコードをテストしていませんが、正しい方向に進むはずです。基本的に、最初にデータベース内の値をページにロードします。ユーザーは、ページ上のボタンをクリックしてレイアウトを変更します。UPDATEデータベースのデフォルト値に対してサーバーへの Ajax 呼び出しを行い、ページに表示される新しい HTML を返します。成功したら、ページの HTML を PHP から収集した新しい HTML に更新します。
頑張ってください！あなたの質問を誤解した場合はお知らせください。