BAB IV ANALISIS DAN PERANCANGAN 4.1 ANALISIS 4.1.1 Analisis Sistem Tahap analisis sistem dilakukan setelah tahap perencanaan sistem (planning system) dan sebelum tahap sistem desain (design system). Tahap analisis ini sangat penting dan kritis untuk dilakukan, maka tahap ini harus dilakukan setelah tahap perencanaan sistem dan sebelum tahap desain sistem, sebab apabila terjadi kesalahan ditahap ini akan menyebabkan kesalahan di tahap selanjutnya 4.1.2 Analisis Sistem Yang Berjalan a. Deskripsi Masalah Penyampaian informasi SMK GANTRA Yayasan Pendidikan Gandi Putra masih berupa penyebaran surat. Karena dalam pengolahan data informasi SMK GANTRA Yayasan Pendidikan Gandi Putra masih secara manual, hal ini membuat penyampaian informasi sekolah belum berjalan secara optimal dengan keterbatasan penyampaian informasi. Dalam hal ini juga penyampaian berita serta kegiatan yang dilakukan oleh SMK GANTRA Yayasan Pendidikan Gandi Putra masih belum tterpublikasi dengan baik dikarenakan banyak kendala mengenai kearsipan sekolah yang tidak tersimpan dengan baik. 26
27 Gambar 4.1 Flowchart Analisis Sistem Yang Berjalan b. Pemecahan Masalah Berdasarkan uraian deskripsi masalah diatas maka diperlukan sebuah web profile yang dapat digunakan untuk penyampaian informasi SMK GANTRA Yayasan Pendidikan Gandi Putra tanpa membutuhkan waktu dan tenaga yang menyebabkan pengeluaran yang tidak sedikit. 4.1.3 Karakteristik Pengguna Karakteristik pengguna Website SMK GANTRA adalah sebagai berikut: 1. Perangkat Lunak yang dibuat harus bisa membantu administrator dalam menyediakan informasi mengenai SMK GANTRA; 2. Data yang diinputkan sebagai informasi langsung dari sumber datanya dan hasilnya harus dapat dibaca oleh bagian lain yang membutuhkannya;
28 3. Program ini harus mampu menyimpan data dan mempublikasikan berbagai informasi yang tersedia di SMK GANTRA untuk mempermudah dan meningkatkan kualitas sekolah. 4.1.4 Sistem Yang Diusulkan a. Prosedur yang dilakukan oleh user 1) User memasuki halaman web profil; 2) Sistem menampilkan halaman dari sub menu yang dimaksud. b. Prosedur yang dilakukan oleh admin 1) Prosedur baru Login a) Admin mengisi form Login; b) Sistem memverifikasi data user; c) Sistem menampilkan halam web dengan hak akses admin. 2) Prosedur baru updare data untuk Admin a) Admin memilih salah satu menu/sub menu; b) Sistem menampilkan halaman web yang dimaksud; c) Admin melakukan update data; d) Admin menyimpan upadate; e) Sistem menampilkan halaman web yang telah terupdate.
Gambar 4.2 Flowchart Sistem Yang Diusulkan 29
30 4.1.5 Analisis Kebutuhan Merupakan tahap persiapan, dimana pada tahapan ini dilakukan survey ke lapangan atau lokasi dilakukannya penelitian dengan tujuan untuk mengidentifikasi hal-hal yang berkaitan dengan sistem yang akan dikembangkan. a. Analisis Kebutuhan Fungsional Untuk mengtasi masalah mengenai informasi dan data yang masih manual maka dibuat sistem baru yang memanfaatkan teknologi informasi khususnya media internet agar dapat diakses dengan cepat dan mudah.untuk hak akses website ini terbagi menjadi dua yaitu : 1. Admin : admin merupakan user yang dapat menggunakan sistem sepenuhnya yaitu dapat melakukan pengeditan, penginputan data dan penghapusan data, menggunakan tools yang tersedia. 2. User : user dapat melihat informasi tentang sekolah, berita, dan galeri foto. b. Analisis Kebutuhan Non Fungsional Analisis kebutuhan nonfungsional menggambarkan kebutuhan luar system yang diperlukan untuk menjalankan aplikasi yang dibangun. Kebutuhan nonfungsional untuk mengoperasikan Aplikasi ini meliputi kebutuhan perangkat keras, kebutuhan perangkat lunak, dan pengguna yang akan menggunakan aplikasi.
31 4.2 PERANCANGAN 4.2.1 Perancangan Sistem 4.2.1.1 Diagram Konteks Context diagram berfungsi untuk menjelaskan hubungan sistem yang akan dibangun serta untuk memudahkan pembuatan sistem. Gambar context diagram tersebut dapa dilihat pada gambar berikut ini : Gambar 4.3 Context Diagram 4.2.1.2 Data Flow Diagram (DFD) Data Flow Diagram (diagram arus data) merupakan alat perancangan sistem yang berorientasi pada alur data yang dapat digunakan untuk menggambarkan hasil analisa maupun perancangan sistem yang mudah dikomunikasikan oleh sistem kepada pemakai maupun pembuat program.
32 DFD Level 1 Proses utama yang terdapat dalam perangkat lunak yang akan dirancang terdiri dari dua proses yaitu Pengolahan data, dan Output. Penjelasan global mengenai proses-proses dalam DFD Level 1 dapat dilihat pada gambar berikut : Gambar 4.2 DFD Level 1
33 DFD Level 2 Pengolahan data DFD level 2 pengolahan data terdapat tiga proses, yaitu menginput data galeri, agenda, dan halaman statis. Penjelasan global mengenai proses-proses dalam DFD Level 2 pengolahan data dapat dilihat pada gambar berikut : Gambar 4.3 DFD Level 2 Pengolahan Data
34 DFD Level 2 Ouput DFD level 2 output terdapat tiga proses, yaitu output data galeri, agenda, dan halaman statis. Penjelasan global mengenai proses-proses dalam DFD Level 2 output dapat dilihat pada gambar berikut : Gambar 4.4 DFD Level 2 Ouput
35 4.2.1.3 Entity Relationship Diagram (ERD) Untuk memodelkan data dan menggambarkan hubungan antara data yang ada pada sistem yang sedang berjalan digunakan alat bantu yaitu diagram E-R. Usulan untuk perancangan diagram E-R yaitu dapat membedakan dengan atribut lainnya sehingga tabel tersebut dapat dijadikan referensi untuk tabel lainnya. Usulan tabel yang akan dibuat utnuk membantu dalam pengolahan data pada website sekolah yaitu Gambar 4.5 ERD
36 4.2.2 Perancangan Basisdata Perancangan database berfungsi sebagai rancangan dalam sistem basisdata yang akan dibuat, adapun struktur table yang ada dari perancngan Website Sekolah SMK GANTRA yaitu sebagi berikut : 1. Tabel Agenda Dalam tabel ini terdapat 11 kolom, yaitu id_agenda, tema, tema_seo, isi_agenda, tempat, pengirim, tgl_mulai, tgl_selesai, tgl_posting, jam, username. Berikut dalam tabel 4.1 implementasi dari tabel agenda: Tabel 4.1 Tabel Agenda Field Type Length Id_agenda Int 5 Tema Varchar 100 Tema_seo Varchar 100 Isi_agenda Text Tempat Varchar 100 Pengirim Varchar 100 Tgl_mulai Tgl_selesai Tgl_posting Date Date Date Jam Varchar 50 Username Varchar 50
37 2. Tabel Album Dalam tabel ini terdapat 5 kolom, yaitu id-album, jdl_album, album_seo, gbr_album, aktif. Berikut dalam tabel 4.2 implementasi dari tabel album: Tabel 4.2 Tabel Album Field Type Length Id_album Int 5 Jdl_album Varchar 100 Album_seo Varchar 100 Gbr_album Varchar 100 Aktif Enum ( Y, N )
38 3. Tabel Berita Dalam tabel ini terdapat 15 kolom, yaitu id_berita, id_kategori, username, judul, judul_seo, headline, isi_berita, hari, tanggal, jam, gambar, dibaca, tag. Berikut dalam tabel 4.3 implementasi dari tabel berita: Tabel 4.3 Tabel Berita Field Type Length Id_berita Int 5 Id_kategori Int 5 Username Varchar 30 Judul Varchar 100 Judul_seo Varchar 100 Headline Isi_berita Enum ( Y, N ) Text Hari Varchar 20 Tanggal Jam Date Time Gambar Varchar 100 Dibaca Int 5 Tag Varchar 100
39 4. Tabel Gallery Didalam tabel ini terdapat 6 kolom, yaitu id_gallery, id_album, jdl_gallery, gallery_seo, keterangan, gbr_gallery. Berikut dalam tabel 4.4 implementasi dari tabel gallery: Gambar 4.9 Tabel Gallery Field Type Length Id_gallery Int 5 Id_album Int 5 Jdl_gallery Varchar 100 Gallery_seo Varchar 100 Keterangan Text Gbr_gallery Varchar 100
40 5. Tabel Halaman Statis Didalam tabel ini terdapat 5 kolom, yaitu id_halaman, judul, isi_halaman, tgl_posting, gambar. Berikut dalam tabel 4.5 implementasi dari tabel halaman statis: Tabel 4.5 Tabel Halaman statis Field Type Length Id_halaman Int 5 Judul Varchar 100 Isi_halaman Tgl_posting Text Date Gambar Varchar 100
41 6. Tabel Identitas Didalam tabel ini terdapat 5 kolom, yaitu id_identitas, nama_website, meta_deskripsi, meta_keyboard, favicon. Berikut dalam tabel 4.6 implementasi dari tabel identitas: Tabel 4.6 Tabel Identitas Field Type Length Id_identitas Int 5 Nama_website Varchar 100 Meta_deskripsi Varchar 250 Meta_keyword Varchar 250 Favicon Varchar 50
42 7. Tabel Kategori Didalam tabel ini terdapat 4 kolom, yaitu id_kategori, nama_kategori, kategori_seo, aktif. Berikut dalam tabel 4.7 implementasi dari tabel kategori: Tabel 4.7 Tabel Kategori Field Type Length Id_kategori Int 5 Nama_kategori Varchar 100 Kategori_seo Varcahar 100 Aktif Enum ( Y, N )
43 8. Tabel Komentar Didalam tabel ini terdapat 8 kolom, yaitu id_komentar, id_berita, nama_komentar, url, isi_komentar, tgl, jam_komentar, aktif. Berikut dalam tabel 4.8 implementasi dari tabel komentar: Tabel 4.8 Tabel Komentar Field Type Length Id_komentar Int 5 Id_berita Int 5 Nama_komentar Varchar 100 url Varchar 100 Isi_komentar Tgl Jam_komentar Aktif Text Date Time Enum ( Y, N )
44 9. Tabel Main Menu Didalam tabel ini terdapat 4 kolom, yaitu id_menu, nama_menu, link, aktif. Berikut dalam tabel 4.9 implementasi dari tabel main menu: Tabel 4.9 Tabel Main menu Field Type Length Id_main Int 5 Nama_menu Varchar 50 Link Varchar 100 Aktif Enum ( y, N )
45 10. Tabel Modul Didalam tabel ini terdapat 10 kolom, yaitu id_modul, link, static_content, gambar, publish, status, aktif, urutan, link)seo. Berikut dalam tabel 4.10 implementasi dari tabel modul: Tabel 4.10 Tabel Modul Field Type Length Id_modul Int 5 Nama_modul Varchar 50 Link Varchar 100 Static_content Text Gambar Varchar 100 Publish Status Aktif Enum ( Y, N ) Enum ( user, admin ) Enum ( Y, N ) Urutan Int 5 Link_seo Varchar 50
46 11. Tabel Submenu Didalam tabel ini terdapat 4 kolom, yaitu id_sub, nama_sub, link_sub, id_main. Berikut dalam tabel 4.11 implementasi dari tabel submenu: Tabel 4.11 Tabel Submenu Field Type Length Id_sub Int 5 Nama_sub Varchar 50 Link_sub Varchar 100 Id_main Int 5 12. Tabel Tag Didalam tabel ini terdapat 4 kolom, yaitu id_tag, nama_tag, tag_seo, count. Berikut dalam tabel 4.12 implementasi dari tabel tag: Tabel 4.12 Tabel Tag Field Type Length Id_tag Int 5 Nama_tag Varchar 100 Tag_seo Varchar 100 Count Int 5
47 13. Tabel Templates Didalam tabel ini terdapat 5 kolom, yaitu id_templates, judul, pembuat, folder, aktif. Berikut dalam tabel 4.13 implementasi dari tabel templates: Tabel 4.13 Tabel Templates Field Type Length Id_templates Int 5 Judul Varchar 100 Pembuat Varchar 50 Folder Varchar 50 Aktif Enum ( Y, N )
48 14. Tabel Admin Didalam tabel ini terdapat 8 kolom, yaitu username, password, nama_lengkap, email, no_telp, level, blokir, id_session. Berikut dalam tabel 4.14 implementasi dari tabel admin: Tabel 4.14 Tabel Admin Field Type Length Username Varchar 50 Password Varchar 50 Nama_lengkap Varchar 100 Email Varchar 100 No_telp Varchar 20 Level Varchar 20 Blokir Enum ( Y, N ) Id-session Varchar 100
49 4.2.3 Perancangan Antarmuka (Mockup) Perancangan antarmuka untuk Website Sekolah SMK GANTRA dengan menggunakan php dan mysql ada dua yaitu halaman utama website dan admin adalah sebagai berikut : a. Perancangan Antarmuka Halaman Admin 1. Tampilan Login Admin Mockup untuk login admin, dapat dilihat pada gambar 4.6: Gambar 4.6 Perancangan Interface Login Admin
50 2. Tampilan Beranda Admin Mockup untuk beranda admin, dapat dilihat pada gambar 4.7: Gambar 4.7 Perancangan Interface Beranda Admin
51 3. Tampilan Manajemen User Mockup untuk melihat manajemen user, dapat dilihat pada gambar 4.8: Gambar 4.8 Perancangan Interface Manajemen User
52 4. Tampilan Manajemen Modul Mockup unutk melihat manajemen modul, dapat dilihat pada gambar 4.9: Gambar 4.9 Perancangan Interface Manajemen Modul
53 5. Tampilan Galeri Foto Mockup untuk melihat galeri foto, dapat dilihat pada gambar 4.10: Gambar 4.10 Perancangan Interface Gallery Foto
54 6. Tampilan Templates Mockup untuk melihat templates, dapat dilihat pada gambar 4.11: Gambar 4.11 Perancangan Interface Templates
55 7. Tampilan Menu Utama Mockup untuk melihat menu utama, dapat dilihat pada gambar 4.12: Gambar 4.12 Perancangan Interface Menu Utama
56 8. Tampilan Sub Menu Mockup untuk melihat submenu, dapat dilihat pada ganbar 4.13: Gambar 4.13 Perancangan Intefacee Sub Utama
57 9. Tampilan Halaman Statis Mockup untuk melihat halaman statis, dapat dilihat pada gambar 4.14: Gambar 4.14 Perancangan Interface Halaman Statis
58 10. Tampilan Agenda Mockup untukk melihat agenda, dapat dilihat pada gambar 4.15: Gambar 4.15 Perancangan Interface Agenda
59 b. Perancangan Antarmuka Halaman User 1. Tampilan Beranda Web Profil Mockup untuk melihat beranda web profil, dapat dilihat pada gambar 4.16: Gambar 4.16 Perancangan Interface Beranda Web Profil
60 2. Tampilan Profil Sekolah Mockup untuk melihat profil sekolah, dapat dilihat pada gambar 4.17: Gambar 4.17 Perancangan Interface Profil Sekolah
61 3. Tampilan Agenda Sekolah Mockup untuk melihat agenda sekolah, dapat dilihat pada gambar 4.18: Gambar 4.18 Perancangan Interface Agenda Sekolah
62 4. Tampilan Galeri Foto Mockup untuk melihat galeri foto, dapat dilihat pada gambar 4.19: Gambar 4.19 Perancangan Interface Galeri Foto