Belajar Laravel - Perhitungan Sederhana Laravel Part 2

Pada pertemuan kali ini kita akan membuat sebuah aplikasi sederhana menggunakan Laravel, beda dari sebelumnya. Sekarang kita akan membuat user dapat menginput nilai "Discount" secara bebas

Baca Selengkapnya Belajar Laravel - Basic Conditional
Baca Selengkapnya Belajar Laravel - Perhitungan Sederhana Laravel Part 1

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');
        $discount = $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;
        }

        if (!empty($discount)) {
            $result = ($result * $discount / 100); // sintaks diskon
        }

        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">Input Diskon: <i><small>(Optional)</small></i></label>
                    <div class="input-group mb-3">
                        <input type="text" placeholder="" class="form-control" id="discount" name="discount"onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;" >
                        <span class="input-group-text" id="basic-addon2">%</span>
                      </div>

                    <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 Part 2

Belajar Laravel - Perhitungan Sederhana Laravel Part 2

Posting Komentar

POST ADS1

POST ADS 2