Tugas 8 - Crud Form Pendafaran

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 Frontend

Halaman Utama (index.html)

Titik masuk aplikasi dengan tautan navigasi ke:

• Registrasi mahasiswa baru
• Melihat daftar mahasiswa yang terdaftar

Halaman Form (form.html)

Berisi formulir untuk menambahkan data mahasiswa baru dengan kolom untuk:

• Nama
• Alamat
• Jenis Kelamin
• Program Studi

Halaman Daftar (list.html)

Menampilkan semua mahasiswa yang terdaftar dalam tabel dengan opsi untuk:

• Mengedit informasi mahasiswa
• Menghapus data mahasiswa
• Menambahkan mahasiswa baru

API Backend

API backend dihosting di https://farwew-api-coba.hf.space dan menyediakan endpoint berikut:

Metode	Endpoint	Deskripsi
GET	/mahasiswa	Ambil semua data mahasiswa
GET	/mahasiswa/{id}	Ambil data mahasiswa berdasarkan ID
POST	/mahasiswa	Tambahkan mahasiswa baru
PUT	/mahasiswa/{id}	Perbarui data mahasiswa
DELETE	/mahasiswa/{id}	Hapus data mahasiswa

Contoh API dengan cURL

Ambil Semua Data Mahasiswa

curl -X GET https://farwew-api-coba.hf.space/mahasiswa

Ambil Mahasiswa Berdasarkan ID

curl -X GET https://farwew-api-coba.hf.space/mahasiswa/1

Buat Mahasiswa Baru

curl -X POST https://farwew-api-coba.hf.space/mahasiswa \
  -H "Content-Type: application/json" \
  -d '{
    "nama": "John Doe",
    "alamat": "Jakarta",
    "jenis_kelamin": "Laki-laki",
    "prodi": "Computer Science"
  }'

Perbarui Data Mahasiswa

curl -X PUT https://farwew-api-coba.hf.space/mahasiswa/1 \
  -H "Content-Type: application/json" \
  -d '{
    "nama": "John Doe Updated",
    "alamat": "Bandung",
    "jenis_kelamin": "Laki-laki",
    "prodi": "Computer Science"
  }'

Hapus Mahasiswa

curl -X DELETE https://farwew-api-coba.hf.space/mahasiswa/1

Fungsi 

1. Menambahkan Mahasiswa Baru

fetch(`${API_URL}/mahasiswa`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(mahasiswaData)
})

2. Melihat Mahasiswa

function fetchAndDisplayMahasiswa() {
    fetch(`${API_URL}/mahasiswa`)
        .then(response => response.json())
        .then(data => {
            // Tampilkan data dalam tabel
        })
}

3. Memperbarui Data Mahasiswa

fetch(`${API_URL}/mahasiswa/${mahasiswaId}`, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(updatedData)
})

4. Menghapus Mahasiswa

fetch(`${API_URL}/mahasiswa/${id}`, {
    method: 'DELETE'
})

Instalasi dan Pengaturan

1. clone repositori
2. Buka Front-end/index.html di browser web

Catatan: API backend sudah dideploy dan dapat diakses, sehingga tidak diperlukan pengaturan tambahan untuk API.

Teknologi yang Digunakan

• HTML5
• CSS3
• JavaScript (ES6+)
• Fetch API untuk permintaan HTTP
• Python (FastAPI) untuk backend