That is a good point Nick. I will try out Drupal as soon as my server comes online to see how it works and can be used.
About my attempt... the code for the web ring is completely separate from the rest of Coders Turf, and just includes a couple of framework PHP files.
The Code:
I've documented the code, its still a bit messy and
incomplete but you can take a look anyway.
All database names, table names and PHP file names have been changed. Please copy and paste into an editor that can highlight PHP files to make it clearer, sorry about the long line, its neater that way.
<?php
//==================================================
// Very important code to include all the files which have critical functions for this page to work correctly.
// Also connects to the database, grabs the global CT variable ($CTSettings), sets the website name, saves the collapsed state of the CT bar,
// and logs the current user as online or guest in the SMF software.
//==================================================
// INCLUDE THE BACKBONE SCRIPTS
require("-DATABASE FUNCTIONS-");
require("-GENERAL FUNCTIONS-");
require("-EXTERNAL CT BAR-");
require("-COMMENT SYSTEM-");
// CONNECT TO THE DATABASE
connect_to_database("-DB NAME-");
// INCLUDE THE IMPORTANT SCRIPTS
require("-SIMPLE MACHINES MODIFIED API FUNCTIONS-");
// SETUP THE GLOBAL SETTINGS VARIABLE
setup_global_settings_variable();
// SETTINGS
$site_name = 'WebRing';
global $site_name;
// AJAX ACTIONS
switch($ajax)
{
case "setCTBarCollapse": set_external_CT_bar_collapse_setting($site_name, $collapse); die(); break;
}
// LOG USER ONLINE
ssi_logOnline(1);
?>
<html>
<head>
<title>Game Dev Web Ring</title>
<link href="wrstyles.css" rel="stylesheet" type="text/css" />
<LINK REL="SHORTCUT ICON" HREF="images/web-icon.gif">
<meta name="COPYRIGHT" content="Copyright (c) Joshua Cole">
</head>
<body>
<? echo(external_website_ct_bar($site_name)); ?>
<div align="center">
<div class="mainBlock">
<div class="headerTop">Game Dev Web Ring</div>
<div class="headerBottom">
<a href="index.php">Home</a>
<a href="index.php?view=submitlink">Submit Link</a>
<a href="index.php?view=mylinks">My Links</a>
</div>
<div class="MainContent">
<?php
//==================================================
// Displays the home page and web ring, default view is to show 'featured links' as no category ID has been set for the WR_GENERATE_LINKS_LIST() function.
//==================================================
if($view=="")
{
echo('
<h1>Welcome</h1>
<p>Welcome to the Independent Game Developers Web Ring. Here we have links to many useful game development web sites, if you would like to add your own websites please click <a href="index.php?view=submitlink">submit link</a>.</p>
<br>
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td width="150" valign="top">
<div class="CategoryTitle">Categories</div>
<p style="font-weight: bold;"><img src="images/web-icon.gif"> <a href="index.php?view=cat">Featured Links</a></p>
'.WR_generate_categories_list().'
</td>
<td valign="top">
'.WR_generate_links_list().'
</td>
</tr>
</table>
');
}
//==================================================
// Displays the home page and web ring, shows whichever category has been selected by the user, as the category ID has been used with both functions below.
//==================================================
if($view=="cat")
{
echo('
<h1>Welcome</h1>
<p>Welcome to the Independent Game Developers Web Ring. Here we have links to many useful game development web sites, if you would like to add your own websites please click <a href="index.php?view=submitlink">submit link</a>.</p>
<br>
<table border="0" width="100%" style="border-collapse: collapse">
<tr>
<td width="150" valign="top">
<div class="CategoryTitle">Categories</div>
<p style="font-weight: bold;"><img src="images/web-icon.gif"> <a href="index.php?view=cat">Featured Links</a></p>
'.WR_generate_categories_list($cat_ID).'
</td>
<td valign="top">
'.WR_generate_links_list($cat_ID).'
</td>
</tr>
</table>
');
}
//==================================================
// Displays the submit a link form.
//==================================================
if($view=="submitlink")
{
if(is_user_logged_in()==0) { WR_display_login_form(); }
else
{
echo('
<h1>Submit A Link</h1>
<p>Fill in all the details below to submit your link to us. Each link is reviewed before it is added to the web ring so please allow for a couple of days before your link appears.</p>
<div class="ContentPadding">
<br>
<form method="POST" action="index.php?view=sumbitlink2" name="submit_link_form">
<table class="text" border="0" width="100%" style="border-collapse: collapse">
<tr>
<td width="126"><b><br>Link Title:</b></td>
<td><br><input type="text" name="title" size="20"></td>
</tr>
<tr>
<td width="126"><b><br>Link URL:</b></td>
<td><br>http://<input type="text" name="url" size="30"></td>
</tr>
<tr>
<td width="126" valign="top"><b><br>Short Description:</b></td>
<td><br><textarea rows="4" name="short_description" cols="25"></textarea></td>
</tr>
<tr>
<td width="126"><br><b>Main Category:</b></td>
<td><br><select size="1" name="cat_ID"><option>- Choose Main Category -</option>'.populate_web_ring_categories_list(0).'</select> <input type="checkbox" name="hide_in_other_categories"> Only display the link in the main category. (?)</td>
</tr>
<tr>
<td width="126" valign="top"><br><b>Other Categories:</b></td>
<td><br>'.populate_web_ring_categories_list(0, 1).'</td>
</tr>
<tr>
<td width="126" valign="top"><br><b>Preview Image:</b></td>
<td>
<br>
<input type="radio" id="preview_type_auto" value="0" name="preview_type" checked> <span onclick="document.getElementById('preview_type_auto').checked = true;">Use the automatic preview image</span> [<a href="Javascript:void(0);" onclick="if(document.submit_link_form.url.value!='') { expandIt_specific('auto_preview_image', 'open'); document.submit_link_form.auto_preview_image.src = 'http://t.googlepreview.com/preview?s='+document.submit_link_form.url.value; } else { alert('Please enter a URL so you can show the automatic preview image.'); document.submit_link_form.auto_preview_image.src = 'http://t.googlepreview.com/preview'; }">Show</a>]
<p><img id="auto_preview_image" name="auto_preview_image" border="0" src="http://t.googlepreview.com/preview" width="112" style="display: none; padding-left: 25px;"></p>
<p><input type="radio" id="preview_type_user" value="1" name="preview_type"><span onclick="document.getElementById('preview_type_user').checked = true;">Use my own preview image</span> [Choose It]</p>
<p><input type="text" name="user_preview_selected" size="20" style="display: none; padding-left: 25px;"></p>
</td>
</tr>
</table>
<p><a href="index.php" onclick="Javascript:history.go(-1); return false;">Cancel</a> | <input type="submit" value="Submit This Link!" name="submit_button"></p>
</form>
</div>
');
}
}
//==================================================
// Handles the submission of links to the database, sends a notification email to the MOD team address, etc.
//==================================================
if($view=="submitlink2")
{
if(is_user_logged_in()==0) { WR_display_login_form(); }
else
{
//...
}
}
//==================================================
// Displays a list of links which the currently logged in user has submitted, and whether they have been accepted by the MOD team, etc.
//==================================================
if($view=="mylinks")
{
if(is_user_logged_in()==0) { WR_display_login_form(); }
else
{
echo('
<h1>My Links</h1>
<p>Coming Soon!</p>
');
}
}
?>
</div>
<br>
</div>
</div>
</body>
</html>
<?php
//==================================================
// Displays a standard CT login form customised to fit with the theme of this website.
// NB: This function needs to be used outside of all ECHO() statements as it is self sufficient.
//==================================================
function WR_display_login_form()
{
echo('
<div align="center" style="margin-top: 10px;">
<table class="text" border="0" width="60%" style="border-collapse: collapse" cellpadding="0">
<tr>
<td width="20" height="20" background="http://www.codersturf.com/images/site/layout/bubble-top-left.png"></td>
<td background="http://www.codersturf.com/images/site/layout/bubble-top.png" height="20"></td>
<td width="20" height="20" background="http://www.codersturf.com/images/site/layout/bubble-top-right.png"></td>
</tr>
<tr>
<td background="http://www.codersturf.com/images/site/layout/bubble-left.png"></td>
<td bgcolor="#FFFFCC">
<h1>Please Login!</h1>
<div align="center">
<form action="http://www.codersturf.com/forum/index.php?action=login2" method="post" accept-charset="ISO-8859-1" name="frmLogin" id="frmLogin" onsubmit="hashLoginPassword(this, '9dd6a8d0d2a693ce6ae12f0dbc7a9884');">
<table class="text" cellspacing="0" cellpadding="4" border="0" width="90%">
<tr>
<td align="right" width="50%"><b>Username:</b></td>
<td><input name="user" size="20" value="" type="text"></td>
</tr>
<tr>
<td align="right"><b>Password:</b></td>
<td><input name="passwrd" value="" size="20" type="password"></td>
</tr>
<tr>
<td align="right"><b>Minutes to stay logged in:</b></td>
<td><input name="cookielength" size="4" maxlength="4" value="300" type="text"></td>
</tr>
<tr>
<td align="right"><b>Always stay logged in:</b></td>
<td><input name="cookieneverexp" class="check" onclick="this.form.cookielength.disabled = this.checked;" type="checkbox"></td>
</tr>
<tr>
<td colspan="2" align="center"><input value="Login" style="margin-top: 2ex;" type="submit"></td>
</tr>
</table>
<p><small><a href="http://www.codersturf.com/forum/index.php?action=reminder">Forgot your password?</a> - <a href="http://www.codersturf.com/forum/index.php?action=register">Need to register?</a></small></p>
</form>
</div>
</td>
<td background="http://www.codersturf.com/images/site/layout/bubble-right.png"></td>
</tr>
<tr>
<td height="20" background="http://www.codersturf.com/images/site/layout/bubble-bottom-left.png"></td>
<td height="20" background="http://www.codersturf.com/images/site/layout/bubble-bottom.png"></td>
<td height="20" background="http://www.codersturf.com/images/site/layout/bubble-bottom-right.png"></td>
</tr>
</table>
</div>
');
}
//==================================================
// Generates a list of the categories.
// NB: This function needs to be used inline with an ECHO() statement as it returns a string.
//==================================================
function WR_generate_categories_list($cur_cat_ID = 0)
{
// Get the list of link categories
$result_cats = run_query("SELECT * FROM --webring_categories_list-- ORDER BY name", "Get the link categories from the database.");
$num_cats = mysql_num_rows($result_cats);
// Cycle through cats
for($i=1 ; $i<=$num_cats ; $i++)
{
$catsList = mysql_fetch_array($result_cats);
$cat_ID = $catsList['cat_ID'];
if($cat_ID==$cur_cat_ID) { $bold_it = ' style="font-weight: bold;"'; } else { $bold_it = ''; }
// Cat name
$output = $output . "<p".$bold_it."><img src="images/web-icon.gif"> <a href="index.php?view=cat&cat_ID=".$catsList['cat_ID']."">".$catsList['name']."</a></p>n";
}
// Return output!
return $output;
}
//==================================================
// Generates a list of links by category and ordered by name. If no category is selected 'featured links' are displayed instead.
// NB: This function needs to be used inline with an ECHO() statement as it returns a string.
//==================================================
function WR_generate_links_list($cur_cat_ID = 0)
{
// Get the category data
$result_cat = run_query("SELECT * FROM --webring_categories_list-- WHERE cat_ID='$cur_cat_ID'", "Get the selected category from the database.");
$catData = mysql_fetch_array($result_cat);
// If the cat doesnt exist
if($cur_cat_ID==0 || mysql_num_rows($result_cat)==0)
{
// Featured articles!
$output = $output . '<div class="CategoryTitle">Featured Links</div>'."n";
$output = $output . '<div class="LinkDetails"><p align="center">'.parse_bbc('[b]Featured Links[/b] coming soon! ;D', true, 'no_links_yet').'</p></div>'."n";
return $output;
}
// Cat name
$output = $output . '<div class="CategoryTitle">Links In: <i>'.$catData['name'].'</i></div>'."n";
// Get the links for the cat
$result_links = run_query("SELECT * FROM --webring_links_list-- WHERE cat_ID='$cur_cat_ID' AND is_active='1' ORDER BY title", "Get the links from the database.");
$num_links = mysql_num_rows($result_links);
// Cycle through links
for($l=1 ; $l<=$num_links ; $l++)
{
$linksList = mysql_fetch_array($result_links);
// Preview image
if($linksList['preview_file_ID']!=0)
{
// Setup image
$file_ID = $linksList['preview_file_ID'];
$result_preview = run_query("SELECT * FROM --user_file_uploads_list-- WHERE file_ID='$file_ID'", "Get the file.");
$fileData = mysql_fetch_array($result_preview);
$preview_image = '-USER UPLOADS DIRECTORY-'.$fileData['local_filename'];
// Update item stats
update_item_statistics('--user_file_uploads_list--', 'file_ID', $file_ID, 'num_downloads', '', '', 1, 1, 1);
}
else { $preview_image = 'http://t.googlepreview.com/preview?s='.$linksList['url']; }
$output = $output . '
<div class="LinkDetails">
<table class="text" border="0" width="100%" style="border-collapse: collapse">
<tr>
<td width="115" valign="top" align="right">
<img src="'.$preview_image.'" id="link_'.$linksList['link_ID'].'" onload="resizeImage('link_'.$linksList['link_ID'].'', 112, 112);" style="margin-right: 5px; border: 1px solid #CCCCCC;">
</td>
<td valign="top">
<b><a href="http://'.$linksList['url'].'" onclick="window.location='redirect.php?sid='.$linksList['link_ID'].'';">'.$linksList['title'].'</a></b> <small><i>- '.$linksList['url'].' - ('.$linksList['num_clicks'].' clicks)</i></small><br>
<div class="LinkDetailsDescription">'.parse_bbc($linksList['short_description'], true, 'link_'.$linksList['link_ID']).'</div>
</td>
</tr>
</table>
</div>
'."n";
}
// No links in this cat?
if($num_links==0) { $output = $output . '<div class="LinkDetails"><p align="center">'.parse_bbc('Sorry no links in this category yet... :(', true, 'no_links_yet').'</p></div>'."n"; }
// Return output!
return $output;
}
//==================================================
// Creates the list of categories either in drop down menu form or as a list of checkboxes.
// NB: This function is present in the -GENERAL FUNCTIONS- include, and is not normally in this file.
//==================================================
function populate_web_ring_categories_list($cat_ID, $as_checkboxes = 0)
{
// Get the tutorial subjects filters from the database
$result = run_query("SELECT * FROM --webring_categories_list-- ORDER BY name", "Get the web ring categories from the database.");
$num_rows = mysql_num_rows($result);
for($i=1 ; $i<=$num_rows ; $i++)
{
$catsList = mysql_fetch_array($result);
if($catsList['cat_ID']==$cat_ID) { $select_it = 'selected'; } else { $select_it = ''; }
if($as_checkboxes==0) { $next_option = '<option value="'.$catsList['cat_ID'].'" '.$select_it.'>'.$catsList['name'].'</option>'; }
else { $next_option = '<input type="checkbox" name="cat_'.$catsList['cat_ID'].'" '.$select_it.'> '.$catsList['name'].'<br>'; }
$list = $list . $next_option;
}
return $list;
}
?>
Anyway thats what I have so far. As you can see its almost completely self contained. The framework can be removed very easily so this code could be used on any website with PHP and MySQL setup correctly.
And the CSS file:
body {
margin: 0px;
}
.outsideBlock {
text-align: center;
}
.mainBlock {
margin: 15px;
width: 700px;
padding: 10px;
text-align: left;
border: 1px solid #CCCCCC;
}
.headerTop {
height: 50px;
padding-top: 15px;
padding-left: 15px;
background-color: #0066c8;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
}
.headerBottom {
height: 50px;
padding-top: 12px;
padding-left: 15px;
background-image: url(images/header_bottom.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.headerBottom a {
color: #FFFFFF;
}
.headerBottom a:hover {
color: #FFFF99;
}
.MainContent {
padding-left: 15px;
padding-right: 15px;
}
.ContentPadding {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
color: #0066FF;
}
p, .text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: #333333;
}
ul.Link_ul
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
}
li.Link_li
{
}
.warningBarFadedBorderless
{
background-color: #FFCCCC;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-width: 0;
}
.greenBar
{
background-color: #CCFF99;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-color: #33CC33;
}
.infoBarFaded
{
background-color: #FFFFCC;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-color: #FFCC66;
}
tr.rowA, td.cellA
{
background-color: #ffffff;
}
tr.rowB, td.cellB
{
background-color: #F0F0F0;
}
.CategoryTitle {
background-image: url('images/table_header.jpg');
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #FFFFFF;
font-weight: bold;
height: 22px;
padding-top: 2px;
padding-left: 10px;
}
.LinkDetails {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
margin: 10px;
padding: 10px;
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
}
.LinkDetailsDescription {
padding-top: 5px;
}
And yes I am aware that this CSS code has not been "fixed" to work in IE 6+ yet.
