BAB IV PERANCANGAN SISTEM USULAN

(1)

42

PERANCANGAN SISTEM USULAN

4.1. Tahapan Perancangan Sistem 4.1.1. Analisis Kebutuhan

Merupakan langkah awal untuk menentukan program yang dihasilkan. Program yang baik adalah program yang bisa memenuhi semua kebutuhan pengguna. Analisis yang cukup penting dilakukan dalam membangun sebuah program adalah analisis kebutuhan pengguna dan analisis kebutuhan sistem yang dibuat untuk Diskominfotik Jakarta Utara.

Halaman Admin:

A.1. Admin melakukan log.in

A.2. Admin dapat memenejemen berita

A.3. Admin dapat mengelola kategori berita

A.4. Admin dapat mensortir berita (Media)

A.5. Admin dapat menambahkan album foto

A.6. Admin dapat menambahkan dokumentasi galeri foto

(2)

1.1.2. Rancangan Diagram Use Case

Pada rancangan diagram use case ini menunjukan adanya interaksi antara sistem dan aktor. Use Case ini menggambarkan fungsi apa saja yang ada didalam sistem dan dan siapa saja yang berhak menggunakan fungsi-fungsi tersebut. Hal ini menggambarkan ruang lingkup, sehingga dapat dilihat apa saja yang ada diluar organisasi dan sampai mana batasnya.

A. Administrator 1. Log.in

Use Case Diagram Login

Login Administrator Administrator Username Password <<include>> <<include>>

Sumber : Hasil Penelitian 2020

Gambar IV.I. Use Case Diagram

(3)

2. Mengelola Beranda

Use Case Diagram Beranda

Beranda <<include>> Setting Web

Manajemen Berita <<include>> Halaman Statis Media Download Interaksi Bannner <<include>> <<include>> <<include>> <<include>> <<include>> Administrator Keluar <<include>>

Gambar IV.2.

Deskripsi Use Case Beranda

3. Mengelola Setting Web

Use Case Diagram Setting Web

Setting Web <<include>> Identitas Web

Logo Header <<include>> Foto Pimpinan Manajemen User Manajemen Menu List Slider Slider Berita <<include>> <<include>> <<include>> <<include>> <<include>> Administrator

Gambar IV.3. Mengelola Setting Web

(4)

4. Manajemen Berita

Use Case Diagram Manajemen Berita

Manajemen

Berita <<include>> Berita

Kategori <<include>>

Administrator

Gambar IV.4. Manajemen Berita

5. Halaman Statis

Use Case Diagram Halaman Statis

Halaman Statis <<include>> Judul

Link <<include>>

Administrator Aksi

<<include>>

Gambar IV.5. Halaman Statis

(5)

6. Mengelola media

Use Case Diagram Media

Media <<include>> Album Photo

Galeri Photo <<include>>

Administrator Sekilas Info <<include>>

Gambar IV.6. Mengelola Media

7. Download

Use Case Diagram Downdload

Download <<include>> Judul

Nama File <<include>>

Administrator Tgl Posting

<<include>>

Gambar IV.7. Download

(6)

8. Interaksi

Use Case Diagram Interaksi

Interaksi <<include>> Agenda

Pengumuman <<include>> Administrator Polling <<include>> Hubungi Kami <<include>>

Gambar IV.8. Interaksi

B. Pengunjung 1. Beranda

Use Case Diagram Beranda

Beranda <<include>> Profil

Tes Menu <<include>> Pengunjung Informasi <<include>> Berita <<include>> Artikel Artikel Contact Us <<include>> <<include>> <<include>>

Gambar IV.9. Beranda

(7)

2. Profil

Use Case Diagram Profil

Profil <<include>> Visi dan Misi

Sejarah <<include>>

Pengunjung

Gambar IV.10. Profil

3. Informasi

Use Case Diagram Informasi

Informasi <<include>> Agenda

Pengumuman <<include>> Pengunjung Download 10 Program PKK <<include>> <<include>>

Gambar IV.11. Informasi

(8)

4. Berita

Use Case Diagram Berita

Berita

<<include>>

Direktori Berita

Pengunjung

Gambar IV.12. Berita

5. Artikel

Use Case Diagram Artikel

Artikel

<<include>>

Direktori Artikel

Pengunjung

Gambar IV.13. Artikel

(9)

6. Galeri

Use Case Diagram Galeri

Galeri

<<include>>

Galeri Kegiatan

Pengunjung

Gambar IV.14. Galeri

7. Contact Us

Use Case Diagram Contact US

Contact Us

<<include>>

Form Contact Us

