BAB III PERANCANGAN SISTEM

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) Gambar 3. 1 Gambar DFD Level 0 16

17 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.

18 Data Dosen Tabel Dosen Data Dosen Data Mahasiswa Data Mahasiswa Tabel Mahasiswa Dosen Mencari Data Login Konfirmasi Login Sukses Menampilkan Data Mencari Data Menampilkan Data Mahasiswa Tabel Proyek Data Proyek KPTA Data Proyek KPTA 1 Proses Cari Data Proyek KPTA Data Kerja Praktek Data Kerja Praktek Tabel Kerja Praktek Data Kerja Praktek Tabel Tugas Akhir Data Kerja Praktek Admin 1. Login 2.Konfirmasi Login Sukses Data Proyek Tabel Proyek 3. Masuk Menu Halaman Input Data 4. Menampilkan Form Input Data 5. Input Data Proyek KPTA 6. Konfirmasi 7. Edit dan Hapus Data 8. Konfirmasi 2 Proses Input, Edit dan Hapus Data Proyek KPTA Data Proyek Data Kerja Praktek Tabel Kerja Praktek Data Kerja Praktek Tabel Tugas Akhir Data Tugas Akhir Data Tugas Akhir Tabel Upload Data Mahasiswa Tabel Mahasiswa Admin Data Upload File Data Upload File Data Mahasiswa Dosen 1. Upload File 2. Konfirmasi File Berhasil Di Upload 3 Proses Upload File 3. Download File 4. Mengirim File Gambar 3. 2 Gambar DFD Level 1

19 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

20 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

21 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 Form Login Admin Login Admin Home About Home Panduan Panduan + Input Data Input Data Proyek Input Data Kerja Praktek Input Data Tugas Akhir - Hapus Data Hapus Data Proyek Hapus Data Kerja Praktek Hapus Data Tugas Akhir Upload File Logout Gambar 3. 5 Sitemap Admin

22 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 diagram digunakan untuk menganalisa proses. Sebuah activity diagram bukan sebuah tool yang sempurna untuk

23 menganalisis masalah dari sistem. Berikut adalah skema Activity Diagram sebagai alur penggunaan Sistem Informasi berbasis website Hasil Proyek, Kerja Praktek dan Tugas Ahkir. 3.5.1 Activity Diagram User/Dosen Gambar 3. 6 Gambar Activity Diagram User/Dosen

24 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.

25 3.5.1 Activity Diagram User/Mahasiswa Gambar 3. 7 Gambar Activity Diagram User/Mahasiswa 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 komunikasi diantara obyek-obyek tersebut. Diagram ini juga

26 menunjukkan serangkaian pesan yang dipertukarkan oleh obyekobyek yang melakukan suatu tugas atau aksi tertentu. Obyekobyek 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 Pada gambar sequence diagram diatas dapat dijelaskan bagaimana user/dosen melakukan pencarian data. Langkah pertama yang harus dilakukan oleh user/dosen adalah masuk kehalaman utama kemudian sistem akan mengirim respon menampilkan halaman utama kepada user/dosen. Selanjutnya untuk dapat masuk ke halaman

27 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.

28 3.6.2 Sequence Diagram Admin Gambar 3. 9 Gambar Sequence Diagram Admin 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 login dosen kemudian sistem akan menampilkan respon

29 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. 10 Gambar Sequence Diagram Mahasiswa Pada gambar sequence diagram diatas dapat dijelaskan bagaimana mahasiswa melakukan pencarian data. Pertama yang harus dilakukan mahasiswa adalah buka

30 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. Gambar 3. 11 Gambar LKT Beranda

31 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.

32 3.7.2 Halaman Form Login Dosen Gambar 3. 12 Gambar LKT Form Login Dosen 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.

33 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 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 Mahasiswa.

34 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

35 3.7.5 Halaman Panduan Halaman ini berisi panduan atau petunjuk untuk pencarian data. Gambar 3. 15 Gambar LKT Halaman Panduan 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 akan ditampilkan pada tabel.

36 Gambar 3. 16 Gambar LKT Halaman Cari Data Proyek 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.

37 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 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 notification Pencarian tidak ditemukan, jadi

38 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 a. Pada halaman cari data tugas akhir dosen bisa mencari data dengan cara klik dropdown pada cari berdasarkan misalkan Judul kemudian tuliskan pada keyword.

39 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 a. Username berisi nama (default) yang telah diatur dalam database, sehingga admin tidak bisa sembarangan memasukan nama.

40 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 Halaman ini terdapat menu navigasi di bagian bawah header pada bagian menu navigasi terdapat beberapa menu yaitu :

41 - Home - Hapus Data - Panduan - Upload File - + Input Data - Logout 3.7.11 Halaman Panduan Admin Gambar 3. 21 Gambar LKT Halaman Panduan Admin Halaman ini merupakan panduan bagi admin dalam mengelola data 3.7.12 Halaman Input Data

42 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.

43 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. Gambar 3. 25 Gambar LKT Halaman Hapus Data TA

44 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

45 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 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.

46 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.

47 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.

48 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.

49 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.

50 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.

51 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.

52 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 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). Kemudian setelah behasil login akan menuju ke

53 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. 31 JST Mahasiswa 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 TMahasiswa2(Form Hasil Cari).

54 3.9.3 JST Admin Gambar 3. 32 JST Admin 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 TA, TAdmin10(Menu Upload File).