Arama Kutusu Yapımı
Arama kutusu, web sitesi veya uygulamaların kullanıcıların istedikleri bilgilere daha hızlı ve kolay bir şekilde erişmelerini sağlayan önemli bir öğedir. Birçok web sitesi ve uygulama, kullanıcıların aradıklarını bulmalarını sağlamak için arama kutularını kullanır. Bu makalede, bir arama kutusunun nasıl yapılacağına dair adımları ve en iyi uygulamaları ele alacağız.
1. HTML ve CSS ile Arama Kutusu Oluşturma
İlk adım, arama kutusunu HTML ve CSS kullanarak oluşturmaktır. HTML’de bir form elemanı olan `` etiketini kullanarak bir arama kutusu oluşturabiliriz. Aşağıda basit bir örneği bulabilirsiniz:
“`html
“`
Yukarıdaki kod, temel bir arama kutusu oluşturur. `` etiketinin `type` özelliği “text” olarak ayarlanmıştır ve `name` özelliği “search” olarak belirlenmiştir. `placeholder` özelliği, kullanıcıya arama yapması için bir ipucu sağlar. Ayrıca bir “Ara” düğmesi de ekledik.
Ardından, CSS kullanarak arama kutusunu stilize edebiliriz. Aşağıdaki CSS kodu, arama kutusuna biraz stil ekler:
“`css
input[type=”text”] {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
“`
Yukarıdaki CSS kodu, arama kutusuna bir kenarlık, yuvarlatılmış köşeler ve bir arka plan rengi verir. Aynı zamanda arama düğmesini de stilize eder.
Bu şekilde HTML ve CSS kullanarak bir arama kutusu oluşturabilirsiniz. Ancak, bu basit bir arama kutusu olup, veritabanı veya arama işlevselliği içermemektedir. İkinci bölümde bu konuya daha detaylı olarak değineceğiz.
Arama Kutusu Yapımı (Devam)
2. Arama İşlevselliği Ekleme
Bir arama kutusu oluşturduktan sonra, kullanıcının arama yapabilmesi için arama işlevselliğini eklememiz gerekmektedir. Bu, kullanıcının girdiği veriyi alıp, doğru sonuçları bulmak ve sunmak anlamına gelir. İşte bu aşamada, JavaScript ve sunucu tarafı programlama dilleri (örneğin, PHP, Python) devreye girer.
Öncelikle, HTML form elemanına bir `onsubmit` olayı ekleyerek formun gönderilmesini kontrol edebiliriz. Aşağıdaki örnek kodda, bir JavaScript fonksiyonu kullanılarak formun gönderilmesi engellenmiştir:
“`html
“`
Bu şekilde, form gönderildiğinde sayfanın yeniden yüklenmesi engellenir.
Ardından, JavaScript kullanarak arama işlevselliğini ekleyebiliriz. Aşağıdaki örnek kodda, basit bir JavaScript fonksiyonu kullanılarak arama kutusundaki metni alıp, konsola yazdırıyoruz:
“`html
“`
Yukarıdaki JavaScript kodunda, `search()` adında bir fonksiyon tanımlanmıştır. Bu fonksiyon, arama kutusundaki metni alır ve konsola yazdırır. Ayrıca, formun `onsubmit` olayına bu fonksiyonun çağrılmasını ekledik.
Bu noktada, arama kutusundaki metni kullanarak gerçek bir arama yapmak ve sonuçları göstermek için sunucu tarafı programlama dillerini kullanabilirsiniz. Kullanıcının girdiği metni bir veritabanında veya harici bir API’da aratarak sonuçları elde edebilir ve kullanıcıya sunabilirsiniz.
Örneğin, PHP kullanarak bir veritabanında arama yapabilirsiniz:
“`php
“`
Yukarıdaki örnek, PHP ile GET yöntemi kullanarak arama terimini alır. Ardından, veritabanında arama yapma ve sonuçları kullanıcıya gösterme işlemlerini yapmanız gerekmektedir.
Bu şekilde, arama kutusuna işlevsellik ekleyebilir ve kullanıcıların aradıklarını bulmalarına yardımcı olabilirsiniz.
