JavaScript İle Form Verilerini Paylaşma

Adı : JavaScript İle Form Verilerini Paylaşma

JavaScript'in birçok farklı kullanım alanı vardır ve web geliştirme açısından oldukça faydalıdır. İlerleyen yıllarda internet dünyasının her geçen gün daha da büyümesiyle birlikte, JavaScript'in kullanım alanları da artmıştır. Bu yazıda, JavaScript kullanarak form verilerini nasıl paylaşabileceğiniz hakkında bilgi vereceğim.

Öncelikle, JavaScript kullanarak form verilerini paylaşmanın birçok şekli vardır. Bunlar arasında form bilgilerinin e-posta yoluyla gönderilmesi, form verilerinin bir veritabanına kaydedilmesi veya bir API'ye gönderilmesi gibi yöntemler yer alır. Bu yazıda, bu yöntemlerin bazılarını ele alacağım.

1) Form Bilgilerinin E-posta Yoluyla Gönderilmesi

Form verilerini e-posta yoluyla paylaşmanın en yaygın ve basit yolu, bir formun \"submit\" edildiği zaman bir e-posta göndermek için JavaScript kullanmaktır. Öncelikle, bir HTML formu oluşturmanız gerekiyor.

```html

Adınız:



E-posta Adresiniz:



Mesajınız:

```

Bu formu göndermek için bir JavaScript işlevi yazmamız gerekiyor. Aşağıdaki kod örneği, formun \"submit\" edildiği zaman bir e-posta göndermek için bir JavaScript işlevi göstermektedir.

```javascript
function sendEmail() {
// Form verilerini alın
var name = document.getElementById(\"name\").value;
var email = document.getElementById(\"email\").value;
var message = document.getElementById(\"message\").value;

// E-posta gönderme işlemi
Email.send({
Host: \"smtp.gmail.com\",
Username: \"myemail@gmail.com\",
Password: \"mypassword\",
To: \"recipient@domain.com\",
From: \"myemail@gmail.com\",
Subject: \"Yeni Bir Mesaj Aldınız\",
Body: \"Name: \" + name + \"
Email: \" + email + \"
Message: \" + message
}).then(
message => alert(\"Mesajınız başarıyla gönderildi.\")
);
}
```

Yukarıdaki kod örneği, Email.js adlı bir JavaScript kütüphanesini kullanmaktadır. Bu kütüphane, HTML ve JavaScript kullanarak e-posta göndermeyi basitleştirmeyi amaçlamaktadır. E-posta göndermek için kullanılacak ana bilgiler, \"Username\" ve \"Password\" gibi özelliklerle ve gönderilecek kişinin adresi \"To\" özelliği ile belirtilir. \"From\" özelliği, gönderenin e-posta adresini belirtir. \"Subject\" özelliği, e-posta konusunu belirtir. \"Body\" özelliği ise e-posta gövdesini belirtir. Bu özellikler, e-posta gönderme işlemi için gereklidir.

2) Form Verilerinin Veritabanına Kaydedilmesi

Form verilerinin bir veritabanına kaydedilmesi, özellikle bir web uygulaması geliştirirken sık sık kullanılan bir yöntemdir. Bu yöntem, kullanıcının formu doldurduktan sonra verilerin kalıcı olarak saklanmasını sağlayarak, gelecekteki analizler için faydalı veri kaynakları oluşturabilir.

Bu işlem için JavaScript'in bir veritabanına erişim sağlamayı mümkün kılan IndexedDB API'sini kullanabiliriz. Bu API, tarayıcının yerel deposuna (local storage) erişim sağlayarak verilerin orada kalıcı olarak saklanmasına izin verir.

Aşağıdaki örnekte, IndexedDB API'sini kullanarak form verilerini bir veritabanına kaydetmek için bir JavaScript kodu gösterilmiştir.

```javascript
// Veritabanı adı ve sürümü
var dbName = \"FormData\";
var dbVersion = \"1\";

// IndexedDB'nin açılması ve veritabanına erişim sağlanması
var request = indexedDB.open(dbName, dbVersion);

request.onerror = function(event) {
console.log(\"Veritabanı açılamadı.\");
};

request.onsuccess = function(event) {
var db = event.target.result;
console.log(\"Veritabanına başarıyla erişildi.\");

// Form verilerinin Değişkenlere atanması
var name = document.getElementById(\"name\").value;
var email = document.getElementById(\"email\").value;
var message = document.getElementById(\"message\").value;

// Veritabanına verilerin Kaydedilmesi
var transaction = db.transaction([\"FormData\"], \"readwrite\");
var objectStore = transaction.objectStore(\"FormData\");
var request = objectStore.add({ name: name, email: email, message: message });

request.onerror = function(event) {
console.log(\"Veritabanına veri eklenirken hata oluştu.\");
};

request.onsuccess = function(event) {
console.log(\"Form verileri başarıyla kaydedildi.\");
};
};

request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(\"FormData\", { keyPath: \"id\", autoIncrement:true });
console.log(\"Veritabanı oluşturuldu.\");
};
```

Yukarıdaki kod, IndexedDB veritabanına erişmek için bir \"request\" nesnesi oluşturur. Bu nesne üzerinden veritabanının açılması ve kontrol edilmesi sağlanır. Eğer veritabanı daha önceden oluşturulmamışsa, \"onupgradeneeded\" fonksiyonu çalışır ve veritabanı oluşturulur. Veritabanı oluşturulduktan sonra, veriler veritabanına bir \"add\" işlemiyle kaydedilir.

3) Form Verilerinin Bir API'ye Gönderilmesi

API'ler, farklı platformlar arasında veri paylaşımı yapmanın en yaygın yollarından biridir. Form verilerini bir API'ye göndermek için, öncelikle bir API'ye erişmeniz gerekir. Bu örnekte, JSONPlaceholder adlı bir API kullanacağız. Bu API, geliştirme amaçlı olarak hizmet vermektedir.

```javascript
// Form verilerinin Değişkenlere atanması
var name = document.getElementById(\"name\").value;
var email = document.getElementById(\"email\").value;
var message = document.getElementById(\"message\").value;

// API'ye Verilerin Gönderilmesi
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: name,
body: message,
userId: email
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',