0

More About CA272 (Pro Website Development) Final Project

CA272 Final Project LogoSince I mentioned the CA272 final project a little in the last post, I think it’s best to talk more about this topic.

I took CA272 class in the Spring of 2009. It is known as Professional Website Development. Actually to me, this is not a professional class. Instead, it is a very basic class: it doesn’t include sever-side script languages nor JavaScript, just basic HTML4. At that time however, I didn’t know jQuery and PHP until the very end of the semester.

As you can see through the source code of the Final Project page, all of the AJAX and JavaScript functions were created by myself. Because I discovered jQuery during the last week of final project submission, I hurriedly added some animated transitions to the pages using jQuery without the deep understanding of jQuery. Therefore, the animation looks a little incomplete.

The presentation below explains the most of features on the site:

Note that because I don’t have my own website at the time, I copied all the final project files to a free hosting. Therefore, the URL at the end of the video is not valid anymore, use http://robbychen.com/ca272/final/ instead.

0

My Almost Completed Second WordPress Theme

I have been making this second Worldpress theme for the final project in my CMS class. Compare to the first theme I made, it has more customized features such as custom background and custom navigation menu, the design of the theme is more complex, and the theme layout becomes more standard. Here is an overview of its features copied from this page:

  • Custom background
  • Custom menu (only allow one level of drop-down menu)
  • Three widget areas
    • Left widget area – default widget is categories if no widget is set
    • Right widget area – default is the search form
    • Bottom widget area – default is tag cloud
  • Show category and tag list at the end of each post, display a message  if there is no category / tag assigned
  • Custom 404 page
  • Display 10 recent posts under each post

For more information on each of the above features, and to see the code snippets for them, read the original post.

This theme is still incomplete because I need to add the comments area on the post page, as well as some design changes. The deadline for this final project is next Thursday, July 22. I still have some time to finish up.

I will post the final progress of the theme and its source code when it’s completed.

0

NetBeans 6.9 was Released Today

I’m exited to know that latest NetBeans was released today. I happened to download 6.9 during the class at Montgomery College today. I have no idea about today’s latest release until I downloaded and installed it to the Windows XP-based machine that I was working on and noticed that it is titled NetBeans IDE 6.9. I plan to upgrade NetBeans on both of my netbook and laptop to 6.9 tomorrow. Visit release information page to learn more about this latest release. Also check out Guided Video Tour of the NetBeans IDE 6.9 which I think it’s a new section for 6.9.

1

Played Around with Drupal, Upcoming Site Update, and more …

I hadn’t write any blog post since last Thursday. The reason is because I had been playing around with Drupal. Drupal is a Content Management System that is similar to WordPress, in my experience, because it can install additional plugins as modules, custom themes, and add pages. However, Drupal has few other features that need to be configured externally if using WordPress, such as the ability to optimize the performance of the site by enabling compression. Perhaps I used WordPress for long time and don’t know how to use Drupal yet, I have not discovered any usefulness of Drupal over WordPress yet. I will continue to learn more about Drupal and improve my Drupal site at diary.robbychen.com. As you can see through the URL, I originally planed to start another diary blog using a CMS app and change the daily post schedule for this blog to irregular post schedule just like my Tumblr-based blog. I decided first to try Drupal because I tried Joomla before and I can’t seem to use it. I think I will try other CMS if Drupal also won’t work for me.

I also plan to update my main site robbychen.com beginning tomorrow since the spring semester is over. I decided to make this site as a portfolio site that include all the programming works that I have done in the past instead of a tutorial site because this domain name is based on my name and it doesn’t suited for a tutorial website or a commercial website. The current layout on the site is based on a commercial website. I will try to create my own site layout and I have decided to apply the color theme of the site based on the new Ubuntu Radiance theme.

Click to enlarge

The ColdFusion to PHP project that I was promised back in January is not possible anymore because I couldn’t find the CA 278 files and can’t convert to PHP without these files. However, I’m organizing the CA 288 class files which is advanced ColdFusion programming. I will rewrote them with PHP as soon as the maintenance of these files is completed.

0