Pengunjung

Gambar IV.15. Contact Us

(10)

Berikut adalah penjelasan atau deskripsi Use Case Diagram:

1. Halaman Admin

Tabel IV.1.

Deskripsi Use Case Menu Login Use Case Narative Menu Login

Tujuan Melakukan login dan masuk ke dalam sistem informasi

pengolahan berita

Deskripsi Sistem ini memungkinkan aktor untuk mengakses sistem

informasi pengolahan berita

Skenario Utama

Aktor Administrator

Kondisi awal Aktor membuka sistem informasi pengolahan berita

Aksi Aktor Reaksi Sistem

1. Aktor memilih tombol login

Sistem akan menampilkan texbox untuk mengisi kode

username dan password

Kondisi Akhir Jika perintah sesuai maka sistem akan masuk kedalam sistem

informasi pengolahan berita

Tabel IV.2.

Deskripsi Use Case Beranda Use Case Narative Beranda

Tujuan Mengakses Beranda

Deskripsi Sistem ini memungkinkan aktor untuk mengelola

sistem informasi pengolahan

Skenario Utama

Aktor Administrator

Kondisi Awal Aktor membuka sistem informasi pengolahan berita

(11)

1. Aktor memilih Setting Web 2. Aktor memilih Manajemen Berita 3. Aktor memilih Halaman Statis 4. Aktor memilih Media 5. Aktor memilih

Download 6. Aktor memilih

Interaksi

7. Aktor memilih Banner 8. Aktor memilih Keluar

Sistem ini menampilkan submenu : identitas web, logo header, foto pimpinan, manajemen user, manajemen menu,list slider dan slider berita

Sistem ini menampilkan submenu: berita dan kategori Sistem akan menampilkan halaman statis

Sistem akan menampilkan submenu: album photo, galeri photo, sekilas info

Sistem akan menampilkan download

Sistem akan menampilkan submenu: agenda, pengumuman, polling, hubungi kami

Sistem akan menampilkan banner Sistem akan menampilkan form keluar

Kondisi Akhir Jika perintah sesuai maka sistem akan menampilkan

seperti yang diinginkan oleh aktor

Tabel IV.3.

Deskripsi Use Case Setting Web Use Case Narative Setting Web

Tujuan Melakukan pengolahan data yang ada di menu

setting web

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu setting web

Skenario Utama

Aktor Administrator

Kondisi Awal Aktor membuka sistem informasi pengolahan

berita

(12)

Aktor memilih identitas web Aktor memilih foto pimpinan Aktor memilih manajemen user Aktor memilih manajemen menu Aktor memilih list slider

Aktor memilih slider beranda

Sistem ini menampilkan identitas web Sistem ini menampilkan foto pimpinan Sistem ini menampilkan manajemen user Sistem ini menampilkan manajemen menu Sistem ini menampilkan list slider

Sistem menampilkan slider beranda

Kondisi Akhir

Jika perintah sesuai maka sistem akan menampilkan seperti yang diinginkan oleh aktor

Tabel IV.4.

Deskripsi Use Case Manajemen Berita

Use Case Narative Manajemen Berita

manajemen berita

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu manajemen berita

Skenario Utama

Aktor Administrator

berita

Aktor memilih berita Aktor memilih kategori

Sistem ini menampilkan berita Sistem ini menampilkan kategori Kondisi Akhir

(13)

Tabel IV.5.

Deskripsi Use Case Narative Halaman Statis Use Case Narative Halaman Statis

halaman statis

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu halaman statis

Skenario Utama

Aktor Administrator

berita

Aktor memilih halaman statis Sistem ini menampilkan judul, link dan aksi

Kondisi Akhir

Tabel IV.6.

Deskripsi Use Case Narative Manajemen Media Use Case Narative Manajemen Media

media Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu media

Skenario Utama

Aktor Administrator

berita

Aktor memilih album photo Aktor memilih galeri photo Aktor memilih galeri sekilas info

Sistem ini menampilkanalbum photo Sistem ini menampilkan galeri photo Sistem ini menampilkan sekilas info

(14)

Kondisi Akhir

Tabel IV.7.

Deskripsi Use Case Narative Download Use Case Narative Download

download

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu download

Skenario Utama

Aktor Administrator

Kondisi Awal Aktor membuka sistem informasi download

Aktor memilih halaman download

Sistem ini menampilkan judul, nama file, tgl posting

Kondisi Akhir

Tabel IV.8.

Deskripsi Use Case Narative Interaksi Use Case Narative Interaksi

interaksi

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu interaksi

Skenario Utama

(15)

