Belajar Laravel - Perhitungan Sederhana Laravel Part 1

Membuat Aplikasi Perhitungan Aritmetika sederhana

Pada pertemuan kali ini kita akan membuat sebuah aplikasi sederhana menggunakan Laravel, yang mencakup materi sebelumnya seperti, Operator Aritmetika, dan Pengkondisian Switch. Jika belum mengerti materi Operator dan Pengkondisian,

Baca Selengkapnya Belajar Laravel - Basic Conditional

Langsung saja ke materi kali ini

Pertama Buka folder Routes > web.php
Isi file web.php dengan

use App\Http\Controllers\CalculationController;
Route::get('/', [CalculationController::class, 'index']);
Route::post('/', [CalculationController::class, 'calculate']);

Kemudian buat Controller baru, ketikkan di terminal perintah "php artisan make:controller CalculationController"

Ketikkan sintaks berikut kedalam "CalculationController.php"

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CalculationController extends Controller
{
    public function index()
    {
        return view('calculation');
    }

    public function calculate(Request $request)
    {
        $firstNumber = $request->input('first_number');
        $operation = $request->input('operation');
        $secondNumber = $request->input('second_number');
        $discountCode = strtoupper($request->input('discount'));
        $result = null;

        switch ($operation) {
            case 'add':
                $result = $firstNumber + $secondNumber;
                break;
            case 'subtract':
                $result = $firstNumber - $secondNumber;
                break;
            case 'multiply':
                $result = $firstNumber * $secondNumber;
                break;
            case 'divide':
                $result = $firstNumber / $secondNumber;
                break;
        }
    // Kondisi Kode Diskon
    switch ($discountCode) {
        case 'PPLG2':
            $result *= 0.3; // diskon 70%
            break;
        case 'SMKN1':
            $result *= 0.5; // diskon 50%
            break;
    }
        return view('calculation', ['result' => $result]);
    }
}

Buat file "calculation.blade.php" di dalam folder views, yang berisi sintaks berikut

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perhitungan Sederhana</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>

<body>

    <div class="container mt-3 d-flex justify-content-center">
        <div class="card align-center justify-content-center align-items-center d-flex col-md-6">
            <div class="card-body">
                <h1 class="text-center mt-1 mb-3" style="font-family: Poppins">Perhitungan Sederhana</h1>
                <hr>
                <form class="py-3" method="POST">
                    @csrf
                    <label for="first_number" class="mb-2">Angka Pertama:</label>
                    <input type="number" class="form-control" id="first_number" name="first_number" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" required><br>
                    <label for="operation" class="mb-2">Operasi:</label>
                    <select id="operation" class="form-control form-select" name="operation" required>
                        <option value="">-- Pilih Operasi Aritmatika --</option>
                        <option value="add">Penjumlahan (+)</option>
                        <option value="subtract">Pengurangan (-)</option>
                        <option value="multiply">Perkalian (*)</option>
                        <option value="divide">Pembagian (/)</option>
                    </select><br>

                    <label for="second_number" class="mb-2">Angka Kedua:</label>
                    <input type="number" class="form-control" id="second_number" name="second_number" onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" required><br>

                    <label for="discount" class="mb-2">Discount Code: <i><small>(Optional)</small></i></label>
                    <input type="text" class="form-control" id="discount" name="discount"><br>
                    <p>Special discount codes:</p>
                    <ul>
                        <li>PPLG2: 70% discount</li>
                        <li>SMKN1: 50% discount</li>
                    </ul>


                    <button type="submit" class="btn btn-primary col-md-12">Calculate</button>
                </form>
            </div>

            @if (isset($result))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    Result: {{ $result }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Jika berhasil akan tampil di browser, seperti ini

DEMO - Perhitungan Sederhana

Belajar Laravel - Perhitungan Sederhana Laravel Part 1

Membuat Aplikasi Perhitungan Aritmetika sederhana

Posting Komentar

POST ADS1

POST ADS 2