What we are about to build now is the landing page of the CMS. Since we're going to use Ajax to update page content, this is the page that will always be visible in your browsers location-bar.
In index.php all the necessary files will be loaded. All important DIVs will also be set.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>AtsumeruGamer / CMS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<style type="text/css">
@import "css/cms.css";
</style> </head>
<body>
<div id="area_site">
<div id="area_admn">
<div id="area_menu">
<h1>ADMINISTRATION CONSOLE (PROTOTYPE)</h1>
<h2>Select administration area:</h2>
<a class="menu" style="margin-left : 5px;" href="javascript:updatePage('menu','1','&page=memb');">Members</a>
<a class="menu" href="javascript:updatePage('menu','1','&page=regi');">Regions</a>
<a class="menu" href="javascript:updatePage('menu','1','&page=comp');">Companies</a>
<a class="menu" href="javascript:updatePage('menu','1','&page=cons');">Consoles</a>
<div id="flap_num1"></div>
<div id="flap_num2"></div>
<div id="flap_num3"></div>
<div id="flap_num4"></div> </div>
</div>
<div id="area_list">
<div id="flap_num0"></div> </div>
</div>
</body>
</html>
Now what happens here. Basically this is an ordinary HTML-page (grey background color). You should be able to understand what's going on. A few notes about the colored areas though:
blueThis area refers to files we have yet to create. Just put them in the code for now and we'll get on with them soon enough.
greenThis is the menu links. As it is now they are broken. The updatePage-function that is called there will be found in the javascript-file ajax.js. Since this function doesn't exist yet a javascript error will be produced if you click any of these links. You may remove the links and add them as we create the target files if you'd like. The blue-colored text marks passed-in values for the function. More on this on the next page.
redThese DIVs are crucial for the Ajax-ish part of our script to work properly. I recommend that you do not remove or delete them. You may rearrange them as you see fit in order to create you own design, but their id:s must be kept intact.
Since this tutorial is nothing about CSS you may create your own CSS-template. However, you may also download the CSS-file I'm using in the prototype:
Download the css-file here Right-click and choose save target as. Don't forget to put it in the right folder.
Next Up: Creating AJAX-functionality