Kondisi Awal Aktor membuka sistem informasi pengolahan interaksi

Aktor memilih agenda

Aktor memilih pengumuman Aktor memilih polling Aktor memilih hubungi kami

Sistem ini menampilkan agenda Sistem ini menampilkan pengumuman Sistem ini menampilkan polling Sistem ini menampilkan hubungi kami Kondisi Akhir

Tabel IV.9.

Deskripsi Use Case Narative Banner Use Case Narative Banner

banner

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu banner

Skenario Utama

Aktor Administrator

berita

Aktor memilih halaman statis Sistem ini menampilkan judul, link dan aksi

Kondisi Akhir

Jika perintah sesuai maka sistem akan menampilkan seperti yang diinginkan oleh actor

Tabel IV.10.

Deskripsi Use Case Menu Keluar Use Case Narative Menu Keluar

Tujuan Melakukan keluar dari sistem informasi pengolahan berita

Deskripsi Sistem ini memungkinkan aktor untuk menutup sistem

(16)

Skenario Utama

Aktor Administrator

Kondisi awal Aktor belum masih berada sistem informasi pengolahan berita

Aktor memilih tombol keluar

Sistem akan memvalidasi aktor keluar dari sistem informasi pengolahan berita

Kondisi Akhir

Jika perintah sesuai maka sistem akan menutup aplikasi penjualan kredit dan kembali ke menu login atau tetap berada didalam sistem

2. Halaman Pengunjung

Tabel IV.11.

Deskripsi Use Case Narative Beranda Use Case Narative Beranda

Tujuan Mengakses Beranda

Deskripsi Sistem ini memungkinkan aktor untuk mengelola

sistem informasi pengolahan berita

Skenario Utama

Aktor Pengunjung

Kondisi Awal Aktor membuka sistem informasi pengolahan berita

(17)

9. Aktor memilih Profil 10. Aktor memilih Tes Menu 11. Aktor memilih Informasi 12. Aktor memilih Berita 13. Aktor memilih Artikel 14. Aktor memilih Galery 15. Aktor memilih Contact Us

Sistem ini menampilkan submenu : visi dan misi, sejarah

Sistem ini menampilkan tes menu

Sistem akan menampilkan submenu: agenda, pengumuman, download, 10 program PKK

Sistem akan menampilkan direktori berita Sistem akan menampilkan direktori artikel Sistem akan menampilkan galery kegiatan

Sistem akan menampilkan for pengisian contact us

Kondisi Akhir Jika perintah sesuai maka sistem akan menampilkan

seperti yang diinginkan oleh aktor Sumber : Hasil Penelitian 2020

Tabel IV.12.

Deskripsi Use Case Narative Profil Use Case Narative Profil

profil

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu profil

Skenario Utama

Aktor Pengunjung

berita

Aktor memilih visi dan misi Aktor memilih sejarah

Sistem ini menampilkan visi dan misi Sistem ini menampilkan sejarah

(18)

Kondisi Akhir

Tabel IV.13.

Deskripsi Use Case Narative Informasi Use Case Narative Informasi

informasi

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu informasi

Skenario Utama

Aktor Pengunjung

berita

Aktor memilih agenda

Aktor memilih pengumuman Aktor memilih download Aktor memilih 10 program PKK

Sistem ini menampilkan agenda Sistem ini menampilkan penguuman Sistem ini menampilkan download

Sistem ini menampilkan 10 program PKK Kondisi Akhir

Tabel IV.14.

Deskripsi Use Case Narative Berita Use Case Narative Berita

berita

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu berita

(19)

Aktor Pengunjung

berita

Aktor memilih berita Sistem ini menampilkan direktori berita

Kondisi Akhir

Tabel IV.15.

Deskripsi Use Case Narative Artikel Use Case Narative Artikel

artikel

Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu artikel

Skenario Utama

Aktor Pengunjung

berita

Aktor memilih artikel Sistem ini menampilkan direktori artikel

Kondisi Akhir

Jika perintah sesuai maka sistem akan menampilkan seperti yang diinginkan oleh actor

(20)

Tabel IV.16.

Deskripsi Use Case Narative Contact Us Use Case Narative Contact Us

Tujuan Melakukan pengolahan data yang ada di

menu contact us Deskripsi

Sistem ini memungkinkan aktor untuk mengelola sistem informasi pengolahan berita pada menu contact us

Skenario Utama

Aktor Pengunjung

Kondisi Awal Aktor membuka sistem informasi

pengolahan berita

Aktor memilihcontact us Sistem ini menampilkan form isi contact us

Kondisi Akhir

(21)

