Posts

display-facebook-photos-on-website-1

How To Display Facebook Page Photo Albums on Website Using PHP?

Let's code!

Do you have a photo manager on your website? Do you upload photos on your Facebook page as well?

If your answer is both YES, you're wasting a lot of time managing your brand's photos online.

What if there's a way to upload your photo albums ONCE, and then let it appear both on your Website and Facebook page?

Will you be happy saving your precious time?

Read more

Home Android

A Happy Developer, Android + CakePHP + jQuery

Hi there! Well, I don't have much posts few weeks ago since I'm kinda busy working on a project. I got good news and not-so-bad news, haha! This past few weeks, I've been working on an Android application which makes me so happy (though at first, kinda stressed, since I'm a beginner on this). Yes, it has been my dream to be a Java programmer since college. I can't believe that now, one of my dreams is coming true (Since Android is Java based).
A Happy Developer, Android + CakePHP + jQuery
There's more :)

I can say that now, I'm comfortable with developing an Android application. It is total object oriented, powerful, has lots of possibilities, useful, extensible, and almost anything you can think of. It can be integrated with other technologies like Web App Development (which is also what I'm working on now). Most of all, it is continuously developed by increasing hundreds of thousands of other developers around the world (I'm happy and grateful to be one of them). Another great thing is that, there are over 400,000 Android devices were activated everyday.
I'm gonna tell you something about my current project. The Android application is run in a tablet device (I have Samsung Galaxy Tab, Android Froyo for now. But I'm delighted by it.). The Android App I'm doing is some sort of a content management system that syncs data from an encrypted XML stream. Those data include images, slideshows, flash games, videos, audios, websites, survey forms, sales data, etc. The XML stream is of course generated dynamically by a Web based content management system which is developed with some web development technologies like HTML5CakePHP and jQuery
Sounds simple right? But like any other software project, it will be from simple to complex. We will discover more about the client's business logic. The user of this application is in the retail industry. The Android App will be installed in tablet devices in different parts of the country (where they have market places).
Here's the not-so-bad news: The web based CMS is developed by other programmer. And so now, it is assigned to be developed by me. So I got a lot of work to do. I thought I will concentrate on Android development, but it seemed like web app development always haunt me haha! Anyway the good news there is that, I'll have a lot of knowledge to share with you guys and of course the open-source community.
As of now, I'm the only programmer of this project. Good thing is I'm with a Systems Analyst who helps a lot. But the team will expand sooner or later. :)
Just a piece of advice, to those who want to learn language frameworks such as CakePHP (for PHP) and jQuery (for JavaScript), you have to learn first its basic or native language: PHP and JavaScript. This will give you great development advantage. :)
And oh, I got a late special announcement (or at-least for me), as you've noticed, you accessed this blog in a top level domain: https://www.codeofaninja.com which is before http://www.codeofaninja.blogspot.com. It's my dream to own a ".com" website before, and now, it just came true last June 2, 2011. I registered https://www.codeofaninja.com at Go Daddy.
I'm also so happy to see that there are increasing number of traffic on this site (based on this blog's google analytics account). It makes my goal to help and share knowledge to other people in different parts of the world.

Home Facebook

Social Network Integration

Social Network Integration
Familiar huh?

Facebook? Twitter? You are probably very familiar or even addicted to them. To date, it is almost impossible for people who use the internet to miss an account with them. They are free, easy to use and lets you connect with your friends or people no matter where on earth they are. Wikipedia defines social networking service as “…an online service, platform, or site that focuses on building and reflecting of social networks or social relations among people, e.g., who share interests and/or activities”. There are so many social networking service sites out there and two of the most popular includes facebook and twitter.

Most internet users are visiting their facebook account everyday. It just shows that the world has gone social. When you log in to your facebook account, you can check and see how many of your friends are online. Large number of people are getting online every day and make it as essential part of their life. They connect with each other, playing games, sharing activities, interests, etc. with their network of friends. They join conversations and discover contents that can be of meaningful value for them. The social network is active and authentic since it is made up of real people - and these people can be the consumers for your business.

With that said, we can conclude that it is beneficial for businesses to integrate social networks, such as facebook and twitter, to their web presence or websites. Once a user like, recommend or tweet your website, it will be shared to their network of friends and this personal recommendation is a powerful kind of endorsement. Your website will have more opportunity to be visited that offers your products and/or services to be known to customers.

Maybe you are aware of how many people can find your facebook page or tweets? According to Wikipedia, facebook now has over 600 million active users all over the world while twitter has 200 million (as of January 2011). It’s now a privilege for your business to join these social networking sites to keep in touch of your customers and get the edge by integrating it to your website.


I have the following tutorials related to Social Network Integration:

Home jQuery

Including Google Hosted jQuery and other JS Libraries

jquery-tutorial

When I'm testing my JavaScript with jQuery, sometimes, I feel lazy to locate on my hard disk where is that jQuery library file.

At the same time, I don't want to download it on their website. So I thought of hosting it on a server and just specify its URL as a source of my <script> tag.

