Perancangan Website Berita “Indonesia Hari Ini

Bab III.
PERANCANGAN SISTEM
3.1. Ruang Lingkup Website
Berdasarkan
kebutuhan
masyarakat
akan
Informasi berita website berita ini dirancang menjadi 3
fungsi utama secara langsung bedasarkan penguna :
a. Admin
melakukan
peninputan
data
dan
manipulasi data
Melakukan login / masuk ke dalam sistem website
kemudian masuk ke daftar berita yang tersedia
melakukan
manipulasi
berupa
input
berita
mamasukan judul berita, nama penulis, kategori
berita, tanggal, isi berita dan gambar yang akan
dimasukan ke dalam database melakukan update
berita. Apabila diketahui data yang dimasukan
mengalami kesalahan serta menghapus berita
apabila sudah tidak dibutuhkan maupun kekeliruan
data.
b. User melakukan registrasi pendaftaran dan
memberikan komentar terhadap berita
User atau pengguna yang ingin memberikan
komentarnya terlebih dahulu melakukan login
sebelumnya terlebih dahulu harus mendaftar untuk
11
12
dapat memberikan komentar. Membuat member
dengan memberikan username dan password
untuk dapat menjadi member dalam website ini,
setelah
selesai
membuat
pengguna
dapat
memasukan username dan password tadi untuk
masuk atau login kedalam website sebagai member
dari website berita ini.
c. User hanya dapat melihat berita tanpa bisa
memberikan komentar
User atau pengguna yang tidak terdaftar atau
mendaftar tetap bisa melihat berita yang ada dalam
website tetapi tidak dapat memberikan argument
atau komentarnya hanya bisa mengamati saja
berita yang disediakan.
Pada perancangan website kali ini, 3 fungsi
penerapan wesite akan diimplementasikan dengan konsep
pemrograman
berbasis
website.
Penerapan
fungsi
bertujuan agar sistem website untuk digunakan baik
admin,
user
mempermudah
dan
user
non
mengaksesnya
member
serta dapat
dan
memberikan
keefisiensian terhadap pengunaan website yang dibuat
untuk tujuan memberikan informasi berita.
13
3.2. Konsep Perancangan Website
3.2.1. Gambaran Umum
Secara umum website penyedia informasi dan
berita akan diimplemenasikan seperti gambar berikut :
Gambar 3.1 Diagram Perancangan Website
Website yang dibangun memiliki fungsi utama,
yaitu sebagai media untuk memberikan informasi kepada
penguna yang membutuhkan informasi berita. Database
merupakan tempat penyimpanan data dan keluaran data
yang akan diakses oleh admin maupun penguna user.
14
Website ini memudahkan admin untuk menginput,
mengedit dan menghapus berita serta memudahkan user
untuk membaca artikel Informasi berita yang telah
diinputkan oleh admin. Kemudahan ini yang akan
mejadikan user mendapatkan berbagai macam berita baik
dari nasional, internasional, ekonomi, olahraga, bola,
hiburan dan gaya hidup, teknologi dan otomotif secara
lebih baik dan bermanfaat.
3.2.2. Penggunaan Website
Penggunaan Website Informasi berita dalam
sistem kerja pembagian menurut hak aksesnya dibagi
menjadi 3 sesuai dengan kebutuhan hak aksesnya antara
lain admin, user member dan user non member yang
akan dilihat pada tabel 3.1 dibawah ini :
Table 3.1 Hak Akses dan kebutuhan website
Kategori
Admin
Hak Akses Website
- Melihat daftar berita, melihat berita
yang dipilih
-
Melihat data menambah mengedit
dan menghapus data berita.
User
-
Melihat daftar user yang terdaftar
-
Melihat daftar berita, melihat berita
yang dipilih
15
-
Memberikan
input
komentar
terhadap berita yang dipilih
User
Member
Non
-
Melihat daftar berita, melihat berita
yang dipilih
-
Tidak bisa memberikan komentar
terhadap berita yang dipilih
-
Membuat user baru atau regristrasi
user baru
Akses pengguna pada website Informasi berita ini
juga menerapkan sistem security dengan berbasis encrypt
and decrypt password, yang juga akan menentukan hak
akses dari penguna baik admin maupun user yang telah
memiliki member untuk menjaga akan keamanan data
pribadi.
3.3. Pemodelan Data
Pemodelan data yang paling sering digunakan
adalah MySQL yang terintegrasi dengan localhost
merupakan teknik pemodelan data yang membatu
mengintegrasikan antara rancangan website dengan
bahasa pemrograman website berbasis PHP Hypertext
16
Preprocessor dengan database yang berasal pada database
MySQL .
Admin
Berita
User
Terhubung / Relationship
Komentar
Gambar 3.2 Relationship model diagram
Gambar 3.3 Tabel admin database beritaIndonesia
Rincian data tabel :
-
id_admin int(4), Auto_Increment, Primary Key
-
member_admin varchar(20)
-
pass_admin varchar(30)
Gambar 3.4 Tabel isi_berita database beritaIndonesia
Rincian data tabel :
-
id_berita int(4), Auto_Increment, Primary Key
-
nama_penulis varchar(50)
-
judul_berita varchar(50)
17
-
kategori_berita varchar(50)
-
tanggal_berita date
-
isi_berita text
-
gambar_berita varchar(255)
Gambar 3.5 Tabel isi_koment database beritaIndonesia
Rincian data tabel :
-
id_koment int(4), Auto_Increment, Primary Key
-
id_berita varchar(50)
-
nama_koment varchar(50)
-
email_koment varchar(50)
-
isi_koment text
-
tanggal date
Gambar 3.6 Tabel user database beritaIndonesia
Rincian data tabel :
-
id_user int(4), Auto_Increment, Primary Key
-
member_user varchar(20)
-
pass_user varchar(30)
-
email varchar(30)
18
3.4. Rancangan Data Aliran Website
Rancangan arus aliran data dari website Informasi
berita terdiri dari porses :
a. Proses rancangan Update data sistem website yaitu
berupa proses penambahan data berita pengeditan
berita dan penghapusan data berita. Proses yang
dilakukan oleh admin serta admin dapat melihat
daftar user yang terdaftar di dalam website ini.
b. Proses melihat data berita yang telah diinput dari
dalam
database
oleh
admin
dan
memilih
berdasarkan kategori yang merupakan daftar berita
yang berupa list – list tiap daftar berita, serta dapat
melakukan pendaftaran registrasi untuk user yang
akan menjadi member dalam website informasi
berita .
c. Proses melihat data berita yang telah diinput dari
dalam
database
oleh
admin
dan
memilih
berdasarkan katgori yang merupakan daftar berita
yang berupa list – list tiap daftar berita, serta dapat
memberikan komentar berdasarkan kategori berita
yang telah dipilih dari berita yang dikehendaki
untuk dipilih untuk dikomentari.
19
Start
Melakukan proses input data
Melakukan proses masuk
Masuk admin /
Beranda
Pengisian form
Proses penyimpanan
Meliahat daftar
Berita
Proses melihat tampilan data
database
Tampilan data
input
Proses menampilkan
Proses Keluar
Gambar 3.7 Data Flow Diagram admin memasukan berita baru.
End
20
Melakukan proses
pemilihan berita
Start
Melakukan proses
masuk
Masuk Admin /
Beranda
Daftar berita
Melakukan proses
menampikan data
Melihat Berita
Melihat data yang
telah di ubah
Melakukan proses
pengubahan data
database
Data Berubah
Melakukan proses
menampikan data yang
diubah
Melakukan proses
keluar
End
Gambar 3.8 Data Flow Diagram admin melakukan perubahan data berita
21
Melakukan proses
pemilihan berita
Start
Melakukan proses
masuk
Masuk Admin /
Beranda
Daftar berita
Melakukan proses
menampikan data
Melihat Berita
Melihat data yang
telah di ubah
Melakukan proses
penghapusan data
database
Data Berubah
Melakukan proses
menampikan data yang
dihapus
Melakukan proses
keluar
End
Gambar 3.9 Data Flow Diagram admin melakukan penghapusan berita
22
Start
Melakukan proses melihat
daftar user
Melakukan proses masuk
Masuk admin /
Beranda
Memilih daftar
user
Proses intergasi data
Meliahat daftar
Berita
database
Proses melihat tampilan data
Tampilan data
user
Proses menampilkan
Proses Keluar
Gambar 3.10 Data Flow Diagram admin melakukan penghapusan berita
End
23
Masuk website
Start
Menamplkan dari
database
Beranda /
Daftar Berita
database
Memilih berita
Melihat berita
Menamplkan dari
database
Melihat Berita
End
Keluar Website
Gambar 3.11 Data Flow Diagram proses melihat berita yang dipilih
24
Melakukan regristrasi
Start
Masuk Website
Beranda /
daftar Berita
Form
regristrasi
Masuk database
Kembali Berita
database
Regristrasi
berhasil
Data ditampilkan
Keluar Website
End
Gambar 3.12 Data Flow Diagram proses pendaftaran/registrasi user baru
25
Proses masuk user
Masuk Website
Start
Masuk
beranda /
daftar berita
Memilih Berita
Memilih Berita
Tidak tervalidasi
Form masuk
user
validasi
database
database
Memilih Berita
tervalidasi
Melihat Berita
database
Tampil user
Koment
Berita
Masuk Website
Memberikan
koment
Keluar Website
Gambar 3.13 Data Flow Diagram pemberian komentar suatu berita
End
26
3.5.
Flowchart Proses Website Informasi berita
Start
Masuk Website
Melihat Daftar
Berita
Ya
Tidak
Beranda
Nasional
Internasional
Ekonomi
Olahraga
Bola
Hiburan & Gaya hidup
Teknologi
Otomotif
Lihat daftar Berita
Cek rule yang
dipilih
Lihat Berita
D
Memilih Sebagai Admin, user
atau regristrasi user Baru
Admin
User
Regristrasi
A
B
C
Gambar 3.14 Flowchart proses pemilihan berita dan pemilihan proses trading penguna
27
B
A
Masukan
nama akun
& kata
sandi
Cek nama akun &
kata sandi
kombinasi
A
Daftar berita
Masukan Berita
baru
Ubah Berita
Hapus
Salah
Lihat Daftar User
database
Validsi masuk
admin
Hasil
Keluar
Benar
Beranda
Nasional
Internasional
Ekonomi
Olahraga
Bola
Hiburan & Gaya hidup
Teknologi
Otomotif
B
D
A
Gambar 3.15 Flowchart manipulasi data yang dilakukan admin
Keluar
28
B
D
Masukan
nama akun
& kata
sandi
Cek nama akun &
kata sandi
kombinasi
C
Daftar berita
Lihat Berita
Keluar
Komentar Berita
Keluar
Salah
Validsi masuk
user
database
Benar
Beranda
Nasional
Internasional
Ekonomi
Olahraga
Bola
Hiburan & Gaya hidup
Teknologi
Otomotif
Hasil
D
D
C
Gambar 3.16 Flowchart proses melihat berita dan memberi komentar
29
C
Masukan Data
baru user
Nama akun,
pass akun,
email
Keluar
Memvalidasi
D
database
Hasil
D
Hasil dari
Admin, user
dan
regristrasi
End
Gambar 3.17 Flowchart membuat user baru dan mengakhiri semua proses
dari Flowchart
Pada gambar 3.12, gambar 3.13, gambar 3.14, dan
gambar 3.15 adalah menjelaskan proses website informasi
berita dan keterangan setiap gambar dapat diuraikan
sebagai berikut :
a. Saat website dijalankan atau dibuka.
b. User yang tidak mempunyai member akan
langsung dapat melihat berita yang disediakan
berdasarkan kaegori yang ada dan terdapat daftar
30
berita menurut kategori yang ada, serta dapat
langsung melihat berita yang ada pada daftar,
apabila admin bisa langsung mengakses ke admin
serta apabila user yang memiliki member dapat
memilih member-nya, dan juga bisa memilih
menu registrasi apabila ingin membuat member
user.
c. Selanjutnya pada admin maka diakan proses
selanjutnya adalah masuk login memasukan
nama_member = username dan pass_member =
password
setelah itu admin dapat masuk ke
dalam site admin. Apabila salah memasukan
maka proses diulang sampai proses masuk dapat
dilakukan dan selanjutnya dapat memilih berita
berdasarkan kategori dan membukanya, serta
dapat perintah berupa memasukan berita baru,
mengedit berita, menghapus berita, dan dapat
melihat jumlah user yang terdaftar dalam
member
di
website
Informasi
berita
dan
mengirimkan berita tersebut ke dalam database
untuk diketahui hasilnya. Setelah selesai admin
dapat keluar dari website.
d. Selanjutnya proses yang dilakukan user sama
seperti admin terlebih dahulu harus login
memasukan
nama_user
=
username
dan
31
pass_user = password. Setelah itu user dapat
login
ke dalam site user.
Apabila salah
memasukan maka proses di ulang sampai proses
login dapat dilakukan memilih berita berdasarkan
kategori memilih berita berdasarkan keinginan
dan dapat memberikan komentar kita terhadap
berita tersebut. Selanjutnya disimpan dalam
database dan memperoleh hasilnya.
e. Selanjutnya pada tahap registrasi melakukan
pendaftaran dengan memasukan memasukan
nama_user = username, pass_user = password
dan email = email. Selanjutya apabila telah
selesai maka akan masuk ke dalam database
untuk proses penyimpanan data. Selanjutnya
akan diketahui apabila pendaftaran kita berhasil.
f. Hasil akhir dari proses akan ditampilkan dan
apabila telah selesai dapat keluar dari website
informasi berita.
3.6. Lembar Kerja Tampilan
Perancangan user interface Website informasi
berita memuat beberapa site yang dirancang berdasarkan
prinsip dan kategorinya masing – masing yang terdiri
dari :
32
a. Form Login (Admin)
Fungsi dari form login admin adalah form di mana
untuk masuk dalam site admin harus memasukan Nama
Member dan Kata sandi dan terdiri dari 1 tombol “Masuk”
dan link “kembali ke beranda” yang digunakan untuk
kembali ke index awal.

