Jika di part 1, telah dijelaskan mengenai pembuatan dari API Twitter dari sisi Twitter nya. Selanjutnya, di bagian ini kita akan membuat tampilan disisi kita atau dengan kata lain kita akan membuat view dari API Twitter yang akan dihasilkan (JSON yang dihasilkan).

Silahkan buat file index.php

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Septian Dwi Anugrah">

    <title>Search Twitter API</title>

    <!-- Bootstrap Core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">
</head>
<body>
    <div class="row">
      <div class="navbar navbar-default">
        <div class="container">

        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <img src="assets/img/logo.png" class="pull-left" id="heading" />
            <div class="row">
              <div id="search" class="col-md-12">
                  <div class="form-group col-md-12">
                    <div class="col-md-8">
                      <input id="searchKeyWord" placeholder="Enter Keyword or #Hashtag" type="text">
                    </div>
                    <div class="col-md-2">
                      <select id="count" class="col-xs-12 col-md-12 text-center" name="count">
                        <option value="10">10</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                      </select>
                    </div>
                    <div class="col-md-2">
                      <button type="submit" id="btnSearch" class="btn btn-primary pull-right col-md-10 col-lg-10 col-xs-12 text-center">Search</button>
                    </div>
                  </div>
                  <span class="text-center col-xs-12 col-lg-12 col-md-12" id="loading">
                    
                  </span>
              </div>
            </div>
            <br>
            <br>
          </div>
        </div>
      </div>
    </div>
    
<div class="section">
    <div class="container">
      <div style="overflow: auto;" class="row col-xs-12">
      
      <div class="clearfix"></div>
      <table id="theData" class="tg">
        <thead>

        </thead>
        <tbody id="showTable">
        <!-- show table result -->
        </tbody>
      </table>
      </div>
    </div>
  </div>

  <script src="assets/js/jquery.js" type="text/javascript"></script>
  <script src="assets/js/autolink-min.js" type="text/javascript"></script>
  <script type="text/javascript">
    
  $(document).ready(function(){

    $('#btnSearch').click(function(){

        $('#export').hide();
        $('#loading').empty();
        $('#loading').append('Loading...');
        $('#showTable tr').remove();

        var data = {
            keyword: $('#searchKeyWord').val(),
            count: $('#count').val()
        }      

        $.post("api/index.php", data, function(data, status) {

            if(status == 'success' && data.statuses.length > 0){

                $('#export').show();
                $('#loading').empty();
                $('#showTable').append('<tr><th>Name</th><th>Username</th><th>Profile Image</th><th>Tweet</th><th>Location</th><th>Followers Count</th><th>Friends Count</th><th>Time Zone</th></tr>');
               
                $.each( data.statuses, function(i, item){
                  $('#showTable').append('<tr><td>'+item.user.name+'</td>'+'<td><a href="https://twitter.com/'+item.user.screen_name+'">'+item.user.screen_name+'</a></td>'+'<td class="text-center"><img src="'+item.user.profile_image_url+'" /></td>'+'<td>'+item.text.autoLink({target: "_blank"})+'</td>'+'<td>'+item.user.location+'</td><td class="text-center">'+item.user.followers_count+'</td><td class="text-center">'+item.user.friends_count+'</td><td>'+item.user.time_zone+'</td></tr>').hide().fadeIn();
                });

            } 

            else if(status == 'success' && data.statuses.length <= 0) {

              $('#loading').empty();
              $('#loading').append('Not Available!');

            }

            else {

                console.log('ERROR!');
                alert('ERROR!');
            
            }

        });

    });    

  });

  </script>

  </body>

</html>

Penjelasan file index.php

Pada baris berikut

$.post("api/index.php", data, function(data, status) {

Merupakan fungsi jQuery untuk melakukan post ajax dan meminta callback di URL “api/index.php” yang selanjutnya akan ditampilkan berupa Objek Javascript, nah setelah proses nya berhasil akan masuk ke proses berikutnya dan mengeksekusi baris berikutnya.

if(status == 'success' && data.statuses.length > 0){

                $('#export').show();
                $('#loading').empty();
                $('#showTable').append('


 
    Name
  
  
 
    Username
  
  
 
    Profile Image
  
  
 
    Tweet
  
  
 
    Location
  
  
 
    Followers Count
  
  
 
    Friends Count
  
  
 
    Time Zone
  
');
               
                $.each( data.statuses, function(i, item){
                  $('#showTable').append('


 
    '+item.user.name+'
  '+'
  
 
    <a href="https://twitter.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);"+item.user.screen_name+'">'+item.user.screen_name+'</a>
  '+'
  
 
    
  '+'
  
 
    '+item.text.autoLink({target: "_blank"})+'
  '+'
  
 
    '+item.user.location+'
  
  
 
    '+item.user.followers_count+'
  
  
 
    '+item.user.friends_count+'
  
  
 
    '+item.user.time_zone+'
  
').hide().fadeIn();
                });

            } 

Jika data berhasil maka data akan di tampilkan di atribut HTML

        
        

Jika proses berhasil namun data-nya tidak tersedia akan masuk ke dalam proses selanjutnya

else if(status == 'success' && data.statuses.length <= 0) {

              $('#loading').empty();
              $('#loading').append('Not Available!');

            }

Proses tersebut akan mengosongkan atribut html yang memiliki id=”loading” dan memasukan text Not Available pada atribut HTML tersebut. Namun jika semua kondisi tidak terpenuhi atau terjadi error sewaktu proses maka akan masuk kedalam kondisi yang terakhir

else {

                console.log('ERROR!');
                alert('ERROR!');
            
            }

Kondisi diatas akan menampilkan teks error yang berupa alert di dalam browser dan menampilkan log error di browser

Penjelasan file api/index.php

Silahakn buat file index.php ini didalam API CLASS Twitter yang sudah kita download dihttps://github.com/abraham/twitteroauth

<?php
	require "autoload.php";
	require "../config/config.php";
	use Abraham\TwitterOAuth\TwitterOAuth;

	$keyword = ( $_SERVER['REQUEST_METHOD'] == 'POST' ) ? $_POST['keyword'] : "bandung";
	$count 	 = ( $_SERVER['REQUEST_METHOD'] == 'POST' ) ? $_POST['count'] : 10;				
	$connection = new TwitterOAuth($config['CONSUMER_KEY'], $config['CONSUMER_SECRET'], $config['ACCESS_TOKEN'], $config['ACCESS_TOKEN_SECRET']);

	// UNTUK MENCARI HASHTAG BISA MENGGUNAKAN TWITTER BY SEARCH

	$content = $connection->get("search/tweets", ["q" => $keyword, "count" => $count]);

	header('Content-Type: application/json');
	echo json_encode($content); die;

File ini berfungsi untuk menampilkan data yang diperoleh dari API Twitter yang telah kita buat sebelumnya. Variable $keyword berupa kondisi jika ada data yang di pos melalui input text maka akan menggunakan data POST tersebut dan jika tidak maka akan menggunakan nilai default dari variable tersebut yaitu berupa string bandung dan akan menampilkan tweet yang ada kata2 “bandung” . Setelah itu variable $count akan mengambil data POST yang kita post kan melalui atribut select HTML dan jika tidak ada data yang di pos kan akan mengambil nilai default dari variable tersebut yaitu 10.

Selanjutnya variable $connection akan mengeksekusi class TwitterOAuth dengan parameter CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN dan ACCESS_TOKEN_SECRET yang sudah kita set sebelumnya.

Terakhir untuk variable $content akan mengeksekusi METHOD get dari CLASS TwitterOAuth yang sudah kita jadikan variable $connection sebelumnya. Setelah itu menampilkan data tersebut ke dalam JSON dengan menggunakan fungsi PHP json_encode.

Silahkan download assets nya disini

DOWNLOAD ASSETS

Ohh ya untuk struktur tree folder nya seperti berikut ya :)

.
├── api
│   ├── autoload.php
│   ├── composer.json
│   ├── index.php
│   ├── LICENSE.md
│   ├── phpmd.xml
│   ├── phpunit.xml
│   ├── README.md
│   ├── src
│   │   ├── cacert.pem
│   │   ├── Config.php
│   │   ├── Consumer.php
│   │   ├── HmacSha1.php
│   │   ├── Request.php
│   │   ├── Response.php
│   │   ├── SignatureMethod.php
│   │   ├── Token.php
│   │   ├── TwitterOAuthException.php
│   │   ├── TwitterOAuth.php
│   │   ├── Util
│   │   │   └── JsonDecoder.php
│   │   └── Util.php
│   └── tests
│       ├── AbstractSignatureMethodTest.php
│       ├── bootstrap.php
│       ├── ConsumerTest.php
│       ├── HmacSha1Test.php
│       ├── kitten.jpg
│       ├── sample_env
│       ├── TokenTest.php
│       ├── TwitterOAuthTest.php
│       ├── Util
│       │   └── JsonDecoderTest.php
│       └── video.mp4
├── assets
│   ├── css
│   │   ├── bootstrap.min.css
│   │   └── styles.css
│   ├── img
│   │   └── logo.png
│   └── js
│       ├── autolink-min.js
│       ├── bootstrap.min.js
│       └── jquery.js
├── config
│   └── config.php
├── index.php

Folder api berisi API TWITTER yang sudah kita download di github tadi

Gimana? sampai disini ada pertanyaan atau masih bingung? :). Silahkan komentar dibawah ya ⤧  Next post API Programming Studi Kasus Twitter Search Part 1 ⤧  Previous post Memperbaiki Cross-Origin Request Blocked: IONIC