Membuat Aplikasi Hitung Luas Persegi Panjang

Daftar isi

Setelah mempelajari Algoritma Deskriptif, Diagram Alir dan Pseudocode dapat disimpulkan bahwa pada dasarnya dalam algoritma tersebut pada umummya terdapat tahapan dalam menyelesaikan masalah yaitu ;

  1. mulai (start)
  2. masukan (input)
  3. Proses (proccess)
  4. Keluaran (output)
  5. Selesai (finish)

Bagaimana jika tahapan tersebut dipraktikkan untuk membuat aplikasi yang sesungguhnya ? Marilah kita praktikkan.

A. Persiapan

Kali ini kita akan membuat aplikasi sederhana untuk menghitung luas persegi panjang dengan bahasa pemrograman HTML, CSS(Cascade Style Sheet) dan Javascript. Anda tidak perlu khawatir jika belum menguasai pemrograman tersebut, karena akan dipandu agar mudah melakukannya. Hal-hal yang perlu disiapkan adalah :

  1. Menulis kode program, kode program dapat di tulis pada buku terlebih dahulu agar mudah untuk dilakukan pengecekan
  2. Menulis kode program pada text editor misalnya notepad, notepad ++ maupun Editor online disini.
  3. Melakukan publikasi, publikasi dilakukan dengan cara membuka hasil pengkodean menggunakan browser.

 

B. Menulis Kode Program

Berikut ini contoh kode program perpaduan HTML, Javascript, dan CSS untuk menghitung luas persegi panjang. Silahkan ditulis ulang pada teks editor/HTML Editor online. 

  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Perhitungan Luas Persegi Panjang</title>
  7. <style>
  8. body {
  9.     font-family: Arial, sans-serif;
  10.     margin: 20px;
  12.     }
  13. .container {
  14.     max-width: 300px;
  15.     margin: 0 auto;
  16.     padding: 20px;
  17.     border: 1px solid #ccc;
  18.     border-radius: 5px;
  19.      text-align:center;
  20.     }
  21. label {
  22.     display: block;
  23.     margin-bottom: 8px;
  24.     }
  25. input[type="number"] {
  26.     width: 90%;
  27.     padding: 8px;
  28.     margin-bottom: 15px;
  30.     }
  31. button {
  32.     width: 100%;
  33.     padding: 10px;
  34.     background-color: #007BFF;
  35.     color: white;
  36.     border: none;
  37.     border-radius: 5px;
  38.     cursor: pointer;
  39.     }
  40. button:hover {
  41.     background-color: #0056b3;
  42.     }
  43. .output {
  44.     margin-top: 15px;
  45.     padding: 10px;
  46.     border: 1px solid #28a745;
  47.     background-color: #d4edda;
  48.     color: #155724;
  49.     display: none;
  50.     }
  51. </style>
  52. </head>
  53. <body>
  55. <div class="container">
  56. <h4>Hitung Luas Persegi Panjang</h4>
  58. <!-- Input -->
  59. <label for="length">Masukkan Panjang:</label>
  60. <input type="number" id="length" placeholder="Masukkan panjang" required>
  62. <label for="width">Masukkan Lebar:</label>
  63. <input type="number" id="width" placeholder="Masukkan lebar" required>
  65. <!-- Process -->
  66. <button onclick="calculateArea()">Hitung Luas</button>
  68. <!-- Output -->
  69. <div id="result" class="output"></div>
  70. </div>
  72. <script>
  73. // Fungsi untuk menghitung luas Persegi panjang
  74. function calculateArea() {
  75. // Start
  76. const length = document.getElementById("length").value;
  77. const width = document.getElementById("width").value;
  79. // Validasi Input
  80. if (length === '' || width === '') {
  81. alert("Harap masukkan panjang dan lebar.");
  82. return;
  83. }
  85. // Process
  86. const area = length * width;
  88. // Output
  89. const resultDiv = document.getElementById("result");
  90. resultDiv.innerHTML = "Luas Persegi Panjang adalah: " + area;
  91. resultDiv.style.display = "block";
  93. // End
  94. }
  95. </script>
  97. </body>
  98. </html>
B. Melakukan Publikasi

Setelah selesai menulis kode program , sebaiknya mengecek kembali agar tidak ada satupun kesalahan. Karena kesalahan sedikit saja dalam menulis kode maka akan menyebabkan  pada hasil yang tidak sesuai dengan harapan, atau bahkan tidak ada tampilan sama sekali. Jika sudah yakin benar langkah selanjutnya adalah :

  1. Menyimpan file dalam format html, misalnya hitung luas persegipanjang.html.
  2. Publikasi biasanya dilakukan jika memiliki blog sendiri misalnya blogspot, wordpress, maupun alamat domain internet sendiri. Namun jika tidak memiliki silahkan dibuka menggunakan browser chrome, firefox, opera, microsoft edge atau lainnya.
C. Hasil pengkodean.

Jika kode yang anda tulis benar seharusnya tampil seperti berikut ini.

Perhitungan Luas Persegi Panjang

Hitung Luas Persegi Panjang

Selamat mencoba, semoga berhasil.

Ke Informatika 9
Ditandai, , ,