Home
Website

Membuat Website Kalkulator Sederhana - UKK RPL #Part1

Membuat Website Kalkulator Sederhana - UKK RPL #Part1

Untuk membuat website sederhana untuk kalkulator digital menggunakan HTML, CSS, dan XAMPP, berikut langkah-langkahnya:

1. Install XAMPP

  • Download dan install XAMPP untuk membuat server lokal.
  • Setelah terinstall, jalankan Apache (web server) dari control panel XAMPP.

2. Siapkan Struktur Direktori

  • Buka folder htdocs di direktori instalasi XAMPP (biasanya di C:\xampp\htdocs).
  • Buat folder baru, misalnya kalkulator, untuk menyimpan file website Anda.

3. Buat File HTML

Buat file index.html di dalam folder kalkulator.

Contoh sederhana kode HTML untuk kalkulator:

<!-- Start Code HTML Index -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Digital</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendNumber('/')">/</button>
            <button onclick="appendNumber('*')">*</button>
            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button onclick="appendNumber('-')">-</button>
            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="appendNumber('+')">+</button>
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button id="equals" onclick="calculateResult()">=</button>
            <button onclick="appendNumber('0')" class="zero">0</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
<!-- Stop Code HTML Index -->

4. Buat File CSS

Buat file style.css di folder yang sama untuk memberikan tampilan pada kalkulator.

Contoh CSS:

<!-- Start Code CSS  -->
body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e0e0e0;
    margin: 0;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-width: 360px; /* Lebih lebar agar sesuai dengan tampilan */
    width: 100%;
}

#result {
    width: 90%;
    height: 80px; /* Lebih tinggi agar lebih nyaman */
    text-align: right;
    font-size: 36px; /* Font lebih besar untuk visibilitas */
    margin-bottom: 20px;
    padding: 20px; /* Padding lebih besar */
    border: none;
    border-radius: 10px;
    background-color: #f7f7f7;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

button {
    height: 60px;
    font-size: 24px;
    font-weight: bold;
    background-color: #f1f1f1;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button:hover {
    background-color: #d9d9d9;
}

button:active {
    transform: scale(0.98);
    box-shadow: none;
}

button.zero {
    grid-column: span 2;
}

button:nth-child(4n + 4) {
    background-color: #ff6666;
    color: white;
}

button:nth-child(4n + 4):hover {
    background-color: #ff4d4d;
}

button:nth-child(4n + 4):active {
    transform: scale(0.98);
}

button#equals {
    background-color: #4CAF50;
    color: white;
}

button#equals:hover {
    background-color: #45a049;
}

<!-- Stop Code CSS -->

5. Buat File JavaScript

Buat file script.js untuk mengatur fungsi kalkulator.

Contoh kode JavaScript:

<!-- Start Code JavaScript -->
function appendNumber(number) {
    document.getElementById("result").value += number;
}
function clearResult() {
    document.getElementById("result").value = "";
}
function deleteLast() {
    var result = document.getElementById("result").value;
    document.getElementById("result").value = result.slice(0, -1);
}
function calculateResult() {
    var result = document.getElementById("result").value;
    try {
        document.getElementById("result").value = eval(result);
    } catch (e) {
        document.getElementById("result").value = "Error";
    }
}

<!-- Stop Code JavaScript -->

6. Akses Website melalui Browser

  • Jalankan XAMPP dan pastikan server Apache aktif.
  • Buka browser dan ketik localhost/kalkulator untuk melihat kalkulator Anda.

Dengan struktur ini, Anda sudah membuat kalkulator digital sederhana yang bisa dijalankan di server lokal menggunakan XAMPP. Jika ingin menambahkan fitur lebih lanjut, Anda bisa mengembangkan dari contoh dasar ini.

Post a Comment