Tombol
masuk
memungkin
pada
admin
form
masuk
ke
login
admin
dalam
site
pengolahan data, tetapi terlebih dahulu sistem
akan mengecek apakah nama member dan kata
sani yang dimasukan sudah benar atau salah.

Link
“kembali ke beranda” digunakan untuk
kembali ke awal website
Gambar 3.18 LKT Form login admin
b. Site beranda (admin)

Terdapat status berupa tanggal, jam, nama admin
dan logout dibagian header website berita.
33

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bagian kanan kolom website terdapat kategori
itu merupakan bagian isi dari berita – berita yang
telah di inputkan admin beserta gambar dan
keterangannya.
Gambar 3.19 LKT Site tampilan beranda admin
c. Daftar berita dalam kategori admin

Terdapat status berupa tanggal, jam, nama admin
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.
34

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bawah daftar kategori terdapat list daftar
berita yang terdapat link ubah dan hapus untuk
mengubah dan menghapus berita. Di kolom
bagian kanan terdapat link menu “masukan berita
baru” yang digunakan untuk input berita baru dan
juga untuk melihat data member user.
Gambar 3.20 LKT list daftar berita input, ubah dan hapus berita
d. Berita detail (admin)

Terdapat status berupa tanggal, jam, nama admin
dan logout dibagian Header website informasi
berita.
35

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Merupakan tampilan di mana saat memilih berita
yang akan dilihat berita secara keseluruhan
berdasarkan dari daftar kategori berita.
Gambar 3.21 LKT detail dari berita
e. Form input dan ubah berita (admin)

