w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home API's
Tutorial about how to Create Jobs portal using Indeed API

Tutorial about how to Create Jobs portal using Indeed API

W3TWEAKS by W3TWEAKS
October 1, 2019
in API's
0

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

You might also like

Login the App using facebook oauth in PHP

Login the App using facebook oauth in PHP

November 29, 2019
3.3k
Create Facebook Messenger Chatbot using Node Js

Create Facebook Messenger Chatbot using Node Js

October 1, 2019
3.2k

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. The 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

Tags: APIdemodownloadindeedjobsoptiontutorial
Previous Post

Create Facebook Messenger Chatbot using Node Js

Next Post

Enable and Disable drop down box using angularjs ngDisabled

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Login the App using facebook oauth in PHP

Login the App using facebook oauth in PHP

by W3TWEAKS
November 29, 2019
0
3.3k

In my old articles, we see integration about how to login the apps using social networking in PHP like Twitter,...

Create Facebook Messenger Chatbot using Node Js

Create Facebook Messenger Chatbot using Node Js

by Urmil Shah
October 1, 2019
0
3.2k

Facebook launched the Messenger Platform, giving developers the ability to create bots that could have a conversation with people on...

Twitter oAuth login api using php

Twitter oAuth login api using php

by Vetrivel Pandian
November 13, 2019
0
3.3k

Everyone have account in social networking like twitter, facebook, linkedin etc. In previous article we see google and linkedin login....

How to integrate the login using Google+ plus API in PHP

How to integrate the login using Google+ plus API in PHP

by Vetrivel Pandian
November 29, 2019
0
3.3k

In the previous post we have already see how to integrate the LinkedIn Login with API and now make for...

Next Post
Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube

Welcome Back!

Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In