Website Kelurahan Kleak dirancang untuk memberikan informasi kepada masyarakat secara real-time. Website ini memiliki dua pengguna yaitu user dan admin, di mana user hanya dapat mengakses informasi sedangkan admin dapat mengedit konten. Rancangan ini meliputi analisis kebutuhan, spesifikasi persyaratan, desain data, dan desain tampilan untuk memudahkan interaksi antara pengguna dan kelurahan.

1. Tugas Pemodelan Berorientasi Objek
Website Kelurahan Kleak
Disusun oleh :
Hendri Andriyan Rantung 13021106077
Adiwarman Putra Paputungan 13021106099
James Philip Montolalu 13021106048
Arlan Andhika Karundeng 13021106062
UNIVERSITAS SAM RATULANGI
FAKULTAS TEKNIK
PROGRAM STUDI TEKNIK INFOMARTIKA
MANADO
2016

2. BAB I
PENDAHULUAN
I.1 Latar Belakang
Website adalah kumpulan dari beberapa halaman web dimana informasi dalam bentuk teks,
gambar, suara, dan lain-lain dipersentasikan dalam bentuk hypertext dan dapat diakses oleh
perangkat lunak yang disebut dengan browser. Informasi pada sebuah website pada umumnya di
tulis dalam format HTML. Informasi lainya disajikan dalam bentuk grafis (dalam format GIF,
JPG, PNG, dll), suara (dalam format AU, WAV, dll), dan objek multimedia lainya (seperti MIDI,
Shockwave Quicktime Movie, 3D World, dll).
Website merupakan fasilitas internet yang menghubungkan dokumen dalam lingkup lokal
maupun jarak jauh. Dokumen pada website disebut dengan web page dan link dalam website
memungkinkan pengguna bisa berpindah dari satu page ke page lain (hyper text), baik diantara
page yang disimpan dalam server yang sama maupun server diseluruh dunia. Pages diakses dan
dibaca melalui browser seperti Netscape Navigator atau Internet Exploler berbagai aplikasi
browser lainnya.
Website Kelurahan Kleak merupakan website yang berisikan informasi-informasi
mengenai struktur, sejarah, kegiatan kelurahan, berita kelurahan, dan lain-lain yang berkaitan
dengan Kelurahan Kleak.
Website ini bertujuan untuk memperkenalkan Kelurahan Kleak kedunia luar lewat dunia
maya atau internet. Dan tujuan lainnya yaitu memberikan infomasi kepada masyarakat Kelurahan
Kleak secara Real-Time, sehingga kapanpun dan dimanapun masyarakat dapat mengetahui
informasi secara cepat.

3. BAB II
ANALISA DAN PERANCANGAN
II.1 Bussines Requierments
Kelurahan Kleak merupakan salah satu instansi pemerintah yang bertugas
menyelenggarakan urusan pemerintahan, pembangunan, dan kemasyarakatan serta urusan yang
dilimpahkan oleh wali kota Manado sesuai dengan kebutuhan kelurahan dengan memperhatikan
prinsip efisiensi dan peningkatan akuntabilitas. Tujuan dari pembuatan Website Kelurahan Kleak
ini memberikan informasi kepada masyarakat mengenai berita, informasi, serta pelayanan apa saja
yang terdapat di Kelurahan Kleak ini. Website Kelurahan Kleak memiki 2 actor yaitu user, admin.
Pengunjung nantinya hanya bisa mengakses informasi yang terdapat di dalam web seperti berita ,
visi misi kelurahan, profil kelurahan, data kelurahan, serta pelayanan yang diberikan oleh
kelurahan. Administrator akan menggunakan lingkungan berbasis web untuk melakukan
pembaharuan sistem pada web Kelurahan Kleak ini. Editor yang akan memperbaharui informasi
seputar Kelurahan Kleak.
II.2 Requirements Specification
A. User Group

4. Table 2.1 User
Group Name User
Description User merupakan pengunjung website yang berasal dari berbagai
wilayah, tempat, kalangan, dan profesi.
Profil data -
Super Group -
Sub Group -
Relevans use cases “Komentar”, “Berbagi Artikel”, “Pesan”.
Object accessed Memberikan komentar pada artikel. Membagikan artikel.
in real mode
Object accessed in -
context management
mode

5. Table 2.2 Administrator
Group Name Administrator
Description Administrator merupakan orang yang memiliki hak akses penuh
pada website dan dapat melakukan kostumisasi website sesuai
keinginannya.
Profil data First Name, Last Name, Email, User Name, Password.
Super Group -
Sub Group lala
Relevans use cases “Login”, “Melihat Data”, Membuat Artikel”, Memperbaharui
Artikel”, “Mengubah Artikel”, “Menghapus Artikel”.
Object accessed Membuat, Memperbaharui dan Menghapus Artikel. Mengubah
Tampilan. Menjawab Komentar.
in real mode
Object accessed in -
context management
mode

6. B. Functional Requirement
USE CASE