But then I found out that Google is hosting different JavaScript library for free. So now, I can access the library just by specifying the URL of Google-hosted jQuery library.

Google hosts several open-source library which includes:

Chrome Frame

Dojo

Ext Core

jQuery

jQuery UI

MooTools

Prototype

script_aculo_us

SWFObject

Yahoo! User Interface Library (YUI)

WebFont Loader

So now, here's how I include a jQuery library on my scripts.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

You may also use google.load function if you want. But you have to get your own API key. So I prefer accessing it in direct path (script above).

Here's a simple slide and toggle demo, with jQuery hosted by google.

Well actually, jQuery site also provide their script.

<script src="http://code.jquery.com/jquery-latest.js"></script>

There are many debates whether to host your jQuery on Google or not. You may also read this article and its comments.

Home jQuery

Add or Remove File Field in jQuery

Hi guys! Today I’m going to share about multiple file upload in PHP.

We’ll be using jQuery to add or remove new file fields.

This one is useful when your system has multiple email attachment or document management feature.

Home>jQuery Add or Remove File Field Then Upload File in PHP and jQuery

Multiple file upload

This code contains the form with the file field, add and remove button and of course, the upload button. jQuery is used for its dynamic adding or removing of file fields.

<html>
<head>
     <title>How To Add or Remove File Field Then Upload File in PHP and jQuery</title>
</head>
<body>
<?php
isset($_REQUEST['action']) ? $action = $_REQUEST['action'] : $action = '';

if( $action == 'uploadfiles' ){
     //define where the files will be uploaded
     $upload_directory = 'uploads/';
     $x=0;  
          echo "</div>Uploaded Files:</div>";
          foreach ( $_FILES['data']['name'] AS $key => $value ){  
               echo "<div>{$value}</div>";
               //Move file to server directory
               move_uploaded_file($_FILES["data"]["tmp_name"][$x], $upload_directory . $_FILES["data"]["name"][$x]);
               $x++;  
          }
}
?>
     <form enctype="multipart/form-data" action="#" method="POST">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
               <div>Choose a file to upload:</div>
                    <div id="text">
                         <div ><input name="data[]" type="file" /></div>
                         <!-- This is where the new file field will appear -->
                    </div>
                    <input type="button" id="add-file-field" name="add" value="Add input field" />
                    <input type='hidden' name="action" value="uploadfiles" />
                    <input type="submit" value="Upload File" />
     </form>



     <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
     <script type='text/javascript'>
          $(document).ready(function(){
                // This will add new input field
               $("#add-file-field").click(function(){
                    $("#text").append("<div class='added-field'><input name='data[]' type='file' /><input type='button' class='remove-btn' value='Remove Field' /></div>");
               });
               // The live function binds elements which are added to the DOM at later time
               // So the newly added field can be removed too
               $(".remove-btn").live('click',function() {
                    $(this).parent().remove();
               });
          });
     </script>
</body>
</html>

Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!

Thank you for learning from our post about: Add or Remove File Field in jQuery.

Home jQuery

Check or Uncheck All Checkboxes with jQuery + Show Checked with PHP

Today, we will learn how to check or uncheck all checkboxes with jQuery. We will show all selected checkboxes using PHP as well.

When you have a list of data, sometimes, you want to easily check all or uncheck all of them. And then process those selected/checked data by getting their values first.

Today we’re going to do something like what we’re using in GMail or YahooMail.

  1. Check or Uncheck All Checkboxes in a form (using jQuery).
  2. Get the selected checkboxes values when the form is submitted (using PHP).

Check or Uncheck Checkboxes with jQuery And Get Selected with PHP

In case you want instant testing you may download the code or see the result in live demo:

Step 1: Create index.html and put the following code. The code below will show an HTML form with checkbox options.

<html>
	<head>
		<title>Check and Uncheck All</title>
	</head>
<body>

<div style='margin: 10px'><input type='checkbox' id='checker' />Check/Uncheck All</div>

<form action='index.php' method='post'>
<div style='margin: 10px'>
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Happy' />Happy
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Sad' />Sad
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Excited' />Excited
	<input type='checkbox' name='emotions[]' class='checkboxes' value='Scared' />Scared
</div>
<div style='margin: 10px'>
	<input type='hidden' name='action' value='get_values' />
	<input type='submit' value='Submit Selected' />
</div>
<div style='margin: 10px'>
<?php
// PHP code will be here
?>
</div>
</form>

<!-- jQuery script will be here -->

</body>
</html>

Step 2: Replace "PHP code will be here" line above with the following code. The code below will show you the selected checkbox options when the form was submitted.

//Defining indexes
empty($_POST['action']) ? $action = '' : $action = $_POST['action'];
empty($_POST['emotions']) ? $emotions = '' : $emotions = $_POST['emotions'];

if( $action == 'get_values'){
	if(!empty($emotions)){ //check if user ticked any checkbox
		foreach($emotions as $keys => $values){
			echo "<div>$values</div>";
		}
	}else{
		echo "Please select emotions.";
	}
}

