EAS PWEB 2022

Putu Ravindra Wiguna

5025201237

EAS Pemograman Web B

1. Rancangan Aplikasi

a. Deskripsi:

Aplikasi pendaftaran calon pegawai kementrian kelautan dan perikanan provinsi Jawa Timur. Aplikasi ini akan digunakan oleh masyarakat yang ingin mendaftar sebagai calon pegawai pada kementrian kelautan dan perikanan. Aplikasi ini hanya menangani pendaftaran berkas, yakni pendaftar akan mendaftarkan dirinya pada aplikasi dengan mengisi data diri pada formulir serta mengirimkan berkas, data-data tersebut beserta berkasnya akan disimpan oleh aplikasi pada suatu database untuk diverifikasi oleh kementrian kelautan dan perikanan. Setiap calon pegawai yang ingin mendaftar perlu membuat akun terlebih dahulu. Pendaftar dapat mengedit datanya, tetapi hanya sampai batas tanggal tertentu, kemudian setelah tanggal tersebut tidak bisa lagi, dan itu saatnya memverifikasi.

Pegawai ataupun staff pada kementrian kelautan dan perikanan yang bertugas untuk memverifikasi berkas calon pegawai dapat menggunakan aplikasi tersebut untuk melihat data-data mengenai pendaftar calon pegawai beserta berkas yang dimilikinya, kemudian pula pada aplikasi tersebut pegawai dapat memilih pendaftar yang lolos seleksi berkas. Setiap pegawai yang memiliki wewenang untuk menyeleksi mendapatkan akun pegawai yang memiliki authority/privilege lebih tinggi dari aku pendaftar.

Pendaftar yang lolos verifikasi berkas akan mendapatkan kartu ujian masuk dari aplikasi yang nantinya akan digunakan untuk seleksi ujuan offline sesuai lokasi yang telah ditentukan

b. Rancang UI:

c. Rancang Tabel dan Database:

Tabel yang diperlukan untuk aplikasi ini antara lain:

1. Tabel Akun:

Tabel ini berisikan data-data akun yang dapat login/ masuk ke aplikasi, setiap pendaftar yang membuat akun akan disimpan di sini, beserta pula akin verifier (pegawai).

Berisi atribut seperti:

- Id Akun , integer

- Email, string

- Username, string

- Nama, string

- Hashed Password, string

- Level privilege (untuk pendaftar, pegawai, dan admin), integer

Yang mana id akan autoincrement

2. Tabel Pendaftar

Pada tabel ini berisikan data diri dari pendaftar beserta path menuju berkas yang telah dikirimkan, terdapat atribut seperti:

- Id pendaftar (no pendaftaran) (primary key), integer

- Id akun (foreign key), integer

- NIK, string

- Nama, string

- Tanggal Lahir, date

- Tempat Lahir, string

- Jenis Kelamin, string/char

- Alamat, string

- Kecamatan, string

- Kabupaten, string

- Agama, string

- Status Perkawinan, boolean

- Pekerjaan, string

- Path ke berkas pendaftaran (yang sudah di .zip/.rar), string

- Path ke foto diri, string

Yang mana id akan autoincrement

3. Tabel Pendaftar Lolos

Berisikan pendaftar yang telah lolos verifikasi berkas, berisikan atribut:

- Id pendaftar lolos (primary key), integer

- Id pendaftar (foreign key), integer

- Id verifier (orang yang memverifikasi), integer

- Tanggal & waktu lolos verifikasi, datetime

- Lokasi Ujian, string

- Sesi ujian (1,2,3…), integer

- Tanggal ujian, date

- Waktu ujian mulai, time

- Waktu ujian selesai, time

Yang mana id akan autoincrement

4. Tabel sesi dan waktu ujian

Berisi atribut:

- Id sesi, primary key, integer

- Waktu ujian mulai, time

- Waktu ujian selesai, time

d. Algoritma dan Nama Proses Backend

1. Proses Daftar Akun Pendaftar:

Proses ini dilakukan pada saat pendaftar mendaftarkan akunnya, di sini di asumsikan pendaftar telah mengisi form data diri dan juga email, username beserta password untuk akunnya.

Dalam proses ini akan melakukan 2 hal yaitu membuat akun dan menyimpan data isian form ke dalam database.

Algoritma Proses pertama:

a. Mengambil seluruh data akun seperti nama, email, username dan password dari isian form

