[Yii Framework] Use Javascript LinkedIn Api

We have know that linkedin allow developer for access their data with their API service. In this step, i will make a case about “how to create search people with linkedin api”. This is screenshoot my aplication linkedin search.

This is some step we must do for use javascript linkedin api for our website in Yii Framework.

1. Create an application in linkedin web : https://www.linkedin.com/secure/developer. You must complete your data application and then you will get API key and secret key.

2. Create an action in your controller and then make a code :

public function actionLinkedin($username=NULL,$page=0)
{

   if(isset($_POST['username']))
   {  
      if(isset($_POST['page']))
      {
         if(is_numeric($_POST['page']))
             $this->redirect(array('linkedin','username'=>$_POST['username'],'page'=>((int)$_POST['page']-1)));
         else
             $this->redirect(array('linkedin','username'=>$_POST['username'])); 
      }
      else
      {
           $this->redirect(array('linkedin','username'=>$_POST['username']));
      }
   }

    $this->render('linkedin');
 }

3. In your view, make code for your form view :

<h1>LinkedIn Search</h1>
<div id="wrapper">
  <div id="searchbar">
  <?php $form=$this->beginWidget('CActiveForm', array(
     'id'=>'searchform',
     'method'=>'POST'
  )); ?>
      <fieldset class="text ui-widget-content ui-corner-all">
          <label for="name">Keywords : </label>
          <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />

          <label for="name">Page : </label>
          <?php echo CHtml::dropDownList('page','',array(),array('empty'=>'-- Select --')); ?>

          <input type="submit" value="Search">
      </fieldset>

      <div id="buttons"></div>
   <?php $this->endWidget(); ?>
   </div>
   <script type="IN/Login" data-onAuth="loadData"></script>
   <div id="connections"></div>
</div>

4. Call linkedin js with your key :

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
 api_key: your_api_key 
 authorize: true
</script>

5. Create a code in your view, for do some operation for your search linkedin..

<script type="text/javascript"> 

 function loadData()  // function for load search data
 {
   var searchName;
   var halaman;
   locations = [];
   if (window.location.toString().split("&").length > 1) // if in URL have parameter, then use that parameter for keyword search
   {
      searchName = window.location.toString().split("&")[1].split("=")[1].replace("+"," ");
   }
   else 
   {
      searchName = "default_keyword";  // if in URL have not parameter, user this default keyword for search
   }

   if (window.location.toString().split("&").length > 2) // if in URL have a "page" parameter, then user that parameter for page search
   {
      halaman = window.location.toString().split("&")[2].split("=")[1].replace("+"," ");
   }
   else 
   {
      halaman=0; // if in parameter have not parameter page, then default page is "0"
   }

   $("#username").val(searchName) // set username value

   // some url for call API search in linkedin, you must read linkedin api documentation for know about this
   url = "/people-search:" +
     "(people:(id,firstName,lastName,pictureUrl,industry,publicProfileUrl,headline,location,positions))" +
     "?start="+(halaman*20)+"&count=20&keywords=" + searchName 

   // some function from linkedin for do search
   IN.API.Raw(url)
     .result(function(result) {
        $.ajax({
        url: "<?php echo Yii::app()->createUrl('ControllerName/ActionName')?>", // we want to know how many page we get from result searh for use in choice of page. In this case we will use ajax and call our action
        data: "haha=" + result.people._total,  // parameter that sent total people from search result
        success: function(data){  // if success
            $("#page").html(data);  // we set to control page
        }
     });

     // we set some html code for view our result
     halnow=parseInt(halaman)+1;
     profHTML ="Search Result Keyword \""+searchName+"\" page "+halnow;
     profHTML += "<table class=\"maaron\" width=\"100%\"><tr><th>Profile Picture</th><th>Name</th><th>Title at Company</th><th>Company</th><th>Public Profile URL</th><th>View</th></tr>";
     for (var index in result.people.values)
     {
        profile = result.people.values[index] 
        id = profile.id + ":" + profile.firstName + " " + profile.lastName 
        if (profile.pictureUrl)
        {
            profHTML += "<tr><td><img id=\"" + id + "\" border height=30 align=\"left\" src=\"" + profile.pictureUrl + "\"></td>";
        }
        else
        {
            profHTML += "<tr><td><img id=\"" + id + "\" border height=30 align=\"left\" src=\"http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_60x60.png\"></td>"; 
        }
        profHTML += "<td>"+profile.firstName + " " + profile.lastName + "</td>";
        profHTML += "<td>"+profile.headline + "</td>";
        profHTML += "<td>"+ profile.industry + "</td>";
        profHTML += "<td><a href="+ profile.publicProfileUrl +" target='_blank'>Public Link</a></td>";
        profHTML += "<td><a href='?r=search/linkview&id="+profile.id+"'>View</a></td></tr>";
    }
    profHTML+="</table>";
    $("#connections").html(profHTML);
   });
 }

 $("#searchbar").keypress(function(e) // event when user input some keyboard
 {
    if (e.keyCode == 13) { // when user input "enter"
       e.preventDefault();
       if ($("#username").val() != "") 
       {
         loadData();
         return false;
       }
    }
  });
</script>

6. Because we have some action that call AJAX for set the page choice, then we must create that action. So in your controller, create an action like this :

public function actionTarik()
 {
   $haha = $_GET["haha"];
   $totalhalaman=$haha/20+1;
   echo "<option>-- Select --</option>";
   for($i=1;$i<=$totalhalaman;++$i)
   {
       echo '<option value='.$i.'>'.$i.'</option>';
   }
 }

Finsihed.. Hope help you..😀
Sorry for my bad English..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: