16 3.1. Ruang LingkupWebsite
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 informasifile repository hasil proyek, kerja praktek,
dan tugas akhir, yaituuser/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
1 Proses Cari Data Proyek KPTA Dosen
Mahasiswa
Login Konfirmasi Login Sukses
Mencari Data
Tabel Dosen Data Dosen Data Dosen
Tabel Proyek Data Proyek KPTA Data Proyek KPTA Input, Edit dan Hapus Data Proyek
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 2. Konfirmasi File Berhasil Di Upload
Tabel Upload
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 gambaransitemap websiteHasil Proyek,
Kerja Praktek dan Tugas Akhir :
3.3.1 SitemapDosen
Keterangan :
Pada sitemap dosen untuk mengakses website ini yang
pertama dosen lakukan adalah buka halaman utamawebsite
(beranda) kemudian pilih menu login dosen setelah itu
dosen akan dialihkan ke halaman form login dosen isi
usernamedan passworddan 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 SitemapMahasiswa
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 utamawebsite.
Input Data Kerja Praktek
Input Data Tugas Akhir
Hapus Data Proyek
Hapus Data Kerja Praktek
Hapus Data Tugas Akhir
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
Activity Diagram merupakan versi UML untuk sebuah
flowchart.Activity diagramdigunakan untuk menganalisa proses.
menganalisis masalah dari sistem. Berikut adalah skemaActivity Diagram sebagai alur penggunaan Sistem Informasi berbasis
websiteHasil Proyek, Kerja Praktek dan Tugas Ahkir.
3.5.1 Activity DiagramUser/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 itusistem
akan memproses dan mengirim data kedatabase 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 keywordnama 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
3.5.1 Activity DiagramUser/Mahasiswa
Gambar 3. 7GambarActivity 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 utamawebsite.
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 DiagramUser/Dosen
Gambar 3. 8GambarSequence Diagram User/Dosen
Keterangan :
Pada gambar sequence diagram diatas dapat dijelaskan
bagaimana user/dosen melakukan pencarian data.
Langkah pertama yang harus dilakukan olehuser/dosen
adalah masuk kehalaman utama kemudian sistem akan
mengirim respon menampilkan halaman utama kepada
pencarian datauser/dosen harus masuk ke halaman form
login dosen kemudiansistem 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 kedatabase
dan memproses data kemudian jika data pencarian
ditemukan maka sistem akan menampilkan pesan data
pencarian ditemukan dan dosen dapat mendownload file
3.6.2 Sequence Diagram Admin
Gambar 3. 9GambarSequence DiagramAdmin
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
username dan password jika berhasil login sistem akan
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. 10GambarSequence DiagramMahasiswa
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 kontakwebsite
d. Panduan : menu yang menjelaskan tata cara
dalam pencarian data
e. Form pencarian : form yang diperuntukkan bagi
mahasiswa guna mencari data tanpa harus login
3.7.2 Halaman Form Login Dosen
Gambar 3. 12Gambar 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
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. 13Gambar 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
time dan beberapa link lihat data Proyek KPTA
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.
3.7.5 Halaman Panduan
Halaman ini berisi panduan atau petunjuk untuk
pencarian data.
Gambar 3. 15Gambar 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. 16Gambar 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
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. 17Gambar 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. 18Gambar 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
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. 19Gambar 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. 20Gambar LKT Home Admin
Keterangan :
Halaman ini terdapat menu navigasi di bagian
bawah header pada bagian menu navigasi terdapat
- Home - Hapus Data
- Panduan - Upload File
- + Input Data - Logout
3.7.11 Halaman Panduan Admin
Gambar 3. 21Gambar LKT Halaman Panduan Admin
Keterangan :
Halaman ini merupakan panduan bagi admin
dalam mengelola data
Gambar 3. 22Gambar 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. 23Gambar LKT Halaman Input Data TA
3.7.14 Halaman Hapus Data
Halaman ini berisi beberapa link untuk hapus data
Gambar 3. 24Gambar 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. 26Gambar LKT Edit Data TA
3.7.17 Halaman 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. 28Gambar 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
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. 29Gambar 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
Tabel 3. 1Tabel Dosen
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. 2Tabel 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
Tabel 3. 3Tabel 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
Tabel 3. 4Tabel 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
Tabel 3. 5Tabel 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
Tabel 3. 6Tabel Upload
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 halamanwebsite.
Tabel 3. 7Tabel 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,
Tabel 3. 8Tabel Login Admin
Username Varchar(30) Null
Password text No
3.9. JST
Berikut ini merupakan JST pencarian data yang dilakukan
olehuser:
3.9.1 JST Dosen
Gambar 3. 30JST Dosen
Keterangan :
TDosen1 merupakan halaman utama dariwebsiteFile
Repository Hasil Proyek, Kerja Praktek dan Tugas
Akhir, setelah itu pilih menuLogin Dosenmaka akan
dialihkan ke TDosen2 (Form Login Dosen).
TDosen3 (Menu Home), TDosen4 (Menu About),
TDosen5(Menu Panduan), TDosen6(Menu Cari
Data Proyek), TDosen7(Menu Cari Data Kerja 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. 31JST Mahasiswa
Keterangan :
TMahasiswa1 merupakan halaman utama dari
website File Repository Hasil Proyek, Kerja Praktek
dan Tugas Akhir didalamnya terdapat Form
Pencarian bagi mahasiswa, jika pencarian tersebut
ditemukan maka akan dialihkan ke
3.9.3 JST Admin
Gambar 3. 32JST 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
