Javascript Ajax ve Boostrap Html Basit Xml Editör Uygulaması (örnek kod )

02-12-2023, 18:57:34

Bu kod ile xml dosyalarınızı kolay bir şekilde düzenleyip import edebileceğiniz basit bir html ve javascript ile yapilmiş küçük bir editördür.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>XML Editor</title>
  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Basit bir stil, gerçek projede daha detaylı stillendirme yapılabilir */
    .container {
      margin-top: 50px;
    }
    .product-box {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
      position: relative;
    }
    .delete-btn {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="mb-4">XML Editor</h1>
    <input type="file" id="fileInput" accept=".xml" class="mb-3"><br>
    <button onclick="exportXML()" class="btn btn-primary mb-3">XML Dışa Aktar</button>
    <button onclick="createEmptyProduct()" class="btn btn-success mb-3">Yeni Ürün Oluştur</button>
    <button onclick="resetPage()" class="btn btn-secondary mb-3">Temizle</button>
    <div id="productsContainer"></div>
  </div>
  <!-- Bootstrap JS ve jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    let xmlContent = '';
    function showProducts() {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlContent, 'text/xml');
      const products = xmlDoc.getElementsByTagName('product');
      const productsContainer = document.getElementById('productsContainer');
      Array.from(products).forEach((product, index) => {
        let id = product.querySelector('id');
        if (!id) {
          id = xmlDoc.createElement('id');
          id.textContent = index + 1;
          product.appendChild(id);
        } else {
          id = id.textContent;
        }
        const name = product.querySelector('name').textContent;
        const description = product.querySelector('description').textContent;
        const price = product.querySelector('price').textContent;
        const productBox = document.createElement('div');
        productBox.className = 'product-box';
        productBox.innerHTML = `
          <div class="form-group">
            <label for="id${index}">ID</label>
            <input type="text" class="form-control" id="id${index}" value="${id}" readonly>
          </div>
          <div class="form-group">
            <label for="name${index}">Ürün Başlığı</label>
            <input type="text" class="form-control" id="name${index}" value="${name}">
          </div>
          <div class="form-group">
            <label for="description${index}">Ürün Açıklaması</label>
            <textarea class="form-control" id="description${index}">${description}</textarea>
          </div>
          <div class="form-group">
            <label for="price${index}">Ürün Fiyatı</label>
            <input type="text" class="form-control" id="price${index}" value="${price}">
          </div>
          <div class="form-group">
            <label for="image${index}">Ürün Resmi</label>
            <input type="text" class="form-control" id="image${index}" placeholder="Ürün Resim Linki">
          </div>
          <div class="form-group">
            <label for="category${index}">Ürün Kategorisi</label>
            <input type="text" class="form-control" id="category${index}" placeholder="Ürün Kategorisi">
          </div>
          <button onclick="deleteProduct(${index})" class="delete-btn btn btn-danger">Sil</button>
        `;
        productsContainer.appendChild(productBox);
      });
    }
    function exportXML() {
      const productBoxes = document.getElementsByClassName('product-box');
      let updatedXML = '<products>';
      Array.from(productBoxes).forEach((box, index) => {
        const id = document.getElementById(`id${index}`).value;
        const name = document.getElementById(`name${index}`).value;
        const description = document.getElementById(`description${index}`).value;
        const price = document.getElementById(`price${index}`).value;
        const image = document.getElementById(`image${index}`).value;
        const category = document.getElementById(`category${index}`).value;
        updatedXML += `
          <product>
            <id>${id}</id>
            <name>${name}</name>
            <description>${description}</description>
            <price>${price}</price>
            <image>${image}</image>
            <category>${category}</category>
          </product>
        `;
      });
      updatedXML += '</products>';
      const blob = new Blob([updatedXML], { type: 'text/xml' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'edited.xml';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
    function deleteProduct(index) {
      const productBoxes = document.getElementsByClassName('product-box');
      productBoxes[index].remove();
    }
    function createEmptyProduct() {
      const productsContainer = document.getElementById('productsContainer');
      const index = productsContainer.getElementsByClassName('product-box').length;
      const productBox = document.createElement('div');
      productBox.className = 'product-box';
      productBox.innerHTML = `
        <div class="form-group">
          <label for="id${index}">ID</label>
          <input type="text" class="form-control" id="id${index}" value="${index + 1}" readonly>
        </div>
        <div class="form-group">
          <label for="name${index}">Ürün Başlığı</label>
          <input type="text" class="form-control" id="name${index}" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="description${index}">Ürün Açıklaması</label>
          <textarea class="form-control" id="description${index}" placeholder="Description"></textarea>
        </div>
        <div class="form-group">
          <label for="price${index}">Ürün Fiyatı</label>
          <input type="text" class="form-control" id="price${index}" placeholder="Price">
        </div>
        <div class="form-group">
          <label for="image${index}">Ürün Resmi</label>
          <input type="text" class="form-control" id="image${index}" placeholder="Ürün Resim Linki">
        </div>
        <div class="form-group">
          <label for="category${index}">Ürün Kategorisi</label>
          <input type="text" class="form-control" id="category${index}" placeholder="Ürün Kategorisi">
        </div>
        <button onclick="deleteProduct(${index})" class="delete-btn btn btn-danger">Sil</button>
      `;
      productsContainer.appendChild(productBox);
    }
    function resetPage() {
      document.getElementById('fileInput').value = '';
      document.getElementById('productsContainer').innerHTML = '';
    }
    document.getElementById('fileInput').addEventListener('change', function(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = function(e) {
        xmlContent = e.target.result;
        document.getElementById('productsContainer').innerHTML = '';
        showProducts();
      };
      reader.readAsText(file);
    });
  </script>
</body>
</html>

02-12-2023, 19:06:47

#2

Bayraktarr

Selamlar paylaşım için teşekkür ederim tam nasıl çalışıyor çok merak ettim fakat pek anlamıyorum
02-12-2023, 19:07:53

#3

shms

Bayraktarr adlı üyeden alıntı: mesajı görüntüle

Selamlar paylaşım için teşekkür ederim tam nasıl çalışıyor çok merak ettim fakat pek anlamıyorum

bu kodu html olarak kaydedin açin siteye gerek yok sonra sizdden bir xml dosyası istiyor onu yükleyin.
02-12-2023, 19:11:50

#4

Bayraktarr

Peki nasıl çalışıyor çalışma mantığı nedir kodun ve bu kodu yazarken nelerden yardım aldınız acaba ?

Çok mu uzun cevabı olan bir soru oldu tamamen açık kaynaklı birşey paylaşmışsınız ve iyi niyetinize istinaden soruyorum cevaplamak istemezseniz anlarım
02-12-2023, 20:21:05

#5

shms

Bayraktarr adlı üyeden alıntı: mesajı görüntüle

Peki nasıl çalışıyor çalışma mantığı nedir kodun ve bu kodu yazarken nelerden yardım aldınız acaba ?

Çok mu uzun cevabı olan bir soru oldu tamamen açık kaynaklı birşey paylaşmışsınız ve iyi niyetinize istinaden soruyorum cevaplamak istemezseniz anlarım

chatgptden yardım olarak biraz düzenleme yaptım
02-12-2023, 20:27:01

#6

Bayraktarr

shms adlı üyeden alıntı: mesajı görüntüle

chatgptden yardım olarak biraz düzenleme yaptım

Çoğumuz bu şekilde yapıyoruz olmadı ben kodu chatgpt ye sorayım kodun hangi kısmı ne işe yarıyor diye teşekkür ederim tekrar