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.
29
Gambar 4.2 Flowchart Sistem Yang Diusulkan
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
Date
Tgl_selesai
Date
Tgl_posting
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
Enum (‘Y’,’N’)
Isi_berita
Text
Hari
Varchar
Tanggal
Date
Jam
Time
Gambar
Varchar
100
Dibaca
Int
5
Tag
Varchar
100
20
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
Text
Tgl_posting
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
Text
Tgl
Date
Jam_komentar
Time
Aktif
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
Publish
Enum (‘Y’,’N’)
Status
Enum (‘user’,’admin’)
Aktif
Enum (‘Y’,’N’)
Urutan
Int
5
Link_seo
Varchar
50
100
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
