Membuat Search Engine "Custom" berbasis Google

Google, apa yang tidak anda temukan lewat Mbah dukun kita yang satu ini???
Google adalah mesin pencari yang luar biasa, apa saja di web bisa ditemukan "Google".
Kita kurangnya apa, kadang hasil pencarian yang kita butuhkan terlalu banyak dan kadang menampilkan link yang berbeda bahasa.
Misal, saya suka dengan Ebook, tentunya saya akan bookmark website yang menyediakan hal tersebut. Apakah bisa lain waktu saya ingin mencari topik lain pada website ebook yang telah di bookmark. ???

Bisa kok, Google ternyata baik sekali dengan menawarkan pembuatan mesin pencari "Gratis" untuk keperluan anda. itu bisa diatasi dengan mudah.
Manfaatkan "Google Custom Search", Google custom search Engine (CSE) memberikan layanan bagi pemilik website, atau blogger yang ingin memanfaatkan "Mesin pencari Google khusus" untuk pencarian content dalam domain lain atau pun dalam domain kita sendiri.

PREVIEW

Langkah langkah Membuat Mesin pencari

•     Masuk ke situs Google.com/cse/.

•     Klik tombol Add untuk membuat mesin pencari baru

•     Tambahkan website yang akan dijadikan referensi pencarian

•     Get code, itu opsi jika kamu ingin dapat setting dan desain otomatis dan standar dari Google. Kalau ingin modifikasi masuk ke - Panel Kontrol.

Selesai.

Coba Web Mining "ala Google" dengan PHP

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.

Membuat Custom Color Picker pada Form

Custom Color Picker disini dimaksudkan sebagai Form Input pemilihan warna, entah itu sebagai background chooser untuk Form Pendaftaran ataupun sebagai Background Theme biasa.

Widget seperti ini memang populer, selain mempermudah bagi pengguna dan pengunjung, pun semakin menambah Style tertentu pada suatu Website, sehingga lebh atractive.. :D

Sebenarnya ini adalah pengaplikasian dari JS Color Dot Com :) .
Proses bikinnya cukup mudah dan Simple, cuma butuh file javascript "jscolor.js" dan sedikit ketrampilan membuat Form, untuk file jscolor.js nya bisa didownload sendiri di "JSCOLOR.COM"

Berikut Screen Shoot nya

Lihat Contoh yang sudah di Upload : http://wolypop.tk/colorpick/

Berikut Source Code :

<script type="text/javascript" src="jscolor.js"></script>
<h1> Color Pick</h1>
<form action='index.php' method='POST'>

Nama Anda: <input name='nama' ><br />
Warna Text&nbsp;: <input class="color" name='ctext' value="ffffff"><br />
Background: <input class="color" name='btext' value="000000"><br />
<input type='submit' name='simpan' value='Terapkan'>
  </form>
  <?php
  if(isset($_POST['nama'])){
  $nama=$_POST['nama'];
  $ctext=$_POST['ctext']; //warna text
  $btext=$_POST['btext']; //warna background
  ?>
  <h1>
  Selamat Datang
  <span style='background-color:#<?=$btext?>;
    color:#<?=$ctext;?>'>
  <?=$nama;?>
  </span></h1>
<?php
  }
  ?>

Enjoy :)

Optimasi Gambar pada WEB maupun Blog Bag. II

Pada Post sebelumnya telah dijelaskan mengenai peng-Optimal an Image/Gambar tapi itu hanya sebatas peletakan dan cara-cara yang benar menurut Om Google, nah sekarang akan dijelaskan bagaimana Optimasi nya dari suatu Image itu sendiri.

Yang dimaksud disini yaitu mengenai pengecilan ukuran gambar tapi tidak mempengaruhi kualitas dari gambar itu sendiri, ahh... banyak sekali yang model seperti itu mulai dari :
a). Software Compressor

b). Website Compressor

Oke.
a). Software Compressor

Banyak sekali berseliweran software yang gunanya untuk compress gambar biar menyusut, tapi terkadang kualitasnya juga susut, alias gambar jadi mbludrek :)
berikut beberapa contoh program Image Compressing.

1. JPG/JPEG Image Compressor

Software ini gunanya ya meng-compress gambar sekecil mungkin menurut Compression Level gambar itu sendiri, jika dipaksakan otomatis kualitas gambar semakin buruk.
Software seperti ini populer loh bagi para admin Web News Publisher dan Developer.

Download Software ini.

2. PNG Gauntlet

Software yang kedua ini lebih ribet, tapi ya cukup penting mengingat kemampuannya dalam memperkecil ukuran gambar PNG tapi tidak mempengaruhi kualitas gambar sama sekali alias masih kinclong.

*Penting : software ini ketika diinstall membutuhkan Microsoft .Net Framework versi 4 minimal.

Download Software nya disini.

b). Website Compressor

Berikutnya giliran Website Compressor, buanyak sekali web model begini, ada yang bener ada yang abal-abal. cari  aja di Google dengan contoh keyword "Image Compressor", wuih.. bejibun :)
- JPEG Optimizer
Buka jpeg-optimizer.com, mudah saja disitu sudah terpasang instruksipenggunaannya kok.
- Image Optimizer
Sama seperti diatas buka aja imageoptimizer.net
- Resize Image
Buka shrinkpictures.com disitu juga gunanya untuk resize image - resize image quality.
- Image Compressor
Buka image-compressor.com dan lakukan seperti yang lain.

dan masih banyak website-website lain yang menyediakan tool seperti ini.
Intinya : Ingatlah selalu jika ingin meng-UPLOAD file gambar sebaiknyalah dikompress dulu, selain menghemat waktu dalam proses UPLOAD nya, juga berdampak dengan kecepatan pemuatan/LOADING suatu Halaman.

Sekian.

Optimasi Gambar pada WEB maupun Blog

Era sekarang dan era tahun jadul memang beda dalam penggunaan Internet, dan perbedaannya sangat mencolok, bayangkan saja, dari 10 orang populasi 4 diantaranya adalah pengguna Internet entah itu sekadar browsing atau Social Networking/Media. Sedangkan sekarang rata-rata Web didominasi ketat oleh gambar dan Video, berbeda dengan tahun para Nabi yang masih banyak cuma berisi Teks.

Sejalan dengan berkembang biaknya teknologi Web dan beragamnya konten gambar dan video tidak sejalan dan seirama dengan kecepatan akses Internet di tiap lokasi, ada yang keceptan akses nya sampai diatas puluhan Mbps, lha kita-kita masih standart 1.3 Mbps.. itupun kadang masih dibagi sama teman. :( #Ngenes

Bagi kamu Webdesigner atau para Image Builder atau para Pengisi konten-konten Web atau Blogger-blogger kasian kayak saya, ya sepatutnyalah Blognya itu Loadingnya jangan dibikin Lemot, pake Gambar superbesar atau ditambah Widget-Widget gak penting banget :) dan perhatikan pula ukuran file gambar kalo mau upload.

Berikut beberpa TIPS buat kamu biar loading WEB nya nggak lemot-lemot amat (dari segi Image)

1. Pakai Format gambar yang sesuai.

Dalam dunia per - Web an, sering dijumpai ada format gambar berupa .JPG lalu .PNG lalu .GIF dll, nah biasanya para Blogger terutama, selalu pakai format .JPG untuk segala keperluan entah itu untuk Ilustrasi, Wallpaper, Thumbnail, Profile Photo bahkan ada yang dipake buat icon.

Begini, kalo untuk Thumbnail dan Ilustrasi gambar ya sebaiknya pakai .JPG, kalo .GIF ya untuk animasi sederhana atau dipake dalam Sprite CSS, kalo .ICO tentu saja buat icon, kalo untuk .PNG ya jangan dipakai, selain karena ukuran filenya besar dan kegunaanya sering ndak cocok buat Web, karena PNG kan biasanya untuk Photo Professional.

2. CSS Sprite untuk Background

Ingin punya Web/Blog tapi template yang dipakai tidak ber-background alias dengan pola warna saja, itupun putih dan tidak bervariasi, sedangkan kalo pasang background entar jadi lambat karena kudu me-load gambar besar yang dipakai sebagai background ???
pakai saja CSS sprite... gambar yang kamu pakai ukurannya kecil, paling cuma 3-8 Kb, tapi akan diulang seluas halamn Web mu. :)

3. Pakai 2 versi untuk Image Gallery

Image gallery ada disetiap Web atau Blog, ingat Thumbnail ingat juga Image Gallery, apa maksudnya?, Image Gallery disini maksudnya setiap kamu mem-posting berita dan didalamnya ada file Gambar, secara otomatis akan terjadi 2 versi, yaitu file versi asli dn file versi thumbnail, versi asli akan dipakai dalam ilustrasi postingan dan di Load scara keseluruhan sedangkan versi thumbnail akan dipakai oleh Google sebagai Web crawl dan Web Search.

Nah, jika kamu pakai tag seperti ini:

<img src='image.jpg' width=100px height=100px>

ukuran gambar = 300 kb.
resolusi = 900 x 500.
parameter widht = 100 dan height = 100

itu artinya kamu akan meload Image ukuran gambar 300 kb tapi ditampilkan dengan ukuran lebih kecil, proses request Image akan tetap sama, kalo ada 5 gambar seperti diatas, maka loading halaman dengan gambar akan sampai 3 Mb. Gede amat, loadingnya Lemot tau.

Maka, buatlah 2 versi.. versi asli dan thumbnail, versi besar dan versi kecil. kalo versi besar 300 kb, versi kecil nya 30 kb dan jumlah gambar ada 10, maka kamu akan hemat loading sekitar 20 %.

4. Pakai Server Sendiri Dong

Yang harus diingat, jangan pakai gambar milik orang lain, untuk jaga-jaga :
a). Bagaimana kalo pemilik gambar menghapus gambar tersebut.
b). Bagaimana jika gambar itu diberi Hak Cipta.
c). Hahaha, browser bakal request ke server lain dan tentu menghambat loading... :D

Untung saja Blogger pakai server Google, jadi ya dihitung punya sendiri.

Sekian Tips nya, moga Bermanfaat.

Template Lamaran Kerja dan CV HTML futuristik

Pengunjung yang Budiman/Pakdiman

Pernah bikin Surat Lamker plus CV ato resume?
Haha, kalo pembaca pasti udah ratusan kali (karna sering ditolak) :D :D
kalo saya sih, baru beberapa kali langsung diterima. :)

Begini, berhubung minggu ini lagi hobi banget ama Design dan kebetulan ingat sama berkas surat lamaran kerja dan CV kemarin, dan kebetulan pula ingat.. Bagaimana kalo tak bikin Versi HTML Plus-Plus. Sekarang kan musimnya Lamaran kerja dan CV tapi versi HTML (nggak ngabisin kertas dan Biaya BrE, dan lebih atraktif).
Nah penasaran kan?

Maksudnya plus-plus gimana?
1. Pembuatannya yang mudah, simple, cepat, dan gak butuh kepintaran dalam bidang Editing HTML dan JS (kamu tinggal copas aja).

2. Saya tambahkan Fungsi Print pada Template HTML dan CV nya, jadi.. ketika si HRD melihat file HTML mu yang sudah kamu upload, dia bisa langsung Nge-Print File mu. (gak paham deh !!)

3. Ok, kalo gk paham.. coba lihat punya saya yang sudah jadi dulu.

klik contoh ini ::  Lamaran Kerja
Contoh CV saya :: CV ku

Gimana?, keren !! (kalo nggak, ya nggak usah lanjut dibaca).

Proses Pembuatan

Lamker.html
1. Buka File Ms. Word mu - Contoh : Lamker.doc / lamker.docx

2. Pilih menu Save As - Other Formats

3. Pilih Sebagai Web Page (*.html)

4. Nah, jadi deeeh... file mu tadi yang berupa .docx akan berganti lamker.html contohnya kayak gini : lamker.html

5. Selanjutnya tinggal kamu Upload ke Web Host mu sendiri.

6. Oww, hampir lupa, lha fungsi Print Preview nya mana Bre...?

7. Gampang, buat sebual link, gunanya ketika link itu di klik, yang keluar Fungsi Print Otomatis tergantung OS apa yang dipakai. coba saja klik link cetak/print pada Preview saya tadi.

8. Ok, tambahkan Kode javascript onclick nya seperti ini di dalam tag <body>:

<p align='center'>
<a href='nama-file.html' onClick='window.print();return false'> Cetak / Print File ini</a>
</p>

9. Selesai.

CV.html

Sekarang CV versi HTML dan sedikit CSS. :)
lihat punya saya : CV
Pingin?, kamu nggak perlu bikin... cari aja di Google, ato kalo mau copy punyaku tadi dengan klik kanan Web Browser - Pilih View Page Source.
dan Tambahkan fungsi Print seperti cara diatas.

Gampang banget kan.
Sekian Post hari ini, Semoga Manfaat.