4.1.3. Rancangan Diagram Aktifitas

Gambar IV.16. Activity Diagram act Use Case Model

kepala bagian admin editor reporter mulai meliput berita

memberikan berita _{menerima berita}

mengecek berita

tidak

mengedit berita

ya

menerima berita yang sudah di edit oleh editor

memberikan keterangan kegiatan berita yang

telah di agendakan

mengupload berita ke website

mengarsipkan berita untuk dilaporkan kepada

kepala bagian

memberikan arsip atau laporan

kepala bagian menerima laporan atau arsip yang

diberikan

kepala bagian mengecek laporan atau arsip

tidak

ya

menyimpan laporan atau arsip yang sudah benar

(22)

4.1.4. Rancangan Dokumen Sistem Usulan

Rancangan dokumen sistem usulan yang penulis susun adalah untuk menambah atau memperbaiki rancangan sistem yang lama yang memiliki kekurangan. Prosedur dokumen sitem usulan ini antara lain:

a. Bentuk Dokumen Masukan

Nama Dokumen Masukan : Dokumen foto kegiatan

Fungsi : Untuk mengetahui jenis kegiatan

Sumber : masyarakat/kegiatan

Tujuan : Pemerintah

Media : Online dan offline

Frekuensi : Setiap ada jenis kegiatan

Bentuk : Lampiran A.1

b. Bentuk Dokumen Keluaran

Nama Dokumen Masukan : Berita acara

Fungsi : Untuk memberikan informasi

Sumber : Diskominfotik

Tujuan : Publik

Media : Online

Frekuensi : Setiap ada berita acara

(23)

4.1.5. Rancangan Prototype

a. Halaman Menu Utama Pengunjung

Gambar IV.17. Halaman Menu Utama

(24)

b. Informasi Halaman Informasi

Gambar IV.18. Halaman Informasi

c. Halaman Berita Kegiatan

Gambar IV.19. Berita Kegiatan

(25)

d. Halaman Artikel Kegiatan

Gambar IV.20. Artikel kegiatan Peliputan

e. Halaman Galeri Foto Dokumentasi

Gambar IV.21.

(26)

f. Halaman Contact Us

Gambar IV.22. Contact Us

g. Halaman log.in Admin

Gambar IV.23. Halaman Log.in Admin

(27)

h. Halaman Manajemen Berita

Gambar IV. 24. Manajemen Berita

i. Halaman statis admin

Gambar IV.25. Statis admin

(28)

j. Halaman Media Admin

Gambar IV.26. Media admin

k. Halaman Interaksi Admin

Gambar IV. 27. Interaksi Admin

(29)

4.2. Perancangan Perangkat Lunak

Perancangan perangkat lunak merupakan serangkaian langkah yang memungkinkan seorang web designer menggambarkan kerangka kerja untuk mendapatkan perangkat lunak yang bisa berjalan dengan baik.

4.2.1. ERD (Entity Relatioship Diagram)

Gambar IV.28.

(30)

4.2.2. LRS (Logical Record Structure)

Gambar IV.29.

LRS (Logical Record Structure)

1.2.3. Spesifikasi File

Pada pembuatan program penulis merancang juga database yang berfungsi untuk menyimpan semua data yang di input dalam program yang kemudian akan di simpan dalam database. Dalam pembuatan program ini penulis membuat sebuah database yang berfugsi untuk menyimpan data-data pada peliputan berita di Diskominfo Jakarta Utara.

Adapun spesifikasi file-file tersebut adalah :

Data Website

1. Nama Databases : Tesskpd

Nama File : Album

Akronim : Album

(31)

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 455 Byte

Kunci Field : id_album

Software : Mysql

No. Elemen Data Akronim Tipe Panjang ket

1. Id album Id_album int 5 Primery key

2. Judul Album Jdl_album varcar 250

3. Album seo Album_seo varchar 100

4. Gambar album Gbr_album varchar 100

5. aktif aktif enum -

Nama File : Berita

Akronim : Berita

Fungsi : Untuk menambahkan isi berita kegiatan

(32)

Media : Harddisk

Kunci Field : id_berita

Software : Mysql

No. Elemen data Akronim Tipe Panjang Ket

1. Id berita Id_berita int 5 Primery key

2. Id kategori Id_kategori int 5 Foreign Key

3. username username varchar 30

4. judul judul varchar 250

5. Judul seo Judul_seo varchar 100

6. Isi berita Isi_berita text -

7. hari Hari varchar 20

8. tanggal tanggal date -

9. jam jam Time -

10. gambar gambar varchar 100

11. dibaca dibaca int 5

