Howdy,
The latest beast eating up all my free time (and causing me to whine for help on the forums! PS. A HUGE thanks for all the help!)is the official website for the Illinois Cycling Association, one of the sanctioned branches of the Unites States Cycling Federation, the governing body that oversees amateur and professional cycling in the United States and is also in control of the Olympic feeder program.
The goal of the site was of course to be the landing spot for all things cycling in Illinois without becoming a bloated do-everything-but-no-one-thing-well site... The site really serves to distribute news and information to Illinois' cycling community, maintain a calendar of races and of course keep a database of results.
The site is built on 1.1.1 and pretty much utilizes Pagesetter, pgArchive, pgCalendar, and pgForm throughout not only as the method of content menagement but also as an impromptu web application (relations and custom plugins make just about anything possible- I must have 25 or so custom plugins). Other modules include Dizkus, InterCom, Downloads, etc... etc... but most of those are simply out-of-the-box installs...
The focus of the site is of course the calendar and results system. pgForm is used to override Pagesetter's guppy system (thanks dits!) as it allows the forms (HTML and pnRender) to be edited and customized to one's own needs. And customized they are! I use javascript "pop-ups" (think the little calendar date finder) for google maps to find addresses, lists that connect with other databases to get information, and a slew of other ways to simplify and streamline the entry of data into the form. After all the better the data in, the better the data out...
The coolest (and most difficult) part of the site was developing a system to upload race results. From the race page (Pagesetter's full.html template) a set of custom plugins allows a user to select a csv file of results and upload it to the site. A custom Pagesetter function will then run through the csv, check some data against an outside database, make any necessary corrections (or notes) and then create a Pagesetter publication for each row. The site will also take each row, run some more logic on it, make some calculations and modify the data accordingly and then add it to another table on the site for use elsewhere. If that wasn't enough, the site will finally upload the corrected csv to the United States Cycling Federation's website for upload to their database using a custom written SOAP procedure (serious pain in the...) All of those results are now in the database, fully recognized by Pagesetter, editable and best of all fully compliant with Pagesetter's use of Smarty! Which brings me to the results management system...
The results are really the main focus of the site for racers- after all they want to see their names up there in 1st (or 40th) place! Using some slick Ajax the site will auto-populate a menu with a year's races and categories dynamically from the database and then allow a user to retrieve only the results they want. Of course because it's Pagesetter we can filter and sort everything to our heart's desire... and we do... Using multiple custom templates we can fetch a rider's results or a team's results and order them in different ways. Further, I have implemented pChart to draw pie charts of the racer's or team's placings so they can see just how great (or not) they really are. That was tricky but it looks fantastic and is sure to be a hit-such that I'm going to whip up some other graphs and charts to show some other stats (everyone loves data-particularly cyclists!)
The next step is to put together an inline Ajax editing plugin/system so that I can edit any result from the list of results without ever having to load a form again... really imagine you have to edit 40 or 50 results!! (PS anyone interested in helping out let me know... I have dits' interest sparked and created a ticket on pgForm)
Anyhow... the one final piece that's not quite ready is a points competition calculator... it takes the uploaded results and awards points based on many factors (place, field size, category, etc...) to create a season-long competition... PLEA FOR HELP: Anyone who is really good with PHP logic and complex conditions PM me- I may have some work for you... the rules of this competition include so many conditional layers of logic that I can't wrap my head around them... as such we just use a google spreadsheet to do it manually... :(
All in all the site took about 2 months start-to-finish on weekends and nights (I have a real job!) and was a labor of love as I'm one of the racer's who will use the site... Thanks for reading this epic...
As always, a huge thanks to everyone who aided me: nestormateo, Wendell, dits, halbrookTech, craigh, and anyone else whom I've forgotten... If anyone has any questions I'm always available to give back and do my best...
http://illinoiscycling.binaryoven.com/
(eventually it will live on: http://illinoiscycling.org)
-Julian
--
Burnham Racing
Illinois Cycling Association
Watch
GitHub Core
Show your support for Zikula! Sign up at Github account and watch the Core project!
GitHub Modules
Forum Activity
- michiel responded to »password problem« 10:01 AM
- mazdev responded to »Hide "Register new account" and change template to 3 col« 07:50 AM
- mesteele101 created topic »Zikula 1.3.3 - Site Search 1.5.2 - Unable to turn off plug-ins« 07:48 AM
- mesteele101 responded to »ERR (3): E_USER_ERROR: Smarty error: [in pagesvar:pagesitem2en line XXX]…« 25. May
- mazdev responded to »Pages 2.5.0 and updating - Page not found« 25. May
- mesteele101 responded to »Zikula 1.3.3 - Selecting a category in Pages not working« 25. May
- mdee created topic »How to implement returnpage ?« 25. May
Zikula Blog
- Anatomy of Open Source Projects on Mar 07
- Continuous Review on Mar 01
- Not Invented Here on Feb 24
- How to Contribute Your Code at Github on Jan 13
- 10 Steps to Coding-Nirvana: Tips for Successful Module Writing on Nov 12
- Submitting Bug Report Tickets That Get Results on Aug 17
- Cozi Tricks #1: Syntax Highlighting on Aug 07
Login
Illinois Cycling Association
-
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 16, 2009 - 01:23 AM
-
- Rank: Team Member
- Registered: Dec 07, 2003
- Last visit: May 09, 2010
- Posts: 2703
Posted: May 16, 2009 - 11:16 AM
Great looking site. Nice work!
I would be interested in showcasing it... we need a good US site. Anyway when it is live, let me know via PM.
--
David Pahl
Zikula Support Team -
- Rank: Developer
- Registered: Dec 31, 1969
- Last visit: May 31, 2010
- Posts: 303
Posted: May 17, 2009 - 01:35 AM
It really is a great work, good job.
--
Paul
____________________________________________________
"...Humor, ITs just a state of mind"
TakeIT2.CoM :: Open Destination
...my site is a perfect example of why doctors do not operate on them self :) -
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 17, 2009 - 03:22 AM
So I can't edit my original post (hmmm...) but I wanted to show some of the elements of the site that visitors can't see as that's where the really creative stuff happens... Now of course the really neat stuff is all the PHP but well, that doesn't look as cool ;)
The homepage for Admins showing the approve/reject custom pgForm system...simply clicking approve or reject will take care of the pending Pagesetter publication that's tied to a race...
The permissioned users' view of the race page with custom pgForm to "Request to Officiate this Race" that will create a Pagesetter publication related to the race that will then appear on the admin's homepage waiting approval (above). Upon approval the publication will prrear inline on the race page with only some fields visible regular users and other visible to admins. This photo also shows the custom csv file upload... These boxes disappear when the race has passed...
Creating a race. The little map icon is a google map that when clicked fills in the address info in the appropriate fields- sometimes we don't know the exact address but know where the race is... In addition the "Host Club/Team" field connects to an external database of all teams in the country. Again custom pgForm templates...
Ajax! This menu is all Ajax and pulls from the database to only show the relevant information based first on year, then the race, then the category.
The page showing a rider's results... That's pChart used to make the pie chart...
The same page but for a team's results. Custom templates allow different sorting for teams and riders...
The race page (same as above) but AFTER results have been uploaded using the custom Pagesetter function. The template doesn't show the forms and does show the results...
--
Burnham Racing
Illinois Cycling Association -
- Rank: Developer
- Registered: Aug 23, 2003
- Last visit: May 31, 2010
- Posts: 1428
Posted: May 17, 2009 - 07:02 AM
Great website. Your backend is very interesting. A real showcase of the web applicaton framework idea.
One minor layout remark, the content areas on the homepage could use a little padding IMHO.
One other remark, you might benefit from merging style sheets / JS together or using the stuff in http://code.zikula.org/core/ticket/1041. Could speed up the loading a lot. Using miniied versions of prototype (and the other JS) and the style sheets by YUI compression for example also saves a lot of bandwidth. Especially since you have a lot of it on all the time
edited by: espaan, May 17, 2009 - 08:03 PM
--
campertoday.nl, Module development, Dutch Zikula Community -
- Rank: Developer
- Registered: Mar 29, 2005
- Last visit: Mar 13, 2010
- Posts: 228
Posted: May 17, 2009 - 11:29 PM
espaan
One minor layout remark, the content areas on the homepage could use a little padding IMHO.
I agree with espaan Generally I would work a bit on the typography, it looks a little bit confusing (e.g. the first screenshot you posted, in the menu there are some words almost touching the border, I don't like it) A little bit of padding and line-height would be great.
Anyways, my congratulations, I like it
edited by: Arthens, May 18, 2009 - 12:30 PM
--
Zikula Italia
SimpleGallery -
- Rank: Developer
- Registered: Aug 23, 2003
- Last visit: May 31, 2010
- Posts: 1428
Posted: May 17, 2009 - 11:43 PM
2 minor remarks still
- Opening this page (link from the calendar): http://illinoiscycling.binaryoven.com/index.php?module=Page&func=viewpub&tid=1&pid=7 gave a google maps API error ("The Google Maps API server rejected your request. This could be because the API key used on this site was registered for a different web site. You can generate a new key for this web site at %1$s.").
- The page Clubs (index.php?module=Page&tid=5) shows edit links next to the club name. And of course I don't have edit rights I presume?
--
campertoday.nl, Module development, Dutch Zikula Community -
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 18, 2009 - 12:13 AM
Espaan-
Thanks for catching that "edit" issue (and not having a field day editing the publications ) Always good to have a fresh set of eyes look at a site.
The site is now live so that google maps API issue is irrelevant. Thanks though.
http://code.zikula.org/core/ticket/1041
http://www.IllinoisCycling.org
edited by: remmingtonshowdown, May 18, 2009 - 06:14 AM
--
Burnham Racing
Illinois Cycling Association -
- Rank: Team Member
- Registered: Dec 07, 2003
- Last visit: May 09, 2010
- Posts: 2703
Posted: May 18, 2009 - 12:34 AM
Adjusting your banners.css and changing your .caption width to 99% seems to solve the text padding problem on the right, at least in Iceweasel.
--
David Pahl
Zikula Support Team -
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 18, 2009 - 12:38 AM
-
- Rank: Developer
- Registered: Feb 17, 2005
- Last visit: May 21, 2010
- Posts: 684
Posted: May 18, 2009 - 01:06 AM
Quote
Ajax! This menu is all Ajax and pulls from the database to only show the relevant information based first on year, then the race, then the category.
That's interesting. How exactly did you achieve that? -
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 18, 2009 - 02:02 AM
Here ya go:
1.) In the XXX-list-header.html template for the Pagesetter publication we call the menu.js and build the skeleton of the form:
Code
<form name=sel>
<font id=year><select>
<option value='0'>Select Year</option>
</select></font>
<font id=races><select>
<option value='0'>Select Race</option>
</select></font>
<font id=category><select>
<option value='0'>Select Category</option>
</select></font>
</form>
2.) In menu.js is the Ajax. Notice the reference to state.php that does all the DB calling...
Code
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "http://illinoiscycling.org/themes/ica/javascript/state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('year', -1); // value in first dropdown
3.)In state.php we make all the database calls and build the form... Notice that we have to use DISTINCT so that we don't get thousands of results back...
Code
<?
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
$data=$_GET['data'];
$val=$_GET['val'];
//set database
$dbhost = "#########";
$dbuser = "#########";
$dbpass = "#########";
$dbname = "#########";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");
if ($data=='year'){ //first dropdown
echo "<select name='year' onChange=\"dochange('races', this.value)\">\n";
echo "<option value='0'>Select Year</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT pg_field86 FROM zk_pagesetter_pubdata1 WHERE pg_online = '1' ");
while(list($pg_field86)=mysql_fetch_array($result)){
echo "<option value=\"$pg_field86\" >$pg_field86</option> \n" ;
}
}else if ($data=='races') { // second dropdown
echo "<select name='races' onChange=\"dochange('category', this.value)\">\n";
echo "<option value='0'>Select Race</option>\n";
$result=mysql_db_query($dbname,"SELECT pg_field19, pg_field25 FROM zk_pagesetter_pubdata1 WHERE pg_online = '1' && pg_field111 = '0' && pg_field86 = '$val'");
while(list($pg_field19, $pg_field25)=mysql_fetch_array($result)){
echo "<option value=\"$pg_field25\" >$pg_field19</option> \n" ;
}
} else if ($data=='category') { // third dropdown
echo "<select name='category' onChange=\"MM_jumpMenu('parent',this,0)\">\n";
echo "<option value='0'>Select Category</option>\n";
echo "<option value='index.php?module=Page&tid=2&filter=eventPermit:eq:$val&orderby=category,class,age&pubcnt=0'>Full Results</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT pg_field34, pg_field35, pg_field36, pg_field37 FROM zk_pagesetter_pubdata2 WHERE pg_field31 = '$val' ");
while(list($pg_field34, $pg_field35, $pg_field36, $pg_field37)=mysql_fetch_array($result)){
$url = "index.php?module=Page&tid=2&filter=eventPermit:eq:$val,category:eq:$pg_field34,gender:eq:$pg_field35";
if (isset ($pg_field36)){
$url .= ",class:eq:$pg_field36";
}
if (isset ($pg_field37)){
$url .= ",age:eq:$pg_field37";
}
$url .="&orderby=category,class,age&pubcnt=0";
echo "<option value=\"$url\" >$pg_field34 $pg_field35 $pg_field36 $pg_field37</option> \n" ;
}
}
echo "</select>\n";
?>
That's it really... You can potentially have dozens of more levels of options and menus... It's fantastic for creating menus where the content will be changing without any predictability and you don't want to hardcode or have to manually update...
edited by: remmingtonshowdown, May 18, 2009 - 08:04 AM
--
Burnham Racing
Illinois Cycling Association -
- Rank: Softmore
- Registered: May 22, 2004
- Last visit: Apr 03, 2010
- Posts: 451
Posted: May 18, 2009 - 02:07 AM
Ok, the forum is being temperamental and not letting me edit my post... but in step 1 before the form is built we need to call menu.js of course...
Code
<s c r i p t type="text/javascript" src="themes/ica/javascript/menu.js">
edited by: remmingtonshowdown, May 18, 2009 - 08:08 AM
--
Burnham Racing
Illinois Cycling Association -
- Rank: Developer
- Registered: Feb 17, 2005
- Last visit: May 21, 2010
- Posts: 684
Posted: May 18, 2009 - 05:00 AM
Thanks!
- Moderated by:
- Support
