Coba Web Mining "ala Google" dengan PHP

typhun
1
Pernah ngetik sesuatu di Google ?, nah kalian selalu disuguhi yang namanya "web mining plus text mining", "" yaa, semacam auto text pada Blackberry, jadi ketika mengetikkan sesuatu seperti langsung keluar hasilnya, ajaib...

Nah, kesempatan kali ini terletak pada point Web Mining nya.
Preview nya bisa dilihat disini : http://wolypop.tk/google/
Oke, yang dibutuhkan cuma sederhana, PHP, MySQL, dan WebHost.

1. WebHost
Untuk WebHost nya kalau nggak mau onlen bisa kok coba offline alias pake Local Host (pakai Xampp)

2. MySQL
Namanya terserah saja, tapi disini coba pakai nama "cari". bisa buat sendiri ya berikut screenshot nya :D


Yang penting ada judul, thumbnail dan sinopsis aja. bikin sendiri dong :D

3. PHP
Pertama buat "koneksi.php" nya, codingnya terserah yang penting konek saja ke database MySQL yang sudah kamu buat taddi.

selanjutnya yaitu koding pencariannya, beri nama "cari.php"
<?php
$connection = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('cari', $connection);
$term = strip_tags(substr($_GET['judul'],0, 100));
$term = mysql_escape_string($term);
if($term=="")
echo "<div> <h3 style='color:#ff0000'>Masukan judul Film yang bakal kamu cari!</h3></div>";
else{
 
$query = mysql_query("select judul,thumbnail,sinopsis from filmbarat where judul like '%$term%'") or die(mysql_error());
$hasil = '';

if (mysql_num_rows($query)){
while($rows = mysql_fetch_array($query)){

$hasil=$hasil." <div>
 <div>
  <div>
   <div>
    <h3>$rows[judul]</h3>
   </div>
  </div>
  <div>
  <table>
  <tr>
   <td>
   <div>
     <img src=\"image/$rows[thumbnail]\" >
   </div>
   </td>
   <td>
   <div>
    <p align='center' style='color:red'>
     $rows[sinopsis]
    </p>    
   </div>
   </td>
  </tr>
  </table> 
  </div>
</div>
<hr>
</div>";

}
}

else{
$hasil = " <h4 style='color:red'>Film tak ditemukan!</h4><img src='image/404.jpg'>";
}

echo $hasil;
}
?>

selanjutnya, bikin form untuk menampung koding pencariannya. namai saja "form.php"

<script type="text/javascript "src="jquery.js"></script>
<script type='text/javascript'>$(document).ready(function() {
  //$("#search_results").slideUp();
  $("#button_find").click(function(event) {
   event.preventDefault();
   //search_ajax_way();
   ajax_search();
  });
  $("#search_query").keyup(function(event) {
   event.preventDefault();
   //search_ajax_way();
   ajax_search();
  });
 });
 function ajax_search() {

  var judul = $("#search_query").val();
  $.ajax({
   url : "cari.php",
   data : "judul=" + judul,
   success : function(data) {
    // jika data sukses diambil dari MySQL, akan ditampilhan di index sebagai HTML :D
    $("#display_results").html(data);
   }
  });

 }</script>
<div>
 <form >
  <div >
   <input type="text"  name="search_query" id="search_query" class="in" placeholder=" Judul film yang dicari? Misal 'Spiderman'">
   <button type="submit" id="button_find">
    <i>Cari</i>
   </button>
  </div>
 </form>
</div>

<div id="display_results"  ></div>
</body>
</html>

yang terakhir buat file "index.php" nya, untuk menampilkan bunkusan Search Engine nya, tampilan terserah.

<html>
<head>
 <title>Live Film Search Demo </title>

<style type="text/css">  
body {
padding-top: 20px;
padding-bottom: 40px; 
}
/* kotak */
.box {
margin: 0 auto;
max-width: 800px;
}
.box > hr {
margin: 30px 0;
}
.bg{min-height:20px;padding:19px;margin-bottom:20px;background-color:#99CCFF;border:1px solid #e3e3e3;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-border-radius:4px;border-radius:4px;
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
.in {
width:400px;}
</style>

</head>

<body>
 <div class="box">
  <div>
   <ul> 
   </ul>
    <h2>Ala Google - Search Engine :D</h2>
  </div>
<hr>

<div class="bg">
<?php
$pg = '';

include('koneksi.php');
if(!isset($_GET['pg'])) {
 include ('form.php');
 }else {
 $pg = $_GET['pg'];
 $mod = $_GET['mod'];
 include $mod . '/' . $pg . ".php";
}?>
</div>

<div class="footer">
 <p style="text-align: center">
     &copy; Wolypop 2013 :D
 </p>
</div>

 </div>
  
</body>
</html>

4. JQuery
bisa disownload disini : http://adf.ly/RcQSV

terakhir, untuk file gambarnya cari sendiri di Google.
Selesai.

Post a Comment

1Comments

  1. Makasih gan..
    kunjung balek gan..

    http://takengonscript.blogspot.com/

    ReplyDelete
Post a Comment