Yearout’s Portal Project

Live demo

March 9, 2009 at 11:01 am (Uncategorized)

here we go!

Whistles and bells – tweaking the visual style

March 7, 2009 at 10:01 pm (Uncategorized)

Highlighting the active tab

I have had to fix something that has been bugging me for a while now. Whilst my fb:tab code was in a separate procedure so I could call it from any of my pages I could not on the fly change the highlighted tab.

This was rectified by use of some of the code from the smilie demo modified to fit my existing code:

As you can see it takes a parameter of the page it is currently on as well as the title to display

function render_headers2($title,$selected =’home’){

//create a header, tab highlight is done via selected attribute

$header = ” “;
$header .=

    ‘<fb:tabs>’
             .’<fb:tab-item title=”Home” href=”index.php” ‘
                     .’selected=”‘ . ($selected == ‘home’) .’” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/findPlacement.php” title=”Finding a placement” selected=”‘ . ($selected == ‘findPlacement’) . ‘” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/myPlacement.php” title=”My Placement” align=”right” selected=”‘ . ($selected == ‘myPlacement‘) . ‘” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/addBlog.php” title=”Add a Blog Entry” align=”right” selected=”‘ . ($selected == ‘addBlog‘) . ‘” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/testPage.php” title=”Sandbox” align=”right” selected=”‘ . ($selected == ‘testPage’) . ‘” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/timeline.php” title=”Calendar” align=”right” selected=”‘ . ($selected == ‘calendar’) . ‘” />’
        .’<FB:Tab-item href=”http://apps.facebook.com/paulsfirstapp/help.php” title=”Help” align=”right” selected=”‘ . ($selected == ‘help‘) . ‘” />’
    .’</fb:tabs>’;

}

As you can see it uses the ($selected == ‘findPlacement’) to evaulate to TRUE or FALSE and then sets the selected as necessary!

Fixing the Calendar

The easy php calendar that was causing trouble was due to the fact that the HTML code they provide assumes that it can use style sheets implicitly. TO overcome this I simply added an import using php so that the stylesheet is loaded each time the page is called using this line:

and I copied the esstyle to the same directory as the calling page

Limit the result set from a SQL query

In the future I want to code the functionality to see any given blog posts from a user, my current workaround is to query the database using a limit statement selecting the first record and the number of subsequent records to use: ( note the . notation to concatenate)

function get_blogPosts($uid,$from,$to){

…

$query = “SELECT tblBlog.Date,tblBlog.Title,tblBlog.Entry,tblBlog.Tag1,tblBlog.Tag2,tblBlog.Tag3,tblBlog.PostNo FROM YearOutMYSQLDB.tblBlog WHERE userID =”.$uid.” Limit “.$from.”,”.$to.”;”;

…

}

Formatting 3 optional fields

When returning the tag options the user may have only filled in 1, 2 or 3 of the attributes and I was stuck how to show them in a single line without there being the chance of a large gap in the middle.

I fixed this with a quick isset function to append a comma to the field if it contained data:

if (isset ($tag1)){
        $tag1=$tag1.”,”;
    }
     if (isset ($tag2)){
        $tag2=$tag2.”,”;
    }

Passing multiple variables in the URL string using php in Facebook

Another minor issue that caused a headache but with a simple solution:

to add multiple variable simply join them with an ampersand ‘&’

e.g. www.mypageishere.com/index.php?action=addMe&myname=dave

note there is no ? for the second variable

Permalink Leave a Comment

Mother testing

March 4, 2009 at 8:25 pm (Uncategorized)

In the search for a novice facebook user to have a play I recruited my mother:

Feedback:

Cant see the writing on the timeline : this is a picture and will become the proper calendar when I import the calendar code

No way to add a placement from the main page – not clear that you need to click my placement then add…possibly implement an add placement button?

Wall taking up too much of front page…will try to reduce wall size to 5 posts

cant see navigation when scrolled down > jump to to link?

