" + yerimleri[i].adres + "

Form Oluşturma

Yer imleri listesine eklemek istediğimiz adresleri kullanıcının kolayca ekleyebilmesi için bir form oluşturmamız gerekiyor. Bu form kullanıcının adres bilgilerini girmesini sağlayacak ve eklemek istediği yer iminin adını ve açıklamasını da belirtebileceği bir alana sahip olacak. Form oluşturmak için HTML kodları kullanılacak ve bu kodlar ile form içinde yer alan etiketler tanımlanacak.

Form içinde yer alacak etiketler genellikle input etiketi kullanılarak oluşturulur. Kullanıcıların adres bilgisini gireceği alan için type="text" özelliği ve name özelliği belirtilen bir input etiketi kullanılabilir. Eklemek istediği yer imi için ad ve açıklama bilgilerini girebileceği birer input etiketi de oluşturulabilir. Bu etiketler name özelliği kullanılarak birbirinden ayırt edilebilir. Form içinde yer alacak tüm etiketler form etiketi içinde oluşturulur.

Bununla beraber formun kullanıcılar tarafından kolay kullanılabilmesi için butonlara da ihtiyaç duyulabilir. Bu butonlar yardımıyla kullanıcılar, formda yer alan bilgileri kaydedebilir veya formu sıfırlayabilirler. Butonlar, button etiketi kullanılarak veya input etiketi olarak düzenlenebilir.

Form oluşturulduktan sonra CSS kullanılarak formun daha estetik bir görünüm kazanması sağlanabilir.

Form Verilerinin Local Storage'a Kaydedilmesi

Form verilerinin local storage'a kaydedilmesi, kullanıcıların eklediği yer imlerinin sayfada kalıcı olarak saklanması için gereklidir. Bu işlem, JavaScript kullanarak gerçekleştirilir.

Öncelikle, HTML formunun kodlanması gerekir. Formda yer imi ismi ve adres bilgileri gibi gerekli alanlar bulunur. Ardından, JavaScript kullanarak form verileri kontrol edilir ve gerektiğinde hata mesajları ekrana yazdırılır.

Formda girilen verilerin local storage'a kaydedilmesi için, JavaScript'in local storage fonksiyonları kullanılır. Yer imi ekleme işlemi tamamlandığında, girilen bilgiler local storage'da key-value çifti olarak kaydedilir. Key olarak, kullanıcının belirlediği bir isim veya otomatik olarak oluşturulan bir ID kullanılabilir.

Verilerin kaydedilme işlemi, aşağıdaki gibi basit JavaScript kodlarıyla gerçekleştirilebilir:

```// form elementlerine erişim sağlanılıyorvar form = document.getElementById("form");var name = document.getElementById("name");var address = document.getElementById("address");

// form submit eventi dinleniyorform.addEventListener("submit", function(event) { // inputların boş olup olmadığı kontrol ediliyor if (name.value === "" || address.value === "") { // hata mesajı ekrana yazdırılıyor alert("Lütfen tüm alanları doldurunuz"); } else { // local storage'a veri kaydediliyor var key = "bookmark_" + new Date().getTime(); var value = JSON.stringify({ name: name.value, address: address.value }); localStorage.setItem(key, value); // form alanları temizleniyor name.value = ""; address.value = ""; } // formun default davranışı engelleniyor event.preventDefault();});```

Yukarıdaki örnek kodda, form elementlerine erişim sağlanıyor ve formun submit eventi dinleniyor. Input alanlarının boş olup olmadığı kontrol edilerek hata mesajı ekrana yazdırılıyor veya local storage'a veri kaydediliyor. Kaydedilen veriler key-value çifti şeklinde kaydediliyor ve key'a otomatik olarak oluşturulan bir ID kullanılıyor.

Form verilerinin local storage'a kaydedilmesi işlemi, konuyla ilgili birçok kaynakta detaylı olarak anlatılmaktadır. Bu adım, yer imleri listesi oluşturma uygulamasının önemli bir parçasıdır ve başarılı bir şekilde gerçekleştirilmesi için yakından takip edilmelidir.

