Tugas 10 - Pemrograman Web Crud Upload Photo | Muhammad Farhan Arya Wicaksono (50542310110

Dokumentasi Student Management System

Dokumentasi Student Management System

Deskripsi Aplikasi

Student Management System adalah aplikasi web untuk mengelola data mahasiswa. Aplikasi ini memungkinkan pengguna untuk menambah, melihat, mengedit, dan menghapus data mahasiswa beserta foto profil mereka.

URL Aplikasi

Aplikasi ini dapat diakses di: https://farwew-crud-upload-photo.hf.space/

URL Github Repo (source code)

Untuk Source Code: Click here

Fitur Utama

  1. Manajemen Data Mahasiswa
    • Tambah data mahasiswa baru
    • Lihat daftar semua mahasiswa
    • Edit data mahasiswa yang sudah ada
    • Hapus data mahasiswa
  2. Upload dan Manajemen Foto
    • Upload foto profil mahasiswa
    • Melihat foto dalam ukuran besar (zoom) dengan mengklik foto
    • Support format gambar standar (JPG, PNG, dll)
  3. Antarmuka Responsif
    • Tampilan yang responsif untuk berbagai ukuran layar
    • Animasi transisi yang halus
    • Desain kartu untuk menampilkan informasi mahasiswa

Cara Penggunaan

Menambah Data Mahasiswa

  1. Isi formulir "Tambah Data Mahasiswa" dengan informasi yang diperlukan:
    • NRP (wajib)
    • Nama Lengkap (wajib)
    • Jenis Kelamin (wajib)
    • Nomor Telepon (wajib)
    • Alamat (wajib)
    • Foto (opsional)
  2. Klik tombol Simpan Data untuk menyimpan informasi mahasiswa.

Melihat Data Mahasiswa

  • Semua data mahasiswa ditampilkan dalam bentuk kartu di bagian "Daftar Mahasiswa"
  • Klik tombol Refresh Data untuk memperbarui tampilan dengan data terbaru

Melihat Foto dengan Zoom

  • Klik pada foto mahasiswa untuk melihatnya dalam ukuran lebih besar
  • Klik di luar foto atau tekan tombol 'Escape' untuk menutup tampilan zoom
  • Klik tombol 'X' di pojok kanan atas untuk menutup tampilan zoom

Mengedit Data Mahasiswa

  1. Klik tombol Edit pada kartu mahasiswa yang ingin diubah
  2. Form akan terisi dengan data mahasiswa yang dipilih
  3. Ubah informasi yang diinginkan
  4. Klik Update Data untuk menyimpan perubahan, atau Batal untuk membatalkan

Menghapus Data Mahasiswa

  1. Klik tombol Hapus pada kartu mahasiswa yang ingin dihapus
  2. Konfirmasi penghapusan pada dialog yang muncul

Teknologi yang Digunakan

  • Frontend: HTML, CSS, JavaScript
  • Desain responsif dengan CSS Grid dan Flexbox
  • Komunikasi asinkron menggunakan Fetch API
  • Hosting: Hugging Face Spaces

Kebutuhan Sistem

  • Browser modern (Chrome, Firefox, Safari, Edge)
  • Koneksi internet

Catatan Tambahan

  • Data tersimpan di server dan akan tetap ada meskipun browser ditutup
  • Semua field yang bertanda * wajib diisi
  • Foto yang diupload sebaiknya berukuran kuadrat untuk tampilan optimal

Comments

Post a Comment

Popular posts from this blog

Tugas 8 - Crud Form Pendafaran

Image
Sistem Registrasi Mahasiswa Deksripsi Aplikasi ini adalah sistem registrasi mahasiswa dengan fungsi CRUD (Create, Read, Update, Delete). Aplikasi ini terdiri dari frontend yang dibuat dengan HTML, CSS, dan JavaScript yang berkomunikasi dengan API backend. Soure Code LINK TO GITHUB Halaman Web 'link to page' Endpoint API API backend dihosting di: link to API API ini menyediakan endpoint RESTful untuk mengelola data mahasiswa. API mendukung operasi CRUD standar melalui metode HTTP. Arsitektur Aplikasi ini memiliki arsitektur client-server: Frontend : HTML, CSS, dan JavaScript murni Backend : API Python yang dihosting di Hugging Face Spaces Struktur Proyek Crud/ ├── README.md ├── Back/ # Kode API Backend │ ├── .gitattributes │ ├── app.py │ ├── Dockerfile │ ├── README.md │ └── requirements.txt └── Front- end / # Kode Frontend ├── form.html ├── index.html ├── list .html ├── script .js └── style.css Komponen Fronten...
Read more

ETS - Dokumentasi Proyek Portal Berita

Image
NEWS - Portal Berita Sederhana Deskripsi Project Aplikasi web halaman berita yang menyajikan berbagai artikel, dilengkapi dengan gambar, tanggal publikasi, penulis dan fitur pencarian berita. Sebuah web portal  berita sederhana yang informatif dan responsif yang dibuat untuk memberikan informasi berita terkini yang dibuat dengan layout nya dengan HTML dan CSS. Untuk Fitur interaktif menggunakn Java Script.
Read more

Tugas 6 - Pemrograman Web (N) - Form Registration, Dropdown, and Indonesia Postal Code

Image
Tugas Pekan 6 Muhammd Farhan Arya Wicaksono (5054231011) Link untuk Source Code : Link Soure code Live Demo You can view the pages here: - Page for Indonesia Postal Code click here : Indonesia Postal Code - Page for Form Registartion click here : Form Registration Getting Started 1. Clone this repository 2. Open `index.html` in your browser 3. Start filling out the form! Technologies Used - HTML - CSS3 - JavaScript - Indonesia Postal Code API API Integration This project uses the Indonesia Postal Code API to fetch accurate postal code information. The API endpoint used is alamat.thecloudalert
Read more