Üniversite: İstanbul Üniversitesi - Cerrahpaşa
Fakülte: Hasan Ali Yücel Eğitim Fakültesi
Bölüm: Bilgisayar ve Öğretim Teknolojileri Eğitimi
Web Tabanlı Programlama Dersi Vize Sınavı (22.11.2023)
Yönerge:
Kendi isminizle bir klasör açınız ve tüm sayfaları açmış olduğunuz klasörün içine kaydediniz. Daha sonra klasörü arşivleyerek tek bir dosya olarak teslim ediniz. Her sorumu puanı karşısında yazmaktadır. Sınav süresi 100 dakikadır.
Dikkat edilmesi gerekenler:
Html sayfaları, formlar ve tablolar Bootstrap kullanılarak yapılacaktır. PHP kodlarının içerisine html kodu yazılmayacaktır. Çalışmayan kod değerlendirilmeye alınmayacaktır.
Soru:
Sizden kitap satışı yapan bir firma için otomasyon yapmanız istenmektedir. Bu otomasyonu yaparken sizden istenen ve dikkat etmeniz gereken noktalar aşağıda belirtilmiştir:
- Bir dizi içerisinde 10 farklı kitap (kitap adı, yazarı, fiyatı) tanımlanacak. (5 Puan)
- Dizi içerisinde tanımlanan kitaplar tablo içerisine yazılacak. (10 Puan)
- Her kitap için, kullanıcının bu kitabı sepete eklemesini sağlayacak bir “Sepete Ekle” butonu koyulacak. (5 Puan)
a. Butona tıklanınca sepete tek tek ekleme yapılabilecek (5 Puan)
b. Sepete toplu/birden fazla ekleme aynı anda yapılabilecek. (15 Puan)
c. Sepete eklenen kitaplar ayrı bir sayfada listelenebilecek. (10 Puan)
d. Sepetteki kitapların toplam fiyatı hesaplanacak. (10 Puan)
- Sepetteki kitapları satın alma işlemi yapılacak. (15 Puan)
Müşteriden alınan paranın yazılacağı bir ekran olacak. “PARA ÜSTÜ” butonuna tıklandığı zaman para üstü kasadan en az para çıkacak şekilde hesaplanacak. Para üstü aşağıdaki gibi ekrana yazdırılacak ki kasadan yanlış para üstü verilmesin. (Kasadaki Paralar: 1 TL, 5 TL, 10 TL, 20 TL, 50 TL, 100 TL, 200 TL)
Örneğin; Para üstü 576 TL ise 2 adet 200 TL, 1 adet 100 TL, 1 adet 50 TL, 1 adet 20 TL, 6 adet 1 TL.
- Para üstü hesaplama fonksiyon olarak yapılacak. Verilen para ve sepetteki toplam tutar değişken olarak gönderilecektir. Fonksiyon gerekli hesaplamayı yaptıktan sonra sonuç dönecektir. Fonksiyon içinde ekrana yazma vb. olmayacaktır. (10 Puan)
- Yukarıdaki işlemler tek sayfada yapılacaktır. (15 Puan)
Aşağıda istediğiniz özelliklere sahip bir HTML, Bootstrap, ve PHP kod örneği bulunmaktadır. Bu örneği kendi ihtiyaçlarınıza göre uyarlayabilirsiniz.
index.html:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Kitap Satış Otomasyonu</title>
</head>
<body>
<div class="container mt-5">
<h2>Kitap Satış Otomasyonu</h2>
<table class="table mt-4">
<thead>
<tr>
<th>Kitap Adı</th>
<th>Yazarı</th>
<th>Fiyatı</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- Kitapları burada listele -->
</tbody>
</table>
<div class="mt-3">
<h4>Sepet</h4>
<!-- Sepetteki kitapları burada listele -->
<p>Toplam Fiyat: <span id="totalPrice">0</span> TL</p>
<button class="btn btn-primary" onclick="completePurchase()">Satın Al</button>
</div>
<div class="mt-3">
<h4>Para Üstü Hesapla</h4>
<label for="receivedAmount">Alınan Para: </label>
<input type="number" id="receivedAmount" class="form-control" placeholder="Alınan Para Miktarı">
<button class="btn btn-success mt-2" onclick="calculateChange()">PARA ÜSTÜ HESAPLA</button>
<p id="changeResult" class="mt-2"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js:
// Kitapları içeren dizi
var books = [
{ name: "Kitap 1", author: "Yazar 1", price: 20 },
// Diğer kitaplar buraya eklenecek
];
// Sepetteki kitapları içeren dizi
var cart = [];
function displayBooks() {
var tableBody = document.querySelector('tbody');
for (var i = 0; i < books.length; i++) {
var row = tableBody.insertRow(i);
row.insertCell(0).innerText = books[i].name;
row.insertCell(1).innerText = books[i].author;
row.insertCell(2).innerText = books[i].price + " TL";
var addButton = document.createElement('button');
addButton.innerText = "Sepete Ekle";
addButton.classList.add("btn", "btn-success");
addButton.onclick = function (index) {
return function () {
addToCart(index);
};
}(i);
row.insertCell(3).appendChild(addButton);
}
}
function addToCart(index) {
cart.push(books[index]);
updateCart();
}
function updateCart() {
var totalPrice = 0;
var cartList = document.getElementById('cartList');
cartList.innerHTML = "";
for (var i = 0; i < cart.length; i++) {
var listItem = document.createElement('li');
listItem.innerText = cart[i].name + " - " + cart[i].price + " TL";
cartList.appendChild(listItem);
totalPrice += cart[i].price;
}
document.getElementById('totalPrice').innerText = totalPrice;
}
function completePurchase() {
// Satın alma işlemi
alert("Satın alma işlemi tamamlandı!");
cart = [];
updateCart();
}
function calculateChange() {
var receivedAmount = document.getElementById('receivedAmount').value;
var totalPrice = document.getElementById('totalPrice').innerText;
// Para üstü hesaplaması yapılacak
var changeResult = calculateChangeFunction(receivedAmount, totalPrice);
document.getElementById('changeResult').innerText = "Para Üstü: " + changeResult;
}
function calculateChangeFunction(receivedAmount, totalPrice) {
// Para üstü hesaplaması yapılacak fonksiyon
var change = receivedAmount - totalPrice;
var changeResult = "";
var denominations = [200, 100, 50, 20, 10, 5, 1];
for (var i = 0; i < denominations.length; i++) {
var count = Math.floor(change / denominations[i]);
if (count > 0) {
changeResult += count + " adet " + denominations[i] + " TL, ";
change %= denominations[i];
}
}
return changeResult.slice(0, -2); // Son iki karakteri silerek virgülü kaldır
}
displayBooks();
Notlar:
- Kitapları ve fiyatları kendi ihtiyacınıza göre güncelleyin.
- Kodun doğru çalışması için jQuery ve Bootstrap kütüphanelerinin eklenmiş olması önemlidir.
- Sepete eklenen kitaplar, ayrı bir sayfada listelenmedi, bunu eklemek size kalmış.
- “PARA ÜSTÜ HESAPLA” butonuna tıklandığında para üstü ekrana yazdırılmaktadır.
- Veritabanı bağlantısı veya başka güvenlik önlemleri eklemek gerekebilir, bu örnek sadece temel bir yapıdır.
1 Beğeni