need website link/box on placement details form

error messages unclear? at least not Facebook style

Permalink Leave a Comment

Facebook Styling

March 4, 2009 at 7:06 pm (Design Decision, Technical solution, Things I wish I'd known earlier)

Having had major issues with design looking very unprofessional I stumbled upon this page in the wiki:

http://wiki.developers.facebook.com/index.php/Facebook_Styles

unlike the CSS pages this contains examples that almost work ( I edited out the hardcoded relative urls at lines 108,109 and somewhere else! )

This example will render a funky looking box by defining the CSS it is using within style tags on the page itself:

<?php

$myData= <<<myOutput

<div id=”content” class=”mywidth clearfix”>
<div class=”dashboard_header”>
<div class=”dh_titlebar clearfix”><!– Any your text goes here –></div>
</div>
<div class=”content_no_sidebar”>
<div class=”dev_applications clearfix”>
   <div class=”flag_nav flag_nav_has_icon dev_app_list” id=”dev_app_list”>
    <div class=”flag_nav_container”>
     <!– Start selected nav link –>
     <div class=”flag_nav_item flag_nav_item_selected” id=”24003877170_li”>
      <a href=”http://apps.facebook.com/paulsfirstapp/addBlog.php” onclick=”ajax_func(); return false;” class=”clearfix”>
       <div class=”flag_nav_li_icon” style=”background-image: url(www.facebook.com/images/icons/fbfile.gif);”></div>
       <div class=”flag_nav_li_title”>Your Placement</div>
       <div class=”flag_nav_top_mask”></div>
      </a>
      <span class=”flag_nav_border_hack”> </span>
     </div>
     <!– Unselected link –>
     <div class=”flag_nav_item” id=”29757401366_li”>
      <a href=”#” onclick=”ajax_func(); return false;” class=”clearfix”>
       <div class=”flag_nav_li_icon” style=”background-image: url(www.facebook.com/images/icons/fbfile.gif);”></div>
       <div class=”flag_nav_li_title”>Add blog post</div>
       <div class=”flag_nav_top_mask”></div>
      </a>
      <span class=”flag_nav_border_hack”> </span>
     </div>
     <!– End Nav links –>
    </div>
   </div>
   <div class=”dev_app_infos_shadow”>
    <div class=”dev_app_infos” id=”dev_app_infos”>
     <!– If you decided to use Ajax, Create divs like shown below and show and hide them, so that
          it won’t be necessary to reload them. –>
     <div class=”dev_application app_show” id=”24003877170_info”>
      <div class=”dev_application_header clearfix”>
       <img src=”http://www.facebook.com/secure_image.php?app_id=52167203272&type=logo&r=832“>
       <h3>Header</h3>
       <div id=”app_id_24003877170_submit”>
        <div class=”dev_app_submit”>
         <h6>Subheader</h6>
         <p>Description</p>
        </div>
       </div>
      </div>
      <div class=”dev_application_data”>
       <div class=”dev_app_insights clearfix”>
        <p>This is where your placement details will be</p>
       </div>
       <div class=”dev_application_info”> and here </div>
       <div class=”dev_application_other”>
        <ul class=”actionspro”>
         <li><a href=”http://apps.facebook.com/paulsfirstapp/index.php”>Index</a></li>
         <li><a href=”http://apps.facebook.com/paulsfirstapp/myPlacement.php”>My Placement</a></li>
         <li><a href=”http://apps.facebook.com/paulsfirstapp/”>Action3</a></li>
        </ul>
       </div>
      </div>
      <div class=”dev_app_footer”><a href=”www.facebook.com/”>Action1</a> | <a href=”www.facebook.com/”>Action2</a></div>
     </div>
     <!– End Of Active Page. Other pages go here. –>
    </div>
   </div>
</div>
</div>
</div>
myOutput;

Just ensure you keep the myOutput closing tag on a new single line with no space ( as it is heredoc notation) and you change the links to your own application.

Similarly this is a useful dual column view ( HTML you need to wrap it as above if you want to start putting php variables in there):

<div>
      <table class=”lists” cellspacing=”0″ border=”0″>
           <tr>
                <th>
                     <h4>List 1</h4>
                     <a href=”#”>See All</a>
                </th>
                <th class=”spacer”></th>
                <th>
                     <h4>List 2</h4>
                     <a href=”#”>See All</a>
                </th>
           </tr>
           <tr>
                <td class=”list”>
                     ””’INSERT ITEMS HERE””’
                      <div class=”list_item first clearfix”>
                    Why Ever Not
                    </div>
                    <div class=”list_item clearfix”>
                    You fiend
                    </div>
                </td>
                <td class=”spacer”></td>
                <td class=”list”>
                     ””’INSERT ITEMS HERE””’
                     <div class=”list_item first clearfix”>
                    Hello Dave
                    </div>
                    <div class=”list_item clearfix”>
                    im afraid i can’t do that
                    </div>
                </td>
           </tr>
           <tr>
                <td class=”see_all”><div><a href=”#”>See all List 1′s</a></div></td>
                <td class=”spacer”></td>
                <td class=”see_all”><div><a href=”#”>See all List 2′s</a></div></td>
           </tr>
      </table>
</div>

I am currently integrating them both in functions with variables so I can construct them multiple times on the fly. Sorry about the rushed nature of this entry I wanted to share before I moved on!

Permalink Leave a Comment

Using EasyPhpCalendar with Joyent Facebook Accelerator

February 13, 2009 at 7:34 pm (Technical solution, walkthrough)

Having searched unsuccessfully for a php timeline I stumbled upon Easy PHP Calendar which is a very pretty and full of features.

Running the test script

So to see if it is worth investing in I needed to install it on my Joyent Accelerator, using the test script I found that:

Zend Optimizer: Fail – Zend Optimizer Not Detected
ionCube Loader: Pass

Following the instructions here found the simplest way :http://docs.easyphpcalendar.com/

So IonCube it was, however since Joyent only allow SFTP, the automated installer was of no use. I manually extracted the files using WinRAR, then SFTP’d to the server using WINSCP to copy the calendar directory across ( remembering to force transfer in binary mode).

Now in the instructions it says to go to http://www.YourDomainName.com/calendar/setup/index.php however this throws up an error containing the below:

…”requires the ionCube PHP Loader ioncube_loader_sun_5.2.so to be installed by the site administrator.”

Installing the IonCube loaders

Clearly we need to install the loaders, in the wiki we see this ( clarifications added by me in red:

Download the latest version of the ionCube loaders from http://www.ioncube.com/loaders.php for Solaris (x86).

At the time of writing this it was http://downloads2.ioncube.com/loader_downloads/ioncube_loaders_sun_x86.tar.bz2

Extract the tarball moving the ioncube/ioncube_loader_sun_5.2_ts.so into your ~/php/ directory.

Do this with:

tar xjf ioncube_loaders_sun_x86.tar.bz2
*X means eXtract, J means its a .bz2 and F means the filename follows

You need to copy the files to a newly created the folder in /usr/local/ with :

sudo cp -r ioncube /usr/local/ioncube
*sudo is like “run as administrator” you will need to enter your password. -r means its a directory

Add an extension=ioncube_loader_sun_5.2_ts.so to your websites php.ini and the ioncube loader should load

Open up Virtualmin in your browser, click Webmin >Others>PHP configuration>Edit Manually

paste in extension=ioncube_loader_sun_5.2_ts.so at the bottom of the list of extensions

Restart your apache Server from the main Virtualmin page

Permissions

Try this link again http://www.YourDomainName.com/calendar/setup/index.php and you should now see a EasyPHPCalendar page informing you permissions are incorrect, so change them:

Open a secure putty session
Navigate to calendar folder using cd ~/web/public/calendar
Change permissions with chmod 646 filename

for these files

config.inc.php
license.php
calendar.php

If you find that it it still missing permissions ( check using ls -l ) try again using

chmod g+rw filename
chmod u+rw filename

Try the link again then follow the onscreen instructions to add password and away you go!

Permalink Leave a Comment

Embedding Facebook Markup Language (FBML) inside PHP

February 10, 2009 at 10:31 am (Uncategorized)

Through use of Jesse Fieler’s examples I have found a way to display FMBL inline. This is achieved through the use of heredocs which are multi line strings starting with

<<< Identifier

and terminating with a line containing only the identifier

identifier

to print out FBML simply assign the fbml to a variable using a heredoc then echo it thus:

$headers= <<< headers
        <FB:Tabs>
                          <FB:Tab-item href=’http://apps.facebook.com/paulsfirstapp/index.php’ title=’Home’ selected =’TRUE’/>
                          <FB:Tab-item href=’http://apps.facebook.com/paulsfirstapp/findPlacement.php’ title=’Finding a placement’ />
                          <FB:Tab-item href=’http://apps.facebook.com/paulsfirstapp/myPlacement.php’ title=’My Placement’ align=”right”/>

        </FB:tabs>
headers;

echo $headers;

Et voila you can now output FBML from within your script

Permalink Leave a Comment

4 weeks to go, time to get serious

February 9, 2009 at 12:02 pm (diary)

TODO

Complete placement detail submission procedure
Create generic add, insert, lookup routines for use with the database
Update database tables to reflect what they should be to be fully functional (normalised, containing no personally identifiable data, correct datatypes and meaningful fieldnames)
Find a php timeline that I can use with Facebook and MySQL
Create a method for submitting to this timeline
Create blog database + hopefully learn how to store pictures (using Facebook functionality)
Look into how to submit to blog from profile page … implement if possible else use existing knowledge to do form based submission.
Learn how to format returned results by something more exciting than ECHO or PRINT, specifically to look like Facebook
Learn how to embed FBML within a block of PHP code.
Implement client side validation for submission of details

I am hoping to spend a couple of hours a day doing this from now on, I am finding once I start going I can easily power through 3 hours before by error rate starts creeping up.

Re-engineering the MySQL database:

Field name	Type	Allow nulls?	Key	Default value	Extras
UserID	bigint(20)	No	Primary

JobTitle	varchar(50)	No	None

Location	varchar(50)	No	None

City	varchar(45)	No	None

Description	text	No	None

AllowContact	tinyint(1)	No	None	1

As you can see this is in 4/5th normal form as everything is functionally dependant on the primary field

Adding data to the database using this syntax:

insert INTO tblPlacementDetails

(UserID,JobTitle,Location,City,Description,AllowContact, Company)

VALUES

(***userID****, ‘Support Engineer’, ‘Thames Valley Park’, ‘Reading’,’ Supporting Exchange Servers for Microsoft Premier’, 1, ‘Microsoft’);

By using the long version of the insert statement it will reduce the margin for error if data is entered in the incorrect order or if we add fields in the future. Issues occur when we need to translate this into php variables as we need single quotes around string values, nothing around integers and using the . syntax for adding php variables

$query =”insert INTO tblPlacementDetails

(UserID,JobTitle,Location,City,Description,AllowContact, Company)

VALUES

(“.$uid.”,’”.$jobTitle.”‘,’”.$location.”‘,’”.$city.”‘,’”.$description.”‘,”.$allowContact.”,’”.$company.”‘);”;

Validation:

I am implementing basic validation that checks if a placement already exist for a user before trying to submit a placement, however I need a way to check that all required fields are filled in before posting the form. In asp I would use a simple client side “not null ” check and apparently this is possible using FBJS but I cannot seem to figure out how to use this with the fb:editor form. I might temporarily use serverside validation but this is resource intensive and slower.

Permalink Leave a Comment

Submitting data to MYSQL from Facebook

February 4, 2009 at 9:26 pm (diary)

Now that I can test values, make database connections and retrieve and process query results, one more avenue remains…submitting data!

For this I intend to use a Facebook form element or FB:editor. Particularly I am looking at pg 164 from How To Do Everything: Facebook Applications, a snippet of code below:

//create form
    <fb:editor action=”‘http://apps.facebook.com/paulsfirstapp/myPlacement.php” labelwidth=”100″>
//fields
    <fb:editor-text label=”First Name” firstName=”" value=”"/>
    <fb:editor-text label=”Job Title” name=”jobTitle” value=”"/>
    <fb:editor-text label=”Location” name=”location” value=”"/>
    <fb:editor-custom label=”Placement type”>
//custom field *****KEEP THIS for demonstration purposes?******
        <select name=”state”>
            <option value=”0″ selected>UK</option>
            <option value=”1″>Abroad</option>
        </select>
    </fb:editor-custom>
//buttons
    <fb:editor-buttonset>
        <fb:editor-button value=”OK”/>
        <fb:editor-cancel />
    </fb:editor-buttonset>
</fb:editor>
};

This works fine on its own in a page

but errors out with a 500 if I try to embed it inside that logical test earlier. Easy option would be to have a redirect to the form page if user hasn’t already added their placement. However i want the neater option so I am going to do some research

Permalink 1 Comment

Moving away from a single index.php

February 4, 2009 at 9:23 pm (Uncategorized)

Ready for a short demo tomorrow I am attempting to move the code to read from the database to another page, myplacement.php. I also what to insert my first bit of conditional code to show a different message if you do not have a placement. ( by using the new test accounts)

I successfully moved the code to the new page simply by calling the procedure from there, having of course referenced appinclude.php.

So the logical test was actually very simple :

$query = “SELECT userID FROM YearOutMYSQLDB.tblPlacementDetails WHERE userID =”.$uid.”;”;

//logical test if user submitted details

if (!empty($row[0])){
            echo “found him!”;
            return(1);
    }

else {
        echo “not here”;
        return(0);
    };

Issues I found:

Return needs () and you should not put quotes around what you are returning
TRUE and FALSE are reserved words so I went for 1 & 0

Permalink Leave a Comment

Creating the test users

February 4, 2009 at 6:50 pm (Uncategorized)

To aid in my testing I need to create some test users with different profiles ( remembering user names must not contain numbers, cant have the same name in each box and must have a secure password!) :

Yearout Testone – Full user with application added and a placement submitted to database

Yearout Testtwo -Full user with application added without a placement

Yearout Testthree – Full user without application but friends with 1+2

Yearout Testfour- Full user without application not a friend

I tried to originally use my Gmail account with + (plus)) addressing to provide unique accounts but Facebook does not allow this so I am using the technique of adding additional periods to my Gmail account:

e.g. yearout@gmail.com is functionally equivalent to y.earout@gmail.com or year.out@gmail.com

Finally you just need to visit http://www.facebook.com/developers/become_test_account.php and convert the account to test accounts. These test accounts cannot interact with real world people so you need to create a test network of people to work with, however once nominated as test accounts they will not be removed by Facebook maintenance for being non-valid accounts.

I then needed to add each user to be friends with each other…a slow task as you have to fill in a capcha for each task unless you verify using a mobile phone…supposedly to test if you are a real account…though surely as we are part of the developer network we cant be real!!

Permalink Leave a Comment

Yearout’s Portal Project

Live demo

Whistles and bells – tweaking the visual style

Mother testing

Facebook Styling

Using EasyPhpCalendar with Joyent Facebook Accelerator

Embedding Facebook Markup Language (FBML) inside PHP

4 weeks to go, time to get serious

Submitting data to MYSQL from Facebook

Moving away from a single index.php

Creating the test users

Pages

Archives

Categories

Search

Blogroll

Meta

Follow “Yearout's Portal Project”