Create job portal using Indeed API

This tutorial will explain how to create the job seraching portal using Indeed API with advanced search and autocomplete for seraching jobs and cities.

Create Indeed Publisher Account

Before starting our Indeed API tutorial, we have to have the publisher account and ID to use the Indeed api jobs. Create the Indeed publisher account. Once you created the account you will be having your publisher ID from this page https://ads.indeed.com/jobroll/xmlfeed

Let's start our Indeed API tutorial

I used angular js to render the Job listing and find the folder structure below.

Follow the above folder structure to work this tutorial.

Let's include all dependancy files in Index.html

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/blog-home.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="js/main.js"></script>
<script src="js/directives/navbar.js"></script>
<script src="js/directives/search.js"></script>
<script src="js/directives/aside.js"></script>
<script src="js/directives/jobResult.js"></script>
<script src="js/controller/main.js"></script>
<script src="js/services/services.js"></script>

Include the html code inside <body></body> in index.html file

<nav-bar></nav-bar>
<!-- Page Content -->
<div class="container">
    <search-box></search-box>
    <div class="row">
        <job-result></job-result>
    </div>
    <!-- /.row -->

    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; Your Website 2014</p>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </footer>

</div>
<!-- /.container -->

Open main.js from js folder

Copy the below code and past the code in main.js file

var app = angular.module('indeedApi', ['ui.router']);

Open main.js from js->controller folder

Copy the below code and past in main.js file

app.controller('mainController', function($scope,mainService,$location) {
    $scope.pageSize = 20;
    $scope.indeedData = [];
    $scope.totalPages = "";
    $scope.pages = [];
    $scope.sortBy = (mainService.getParameterByName("sort") == "")?"relevance":mainService.getParameterByName("sort");
    $scope.jt = (mainService.getParameterByName("jt") == "")?"all":mainService.getParameterByName("jt");
    $scope.fromage = (mainService.getParameterByName("fromage") == "")?"any":mainService.getParameterByName("fromage");
    $scope.radius = (mainService.getParameterByName("radius") == "")?25:mainService.getParameterByName("radius");

    $scope.removeParam = function(key, sourceURL) {
        var rtn = sourceURL.split("?")[0],
            param,
            params_arr = [],
            queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
        if (queryString !== "") {
            params_arr = queryString.split("&");
            for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                param = params_arr[i].split("=")[0];
                if (param === key) {
                    params_arr.splice(i, 1);
                }
            }
            rtn = rtn + "?" + params_arr.join("&");
        };
        return rtn;
    };

    var limit = mainService.getParameterByName("limit"),
        page = parseInt(mainService.getParameterByName("page"));
    $scope.limit = (limit == "")?10:parseInt(limit);
    $scope.jobname = mainService.getParameterByName("q");
    $scope.location = mainService.getParameterByName("l");
    $scope.page = (isFinite(page))?page:1;
    $scope.start = ($scope.page - 1) * $scope.limit;
    $scope.end = $scope.start + $scope.limit;
    mainService.indeedApiRequest($scope).then(function(data, $sce){
        $scope.indeedData = data.results;
        GetPager(data.totalResults, $scope.page, $scope.pageSize)
    });
    var myObject = {
        "q": $scope.jobname,
        "l": $scope.location
    };
    $scope.curentUrl = $.param( myObject, true );
    $scope.pagerUrl = $scope.removeParam("page",$location.absUrl());

    var title = (($scope.jobname != '')?$scope.jobname:"Jobs")+ " " + (($scope.location != '')?("in "+$scope.location):" Jobs")

    $scope.title = title;

    function GetPager(totalItems, currentPage, pageSize) {
        var pagination = "";
        // default to first page
        currentPage = currentPage || 1;
 
        // default page size is 10
        pageSize = pageSize || 10;
 
        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);
 
        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }
 
        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
 
        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);
        var active = "";

        $scope.pages = pages;
        $scope.currentPage = currentPage;
        $scope.totalItems = totalItems;
        $scope.totalPages = totalPages;
    };

    $scope.absUrl = $location.absUrl();

}).filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

Open directive folder from js folder

Copy the below code and past to aside.js file. This file will show the indeed jobs filter options.

(function(){
    app.directive("aSide",function(){
        return{
            templateUrl:"templates/aside.html",
            link:function(elem,attrs){
            }
        }
    });
})();

Copy the below code and past to jobResult.js. This file will list all Indeed API jobs.

(function(){
    app.directive("jobResult",function(){
        return{
            templateUrl:"templates/home.html",
            link:function(elem,attrs){
            }
        }
    });
})();

Copy the below code and past to navbar.js. will show top navigation bar

