BAB III PERANCANGAN SISTEM 3.1. Ruang Lingkup Website - Institutional Repository | Satya Wacana Christian University: Pembuatan Sistem Informasi File Repository Hasil Proyek, Kerja Praktek dan Tugas Akhir D3 Teknik Informatika Berbasis Web dan PHP
BAB III PERANCANGAN SISTEM
3.1. Ruang Lingkup Website
Berdasarkan kebutuhan dari pengguna, pembuatan website ini ditujukan kepada Mahasiswa FTI terkhusus untuk Progdi D3 Teknik Informatika Universitas Kristen Satya Wacana sebagai sarana untuk pencarian data Proyek, Kerja Praktek dan Tugas Akhir Mahasiswa yang telah ataupun sudah mengambil mata kuliah tersebut.
3.2. DFD (Data Flow Diagram)
Keterangan : Dari DFD (Data Flow Diagram) diatas dapat dijelaskan bahwa user/dosen memiliki batasan dalam penggunaan sistem informasi file repository hasil proyek, kerja praktek, dan tugas akhir, yaitu user/dosen hanya dapat mencari data mahasiswa tetapi user/dosen diharuskan login terlebih dahulu untuk dapat mengakses website ini, begitu juga
user/ mahasiswa hanya dapat mencari data berdasarkan
dosen pembimbing maupun judul ataupun dengan option yang lainnya, sedangkan admin dapat mengakses secara keseluruhan data yaitu dengan input, update, serta hapus data mahasiswa maupun dosen, selain itu admin juga dapat mengupload file yang nantinya bisa diakses oleh dosen dan mahasiswa.
Cari Data Proyek KPTA 1 Proses Dosen Mahasiswa Login Konfirmasi Login Sukses Mencari Data Tabel Dosen Data Dosen Data Dosen Mencari Data Menampilkan Data Tabel Mahasiswa Data Mahasiswa Data Mahasiswa Menampilkan Data Tabel Proyek Data Proyek KPTA Data Proyek KPTA Tabel Kerja Praktek Data Kerja Praktek Data Kerja Praktek Tabel Tugas Akhir Data Kerja Praktek Data Kerja Praktek
Input, Edit dan Hapus Data Proyek 2 Proses KPTA Admin 1. Login Tabel Proyek Data Proyek Data Proyek 5. Input Data Proyek KPTA 4. Menampilkan Form Input Data 3. Masuk Menu Halaman Input Data 2.Konfirmasi Login Sukses Tabel Kerja Praktek Data Kerja Praktek Data Kerja Praktek Tabel Tugas Akhir Data Tugas Akhir Data Tugas Akhir 7. Edit dan Hapus Data 6. Konfirmasi 8. Konfirmasi
Upload File 3 Proses Admin Dosen 1. Upload File 3. Download File 4. Mengirim File 2. Konfirmasi File Berhasil Di Upload Tabel Upload Data Upload File Data Upload File Tabel Mahasiswa Data Mahasiswa Data Mahasiswa Keterangan : Pada dfd level 1 diatas dapat dijelaskan yaitu pada proses cari data proyek kpta /dosen sebelum melakukan pencarian data harus login terlebih dahulu kemudian setelah berhasil login user/dosen dapat mengakses halaman pencarian data proyek kpta.
3.3. Sitemap
Berikut ini adalah gambaran sitemap website Hasil Proyek, Kerja Praktek dan Tugas Akhir :
3.3.1 Sitemap Dosen
Gambar 3. 3 Sitemap Dosen Keterangan : Pada sitemap dosen untuk mengakses website ini yang pertama dosen lakukan adalah buka halaman utama website (beranda) kemudian pilih menu login dosen setelah itu dosen akan dialihkan ke halaman form login dosen isi
username dan password dan klik tombol login jika berhasil
login maka dosen akan masuk pada halaman home, di halaman home terdapat beberapa menu navigasi yaitu home, about, panduan, cari data proyek, cari data kerja praktek, cari data tugas akhir dan logout. Menu logout berfungsi untuk kembali ke halaman utama website (beranda).
3.3.2 Sitemap Mahasiswa
Gambar 3. 4 Sitemap Mahasiswa Keterangan : Pada sitemap mahmasiswa untuk mengakses website ini yang pertama mahasiswa lakukan adalah buka halaman utama website (beranda) kemudian akan ditampilkan beberapa menu navigasi yaitu login dosen, login admin, about dan panduan pada bagian ini mahasiswa tidak diharuskan login karena form pencarian sudah tertera pada halaman utama website.
3.3.3 Sitemap Admin
Beranda Login Admin Login Admin About Form Login Admin Home Home Panduan + Input Data Panduan Input Data Proyek - Hapus Data Input Data Kerja Praktek Input Data Tugas Akhir Hapus Data Kerja Praktek Hapus Data Tugas Akhir Hapus Data Proyek
Upload File Logout Keterangan : Pada sitemap admin untuk mengakses website ini yang pertama admin lakukan buka halaman utama website (beranda) kemudian pilih menu login admin setelah itu dosen akan dialihkan ke halaman form login admin isi
username dan password dan klik button login jika berhasil
login maka admin akan masuk pada halaman home admin, di halaman home terdapat beberapa menu navigasi yaitu home, panduan, + input data, - hapus data, upload file dan logout. Menu + input data berisi 3 sub menu yaitu input data proyek, input data kerja praktek, input data tugas akhir, menu logout berfungsi untuk kembali ke halaman utama website (beranda).
3.4. UML (Unified Modeling Language)
Unified Modeling Language (UML) adalah sebuah bahasa yang berdasarkan grafik atau gambar untuk menvisualisasikan, menspesifikasikan, membangun dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak berbasis Objek (OOP) ( Object Oriented programming ).
3.5. Activity Diagram
merupakan versi UML untuk sebuah
Activity Diagram
flowchart . Activity diagram digunakan untuk menganalisa proses. menganalisis masalah dari sistem. Berikut adalah skema Activity
Diagram sebagai alur penggunaan Sistem Informasi berbasis
Hasil Proyek, Kerja Praktek dan Tugas Ahkir. website3.5.1 Activity Diagram User/Dosen
Keterangan : Dalam activity diagram dosen/user dalam pencarian data proyek ini di jelaskan jalannya bagaimana alur user dalam menggunakan website dan melakukan pencarian data proyek kpta. Pertama-tama yang harus dilakukan oleh dosen/user adalah buka website kemudian pilih form login dosen masukkan username dan password setelah itu sistem akan memproses dan mengirim data ke database jika gagal login maka akan dialihkan ke halaman form login dosen tetapi jika berhasil login akan di alihkan di halaman home. Pada halaman home terdapat menu cari data proyek, kerja praktek dan tugas akhir, pilih menu yang di kehendaki misalnya cari data tugas akhir isikan data pada form pencarian misal dengan keyword nama mahasiswa dan klik login kemudian sistem akan memproses dan mengirimkan data ke database, database akan memberikan konfirmasi jika pencarian tidak ditemukan akan ada notification pencarian ditemukan dan isi form kembali, sedangkan jika pencarian ditemukan maka akan ada notification pencarian ditemukan dan data akan ditampilkan pada tabel hasil pecarian yang berada tepat dibawah form pencarian, pada tabel hasil pencarian terdapat file tugas akhir mahasiswa yang dapat di download oleh dosen.
3.5.1 Activity Diagram User/Mahasiswa
Gambar 3. 7 Gambar Activity Diagram User/Mahasiswa
Keterangan : Dalam activity diagram mahasiswa/user ini proses pencarian data proyek kpta hampir sama dengan dosen/user. Perbedaannya adalah mahasiswa/user tidak diharuskan login karena form pencarian sudah tersedia pada halaman utama website.
3.6. Sequence Diagram
Sequence diagram adalah suatu diagram yang menggambarkan interaksi antar obyek dan mengindikasikan menunjukkan serangkaian pesan yang dipertukarkan oleh obyek- obyek yang melakukan suatu tugas atau aksi tertentu. Obyek- obyek tersebut kemudian diurutkan dari kiri ke kanan, aktor yang menginisiasi interaksi biasanya ditaruh di paling kiri dari diagram.
3.6.1 Sequence Diagram User/Dosen
Gambar 3. 8 Gambar Sequence Diagram User/Dosen
Keterangan : Pada gambar sequence diagram diatas dapat dijelaskan bagaimana dosen melakukan pencarian data.
user/
Langkah pertama yang harus dilakukan oleh user/dosen adalah masuk kehalaman utama kemudian sistem akan mengirim respon menampilkan halaman utama kepada pencarian data user/dosen harus masuk ke halaman form login dosen kemudian sistem akan menampilkan respon menampilkan form login, isi username dan password data akan dikirim ke database yang menampung
username dan password jika berhasil login sistem akan
menampilkan respon username dan password telah terdeteksi kemudian user/dosen sudah bisa masuk kehalaman form pencarian disitu user/dosen mengisi form pencarian kemudian data akan dikirim ke database dan memproses data kemudian jika data pencarian ditemukan maka sistem akan menampilkan pesan data pencarian ditemukan dan dosen dapat mendownload file atau keluar dari halaman website.
3.6.2 Sequence Diagram Admin
Gambar 3. 9 Gambar Sequence Diagram Admin
Keterangan : Pada gambar sequence diagram diatas dapat dijelaskan bagaimana admin dalam mengelola data. Langkah pertama yang harus dilakukan oleh admin adalah masuk kehalaman utama kemudian sistem akan mengirim respon menampilkan halaman utama kepada admin. Selanjutnya untuk dapat masuk ke halaman pencarian data admin harus masuk ke halaman form menampilkan form login, isi username dan password data akan dikirim ke database yang menampung dan password jika berhasil login sistem akan
username
menampilkan respon username dan password telah terdeteksi kemudian admin sudah bisa masuk kehalaman input data kemudian sistem akan menampilkan respon menampilkan halaman input data kemudian admin akan menginputkankan data proyek, kerja praktek dan tugas akhir, data akan dikirim ke
database dan akan diproses lalu jika berhasil
menginputkan data akan dtampilkan pesan data berhasil diinput begitu juga dengan edit data dan hapus data.
3.6.3 Sequence Diagram Mahasiswa
Gambar 3. 10 Gambar Sequence Diagram Mahasiswa
Keterangan : Pada gambar sequence diagram diatas dapat dijelaskan bagaimana mahasiswa melakukan pencarian data. halaman website setelah itu mahasiswa mengisi form yang telah disediakan kemudian data akan diproses ke
database
jika pencarian ditemukan maka sistem akan mengirim respon pencarian ditemukan dan data akan ditampilkan pada halaman hasil pencarian tetapi jika tidak maka mahasiswa harus mengitputkan kembali.
3.7. Lembar Kerja Tampilan (LKT)
Merupakan perancangan antarmuka website pada Sistem Informasi File Repository Hasil Proyek, Kerja Praktek dan Tugas Akhir sebagai berikut :
3.7.1 Halaman Beranda
Merupakan halaman utama setelah membuka
website pada halaman tersebut terdapat menu
navigasi login dosen dan login admin dan terdapat
content yang berisi sebuah form pencarian bagi mahasiswa guna mencari data.
Keterangan :
a. Login dosen : menu yang menghubungkan dosen kehalaman home setelah melakukan login dengan cara klik menu tersebut kemudian dosen akan dialihkan ke halaman formlogindosen lalu isi username dan password dan klik login.
b. Login admin : menu yang menghubungkan admin kehalaman homeadmin setelah melakukan login dengan cara klik menu tersebut kemudian admin akan dialihkan ke halaman formloginadmin lalu isi username dan password dan klik login.
c. About : menu yang menjelaskan tentang informasi kontak website d. Panduan : menu yang menjelaskan tata cara dalam pencarian data e. Form pencarian : form yang diperuntukkan bagi mahasiswa guna mencari data tanpa harus login terlebih dahulu.
3.7.2 Halaman Form Login Dosen
Gambar 3. 12 Gambar LKT Form Login Dosen
Keterangan :
a. Username berisi NID Dosen
b. Password biasanya berisi tanggal lahir
c. Tombol login sendiri, mempunyai fungsi untuk mengirim perintah yang nantinya akan di proses di dalam database.
d. Lalu setelahnya Dosen dapat masuk ke halaman home.
3.7.3 Halaman Home
Merupakan halaman utama bagi dosen setelah melakukan login. Pada bagian halaman home terdapat header, menu navigasi, content dan footer.
Gambar 3. 13 Gambar LKT Halaman Home
Keterangan :
a. Pada bagian menu navigasi terdapat beberapa menu yaitu :
- Home - About - Panduan - Cari Data Proyek - Cari Data Kerja Praktek - Cari Data Tugas Akhir,
- Dan Logout
b. Kemudian pada content terdapat sebuah date c. Pada menu navigasi, terdapat menu logout yakni untuk melogout akun dosen, menu logout sendiri terdapat pada setiap menu di setiap halaman setelah login.
3.7.4 Halaman About
Halaman ini menjelaskan tentang informasi kontak website .
Gambar 3. 14 Gambar LKT Halaman About
3.7.5 Halaman Panduan
Halaman ini berisi panduan atau petunjuk untuk pencarian data.
Gambar 3. 15 Gambar LKT Halaman Panduan
Keterangan : Halaman ini menampilkan petunjuk dan tata cara dalam pencarian data melalui website Pembuatan Sistem Informasi Hasil Kerja Praktek dan Tugas Akhir D3 Teknik Informatika Berbasis Web dan PHP.
3.7.6 Halaman Cari Data Proyek
Halaman ini berbentuk seperti form pencarian proyek mahasiswa, pada bagian ini terdapat dropdown cari berdasarkan Nim, Nama, Konsentrasi, dan Judul kemudian hasil pencarian
Gambar 3. 16 Gambar LKT Halaman Cari Data Proyek
Keterangan :
a. Pada halaman cari data proyek dosen bisa mencari data dengan cara klik dropdown pada cari berdasarkan misalkan nama kemudian tuliskan pada keyword.
b. Tombol cari berfungsi mengambil data dari database.
c. Kemudian data hasil pencarian akan ditampilkan pada tabel.
d. Tetapi jika data tidak ditemukan maka akan ada
notification Pencarian tidak ditemukan, jadi user/ dosen harus menuliskannya dengan baik
dan benar.
3.7.7 Halaman Cari Data Kerja Praktek
Halaman ini tampilannya hampir sama seperti form pencarian data proyek mahasiswa, pada bagian ini terdapat dropdown cari berdasarkan Nim, Nama, dan Tempat kemudian hasil pencarian akan ditampilkan pada tabel.
Gambar 3. 17 Gambar LKT Halaman Cari Data Kerja Praktek
Keterangan :
a. Pada halaman cari data kerja praktek dosen bisa mencari data dengan cara klik dropdown pada cari berdasarkan misalkan tempat kemudian tuliskan pada keyword.
b. Tombol cari berfungsi mengambil data dari database.
c. Kemudian data hasil pencarian akan ditampilkan pada tabel.
d. Tetapi jika data tidak ditemukan maka akan ada
user/ dosen harus menuliskannya dengan baik dan benar.
3.7.8 Halaman Cari Data Tugas Akhir
Halaman ini tampilannya hampir sama seperti form pencarian data proyek dan kp mahasiswa, perbedaanya hanya terdapat file yang bisa di download oleh dosen, pada bagian ini terdapat dropdown cari berdasarkan Nim, Nama, Judul, Tahun dan Pembimbing kemudian hasil pencarian akan ditampilkan pada tabel.
Gambar 3. 18 Gambar LKT Cari Data Tugas Akhir
Keterangan :
a. Pada halaman cari data tugas akhir dosen bisa mencari data dengan cara klik dropdown pada cari berdasarkan misalkan Judul kemudian tuliskan pada keyword. b. Tombol button cari berfungsi mengambil data dari database.
c. Kemudian data hasil pencarian akan ditampilkan pada tabel.
d. Pada tabel hasil pencarian data terdapat file tugas akhir mahasiswa yang dapat di unduh oleh dosen.
e. Tetapi jika data tidak ditemukan maka akan ada
notification Pencarian tidak ditemukan, jadi user/ dosen harus menuliskannya dengan baik
dan benar.
3.7.9 Halaman Form Login Admin
Gambar 3. 19 Gambar LKT Form Login Admin
Keterangan :
a. Username berisi nama (default) yang telah diatur dalam database, sehingga admin tidak bisa b. Password sendiri hanya admin yang dapat mengetahuinya, sehingga tidak ada orang lain yang dapat mengetahuinya.
c. Tombol login sendiri, mempunyai fungsi untuk mengirim perintah yang nantinya akan di proses di dalam database.
d. Lalu setelahnya admin dapat masuk ke dalam laman admin.
e. Menu Login Admin terdapat pada halaman beranda
3.7.10 Halaman Home Admin
Gambar 3. 20 Gambar LKT Home Admin
Keterangan : Halaman ini terdapat menu navigasi di bagian bawah header pada bagian menu navigasi terdapat beberapa menu yaitu :
- Home - Hapus Data - Panduan - Upload File - + Input Data - Logout
3.7.11 Halaman Panduan Admin Gambar 3. 21 Gambar LKT Halaman Panduan Admin
Keterangan : Halaman ini merupakan panduan bagi admin dalam mengelola data
3.7.12 Halaman Input Data
Gambar 3. 22 Gambar LKT Form Input Data
Halaman ini berisi beberapa menu dan link input data proyek, link input data kp, dan link input data ta.
3.7.13 Halaman Input Data Tugas Akhir
Halaman ini berisi form input data proyek yang nantinya akan ditampilkan pada halaman cari data TA.
Gambar 3. 23 Gambar LKT Halaman Input Data TA
3.7.14 Halaman Hapus Data
Halaman ini berisi beberapa link untuk hapus data proyek, kerja praktek dan tugas akhir.
Gambar 3. 24 Gambar LKT Halaman Hapus Data
3.7.15 Halaman Hapus Data Tugas Akhir
Halaman ini berisi sebuah form pencarian data dimana pada halaman tersebut admin menginputkan data tugas akhir melalui form pencarian kemudian jika pencarian ditemukan data akan ditampilkan pada tabel lalu admin dapat menghapus data tersebut dengan link hapus data tetapi jika tidak ditemukan maka harus input kembali.
3.7.16 Halaman Edit Data Tugas Akhir
Halaman ini berisi form edit data tugas akhir dimana data yang sudah diedit akan ditampilkan pada halaman input data tugas akhir.
Gambar 3. 26 Gambar LKT Edit Data TA
3.7.17 Halaman Upload File Gambar 3. 27 Gambar LKT Form Upload File
Halaman ini berisi sebuah form upload file dimana file yang telah diupload oleh admin akan ditampilakan di halaman Cari Data Tugas Akhir dan bisa diakses oleh dosen dan mahasiswa.
3.7.18 Halaman Beranda/Form Pencarian Data
Halaman ini merupakan halaman utama bagi user/ mahasiswa dalam melakukan pencarian data.
Gambar 3. 28 Gambar LKT Halaman Beranda/Form Pencarian Data
Keterangan :
a. User/mahasiswa inputkan data pada form pencarian yang telah disediakan.
b. Kemudian klik tombol cari.
c. Maka data akan ditampilkan pada halaman hasil pencarian data.
3.7.19 Halaman Hasil Pencarian
Halaman ini merupakan halaman setelah mahasiswa melakukan pencarian pada halaman form pencarian data. Jika data pencarian ditemukan akan ditampilkan pada tabel hasil pencarian.
Gambar 3. 29 Gambar LKT Halaman Pencarian
3.8. Desain Database
3.8.1 Tabel Dosen
Tabel dosen merupakan tabel yang digunakan untuk menyimpan data-data dosen yang diinputkan pada halaman cari data proyek, kerja praktek dan tugas akhir, tabel dosen sendiri memiliki nidn dan nama dosen.
Tabel 3. 1 Tabel Dosen
Name Type Null id_dosen int(10) No Nid Varchar(25) No Nama_dosen Varchar(60) No
3.8.2 Tabel Mahasiswa
Tabel Mahasiswa merupakan tabel yang digunakan untuk menyimpan data-data mahasiswa yang diinputkan pada halaman cari data proyek, kerja praktek dan tugas akhir, tabel dosen sendiri memiliki nim dan nama mahasiswa.
Tabel 3. 2 Tabel Mahasiswa
Name Type Null Id_mahasiswa Int(10) No Nim Int(15) No Nama_mahasiswa Varchar(30) No
3.8.3 Tabel Proyek
Tabel Proyek sendiri merupakan tabel yang menampung pendataan proyek Mahasiswa.
Tabel 3. 3 Tabel Proyek
Id_proyek Int(10) Null Nama_jenis_ambil Varchar(30) No Nim Int(30) No Nama_mahasiswa Varchar(30) No Nama_konsentrasi Varchar(30) No Nama_dosen Varchar(60) No Judul Judul(100) No Semester Varchar(25) No Tahun Int(25) No Status Varchar(25) No
3.8.4 Tabel Kerja Praktek
Tabel Kerja Praktek sendiri merupakan tabel yang menampung pendataan proyek Mahasiswa.
Tabel 3. 4 Tabel Kerja Praktek
Id_kerjapraktek Int(10) Null Nama_jenis_ambil Varchar(30) No Nim Int(30) No Nama_mahasiswa Varchar(30) No Tempat Varchar(50) No Nama_dosen Varchar(60) No Judul Judul(100) No Semester Varchar(25) No Tahun Int(25) No Status Varchar(25) No
3.8.5 Tabel Tugas Akhir
Tabel Tugas Akhir sendiri merupakan tabel yang menampung pendataan Tugas Akhir Mahasiswa.
Tabel 3. 5 Tabel Tugas Akhir
Id_tugasakhir Int(10) Null Nama_jenis_ambil Varchar(30) No Nim Int(30) No Nama_mahasiswa Varchar(30) No Nama_konsentrasi Varchar(30) No Nama_dosen Varchar(60) No Judul Judul(100) No Semester Varchar(25) No Tahun Int(25) No Status Varchar(25) No File Longblob No
3.8.6 Tabel Upload
Tabel Upload sendiri merupakan tabel yang menampung file-file Tugas Akhir Mahasiswa.
Tabel 3. 6 Tabel Upload
Name Type Null Id Int(11) No Deskrisi Text No Filetype Varchar(12) No Filedata Longblob No Filename Text No Filesize Bigint(20) No
3.8.7 Tabel Login Dosen
Tabel Dosen sendiri merupakan tabel untuk menampung username dan password dosen untuk dapat login menuju laman Dosen yang dapat melihat data dan mencari data pada halaman website.
Tabel 3. 7 Tabel Login Dosen
Username Varchar(30) Null Password Text No
3.8.8 Tabel Login Admin
Tabel Admin sendiri merupakan tabel untuk menampung username dan password admin untuk dapat login menuju laman admin yang dapat input, edit, hapus serta upload file.
Tabel 3. 8 Tabel Login Admin
Username Varchar(30) Null Password text No
3.9. JST
Berikut ini merupakan JST pencarian data yang dilakukan oleh user :
3.9.1 JST Dosen
Gambar 3. 30 JST Dosen
Keterangan : TDosen1 merupakan halaman utama dari website File Repository Hasil Proyek, Kerja Praktek dan Tugas Akhir, setelah itu pilih menu Login Dosen maka akan dialihkan ke TDosen2 (Form Login Dosen).
TDosen3 (Menu Home), TDosen4 (Menu About), TDosen5(Menu Panduan), TDosen6(Menu Cari
TDosen7(Menu Cari Data Kerja
Data Proyek), Praktek), TDosen8(Menu Cari Data Tugas Akhir).
Kemudian setelah selesai klik menu logout dan bisa kembali ke halaman utama.
3.9.2 JST Mahasiswa
Gambar 3. 31 JST Mahasiswa
Keterangan : TMahasiswa1 merupakan halaman utama dari
File Repository Hasil Proyek, Kerja Praktek
website
dan Tugas Akhir didalamnya terdapat Form Pencarian bagi mahasiswa, jika pencarian tersebut ditemukan maka akan dialihkan ke TMahasiswa2(Form Hasil Cari).
3.9.3 JST Admin
Gambar 3. 32 JST Admin
Keterangan : TAdmin1 merupakan halaman utama dari website File Repository Hasil Proyek, Kerja Praktek dan Tugas Akhir, setelah itu pilih menu login admin maka akan dialihkan ke TAdmin2(Form Login
Admin), kemudian setelah berhasil login akan
menju ke TAdmin3(Menu Home Admin), TAdmin4(Menu Panduan), TAdmin5(Menu Input
Data), TAdmin6(Halaman Input Data TA),
TAdmin7(Menu Hapus Data), TAdmin8(Halaman
Hapus Data TA), TAdmin9(Halaman Edit Data