PreviousNext
Pie2k Source Code show/hide

I know there are a lot of people out there who want to make web comics but have no idea how. There's all sorts of ways to do it, from the ridiculously over-robust (which employs one bad-assed server and a MySQL database), and the very low-tech (which is just a collection of time-coded html pages).

My solution is kinda middle-of-the road. I use scripting to generate the pages, but I don't have access to a database. Nevertheless, I'm offering up my source code, and they're not. :P

It should be stated though that I'm not putting this up for extreme novices. If you don't understand that a website is a collection of files and folders, I can't really help you. Wherever you host your site, you must have access to a PHP interpreter. If you don't know if that's available, then contact your host/hosting company and find out.

The Initial Setup

When you set up your site, you'll have a root folder. Within the root folder, you'll make 2 folders, one named "comics" and the other named "thumbnails." You'll put your comics and rants in the "comics" folder and your thumbnails in the "thumbnails" folder.

In the comics folder, make a text file named "comics_db.txt" which will be your pseudo database. Each line will have the date, the title, and the code for a strip, separated by colons, with the newest comic on top. Whenever you need to add a comic, you open this text file, and add a line on top. (Click here for an example of this file.)

Now, pay attention to the file names. If the source code says your site name is "mysite_" and the code of a comic is "0001", then your filenames must be:

  • Rant: /comics/mysite_0001.txt
  • Comic: /comics/mysite_0001.jpg
  • Thumbnail: /thumbnails/mysite_0001.jpg

Each comic must have a different code, of course.

How it All Works

When a user opens the site, the script checks the URL for a comic ID number. If there's no ID number, it chooses the most recent comic. It then saves some information about the comic itself in some global variables for you to reference later.

By referencing those variables, you can build the URL's needed to access a comic, a rant, or a thumbnail. Say you wanted to write the path of the comic strip. You'd write:

<?php echo "/comics/".$site_name.$comic_image.".jpg";?>

Simple, huh?

Now, whenever you create a new comic, you:

  • 1: Assign a code (you can start at 0001 and go up to 9999 if you want). For this example, I'll use 0001.
  • 2: Save the image as "comics/sitename_0001.jpg" where "sitename" is what ever site name you specify in your PHP code.
  • 5: Resize the image down to thumbnail size, and save it as "thumbnails/sitename_0001.jpg"
  • 4: Write a rant, and save it as "comics/sitename_0001.txt".
  • 5: open "comics/comics_db.txt" and add a line to the top of the file. The date is in YYYY-MM-DD format.
  • 6: Upload all 4 files to your hosting service.
  • 7: Open up your homepage and check for errors and typos.

The Source Code

Below, I've listed the relevant source code. Stick to the directions and you'll be okay. Technically, the only required code is the the first group here. After that is just a bunch of examples of how to put some of the important site objects on your page (like the comic, the rant, and the navigation selection box). Follow the examples to get up and running as quickly as possible.

The following code must appear at the top of each page. Your best bet is to make an include file.

<?php
$site_name = "pie2k_";
$fileloc = "comics/comics_db.txt";
?>
<script language="JavaScript">
/////////////////////////////////////////////
// Javascript page relocator
// <!--
function gotoSite(obj){	
	var s;          	
	s=obj.options[obj.selectedIndex].value
        document.location=s;
}
// -->
</script>

<?php
/////////////////////////////////////////////
// Open the database, split into array
$whattoread = fopen($fileloc, "r");
 $readfile = fread($whattoread, filesize($fileloc));
fclose($whattoread);
$readfile = str_replace("\n", "", $readfile);
$comic_array = split(":", $readfile);
/////////////////////////////////////////////
// Get the current comic
$comic = "";
extract($_REQUEST);
$sel_comic = $comic;
if ($sel_comic != ""){
	$comic_image = $sel_comic;
}
if ($sel_comic == ""){
	$comic_image = $comic_array[2];
}