Step 3: Replace "jQuery script will be here" line above with the following code. The code below will check or un-check the checkbox options in the form.

<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
	$(document).ready(function() {
		$( '#checker' ).click(function(){
			$( '.checkboxes' ).attr( 'checked', $( this ).is( ':checked' ) );
		});
	});
</script>

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Related Tutorials

Thank you for learning from our post about: Check or Uncheck Checkboxes with jQuery And Get Selected with PHP.

Basic Structure Of An HTML5 Document

Someone asked me how to make a webpage. An HTML document is the most basic thing in making a webpage. So here's its basic structure.

Basic Structure Of An HTML Document
The most basic of the web?


Step 1: Create an index.html file. It should have the following codes.

HTML

<html>
     <head>
          <title><!--here is where your page title goes--></title>
         <!--here is where your css code/link goes-->
     </head>
<body>

     <!-- here is where your page content goes -->
     
     Just a sample content

     <!-- here is where your javascript goes
         (before, it is usually in the <head> section, but for better page
         performance, JavaScripts are coded at the bottom part of the page***.)
    -->
</body></html>

You should see "Just a sample content" text in your web browser when you run this. Then for HTML5, the same principles apply, it's just there are more on it.

HTML5

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Your Website</title>
    </head>
<body>

    <header>
        <nav>
            <ul>
                <li>Menu Option 1</li>
                <li>Menu Option 2</li>
            </ul>
        </nav>
    </header>

    <section>

    <article>
        <header>
            <h2>Content Title</h2>
            <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
        </header>
        <p>Some content of the article here.</p>
    </article>

    </section>

    <aside>
        <h2>The Blogger</h2>
        <p>This is your side bar. You can add your information or links here.</p>
    </aside>

    <footer>
        <p>Copyright 2013 - Your name</p>
    </footer>

</body>
</html>

Beginners may need this one. See more at W3Schools. Latest and more advanced HTML5. Thanks for reading! :)


***Google Groups, Yahoo Research, StackOverflow
Home jQuery

How To Use jQuery Table Sorter With A Database

Hi there! Today we’re going to do a script that:

  1. Get list of data from a database.
  2. Arrange those data into a table, so that
  3. It will be sortable (without page refresh) once you click its header.

How To Use Table Sorter With A Database

All of these are done with the help of TableSorter. It is a jQuery plugin that lets you sort your tables without refreshing page.

tablesorter
 

Flexible client-side table sorting

This one is beautiful when you want to sort hundreds of table rows really quick. A thousand table rows could be sorted a bit slower, but still effective.

Step 1: Download tablesorter and place it inside your js/ directory
Step 2: You can also download a theme here (I used Blue Skin) for your table.
Step 3: Create your database table. You could have this one, just add more records if you want:

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(32) NOT NULL,
  `lastname` varchar(32) NOT NULL,
  `email` varchar(32) NOT NULL,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `firstname`, `lastname`, `email`, `username`, `password`) VALUES
(1, 'John', 'Doe', '[email protected]', 'johnny', 'john'),
(2, 'Albert', 'Minston', '[email protected]', 'albert', 'albert');

Step 4: Create your database configuration file (i got config_open_db.php) and index.php file. Place the following codes inside the index.php file.

<html>
   <head>
        <title>How To Use Table Sorter With A Database</title>
        <!-- we will use the 'blue' theme -->
        <link href='blue/style.css' rel='stylesheet' type='text/css' />
   </head>
<body>
<?php
//connect to database
include 'config_open_db.php';

//query the database
$sql = "select * from users";
$rs = mysql_query ( $sql );

//construct the table with id 'your-table'
echo "<table id='your-table' class='tablesorter'>";
    echo "<thead>"; //thead tag is required for using tablesorter
        echo "<tr>";
            echo "<th>Lastname";
            echo "<th>Firstname";
            echo "<th>Email";
            echo "<th>Username";
            echo "<th>Password";
        echo "</tr>";
    echo "</thead>";
echo "<tbody>"; //tbody tag is required for using tablesorter

//looping through retrieved data
while ( $row = mysql_fetch_array ( $rs ) ){
    extract ( $row );
    echo "<tr>";
        echo "<td>$lastname</td>";
        echo "<td>$firstname</td>";
        echo "<td>$email</td>";
        echo "<td>$username</td>";
        echo "<td>******</td>";
    echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
    
<!-- include jQuery library and table sorter plugin -->
<script type='text/javascript' src='js/tablesorter/jquery-latest.js'>
</script>
<script type='text/javascript' src='js/tablesorter/jquery.tablesorter.min.js'>
</script>

<script type='text/javascript'>
    $(document).ready(function() { 
        $("#your-table").tablesorter({ 
            //for example we want to disable the 
            //password column (5th column) from sorting
            //we will specify '4' since it was indexed
            //(count starts at '0')
            //and set its property to 'false'
            headers: { 
                4: {    
                    sorter: false 
                }
            }
        }); 
    });
</script>
</body>
</html>

Hope this helps. :)

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

Thank you for learning from our post about: How To Use jQuery Table Sorter With A Database.