Delete part of the URL string using removeChars with ColdFusion

While I was doing the final project for my ColdFusion class today, I got one problem which the URL query keeps adding up when I was using CGI.QUERY_STRING. For example, the query string becomes “projectid=5&clear=yes” when I just added the “&clear=yes” to the end of the CGI.QUERY_STRING variable. After the page have been refreshed, the query would become “projectid=5&clear=yes&clear=yes”. This became a problem to me because not only the URL query was not right, but the result of the page was also not right.

After numerous trail of using cfif, I remembered that I could use a build-in ColdFusion function to remove the last part of URL query and store it to a variable to use it later. The name of the function is removeChars. It needs three parameters, a string, the position number of where to begin removing characters, and the position number of where to end the removing of characters. For example, I used the following statement to remove the “&clear=yes” characters at the end of the CGI.QUERY_STRING variable and stores it to a new variable called variables.QUERY_STRING:

<cfset variables.QUERY_STRING = removeChars("#CGI.QUERY_STRING#",12,11)>

Of course I would add a cfif statement to avoid continue removing the characters if there is no “clear=yes” exists in the string:

<cfif CGI.QUERY_STRING CONTAINS "Clear=yes">
 <cfset variables.QUERY_STRING = removeChars("#CGI.QUERY_STRING#",12,11)>
 <cfset variables.clear = "#CGI.QUERY_STRING#">
<cfelse>
 <cfset variables.QUERY_STRING = "#CGI.QUERY_STRING#">
 <cfset variables.clear = "#CGI.QUERY_STRING#&Clear=yes">
</cfif>
 <a href="?#variables.QUERY_STRING#" title="Continue Shopping">Continue Shopping</a><br />
 <a href="?#variables.clear#" title="Clear Cart">Clear Cart</a>

You can see result of the above code here along with my final project.

0

Create a DSN-less database connection using ColdFusion 8

For a long time, I had been searching around online to find a solution to switch to MySQL database for my ColdFusion school server from Microsoft Access database. Since I have no control over the ColdFusion Administration settings, I can’t change the DSN connection.

Recently I have been finishing my remaining undone projects. I use Railo open source CF server and MySQL under Ubuntu to do the assignments for the class. The SQL code I was writing is a bunch of aggregate functions:

SELECT
	   b.BookId,
   	   b.BookTitle,
	   s.SalePrice,
          COUNT(s.SalePrice) AS bcount,
          SUM(sd.TotalSale) AS ts,
          SUM(sd.Quantity) AS qt
FROM tblBooks AS b,
     tblSales AS s,
     tblSalesDetail AS sd
WHERE b.BookId=s.BookId AND s.SaleId=sd.SaleId AND s.SalePrice IS NOT NULL
GROUP BY b.BookTitle
ORDER BY #variables.ob# #URL.s#;

When I was testing these code on the localhost which is MySQL-powered, the page was rendered fine without any errors. However, once I uploaded to the school server which is powered by MS Access, the errors began to appear. Noticeably, I can’t use the name such as b.BookId, b.BookTitle, s.SalePrice without using aggregate functions. It struggled me a bit because the final is due tomorrow.

I then remembered my unsolved solution for connecting MySQL database dynamically through CF code because most of the DSN-less code online only works in CF 5. Once again I began to searching for the solution to release my struggle to the MS Access. Finally, I found a CF custom tag to do just that. It is called query, similar to cfquery. Since it’s a custom tag, the use of it is cf_query. This tag is primary used to connect to the MS SQL server by its author. Fortunately he has given a code snippet to dump out the available JDBC drivers on the server.

After I tested this code, I was surprised to see that my school server supports lots of databases that I don’t know about. I chose the MySQL one and copied its JDBC URL to the CF test page. I noticed that I was unable to connect to my own MySQL server on this web server since my hosting provider doesn’t allow remote connection to MySQL. Therefore I googled for “free mysql hosting” and found a website called FreeSQL.org that specifically for hosting free MySQL databases. I connect to this newly created database by using the cf_query code:

<cf_query jdbcURL="jdbc:mysql://www.freesql.org/ColdFusion" username="username" password="password" qName="qGetData">

