BAB IV
Metodologi Penelitian
AY
4.1
A
DESKRIPSI PEKERJAAN
Untuk pengumpulan data yang diperlukan dalam melaksanakan kerja praktek
berikut : 1.
Wawancara/Interview
AB
di Radar Surabaya, ada beberapa cara yang telah dilakukan diantaranya sebagai
R
Kegiatan ini dilakukan untuk memperoleh keterangan yang lebih jelas tentang
SU
fitur-fitur yang dapat digunakan dan informasi-informasi yang sudah ada di dalam website Radar Surabaya , dan apa saja yang bisa dikembangkan atau ditambahkan untuk website Radar Surabaya. 2.
Cara ini dilakukan untuk mengetahui lebih banyak mengenai website Radar
M
Surabaya. Kemudian setelah bahan yang dibutuhkan terkumpul dengan baik
IK
O
maka pengerjaan web menggunakan PHP dapat dilakukan.
ST
4.2
Detail Proses Pengerjaan Interaktif Ruang lingkup dari penyusunan sebuah interaktif dikelompokkan dalam dua
jenis tahap yaitu :
17
1. Tahap Persiapan Tahap persiapan lapangan terdiri dari observasi dan pengumpulan data yang disediakan pihak sekolah berupa ekstensi .jpg dan dokumen berbentuk
A
.docx atau Microsoft Word dan PDF 2. Tahap desain visual, meliputi layout yang ditampilkan tertera dalam sitemap
AY
dibawah ini: Editor & reporters
Berlangganan koran Radar Surabaya
Tarif Iklan untuk Edisi Cetak RADAR SURABAYA
SU
Advertise Whit US
AB
Subscribe
Menampilkan beberapa koran edisi Special
R
Special edition
Editors & Reporters Radar Surabaya
ALAMAT REDAKSI Radar Surabaya
Edisi Khusus
Menampilkan beberapa koran edisi Khusus (mudik bersama Yamaha)
Beranda
ST
IK
O
M
Contact Us
Koran Radar Gersik
Menampilkan Berita Radar Gersik
Koran Radr Sidoarjo
Menampilkan Berita Radar Sidoarjo
Koran Radar Surabaya
Menampilkan Berita Radar Surabya
Pendaftaran
Gambar 4.1 Sitemap Website Radar Surabaya 18
Menganalisis Sistem
4.3
Bab ini menjelaskan tentang gambaran umum website Radar Surabaya mulai
A
dari menampilkan koran hari ini dan halaman log in beserta halaman registrasi,
AY
dimana penjelasannya merupakan jalannya atau simulasi program yang digunakan
dalam pembangunan website dan menyajikan kesimpulan analisis dengan hasil berupa diagram analisis yaitu:
AB
Flowchart
Homepage ini terdiri dari 9 (sembilan) halaman, yaitu :
R
1. Home
Halaman ini merupakan halaman pertama dalam homepage pribadi Radar
SU
Surabaya, halaman ini menampilkan koran harian dari beberapa kota seperti koran Surabaya, koran Sidoarjo dan koran Gersik. Sehingga pengunjung bisa memperoleh informasi berita dari beberapa kota secara detail.
M
2. Edisi khusus
O
Halaman ini menampilkan beberapa koran edisi khusus yang di up to date / terbaru.
IK
3. Contact us
ST
Halaman ini memberikan informasi alamat redaksi dari beberapa koran di setiap kota.
4. Advertise with us Halaman ini merupakan halaman dimana akan menampilkan tarif iklan untuk edisi cetak Radar Surabaya 19
5. Subscribe Halaman ini menampilkan ketentuan berlangganan koran harian Radar
A
Surabaya dimana setelah berlangganan akan mendapatkan kupon yang di undi
6. Special edition
AY
setiap tahunnya.
Halaman ini menampilkan beberapa koran yang termasuk dalam katagori
7. Editor dan reporter
AB
Special edition dalam beberapa tahun terakhir.
8. Halaman log in
R
Halaman ini menampilkan nama-nama dan jabatan dari pihak Radar Surabaya
SU
Halaman Login merupakan halaman untuk pengunjung yang sudah melakukan registrasi sebelumnya. Dengan melakukan login maka pengunjung dapat melihat isi berita dan mendownload file berita berupa file PDF.
M
9. Halaman register
Halaman ini memungkinkan pengunjung untuk dapat bergabung dengan
O
melakukan registrasi sehingga pengunjung dapat mengakses lebih dalam file-
ST
IK
file pdf atau materi berita.
20
4.4
Spesifikasi Rancangan Website Mencakup Dokumen masukan dan keluaran yang ada dalam Website
Spesifikasi Bentuk Masukan
1.Halaman Registrasi Fungsi :mendaftarkan pengunjung website
AY
4.4.1
A
ini
pengunjung
AB
Tujuan : Ditujukan kepada pemilik website agar dapat membatasi dan hanya pengunjung yang terdaftar
yang berhak
2.Halaman Log in
R
mengakses file-file pdf atau berita .
SU
Fungsi : Validasi bagi pengunjung website. Tujuan : Ditujukan untuk melakukan validasi user. 3.Halaman Berita hari ini
M
Fungsi : menampilkan berita hari ini dari Radar Surabaya,Radar Gresik dan Radar Sidoarjo.
ST
IK
O
Tujuan : Ditujukan untuk menampilkan berita bagi user atau pelanggan.
21
4.5
Flowchart Proses Program Berbentuk diagram yang bentuknya dapat mengalirkan sesuatu,
A
flowchart melukiskan suatu aliran kegiatan dari awal hingga akhir mengenai website initerdapat beberapa proses yang digambarkan dalam bentuk
4.5.1
AY
flowchart. Flowchat Proses Log in User
AB
Proses flowchart pada login merupakan data yang harus di isi sesuai dengan user name dan password yang sudah melakukan registrasi sebelumnya, proses ini memungkinkan pengunjung atau user yang registrasi ,
R
mendapdengan leluasa mengakses informasi tebaru dan mendownload koran
SU
berupa file PDF.
M
mulai
ST
IK
O
Log in
User name dan pass salah
ya
Masukan user name password
tidak tidak
ya
User dan pass benar
selesai
Gambar 4.5.1 Flowchart Proses Log in User 22
4.5.2
Flowchart Proses register Halaman ini memungkinkan pengunjung untuk dapat bergabung
A
dengan melakukan registrasi maka pengunjung memperoleh data-data yang up
AY
to date.
ya
R
Registrasi?
AB
mulai
SU
Masukan user name
Masukan password
ST
IK
O
M
tidak
Apakah semua Sudah di isi
selesai
ya
Gambar 4.5.2 Flowchart Registrasi
23
tidak
4.5.3
Halaman log in Admin Halaman ini memungkinkan Admin dalam melihat data pengunjung
A
atau user untuk mengatur atau segala aktifitas user yang sudah mendaftar ke
Admin
AY
website Radar Surabaya Sistem
AB
mulai
Menampilkan Page Web Home
Alamat web
R
Page home
SU
Melakukan Login
.mengecek data User
Username dan pass
Memasukkan username dan pass
ST
IK
O
M
tidak
Cocok?
Pengguna ya
Kembali memasukkan ussername dan password
Menampilkan Home
Home Berita
selesai
Gambar 4.5.3 Flowchart Log in Admin
24
4.5.4
Halaman Berita Hari Ini Halaman ini memungkinkan pengunjung untuk dapat melihat koran
A
hari ini yang di terbitkan dan pengunjung atau user memperoleh berita yang up to date.
User mulai
AY
Sistem flow Proses menampilkan Berita
Sistem
Admin
AB
Tidak
Cek data user?
Cek data user
tidak
Masukan user name
R
ya
Ya
Approve User register
SU
Registrasi?
Log in
tidak
Masukan password
YA
DB user
User name dan pass salah
M
ya
O
Apakah semua Sudah di isi
ST
IK
selesai
tidak
Masukan user name password
Ya Berita Hari ini
tidak
User dan pass benar
Koran Surabaya
Gambar 4.5.4 Flowchart Berita Hari Ini 25
Koran Sidoarjo
Koran Gersik
4.6
Context Diagram Context Diagram adalah gambaran menyeluruh dari DFD. Aliran data yang
A
ada pada Context Diagram didapatkan dari desain system flow. Di dalam Context
AY
Diagram terdapat 2 (Dua) External Entity, yang terdiri dari Admin dan User.
username_dan_password alamat_web peng unjung
data_reg istrasi
ussername_password_admin
R
halaman_web
bagian_admin
AB
menu_berita_hari_ini
0
SU
berita_hari_ini_terpilih halaman_login
aplikasi_profil_perus ahaan
page_home
+
Gambar 4.6. DFD Level Context
ST
IK
O
M
halaman_berita_hari_ini
26
home_berita
4.7
Diagram Jenjang Proses Diagram jenjang proses berguna sebagai alat desain dan teknik dokumentasi
A
dalam siklus pengembangan sistem yang berbasis pada fungsi. Tujuan dari pembuatan diagram jenjang adalah untuk memberikan informasi mengenai fungsi-
AY
fungsi yang ada di dalam sistem tersebut. Pada gambar diagram jenjang proses,
terdapat desain semua proses yang diturunkan dari context diagram. Gambar di
tampak pada Gambar 4.7.
R
0
AB
bawah ini adalah diagram jenjang proses dari Aplikasi Profil perusahaan level 0 yang
1
M
SU
Aplikasi Profil Perusahaan
3
Login Admin
Login Member
Gambar 4.7. Diagram Jenjang Level 0
ST
IK
O
Registrasi Member
2
27
4
Lihat Berita
Berikut diagram jenjang level 1 melakukan Registrasi member seperti
A
terlihat pada Gambar 4.7.1
AB
Registrasi Member
AY
1
1.1
Masukan Password
SU
R
Masukan User Name
1.2
Gambar 4.7.1 Diagram Jenjang Level 1 melakukan Registrasi
M
Berikut diagram jenjang level 1 melakukan Login member seperti terlihat
2
Login Member
ST
IK
O
pada Gambar 4.7.2
2.1
Masukan User Name Dan Password
2.2
Menampilkan Halaman Home
Gambar 4.7.2 Diagram Jenjang Level 1 melakukan Login Member 28
Berikut diagram jenjang level 1 melakukan Login admin seperti terlihat pada Gambar 4.7.3
A
3
AY
Login Admin
AB
3.1
3.2
Masukan User Name Dan Password
R
Melakukan Login
SU
Gambar 4.7.3 Diagram Jenjang Level 1 melakukan Login Admin
Berikut diagram jenjang level 1 menampilkan berita hari ini seperti terlihat pada Gambar 4.7.4
Berita Hari ini
IK
O
M
4
4.2
Memilih Berita Hari ini
Melihat Berita Koran Hari ini
ST
4.1
Gambar 4.7.4 Diagram Jenjang Level 1 Menampilkan Berita Hari ini
29
Berikut diagram gambar DFD level 0 ini merupakan hasil decompose dari
ST
IK
O
M
SU
R
AB
AY
A
Context Diagram aplikasi profil perusahaan seperti terlihat pada Gambar 4.7.5
30
AY A
1 data_reg istrasi
data_reg istrasi_dis impan
registrasi
1
Flow_35
us ername_pass word_dibaca us ernam_password_benar
peng unjung
Flow_37 halaman_web halaman_login
AB
us ername_dan_pas sword
us erlog in
2
SU
R
login
menu_berita_hari_ini
alamat_web us sername_pas sword_admin
page_home
bagian_admin
home_berita
M
halaman_berita_hari_ini
IK ST
berita_hari_ini_dibaca
berita_hari_ini berita_hari_ini_ditampilkan 2
O
berita_hari_ini_terpilih
3
Gambar 4.7.5 decompose DFD level 0
31
berita_hari_ini
4.8
ERD Perancangan basis data atau yang lebih dikenal dengan ERD merupakan
A
representasi model basis data yang berasal dari gambaran desain DFD. Dalam
AY
pembuatan ERD, hal pertama yang dibuat terlebih dahulu adalah membuat model
konseptual atau CDM yang diambil dari data store yang ada dalam DFD. Setelah selesai membuat CDM, maka dilanjutkan membuat model fisik dari tabel-tabel yang
berikut:
R
a. Conceptual Data Model (CDM)
AB
akan digunakan. Adapun kedua jenis basis data tersebut akan dijelaskan sebagai
CDM dari sistem informasi akademik terdapat 2 (dua) tabel. Model
SU
Konseptual atau yang lebih dikenal dengan CDM dari Aplikasi Profil
M
perusahaan dapat dilihat pada Gambar 4.8.1
userlogin
O
ID username password status
IK
berita id_koran tanggal hari berita
ST
Relation_24
Gambar 4.8.1 CDM
32
b. Physical Data Model (PDM) PDM dari sistem informasi akademik terdapat 21 (dua puluh satu) tabel. PDM ini
AY
A
dapat dilihat pada Gambar 4.8.2
BERITA
ID = ID
R
integer varchar(50) varchar(50) varchar(10)
SU
ID USERNAME PASSWORD STATUS
ID_KORAN ID TANGGAL HARI BERITA
integer integer date varchar(10) varchar(100)
AB
USERLOGIN
ST
IK
O
M
Gambar 4.8.2 PDM
33
4.9
Perancangan Sistem
4.9.1
Rancangan Interface (Antar Muka)
A
1. form log in
User name
AY
RADAR SURABAYA
Password
register
SU
R
AB
log in
Gambar 4.9.1 Rancangan form log in
Tombol LOG IN
Tombol REGISTER : Pindah ke form Register
User ID
: Tempat user mengisi username nya
Password
: Tempat user mengisi password nya
: Pindah ke halaman berita hari ini
ST
IK
O
M
Penjelasan :
34
2. Form Registrasi
RADAR SURABAYA
AY
A
User name
Password
AB
SIGN UP
R
Gambar 4.9.2 Rancangan Registrasi
SU
Penjelasan :
• Tombol SIGN UP : Pindah ke halaman berita hari ini • User ID
: Tempat user mengisi password nya
ST
IK
O
M
• Password
: Tempat user mengisi username nya
35
3. Form Berita Hari ini
Menu 3
Menu 4
Menu 5
User name
Password
ISI BERITA RADAR SIDOARJO
Menu 7 Log in
ISI BERITA RADAR GRESIK
M
SU
R
AB
ISI BERITA RADAR SURABAYA
Menu 6
A
Menu 2
AY
Menu 1
O
Gambar 4.9.3 Rancangan berita hari ini
Tampilan berita hari ini merupakan tampilan beranda yang menampilkan 3
ST
IK
halaman utama dari harian Radar Surabaya,Radar Gresik dan Radar Sidoarjo
. 36
4.10
Desain layout
AY
Gambar 4.10.1 Tampilan form log in
A
1. Tampilan Log in
Proses log in merupakan cara yang harus di isi sesuai dengan
AB
usesname yang sudah melakukan registrasi sebelumnya, proses ini memungkinkan pengunjung atau user yang berkunjung bebas, mendapatkan
M
SU
2. Tampilan Register
R
informasi tebaru dan mendownload koran berupa file PDF.
O
Gambar 4.10.2 Tampilan form Register
Proses ini memungkinkan pengunjung untuk dapat bergabung dengan
IK
melakukan registrasi maka pengunjung memperoleh data-data yang up to date
ST
dari Radar Surabaya.
37
R
AB
AY
A
3. Tampilan Home
Gambar 4.10.3 Tampilan form Home
SU
Tampilan berita hari ini merupakan tampilan beranda yang menampilkan 3 halaman utama dari harian Radar Surabaya,Radar Gresik dan Radar Sidoarjo.Sehingga pengunjung dapat memperoleh gambaran utama dari
M
3 cabang harian Radar Surabaya.
ST
IK
O
4. Tampilan Subscribe
Gambar 4.10.4 Tampilan form Subscribe
38
Tampilan ini untuk menampikan cara berlangganan koran harian Radar Surabaya dan promo-promo produk Radar Surabaya.
SU
R
AB
AY
A
5. Tampilan Contact Us
Gambar 4.10.5 Tampilan form Contact Us
Tampilan ini memberikan informasi alamat redaksi dari beberapa
M
koran di setiap kotanya.
ST
IK
O
6. Tampilan Advertise With Us
Gambar 4.10.6 Tampilan form Advertise With Us Tampilan ini merupakan halaman dimana akan menampilkan tarif iklan untuk edisi cetak Radar Surabaya. 39
AB
AY
A
7. Tampilan Editor dan Reporters
R
Gambar 4.10.7 Tampilan form Editor dan Reporters
Surabaya.
SU
Halaman ini menampilkan nama-nama dan jabatan dari pihak Radar
ST
IK
O
M
8. Tampilan Edisi Khusus
Gambar 4.10.8 Tampilan form Edisi Khusus Halaman ini menampilkan beberapa koran edisi khusus yang di up to
date / terbaru.
40
R
AB
AY
A
9. Tampilan Special Edition
SU
Gambar 4.10.9 Tampilan form Special Edition Tampilan ini menampilkan beberapa koran yang termasuk dalam
ST
IK
O
M
katagori Special edition dalam beberapa tahun terakhir.
41