12. tag tag varchar 100

Nama File : Gallery

Akronim : Gallery

Fungsi : Untuk menyimpan beberapa foto dokumentasi peliputan

Akses File : Random

Media : Harddisk

(33)

Software : Mysql

1. Id gallery Id_gallery Int 5 Primery key

2. Id album Id_album Int 5 Foreign Key

3. Jdl gallery Jdl_gallery Varchar 100

4. Keterangan Keterangan Text -

5. Gallery seo Gallery_seo Varchar 100

6. Gbr gallery Gbr_gallery Varchar 100

Nama File : kategori

Akronim : kategori

Fungsi : Untuk mengelompokan jenis kategori berita

Akses File : Random

Media : Harddisk

Kunci Field : id_kategori

Software : Mysql

No. Elemen data Akronim Tipe Panjang Keterangan

1. Id kategori Id_kategori Int 5 Primery key

2. Nama kategori Nama_kategori Varchar 50

3. Kategori seo Kategori_seo Varchar 100

4. aktif aktif enum -

(34)

Nama File : komentar

Akronim : komentar

Fungsi : Untuk memberikan komentar

Akses File : Random

Media : Harddisk

Kunci Field : id_komentar

Software : Mysql

1. Id komentar Id_komentar int 5 Primery key

2. Id berita Id_berita Int 5

3. Nama komentar Nama_komentar varchar 100

4. url url varchar 100

5. Isi komentar Isi_komentar text -

6. Tgl Tgl Date -

7. Jam komentar Jam_komentar Time -

8. Aktif aktif enum -

Nama File : mainmenu

Akronim : mainmenu

(35)

Akses File : Random

Media : Harddisk

Kunci Field : id_main

Software : Mysql

1. Id main Id_main Int 5 Primery key

2. Nama menu Nama_menu Varchar 50

3. Link Link Varchar 100

4. Aktif Aktif Enum -

5. Adminmenu adminmenu enum -

Nama File : menu

Akronim : menu

Fungsi : Untuk menampilkan isi navbar

Akses File : Random

Media : Harddisk

(36)

Kunci Field : id_menu

Software : Mysql

1. Id main Id_main Int 5 Primery key

2. Nama menu Nama_menu varchar 50

3. Link Link Varchar 100

5. adminmenu adminmenu enum -

Nama File : submenu

Akronim : submenu

Fungsi : Untuk menampilkan menu didalam navbar

Akses File : Random

Media : Harddisk

Kunci Field : id_sub

(37)

1. Id sub Id_sub Int 5 Primery key

2. Nama sub Nama_sub varchar 50

3. Link sub Link_sub Varchar 100

4. Id main Id_main Int 5

5. Id submain Id_submain Int 11

7. adminsubmenu adminsubmenu enum -

4.2.4. Class Model/Class Diagram

album id_album jdl_album album_seo gbr_album aktif +new +edit +delete galeri id_galeri jdl_album judul_galeri keterangan gallery_seo gbr_gallery +new +edit +delete kategori id_kategori nama_kategori kategori_seo aktif +new +edit +delete menu id_menu nama_menu link id_parent aktif +new +edit +delete berita id_berita id_kategori username judul judul_seo isi_berita hari tanggal jam gambar dibaca tag +new +edit +delete main_menu id_main link aktif admin_menu +new +edit +delete submenu id_sub nama_sub link_sub id_main id_submain aktif admin_submenu +new +edit +delete

Gambar IV.30. Class Diagram

(38)

4.2.5. Sequence Diagram

Gambar IV.31. Sequence Diagram

4.2.6. Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

a. Laptop yang berspesifikasi sebagai berikut:

1) Processor Intel ® cpun335@1.10G21.10G2 2) Ram 2 GB

3) DVDROM

(39)

b. Printer HP DeskJet 2135 c. USB SanDisk 32 GB d. Hardisk 500 GB

2. Spesifikasi Software

a. Sistem Operasi Windows 10

b. Aplikasi Perancangan Menggunakan Sublime Text c. Aplikasi Penyimpanan Database menggunakan MySQL d. Aplikasi Untuk Web Browser menggunakan Google Crome

4.3. Jadwal Implementasi

No KEGIATAN

WAKTU

BULAN I BULAN II BULAN III

1 2 3 4 1 2 3 4 1 2 3 4

1 Persiapan data awal

2 Analisa

3 Desain Sistem

4 Desain Perangkat Lunak

5

Pembuatan & Tes

Program 6 Tes Sistem 7 Pelatihan 8 Pembuatan Buku Petunjuk

9 Evaluasi & Operasional