BAB III PEMBAHASAN
III.2 Perancangan Sistem
Tahap perancangan merupakan lkelanjutan dari proses analisis dimana dilakukan perubahan-perubahan terhadap system yang sedang berjalan. Hal ini dilakukan untuk mengatasi kekurangan yang ada, memudahkan pekerjaan yang dilakukan oleh orang yang terlibat dan menghemat waktu pekerjaan.
Dalam perancangan system aplikasi inimeliputi parancangan basis data, pencangan aristektur perangkat lunak, perancangan struktur menu, perancangan antarmuka, perancangan pesan, jaringan semantic, perancangan prosedural. Semua perancangan yang telah di sebutkan diatas harus saling berhubungan agar menciptakan suatu system yang baik.
III.2.1 Perancangan Basis Data III.2.1.1 Skema Relasi
Skema relasi merupakan gabungan antar file yang mempunyai kunci utama yang sama. Sehinga file-file tersebut menjadi satu kesatuan yang dihubungkan oleh field kunci (primary key). Pada proses ini elemen-elemen data dikelompokan menjadi satu file database baserta entitas dan hubungannya. Berikut adalah skema relasi :
1. user :
(username, password) 2. clippers :
30
3. link :
(linked, url, date, media, category, title, description, content) 4. scheduler :
(name, time, scheduler) 5. images :
(id, articleLink, imagesUrl, imagesPath)
user PK username password FK1 clippername clippers PK clippername source category FK1 linkId FK2 name images PK id articleLink imagesUrl imagesPath link PK linkId url date media category title description content FK1 id scheduler PK name time scheduler
Gambar 3.4 Diagram Relasi III.2.2 Perancangan Arsitektur Perangkat Lunak
Perancangan arsitektur perangkat lunak disajikan untuk mengetahui bagaimana arsitektur dan hubungan antara pemakai dan aplikasi. Arsitektur perangkat lunak (software) adalah bagian paling penting yang harus dibuat pada saat proses perancangan (desain) karena arsitektur perangkat lunak bukan hanya menentukan apa yang dapat dilakukan dan yang tidak dapat dilakukan oleh perangkat lunak tersebut, tetapi mendeskripsikan logical
solution secara menyeluruh dari software yang hendak di bangun tanpa harus benar-benar membangunnya.
III.2.3 Perancangan Struktur Menu
Dalam pembangunan aplikasi diperlukan sebuah struktur menu untuk menunjukan keterkaitan dan tingkatan antara menu utama dan sub menu, sehingga dapat lebih mudah di mengerti. Berikut adalah struktur menu dari aplikasi yang akan di bangun :
1. Struktur Menu Pengguna
Menu Login
Menu Utama
Setting Tools Tuning
Menu News RSS Menu Monitoring RSS Logout
32
III.2.4 Perancangan Antarmuka III.2.4.1 Perancangan Tampilan
Perancangan tampilan aplikasi bertujuan untuk memberikan gambaran-gambaran tentang aplikasi yang akan di bangun. Sehingga akan mempermudah dalam mengimplementasikan aplikasi dan juga akan mempermudah pembuatan aplikasi yang use friendly. Perancangan ini akan diimplementasikan menjadi sebuah program utuh. Rancangan Setting Crawler for Media Management yang akan dibuat sebagai berikut :
1. Perancangan Antarmuka Login (F001)
New user can sign up here : Menu Login
Setting Crawller For Media Management username password SIGN IN
1. warna latar : biru tua warna tombol : hitam 2. warna latar : putih warna tombol : putih warna textbox : biru warna textbox : putih
warna font : putih warna font : abu
font size / font : 8,12 / Arial font size / font : 8,12,14 / Arial Nama
Email Username Password
SIGN UP Forget Password
New user can sign up here :
Klik Sign In untuk menuju F002 Klik Sign Up untuk mendaftar menjadi pengguna Klik Forget Password apabila pengguna lupa password 1 2
2. Perancangan Antarmuka Halaman Utama (F002)
1. warna latar : putih 2. warna latar : putih warna tombol : putih warna font : putih warna tombol “H”/ warna font : hitam / putih
warna font : putih warna font : abu
font size / font : 8,12 / Arial font size / font : 8,12,14 / Arial
Setting Crawler for Media Management
Info Hasil Clipper Info Hasil Clipper Info Hasil Clipper
Info Hasil Clipper Info Hasil Clipper
Info Hasil Clipper
H SETTING TOOLS TUNNING Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunnning maka akan dropdown muncul menu Logout
Menu Halaman Utama
1 2
34
3. Perancangan Antarmuka Setting Crawler (F003)
H SETTING TOOLS TUNNING
Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunik maka akan dropdown muncul menu Logout
Klik trim content maka akan akan muncul content tambahan Klik hourly, daily, weekly untuk manjadwalkan perjam, perhari, dan perminnguan dalam mengcrawler berita tersebut Klik generate untuk memproses berita rss yang akan di crawler dan akan muncul F009 Klik cancel untuk mengosongkan isian Klik create new untuk membuat isian baru News Rss
Source
Category
URL
Enable url fix
Content pattern
trim content
Allow tag <p> Allow tag <br /> Replace tags
Remove white space Delete space between words are more than one
Image path
Add prefix in front of the image Set pubdate manually
(GMT +07:00) Bangkok, Hanoi, Jakarta
hourly daily weekly
generate cancel create new Setting Crawler rss
Menu Setting Crawler
1
2 3
1. warna latar : putih warna tombol : biru warna textbox : putih
warna font : hitam font size / font : 8,12 / Arial
2. warna latar : biru tua font size / font : 14,16 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial
4. Perancangan Antarmuka Monitoring (F004)
H SETTING TOOLS TUNNING
Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunning maka akan dropdown muncul menu Logout
Klik tombol T untuk melihat tanggal Klik tombol dropdown Category akan muncul pilihan category Klik tombol dropdown Item per page akan muncul 5, 10, 15 untuk memunculkan pagenya Klik ok maka akan muncul F005 Monitoring Clipper Monitoring clipper Menu Monitoring Period : Category Item per page
: : 5 until T T OK 1 2 3
1. warna latar : putih warna tombol : biru warna textbox : putih
warna font : hitam font size / font : 8,12 / Arial
2. warna latar : biru tua font size / font : 14,16 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial
36
5. Perancangan Antarmuka Monitoring List Media Online (F005)
H SETTING TOOLS TUNNING Klik Tools maka aka dropdown muncul menu
Setting
Crawler(F003),Monitoring( F004)
Klik Tunning maka akan dropdown muncul menu Logout
Klik tombol T untuk melihat tanggal Klik tombol dropdown Category akan muncul pilihan category Klik tombol dropdown Item per page akan muncul 5, 10, 15 untuk memunculkan pagenya Klik ok maka akan muncul F005
Klik <nama media online>, <jumlah berita yang di ambil>, list àMaka akan muncul menu F006 Monitoring Clipper Monitoring clipper Menu Monitoring Period : Category Item per page
: : 5
until
T T
OK
Media News Content
Total <jumlah total berita yang di ambil>
<nama media online> <jumlah berita yang di ambil> List à
1. warna latar : putih warna tombol : biru warna textbox : putih
warna font : hitam dan abu font size / font : 8,12 / Arial
2. warna latar : biru tua font size / font : 14,16 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial 1
2 3
6. Perancangan Antarmuka Monitoring List Berita Crawler (F006)
H SETTING TOOLS TUNNING
Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunning maka akan dropdown muncul menu Logout
Klik ok untuk menambah item pagenya apabila item per pagenya di ganti Klik sort by title untuk mengurutkan berdasarkan judul berita dari a..z atau z..a
Klik tombol sort by date untuk mengurutkan berdasarkan tanggal yang telah di ambil dari tanggal yang baru diambil atau dari tanggal yang sudah lama di ambil Klik tombol VD maka akan muncul menu F008 Klik tombol 1 untuk memunculkan judul berita yang berada di page 1 Klik tombol 2 untuk memunculkan judul berita yang berada di page 2 Klik tombol 3 untuk memunculkan judul berita yang berada di page 3 Klik tombol >> maka akan melanjutkan page selanjutnya Klik tombol last makan memunculkan page terakhir <nama media online>
Monitoring clipper
Menu Monitoring
Period :
Category
Item per page : : 5 until OK Source : Total :
<tanggal yang akan dipilih> <tanggal yang akan dipilih> <nama media online yang akan di pilih>
<nama kategory yang akan dipilih> <jumlah berita yang sudah di ambil>
Sort by title Sort by date
<tanggal dan waktu pengambilan berita>
<judul berita rss> VD
<tanggal dan waktu pengambilan berita>
<judul berita rss 2> VD
1 2 3 >> last 1. warna latar : putih, warna tombol ok : biru
warna tombol page : hitam dan putih warna font : hitam dan abu font size / font : 8,12 / Arial
2. warna latar : biru tua font size / font : 14,16 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial 1
2 3
Gambar 3.11 Perancangan Antarmuka Monitring List Berita Crawler
38
H SETTING TOOLS TUNNING Klik Tools maka aka dropdown muncul menu
Setting
Crawler(F003),Monitoring( F004)
Klik Tunning maka akan dropdown muncul menu Logout
Klik tombol back kembali ke menu F006 Klik html view ke menu F008
Monitoring clipper
Menu View Detail Yml View
: Pubdate Content : : Link : Desc : HTML View Yml View Title Source Category Image : : : Back
1. warna latar : putih warna font : hitam dan biru font size / font : 8,12 / Arial
1
2 3
2. warna latar : putih
warna tombol : putih dan hitam warna font : hitam dan biru font size / font : 8,12 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial
8. Perancangan Antarmuka Html View (F008)
H SETTING TOOLS TUNNING
Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunning maka akan dropdown muncul menu Logout
Klik tombol back kembali ke menu F006 Klik yml view ke menu F007
Monitoring clipper
Menu View Detail HTML View
Yml View HTML View Back
Menampilkan content berita yang asli dari media online 1 2
1. warna latar : putih
warna tombol : putih dan hitam warna font : hitam dan biru font size / font : 8,12 / Arial
2. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial
40
9. Perancangan Antarmuka Generate Setting Crawler (F009)
H SETTING TOOLS TUNNING
Klik Tools maka aka dropdown muncul menu Setting
Crawler(F003),Monitoring( F004)
Klik Tunik maka akan dropdown muncul menu Logout
Klik trim content maka akan akan muncul content tambahan Klik hourly, daily, weekly untuk manjadwalkan perjam, perhari, dan perminnguan dalam mengcrawler berita tersebut Klik generate untuk memproses berita rss yang akan di crawler dan akan muncul F009 Klik cancel untuk mengosongkan isian Klik create new untuk membuat isian baru Klik run scraper unruk me run scraper berita dari media online Klik view source akan muncul F010 Klik view sample result akan muncul F011 Klik save untuk mensave berita yang sedang di crawler dan muncul pesan M01
News Rss
Source
Category
URL
Enable url fix
Content pattern
trim content
Allow tag <p> Allow tag <br /> Replace tags
Remove white space Delete space between words are more than one
Image path
Add prefix in front of the image Set pubdate manually
(GMT +07:00) Bangkok, Hanoi, Jakarta
hourly daily weekly
generate cancel create new Setting Crawler rss
Menu Setting Crawler
Run scraper View source View sample result Save
1. warna latar : putih warna tombol : biru warna textbox : putih
warna font : hitam font size / font : 8,12 / Arial
2. warna latar : biru tua font size / font : 14,16 / Arial
3. warna latar : putih warna tombol : putih warna font : abu
font size / font : 8,12,14 / Arial 1
2 3
10. Perancangan Antarmuka View Source (F010)
Ukuran 800 x 600, Font Arial 8/10/12/14 warna hitam dan abu, Warna Latar : putih, warna tombol : biru
Klik tombol edit untuk mengedit script yang sudah tersedia atau tersimpan Klik tombol save untuk menyimpan script yang sudah di edit Klik tombol cancel untuk membatalkan pengeditan script
Klik tombol reload source untuk mengulang source Klik hide source akan kembali ke F009 Menu popup View Source
Tampilan script program yang akan di edit Edit Save Cancel
Reload sorce Hide source
42
11. Perancangan Antarmuka View Sample Source (F011)
Ukuran 800 x 600 , Font Arial 8/10/12/14 warna hitam dan abu, Warna Latar : putih, warna tombol : biru,Nama Form : F011
Klik tombol 1 melihat tampilan yml Klik tombol 2 melihat sample berita dari media online
Klik tombol reload sample source untuk mengulang source
Klik hide sample source akan kembali ke F009 Menu popup View Sample Source
Tampilan sample yml berita yang di pilih
Reload sample source Hide sample source
<nama media online dan kategorinya>
Sample Result
1 2
Gambar 3.16 Perancangan Antarmuka View Sample Source III.2.5 Perancangan Pesan
Dibawah ini adalah perancangan pesan perancangan pesan yang ada pada Setting Crawler for Media Management. berikut adalah perancangan pesan yang ada di Setting Crawler for Media Management :
Table 4 Perancangan Pesan
No Pesan Isi Pesan Tedapat di halaman
P001 data not found. please change the periode and/or category
P002 1. Please fill source 2. Please select
category
3. It is not a valid url 4. It is not a valid
content pattern
F003
M01
Are you sure want to save the file now?
OK Cancel
Gambar 3.17 Perancangan Pesan
III.2.6 Jaringan Semantik
Jaringan semantik merupakan alat efektif untuk merepresentasikan pemetaan data, yang bertujuan mencegah terjadinya duplikasi data.
Untuk penjelasan dari jaringan semantic yang ada dibawah iniakan di uraikan sebagai berikut :
1. Jaringan Semantik Pengguna F001 : Form Login
F002 : Form Halaman Utama F003 : Form Setting Crawler F004 : Form Monitoring
F005 : Form Monitoring List Media Online F006 : Form Monitoring List Berita Crawler
44
F007 : Form Yml View F008 : Form Html View
F009 : Form Generate Setting Crawler F010 : Form View Source
F011 : Form View Sample Source
F002 F001 F003 F004 F005 F006 F007 F008 F009 F010 F011
Gambar 3.18 Jaringan Semantik Pengguna
III.2.7 Perancangan Prosedural
Perancangan program akan menjelaskan tentang bagaimana program aplikasi berjalan. Perancangan procedural digambarkan dalam bentuk flow chart.
1. Prosedur Login Mulai Masukan username dan password Data login benar? Selesai Tampilkan F002 Benar Pemeriksaan data login oleh user
Gambar 3.19 Flow Chart Login