b. Dilakukan validasi pengisian ( dilakukan juga dengan javascript (client), dan php (server), agar semakin baik.

c. Password akan di encrypt sebelum disimpan dalam database

d. Data tersebut kemudian ditambahkan ke dalam tabel Akun dengan privilege diset ke 0 yaitu pendaftar

e. Jika berhasil lanjut ke proses 2

Proses kedua (setelah menyimpan akun):

a. Mengambil seluruh data pendaftar seperti NIK, Nama, dan sebagainya sesuai KTP yang diperlukan.

b. Melakukan validasi data (sama seperti di atas, juga dilakukan dengan javascript dan php)

c. Data tersebut kemudian dimasukkan ke dalam tabel pendaftar dengan path berkas pendaftaran dan foto diri dibuat null, kedua data ini akan diisi nantinya selama batas tanggal pendaftaran oleh pendaftar setelah proses ini berhasil.

d. Jika berhasil bawa user ke halaman utama (sudah login)

2. Proses Upload Berkas dan Foto Pendaftar:

Proses ini dilakukan setelah pendaftar berhasil membuat akun dan mengisi form data diri. Di sini pendaftar akan mengupload berkas pendaftaran seperti KTP dan Ijazah serta foto diri mereka.

Algoritma:

a. Mengambil data file berkas yang telah diunggah

b. File berkas dicek ukurannya beserta formatnya, jika memenuhi lanjut

c. File disimpan pada server,

d. Pada tabel pendaftar di update pada bagian path berkas dan foto

e. Jika keseluruhan berhasil, bawa user ke halaman utama

3. Proses Edit Data Pendaftar

Proses yang seupa dengan daftar hanya saja dilakukan setelah user mendaftar, dimana user dapat mengubah data diri yang diberikan selama masih waktu pendaftaran

Algoritma:

a. Mengambil seluruh data pendaftar seperti NIK, Nama, dan sebagainya sesuai KTP yang diperlukan.

b. Melakukan validasi data (sama seperti di atas, juga dilakukan dengan javascript dan php)

c. Data tersebut kemudian digunakan untuk mengupdate tabel pendaftar sesuai id pendaftar

d. Jika berhasil bawa user ke halaman utama (sudah login)

4. Proses Edit Berkas dan Foto Pendaftar:

Kurang lebih serupa dengan upload berkas dan foto pendaftar, hanya saja dilakukan setelah mengupload berkas dan foto.

Algoritma:

a. Mengambil data file berkas baru yang telah diunggah

b. File berkas dicek ukurannya beserta formatnya, jika memenuhi lanjut

c. File disimpan pada server,

d. Fila lama dihapus

e. Pada tabel pendaftar di update pada bagian path berkas dan foto

f. Jika keseluruhan berhasil, bawa user ke halaman utama

5. Proses Delete Pendaftar

Proses ini hanya dapat dilakukan oleh admin

Algoritma:

a. Mengambil id pendaftar yang akan dihapus

b. Menghapus file berkas yang ada

c. Mengdrop data dari tabel pendaftar

d. Menghapus data akun pendaftar

6. Proses Lihat Data Diri

Untuk user melihat data diri yang telah disubmit

Algoritma:

a. Mengambil data diri sesuiai id pendaftar

b. Menampilkannya dalam bentuk tabel yang cantik

7. Proses Lihat Berkas

Untuk user melihat berkasyang telah disubmit

Algoritma:

c. Mengambil path berkas dan foto sesuiai id pendaftar

d. Menampilkan foto dan menampilkan nama file berkas yang diupload

8. Proses lihat seluruh pendaftar

Dilakukan oleh pegawai verifier. Untuk berkas dapat di download

Algoritma:

1. Mengambil isi data tabel pendaftar kecuali path, path diganti menjadi download berkas.

2. Menampilkannya dalam bentuk tabel yang cantik

9. Proses lihat 1 pendaftar

Dilakukan oleh verifier untuk lebih fokus ke 1 orang

Algoritma:

a. Mengambil data diri pendaftar dengan id yang diinginkan

b. Tampilkan dengan bentuk tabel yang cantik

10. Proses verifikasi pendaftar

Setelah pegawai mengatakan OK pada pendaftar, maka sistem akan menambahkan data pendaftar ke tabel pendaftar lolos

Algoritma:

a. Ambil data pendaftar sesuai id

b. Tambahkan data ke tabel pendaftar lolos dengan data id karyawan sekarang, id pendaftar, waktu verifikasi serta lokasi, sesi, tanggal dan waktu ujuan default (berisi initial value yang nanti akan diganti)

11. Proses edit verifikasi

Untuk mengedit manual jika ada kesalahan dari sistem

Algoritma:
a. Ambil data dari form edit verifikasi dan edit isi data tabel pendaftar lolos

12. Proses delete verifikasi

Untuk menghapus data pendaftar yang terverifikasi jika ada kesalahan

Algoritma:

a. Ambil id yang akan dihapus

b. Hapus data pendaftar lolos sesuai id

13. Proses assign lokasi dan waktu ujian

Agar otomatis dan tidak perlu atur sendiri

Algoritma:

a. Ambil seluruh data pendaftar lolos dari tabel

b. Inisiasi tanggal ujian dan sesi serta waktu sesuai sesi, serta total peserta tiap sesi di tiap lokasi

c. Iterasikan tiap pendaftar dengan:

a. Pilih lokasi ujian yang ada yang masih tersedia slot (jika ada 1 maka pilih itu, jika ada 2 dipilih dengan iterasi ganjil genap)

b. Masukkan lokasi, sesi, tanggal dan waktu ke tabel untuk pendaftar tersebut

c. Increment jumlah peserta sesi pada lokasi tersebut

d. Jika sesi penuh, update current session ke sesi berikutnya

e. Jika sesi sudah penuh sampai sesi terakhir dilokasi itu, hilangkan lokasi dari available lokasi,

f. Jika sesi penuh sampai akhir dan tidaka ada lokasi tersedia dihari itu, maka increment tanggal ujian dan reset semua variabel sesi dan total sesi tiap lokasi serta available lokasi

g. Ulangi hingga seluruh peserta mendapatkan lokasi, tanggal, sesi, dan waktu ujian

==========================================================================

Implementasi:

Dibuat menggunakan HTML, CSS, JS, dan PHP Vanilla dan bantuan library bootstrap untuk mempercantik tampilan.

Repository:Github

Link Deploy: Pendaftaran Pegawai Kementrian Kelautan dan Perikanan (greencatering.online)

*untuk code github dan kode deploy ada sedikit perbedaan karena perlu melakukan konfigurasi berbeda dan penyesuaian lainnya, tetapi secara keseluruhan sama.

Link Demo: Demo EAS PWEB B 2022 - YouTube

Front End: terdapat halaman seperti berikut

index.php (termasuk navbar.php)