How to Make a Drop Down Template Theme Selector with PHP
by Darren HedlundMicrocyb.com
Wednesday, 7th December 2005
This tutorial will help teach you how to make your site have the option to allow the users to choose the look and feel of the site using PHP, and MySQL wrapped around a HTML template.
To start off create a MySQL database called theme. To learn how to do this go to http://www.microcyb.com/?m=c&c=437 and then submit the following SQL into the database called theme.
CREATE TABLE template (
id int(5) NOT NULL auto_increment,
filename varchar(255) NOT NULL default '',
name varchar(100) NOT NULL default '',
PRIMARY KEY (id)
) TYPE=MyISAM;
INSERT INTO template VALUES (1, './template1.html', 'First Template');
INSERT INTO template VALUES (2, './template2.html', 'Second Template');
id int(5) NOT NULL auto_increment,
filename varchar(255) NOT NULL default '',
name varchar(100) NOT NULL default '',
PRIMARY KEY (id)
) TYPE=MyISAM;
INSERT INTO template VALUES (1, './template1.html', 'First Template');
INSERT INTO template VALUES (2, './template2.html', 'Second Template');
Now we are going to have multiple files, so create a new folder on your system. After you have created a new folder on your system, make a simple text document and rename it to settings.php
settings.php (copy and paste the following informtion into settings.php)
<?
# Root MySQL database
$base = "theme";
# MySQL user name
$user = "";
# MySQL password
$password = "";
# Host name (ex. localhost)
$host = "localhost";
$cms_template= "template";
# -----------------------------------------
# CHOOSE THE DEFAULT TEMPLATE IF NO COOKIE
# -----------------------------------------
$default_theme = "./template1.html";
?>
# Root MySQL database
$base = "theme";
# MySQL user name
$user = "";
# MySQL password
$password = "";
# Host name (ex. localhost)
$host = "localhost";
$cms_template= "template";
# -----------------------------------------
# CHOOSE THE DEFAULT TEMPLATE IF NO COOKIE
# -----------------------------------------
$default_theme = "./template1.html";
?>
Create a text document and rename the file to index.php
index.php (copy and paste the following informtion into index.php)
<?
/* ------------------------------------------------------------ */
/* Theme Selector® Copyright 2003-2004 Microcyb, Inc. */
/* Software by: Microcyb */
/* Website: http://www.microcyb.com */
/* ------------------------------------------------------------ */
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE SETTINGS AND START THE MYSQL CONNECTION
# ---------------------------------------------------------------
include_once ("./settings.php");
$link = mysql_connect($host,$user,$password);
mysql_select_db("$base");
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE TEMPLATE IF NONE IS SELECTED
# ---------------------------------------------------------------
if (!$filename)
{
$filename=''.$default_theme.''.$template.'';
}
if(!$fd = @fopen($filename, "r"))
{
session_start();
$filename="$default_theme";;
setCookie ("filename","", time()+30240000);
}
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE TEMPLATE IF NONE IS SELECTED
# ---------------------------------------------------------------
$theme .= '<form METHOD="POST" style="word-spacing: 0; margin: 0">
<select name="list" onChange="showpage(this.form);" class="input">
<option value="x">--------------</option>\n';
$result = mysql_query("SELECT * FROM $cms_template") or die ("Can't execute query.");
while(($row = mysql_fetch_object($result)))
{
$theme .= '<option value="'.$row->filename.'">'.$row->name.'</option>\n';
}
$theme .= '</select></form>
<script language="JavaScript">
function showpage(form)
{
document.cookie = "filename=\'\'";
var expireDate = new Date;
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "filename=" + document.all.list.value + "; expires=" + expireDate.toGMTString();
parent.document.location=parent.document.location;
};
</script>';
# ---------------------------------------------------------------
# SET THE VARIBLE $SITE_MAIN TO HAVE INFORMATION
# ---------------------------------------------------------------
$site_main ="<b>Hello</b>, Microcyb here!<br>This is an exmaple of changing the look of your site!";
# ---------------------------------------------------------------
# NOW WE WRAP THE DATA AROUND AN HTML TEMPLATE
# ---------------------------------------------------------------
$template = fread ($fd, filesize ($filename));
fclose ($fd);
$template = stripslashes($template);
$template = eregi_replace("{main}", "$site_main", $template);
$template = eregi_replace("{theme}", "$theme", $template);
echo "$template";
?>
/* ------------------------------------------------------------ */
/* Theme Selector® Copyright 2003-2004 Microcyb, Inc. */
/* Software by: Microcyb */
/* Website: http://www.microcyb.com */
/* ------------------------------------------------------------ */
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE SETTINGS AND START THE MYSQL CONNECTION
# ---------------------------------------------------------------
include_once ("./settings.php");
$link = mysql_connect($host,$user,$password);
mysql_select_db("$base");
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE TEMPLATE IF NONE IS SELECTED
# ---------------------------------------------------------------
if (!$filename)
{
$filename=''.$default_theme.''.$template.'';
}
if(!$fd = @fopen($filename, "r"))
{
session_start();
$filename="$default_theme";;
setCookie ("filename","", time()+30240000);
}
# ---------------------------------------------------------------
# START OF NEW CODE TO CALL THE TEMPLATE IF NONE IS SELECTED
# ---------------------------------------------------------------
$theme .= '<form METHOD="POST" style="word-spacing: 0; margin: 0">
<select name="list" onChange="showpage(this.form);" class="input">
<option value="x">--------------</option>\n';
$result = mysql_query("SELECT * FROM $cms_template") or die ("Can't execute query.");
while(($row = mysql_fetch_object($result)))
{
$theme .= '<option value="'.$row->filename.'">'.$row->name.'</option>\n';
}
$theme .= '</select></form>
<script language="JavaScript">
function showpage(form)
{
document.cookie = "filename=\'\'";
var expireDate = new Date;
expireDate.setMonth(expireDate.getMonth()+6);
document.cookie = "filename=" + document.all.list.value + "; expires=" + expireDate.toGMTString();
parent.document.location=parent.document.location;
};
</script>';
# ---------------------------------------------------------------
# SET THE VARIBLE $SITE_MAIN TO HAVE INFORMATION
# ---------------------------------------------------------------
$site_main ="<b>Hello</b>, Microcyb here!<br>This is an exmaple of changing the look of your site!";
# ---------------------------------------------------------------
# NOW WE WRAP THE DATA AROUND AN HTML TEMPLATE
# ---------------------------------------------------------------
$template = fread ($fd, filesize ($filename));
fclose ($fd);
$template = stripslashes($template);
$template = eregi_replace("{main}", "$site_main", $template);
$template = eregi_replace("{theme}", "$theme", $template);
echo "$template";
?>
Create a text document and rename the file to template1.html
template1.html (copy and paste the following informtion into template1.html)
<HTML><HEAD>
<TITLE>www.microcyb.com</TITLE>
</HEAD>
<style type=text/css>
SELECT { font-family: Verdana,Tahoma,Arial; font-size: 11px; border: 1 solid #AAAAAA; }
TABLE { font-family: Verdana,Tahoma,Arial; color: #004BAB; font-size:11px; background-color: #ffffff; border: 1 solid #004BAB; }
</style>
<BODY bgColor=#ffffff leftMargin=0 link=#333333 text=#000000 topMargin=0 vLink=#333333 marginheight="0" marginwidth="0">
<TABLE cellPadding=0 cellSpacing=0" width="20%">
<TR><TD vAlign="top" width="10%">
{main}
{theme}
</td></tr></table>
</BODY></HTML>
<TITLE>www.microcyb.com</TITLE>
</HEAD>
<style type=text/css>
SELECT { font-family: Verdana,Tahoma,Arial; font-size: 11px; border: 1 solid #AAAAAA; }
TABLE { font-family: Verdana,Tahoma,Arial; color: #004BAB; font-size:11px; background-color: #ffffff; border: 1 solid #004BAB; }
</style>
<BODY bgColor=#ffffff leftMargin=0 link=#333333 text=#000000 topMargin=0 vLink=#333333 marginheight="0" marginwidth="0">
<TABLE cellPadding=0 cellSpacing=0" width="20%">
<TR><TD vAlign="top" width="10%">
{main}
{theme}
</td></tr></table>
</BODY></HTML>
Create a text document and rename the file to template2.html
template2.html (copy and paste the following informtion into template2.html)
<HTML><HEAD>
<TITLE>www.microcyb.com</TITLE>
</HEAD>
<style type=text/css>
SELECT { font-family: Verdana,Tahoma,Arial; font-size: 11px; border: 1 solid #C0C0FF; background-color: #FFC0FF;}
TABLE { font-family: Verdana,Tahoma,Arial; color: #FA4C00; font-size:11px; background-color: #ffffff; border: 1 solid #FA4C00; }
</style>
<BODY bgColor=#C0C0FF leftMargin=0 link=#333333 text=#000000 topMargin=0 vLink=#333333 marginheight="0" marginwidth="0">
<TABLE cellPadding=0 cellSpacing=0" width="20%">
<TR><TD vAlign="top" width="10%">
{main}
{theme}
</td></tr></table>
</BODY></HTML>
<TITLE>www.microcyb.com</TITLE>
</HEAD>
<style type=text/css>
SELECT { font-family: Verdana,Tahoma,Arial; font-size: 11px; border: 1 solid #C0C0FF; background-color: #FFC0FF;}
TABLE { font-family: Verdana,Tahoma,Arial; color: #FA4C00; font-size:11px; background-color: #ffffff; border: 1 solid #FA4C00; }
</style>
<BODY bgColor=#C0C0FF leftMargin=0 link=#333333 text=#000000 topMargin=0 vLink=#333333 marginheight="0" marginwidth="0">
<TABLE cellPadding=0 cellSpacing=0" width="20%">
<TR><TD vAlign="top" width="10%">
{main}
{theme}
</td></tr></table>
</BODY></HTML>
Options:
Printer Friendly
About The Author:
Darren Hedlund is a freelance Web developer, writer, and data analyst. Darren has a degree in Computer Information Science and has spent the last 15 years developing application and environments from hand held, windows, web, virtual science, gaming, artificial intelligence and graphics design. Darren's coding knowledge ranges from C+, Visual Basic, .NET, PHP, JSP, REXX, KIXX, and many others. His graphical and environmental knowledge stems in Macromedia Flash, 3D studio Max, Curious Labs Poser, Adobe Photoshop, and many others. Darren works in many platforms ranging from database, visual design, and, system development.
Darren Hedlund is a freelance Web developer, writer, and data analyst. Darren has a degree in Computer Information Science and has spent the last 15 years developing application and environments from hand held, windows, web, virtual science, gaming, artificial intelligence and graphics design. Darren's coding knowledge ranges from C+, Visual Basic, .NET, PHP, JSP, REXX, KIXX, and many others. His graphical and environmental knowledge stems in Macromedia Flash, 3D studio Max, Curious Labs Poser, Adobe Photoshop, and many others. Darren works in many platforms ranging from database, visual design, and, system development.
