BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Website Berdasarkankebutuhan dari pengguna, pembuatan website ini ditujukan kepada dosen D3 TI untuk mengisi silabus setelah mengajarkan materi kepada mahasiswa, sehingga antara dosen yang satu dengan yang lainnya dapat memantau materi yang telah diajarkan dosen kepada mahasiswanya. 3.2 DFD ( Data Flow Diagram ) Sebuah teknik grafis yang menggambarkan aliran informasi dan transformasi yang diaplikasikan pada saat data bergerak dari input menjadi output. Berikut adalah gambaran DFD website Laporan Proses Belajar Mengajar : DFD Level 0 4. Menampilkan Halaman login 3. Buka Website Admin Website Laporan Proses Belajar Mengajar Dosen 1. Input data dosen 2. Konfirmasi data dosen telah di simpan 9. Mengelola data hasil inputan dosen 10. Konfirmasi berhasil menyimpan data 5. Memasukan Username dan Password 6. Konfirmasi Berhasil Login 7. Mengisi silabus, tambah, hapus, edit data 8. Konfirmasi Berhasil 11. Print/Cetak data 12. Konfirmasi Cetak Gambar 3.2.1 DFD tingkat 0 Website Laporan Proses Belajar Mengajar 13
14 Keterangan : Data yang mengalir dari atau ke admin: 1. Input data dosen. 2. Konfirmasi data dosen telah tersimpan 9. Mengelola hasil inputan dosen. 10. Konfirmasi berhasil menyimpan data. Data yang mengalir dari atau ke user : 1. Menampilkan halaman login 2. Buka website. 5. Memasukkan Username dan Password. 6. Konfirmasi berhasil Login. 7. Mengisi Silabus, tambah data, hapus dan edit data. 1. Konfirmasi berhasil. 11. Print/Cetak data. 12. Konfirmasi Cetak. Dari data flow diagram diatas admin dapat mengolah data catatan setelah mengajar yang telah di inputkan user, sedangkan user/dosen hanya dapat menambah,edit, dan menghapuscatatan setelah mengajar yang akan user posting.
15 DFD Level 1 : Tabel Silabus Data Silabus Data Silabus Admin Proses Cari Silabus, Tambah data, hapus, dan edit Dosen 1. Input data matakuliah 2. Konfirmasi data tersimpan 5. Mengelola data silabus 6. Konfirmasi Tersimpan 3. Tambah, edit, hapus data silabus 4. Konfirmasi Inputan tersimpan Data Matkul Data Matkul Tabel Matakuliah Keterangan : Data yang mengalir dari atau ke Admin : 1. Input data matakuliah. 2. Konnfirmasi data tersimpan. 5. Mengelola data silabus. 6. Konfirmasi tersimpan. Data yang mengalir dari atau ke User : 3. Tambah, edit, hapus data. 4. Konfirmasi inputan tersimpan.
16 Dosen 1. Cetak/Print File 2. Menerima File Proses Cetak/Print Data 3. upload File 4. Menyimpan Data Admin Data Silabus Data Silabus Tabel Silabus 3. 3.2.2 DFD tingkat 1 Website Laporan Proses Belajar Mengajar Keterangan : Data yang mengalir dari atau ke User : 1. Cetak file. 2. Menerima file. Data yang mengalir dari atau ke Admin : 3. Upload file. 4. Menyimpan data. 3.3 Sequence Pada gambar di jelaskan bagaimana sistem dalam penginputan atau user melakukan penambahan, edit, dan hapus data. Langkah-langkah apa yang harus dijalankan. Pada langkah pertama dosen yang akan mengakses halaman utama, mengirimkan data kemudian interface website muncul dan mengirimkan respon balik lalu menampilkan halaman awal atau
17 halaman login kepada user. User memasukkan Nama dan Password. Kemudian sistem memvalidasi data user. Jika salah login, maka user melakukan login ulang. Selanjutnya sistem ketika login berhasil dosen masuk ke halaman login, kemudian sistem akan menampilkan halaman home, di halaman home berisi gambar ekstrakurikuler D3TI. Kemudian lalu jika sudah diisi maka akan ditampilkan dan memilih barang yang akan di pinjam dan tuliskan jumlah, selanjutnya jika menyetujui maka data akan dikirim ke database, setelah menyimpan data, data akan di kirim kembali kemudian sistem akan menampilkan tulisan pada halaman website, bahwa datanya telah tersimpan, kemudian user tinggal kembali ke halaman peminjaman, atau keluar dari website.
18 User Halaman Website Databse Buka Website Menampilkan Halaman Login Masukan Nama dan Password Validasi Data Pesan salah login Login ulang Cek Data Login Login OK Menambilkan Halaman Utama Proses kelola Data Kembali ke halaman Utama Logout Gambar 3.3.1 Sequence Diagram
19 3.4 UML Activity Diagram UML Activity Diagram merupakan versi UML untuk sebuah flowchart. Activity diagram digunakan untuk menganalisa proses. Sebuah activity diagram bukan sebuah tool yang sempurna untuk menganalisis masalah dari sistem. Berikut adalah skema Activity Diagram sebagai alur penggunaan Sistem Informasi Laporan Proses Belajar Mengajar berbasis website. User Website Admin Membuka Website Menampilkan Halaman Login Mengisi form login Menampilkan halaman utama(home) Membuka Halaman Tambah Data Tidak menambah data Mengisi Tambah Data Menampilkan form Tambah data Isi Catatan setelah mengajar Simpan Menampilkan hasil inputan Menyimpan data hasil inputan Menampilkan data Konfirmasi Data Tersimapan Gambar 3.4.1 UML Activity
20 Di dalam Activity Diagram ini di jelaskan jalannya bagaimana alur user dalam menggunakan website dan melakukan input, edit, dan hapus data silabus/catatan setelah dosen mengajar. Pertama-tama user harus memilih apakah akan input data atau tidak, jika tidak maka, user hanya akan melihat website saja, kemudian keluar. Sedangkan jika iya maka akan mengisi form login yang ada di website. Lalu jika login berhasil system akan menampilkan halaman home. Kemudian userakan melakukan Tambah Data atau tidak. Jika akan menambah data maka sistem akan menampilkan form Tambah Data. Kemudian user akan menginputkan data silabus/catatan dosen setelah mengajar dan menyimpannya, kemudian system akan menampilkan hasil inputan dan admin akan mengelola data yang telah diinputkan oleh user dan menyimpannya. Pada saat admin mengelola data inputan, maka sistem akan mengonfirmasi data tersimpan kepada user. 3.5 Sitemap Sitemap atau sering disebut peta situs kurang lebihnya adalah sesuatu yang menggambarkan tentang peta dari website,yaitu segala informasi mengenai halaman atau file-file yang ada pada sebuah website. Berikut gambaran sitemap website Laporan Poses Belajar Mengajar dan Multimedia :
21 Login User Login Home Laporan Tambah Data Logout 3.5.1 SiteMap 3.6 Lembar Kerja Tampilan (LKT) Perancangan antarmuka Website Laporan Proses Belajar Mengajar digambarkan seperti ini :
22 1. Halaman Awal/Login (T1) Gambar 3.6.1 LKT Login 1 Keterangan: Halaman awal adalah login yang hanya bisa dibuka oleh dosen D3 TI saja karena harus memasukkan username dan passsword yang telah diinputkan di dalam database. Username berisi nama yang telah diatur dalam database, sehingga user tidak bisa sembarangan memasukan nama. Password hanya diketahui oleh admin dan user saja. Menu navigasi Login berfungsi untuk mengirim perintah yang akan di proses di dalam database. Kemudian setelah login berhasil akan masuk ke halaman Home.
23 1. Tampilan Home (T2) Gambar 3.6.2 LKT Home Keterangan: Pada halaman Home berisi nama user yang login pada tambilan di bawah Header. Home = merupakan menu yang berisi daftar/gambar/informasi extra kurikuler pada Progdi D3 TI UKSW. Pada menu navigasi, terdapat menu logout yakni untuk melogout akun dosen, menu logout terdapat pada setiap menu di setiap halaman setelah login. Pada bagian menu navigasi terdapat beberapa menu yaitu: 1. Home 2. Laporan 3. Tambah Data 4. Logout
24 2. Tampilan Laporan (T3) Gambar 3.6.3 LKT Laporan Keterangan: Halaman Laporan ini berisi semua laporan/catatan setelah dosen mengajar yang telah di inputkan oleh dosen. Pada halaman Laporan dapat di Print, yaitu dengan cara klik menu navigasi Print maka user akan berganti ke halam print untuk mencetak data. Data di dalam menu navigasi Laporan di kelola oleh admin di dalam database, baru kemudian bisa di kelola oleh dosen. 3. Halaman Tambah Data (T4) Gambar 3.6.4 LKT Tambah Data
25 Keterangan: Tambah Data = berisi untuk melakukan input data/memberikan catatan setelah dosen mengajar. Di menu ini dapat menambah, edit dan hapus data yang dapat dilakukan oleh dosen, dan kemudian di kelola admin di database. 4. Halaman Edit (T5) Gambar 3.6.5 LKT Edit Data Keterangan : Edit Data = digunakan untuk mengedit data yang telah di inputkan, apabila ada kesalahan dalam menginput dapat di edit kembali.
26 3.7 JST (Jaringan Simatik Tampilan) Berikut adalah gambaran JST dari website Laporan Proses Belajar Mengajar : Print/Cetak Data T Dosen 3 Home Laporan T Dosen 2 T Dosen 4 Simpan Menu Login Tambah Data T Dosen 1 Edit T Dosen 5 Gambar 3.7.1 JST T1 merupakan halaman utama dari website Laporan Proses Belajar Mengajar yaitu Form Login, setelah login maka akan tampil halaman T2 (Website Laporan Proses Belajar Mengajar), didalamnya terdapat menu menut2 (Home), T3 (Laporan), T4 (Tambah Data), dan T5 (Edit). Pada T3 (Laporan) akan menambah data ke T4 kemudian dilanjutkan T5 untuk mengedit.
27 3.8 Desain Database a. Dosen 3.8.1 Tabel Dosen Nama Field Type Null Kode Dosen Int(20) No Nama Dosen Varchar(50) No NID Int(20) No Password Int(20) No Tabel Dosen berfungsi untuk menyimpan data username dan password yang telah di inputkan admin pada database agar user bisa melakukan Login pada website. b. Matakuliah 3.8.2 Tabel Matakuliah NamaField Type Null Kode Matakuliah Int(20) No Nama Matakuliah Varchar(50) No Semester Varchar(20) No Agenda Matkuliah Text No Presensi Varchar(20) No Tabel Matakuliah berfungsi untuk menyimpan data matakuliah yang telah di inputkan oleh user. Tabel ini menampung nama matakuliah beserta kodenya, semester, dan presensi kehadiran mahasiswa.
28 c. Silabus 3.8.3 Tabel Silabus Nama Field Type Null Id Int(20) No Nama Matakuliah Varchar(50) No Kode Matakuliah Int(20) No Nama Dosen Varchar(50) No Kode Dosen Int(20) No Agenda Matakuliah Text No Presensi Matakuliah Varchar(20) No Tanggal Date No Tabel Silabus berfungsi untuk menyimpan data Silabus/catatan setelah dosen mengajar yang di inputkan oleh user setelah mengajar.