1. OCAU Merchandise now available! Check out our 20th Anniversary Mugs, Classic Logo Shirts and much more! Discussion here.
    Dismiss Notice

dynamic calendar for webcomic

Discussion in 'Programming & Software Development' started by Phalanx, Sep 22, 2007.

  1. Phalanx

    Phalanx Member

    Joined:
    Dec 23, 2001
    Messages:
    6,413
    Location:
    3032
    Hi folks

    Basically I'm trying to build a website for a webcomic, but am a bit stuck on how to make the archive page. Basically I want to automatically generate it based upon the file names (which will all just be named 31122007.jpg, to keep it simple) into a little table format (like the dilbert.com archive, except have every month, from the start of the comic, rather than just the current and only create a link for the days there are comics).

    Would this be simple to do with PHP or something similar if on the server there is a single folder that only contains the comic images with that name format? Or am I wasting my time and should just stick with updating it when the comic is updated?
     
  2. prezident doom

    prezident doom Member

    Joined:
    Nov 24, 2004
    Messages:
    5,281
    Location:
    Brisbane
    this should be a piece of cake in any web language. you would just do a directory listing and display any file names that matched the date range.

    e.g. using the format 31122007.jpg

    if you wanted to show all comics for december 2007 get every file that ends with 122007.jpg
     
  3. Buzzard

    Buzzard Member

    Joined:
    Apr 10, 2002
    Messages:
    758
    Location:
    Dandenong
    Yep, should be simple to do with any server side language.

    Something like this only took a little over an hour to create (I know you didn't ask for any code, and perhaps didn't even want any... But it's rare that I feel like programming at all these days, so make the best of it :)):

    [​IMG]
    Click to view full-sized image!
    Hosted by UGBox Image Store

    PHP:
    <?php

    /*

        Note: Code was quickly hacked up, there are spelling mistakes, logic errors
        and performance issues.  Be careful :-)
        
        - Matt_D  <buzzard@project-2501.net>

    */

    ?>
    <html>
        <head>
            <title>Comic Archive Test</title>
            <style>
                .calendarTable
                {
                    border-collapse: collapse;
                    border: 1px solid gray;
                    margin: 2em;
                    float: left;
                    
                    /* To help the floats, float correctly :-/ */
                    height: 240px;
                }
                
                .calendarTable .spacer
                {
                    background-color: lightgray;
                }

                .calendarTable .hit
                {
                    background-color: #efdfdf;
                }
                
                .calendarTable .hit a
                {
                    text-decoration: none;
                    font-weight: bold;
                }
                
                h2
                {
                    text-align: center;
                }
            </style>
        </head>
        
        <body>
            <h1>Comic Archive Test</h1>
        
    <?php 

        error_reporting
    (E_ALL E_STRICT);

        
    date_default_timezone_set("Australia/Melbourne");

        
    //    We find all the images matching a filemask, and turn them in a array
        //    of image deatils (i.e. extract the day/month/year)
        
    $imageList getImageListDetails(glob("./images/*.*"));

        
        if(
    count($imageList) == 0)
        {
            die(
    "No images found");
        }


        
    //    Display an entire years calender if there was one image made
        
    foreach(getYearsWithComics($imageList) as $year)
        {
            echo 
    "<h2>Comics for $year</h2>";
            
    printCalenderForYear($year$imageList);
            echo 
    "<div style='clear: both'></div>";
        }


        
    //    Takes a list of filenames, and uses getDateFromImage() to get the 
        //    year/month/day for each one.  Returns the a new list.
        
    function getImageListDetails($filenameList)
        {
            
    $newDetails = array();
            
            foreach(
    $filenameList as $imageName)
            {
                try
                {
                    
    $newDetails[] = getDateFromImage($imageName);
                }
                catch(
    Exception $e)
                {
                    echo 
    "\n<!-- Ignoring $imageName  -  " $e->getMessage() . " -->\n";
                }
            }
            
            return 
    $newDetails;
        }

        
        
    //    Loop through every image and return an array of years where atleast one
        //    image is present
        
    function getYearsWithComics($imageList)
        {
            
    $yearList = array();
            
            foreach(
    $imageList as $imageDetails)
            {
                
    $yearList[] = $imageDetails['year'];
            }
            
            return 
    array_unique($yearList);
        }
        
        
        
    //    Extract the ymd from a single image filename, returning an array with
        //    the keys: year, month, day, filename
        //    Throws an exception is the filename doesn't match the regex.
        
    function getDateFromImage($imageName)
        {
            if(
    preg_match("#img_(\d\d\d\d)(\d\d)(\d\d)\.#"$imageName$matches) !== 1)
            {
                throw new 
    Exception("$imageName doesn't not match expected format img_yyymmddd.");
            }
            
            return array(
    'filename' => $imageName'year' => $matches[1], 'month' => $matches[2], 'day' => $matches[3]);
        }
        

        
    //    Given a year, and a list of image details.  Display some nice calender
        //    tables.
        
    function printCalenderForYear($year$imageList)
        {
            
    $skipLookup = array
            (
                
    "Sun" => 0,
                
    "Mon" => 1,
                
    "Tue" => 2,
                
    "Wed" => 3,
                
    "Thu" => 4,
                
    "Fri" => 5,
                
    "Sat" => 6,
            );
            
            for(
    $month 1$month <= 12$month++)
            {
                
    $firstDay        mktime(000$month1$year);
                
                
    $monthName        date('F'$firstDay);
                
                
    $firstDayName    date('D'$firstDay);
                
                
    $amountToSkip    $skipLookup[$firstDayName];
                
                
    $daysInMonth    cal_days_in_month(0$month$year);
                
                echo 
    "<table class='calendarTable' border='1' cellpadding='4' cellspacing='0'>";
                echo 
    "<tr><th colspan='7'>$monthName $year</th></tr>";
                echo 
    "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>";
                echo 
    "<tr>";
                
                
    $dayOfWeek 1;
                
                for(
    $i 0$i $amountToSkip$i++)
                {
                    echo 
    "<td class='spacer'>&nbsp;</td>";    
                }
                
                
    $dayOfWeek += $amountToSkip;
                
                

                
    $currentDay 1;
                
                while(
    $currentDay <= $daysInMonth)
                {
                    
                    
    //    Check to see if there if there was an image made of this date
                    
    $foundMatch false;
                    foreach(
    $imageList as $imageDetails)
                    {
                        if((
    $imageDetails['year'] == $year) && ($imageDetails['month'] == $month) && ($imageDetails['day'] == $currentDay))
                        {
                            
    $foundMatch true;
                            
                            echo 
    "<td class='hit'><a href='{$imageDetails['filename']}'>$currentDay</a></td>";
                        }
                    }
                    
                    
                    
    //    If no image was found, then just display the day
                    
    if(!$foundMatch)
                    {
                        echo 
    "<td>$currentDay</td>";
                    }
                    
                    
                    
    $currentDay++;
                    
    $dayOfWeek++;
                    
                    if(
    $dayOfWeek 7)
                    {
                        echo 
    "</tr><tr>";
                        
    $dayOfWeek 1;
                    }
                }


                if(
    $dayOfWeek != 1)
                {
                    for(
    $i $dayOfWeek$i <= 7$i++)
                    {
                        echo 
    "<td class='spacer'>&nbsp;</td>";
                    }
                }
                
                echo 
    "</table>";
                echo 
    "\n\n";
            }
        }

    ?>

        </body>
    </html>
     
    Last edited: Sep 24, 2007
  4. OP
    OP
    Phalanx

    Phalanx Member

    Joined:
    Dec 23, 2001
    Messages:
    6,413
    Location:
    3032
    oh wow, thank you so much. I wasn't even sure where to start, but I figure from this and a bit of googling I should be able to make it exactly how I want it.

    You're a champ :thumbup:
     
  5. OP
    OP
    Phalanx

    Phalanx Member

    Joined:
    Dec 23, 2001
    Messages:
    6,413
    Location:
    3032
    hi again folks,

    unfortunately I never seemed to have the time to actually finish this (until this weekend). Basically I've got the archive up and running, and the calendar links to comic.php?d=20070101, that opens comic.php with the image and pulls the text from the file. However I'm having issues figuring out how to implement first/back/next/last buttons with this. First I could do, it never changes, last I can use the same thing as the archive to find the last image, but how could I do back and next? Any help would be great, I'm learning this stuff as I go along, but what I'm learning often isn't really relevant to what I'm trying to do :)

    Thanks
     
  6. jomo

    jomo Member

    Joined:
    Oct 13, 2004
    Messages:
    188
    Location:
    2800

    Why not just link to the comic.php page with $d = $d--;
     
  7. OP
    OP
    Phalanx

    Phalanx Member

    Joined:
    Dec 23, 2001
    Messages:
    6,413
    Location:
    3032
    unfortunately there won't be a comic every day, so I only want it for days there are comics. Plus if you go backwards from 20070101 you get 20070100.

    Although it has given me an idea of simply using the position in the array rather than dates though
     

Share This Page

Advertisement: