نمایش فیلد جستجوی گوگل در سایت یا وبلاگ

ارسال درخواست به سرور گوگل

اغلب موتورهای جستجو و از جمله گوگل پارامترهای مورد نظر کاربران را از طریق متد HTTP GET دریافت می کنند، در متد GET هنگامی که عبارتی را در فیلد جستجو وارد و بر روی دکمه جستجو کلیک می کنیم در نوار آدرس پارامترهایی قابل مشاهده است که اگر بیش از یک مورد باشند با کاراکتر & از هم جدا شده و قابل تفکیک هستند، به فرض آدرس زیر جستجوی عبارت "آموزش برنامه نویسی وب" را از سرور گوگل درخواست می کند:

http://www.google.com/search?q=آموزش+برنامه+نویسی+وب

پارامتر q در درخواست ما مخفف query یا پرس و جو است و عبارت بعد از آن کلمه مورد نظر برای جستجو است که به جای فاصله از علامت + استفاده شده است، در این حالت گوگل از اطلاعات سراسر وب (که قبلا در دیتابیس خود ذخیره کرده است) عبارت درخواست شده را جستجو می کند و نتایج نمایش داده شده از تمام سایت ها و وبلاگ های وب خواهد بود، اما اگر بخواهیم جستجو را محدود به سایت یا وبلاگ خود کنیم پارامتر دیگری به نام sitesearch به آدرس اضافه می شود، به طور مثال:

http://www.google.com/search?q=آموزش+برنامه+نویسی+وب&sitesearch=https://webgoo.ir

به این صورت تنها نتایجی نشان داده می شوند که متناظر با آدرس URL پارامتر sitesearch باشند، از این مبنا می توانیم در فرم های جستجوی اختصاصی سایت و وبلاگ که با کدنویسی HTML و JavaScript ساخته می شوند استفاده کنیم.

کد HTML ایجاد فیلد جستجوی گوگل

برای ایجاد فیلد جستجوی گوگل در سایت یا وبلاگمان ابتدا باید با تگ form در زبان HTML نمونه کدهای زیر را بنویسیم، این نمونه کدها امکان درج عبارت مورد نظر کاربر و ارسال آن به سرور گوگل را به کمک برنامه نویسی فراهم می کنند:

<style>
.search-form {
   direction: rtl;
   width: 250px;
   padding: 4px;
   border: 1px solid #999;
}
.search-input {
   direction: rtl;
   width: 96%;
   padding: 4px;
}
.search-submit {
   background: #0C43B4;
   color: #FFFFFF;
   width: 100px;
   padding: 4px;
}
</style>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="">
<input class="search-submit" type="submit" value="جستجو در گوگل">
<input type="hidden" name="sitesearch" value="https://webgoo.ir">
</form>

پیش نمایش کد را در انتهای آموزش می توانیم بررسی و تست کنیم.
توضیح:
- عناصر موجود در نمونه کد بنا بر نیاز و سلیقه قابل تغییر هستند، به طور مثال عرض باکس جستجو در قسمت width برابر 250 پیکسل در نظر گرفته شده که می توانیم متناسب با قالب سایت یا وبلاگمان آن را تغییر دهیم، یا به فرض برای انتقال عناصر به خط جدید از تگ br در HTML استفاده کنیم.
- در قسمت style می توانیم از کدهای CSS برای سفارشی سازی ظاهر فرم استفاده کنیم یا به طور جداگانه کلاس (class) و آی دی (id) برای آنها تعریف کنیم که این کار برای نمونه در کد بالا انجام شده است.
- دو فیلد با نام q و sitesearch بخش اصلی درخواست کاربر به سرور گوگل را تشکیل می دهند، مقادیر value برای فیلد q خالی است و توسط کاربر پر می شود، برای فیلد sitesearch باید آدرس کامل سایت یا وبلاگ خود را (به جای https://webgoo.ir) جایگزین کنیم.
- برای باز شدن پنجره جستجو در صفحه جدید پارامتر target را با مقادیر blank به قسمت مربوط به تگ form اضافه می کنیم، به فرض:

<form method="get" action="http://www.google.com/search" target="_blank">

در نمونه کد بالا پارامتر target تعریف نشده و با کلیک کاربر بر روی دکمه جستجو صفحه نتایج سایت گوگل جایگزین صفحه سایت یا وبلاگمان خواهد شد.

افزودن قابلیت تعاملی با جاوا اسکریپت

با توجه به سلیقه و نیازمان می توانیم امکانات تعاملی دیگری به فرم جستجو اضافه کنیم، به طور مثال از جمله جلوه هایی که در فیلدهای جستجو کاربرد دارد ایجاد متن پیش فرض است که با کلیک کاربر جهت شروع تایپ، متن محو شده و در صورت کلیک در خارج از فضای فیلد و عدم تایپ، متن محو شده نمایش داده می شود، اگرچه مشابه این امکان را با پارامتر placeholder در HTML می توانیم داشته باشیم اما جاوا اسکریپت قابلیت های بیشتری برای سفارشی سازی در اختیارمان قرار می دهد، مثال:

<style>
.search-form {
   direction: rtl;
   width: 250px;
   padding: 4px;
   border: 1px solid #999;
}
.search-input {
   direction: rtl;
   width: 96%;
   padding: 4px;
   color: #CCC;
}
.search-submit {
   background: #0C43B4;
   color: #FFFFFF;
   width: 100px;
   padding: 4px;
}
.input-on {
   color: #333;
}
.input-off {
   color: #CCC;
}
</style>
<script>
function inputClear(input, default_text){
    if(input.value == default_text){
        input.value = "";
        input.className = "search-input input-on";
    }
}
function inputRecall(input, default_text){
    if(input.value == ""){
        input.value = default_text;
        input.className = "search-input input-off";
    } else {
        input.className = "search-input input-on";
    }
}
</script>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<input class="search-submit" type="submit" value="جستجو در گوگل">
<input type="hidden" name="sitesearch" value="https://webgoo.ir">
</form>

توضیح:
- در این نمونه کد از دو تابع جاوا اسکریپتی و رویدادهای onclick (هنگامی که کاربر در فیلد جستجو کلیک می کند) و onblur (هنگامی که کاربر در خارج از فیلد جستجو کلیک می کند) استفاده کرده ایم.
- برای اختصاص مقادیر به فیلدها از متد value و برای تغییر کلاس فیلد با برنامه نویسی از متد className در کدهای جاوا اسکریپت استفاده کرده ایم.
- استایل CSS (تگ style) و کد JavaScript (تگ script) را ترجیحا در قسمت هدر قالب (بین تگ های head) و فرم جستجو (تگ form) را بعد از اعمال تنظیمات سفارشی مورد نظر در قسمتی از تگ body درج می کنیم (محل قرار دادن فرم سلیقه ای است و تفاوتی ندارد در کجای صفحه اضافه شود).

افزودن دکمه های رادیویی و منوی کشویی

در صورت لزوم برای تکمیل فرم جستجو و افزودن قابلیت های بیشتر می توانیم از دکمه های رادیویی یا منوی کشویی استفاده کنیم، دکمه های رادیویی یا منوی کشویی قابلیت انتخاب را به کاربر می دهند که در کل وب یا در آدرس مد نظرمان جستجو کند، برای نمونه این کار را برای کدهای زیر که کامل شده فرم بالا است انجام داده ایم.
فرم جستجوی گوگل با دکمه های رادیویی:

<style>
.search-form {
   direction: rtl;
   width: 250px;
   padding: 4px;
   border: 1px solid #999;
}
.search-input {
   direction: rtl;
   width: 96%;
   padding: 4px;
   color: #CCC;
}
.search-submit {
   background: #0C43B4;
   color: #FFFFFF;
   width: 100px;
   padding: 4px;
}
.input-on {
   color: #333;
}
.input-off {
   color: #CCC;
}
</style>
<script>
function inputClear(input, default_text){
    if(input.value == default_text){
        input.value = "";
        input.className = "search-input input-on";
    }
}
function inputRecall(input, default_text){
    if(input.value == ""){
        input.value = default_text;
        input.className = "search-input input-off";
    } else {
        input.className = "search-input input-on";
    }
}
</script>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<input type="radio" name="sitesearch" value="https://webgoo.ir" checked="checked">در سایت وبگو<br>
<input type="radio" name="sitesearch" value="">در کل وب<br>
<input class="search-submit" type="submit" value="جستجوی گوگل">
</form>

فرم جستجوی گوگل با منوی کشویی:

<style>
.search-form {
   direction: rtl;
   width: 250px;
   padding: 4px;
   border: 1px solid #999;
}
.search-input {
   direction: rtl;
   width: 96%;
   padding: 4px;
   color: #CCC;
}
.search-submit {
   background: #0C43B4;
   color: #FFFFFF;
   width: 100px;
   padding: 4px;
}
.input-on {
   color: #333;
}
.input-off {
   color: #CCC;
}
</style>
<script>
function inputClear(input, default_text){
    if(input.value == default_text){
        input.value = "";
        input.className = "search-input input-on";
    }
}
function inputRecall(input, default_text){
    if(input.value == ""){
        input.value = default_text;
        input.className = "search-input input-off";
    } else {
        input.className = "search-input input-on";
    }
}
</script>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<select name="sitesearch">
<option value="https://webgoo.ir">در سایت وبگو</option>
<option value="">در کل وب</option>
</select><br>
<input class="search-submit" type="submit" value="جستجوی گوگل">
</form>

نکته: گوگل از پروتکل امن https پشتیبانی می کند لذا در کدهای بالا به جای http://google.com می توانیم از https://google.com هم استفاده کنیم (در صورت استفاده از حالت http به صورت خودکار به https منتقل می شویم).

مثال و پیش نمایش آنلاین

برای جمع بندی و تست کدهایی که در این آموزش برای نمایش فیلد جستجوی گوگل در سایت یا وبلاگ بررسی کردیم می توانیم از مثال و پیش نمایش آنلاین زیر استفاده کنیم.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فرم جستجوی گوگل برای سایت و وبلاگ</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.search-form {
   direction: rtl;
   width: 250px;
   padding: 4px;
   border: 1px solid #999;
}
.search-input {
   direction: rtl;
   width: 96%;
   padding: 4px;
   color: #CCC;
}
.search-submit {
   background: #0C43B4;
   color: #FFFFFF;
   width: 100px;
   padding: 4px;
}
.input-on {
   color: #333;
}
.input-off {
   color: #CCC;
}
</style>
<script>
function inputClear(input, default_text){
    if(input.value == default_text){
        input.value = "";
        input.className = "search-input input-on";
    }
}
function inputRecall(input, default_text){
    if(input.value == ""){
        input.value = default_text;
        input.className = "search-input input-off";
    } else {
        input.className = "search-input input-on";
    }
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!<br></noscript>
فرم جستجوی گوگل بدون قابلیت های جانبی:<br><br>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="">
<input class="search-submit" type="submit" value="جستجو در گوگل">
<input type="hidden" name="sitesearch" value="https://webgoo.ir">
</form>
<br>
فرم جستجوی گوگل با قابلیت تعاملی:<br><br>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<input class="search-submit" type="submit" value="جستجو در گوگل">
<input type="hidden" name="sitesearch" value="https://webgoo.ir">
</form>
<br>
فرم جستجوی گوگل با قابلیت تعاملی و دکمه های رادیویی:<br><br>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<input type="radio" name="sitesearch" value="https://webgoo.ir" checked="checked">در سایت وبگو<br>
<input type="radio" name="sitesearch" value="">در کل وب<br>
<input class="search-submit" type="submit" value="جستجوی گوگل">
</form>
<br>
فرم جستجوی گوگل با قابلیت تعاملی و منوی کشویی:<br><br>
<form class="search-form" method="get" action="http://www.google.com/search">
<input class="search-input" type="text" name="q" size="22" maxlength="255" value="جستجو..." onclick="inputClear(this, 'جستجو...')" onblur="inputRecall(this, 'جستجو...')">
<select name="sitesearch">
<option value="https://webgoo.ir">در سایت وبگو</option>
<option value="">در کل وب</option>
</select><br>
<input class="search-submit" type="submit" value="جستجوی گوگل">
</form>
</body>
</html>

پیش نمایش آنلاین