AppServ 2.6.0 on localhost

If you’re running the newest version of AppServe (2.6.0)  as a local web server, take note:

When installing, do not install to “localhost”. Instead, you must use 127.0.0.1. If you have already installed it, browse to phpmyadmin/config.inc.php and change the server host line from localhost to 127.0.0.1.

See the third post on this forum. I’ve pasted in the post below:

The problem is that you are trying to use named pipe connection. You should use the tcp connection, so localhost -> 127.0.0.1

http://hu2.php.net/function.mysql-connect
Note: Whenever you specify “localhost” or “localhost:port” as server, the MySQL client library will override this and try to connect to a local socket (named pipe on Windows). If you want to use TCP/IP, use “127.0.0.1″ instead of “localhost”. If the MySQL client library tries to connect to the wrong local socket, you should set the correct path as Runtime Configuration in your PHP configuration and leave the server field blank.

Simply modify this line in the phpmyadmin/config.inc.php

$cfg['Servers'][$i]['host']          = ‘localhost’;

to this:

$cfg['Servers'][$i]['host']          = ’127.0.0.1′;

it worked for me;)

I had this problem recently and that fixed it. If you don’t fix it, you won’t be able to open phpmyadmin or connect to any databases.

I’m also getting this error, but I haven’t troubleshooted that one yet

Strict Standards: date() [function.date]: It is not safe to rely on the system’s timezone settings. Please use the date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected ‘America/New_York’ for ‘-5.0/no DST’ instead

How People View the Web

I found this interesting study on the web about what people look at on web sites. The results indicate that people read in an “F” pattern. Here’s a quote from the study:

In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:

• Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

The study is more for web developers than anyone else, but it’s still very interesting to read through.

PHP “Moving” calendar

Edit: 1/1/09: Fixed a few bugs and included the helper functions.

Here’s a script I wrote in PHP a while back. I couldn’t find any calendars that showed me a consistent time in the future. All of them seemed to be monthly. When it comes to an event calendar, this is useless if you want to see what happens next week if it’s the last week of the month.

So, here’s what my version looks like:

PHP Moving Calendar

You create it by calling this function:

CreateCalendar(weeks before this week, weeks after this week)

ie:

CreateCalendar(1, 3)

will create a calendar showing one week before the current week, and three weeks after the current week, as shown in the picture above.

The function:

