BAB III ANALISIS DAN PERANCANGAN
3.4 Flowchart
3.4.10 Flowchart work experience pada yoopa
Gambar 12 Flowchart work experience pada yoopa
21 3.4.11 Flowchart skill info pada yoopa
Gambar 13 Flowchart skill info pada yoopa
22 3.4.12 Flowchart show user data pada yoopa
Gambar 14 Flowchart show user data pada yoopa
23 3.4.13 Flowchart search pada yoopa
Gambar 15 Flowchart search pada yoopa
24 3.4.14 Flowchart bimbingan pada TADJ
Gambar 16 Flowchart bimbingan pada TADJ
Penjelasan Gambar 3 Flowchart address pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan alamat pengguna.
2. Ketika memilih action set public maka sistem akan merubah alamat pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah alamat pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan alamat baru.
25
5. Ketika memilih data alamat tertentu maka sistem akan menampilkan action baru yaitu edit, delete dan set current.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus alamat yang dipilih.
8. Ketika memilih action set current maka sistem akan menjadikan alamat yang dipilih menjadi alamat sekarang.
Penjelasan Gambar 4 Flowchart basic info pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan info dasar pengguna.
2. Ketika memilih action set public maka sistem akan merubah info dasar pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah info dasar pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
Penjelasan Gambar 5 Flowchart communication skill pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan communication skill pengguna.
2. Ketika memilih action set public maka sistem akan merubah communication skill pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah communication skill pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan communication skill baru.
5. Ketika memilih data communication skill tertentu maka sistem akan menampilkan action baru yaitu edit dan delete.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus communication skill yang dipilih.
26
Penjelasan Gambar 6 Flowchart contact info pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan contact info pengguna.
2. Ketika memilih action set public maka sistem akan merubah contact info pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah contact info pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan contact info baru.
5. Ketika memilih data contact info tertentu maka sistem akan menampilkan action baru yaitu edit dan delete.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus contact info yang dipilih.
Penjelasan Gambar 7 Flowchart document pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan dokumen pengguna.
2. Ketika memilih action set public maka sistem akan merubah dokumen pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah dokumen pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan dokumen baru.
5. Ketika memilih data dokumen tertentu maka sistem akan menampilkan action baru yaitu edit.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
Penjelasan Gambar 8 Flowchart education pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan pendidikan pengguna.
2. Ketika memilih action set public maka sistem akan merubah pendidikan pengguna menjadi dapat dilihat oleh pengguna lain.
27
3. Ketika memilih action only me maka sistem akan merubah pendidikan pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan pendidikan baru.
5. Ketika memilih data pendidikan tertentu maka sistem akan menampilkan action baru yaitu edit, delete dan set current.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus pendidikan yang dipilih.
8. Ketika memilih action set current maka sistem akan menjadikan pendidikan yang dipilih menjadi sedang dilakukan.
Penjelasan Gambar 9 Flowchart hobby pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan hobi pengguna.
2. Ketika memilih action set public maka sistem akan merubah hobi pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah hobi pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan hobi baru.
5. Ketika memilih data hobi tertentu maka sistem akan menampilkan action baru yaitu edit dan delete.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus hobi yang dipilih.
Penjelasan Gambar 10 Flowchart id card pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan id card pengguna.
2. Ketika memilih action set public maka sistem akan merubah id card pengguna menjadi dapat dilihat oleh pengguna lain.
28
3. Ketika memilih action only me maka sistem akan merubah id card pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan id card baru.
5. Ketika memilih data id card tertentu maka sistem akan menampilkan action baru yaitu edit dan delete.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus id card yang dipilih.
Penjelasan Gambar 11 Flowchart organization experience pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan pengalaman organisasi pengguna.
2. Ketika memilih action set public maka sistem akan merubah pengalaman organisasi pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah pengalaman organisasi pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan pengalaman organisasi baru.
5. Ketika memilih data pengalaman organisasi tertentu maka sistem akan menampilkan action baru yaitu edit, delete dan set current.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus pengalaman organisasi yang dipilih.
8. Ketika memilih action set current maka sistem akan menjadikan pengalaman organisasi yang dipilih menjadi sedang dilakukan.
Penjelasan Gambar 12 Flowchart work experience pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan pengalaman bekerja pengguna.
2. Ketika memilih action set public maka sistem akan merubah pengalaman bekerja pengguna menjadi dapat dilihat oleh pengguna lain.
29
3. Ketika memilih action only me maka sistem akan merubah pengalaman bekerja pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan pengalaman bekerja baru.
5. Ketika memilih data pengalaman bekerja tertentu maka sistem akan menampilkan action baru yaitu edit, delete dan set current.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus pengalaman bekerja yang dipilih.
8. Ketika memilih action set current maka sistem akan menjadikan pengalaman bekerja yang dipilih menjadi sedang dilakukan.
Penjelasan Gambar 13 Flowchart skill info pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan skill info pengguna.
2. Ketika memilih action set public maka sistem akan merubah skill info pengguna menjadi dapat dilihat oleh pengguna lain.
3. Ketika memilih action only me maka sistem akan merubah skill info pengguna menjadi tidak dapat dilihat oleh pengguna lain.
4. Ketika memilih action add maka sistem akan menampilkan sebuah form yan harus diisi pengguna untuk menambahkan skill info baru.
5. Ketika memilih data skill info tertentu maka sistem akan menampilkan action baru yaitu edit, delete dan set specialist.
6. Ketika memilih action edit maka sistem akan menampilkan sebuah form yan harus ganti datanya oleh pengguna.
7. Ketika memilih action delete maka sistem akan menghapus skill info yang dipilih.
8. Ketika memilih action set specialist maka sistem akan menjadikan skill info yang dipilih menjadi berstatus specialist.
30
Penjelasan Gambar 14 Flowchart show user pada yoopa sebagai berikut.
1. Sistem akan menampilkan data basic info pengguna.
2. Sistem akan menampilkan data communication skill pengguna.
3. Sistem akan menampilkan data address pengguna.
4. Sistem akan menampilkan data contact info pengguna.
5. Sistem akan menampilkan data id card pengguna.
6. Sistem akan menampilkan data hobby pengguna.
7. Sistem akan menampilkan data education pengguna.
8. Sistem akan menampilkan data work experience pengguna.
9. Sistem akan menampilkan data organization experience pengguna.
10. Sistem akan menampilkan data skill info pengguna.
11. Sistem akan menampilkan data document pengguna.
Penjelasan Gambar 15 Flowchart search pada yoopa sebagai berikut.
1. Aplikasi di jalankan akan meminta pengguna untuk memasukan sebuah keyword pencarian.
2. Sistem akan menampilkan data user yang sesuai dengan keyword yang diberikan oleh pengguna,
Penjelasan Gambar 16 Flowchart bimbingan pada yoopa sebagai berikut.
1. Aplikasi di jalankan menampilkan project tugas akhir pengguna.
2. Ketika memilih action update gambar maka sistem akan meminta user memasukan data gambar yang akan dijadikan gambar profile pengguna.
3. Ketika memilih action update deskripsi maka sistem akan menampilkan form yang harus diisi yang akan dijadikan deskripsi yang baru.
4. Ketika memilih action update video maka sistem akan menampilkan form yang harus diisi yang akan dijadikan video project tugas akhir pengguna.
5. Ketika memilih action pengumpulan berkas maka sistem akan memeriksa tahapan yang sedang ditempuh oleh pengguna kemudian meminta pengguna untuk memasukan data beserta dokumen project.
31 3.5 Rancangan Struktur Tabel
Berikut rancangan struktur table dari aplikasi yoopa.
Tabel 1 Rancangan tabel profile
No Nama Field Type Data Keterangan 7 relationship Varchar 100 Hubungan 8 religion Varchar 20 Agama
9 blood_type Varchar 3 Golongan darah 10 about Text Sekilas tentang user
11 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 2 Rancangan table communication skill
No Nama Field Type Data Keterangan
1 id Int Id cs language
2 uid Varchar 100 Id user
3 lang_id Tinyint Status Bahasa indonesia atau Bahasa asing 4 language Varchar 50 Nama Bahasa
5 description Text Deskripsi Bahasa
6 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 3 Rancangan table address
No Nama Field Type Data Keterangan
1 id Int Id address
2 uid Varchar 100 Id user 3 city_id Int Id kota 4 detail Text Detail address
5 current_status Tinyint Status alamat sekarang atau bukan 6 description Text Deskripsi tempat pada alamat tersebut 7 view_status Tinyint Status untuk keterangan public atau tidak
32
Tabel 4 Rancangan table contact
No Nama Field Type Data Keterangan
1 id Int Id contact
2 uid Varchar 100 Id user 3 type Int Jenis contact 4 contact Text contact
5 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 5 Rancangan table id card
No Nama Field Type Data Keterangan
1 id Int Id id card
2 uid Varchar 100 Id user 3 type Tinyint Tipe id card 4 number Text Nomor id card
5 description Text Deskripsi id card tersebut
6 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 6 Rancangan table hobby
No Nama Field Type Data Keterangan
6 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 7 Rancangan table education
No Nama Field Type Data Keterangan
1 id Int Id education
2 uid Varchar 100 Id user 3 school_name Text Nama sekolah 4 start Varchar 20 Mulai sekolah 5 graduate Varchar 20 Selesai sekolah
6 description Text Deskripsi jenjang yang diambil
7 current_status Tinyint Status apakah sedang ditembuh atau tidak 8 view_status Tinyint Status keterangan public atau tidak
33
Tabel 8 Rancangan table work experience
No Nama Field Type Data Keterangan
1 id Int Id work experience
2 uid Varchar 100 Id user
3 title Text Tempat bekerja
4 description Text Apa yang dikerjakan 5 position Text Posisi yang diambil 6 start_date Varchar 20 Mulai bekerja 7 end_date Varchar 20 Selesai bekerja
8 current_status Tinyint Status apakah sedang ditempuh atau tidak 9 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 9 Rancangan table organization experience
No Nama Field Type Data Keterangan
1 id Int Id organization experience 2 uid Varchar 100 Id user
3 title Text Tempat berorganisasi 4 description Text Apa yang dikerjakan 5 position Text Posisi yang diambil 6 start_date Varchar 20 Mulai berorganisasi 7 end_date Varchar 20 Selesai berorganisasi
8 current_status Tinyint Status apakah sedang ditempuh atau tidak 9 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 10 Rancangan table cs language
No Nama Field Type Data Keterangan
1 id Int Id cs language
2 uid Varchar 100 Id user
3 lang_id tinyint Status Bahasa indonesia atau Bahasa asing 4 language Varchar 50 Nama Bahasa
5 description Text Deskripsi Bahasa
6 view_status Tinyint Status untuk keterangan profile public atau tidak
34
Tabel 11 Rancangan table skill info
No Nama Field Type Data Keterangan
1 id Int Id skill
2 uid Varchar 100 Id user
3 type Int Jenis skill
4 name Text Nama skill
5 spesialist Tinyint Status apakah sudah specialist atau belum 6 description Text Deskripsi skill
7 view_status Tinyint Status untuk keterangan public atau tidak
Tabel 12 Rancangan table document
No Nama Field Type Data Keterangan
1 id Int Id document
2 uid Varchar 100 Id user 3 title Text Judul project
4 keterangan Text Deskripsi singkat project 5 file Text File project disimpan
6 view_status Tinyint Status untuk keterangan public atau tidak
3.6 Rancangan Antarmuka Aplikasi Yoopa main
Gambar 17 Rancangan Antarmuka Aplikasi Yoopa main
35
3.7 Rancangan Antarmuka Aplikasi Yoopa search
Gambar 18 Rancangan Antarmuka Aplikasi Yoopa Search
3.8 Rancangan Antarmuka Aplikasi Yoopa view search
Gambar 19 Rancangan Antarmuka Aplikasi Yoopa view search
36
BAB IV
IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi Sistem
Implementasi sistem adalah tahap pengujian kelayakan di sistem yang dibuat sehingga aplikasi yang dibuat tidak menyimpang dari perancangan sistemnya.
Aplikasi ini dibuat dengan menggunakan Notepad++ dengan PHP sebagai bahasa pemrograman aplikasi. MySQL Workbench sebagai database digunakan untuk menyimpan data yang dibutuhkan. Spesifikasi perangkat keras untuk pengembangan aplikasi adalah sebagai berikut.
b. Perangkat lunak yang digunakan untuk pengembangan aplikasi adalah:
1. Windows Server 2012 R2 Datacenter 64-bit 2. Mysql server 5.6
3. phpmyadmin 4.4.14 4. PHP 5.4.24
5. XAMPP 6. PHP Designer
37
4.2 Implementasi Antar Muka Website Yoopa
Berikut merupakan beberapa implementasi dari proses yang terdapat pada website yoopa.
Tabel 13 Tampilan halaman main yoopa
Deskripsi Tampilan halaman main Yoopa Tampilan
Keterangan Pada tampilan diatas merupakan halaman main pengguna yang menampilkan seluruh data pengguna. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
38
Tabel 14 Tampilan action set public, only me dan edit
Deskripsi Tampilan action set public, only me dan edit pada seluruh data pengguna Tampilan
Keterangan Pada tampilan diatas merupakan pilihan action yang keluar saat action pada setiap menu data pengguna di tekan. Pada seluruh data pengguna ada tiga action yaitu set public, only me dan edit. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
39
Tabel 15 Tampilan edit basic info
Deskripsi Tampilan edit basic info Tampilan
40
Keterangan Pada tampilan diatas merupakan tampilan saat ingin melakukan pengeditan terhadap data basic info pengguna. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
Tabel 16 Tampilan add contact
Deskripsi Tampilan add contact Tampilan
Keterangan Pada tampilan diatas merupakan tampilan saat ingin melakukan penambahan data contact. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
41
Tabel 17 Tampilan action edit, delete dan set current
Deskripsi Tampilan action saat tombol action pada data pengguna diklik Tampilan
Keterangan Pada tampilan diatas merupakan tampilan saat tombol action pada address pengguna diklik, ada tiga buah action yaitu edit, set current dan delete. Telah dilakukan
pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
Tabel 18 Tampilan search
Deskripsi Tampilan hasil search dengan keyword ”mahasiswa”
Tampilan
Keterangan Pada tampilan diatas merupakan tampilan fitur search dijalankan dengan keyword
“mahasiswa”. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
42
Tabel 19 Tampilan view hasil search
Deskripsi Tampilan hasil view search pada user tertentu Tampilan
Keterangan Pada tampilan diatas merupakan tampilan saat seoran guser melihat user lain. BIsa dilihat bahwa tidak semua data terlihat, karena tidak seluruh data user di set public.
Pada gambar tersebut yang terlihat hanya data contact info saja karena data yang lain di set private. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
43
Tabel 20 Tampilan cv
Deskripsi Tampilan cv hasil generate versi yoopa Tampilan
Keterangan Pada tampilan diatas merupakan tampilan saat pengguna menggunakan fitur generate cv. Secara otomatis system akan membuatkan cv berbentuk PDF dari data data yang sudah diinputkan oleh pengguna. Telah dilakukan pengujian terhadap fitur ini dan hasilnya sesuai dengan yang diharapkan.
44
BAB V PENUTUP
5.1 Kesimpulan
Dapat disimpulkan bahwa semua system yang dibangun memiliki rancangan dan implementasi yang telah berjalan dengan baik sesuai dengan tujuan tugas akhir, yaitu:
1. Menampilkan detail data pengguna yang dikelompokan menjadi beberapa kelompok seperti jenis kelamin, tempat tanggal lahir, agama, golongan darah, alamat, kontak info, kartu identitas, hobi, riwayat pendidikan, riwayat organisasi dan project yang dikerjakan.
2. Melakukan management data pengguna dengan cara menambahkan data, mengurangi data, mengubah data, memberikan kondisi apakan dapat dilihat oleh pengguna lain atau tidak.
3. Mencari dan melihat pengguna lain dengan cara memasukan sebuah keyword kemudian system akan menampilkan data yang terkait dengan keyword tersebut sehingga pengguna tersebut dapat melihat detail data (hanya yang diizinkan) pengguna yang sesuai dengan keyword.
4. Menangani proses bimbingan tugas akhir secara online, diawali dengan pendaftaran tugas akhir yang dilakukan oleh dosen sampai dengan tahapan bimbingan dan revisi yang terjadi antara dosen dengan mahasiswa.
5.2 Saran
Saran untuk pengembangan ke depan dengan perbaikan system informasi dan aplikasi tugas akhir yaitu:
1. Aplikasi yang dibagun belum memperhatikan keamanan system.
2. Dibuat sebuah system peringatan yang dikirim dapat melalui email atau sms jika terdapat sebuah action tertentu.
3. Diberikan data kadaluarsa terhadap data data hasil bimbingan, sehingga jika sudah kadaluarsa dapat dilakukan penghapusan data.
45
DAFTAR PUSTAKA
[1] Wardana, S.Hut, M.Si, Menjadi Master PHP dengan Framework Codeigniter, Gramedia, 2014.
[2] _________________, Pengenalan XAMPP, 2000.
http://howto.blog.amikom.ac.id/internet/pengenalan-xampp/, diakses pada 9 November 2015, 15:00 WIB.
[3] MySQL Workbench Community. 2014. MySQL Workbench. Redwood City:
Oracle USA.
[4] ________________, FileZilla Client,
https://id.wikipedia.org/wiki/FileZilla_Client/, diakses pada 9 November 2015, 15:00 WIB.
[5] ________________, Community yoopa, http://community.lskk.ee.itb.ac.id/, diakses pada 29 Juni 2015, 11:00 WIB.
[6] __________________, Waterfall model | SDLC,
https://www.sdlc.ws/waterfall-model/, diakses pada 10 November 2015, 21:00 WIB.
[7] __________________, mPDF, http://www.mpdf1.com/mpdf/index.php, diakses pada 7 November 2015, 13:00 WIB.