7. Table 2.3 Use Case “Login” specification sheet
Title Login
Purpose Untuk membatasi akses bagi user untuk memberikan komentar
pada artikel.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke website
2. Masukkan username dan password
3. Klik tombol Masuk
Table 2.4 Use Case “Melihat Data” specification sheet
Title Melihat Data
Purpose Tujuannya memberikan kebebasan kepada pengunjung untuk
melihat artikel pada website
Pre Condition -
Post Condition -
Workflow 1. Masuk kehalaman website
Table 2.5 Use Case “Membuat Artikel” specification sheet
Title Membuat Data
Purpose Untuk memposting artikel dan isi dari halaman pada website.

8. Pre Condition -
Post Condition Memposting artikel dengan format text, gambar, dan video dengan
ukuran tertentu.
Workflow 1. Masuk ke Dashboard
2. Masuk ke fitur Post
3. Pilih buat postingan baru
4. Klik tombol posting
Table 2.6 Use Case “Menyunting Artikel” specification sheet
Title Menyunting Artikel
Purpose Untuk menyunting artikel yan gsudah pernah diposting untuk
diperbarui.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke Dashboard
2. Masuk ke fitur Post
3. Pilih postingan yang sudah ada
4. Klik Suntung
5. Klik tombol sunting

9. Table 2.7 Use Case “Hapus Artikel” specification sheet
Title Hapus Artikel
Purpose Untuk menghaapus postingan yang sudah tidak ingin ditampilkan
lagi.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke Dashboard
2. Masuk ke fitur Post
3. Pilih postingan yang sudah ada
4. Klik tombol hapus.
Table 2.8 Use Case “Komentar” specification sheet
Title Komentar
Purpose Memberikan kesempatan kepada user untuk memberikan komentar
kepada artikel yang telah diposting.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke wordpress
2. Pilih artikel
3. Ketik komentar
4. Klik tombol post

10. Table 2.9 Use Case “Berbagi” specification sheet
Title Berbagi
Purpose Memberikan kesempatan kepada user untuk membagikan artikel
ke media social.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke wordpress
2. Pilih artikel
3. Klik tombol share

11. Table 2.10 Use Case “Mengganti Tampil” specification sheet
Title Mengganti Tampilan
Purpose Admin dapat mengkostumisasi tampilan website sesuai
keingannya.
Pre Condition -
Post Condition -
Workflow 1. Masuk ke dashboard
2. Pilih fitur kostumisasi

12. C. Data Dictionary Specification
Dalam use case diatas dapat dilihat bahwa komponen utamanya adalah……..
Tabel-table di bawah ini menjelaskan tentang data dictionary dari website kelurahan Kleak
Table 2.11 Data Dictionary User
Name User
Description Pengunjung website
Sample Instances “James Montolalu”
Properties
First Name Nama Depan
Last Name Nama Belakang
Email Email User
Relationship
UserToKomentar User dapat memberikan komentar ke artikel yang diposting dalam
website
Component -
Super-Concepts -
Sub-Concepts -

13. Table 2.12 Data Dictionary Komentar
Name Komentar
Description Komentar yang diberikan user terhadap artikel
Sample Instances “Artikelnya sangat bermanfaat”
Properties
id_komentar Id untuk berkomentar
Isi Isi dari komentar
Author Pemilik komentar
Date Waktu pembuatan komentar
Relationship
KomentarToArtikel Memberikan komentar kepada satu artikel
Component -
Super-Concepts -
Sub-Concepts -

14. Table 2.13 Data Dictionary Berbagi
Name Berbagi
Description Fitur bagi user untuk dapat membagikan artikel ke media social.
Sample Instances -
Properties
Author User membagikan artikel yang ada pada website
Relationship
UserToBerbagi User dapat membagikan artikel
BerbagiToArtikel Artikel dapat dibagikan ke media social.
Component -
Super-Concepts -
Sub-Concepts -

15. Table 2.14 Data Dictionary Posting
Name Posting
Description Admin memposting artikel di website
Sample Instances “Lomba Olahraga yang diselenggarakan oleh Pemerintah Kota
Manado pada hari tanggal Jumat, 14 November 2014 pukul 10.00
s/d 16.00 WITA di lapangan Gelanggang Olah Raga Koni
Manado”
Properties
Id Id Postingan
Author Admin
Date Waktu postingan
Relationship
PostinganToArtikel Memposting artikel
AdminToPostingan Admin memberikan postingan baru pada website
Component -
Super-Concepts -
Sub-Concepts -

16. Table 2.15 Data Dictionary Sunting
Name Sunting
Description menyunting artikel yang telah diposting
Sample Instances “Lomba Catur yang diselenggarakan oleh Pemerintah Kota
Manado pada hari tanggal Jumat, 14 November 2014 pukul 10.00
s/d 16.00 WITA di lapangan Gelanggang Olah Raga Koni
Manado”
Properties
Id Id Suntingan
Author Admin
Date Waktu suntingan
Relationship
AdminToSunting Admin menyunting artikel yang telah dibuat sebelumnya
Component -
Super-Concepts -
Sub-Concepts -