/* Creates a calendar and places events on it. All date elements are 1-indexed.
It should theoretically work for infinite days into the future and all the way
back to to year 0 or 1. */
function createCalendar($previousWeeks, $upcomingWeeks)
{
	$WEEKS_TOTAL = $previousWeeks + $upcomingWeeks + 1;
	$DAYS_IN_WEEK = 7;
	$DAY_OF_YEAR = date("z") + 1; // Used once but here because it makes more sense when it has a name
	$FIRST_DAY_OFFSET = date("w") + ($DAYS_IN_WEEK * $previousWeeks) + 1; // Used once but here because it makes more sense when it has a name
	$THIS_YEAR = date("Y");

	$currentYear = $THIS_YEAR; // Current year on the calendar
	$currentMonth = "";
	$currentDayOfYear = $DAY_OF_YEAR - $FIRST_DAY_OFFSET + 1; // Numerical day of the year, where current means the current cell, not today.
	$lastDayOfYear = getDaysInYear($currentYear);
	$isLeapYear = isLeapYear($currentYear);
	$weekOnCalendar = 1; // The row of the calendar we are filling in

	echo '<table>
			<tr>
				<td class="calCell calCellHeader">S</td>
				<td class="calCell calCellHeader">M</td>
				<td class="calCell calCellHeader">T</td>
				<td class="calCell calCellHeader">W</td>
				<td class="calCell calCellHeader">T</td>
				<td class="calCell calCellHeader">F</td>
				<td class="calCell calCellHeader">S</td>
			</tr>';

			$darkCellBg = false; //  Boolean variable to keep track of whether or not we are currently using a darker cell BG color.
			$cellClass = 'calCellDay';	// Start off bright

			for($i = 0; $i < ($WEEKS_TOTAL * $DAYS_IN_WEEK); $i++)
			{
				if($i % $DAYS_IN_WEEK == 0)
				{
					echo '<tr>';
				}

				// Meaning that we are displaying a year in the future on the calendar
				if($currentDayOfYear > $lastDayOfYear)
				{
					$currentDayOfYear = 1; // Start the day counter over
					$currentYear += 1; // Go to the next year
					$lastDayOfYear = getDaysInYear($currentYear); // Learn the number of days in this year
					$isLeapYear = isLeapYear($currentYear); // Is the new year a leap year?
				}
				// Meaning that we are displaying a previous year on the calendar
				else if($currentDayOfYear < 1)
				{
					$adjustedDateInfo = getYearAndDayFromNegativeDayOfYear($currentDayOfYear, $currentYear);
					$currentYear = $adjustedDateInfo[0]; // Get the year the calendar starts at
					$currentDayOfYear = $adjustedDateInfo[1]; // Get the current day of the year in the past
					$isLeapYear = isLeapYear($currentYear); // Is that year a leap year?
					$lastDayOfYear = getDaysInYear($currentYear); // Learn the number of days in this year
				}

				$dateInfo = getDateInfoFromDayOfYear($currentDayOfYear, $isLeapYear);

				// At the beginning of the next month, switch to the alternating cell BG color to
				// enable alternating month BG colors
				if($dateInfo[0] == 1) {
					$darkCellBg = !$darkCellBg;
				}

				// Actually set the colors.
				if($darkCellBg)
				{
					$cellClass = 'calCellDay2';
				}
				else
				{
					$cellClass = 'calCellDay';
				}

				$currentMonth = getMonthFromIndex($dateInfo[1]);

				// DETAILS
				// $currentMonth		Abbreviated text representation of the current month
				// $dateInfo[0]			The day of the current month, no leading 0
				// $dateInfo[1]			The index of the current month (1-indexed)
				// $currentYear			Full representation of the current year
				// $currentDayOfYear	1-indexed number representing the current day of the year (1-365 or 366)	

				//$cellClass = 'calCellDay';

				/* 1/1/2009: Commented out the below IF statement as it failed to highlight the entire week on a year change.
				* I'm not sure why I had this statement here in the first place anymore so I'm removing it for now. I also
				* added the second conditional to the $currentDayOfYear conditional to prevent multiple days lighting up
				* as the current day if a year or more is displayed at once.
				*/
				//if($currentYear == $THIS_YEAR)
				//{
					if($weekOnCalendar == $previousWeeks + 1)
					{
						$cellClass = 'calCellThisWeek';
					}
					if($currentDayOfYear == $DAY_OF_YEAR && $currentYear == $THIS_YEAR)
					{
						$cellClass = 'calCellToday';
					}
				//}

				$tooltipCode = 'onClick="fixedtooltip(' . $dateInfo[0] . ', this, event, '150px')" onMouseOut="delayhidetip()"';

				echo '<td class="calCell ' . $cellClass . '" ' . $tooltipCode . '>' . $dateInfo[0] . '</td>';
				$currentDayOfYear++;

				if( ($i + 1) % $DAYS_IN_WEEK == 0)
				{
					echo '</tr>';
					$weekOnCalendar++;
				}
			}

	echo "</table>";
}

Various helper functions (required):

/* createCalendar helper function to get the date info from a day of the year */
function getDateInfoFromDayOfYear($dayOfYear, $isLeapYear)
{
    $DAYS_IN_MONTHS = array(31,28,31,30,31,30,31,31,30,31,30,31);
    if($isLeapYear)
        $DAYS_IN_MONTHS[1] = 29;

    $day = $dayOfYear; // Will end up being the day of the month we find
    $month = 0; // Zero-indexed for now, adjusted in the return statement

    while($day > $DAYS_IN_MONTHS[$month])
    {
        $day -= $DAYS_IN_MONTHS[$month];
        $month++;
    }

    return array($day, ($month + 1)); // Plus 1 to make all the date stuff 1-indexed
}