Note that ColdFusion is the database name. Within the cf_query beginning and ending tag, I wrote the SQL statements to import the data since the phpMyAdmin link does not work on FreeSQL.org. After that, I replaced the above cf_query code with cfquery in the project that I struggled with.

You can download the above code here along with the custom tag and the original code from its author. The project page that I was struggled with can be found here.

0

Calculate the degrees from the given Data to draw PHP Graph

During the final exam for my PHP class today, I encountered a math problem that I learned long time ago. The problem is to draw a chart based on the data from the database in order to show the ratio between men and women on a pie chart. The number of men represented as blue and red represent as women. I thought that it was as simple as draw two arcs using imagefilledarc function. However, when I noticed that the data needs to be in degrees in order to use this function. I totally forget how to convert a number to a degree since I haven’t been practice math for two years. Thanks to Google, I learned how to do the conversion on Yahoo Answers. The formula that I came up with is the degree of each men and women equals the number of men or women divide by total number of men and women multiply by 360. Therefore I wrote the following code:

<?php
    $image = imagecreatetruecolor(300, 300);
    $blue = imagecolorallocate($image, 0, 0, 255);
    $red = imagecolorallocate($image, 255, 0, 0);
    $white = imagecolorallocate($image, 255, 255, 255);
    imagefill($image, 0, 0, $white);

    $male = $_GET['m'];
    $female = $_GET['f'];

    $total = $male + $female;
    $maleDegree = $male / $total * 360;
    $femaleDegree = $female / $total * 360;

    imagefilledarc($image, 130, 130, 200, 200, $femaleDegree-270, $maleDegree-90, $blue, IMG_ARC_EDGED);
    imagefilledarc($image, 120, 130, 190, 190, $maleDegree-90, $femaleDegree-270, $red, IMG_ARC_EDGED);

    imagepng($image);
    imagedestroy($image);
?>

The f and m variables are URL variables, which means I can pass the number of males and females inside the normal img tag:

<img src="3_image.php?m=<?php echo $numMale; ?>&f=<?php echo $numFemale; ?>" alt="Problem 3 - Graph" />

You can download the source code here to experiment with it. There is a MySQL database file inside the downloaded archive, which it contains the needed MEMBERS table for this script.

0

Use Array to Populate the form with PHP

When I was doing my practice final for the PHP class today, I came across several problems for easier way to populate the form, especially with check box and option form controls. These two controls need to be repeated each time when new items were added to the list. Of course I could copy and paste the previous statement and edit it accordingly, but I want to make it easier by just input the new items into the appropriate arrays. Here is what I did to the multiple selection control:

<select multiple size="5" name="skills[]" id="Skills">
    <?php
        $selected = new prefilll();
        $webprogramming = array("AJAX","ColdFusion","HTML 5","JavaScript","JSP","PHP");
        $computerprogramming = array("Basic","C/C++","Java","Linux");
        $skillset = array("Web Programming"=>$webprogramming,"Computer Programming"=>$computerprogramming);
        foreach($skillset as $skillNum=>$skillsets) {
            echo "<optgroup label="$skillNum">n";
            foreach($skillsets as $programmingSkill) {
                echo "<option";
                echo $selected->selected("skills",$programmingSkill);
                echo " value="$programmingSkill">{$programmingSkill}</option>n";
            }
            echo "</optgroup>n";
        }
    ?>
</select>

And here is the check box control:

<?php
     $counter = 0;
     $checked = new prefilll();
     $jobtypes = array("full"=>"Full Time","part"=>"Part Time","weekdays"=>"Weekdays","weekends"=>"Weekends");
     foreach($jobtypes as $labelFor=>$values) {
         $counter++;
         echo "<input type='checkbox' name='jobtypes[]' value='{$values}' id='{$labelFor}'" . $checked->checked("jobtypes", $values) . " />n";
         echo "<label for='{$labelFor}'>{$values}</label>n";
         if ($counter == sizeof($jobtypes) / 2) {
             echo "<br />n";
         }
     }
?>