17. Table 2.16 Data Dictionary Hapus
Name Hapus
Description Suatu tindakan menghapus sebuah artikel atau postingan pada
website
Sample Instances -
Properties
Id Id Hapus
Author Admin
Date waktu penghapusan
Relationship
AdminToHapus Admin menghapus sebuah postingan
Component -
Super-Concepts -
Sub-Concepts -

18. D. Site View Spesification
Dari Usecase diatas kita dapat membuat tampilan utama dari 1 user dan 2 admin yang akan
mengakses website ini. Tampilan user akan berbeda dengan tampilan admin dan editor. User hanya bisa
mengakses informasi sedangkan admin bisa mengubah atau menambah informasi yang terdapat pada
website
Table 2.17 Site View User
Site View Name Tampilan situs untuk user
Description -
User Groups -
Use Case “Login”, “Komentar”, “Lihat”
Site View Map
Area Name
Login
Beranda
Berita
Komentar
Berbagi
Area Description
User memasukkan
username dan
password.
Halaman ini
merupakan halaman
utama dari website
Kelurahan Kleak. Di
halaman ini terdapat
artikel terbaru.
Halaman ini berisi
semua artikel yang
diposting
Kotak untuk
meniggalkan
komentar terhadap
sebuah artikel
Fitur untuk
membagikan sebuah
artikel
Accessed/Managed
objects
User, Login
User
User, Komentar,
Berbagi.
User, Komentar
User, Berbagi
Priority
Tinggi
Tinggi
Tinggi
Tinggi
Tinggi

19. Nama
website
artikel
berbagi
komentar
Pemberitahuan
Menu-menu

20. Table 2.18 Site ViewAdmin
Site View Name Tampilan situs untuk admin
Description -
User Groups -
Use Case “Login”, “Komentar”, “Lihat”
Site View Map
Area Name
Login
Dashboard
Post
Komentar
Appearance
Area Description
Admin memasukkan
username dan
password.
Halaman ini
merupakan halaman
pengaturan atau
control pada website.
Halaman ini tempat
admin memposting,
menyunting, dan
menghapus artikel.
Tempat admin untuk
membaca dan
membalas komentar.
sebuah artikel
Tempat untuk
mengatur tampilan
website.
Accessed/Managed
objects
Admin, Login
Admin, Komentara,
Tampilan, Posting
Admin, Komentar
Admin, Tampilan
Priority
Tinggi
Tinggi
Tinggi
Tinggi

21. Nama
website
Menu
memposting
artikel
Menu
membalas
komentar
Menu
mengedit
tampilan

22. BAB III
DATA DESIGN
Data design merupakan suatu sarana yan bersifat penting yang berguna untuk mengklarifikasi
database pada aplikasi. Dari data dictionary dapat diambil data yang memiliki peranan penting
dalam website Kelurahan Kleak yaitu User dan Admin. Entitas dari User dan Admin ditandai
dengan sejumlah properties sederhana.

23. III.1 Definition Of The Access Sub-Schemas
III.2 Design Of Core Sub-Schemas

24. BAB IV
HYPERTEXT DESIGN
Users Site View
Dalam tampilan user hanya bisa login, melihat data, komentar dan berbagi artikel. Coarse Design
untuk Users Site View dapat dilihat dalam gambar berikut.

25. Admins Site View
Dalam tampilan admin bisa melakukan login, posting artikel, membalas komentar, dan mengubah
tampilan website. Coarse Design untuk Admins Site View dapat dilihat dalam gambar berikut.

26. BAB V
PENUTUP
V.1 Kesimpulan
Berdasarkan dari pembahasan – pembahasan yang ada di atas di tarik kesimpulan bahwa
Pemodelan Website Sistem Informasi ( Studi Kasus Kelurahan Kleak ) yaitu pada Kelurahan
Kleak, membutuhkan Website Sistem Informasi untuk saling berinteraksi antara Admin dan User
( Pengunjung Website). Dari seluruh proses dalam Web Modeling Language ( WebML), data
design dan hypertext merupakan hal yang sangat berpengaruh dalam pembuatan sebuah website.
Karena Data Design merupakan suatu prosen menentukan database yang digunakan dalam sebuah
website sedangkan hypertext design merupakan design tampilan pada website tersebut.
V.2 Saran
1. Di harapkan pada pengembang agar mengikuti sesuai dengan perancangan yang sudah di buat.
2. Di harapkan bagi yang mengembangkan agar menambah fitur – fitur dalam perancangan
website sistem informasi.

27. DAFTAR PUSTAKA
Hamzah, Moh. Harly, “Analisa dan Perancangan Website Media Sosial (Studi Kasus Program
Studi Informatika Universitas Sam Ratulangi)”, Manado : 2016