/* Need this function to check if a year is a leap year because of the forward/backward capability of the calendar. */
function isLeapYear($year){
    if(($year % 400) == 0)
    {    
        return true;
    }
    else if(($year % 100) == 0)
    {
        return false;
    }
    else if(($year % 4) == 0)
    {
        return true;
    }
    else
    {
        return false;
    }
} 

/* Gets the number of days in a given year */
function getDaysInYear($year)
{
    return (isLeapYear($year) ? 366 : 365 );
}

/* Gets a month text based on an index */
function getMonthFromIndex($index)
{
    $months = array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
    return $months[$index - 1]; // Minus 1 to make all the date stuff 1-indexed
}

/* Finds out how many years in the past a negative day year is */
function getYearAndDayFromNegativeDayOfYear($day, $currentYear)
{
    $yearsBack = 1;
    $dayOfPreviousYear = abs($day);
    $daysInLoopYear = getDaysInYear($currentYear - $yearsBack);
    while($dayOfPreviousYear > $daysInLoopYear)
    {
        $dayOfPreviousYear -= $daysInLoopYear;
        $yearsBack++;
    }

    $year = $currentYear - $yearsBack;

    return array($year, $daysInLoopYear - $dayOfPreviousYear + 0); 
}

And finally, here are the styles I used:

/* Calendar styles */
.calCell
{
	min-width: 30px;
	min-height: 30px;
	width: 30px;
	height: 30px;
	text-align: center;
	font-size: .8em;
	padding: 0;
	margin: 0;
}
.calCellHeader
{
	background-color: #7A9CFF;
	font-weight: bold;
	border: 1px solid #006080;
}
.calCellDay
{
	background-color: #FFFF8F;
	border: 1px solid #FFFF0F;
}
.calCellDay2
{
	background-color: #E0E070;
	border: 1px solid #FFFF0F;
}
.calCellThisWeek
{
	background-color: #BAFF75;
	border: 1px solid #87FF0F;
}
.calCellToday
{
	background-color: #61C200;
	border: 1px solid #478F00;
}

Three Free Web Widgets

In my current web development spree, I’ve discovered a nice heap of useful web widgets that are free, easy to install, and easy to use.

The first is simple, a popup calendar: Dynamic Date Selector

This popup calendar works by using a hidden HTML table on your page. When you click in the box, the calendar is set to visible and moved around where you clicked. I chose this widget because it’s easy to use and modify. All of the styles are in their own stylesheet, not embedded deep within the code, which makes customizing it very easy. I was also able to modify the code very easily to include a drop-down menu for the year and have a calendar icon to the right of the text box that I can click to open the calendar. Very useful little widget.

4 Stars for ease of use but potential div/table arguments.

Second, a JavaScript validator: JSValidate

This JavaScript tool is early in it’s development. It’s hard to say if there’s much of a future for this project…we’ll have to get to a version 1 before that’s determined. Regardless, this script requires you to add a class attribute to your input fields…that’s it. Give the class a name like “jsrequired” or “jsvalidate-number” to enable the validation. All the validation is done using regular expressions, and it’s super-easy to add your own. It’s a little tough to do two validations on one field (like required and number), but you can add two classes and it works. The only problem is that you get both error messages if either of the errors occur. The only other downside is that you have to add the “name” attribute to your form, which doesn’t validate on XHTML strict, but that’s reported to be fixed in another version. Overall, very nice and some beautiful effects. I hope to see this developed further.

3 Stars because it is an early version and does not fully validate.

Finally, the best of them all: GreyBox

GreyBox is a self titled “Pop-up window that doesn’t suck”. And that’s right…it doesn’t! This AJAX tool (AJAX is just JavaScript and other technologies mixed) rocks. You just click a link and it opens up in an in-browser window. It’s not a real popup, just divs and tables mixed with some nice AJAX effects. The best way to see this is to just try it for yourself at the website linked above. Again, this is easy to install and use and looks great. I use it for input forms on my website.

5 Stars because it simply rocks.