(function(){
    app.directive("navBar",function(){
        return{
            templateUrl:"templates/navigation.html",
            link:function(elem,attrs){
            }
        }
    });
})();

Copy the below code and past to search.js. search.js file will include search input box and input box will give jobs suggestion while user type the text in the input box and for cities it will give suggestion to select the city.

(function(){
    app.directive("searchBox",function(){
        return{
            templateUrl:"templates/searchBox.html",
            link:function(scope,elem,attrs){
            	$(function() {
					callAutocomplete("jobname","what_ac");
					callAutocomplete("location","where_ac");
					function callAutocomplete(id,find_what){
				   		var param;
				   		if(find_what == "what_ac")
				   			param = "what=true&from=advancedsearch&tk=&cb=what_ac";
				   		else if(find_what == "where_ac")
				   			param = "from=advancedsearch&tk=&cb=where_ac";

				   		$( "#"+id ).autocomplete({
						    html:true,
						    source: function( request, response ) {
						        $.ajax({
						            type: "POST",
						            url: "https://www.indeed.com/rpc/suggest?"+param,
						            dataType: 'jsonp',
						            jsonpCallback: find_what,
						            data: $.extend({
						                q: request.term
						            }, {  }),
						            success: function(data){
						                response( data[1]);
						            }
						        });
						    },
						    select: function( event, ui ) {
						        var lable = ui.item.label;
						        $( this ).val(lable.replace(/<\/?[^>]+(>|$)/g, ""));
						        return false;
						    },
						    focus: function( event, ui ) {
						    	var lable = ui.item.label;
								$( this ).val(lable.replace(/<\/?[^>]+(>|$)/g, ""));
								return false;
							}
						}).autocomplete( "instance" )._renderItem = function( ul, item ) {
					        return $( "<li></li>" )
					            .data( "item.autocomplete", item )
					            .append( "<a>" + item.label + "</a>" )
					            .appendTo( ul );
					   };
				   };
				});
            }
        }
    });
})();

Open js->services folder

Copy the below code and past to services.js file. This file will request to "jsonRequest.php" which will call the indeed api call to get all jobs based on the user selection. You will find the "jsonRequest.php" file functionality below.

(function(){
	app.service('mainService', function($http, $q) {

	    var getParameterByName = function (name) {
		   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		   var regexS = "[\\?&]" + name + "=([^&#]*)";
		   var regex = new RegExp(regexS);
		   var results = regex.exec(window.location.href);
		   if (results == null) return "";
		   else return decodeURIComponent(results[1].replace(/\+/g, " "));
		};
		var video = $(location).attr('href').split('v=')[1];
	    var indeedApi = function(scope){
	    	var deferred = $q.defer();

	    	$http({
				url: 'jsonRequest.php', 
				method: "GET",
				params: {
	                q: scope.jobname,
	                l: scope.location,
	                radius: 50,
	                limit:scope.limit,
	                sort: scope.sortBy,
	                co: "United States",
	                start: scope.start,
	                end: scope.end,
	                jt: scope.jt,
	                fromage: scope.fromage,
	                radius:scope.radius
	            }
			}).then(function(response) {
			    deferred.resolve(response.data);
			}, function(x) {
			    // Request error
			});
 
        	return deferred.promise;
	    };

	    return {
	    	"indeedApiRequest":indeedApi,
	    	"getParameterByName":getParameterByName
	    }
	});
})();

Open jsonRequest.php

Cope the below code and past to the php file. this file will call Indeed api request to get jobs listing

<?php
	$q = $_GET['q'];
	$l = $_GET['l'];
	$limit = $_GET['limit'];
	$end = $_GET['end'];
	$start = $_GET['start'];
	$sort = $_GET['sort'];
	$jt = $_GET['jt'];
	$fromage = $_GET['fromage'];
	$radius = $_GET['radius'];

	$data = array(
		'publisher' => '7778623931867371',
	    'v' => 2,
	    'format' => 'json',
	    'q' => $_GET['q'],
	    'l' => $_GET['l'],
	    'jt' => $jt,
	    'fromage' => $fromage,
	    'limit' => $limit,
	    'start' => $start,
	    'end' => $end,
		'radius' => $radius,
	    'sort' => $sort,
	    'highlight' => 1,
	    'filter' => 1,
	    'latlong' => 1,
	    'co' => 'United States'
	);

    $param = http_build_query( $data ) . "\n";


	$url = 'http://api.indeed.com/ads/apisearch?'.$param;
	//print($url);

	header('Content-type: application/json');
	$obj = file_get_contents($url,true);
	echo $obj;
?>
Download Demo

Advertisement

Google Matched Content...