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>