Final Project Notes

Have implemented a framework for a site that intended to support a small, dedicated community of followers [though this base is mostly athletes themselves, and their parents]. The requirements for this site to be considered useful, is for it to provide three things:

• access to an up to date, practice and meet schedule


• access to information about events we will be attending, including location and travel directions


• rapid turnaround in providing athlete performance summaries

However, there's no getting around providing a site w/ some entertainment value too. So a goal is to collect plenty of photos and share them thru galleries and such ...

There are plenty of other features that will make the site of some appeal to a broader base, but that effort will be ongoing.

What I've put together is a general template for delivering future page content. While no time at all has been expended on styling, the template includes:

• dynamic generation of a menu and drop-down submenu bar driven thru an xml config file


• content generation from mysql


• a slideshow of randomized pics from a user directory, w/ fading-in/out effects


• connection and capture of remote webpages that utilize the sport standard for meet administration and reporting. This data is stored locally and then becomes the target of a series of filters that can be applied against it. This massages the data in expected, useful ways. Doing this required a greater than minimal level of introduction to regex processing. Pardon the temporary colors, but here's a snapshot. The form controls on the left are dynamicall generated from the data in the main content panel.
  
  

Discovered along the way that just about any 3rd party code makes of O-O practices, so I decided too to use OO. While my ramp-up was slow, I think the code is cleaner in the end and was probably easier to organize. With that said, I've had a myriad of problems, including some still current ones which prevented demo of the project. Of course these were not of an easy variety, the two most pressing problems work perfectly happily in my local environment, but not on the class server. I definitely could use another pair of eyes. These problems are:

• unable to reliably cross javascript/php bridge w/ ajax. Again, works locally.


• a LimitIterator fails to do its thing on all but it's 1st call. This breaks the filtering feature I discussed earlier. Much to my chagrin, this also works as expected locally. It would probably be easier to debug if it didn't. Code fragment is here, though I presume the problem is outside the range of my suspicion.
  
  

Will continue to hack at this as I would like to style and make available to our community at large, asap. I have other code and assets (i.e. calendar) ready to go as soon I clear the hurdles ... I will likely attempt to install onto my host isp to see if problem persists.

Here's a link to this prototype ... again no styling. There's minimal content seeded into the db.

Final Project Wireframes

Here are select wireframes in support of following the exploits of a youth track club. The club is a non-profit, small business that has no [as in zero] web presence. I've selected an initial feature set as the class project, and expect that new features will continue to be implemented after our class.

Latest Info and Updates, a gallery, and results reporting pretty much constitutes most, if not all, of what athletes and parents hope [and expect] to see. Paper of email delivery of this data doesn't seem to cut it anymore.



However, team administrators and coaches, put in considerable effort to provide this [and regurgitated variations of this] info, in several forms to others. So, there is a additional set of features that will be developed [post-final project] that will make managing team activities much easier. These [the tools] are more of the administrator variety and will be hidden behind a special login group. It's not a wireframe, but see the chosen familiar interface ...



In addition, the site will be expanded to provide info of wider scope and interest.
Academic honor roll, summer programs, college info, tracking our college roll round out our vision to become more of a community based organization.

Class Final Project

... is to build a site in support of a youth track club's administrative and operational needs. The goal is to present information of value to the following roles: athlete, parent, coach, and administrator. This project has wider scope than what will be available at course's end, but some practical set of features will be developed using the concepts learned in class.

Assignment 8 - In Class

Installed MySQL and attempted to install phpMyAdmin onto Mac machine. Could not find any forum or knowledgebase help on this. It appears you really have to be a network/unix administrator type in order to succeed at what's billed as such a straight forward process ...

Class7 Assignment

Detailed experiences[problems] and observations to follow ... meanwhile, here's the link.

PHP Notes

➔
a multiline string can be assigned as follows:
$a_string = <<< TEST
~~~~~~~~~~~
~~~~~~~~~~~
~~~~~~~~~~~
TEST;
echo $a_string;

