Bab III PERANCANGAN SISTEM Website sekolah ini diperuntukkan bagi para user yang ingin mengetahui tentang informasi sekolah SMA N 3 Salatiga. Informasi yang dapat diperoleh para user adalah profil sekolah, visi dan misi, berita, syarat penerimaan siswa baru, download materi. Adapun proses dari sekolah tersebut dapat dilihat dalam diagram konteks dibawah ini. 1.1 Diagram Konteks Diagram konteks adalah sebuah gambaran yang sangat umum mengenai sebuah sistem dimana sistem tersebut digambarkan sebagai proses tunggal. - Admin - Data Informasi User Data Informasi Sistem Pengolaha n Data SMA N 3 Admin - Data Informasi Gambar 3.1 Diagram Konteks Website SMA 3 Salatiga 10
1.2 Data Flow Diagram Data Flow Diagram dapat juga disingkat dengan DFD yang digunakan untuk menggambarkan suatu sistem yang telah ada atau sistem akan dikembangkan DFD merupakan representasi grafik dari suatu sistem menunjukkan proses atau fungsi aliran data tempat penyimpanan data dan entitas eksternal. Dari diagram konteks diatas dapat dibuat suatu DFD. Admin sebelum masuk ke menu harus melakukan login terlebih dahulu. Data Flow Diagram dari Sistem Informasi Website SMA N 3 Salatiga terdiri dari : a. Proses Update data Berita Proses ini meliputi penambahan, pengubahan dan penghapusan data berita. b. Proses Update data Pengumuman Proses ini meliputi penambahan, pengubahan dan penghapusan data pengumuman. 11
DFD dari Sistem Pengolahan Data Admin id id Id valid 1 Login Pilihan Informasi Informasi 2 Mengolah Data User Pilihan Informasi Data Informasi 3 Menampilkan Informasi Data Berita Data Berita Data Pengumuman Data Pengumuman Tbl berita Tbl pengumuman Data Pengumuman Data Berita Gambar 3.2 DFD Level 1 Website SMA 3 Salatiga 12
DFD Proses Mengolah Data Berita Admin Pilih informasi Pilih lihat berita Menu Utama data berita Pilih hapus berita Pilih update berita Lihat data berita Update data berita Hapus data berita Data berita Data berita Data berita Tbl berita Data berita Gambar 3.3 DFD Level 2 manajemen berita Dalam gambar terlihat administrator dapat menambah, melihat, mengubah, dan menghapus data berita dan akan disimpan dalam tabel berita. 13
DFD Proses Mengolah Data Pengumuman Admin Pilih informasi Pilih lihat pengumuman Menu Utama data pengumum an Pilih hapus pengumuman Pilih update pengumuman Lihat data pengumu man Update data pengumum an Hapus data pengumum an Data pengumuman Data pengumuman Data pegumuman Tbl pengumuman Data pengumuman Gambar 3.4 DFD Level 2 manajemen pengumuman Dalam gambar terlihat administrator dapat menambah, melihat, mengubah, dan menghapus data pengumuman dan akan disimpan dalam tabel pengumuman. 14
1.3 Flowchart Start Login N Admin Y Input Data Data Valid? Y N DATABASE Finish Gambar 3.5 Flowchart Jika login yang dimasukkan tidak sesuai dengan Username dan Password Administrator maka akan masuk ke halaman Login lagi. 15
Jika data yang diinput valid maka akan dimasukkan ke dalam database jika invalid maka akan dikembalikan ke halaman input. Jika data sudah masuk maka proses sudah selesai. 1.4 Struktur File Database a. Tabel Admin NAMA FIELD TYPE KETERANGAN Id Int(11), Nomor id admin primary Username Varchar(20) Nama admin Password Varchar (50) Password admin Nama_admin Varchar (50) Nama lengkap admin Tabel 3.1 Struktur tabel Admin b. Tabel Berita NAMA FIELD TYPE KETERANGAN IDberita Int (4), primary Nomor berita Judul Text Nama/keterangan berita Isi Text Isi Berita Waktu Datetime Waktu posting berita Tabel 3.2 Struktur tabel Berita 16
c. Tabel Pengumuman NAMA FIELD TYPE KETERANGAN IDpengumuman Int (4), primary Nomor pengumuman Judul Text Nama/keterangan pengumuman Isi Text Isi pengumuman Link Varchar(200) Link download file Waktu Datetime Waktu posting pengumuman Tabel 3.3 Struktur tabel Pengumuman 1.5 Perancangan Antarmuka Perancangan antarmuka Web ini terdiri dari 2 jenis yaitu website utama dan bagian admin. Seperti di gambarkan dibawah ini : 17
Perancangan antarmuka halaman utama/ beranda Admin Beranda Visi Misi Profil Berita Pengumuman Menu Home Boarding School SMA Negeri 3 Salatiga mulai bulan Nopember 2013 akan memulai program Boarding School bagi siswa kelas Akselerasi kelas X. Dan disediakan asrama untuk para siswa. Read More Prestasi Fasilitas Berita Program Akselerasi Informasi program Akselerasi http://www.youtube.com/ watch?v=o0vukvnxpu0#t=28 Read More Nada Dakwah Dalam rangka peringatan Maulid Nabi Muhammad SAW para iswa muslim bersama para bapak ibu guru menggelar Gebyar Nada Dakwah. Read More Gambar 3.6 Perancangan antarmuka beranda - Pada halaman beranda ini terdapat link admin untuk masuk ke dalam halaman Login admin. - Dan pada kolom utama ditampilkan berita-berita terbaru. 18
Perancangan halaman Visi Misi Beranda Visi Misi Profil Berita Pengumuman Menu I. Visi Sekolah Visi SMA Negeri 3 Salatiga : Home UNGGUL PRESTASI SERASI DALAM BUDI PEKERTI BERDAYA SAING GLOBAL Dengan Indikator sebagai berikut : Peningkatan perolehan Nilai Ujian Nasional Peningkatan penerimaan seleksi Perguruan Tinggi melalui jalur PMDK dan SPMB Peningkatan kegiatan ekstrakurikuler Peningkatan lomba kesenian, KIR, dan Olahraga Peningkatan kedisiplinan siswa Peningkatan pengelolaan sekolah sebagai upaya mewujudkan wawasan wiyata mandala Pemberian pembekalan kecakapan hidup bagi siswa yang tidak bisa melanjutkan ke jenjang pendidikan yang lebih tinggi sesuai dengan minat dan potensinya Prestasi Fasilitas Berita II. Misi Sekolah Misi yang diharapkan dalam mewujudkan visi SMA Negeri 3 Salatiga sebagai berikut: Menyediakan pelayanan belajar yang efektif dengan sumber belajar yang memadai Melaksanakan remedial/pengayaan yang berkelanjutan Penambahan jam pada pelajaran yang diujikan secara nasional kepada siswa kelas X, Xi, XII Melaksanakan UHT (Ulangan harian terprogram) kepada siswa kelas X, XI, XII pada semester I dan II Kerjasama dengan lembaga bimbingan belajar untuk persiapan ke SPMB Melakukan perlatihan dan mendorong siswa mengenal potensi diri untuk bersaing dalam setiap even/kegiatan Menyediakan wahana pembinaan siswa bidang non akademis, melalui kegiatan ekstrakurikuler Memasukkan pelajaran bimbingan karier dan budi pekerti ke dalam kegiatan intrakurikuler bagi siswa kelas X dan XI Menkoordinasi pembinaan mental spiritual yang berkesinambungan Mengajak orang tua/wali murid memberikan bimbingan dalam hal budi pekerti yang baik Menyediakan wahana komunikasi, koordinasi antara sekolah, orang tua, masyarkat dan instansi yang terkait untuk menunjang terlaksanya program sekolah Memberikan pelatihan ketrampilan komputer bagi siswa yang tidak akan melanjutkan ke jenjang yang lebih tinggi sehingga siswa mampu mengidentifikasi, menggunakan dan mereparasi macam-macam peralatan elektronika III. Tujuan Sekolah Berdasarkan pada visi dan misi sekolah, maka tujuan yang hendak dicapai sampai tahun 2008 adalah sebagai berikut: Rata-rata nilai Ujian Nasional mencapai 6,5. Jumlah susunan yang dapat diterima di Perguruan Tinggi Negeri minimal 40% (empat puluh persen). Dapat menghasilkan manusia yang berakhlak dan berperilaku baik lewat pemberdayaan siswa dapat dijadikan asset sekolah. Kedisiplinan siswa dapat dijadikan asset sekolah. Memiliki kelompok KIR yang mampu menjadi finalis LKIR tingkat Kota/Kabupaten, propinsi dan nasional. Kegiatan ekstrakurikuler mampu menampilkan menjadi finalis dalam lomba tingkat kota/kabupaten dan propinsi. Menghindarkan perilaku yang menyimpang (narkoba, miras, pergaulan bebas, dan lain-lain). Pemberdayaan asset dan potensi yang dimiliki untuk menunjang keberhasilan pelaksanaan pendidikan di SMA Negeri 3 Salatiga. Gambar 3.7 Perancangan halaman Visi Misi - Pada halaman Visi Misi di kolom utama terdapat Visi Misi sekolah. 19
Perancangan halaman Fasilitas Beranda Visi Misi Profil Berita Pengumuman Menu Home Prestasi Fasilitas Berita Fasilitas Sekolah Gambar 3.8 Perancangan halaman Fasilitas - Pada halaman Fasilitas di kolom utama terdapat Fasilitas yang tersedia di sekolah. 20
Perancangan halaman Profil Beranda Visi Misi Profil Berita Pengumuman Menu Home Prestasi Fasilitas Berita Profil Sekolah Gambar 3.9 Perancangan halaman Profil - Pada halaman Profil di kolom utama terdapat profil tentang sekolah. 21
Perancangan halaman Prestasi Beranda Visi Misi Profil Berita Pengumuman Menu Home Prestasi Fasilitas Berita Prestasi Sekolah Gambar 3.10 Perancangan halaman Prestasi - Pada halaman Prestasi di kolom utama terdapat prestasi yang pernah diraih sekolah. 22
Perancangan halaman Berita Admin Beranda Visi Misi Profil Berita Pengumuman Menu Home Boarding School SMA Negeri 3 Salatiga mulai bulan Nopember 2013 akan memulai program Boarding School bagi siswa kelas Akselerasi kelas X. Dan disediakan asrama untuk para siswa. Read More Prestasi Fasilitas Berita Program Akselerasi Informasi program Akselerasi http://www.youtube.com/ watch?v=o0vukvnxpu0#t=28 Read More Nada Dakwah Dalam rangka peringatan Maulid Nabi Muhammad SAW para iswa muslim bersama para bapak ibu guru menggelar Gebyar Nada Dakwah. Read More Gambar 3.11 Perancangan halaman Berita - Pada kolom utama berisi berita dan diurutkan dari berita terbaru. - Tombol Read More digunakan untuk melihat berita secara utuh. 23
Perancangan halaman Berita Readmore Admin Beranda Visi Misi Profil Berita Pengumuman Menu Home Prestasi Fasilitas Berita Berita Boarding School Posted by Admin 2014-02-26 10:26:07 SMA Negeri 3 Salatiga mulai bulan Nopember 2013 akan memulai program Boarding School bagi siswa kelas Akselerasi kelas X. Dan disediakan asrama untuk para siswa. Kembali Gambar 3.12 Perancangan halaman Berita-Readmore - Pada kolom utama berisi isi berita secara utuh. - Dan tombol kembali untuk kembali ke halaman berita. 24
Perancangan halaman Pengumuman Admin Beranda Visi Misi Profil Berita Pengumuman Menu Home Prestasi Fasilitas Berita Pengumuman Latihan soal ujian SMA Bhs Indonesia IPA A Download latihan soal ujian Download Gambar 3.13 Perancangan halaman Pengumuman - Pada kolom utama terdapat file-file dan keterangan dari database pengumuman. 25
- Tombol download digunakan untuk download file yang ada di database. Perancangan halaman login admin Admin Beranda Visi Misi Profil Berita Pengumuman Login Administrator Username : Password : Login Gambar 3.14 Perancangan halaman Login Admin 26
- Pada halaman Login Admin, Admin harus memasukkan Username dan Password. - Tombol Login berfungsi untuk masuk ke halaman Admin. Perancangan halaman admin Input dan Edit Berita Input Berita Input Pengumuman Berita Pengumuman Log Out Anda Login sebagai Administrator, Admin Judul : Isi : Enter Text Enter More Text Simpan Gambar 3.15 Perancangan halaman admin Input dan edit berita 27
- Pada kolom utama baris pertama akan menunjukkan nama admin yang login. - Untuk posting berita disediakan form dan admin dapat mengisi judul, Isi. - Tombol Simpan untuk menyimpan berita ke database. Perancangan halaman admin Input dan Edit Pengumuman Input Berita Input Pengumuman Berita Pengumuman Log Out Anda Login sebagai Administrator, Admin Judul : Isi : Enter Text Enter More Text File : Browse Simpan Gambar 3.16 Perancangan halaman admin Input dan Edit pengumuman 28
- Pada kolom utama baris pertama akan menunjukkan nama admin yang login. - Untuk posting pengumuman disediakan form dan Login dapat mengisi judul, Isi. - Tombol Browse untuk mencari file yang akan dimasukkan. - Tombol Simpan untuk menyimpan pengumuman ke database. Perancangan halaman admin Berita dan Pengumuman Input Berita Input Pengumuman Berita Pengumuman Log Out Anda Login sebagai Administrator, Admin No Tanggal Judul Edit Hapus Gambar 3.17 Perancangan halaman admin Berita dan Pengumuman 29
- Pada Halaman ini terdapat kolom yang berisi data dari database yang dapat diakses. - Kolom Edit terdapat tombol Edit untuk mengedit data yang telah masuk. - Kolom Hapus terdapat tombol hapus untuk menghapus data secara permanen. 30