/////////////////////////////////////////////
// get the next and previous comic listing
$next_comic = 1;
$prev_comic = 1;
for ($x = 2; $x < count($comic_array)-1; $x+=3) {
 if ($comic_image == $comic_array[$x]) {
  $comic_date  = $comic_array[$x-2];
  $comic_title = $comic_array[$x-1];

  if ($x > 3){
   $next_comic = $comic_array[$x-3];
  } else {
   $next_comic = $comic_image;
  }

  if ($x < count($comic_array)-2 ) {
   $prev_comic = $comic_array[$x+3]; 
  } else {
   $prev_comic = $comic_image;
  }

 }
}
?>

<?php
////////////////////////////////////////////
// Insert Rant
function insert_rant($site_name, $comic_image)
{
	$fileloc = "comics/$site_name$comic_image.txt";
	$whattoread = fopen($fileloc, "r");
	$readfile = fread($whattoread, filesize($fileloc));
	fclose($whattoread);
	$newreadfile = eregi_replace("<tab>", "     ", $readfile);
	echo $newreadfile;
}
?>

<?php
////////////////////////////////////////////
// Insert Select menu
function insert_select($comic_array)
{
	echo "<form method=GET> <select name='SiteSelector'";
	echo " size='1' language='JavaScript' onchange='gotoSite(this)'> ";
	echo "<option VALUE='comics.pl' selected>< Pie2k Archives ></option>";
	$y = 0;
	for ($x = 0; $x < count($comic_array)-1; $x+=3) {
	
	    echo "<option VALUE='index.php?comic=";
	    echo $comic_array[$x+2];
	    echo "'>"; 
	    echo $comic_array[$x];
	    echo " - ";
	    echo $comic_array[$x+1];
	    echo "</option>";
	    echo "\n";
	}
		
	echo " </select> </form> ";
} 
?>

How to access this data:

<?php echo $comic_date;?>
<?php echo $comic_title;?>
<?php echo $comic_image;?>

How to insert a rant:

<?php insert_rant($site_name, $comic_image);?>

How to insert a comic:

<img src="<?php echo "comics/$site_name$comic_image.jpg";?>">

How to make the select menu:

<a href="index.php?comic=<?php echo $prev_comic;?>"><- previous</a> - 
<a href="index.php?comic=<?php echo $next_comic;?>">next -></a><br>
<?php insert_select($comic_array);?>

How to show the 6 most recently made comics:
(3 rows, 2 columns = 6 comics)

<?php
$y=0;
for ($x=0;$x<3;$x++) {
	echo "                    <tr>\n";
	for ($i=0;$i<2;$i++) {
		echo "                      <td width='50%'>";
		echo "<a href=\"index.php?comic=";
		echo $comic_array[$y+2];
		echo "\">";
		echo "<img border=0 src=\"thumbnails/";
		echo $site_name;
		echo $comic_array[$y+2];
		echo ".jpg\" align=left>";
		echo $comic_array[$y+1];
		echo "<br>";
		echo $comic_array[$y];
		echo "</a>\n";
		echo "                      </td>\n";
		$y += 3;
	}
	echo "                    </tr>\n";
}
?>

Showing the currently selected comic:

<a href="index.php?comic=<?php echo $comic_image;?>"><img src="thumbnails/<?php echo $site_name;
?><?php echo $comic_image;?>.jpg" border=0 align=left></a>
<a href="index.php?comic=<?php echo $comic_image;?>"><?php echo $comic_title;?><br>
<?php echo $comic_date;?></a>

How to link to another page in the site:
(You must link this way so that the "Currently Viewing" script works.)

<a href="pagename.php?comic=<?php echo $comic_image;?>">Go to Pagename!</a>

The End

Well, that's pretty much it. You'll have to supply all the pretty site graphics to make it look like a presentable site, but this code should have you up-and-running with a dynamic webcomic site in an afternoon or so. If you have problems with the code, hit up the contact form on the page.


Currently Viewing show/hide

Recent Comics show/hide
 
Menu show/hide

Store show/hide
New Bumper Stickers in the Pie2k Store!  BUY STUFF NOW!

Links show/hide
Squawk Block