T1 672007230 BAB III

18

Dalam perancangan dan pengimplementasian e-Book

Repository berbasis Web Crawler menggunakan HTML5,

diperlukan perancangan sistem terlebih dahulu yang bertujuan untuk memberikan gambaran kepada pengguna tentang sistem yang akan dibuat serta memberikan informasi dan desain dari

e-Book repository berbasis Web Crawler menggunakan HTML5

tersebut. Pada bab ini akan dibahas seluruh tahap perancangan, mulai dari bahan dan materi yang dibutuhkann, metode penelitian yang digunakan serta beberapa penjelasan lainnya yang membuat tahap-tahap dalam mengerjakan penelitian.

3.1

Metode Perancangan Sistem

Gambar 3.1 Metode Kerja Sistem Hasil disimpan

pada Database URL Target

Proses Eksekusi Web Crawler Start

Proses Breadth First Crawling Kunjungi Setiap Level

hingga selesai pada URL target

Tampilkan hasil Crawling

User melakukan Searching

Tampilkan hasil Search

Tahapan-tahapan dari proses kerja sistem dapat dilihat pada gambar 4 dimulai dengan

1. Memilih URL target yang akan di Crawling

2. Setelah itu proses eksekusi yang dilakukan oleh Web

Crawler untuk mencari e-Book yang pada website yang

telah ditentukan untuk di crawling.

3. Proses pencarian pada website,Web Crawler bekerja menggunakan algoritama Breadth First Crawling.Breadth

First Crawlingmenelusuri setiap level yang berada pada

website hingga selesai dan ditemukannya semua data

berupa alamat URL.

4. Selanjutnya data hasil Crawlingakan ditampilkan dan disimpan di database.

5. User menginputkan kata kunci berupa keyword, dan sistem akan mencari kata kunci tersebut pada database, setelah ditemukan akan ditampilkan untuk di download

Gambar 3.2 Breadth-first crawling (Gozali & Faezal. 2004).

Breadth-first crawling adalah algoritma yang melakukan

pencarian secara melebar yang mengunjungi link secara preorder yaitu mengunjungi suatu link kemudian mengunjungi semua link

yang bertetangga dengan link tersebut terlebih dahulu. Selanjutnya, link yang belum dikunjungi dan bertetangga dengan

link yang tadi dikunjungi, demikian seterusnya

Pada halaman utama terdapat link ke tiga buah halaman pada level-1 yaitu page-1, page-2 dan page-3 yang akan di indeks

berikutnya. Setelah proses indeksing pada level-1 selesai barulah dilanjutkan pada level-2 dan selanjutnya.

Keunggulan Breadth First Crawling yaitu:

1. Breadth First Crawling melakukan pencarian secara

melebar sehingga data yang dikumpulkan lebih banyak. 2. Tidak akan menemui jalan buntu

3. Menjamin ditemukannya link (jika link memang ada) dan

Jika ada satu link maka Breadth First Crawling akan menemukannya (Kustanto, mutia, Viqarunnisa, 2005).

3.2 Analisis Kebutuhan

Analisis kebutuhan digunakan untuk mengetahui dan menterjemahkan semua permasalahan serta kebutuhan perangkat lunak dan kebutuhan sistem yang dibangun. Oleh karena itu, dalam tahap ini dilakukan proses pengumpulan data untuk membangun sistem.

Analisis kebutuhan sistem perangkat keras dan perangkat lunak meliputi:

1. Perangkat lunak yang dibutuhkan yaitu:

- Adobe Dreamweaver CS5 dan Netbeans version 6.9.1

- Sistem Operasi Window XP SP2 / Windows 7

- Browser Mozilla Firefox version 10.1.1

- WAMP5 2.2

2. Perangkat keras yang dibutuhkan yaitu:

- Prosesor Intel Pentium IV 3,6HZatau lebih tinggi

- Hardisk 10 GB

- RAM 512 MB

- Monitor

3.3 Perancangan Desain Sistem

Perancangan sistem dibutuhkan untuk membantu proses pengembang dan untuk dokumentasi perangkat lunak sistem. Dalam perancangan sistem digunakan UML (Unified Modelling

Language) yaitu sebuah bentuk modeling sistem yang telah

menjadi standar dalam industri untuk visualisasi, merancang dan mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar untuk merancang model sebuah sistem.

Untuk mendesain sistem Penerapan Web Crawler dalam Pencarian e-Book ini, digunakan 4 (empat) buah diagram yaitu,

Use Case Diagram, Activiry Diagram, Sequence Diagram, dan

Class Diagram.

Use Case Diagram

Use Case Diagram menggambarkan fungsionalitas yang

diharapkan dari sebuah sistem. Yang ditekankan adalah “apa”

yang diperbuat sistem, dan bukan “bagaimana”. Sebuah use case

merepresentasikan sebuah interaksi antara aktor dengan sistem.

Use case merupakan sebuah pekerjaan tertentu, seorang/sebuah

aktor adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan-pekerjaan tertentu, use

case diagram untuk penerapan Web Crawler dalam pencarian

delete Tag add Tag update Tag Set Tag <<extend>> <<extend>> <<extend>> show tag <<extend>>

Download e-book Search e-book

<<include>>

View e-book

Run Crawler

<<include>> Change URL target

user <<include>> <<include>> request e-book Admin <<include>> <<extend>> <<extend>>

Gambar 3.3Use Case Diagram

Di dalam use case diagram terdapat 2 aktor yang terdiri dari admin dan user. admin bertugas melakukan running crawler. Setelah running crawler hasil dari pencarian akan di ditampilkan dan secara otomatis hasil tersebut disimpan database temporary

yang selanjutnya akan diatur berdasarkan tag. Pada item tag

admin menklasifikasikan hasil yang didapat dari proses running

crawler ke tag yang ada, agar lebih mudah di dicari nantinya.

Pada item tag admin dapat melakukan update tag, add tag, delete

tag, dan show tag. Admin juga dapat melakukan change URL

target, apabila URL tersebut tidak bisa di Crawling.

User dapat melakukan search e-Book untuk mencari

e-Book sudah di simpan URL-nya di database temporary. User

berdasarkan tag dan dapat request e-Book yang diinginkan bila e-Book tersebut belum ada pada database

Activity Diagram

Activity Diagram adalah diagram yang memperlihatkan

aliran dari suatu aktifitas ke aktifitas lainnya dalam suatu bisnis yang baru. Activity Diagram digunakan untuk memodelkan aspek dinamis dari sistem. Secara umum activity diagram

menggambarkan proses-proses yang terjadi dari dimulainya aktivitas sampai berhentinya aktivitas. Untuk kebutuhan proses dari sistem yang akan dibangun penulis hanya memakai 2 (dua)

activity diagram yang terdiri dari admin dan user yang dapat di

lihat pada gambar 3.4.

Gambar 3.4 Activity Diagram Admin danSistem start

Logi n

Run Crawl er

set tag

add tag update tag

logout show tag

end

delete tag username / password i nvalid

login success

Sistem Admi n

Gambar 3.4 menggambarkan aktivitas-aktivitas yang terjadi pada sistem. Aktivitas-aktivitas tersebut adalah, login, run

crawler, set tag, add tag, update tag, show tag, delete tag, dan

logout. Pada activity diagram admin dan sistem, admin bertugas

melakukan login, apabila admin salah memasukan verifikasi

username dan password maka akan kembali ke menu login, tetapi

benar memasukan verifikasi username dan password maka langsung ke menu utama run crawler. Pada item run crawler

admin melakukan pengumpulan e-Book dari URL target. Admin

juga melakukan manage atau pengelompokan e-Book

berdasarkan tag pada item set tag. Di sini admin dapat melakukan

add tag, update tag, show tag, delete tag. Setelah itu ada item

logout untuk keluar dari forum admin.

Gambar 3.5 Activity Diagram User dan Sistem start

Input Keyword

Download e-book

end View e-book

Sistem1 User

Gambar 3.5 menggambarkan aktivitas-aktivitas yang terjadi antar user dan sistem. Aktifitas tersebut adalah input keyword,

download e-Book, dan view e-Book. Pada aktivitas input

keyword, user menginputkan kata kunci yang diingkan dan

setelah ditemukan akan ditampikan secara otomatis pada menu

Home. Setelah di temukan user melakukan aktifitas view e-Book

atau dapat langsung melakukan download e-Book.

Gambar 3.6 Activity Diagram User, sistem, dan Admin

Pada gambar 3.6 adalah activity diagram menu Request. Aktivitas-aktivitas pada menu Request antara lain request e-book,

prosesing request, dan confirm request. User mengirimkan

request e-book pada admin, untuk selanjutnya diproses.

start

Request e-book

Prosesing request

Confirm Request

end

Admin Sistem

Sequence Diagram

Sequence diagram menggambarkan interaksi antar obyek di

dalam sistem. Sequence diagram menekankan pada urutan waktu saat interaksi terjadi. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (obyek-obyek yang terkait).

Dalam pengembangan sistem ini terdiri dari 2 (dua) jenis

sequence diagram yaitu: sequence diagram admintrator dan

sequence diagram user.

Gambar 3.7 Sequence diagram user

Pada gambar 3.7 merupakan sequence diagram untuk proses kerja pada user. User pertama kali melakukan

penginputan kata kunci atau keyword pada seacrhUI. Dari

seacrhUI sistem memproses permintaan user lewat kata kunci

atau keyword yang dimasukan/diinputkan pada seacrhControl. Pada seacrhControl sistem memproses URL yang berada pada

: user SearchUI ViewControl : SearchControl _{: dbebooktemporary} 1: Input Keyword

2: search(keyword)

5: Tampil Hasil()

3: select ebook(tag)

4: Send file( Tampilkan)

dbebook/database yang telah tersimpan. Dari dbebook hasil dari URL yang telah tersimpan di tampilkan pada seacrhUI dan pada

ViewControl, user dapat melakukan view pada isi e-Book tanpa

harus mendownload isinya.

Gambar 3.8 Sequence diagram admin

Pada gambar 3.8 sequence diagram admin, admin pertama harus melakukan proses verifikasi atau login, sistem akan memproses permintaan login dari admin setelah proses login

berhasil admin akan masuk di menu Home. Pada menu Home

proses selanjutnya adalah running crawler dan admin memilih

level kedalam yang akan di crawling dan memerintahkan sistem

untuk memproses permintaan pada search control, dari searh

control sistem akan meneruskan permintaan crawling pada URL

target, setelah itu hasil akan crawling akan ditampilkan dan

: Admin Login logout : Running Crawler : SearchControl : URL target : EditTag : dbebooktemporary 1: login()

3: Crawling()

5: Tampilkan hasil 6: dbebook()

7: edit() 8: Logout

2: Crawler home()

simpan di dbebook/database. Hasil yang telah disimpan akan di

manage atau di edit di menu EditTag. Untuk keluar dari sistem,

admin dapat melakukan logout. Sehingga forum admin tertutup.

.Class Diagram

Gambar 3.9 class diagram sistem

Pada gambar 3.9 class diagram sistem terdiri dari 2 kelas utama yaitu class e-Book dan class Request. Pada class Run

Crawler UI mendapat class darixe-Book, class dari e-Book

sendiri memiliki attribut yaitu id, site, link tag, tanggal serta title,

sedangkan operations-nya adalah update, delete, insert. Class

Run Crawler UI memiliki attribut CrawlerRusult dan operations

-nya run dan insert. Home UI juga mendapat class dari e-Book.

Home UI memiliki attribut searchResult dan searchInput dan

operations-nya adalah search. Request UI mendapat class dari

Request, Request UI memiliki attribut inputRequest dan

attribut tanggal dan request serta operations-nya yaitu update,

delete, dan insert.

3.4 Peracangan Antarmuka

3.4.1 Rancangan Halaman Utama

Rancangan halaman utama sistem e-Book Repository

berbasis Web Crawler menggunakan HTML5. Pada menu utama,

user dapat menginputkan kata kunci pencarian pada item text box

dan mengklik button search atau menekan enter maka hasil pencarian akan di tampilkan pada item Hasil Crawling. Pada item

request user dapat merekomendasikan e-Book yang

diingkankannya kepada admin bila memang e-Book tersebut belum tersimpan pada database. Sedangkan pada item

administrator, admin bertugas untuk mengelola sistem serta

menjalankan Web Crawler. Gambaran rancangan antaramu ditunjukan pada gambar 3.4.1.

Gambar 3.4.1 Halaman Utama

PDF Repository | Search

Search

Hasil Search

URL View

URL View

URL View

URL View

1 2 3

Home Request Admin

Tags Tags

3.4.2 Rancangan Halaman

Login Administrator

Gambar 3.4.2 Halaman Login Administrator

3.4.3 Rancangan Halaman

Request

Gambar 3.4.3 Halaman Request

PDF Repository | Administrator Login

Username

Password

Home Request Admin

Text Box

Text Box Login

PDF Repository | Request

Home Request Admin

3.4.4 Rancangan Halaman

Administrator

Gambar 3.4.4 Rancangan Halaman Administrator

PDF Repository | Run Crawler

Site Pencarian

URL URL URL

Level Depht

Hasil Crawling | Found: 0

Page URL

PDF PDF

Level Number Level

RUN Crawler Edit Tags

∇

Logout

Run Crawler

3.4.5 Rancangan Halaman

Edit Tags

Gambar 3.4.5 Rancangan Halaman Edit Tags

PDF Repository | Edit Tags

Tanggal Link

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

RUN Crawler Edit Tags Logout

Textbox Show Requesy

3.4.6 Rancangan Halaman

Show Request

Gambar 3.4.6 Rancangan Halaman Show Request

PDF Repository | Show Request

Tanggal Request

XXXX-XX-XX YY:YY:YY Text Delete XXXX-XX-XX YY:YY:YY Text Delete XXXX-XX-XX YY:YY:YY Text Delete XXXX-XX-XX YY:YY:YY Text Delete XXXX-XX-XX YY:YY:YY Text Delete RUN Crawler Show Requesy Edit Tags Logout

delete, dan insert.

3.4 Peracangan Antarmuka

3.4.1 Rancangan Halaman Utama

Rancangan halaman utama sistem e-Book Repository

berbasis Web Crawler menggunakan HTML5. Pada menu utama,

user dapat menginputkan kata kunci pencarian pada item text box

dan mengklik button search atau menekan enter maka hasil pencarian akan di tampilkan pada item Hasil Crawling. Pada item request user dapat merekomendasikan e-Book yang diingkankannya kepada admin bila memang e-Book tersebut belum tersimpan pada database. Sedangkan pada item administrator, admin bertugas untuk mengelola sistem serta menjalankan Web Crawler. Gambaran rancangan antaramu ditunjukan pada gambar 3.4.1.

Gambar 3.4.1 Halaman Utama

PDF Repository | Search

Search

Hasil Search

URL View

URL View

URL View

URL View

1 2 3

Home Request Admin

Tags Tags Tags Tags

Gambar 3.4.2 Halaman Login Administrator

3.4.3 Rancangan Halaman

Request

Gambar 3.4.3 Halaman Request

PDF Repository | Administrator Login

Username

Password

Home Request Admin

Text Box

Text Box

Login

PDF Repository | Request

Home Request Admin

3.4.4 Rancangan Halaman

Administrator

Gambar 3.4.4 Rancangan Halaman Administrator

PDF Repository | Run Crawler

Site Pencarian

URL URL URL

Level Depht

Hasil Crawling | Found: 0

Page URL

PDF PDF

Level Number Level

RUN Crawler Edit Tags

∇

Logout

Run Crawler

Gambar 3.4.5 Rancangan Halaman Edit Tags

PDF Repository | Edit Tags

Tanggal Link

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

XXXX-XX-XX YY:YY:YY PDF Tags

[save]

RUN Crawler Edit Tags Logout

Textbox Show Requesy

3.4.6 Rancangan Halaman

Show Request

Gambar 3.4.6 Rancangan Halaman Show Request

PDF Repository | Show Request

Tanggal Request

XXXX-XX-XX YY:YY:YY Text Delete

XXXX-XX-XX YY:YY:YY Text Delete

XXXX-XX-XX YY:YY:YY Text Delete

XXXX-XX-XX YY:YY:YY Text Delete

XXXX-XX-XX YY:YY:YY Text Delete