Completing a User-Defined CSS Website with PHP (
Page 1 of 4 )
In the first part, you learned about CSS and some basic tips/techniques for using the slider to display colors. In this part, we will discuss how we are going to write our AJAX and PHP scripts to make our user-defined CSS website.If you'd like to see where we're headed before we get there, you can check out the complete demo.
You can use this CSS/AJAX technique to let users customize your website's font colors and backgrounds to maximize their user experience. It was said in the first part that if users have the freedom to select the best color combination for your web page, this will make your content more readable.
Formulating an AJAX Request
AJAX is a web development technique based on JavaScript where it is possible to submit a form to a server without reloading the page. Here we can use AJAX to submit color revision requests to the server without a page refresh or reload. This is purposely done to maximize the user experience and let the visitors stay on that page without getting annoyed by a page reload. In other words, AJAX (in relation to this application) is simply "submitting a form to PHP without getting a page reload or change in the URL." This will preserve the existing visitor experience.
If you read the first part, the main script -- customcss1.php -- contains the AJAX request. In the form part, we use the JavaScript onClick event to grab the color code request from the visitor. This onClick event is tied to a function called grabcolor(). The script for the form plus this function is shown below:
<form action="/cssajax/css.php" method="POST" name="slider" onsubmit="return false;">
<input type="hidden" name="backgroundcolor" value="" ID="backgroundcolor">
<input type="hidden" name="fontcolor" value="" ID="fontcolor">
<input type="submit" value="Customize webpage color" class="btn" onClick="grabcolor()" onmouseover="hov(this, 'btn btnhov')" onmouseout="hov(this, 'btn')" ID="Button1" NAME="Button1"/>
</form>
<a rel="nofollow" href="/cssajax/customcss1.php">Reset to default</a>
<script type="text/javascript">
function grabcolor()
{
document.slider.backgroundcolor.value = document.getElementById('colorCode2').innerHTML;
document.slider.fontcolor.value = document.getElementById('colorCode3').innerHTML;
}
</script>
The grab color function will extract two colors, the font color and the background color input from the user, when the user clicks the "Customize webpage color" submit button.
However, we also need to tie an AJAX function to the above form in addition to the color-grabbing JavaScript function. The AJAX function is shown below:
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("/cssajax/css.php",
{
method: 'post',
postBody: 'backgroundcolor='+$F('backgroundcolor')+'&fontcolor='+$F('fontcolor'),
onComplete: showResponse
});
}
function showResponse(req){
$('show').innerHTML= req.responseText;
}
</script>
The function is called sendRequest(). If we tie this function to the form, it will create a new AJAX request pointing to the /cssajax/css.php path, which is a PHP script. The method of form submission is POST.
As you can see from the script above, the POST will submit two colors to the PHP script, namely the background color and the font color. The "onComplete" function means that after processing, AJAX will run the function called "showResponse."
Basically, the showResponse function will output HTML from the PHP script (css.php) to the "show" id. This ID can be seen in the source code of customcss1.php, along with the other components (it is bolded in red in the screen shot below):
The above div "show" ID can be found within the <head> tag, because this is where CSS/styles should be found, not in the <body>tag section.
Once the outputted HTML style is rendered on the page, it will be placed within the <div ID="show"> tag. An example is shown below:
<div ID="show">
<style type="text/css">
body{ color:#CFFFFF;background:#6F3500;}
</style>
</div>
/ 4 
