Add files via upload

agelrozali · Mar 6, 2024 · a9f7771 · a9f7771
1 parent d0bb4a2
commit a9f7771
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 0 deletions.
diff --git a/dataDisplay.js b/dataDisplay.js
@@ -0,0 +1,34 @@
+function showData() {
+    const contentDiv = document.getElementById('content');
+
+    contentDiv.innerHTML = `
+      <h2>Data Ikan</h2>
+      <table id="dataTable">
+        <tr>
+          <th>Nomor</th>
+          <th>Jenis</th>
+          <th>Gambar Ikan</th>
+        </tr>
+      </table>
+    `;
+
+    const dataTable = document.getElementById('dataTable');
+
+    // Ambil data ikan dari database atau penyimpanan yang sesuai dan tampilkan dalam tabel
+    // Contoh:
+    const data = [
+      { no: 1, jenis: "Ikan Nila", gambar: "gambar1.jpg" },
+      { no: 2, jenis: "Ikan Lele", gambar: "gambar2.jpg" },
+      { no: 3, jenis: "Ikan Gurame", gambar: "gambar3.jpg" }
+    ];
+
+    data.forEach((item) => {
+      const row = document.createElement('tr');
+      row.innerHTML = `
+        <td>${item.no}</td>
+        <td>${item.jenis}</td>
+        <td><img src="${item.gambar}" alt="${item.jenis}" width="100"></td>
+      `;
+      dataTable.appendChild(row);
+    });
+  }
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>User Login</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div class="logo">
+    <img src="logo_unpam.png" alt="Logo UNPAM">
+    <h1>Nama Kelompok</h1>
+  </div>
+
+  <div id="content"></div>
+
+  <script src="login.js"></script>
+  <script src="mainMenu.js"></script>
+  <script src="inputData.js"></script>
+  <script src="dataDisplay.js"></script>
+  <script src="preview.js"></script>
+</body>
+</html>
diff --git a/inputdata.js b/inputdata.js
@@ -0,0 +1,25 @@
+function showInputForm() {
+    const contentDiv = document.getElementById('content');
+
+    contentDiv.innerHTML = `
+      <h2>Input Data Ikan</h2>
+      <form id="dataForm">
+        <label for="no">Nomor:</label>
+        <input type="text" id="no" name="no" required><br><br>
+        <label for="jenis">Jenis:</label>
+        <input type="text" id="jenis" name="jenis" required><br><br>
+        <label for="gambar">Gambar Ikan:</label>
+        <input type="file" id="gambar" name="gambar" required><br><br>
+        <input type="submit" value="Save">
+      </form>
+    `;
+
+    const dataForm = document.getElementById('dataForm');
+    dataForm.addEventListener('submit', (event) => {
+      event.preventDefault();
+      // Proses penyimpanan data ikan
+      // ...
+      // Jika penyimpanan berhasil, tampilkan pesan sukses
+      contentDiv.innerHTML = '<h2>Data ikan berhasil disimpan!</h2>';
+    });
+  }
diff --git a/login.js b/login.js
@@ -0,0 +1,23 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+    const contentDiv = document.getElementById('content');
+
+    contentDiv.innerHTML = `
+      <h2>Login</h2>
+      <form id="loginForm">
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" required><br><br>
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" required><br><br>
+        <input type="submit" value="Login">
+      </form>
+    `;
+
+    const loginForm = document.getElementById('loginForm');
+    loginForm.addEventListener('submit', (event) => {
+      event.preventDefault();
+      // Proses login pengguna
+      // ...
+      // Jika login berhasil, tampilkan menu utama
+      showMainMenu();
+    });
+  });
diff --git a/mainMenu.js b/mainMenu.js
@@ -0,0 +1,23 @@
+function showMainMenu() {
+    const contentDiv = document.getElementById('content');
+
+    contentDiv.innerHTML = `
+      <div class="logo">
+        <img src="logo_unpam.png" alt="Logo UNPAM">
+        <h1>Nama Kelompok</h1>
+      </div>
+  
+      <h2>Menu Utama</h2>
+      <button onclick="showInputForm()">Input Data</button>
+      <button onclick="showData()">Tampilkan Data</button>
+      <button onclick="showPreview()">Preview</button>
+      <button onclick="logout()">Tutup</button>
+    `;
+  }
+
+  function logout() {
+    // Proses logout pengguna
+    // ...
+    // Kembali ke halaman login
+    window.location.reload();
+  }
diff --git a/preview.js b/preview.js
@@ -0,0 +1,31 @@
+function showPreview() {
+    const contentDiv = document.getElementById('content');
+
+    contentDiv.innerHTML = `
+      <h2>Preview</h2>
+      <div class="preview">
+        <img id="previewImage" src="" alt="Preview" width="200">
+        <button class="close-btn" onclick="closePreview()">Tutup</button>
+      </div>
+    `;
+
+    const previewImage = document.getElementById('previewImage');
+    const fileInput = document.getElementById('gambar');
+
+    fileInput.addEventListener('change', (event) => {
+      const file = event.target.files[0];
+      const reader = new FileReader();
+
+      reader.onload = function(e) {
+        previewImage.src = e.target.result;
+      }
+
+      reader.readAsDataURL(file);
+      contentDiv.querySelector('.preview').style.display = 'block';
+    });
+  }
+
+  function closePreview() {
+    const contentDiv = document.getElementById('content');
+    contentDiv.querySelector('.preview').style.display = 'none';
+  }
diff --git a/style.css b/style.css
@@ -0,0 +1,15 @@
+.logo {
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  #content {
+    text-align: center;
+    margin-top: 50px;
+  }
+
+  .input-form, .data-table, .preview, .close-btn {
+    display: none;
+    text-align: center;
+    margin-top: 20px;
+  }