How to create Wikipedia Search Panel? JavaScript + Php + REST API

This is tutorials is based on core JavaScript, PHP and Wikipedia rest APIs. The tutorial is simple, easy and easily get the concept of combining the languages with each other. Php used for proxy file between API server and our client server. This php proxy file behaves like a bridge between our API call to Wikipedia servers. for more details watch the video carefully and follow each step. for more videos: www.youtube.com/solutionsnerds

index.html

<html>
<head>
<title>Wikipedia Search Panel</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
 var http = new XMLHttpRequest();
 document.getElementById("d").style.visibility = "hidden";
 function jump() {
  var term = document.getElementById("sea").value;
  var str = term;
  var replaced = str.split(' ').join('_');
  term = replaced;

  if (term == "") {
   document.getElementById("d").innerHTML = "";
   http.abort();
   document.getElementById("d").style.visibility = "hidden";
  } else {

   http.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("d").innerHTML = "";
     getData(this);
     document.getElementById("d").style.visibility = "visible";
    }
   };
   var url = "proxy.php?a=" + term;
   http.open("GET", url, true);
   http.send();
  }
 }
 function getData(data) {
  var dataread = JSON.parse(data.responseText);
  var read = dataread[1];
  var ul = document.getElementById("d");
  for (var i = 0; i < read.length; i++) {
   if (read[i] != "") {
    var item = document.createElement("li");
    item.appendChild(document.createTextNode(read[i]));
    ul.appendChild(item);
   } else {
   }
  }
 }
</script>


</head>
<body>
 <div id="container">
  <div id="header">
   <div id="searchpanel">
    <input type="text" id="sea" onKeyUp="jump()" />

    <ul id="d">
    </ul>
   </div>
  </div>
  <div
   style="width: 100%; height: auto; margin: 0; margin-top: 100px; border-top: 1px solid grey;">
   <div id="menu"
    style="width: 20%; height: auto; float: left; border-right: 2px ridge ghostwhite; position: fixed">
    <ul id="list"
     style="background-color: #333333; list-style: none; margin: 0;">
    </ul>
   </div>
   <div id="description" style="width: 78%; height: auto; float: right">
    <table id="tableData"
     style="width: 78%; height: auto; float: right border: 2px solid green;">
    </table>

   </div>
  </div>
 </div>

 <script type="text/javascript">
  var val = document.getElementById("d");

  val.onclick = function(event) {
   var e = event.target;
   showme(event.target.innerHTML);
  }
  function showme(res) {
   http.abort();
   document.getElementById("d").style.visibility = "hidden"
   document.getElementById("sea").value = res;
   document.getElementById('tableData').innerHTML = '';
   var http2 = new XMLHttpRequest();
   http2.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("list").innerHTML = "";
     showData(this);

    }
   };
   var clear = res.split(' ').join('_');
   var url2 = "prox.php?a=" + clear;
   http2.open("GET", url2, true);
   http2.send(null);
   http.abort();
  }
  var tit;
  function showData(d) {

   document.getElementById("d").style.visibility = "hidden";
   var s = JSON.parse(d.responseText);
   var first = s.parse.sections;
   tit = s.parse.title;
   var divul = document.getElementById("list");
   for (var t = 0; t < first.length; t++) {
    var num = s.parse.sections[t].number;

    if (!(num % 1 != 0)) {

     var item = document.createElement("li");
     item.style.color = 'white';
     item.style.display = 'block'
     item.style.padding = '10px';
     item.style.font = 'menu';
     item.style.fontStyle = 'bold';
     item.id = num;
     item.appendChild(document
       .createTextNode((s.parse.sections[t].line)));
     divul.appendChild(item);
    }

   }

  }
 </script>
 <script type="text/javascript">
  var listval = document.getElementById("list");
  var last = new XMLHttpRequest();
  listval.onclick = function(event) {
   listsend(event.target.id, event.target.innerHTML);
  }
  function listsend(getid, gethtml) {
   alert('id = ' + getid + "<br> html = " + gethtml);
   document.getElementById("tableData").innerHTML = "";

   last.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("tableData").innerHTML = "";
     showlast(this);
    }
   }
   var clearID = getid;
   var clearVal = gethtml.split(' ').join('_');
   alert(clearID + "  ___ " + clearVal);
   tit = tit.split(' ').join('_');
   var url = "lastprox.php?a=" + clearID + "&b=" + tit;
   last.open("GET", url, true);
   last.send();
  }

  function showlast(lastData) {
   var g = lastData.response;
   var gg = g.split("]").join("");
   var ggg = gg.split("}").join("");
   var gggg = ggg.split('"').join("");
   var h = gggg.split('{').join("");
   var hh = h.split('[').join("");
   document.getElementById('tableData').innerHTML = hh;

  }
 </script>

</body>
</html>

proxy.php

<?php
header ( 'Content-type: application/json' );

$c = $_GET ['a'];
if ($c != "") {
 $url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' . $c;
} else {
 echo ("nothing");
}

$handle = fopen ( $url, "r" );

if ($handle) {
 
 while ( ! feof ( $handle ) ) {
  $buffer = fgets ( $handle, 4096 );
  echo $buffer;
 }
 fclose ( $handle );
}

?>

lastprox.php

<?php
header ( "Access-Control-Allow-Origin: *" );
header ( 'Content-type: application/json' );

$c = $_GET ['a'];
$d = $_GET ['b'];
if ($c != "") {
 
 $url = 'https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&format=json&rvsection=' . $c . '&titles=' . $d;
} else {
 echo ($c . 'and' . $d);
}

$handle = fopen ( $url, "r", false );

if ($handle) {
 
 while ( ! feof ( $handle ) ) {
  $buffer = fgets ( $handle, 40000 );
  echo $buffer;
 }
 fclose ( $handle );
}

?>

prox.php

<?php
header ( 'Content-type: application/json' );

$c = $_GET ['a'];
if ($c != "") {
 
 // $url = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts&rvprop=content&rvsection=0&format=json&titles='.$c;
 $url = 'https://en.wikipedia.org/w/api.php?action=parse&prop=sections&format=json&page=' . $c;
} else {
 echo ("nothing");
}
$handle = fopen ( $url, "r" );

if ($handle) {
 
 while ( ! feof ( $handle ) ) {
  $buffer = fgets ( $handle, 10000 );
  echo $buffer;
 }
 fclose ( $handle );
}

?>

style.css

body {
 background-color: #FFF;
 margin: 0 aut0;
}

#header {
 width: 100%;
 height: auto;
 position: relative;
 border: 1px solid white;
}

#searchpanel {
 width: 70%;
 height: auto;
 position: absolute;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
}

#searchpanel input {
 width: 100%;
 height: 50px;
 border: thin solid #3CF;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 18px;
 color: #808080;
 font-weight: bold;
 padding: 12px 8px 12px 40px;
 position: relative;
}

#d {
 width: 100%;
 height: auto;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color: white;
 border: thin solid #3CF;
 visibility: hidden;
}

#d li {
 cursor: pointer;
 position: relative;
 padding: 12px 8px 12px 40px;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 18px;
 color: #808080;
 transition: 0.2s;
}

#d li:hover {
 background-color: #6CF;
 box-shadow: #333;
 color: #FFF;
}

#definitions p {
 background-color: yellow;
}

Download Code Now in Zip: WikipediaSearchPanel.zip