LAPORAN PROTOTYPE HCI PROJEK PARMAD JOB 1. Halaman Utama
Gambar :1
Halaman utama terdiri dari dua button yaitu Login dan Register. Klik button Login menuju ke halaman Login (Gambar :1.1) dan Klik button Register menuju halaman Register (Gambar :1.2). 2. Halaman Login
User Name
Muhibuddin
Sandi
**********
Ingat saya!
Lupa Sandi?
MASUK
Gambar :1.1
Halaman login terdapat satu button yaitu Masuk. Klik button Masuk memiliki tiga kondisi, jika form Login terisi dengan benar maka selanjutnya memilki dua tujuan halaman yaitu jika User biasa maka akan menuju ke Halaman Profil (Gambar :2) dan jika Admin akan menuju ke Halaman Admin. Jika kondisi form Login tidak terisi dengan benar maka akan menampilkan Pop Up Salah Sandi (Gambar :1.1.1) dan jika kondisi dimana Username belum terdaftar maka akan muncul Pop Up Belum Registrasi (Gambar :1.1.3). 3. Pop Up Salah Sandi
*Anda memasukkan sandi yang salah! Dapatkan Sandi Disini! IYA Gambar :1.1.1
Pop Up Salah Sandi memiliki sebuah Link dari kata “Disini” yang menuju ke halaman Lupa Sandi (Gambar :1.1.2). 4. Halaman Lupa Sandi
LUPASANDI
Masukkan Email
[email protected]
Capcha
1X7 68aZ
Ganti Capcha
Masukkan Capcha 1X768aZ
KIRIM
Gambar :1.1.2
Halaman Lupa Sandi memililiki satu button yaitu Kirim. Setelah klik button Kirim maka selanjutnya akan menuju ke Halaman Utama (Gambar :1).
5. Pop Up Belum Registrasi
Anda belum melakukan Registrasi! Registrasi Sekarang? TIDAK
IYA
Pop Up Belum Registrasi memiliki dua button yaitu Iya dan Tidak. Klik button Tidak akan menuju ke Halaman Utama (Gambar :1) dan klik button Iya maka akan menuju ke Halaman Register (Gambar :1.2). 6. Halaman Register
REGISTER
Nama Depan Muhib
Nama Belakang
buddin
Angkatan
2014
Jurusan/Prodi
Informatika
Kelamin
Laki-Laki
No Handphone
082277471728
Spesialis
Web Design
Pengalaman Kerja: Posisi
Jabatan
Kreatif
Waktu Bergabung
19 Juni 2016
Email
[email protected] Capcha
1X7 68aZ
Anggota
Username
Muhibuddin
Sandi
*************
Masukkan Capcha Ganti Capcha
1X768aZ
SUBMIT
Gambar :1.2
Halaman Register memiliki satu button Submit. Setelah pengisian form register selesai, klik button Submit akan menuju ke Halaman Profile (Gambar : 2).
7. Halaman Profil
Muhibuddin
PROFIL
GANTI FOTO
UPDATEPROFIL
Nama Prodi Angkatan Kelamin Spesialis Email Hanphone
: Muhibuddin : Informatika : 2014 : Laki-Laki : Web Design :
[email protected] : 082277471826
POSTINGJOB
CARI JOB
AMBIL JOB
Gambar : 2
Halaman Profil memiliki beberapa button yaitu : a. Update Profile menuju Halaman Update Profile (Gambar : 2.1). b. Posting Job menuju Halaman Posting Job (Gambar : 2.2). c. Cari Job menuju Halaman Cari Job (Gambar : 2.3). d. Ambil Job menuju Halaman Ambil Job (Gambar : 2.4). e. Ganti Foto menampilkan Browse Upload File (Gambar : 2.5).
8. Halaman Update Profil
Muhibuddin
UPDATEPROFIL
Nama Depan Muhib
Nama Belakang
buddin
Angkatan
2014
Jurusan/Prodi
Informatika
Kelamin
Laki-Laki
No Handphone
082277471728
Spesialis
Web Design
Pengalaman Kerja: Posisi
Jabatan
Kreatif
Waktu Bergabung
19 Juni 2016
Email
[email protected] Capcha
1X7 68aZ
Anggota
Username
Muhibuddin
Sandi
*************
Masukkan Capcha Ganti Capcha
1X768aZ
SUBMIT
Gambar : 2.1
Halaman Update Profil memiliki satu button yaitu Submit. Klik button Submit akan menampilkan pemberitahuan Update Profil Berhasil (Gambar :2.1.1) yang selanjutnya secara langsung akan menuju ke Halaman Profil (Gambar :2). 9. Update Profile Berhasil
Update Profil Berhasil. Gambar :2.1.1
Gambar ini akan muncul dan akan menghilang secara otomatis dalam hitungan detik di bagian atas halaman.
10. Halaman Posting Job
Muhibuddin
JOB
Judul Job
DESAINWEB
Pendaftaran Ditutup Pada Tanggal Detil Job
15 November 2016
Dibutuhkan satu tim desain web untuk kementrian pendidikan. Lama pengerjaan dua minggu. Pendaftaran ditutup pada tanggal 15 November 2016. UPLOADFOTO
Persyaratan: Admin tidak bertanggung jawab atas kebenaran informasi hasil postingan user Saya telah membaca dan menyetujui persyaratan!
POSTING
Gambar : 2.2
a.
Halaman Posting Job terdapat dua button yaitu Upload Foto dan Posting. Button Upload Foto akan menampilkan Browse Upload File (Gambar : 2.5) untuk mengisi gambar, sedangkan button Posting sendiri memiliki kondisi dimana apabila check box persetujuan persyaratan belum di setujui maka akan menamilkan Pop Up Belum Menyetujui Persyaratan (Gambar :2.2.1), namun diluar kondisi tersebut maka selanjutnya akan menuju ke Halaman Posting Job (Gambar : 2.2).
11. Pop Up Belum Menyetujui Persyaratan
*Anda belum menyetujui Persyaratan! Gambar :2.2.1
12. Halaman Posting Job
Muhibuddin
LISTPOSTINGJOB
No
Tanggal
Judul Job
1
10-11-2016
DESAINWEB
Appl ican
SELESAI
Status
2
12-10-2016
PROGRAMWEB
Appl ican
SELESAI
3
23-08-2016
DESAIn LOGO
Appl ican
SELESAI
4
09-05-2016
buat apl ikasi par mad job
Appl ican
SELESAI
TAMBAH
Gambar : 2.2
Halaman Posting Job manyampaikan informasi history posting job. Dihalaman ini juga terdiri dari beberapa button yaitu Button Applican menampilkan informasi user lain yang telah mendaftar di job tersebut seperti yang ditunjukkan pada Informasi List Applican (Gambar : 2.2.1), Button Selasai diklik apabila sebuah pekerjaan telah selesai yang selanjutnya dipastikan dengan informasi pertanyaan dalam bentuk Pop Up apakah pekerjaan ini telah selesai seperti pada Gambar : 2.2.2 kemudian menampilkan perintah untuk meRatting Applican (Gambar : 2.2.2.1) selanjutnya button Selesai akan berubah warna menjadi pudar yang artinya button ini sudah tidak tersedia. Selanjutnya terdapat button Tambah yang berfungsi untuk menambahkan postingan baru yang kemudian akan memunculkan halaman Posting Job (Gambar : 2.2) atau pada point 10.
13. Informasi List Applican
Muhibuddin
LISTPOSTINGJOB
APPLICAN
Tanggal
Anda boleh memilih lebih dari satu applican! Judul Job
1
10-11-2016
DESAINWEB
2
12-10-2016
3
23-08-2016
4
09-05-2016
No
1 Muhibuddin 2 YEni nur ohmah PROG B 3RAMWE kenindr a DESAIn 4 LOGO ahmad haf if hidayat yogi uchl is buat5apl ikasi parm m ad job 6 muhammad al dil l a 7 dwiki cahya gumil ang 8 sor aya intan nur cahya 9 muhtar baswar a achsan TUTUP
Appl ican
SELESAI
Appl ican
SELESAI
Appl ican
SELESAI
Appl ican
SELESAI
SUBMIT
TAMBAH
Gambar : 2.2.1
Imformasi List Applikan terdiri dari Check Box di bagian kanan yang berfungsi untuk menyeleksi atau memilih applikan dengan ketentuan boleh lebih dari satu, button Nama Applican menampilkan Pop Up Profil Applikan (Gambar 2.2.1.2), button Submit befungsi untuk menerima apllican yang dilanjutkan dengan informasi Berhasil Memilih Applican (Gambar : 2.2.1.1) dan button Tutup. 14. Berhasil Memilih Applican
Anda Berhasil Memilih 1 Applican. TUTUP Gambar : 2.2.1.1
Informasi ini juga menampilkan Jumlah Apllican yang diterima, button tutup untuk menutup informasi yang ditampilkan juga Informasi List Applican.
15. Pop Up Apakah Pekerjaan Sudah Selesai
Apakah pekerjaan sudah selesai? TIDAK
IYA Gambar : 2.2.2
Button Tidak untuk membatalkan dan button Iya akan menampilkan perintah Ratting Applican (Gambar : 2.2.2 .1). 16. Ratting Applican
RATTINGAPPLICAN
AHMAD HAFIF
Masukkan Komentar Senang Bekerja Dengan Anda!
SUBMIT Gambar 2.2.2.1
Ratting Applican dilakukan dengan memilih jumlah bintang kemudian dilanjutkan dengan mengisi kolom komentar. Button Submit untuk mengirim komentar. Rantting Applican akan muncul sebanyak jumlah applican yang mengerjakan pekerjan tersebut.
17. Pop Up Profil Applikan
Muhibuddin
LISTPOSTINGJOB
APPLICAN
Tanggal
Anda boleh memilih lebih dari satu applican! Judul Job
1
10-11-2016
DESAINWEB
2
12-10-2016
3
23-08-2016
4
09-05-2016
No
1 Muhibuddin PROFIL 2 YEni nur ohmah PROG B 3RAMWE kenindr a DESAIn 4 LOGO ahmad haf if hidayat yogi uchl is buat5apl ikasi parm m ad job 6 muhammad al dil l a 7 dwiki cahya gumil ang 8 sor aya intan nur cahya 9 muhtar baswar a achsan GANTI FOTO
Appl ican
Nama Appl : Ahmad icanHafif SELESAI Prodi : Informatika ican SELESAI Angkatan Appl : 2014 Kelamin : Laki-Laki Appl ican SELESAI Spesialis : Photo Editor Email :
[email protected] Hanphone : 082277471415
SUBMIT
TUTUP
SELESAI
TUTUP
TAMBAH
Gambar 2.2.1.2
Pop Up Profil Applikan menampilkan informasi tentang applican. Button Tutup berfungsi untuk menutup kembali informasi tersebut.
18. Halaman Cari Job
Muhibuddin
PARMADJOBS
No
Tanggal
Judul Job
Status
1
10-11-2016
DESAIn WEB
TERSEDIA
2
12-10-2016
PROGRAMWEB
TERSEDIA
3
28-08-2016
DESAIn SPANDUKASIG
TERSEDIA
4
15-06-2016
BUATBACKDROPTALKSHOW
DITUTUP
5
10-06-2016
PROGRAMWEB
TERSEDIA
6
12-04-2016
BUATPOSTERT-TA
DITUTUP
7
05-03-2016
buat apl ikasi par mad job
DITUTUP
8
12-10-2016
BUATWEBHIMAMANAGEMENT
DITUTUP
9
12-10-2016
DESAINPOSTERSEMINARNASIONAL
DITUTUP
Gambar 2.3
Halaman ini merupakan perintah dari button Cari Job pada Halaman Profil. Disini menampilkan List Job dari semua postingan user dan juga informasi dari job tersebut. Halaman ini terdapat button Job yang berfungsi untuk menampilkan Informasi Detail sebuah Job , klik button tersebut akan menampilkan Detil Job (Gambar : 2.3.1).
19. Detil Job
Muhibuddin
PARMADJOBS
No 1
Tanggal 10-11-2016
2
12-10-2016
3
28-08-2016
4
15-06-2016
5
10-06-2016
6
12-04-2016
Judul Job DESAIn WEB
Status PROFIL
TERSEDIA
Nama PROGRAMWEB JOBDETIL Prodi DESAIn SPANDUKASIG Angkatan Oleh MUHIBUDDIN Kelamin Judul Job D E S A IN W E B BUATBACKDROPTALKSHOW Pendaftaran D itutup Pada Tanggal 15November 2016Spesialis Detil Job Email PROG RAMW EB kan satu tim des ain we b Di butuh untuk ke men tria n pen didikan . Hanphone Lama peng erjaan du a ming gu. GANTI FOTO
BUATPOSTE RT -TAan di tut up pa da tangg al Pen daftar
: Ahmad Hafif TER SEDIA : Informatika : 2014TERSEDIA : Laki-Laki DITUTUP : Photo Editor :
[email protected] TERSEDIA : 082277471415
7
05-03-2016
buat apl ikasi par mad job
8
12-10-2016
BUATWEBHIMAMANAGEMENT
9
12-10-2016
DESAINPOSTERSEMINARNASIONAL
DITUTUP
TUTUP
15 N ovemb er 201 6.
DITUTUP AMBILJOB
DITUTUP DITUTUP
Gambar : 2.3.1
Detil Job enampilkan informasi detil sebuah Job. Terdapat dua button yaitu button tutup pada bagian atas sebelah kanan degan gambar icon dan button Ambil Job yang berfungsi untuk mendaftar sebagai salah satu applican pada Job tersebut. Klik button Ambil Job akan menampilkan Pertanyaan apakah anda Yakin ingin mendaftar di Job ini (Gambar : 2.3.2).
20. Pertanyaan Yakin Ingin Mendaftar di Job
Apakah anda Yakin ingin mendaftar di Job ini? TIDAK
IYA Gambar : 2.3.2
Klik button Tidak akan menampilkan Halaman Cari Job seperti semula (Gambar : 2.3) dan klik button Iya akan menampilkan Informasi Job Berhasil Diambil (Gambar : 2.3.3) dan selanjutnya secara langsung akan menuju ke Halaman Ambil Job (Gambar :2.4). 21. Informasi Job Berhasil Diambil
Anda Berhasil Mengambil Job TUTUP Gambar : 2.3.3
Button Tutup berfungsi untuk menutup kembali informasi yang ditampilkan.
Muhibuddin
LISTAMBILJOB
No
Judul Job
1
DESAIn WEB
MENUNGGU
SELESAI
2
PROGRAMWEB
MENUGGU
SELESAI
3
DESAIn LOGO
DITERIMA
SELESAI
4
buat apl ikasi par mad job
DITOLAK
SELESAI
KE MBALI PROF
IL
Gambar : 2.4
22. Halaman Ambil Job terdapat Histori Job yang telah diambil atau mendaftar ke job tersebut. Informasi status ditujukkan pada kotak warna hijau. Klik button Profil akan menuju ke Halaman Profil (Gambar : 2.2). Klik button selesai akan muncul Pop Up Apakah Pekerjaan Sudah Selesai (Gambar : 2.2.2) yang selanjutnya akan muncul Ratting Pemberi Job (Gambar : 2.4.1) untuk member ratting orang yang telah memberikan Job. 23. Ratting Pemberi Job RATTINGPEMBERI JOB
MUHIBUDDIN
Masukkan Komentar Senang Bekerja Dengan Anda!
SUBMIT
Gambar : 2.4.1
Ratting Pemberi Job dilakukan dengan cara member jumlah bintang sesuai jumlah yang diingankan yang kemudian memberikan komentar dengan diakhiri klik button Submit.
24. Halaman Admin
Muhibuddin
JOBS
USERS
Admin
No
Tanggal
Judul Job
1
10-11-2016
DESAINWEB
UPDATE
DELETE
2
12-10-2016
PROGRAMWEB
UPDATE
DELETE
3
28-08-2016
DESAIn SPANDUKASIG
UPDATE
DELETE
4
15-06-2016
BUATBACKDROPTALKSHOW
UPDATE
DELETE
5
10-06-2016
PROGRAMWEB
UPDATE
DELETE
6
12-04-2016
BUATPOSTERT-TA
UPDATE
DELETE
7
05-03-2016
buat apl ikasi par mad job
UPDATE
DELETE
8
12-10-2016
BUATWEBHIMAMANAGEMENT
UPDATE
DELETE
9
12-10-2016
DESAINPOSTERSEMINARNASIONAL
UPDATE
DELETE TAMBAH
Halaman Admin Kategori Job (Gambar : 4.1).
Halaman Admin muncul setelah login sebagai admin. Halaman ini memiliki dua halaman (kategori) yaitu Job dan User. Pemilihan Halaman Atau kategori dapat dilakukan dengan klik button sesuai kategori yang diinginkan pada bagian atas halaman seperti Gambar : 4.1 (Halaman Admin Kategori Job). Klik button Job akan menampilkan Pop Up Deskripsi Job (Gambar : 4.1.1). Klik button Update akan menampilkan Halaman Update Job (Gambar : 4.1.2). Klik button Delete akan muncul Pop Up Apakah Yakin Ingin Menghapus (Gambar : 4.1.3). Klik Button Tambah akan menampilkan Posting Job (Gambar : 2.2).
25. Pop Up Deskripsi Job SUMMARY
Oleh MUHIBUDDIN Judul Job DESAINWEB Tanggal Posting 10 November 2016 Pendaftaran Ditutup Pada Tanggal 15 November 2016 Ukuran File Foto 50kb Foto Detil Job Dibutuhkan satu tim desain web untuk kementrian pendidikan. Lama pengerjaan dua minggu. Pendaftaran ditutup pada tanggal 15 November 2016.
TUTUP
Gambar : 4.1.1
Setelah Pop Up Deskripsi Job ini Muncul anda dapat menutup kembali dengan klik button Tutup dibagian kanan bawah.
26. Halaman Update Job UPDATEJOB
Judul Job
DESAINWEB
Pendaftaran Ditutup Pada Tanggal Detil Job
15 November 2016
Dibutuhkan satu tim desain web untuk kementrian pendidikan. Lama pengerjaan dua minggu. Pendaftaran ditutup pada tanggal 15 November 2016. GANTI FOTO
Persyaratan: Admin tidak bertanggung jawab atas kebenaran informasi hasil postingan user Saya telah membaca dan menyetujui persyaratan!
UPDATE
Gambar : 4.1.2
Setelah perubahan dilakukan Update Job diselesaikan dengan klik button Update.
27. Pop Up Apakah Yakin Ingin Menghapus
Apakah Anda Yakin Ingin Menghapus? TIDAK
IYA Gambar : 4.1.3
Klik button tidak akan menutup kembali Pop Up ini dan klik button Iya maka akan menghapus Job yang sejajar dengan button Delete tersebut. 28. Halaman Admin Kategori User JOBS
USERS
ADMIN
No
Nama User
1
Muhibuddin
UPDATE
DELETE
2
yeni nur ohmah
UPDATE
DELETE
3
muhtar baswar a achsan
UPDATE
DELETE
4
ahmad haf if hidayat
UPDATE
DELETE
5
sor aya int an nur cahya
UPDATE
DELETE
6
muhammad al dil l a wido seno
UPDATE
DELETE
7
kenindr a mahiswar a
UPDATE
DELETE
8
myogi muchl is
UPDATE
DELETE
9
dwiki cahya gumil ang
UPDATE
DELETE TAMBAH
Gambar : 4.2 Klik button User akan menampilkan Pop Up Profil User (Gambar : 4.2.1). Klik button Update akan menampilkan Halaman Update Profil (Gambar : 4.2.2). Klik button Delete akan menampilkan Pop Up Apakah Yakin Ingin Menghapus (Gambar : 4.1.3). Klik button Tambah akan menampilkan Halaman Register (Gambar :1.2). 29. Pop Up Profil User
PROFIL
GANTI FOTO
Nama Prodi Angkatan Kelamin Spesialis Email Hanphone
: Muhibuddin : Informatika : 2014 : Laki-Laki : Web Design :
[email protected] : 082277471826 TUTUP
30.
