Bab III. PERANCANGAN SISTEM -...

11

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

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 dan user non member serta dapat

mempermudah mengaksesnya 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 Hak Akses Website

Admin - Melihat daftar berita, melihat berita

yang dipilih

- Melihat data menambah mengedit

dan menghapus data berita.

- Melihat daftar user yang terdaftar

User - Melihat daftar berita, melihat berita

yang dipilih

15

- Memberikan input komentar

terhadap berita yang dipilih

User Non

Member

- 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

http://blog.seventhsoft.net/2012/09/pengertian-php-php-hypertext.html

http://blog.seventhsoft.net/2012/09/pengertian-php-php-hypertext.html

16

Preprocessor dengan database yang berasal pada database

MySQL .

Admin User

Berita KomentarTerhubung / Relationship

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


- 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


- 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


- 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

Masuk admin /

BerandaPengisian form

Tampilan data

input

End

Melakukan proses masuk

Melakukan proses input data

Proses penyimpanan

Proses menampilkan

databaseProses melihat tampilan data

Proses Keluar

Meliahat daftar

Berita

Gambar 3.7 Data Flow Diagram admin memasukan berita baru.

20

Start

Masuk Admin /

BerandaDaftar berita

Data Berubah

End

Melakukan proses

masuk

database

Melakukan proses

pemilihan berita

Melakukan proses

menampikan data

Melakukan proses

pengubahan data

Melakukan proses

menampikan data yang

diubah

Melihat data yang

telah di ubah

Melakukan proses

keluar

Melihat Berita

Gambar 3.8 Data Flow Diagram admin melakukan perubahan data berita

21

Start

Masuk Admin /

BerandaDaftar berita

Data Berubah

End

Melakukan proses

masuk

database

Melakukan proses

pemilihan berita

Melakukan proses

menampikan data

Melakukan proses

penghapusan data

Melakukan proses

menampikan data yang

dihapus

Melihat data yang

telah di ubah

Melakukan proses

keluar

Melihat Berita

Gambar 3.9 Data Flow Diagram admin melakukan penghapusan berita

22

Start

Masuk admin /

Beranda

Memilih daftar

user

Tampilan data

user

End

Melakukan proses masuk

Melakukan proses melihat

daftar user

Proses intergasi data

Proses menampilkan

databaseProses melihat tampilan data

Proses Keluar

Meliahat daftar

Berita

Gambar 3.10 Data Flow Diagram admin melakukan penghapusan berita

23

Start

Beranda /

Daftar Berita

Melihat Berita

End

Masuk website

Menamplkan dari

database

database

Memilih berita

Keluar Website

Menamplkan dari

database

Melihat berita

Gambar 3.11 Data Flow Diagram proses melihat berita yang dipilih

24

Start

Beranda /

daftar Berita

Form

regristrasi

Regristrasi

berhasil

End

Masuk Website

Melakukan regristrasi

Masuk database

database

Data ditampilkan

Keluar Website

Kembali Berita

Gambar 3.12 Data Flow Diagram proses pendaftaran/registrasi user baru

25

Start

Masuk

beranda /

daftar berita

Form masuk

user

Tampil user

End

Masuk WebsiteProses masuk user

database

Masuk Website

validasi

database

tervalidasi

Tidak tervalidasi

Keluar Website

Melihat Berita

Koment

Berita

Memilih Berita

Memberikan

koment

Memilih Berita

Memilih Berita

database

Gambar 3.13 Data Flow Diagram pemberian komentar suatu berita

26

3.5. Flowchart Proses Website Informasi berita

Start

Beranda

Nasional

Internasional

Ekonomi

Olahraga

Bola

Hiburan & Gaya hidup

Teknologi

Otomotif

Ya

Admin User Regristrasi

Lihat daftar Berita Lihat Berita

A B C

Masuk Website

Memilih Sebagai Admin, user

atau regristrasi user Baru

Melihat Daftar

Berita

Cek rule yang

dipilih

Tidak

D

Gambar 3.14 Flowchart proses pemilihan berita dan pemilihan proses trading penguna

27

A

Masukan

nama akun

& kata

sandi

Validsi masuk

admin

Cek nama akun &

kata sandi

kombinasi

Salah

Beranda

Nasional

Internasional

Ekonomi

Olahraga

Bola


Teknologi

Otomotif

Benar

A

Daftar beritaAMasukan Berita

baruUbah Berita Hapus

Lihat Daftar User database

Hasil

Keluar

Keluar

DB

B

Gambar 3.15 Flowchart manipulasi data yang dilakukan admin

28

B

Masukan

nama akun

& kata

sandi

Validsi masuk

user

Cek nama akun &

kata sandi

kombinasi

Salah

Beranda

Nasional

Internasional

Ekonomi

Olahraga

Bola


Teknologi

Otomotif

Benar

C

C Daftar berita Lihat Berita

Komentar Berita

database

Keluar

Keluar

D

Hasil

D

D

Gambar 3.16 Flowchart proses melihat berita dan memberi komentar

29

C

Masukan Data

baru user

Nama akun,

pass akun,

email

Memvalidasi

database

Hasil

Keluar

D

D

End

Hasil dari

Admin, user

dan

regristrasi

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 pada form login admin

memungkin admin masuk ke 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


dan logout di bagian header website informasi

berita.



34



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)


dan logout dibagian Header website informasi

berita.

35



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)



berita.



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)



berita.



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

melakukan pendaftaran.

Gambar 3.23 LKT form input dan ubah berita

g. Masuk / login user

Tombol masuk pada form login user

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


berita.





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



berita.





dalam daftarnya.




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


dan logout dibagian header website informasi

berita.





dalam daftarnya.



41


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



berita.



42



dalam daftarnya.




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





dalam daftarnya .



telah di inputkan admin beserta gambar dan

keterangannya.

Gambar 3.29 LKT index dan user non member

m. Site daftar berita tiap kategori



informasi berita.



44

Di dalam daftar berita terdapat berita baru

maupun berita lama setiap kategori memiliki hal

yang serupa.




keterangannya.

Gambar 3.30 LKT daftar berita berdasar tiap kategori

n. Site lihat berita yang dipilih



informasi berita.





45

dalam daftarnya dan merupakan berita yang

dipilih.




keterangannya.

Gambar 3.31 LKT lihat berita yang dipilih secara detail

o. Form pendaftaran user ber-member



informasi berita.



Di bagian kanan kolom website terdapat kategori

itu merupakan bagian isi dari berita – berita yang

46


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

Bab III. PERANCANGAN SISTEM -...

Documents

Transcript of Bab III. PERANCANGAN SISTEM -...