BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Website - Institutional Repository | Satya Wacana Christian University: Pembuatan Sistem Informasi Laporan Proses Belajar Mengajar Berbasis Web
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” : Admin DFD Level 0 1. Input data dosen Website Laporan Proses Belajar Mengajar 5. Memasukan Username dan Password 4. Menampilkan Halaman login 3. Buka Website Dosen 10. Konfirmasi berhasil menyimpan data 9. Mengelola data hasil inputan dosen 2. Konfirmasi data dosen telah di simpan 7. Mengisi silabus, tambah, hapus, edit data
6. Konfirmasi Berhasil Login 8. Konfirmasi Berhasil 12. Konfirmasi Cetak 11. Print/Cetak data
Gambar 3.2.1 DFD tingkat 0 Website Laporan Proses Belajar Mengajar 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.DFD Level 1 : Tabel Silabus Admin
Proses Cari Silabus, Tambah
Data Silabus data, hapus, dan edit Data Silabus Dosen 6. Konfirmasi Tersimpan 5. Mengelola data silabus 2. Konfirmasi data tersimpan 1. Input data matakuliah Data Matkul Data Matkul3. Tambah, edit, hapus data silabus 4. Konfirmasi Inputan tersimpan
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. Dosen 2. Menerima File 1. Cetak/Print File Data Silabus
Proses Cetak/Print Data
Data Silabus 4. Menyimpan Data 3. upload File Admin Tabel Silabus3.
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 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 .
User Databse Halaman Website 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 LogoutGambar 3.3.1 Sequence Diagram3.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 Admin Website
Membuka Website Menampilkan Halaman Login Mengisi form login Menampilkan halaman utama(Home) Tidak menambah data Mengisi Tambah Data Menampilkan form Tambah data Membuka Halaman Tambah Data Isi Catatan setelah mengajar Simpan Menampilkan hasil inputan Menyimpan data hasil inputan Menampilkan data Konfirmasi Data Tersimapan 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
atau sering disebut peta situs kurang lebihnya
Sitemap
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
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 :
1. Halaman Awal/Login (T1)
Gambar 3.6.1 LKT Login 1Keterangan: 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.
1. Tampilan Home (T2)
Gambar 3.6.2 LKT HomeKeterangan: 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
2. Tampilan Laporan (T3)
Gambar 3.6.3 LKT LaporanKeterangan: 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)
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 DataKeterangan : Edit Data = digunakan untuk mengedit data yang telah di inputkan, apabila ada kesalahan dalam menginput dapat di edit kembali.
3.7 JST (Jaringan Simatik Tampilan)
Berikut adalah gambaran JST dari website “Laporan
Proses Belajar Mengajar Print/Cetak Data ” : T Dosen 2 Home T Dosen 3 Laporan Menu Login Tambah Data T Dosen 4 Simpan T Dosen 1 Edit T Dosen 5
Gambar 3.7.1 JSTT1 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.
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.
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.