Note that I used a class in the above code segments, prefill. This class is used to reselect the items in the check box and option controls if there is a validation error.

Following is the code for the prefill class:

class prefilll{
    function selected($items,$Item) {
        if (isset($_POST[$items])) {
            $items = $_POST[$items];
            if (in_array($Item, $items)) {
                    $Selected = " selected";
                }
            else {
                $Selected = "";
            }
        }
        else {
            $Selected = "";
        }
        return $Selected;
    }
 function checked($items,$Item) {
        if (isset($_POST[$items])) {
            $items = $_POST[$items];
            if (in_array($Item, $items)) {
                    $checked = " checked";
                }
            else {
                $checked = "";
            }
        }
        else {
            $checked = "";
        }
        return $checked;
    }
}

You can download the above source code from here along with the whole source file if you want to experiment with it yourself.

0

Playing Around with PHP URL Extraction

I discovered today that there is a feature in PHP that can grab current URL through $_SERVER['REQUEST_URI'] and convert it into an array using explode function. I think this is extremely useful to me. Partly because I always wanted to have an URL that is similar to the URL for this blog. Another reason is that I don’t have to edit my sever configuration either directly or through PHP to achieve the same result. The method I use to create an URL that only contains the folder of the page, that is, the page is index.php, might be useful for small websites that have less than fifty web pages or possibly less. I didn’t test it on a large set of web pages because I just thought about using this type of URL format in the final project for my CA 282 class. It is a four-page project, therefore I cannot guarantee that it can work on a larger set of web pages. I personally think that it can become disorganized and confused once I have a little more web pages by using this method. Here is the code if you want to test it. Basically, it includes all the files inside the main index page based on the value at the last slash of URL, e.x. http://www.example.com/folder/item :

    $currentURL = $_SERVER['REQUEST_URI'];
    $URLpart = explode("/", $currentURL);

    $endURL = $URLpart[sizeof($URLpart)-2];
        switch ($endURL) {
            case 'signup':    //  http://zebra0.com/Chen/final/account/signup/
                include_once 'includes/signup.php';
                break;
            case 'login':     // http://zebra0.com/Chen/final/account/login/
                include_once 'includes/login.php';
                break;
            case 'account':   // http://zebra0.com/Chen/final/account/
                include_once 'includes/account.php';
                break;
            case 'signout':   // http://zebra0.com/Chen/final/account/signout/
                include_once 'includes/signout.php';
                break;
            default:
                include_once 'includes/index.php';
        }

And the index.php file inside each of the folder simply include the main index.php at the root of the project folder. Because of the nature of the included file, I used the dynamic path using PHP $_SERVER array to generate an absolute URL for the links and style sheets instead of the static ones.

$currentURL = $_SERVER['REQUEST_URI'];
$URLpart = explode(“/”, $currentURL);

$endURL = $URLpart[sizeof($URLpart)-2];
switch ($endURL) {
case ‘signup’:
include_once ‘includes/signup.php’;
break;
case ‘login’:
include_once ‘includes/login.php’;
break;
case ‘account’:
include_once ‘includes/account.php’;
break;
case ‘signout’:
include_once ‘includes/signout.php’;
break;
default:
include_once ‘includes/index.php’;
}

0

Ubuntu One Contacts iPhone App (Updated)

UPDATE: Screenshots from iPod Touch uploaded

Ubuntu One is a cloud service similar to DropBox. It syncs files in Ubuntu One folder between computers that are running Ubuntu. Recently I discovered an iPhone app called Ubuntu One Contacts that allows you to sync the contacts on the iPhone with the Ubuntu One server. Apparently it is developed by Canonical, the company behind Ubuntu development. One thing that confuses me is how does it accept to the Apple App Store. As I know, developers need to pay almost one thousand dollars to Apple in order to develop official (non-jailbreak) applications on the iPhone. That’s why I never want to develop iPhone apps, except for the jailbreak community. I will post some screenshots for the Ubuntu One Contacts app from my iPod Touch this evening when I get home because for some reason, my college blocked both DropBox and Ubuntu One website:( Here are some screenshots I took from my iPod Touch: