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