➔
PHP tags are embedded within:
<?php
?>

➔
period('.') is concatenation operator for strings:
echo "this concatenates a variable value".$my_var."and some more text";

can use the usual combination of assignment & arithmetic operators.
'.=' is a new one. $a.="hello"; equals $a = $a."hello";

Pre && Post-fix operators exist, unlike javascript where only postfix is allowed


various comment styles are supported: <!-- --> AND /* */ AND // AND #

include command: <?php include("menu.php"); ?>
require command: <?php require("menu.php"); ?> returns a FATAL error if include file isn't found

➔ language features
if-elseif-else AND switch-case-default constructs are supported

PHP creates an associative array when an html form is used with method="POST". The indices to be used correspond to each name attribute defined in the html form. _POST is the array name for "POST", while _GET is array name for method="GET". However method=GET displays the var values appended to the URL. They will appear visible using this form:
"?item=##&quantity=##" the question mark signals to the browser that variables follow.

PHP arrays are actually maps, with each key being mapped to a value. To loop thru an associative array, use the foreach loop:
foreach ($arrayname as $key => $value) { ~~~~~ }
Yes, 'as' and '=>' are needed as specified.

➔
mysql_real_escape_string(), function to help prevent SQL Injection attacks.

magic quotes assisted in earlier releases in these attacks. this is how to test&deal with them:

// Remove those slashes
if(get_magic_quotes_gpc())
echo stripslashes($_POST['question']);
else
echo $_POST['question'];

➔
use htmlentities function for similar protection when allowing a user to enter text:
The htmlentities function takes a string and returns the same string with HTML converted into HTML entities. For example, the string "<script>" would be converted to "<script>".

$userInput = "I am going to hax0r your site, hahaha!
<script type='text/javascript'>
window.location = 'http://www.example.com/'
</script>'";

$userInputEntities = htmlentities($userInput);
echo $userInputEntities;

Class5 homework assignment

The class5 eCommerce assignment brings together class1-5 topics, including xhtml, css, and javascript. My solution was an exotic fruit site shown here. Mousing over the image grid displays an associated [text] image which purports to describe details of the image. This dynamic behavior was implemented by assigning mouseover & mouseout event handlers using features of the prototypejs framework. This framework assists in traversing thru the DOM[Document Object Module]. With a small amount of code, we can identify the moused-over image, retrieve the src attribute, clone the element, reassign the src attribute w/ use of a regex expression: /(\.{2}\/?\w+\/)*(\w+\d+)(\.\w+)/ . When mousing out, we reverse the element's attr assignment back to the original image.

➔
prototypejs introduces quite a bit of functionality, difficult to find a reason not to use it ...

most fundamentally:

for (var index=0; index<myArray.length; index++) {
var item = myArray[index];
// working code ...
}

is replaced by:

myArray.each( function(item) {
// working code ...
} );

'each' is a reserved keyword, 'item' is not.

$w( string ) ➝Array

➔
a few string method offerings ...

truncate( length=n, suffix='...' )
appends suffix to truncated string

blank() ➝ Boolean
empty() ➝ Boolean

camelize() ➝string
converts string seperated by dashes to camel case

escapeHTML() ➝ string
useful for protecting against possible malicious user entry

gsub( pattern, replacement ) ➝ string

strip()
strips all leading/trailing whitespace

➔
misc ...

$('~~~').childElements() ➝ returns an array of ... child elements ... of element '~~~'

$('nyc').adjacent('li.us') ➝ returns an array of sibling elements that match the 'li.us' selector. '.us' represents a class="us"; 'nyc' represents an element with #nyc

uniq()
method returning a duplicate free version of an array

clonePosition( element, source [,options] ) ➝returns an object cloning the dimensions and position of a source element.


$(element).wrap('div').setStyle(
{backgroundImage: 'url(images/rounded-corner-top-left.png) top left'} );
➝ set the style for selector div of element with the background image

binding ...

'this' refers to the object holding a reference to the function