Kaydedilmiş Yer İmlerinin Listelenmesi

Kaydedilmiş yer imlerinin listelenmesi, kullanıcının daha önce eklediği yer imlerinin listelendiği bir sayfanın oluşturulması anlamına gelmektedir. Bu sayfa, kullanıcının önceden kaydettiği yerleri tekrar bulmasını ve haritada görüntülemesini kolaylaştırmaktadır. Listelemek için öncelikle kaydedilen yer imlerinin local storage'dan çekilmesi gerekmektedir.

Bu işlem için, JavaScript'te localStorage.getItem() fonksiyonu kullanılabilmektedir. Bu fonksiyon, local storage'da belirtilen anahtar(key) ile kaydedilen değer(value) çekilmesini sağlar. Çekilen değerler daha sonra HTML, CSS ve JavaScript kodları yardımıyla liste haline getirilir.

Öncelikle HTML kodları ile listelemenin yapılacağı alan oluşturulur. Bu alan için

ve
• etiketleri kullanılabilmektedir.
  etiketi bütün liste elemanlarını kapsar ve her elemanı
  • etiketi ile tanımlanır.

    Daha sonra, çekilen verilerin her biri JavaScript'te bir dizi(array) olarak depolanır. Bu dizi içerisinde yer alan elemanlar, for döngüsü kullanılarak döndürülür ve HTML kodları ile liste haline getirilir.

    Örneğin;

    ``` HTML

    ```

    JavaScript kodları ise;

    ``` JavaScriptlet yerimleriListesi = document.getElementById("yerimleri-listesi");

    let yerimleri = JSON.parse(localStorage.getItem("yerimleri"));

    for(let i = 0; i < yerimleri.length; i++) { let yerim = yerimleri[i]; let li = document.createElement("li"); li.textContent = yerim.ad; li.addEventListener("click", function() { haritadaGoster(yerim.lat, yerim.lng); }); yerimleriListesi.appendChild(li);}```

    Yukarıdaki kodlar, local storage'dan "yerimleri" anahtarına sahip verilerin çekilmesini sağlar. Daha sonra for döngüsü ile her bir yerim ögesi dizi üzerinde gezer ve HTML listesi olarak oluşturulur. Son olarak, listeye tıklanması durumunda harita üzerinde görüntülenmesi için bir tıklama olayı eklenir.

    Bu adımlar takip edilerek, kaydedilmiş yer imleri listesi başarılı bir şekilde oluşturulabilir.

    
    

    Local Storage'dan Verileri Alma

    Yer imleri listesi oluşturma uygulaması, kullanıcılara diğer sayfalara veya kaynaklara yönlenmek yerine, belirli bir web sayfasına erişmelerini sağlar. Bu nedenle, kullanıcıların yer imleri oluşturdukları sayfada kalması ve gözlem yapması daha olasıdır. Ancak, doğru bir şekilde çalışması için bu liste verilerinin depolanması gerekir. Local Storage, tarayıcının yerel hafızasında, web sayfasının kapatılması durumunda bile verilerin korunmasını sağlayan bir mekanizmadır.

    Local Storage'dan verileri almak oldukça basittir. Öncelikle, kayıtlı verilerin local storage'da bulunup bulunmadığını kontrol ederiz. Eğer varsa, listede görüntülenen tüm verileri rahatlıkla alma işlemi gerçekleştirilir.

    Local Storage'dan Verileri Alma İşlemi
    if(localStorage.getItem("yerImleri") !== null){  let yerImleri = JSON.parse(localStorage.getItem("yerImleri"));  for(let i = 0; i < yerImleri.length; i++){   let sonuc = ` ${yerImleri[i].ad} `;   $("#liste").append(sonuc);  } }

    Bu örnekte, yer imleri listelendiği için, öncelikle local storage'da kaydedilip kaydedilmediğini kontrol ediyoruz. Eğer kaydedilmişse, JSON.parse ile yer imleri objesi alınır. Ardından, forEach fonksiyonu yardımı ile yer imleri listesi oluşturulur ve görüntülenir.

    Local Storage kullanarak, kullanıcılara yer imleri oluşturma işlemini kolaylaştırır. Verilerinin kaydedilmesi sayesinde, kullanıcılar tekrar tekrar aynı verileri girmek yerine kaydedilen yer imlerinden yararlanarak zamandan tasarruf edebilir.

    
    

    Yer İmimize Tıklama Olayı

    Yer imleri listesinde bulunan herhangi bir yere tıklandığında, bu yer iminin haritada görüntülenmesi gerekmektedir. Ayrıca, bu işlem sırasında, diğer ilgili bilgilerin ve detayların da kullanıcının hızlıca görüntülenebilmesi gerekmektedir.

    Bu işlem için, JavaScript kodları kullanılarak bir tıklama olayı oluşturulabilir. Bu tıklama olayı üzerinde çalıştığında, haritanın konumu hizalanır ve yer imi listesinde seçilen yere odaklanılır.

    Ayrıca, bu tıklama olayı ile birlikte, seçilen yer imine ait diğer bilgiler de görüntülenebilir. Örneğin, açık adres, koordinatlar ve açıklama gibi detaylar da ekranda görüntülenebilir.

    Bunun yanı sıra, tıklama olayı ile birlikte, seçilen yer imi üzerinde farklı işlemler de yapılabilir. Örneğin, seçilen yer iminin harita üzerinde işaretlenmesi, yön tarifleri alınması ve kategorize edilmesi gibi işlemler gerçekleştirilebilir.

    Tüm bu işlemler, hızlı ve kolay bir şekilde gerçekleştirilebilmesi için HTML, CSS ve JavaScript kodları kullanılarak bir arayüz oluşturulmalıdır. Bu arayüz, kullanıcıların kolayca yer imlerini görüntüleyerek, düzenleyerek veya yeni yer imleri ekleyerek haritaları anında güncellemelerine olanak sağlar.

    
    

    Yer İmleri Listesi Oluşturma Uygulama Örneği

    Yer imleri listesi oluşturma işlemi, HTML, CSS ve JavaScript kodlarından oluşur. Bu kodları kullanarak, kullanıcıların sayfaya kendi yer imlerini ekleyebileceği, kaydedebileceği ve daha sonra listede görüntüleyebileceği bir uygulama örneğini ele alalım.

    Öncelikle, HTML kodları ile bir form oluşturulur. Bu formda, kullanıcının yer imi eklemesi için gerekli alanlar sağlanır. Bu alanlar genellikle sitenin URL'si, başlığı ve açıklamasıdır. Form verileri gönderildikten ve kontrol edildikten sonra, JavaScript kullanılarak yer imlerinin local storage'a kaydedilmesi işlemi gerçekleştirilir.

    Kaydedilen yer imleri listelenirken, yine HTML ve JavaScript kodları kullanılır. Local storage'dan verilerin çekilip listede görüntülenmesi işlemi gerçekleştirilir. Listelenen her bir yer imi, tıklanabilir hale getirilir. Tıklama olayı gerçekleştiğinde, ilgili yere haritada zoom yapılması ve diğer işlemler gerçekleştirilebilir.

    HTML Kodları	CSS Kodları	JavaScript Kodları
    <form> <input type="text" id="url" name="url" placeholder="Site URL"> <input type="text" id="title" name="title" placeholder="Başlık"> <input type="text" id="description" name="description" placeholder="Açıklama"> <button onclick="addBookmark()">Yer İmi Ekle</button> </form>	ul { list-style: none; margin: 0; padding: 0; }	function addBookmark() { var url = document.getElementById('url').value; var title = document.getElementById('title').value; var description = document.getElementById('description').value; var bookmark = { url: url, title: title, description: description } if(localStorage.getItem('bookmarks') === null) { var bookmarks = []; bookmarks.push(bookmark); localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); } else { var bookmarks = JSON.parse(localStorage.getItem('bookmarks')); bookmarks.push(bookmark); localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); } }