Terdapat status berupa tanggal, jam, nama admin
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Dalam bagian ini di kolom bagian kanan masih
terdapat link menu “masukan berita baru” yang
digunakan untuk input berita baru dan juga untuk
36
melihat data member user untuk mempermudah
menginput kembali berita.

Dalam bagian input berita terdapat kolom –
kolom pengisian data seperti nama penerbit berita,
kategori berita, tanggal penerbitan, judul berita,
isi berita dan terakhir memasukkan gambar.
Gambar 3.22 LKT form input dan ubah berita
f. List daftar user yang menjadi member (admin)

Terdapat status berupa tanggal, jam, nama admin
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.
37

Berisi daftar user dimana dari user yang
sebelumnya telah melakukan pendaftaran atau
registrasi.

Berisi no, nama, dan email yang sebelumnya
telah
dimasukkan
oleh
user
yang
telah
login
user
melakukan pendaftaran.
Gambar 3.23 LKT form input dan ubah berita
g. Masuk / login user

Tombol
masuk
pada
form
memungkinkan user masuk ke dalam site
pengolahan data, tetapi terlebih dahulu sistem
akan mengecek apakah nama member dan kata
sandi yang dimasukkan sudah benar atau salah.

Link
“kembali ke beranda” di guakan untuk
kembali ke awal website
38
Gambar 3.24 LKT masuk user
h. Site beranda user

Terdapat status berupa tanggal, jam, nama user
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah diinputkan admin beserta gambar dan
keterangannya.
39
Gambar 3.25 LKT site beranda user
i. Site daftar berita tiap kategori

Terdapat status berupa tanggal, jam, nama user
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah diinputkan admin beserta gambar dan
keterangannya.
40

Di dalam daftar berita terdapat berita baru
maupun berita lama setiap kategori memiliki hal
yang serupa.
Gambar 3.26 LKT daftar berita berdasar tiap kategori
j. Site lihat detail berita yang dipilih

Terdapat status berupa tanggal, jam, nama user
dan logout dibagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
41
telah diinputkan admin beserta gambar dan
keterangannya.

Dalam melihat daftar berita maka akan terdapat
form komentar untuk memberikan komentar kita
dengan memasukan nama dan email dari member
user secara otomatis kemudian memberikan
komentar secara manual.
Gambar 3.27 LKT lihat berita dan memberikan komentar
k. Melihat atau merubah data user

Terdapat status berupa tanggal, jam, nama user
dan logout di bagian header website informasi
berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.
42

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah diinputkan admin beserta gambar dan
keterangannya.

Bagian bawah merupakan isi dari profil user
yang telah mendaftar dan dapat diubah apabila
ada data yang salah.
Gambar 3.28 LKT profil user
l. Site index dan user non member

Terdapat status berupa tanggal, jam, masuk user
dan registrasi member di bagian header website
informasi berita.
43

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
dalam daftarnya .

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah di inputkan admin beserta gambar dan
keterangannya.
Gambar 3.29 LKT index dan user non member
m. Site daftar berita tiap kategori

Terdapat status berupa tanggal, jam, masuk user
dan registrasi member di bagian header website
informasi berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.
44

Di dalam daftar berita terdapat berita baru
maupun berita lama setiap kategori memiliki hal
yang serupa.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah diinputkan admin beserta gambar dan
keterangannya.
Gambar 3.30 LKT daftar berita berdasar tiap kategori
n. Site lihat berita yang dipilih

Terdapat status berupa tanggal, jam, masuk user
dan registrasi member di bagian header website
informasi berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Kemudian di bagian selanjutnya terdapat kategori
berita yang dapat dipilih untuk diketahui isi
45
dalam daftarnya dan merupakan berita yang
dipilih.

Di bagian kanan kolom website terdapat kategori.
Itu merupakan bagian isi dari berita – berita yang
telah diinputkan admin beserta gambar dan
keterangannya.
Gambar 3.31 LKT lihat berita yang dipilih secara detail
o. Form pendaftaran user ber-member

Terdapat status berupa tanggal, jam, masuk user
dan registrasi member di bagian header website
informasi berita.

Setelah header terdapat icon judul website
informasi berita “Indonesia Hari Ini”.

Di bagian kanan kolom website terdapat kategori
itu merupakan bagian isi dari berita – berita yang
46
telah diinputkan admin beserta gambar dan
keterangannya.

Form pendaftaran member baru terdiri dari
memasukkan nama member kata sandi, dan email
tombol buat member akan langsung memproses
data.
Gambar 3.32 LKT registrasi member baru