11

BAB III. PERANCANGAN SISTEM

3.1 Perangkat Lunak

Dalam pembuatan Perancangan Sistem Informasi

Promosi Condotel Berbasis Web Pada PT.Anugerah Tri Artha

penulis menggunakan perangkat lunak/software sebagai

berikut :

a. Adobe Dreamweaver CS5

Penulis menggunakan software ini karena software ini

sering digunakan oleh para programmer dan bahasa

yang digunakan mudah dipahami.

b. Xampp 1.8.1

Xampp adalah sebuah aplikasi yang dapat merangkum

beberapa beberapa server sekaligus. Fungsinya

adalah sebagai server yang berdiri sendiri (Localhost).

Penulis menggunakan Apache dan MySQL yang telah

disediakan didalam aplikasi xampp.

c. Windows 7

Windows 7 adalah sistem operasi yang sangat popular

saat ini, penulis menggunakan ini karena tampilan

yang mudah dipahami dan software yang penulis

gunakan adalah support windows.

12

3.2 Lembar Kerja Tampilan (LKT)

1. Halaman Awal website

Gambar 3.1 LKT Halaman Awal Website

Navigasi :

Klik Home untuk kehalaman utama.

Klik About As untuk kehalaman about us.

Klik Atria Condotel & Conference untuk

kehalaman informasi condotel.

Klik Contact Us untuk kehalaman kontak.

Klik Gallery untuk kehalaman galeri

Klik News Update untuk melihat berita terbaru

Klik Our Partner untuk melihat partner

perusahaan.

13

Keterangan :

Teks Menu navigasi memakai jenis huruf

Open Sans ukuran 14pt

Teks Content memakai jenis huruf Open Sans

ukuran 12pt

2. Halaman Atria Condotel & condeference

Pada halaman ini mencakup berberapa halaman yang

mempunyai tampilan yang sama seperti:

Halaman Overview

Halaman Facilities

Halaman Unit Type

Halaman Floor Plan

Halaman Location Map

Halaman Price List

Halaman Concept

Halaman Information

Halaman Gallery

14

Gambar 3.2 LKT Halaman Atria Condotel & Conference

Navigasi:

Klik Home untuk kehalaman utama.

Klik About Us untuk kehalaman about us.

Klik Atria Condotel & Conference untuk

kehalaman informasi condotel.

Klik Contact Us untuk kehalaman kontak.

Klik Gallery untuk kehalaman galeri.

Klik News Update untuk melihat berita terbaru

Klik Our Partner untuk melihat partner

perusahaan.

Klik Job Oppurtunities untuk kehalaman

lowongan pekerjaan.

Klik Special Promo untuk melihat promo

spesial.

Klik Event untuk melihat acara atau event

yang akan dilaksanakan atau sudah

dilaksanakan oleh perusahaan.

15

Klik Overview untuk melihat desain awal

condotel.

Klik Facilities untuk melihat fasilitas- fasilitas

dari condotel.

Klik Unit Type untuk melihat tiper-tipe

condotel yang akan dibangun.

Klik Floor Plan untuk melihat denah lantai

condotel.

Klik Location Map untuk melihat denah lokasi

yang akan dibangun condotel.

Klik Price List untuk melihat daftar harga

condotel.

Klik Concept untuk melihat konsep dari

condotel.

Klik Information untuk menuju kehalaman

informasi.

Klik Gallery untuk melihat galeri tentang

condotel.

Keterangan :

Text menu navigasi menggunakan jenis huruf

Open Sans ukuran 14pt.

Text content menggunakan jenis huruf Open

Sans ukuran 12 pt.

16

Text judul menggunakan jenis huruf Open

Sans ukuran 14pt.

3. Halaman Contact Us

Pada halaman ini mencakup beberapa halaman yang

memiliki tampilan sama adalah sebagai berikut:

Halaman Progress

Halaman gallery

Halaman News Update

Halaman Our Partner

Halaman Special Promo

Halaman Event

Gambar 3.3 LKT Halaman Contact Us

Navigasi :

Klik Home untuk kehalaman utama.

Klik About Us untuk kehalaman about us.

Klik Atria Condotel & Conference untuk

kehalaman informasi condotel.

17

Klik Contact Us untuk kehalaman kontak.

Klik Gallery untuk kehalaman galeri.

Klik News Update untuk melihat berita terbaru

Klik Our Partner untuk melihat partner

perusahaan.

Klik Job Oppurtunities untuk kehalaman

lowongan pekerjaan.

Klik Special Promo untuk melihat promo

spesial.

Klik Event untuk melihat acara atau event

yang akan dilaksanakan atau sudah

dilaksanakan oleh perusahaan.

Keterangan :

Text menu navigasi menggunakan jenis huruf

Open Sans ukuran 14pt.

Text content menggunakan jenis huruf Open

Sans ukuran 12 pt.

Text judul menggunakan jenis huruf Open

Sans ukuran 14pt.

4. Halaman About Us

Halaman yang menampilkan tentang sejarah

perusahaan dan tokoh pendiri condotel.

18

Gambar 3.4 LKT Halaman About Us

Navigasi:

Klik Home untuk kehalaman utama.

Klik About Us untuk kehalaman about us.

Klik Atria Condotel & Conference untuk

kehalaman informasi condotel.

Klik Contact Us untuk kehalaman kontak.

Klik Gallery untuk kehalaman galeri.

Klik News Update untuk melihat berita terbaru

Klik Our Partner untuk melihat partner

perusahaan.

Keterangan:

Text menu navigasi menggunakan jenis huruf

Open Sans ukuran 14pt.

Text content menggunakan jenis huruf Open

Sans ukuran 12 pt.

19

Text judul menggunakan jenis huruf Open

Sans ukuran 14pt.

5. Halaman Administrator

Halaman yang berfungsi untuk mengubah informasi

berupa teks,dan gambar.

Gambar 3.5 LKT Halaman Administrator

Navigasi:

Klik menu utama untuk mengubah halaman-halaman

website

Klik Menu Gallery untuk mengubah Gallery

Klik Menu The Condotel untuk mengubah halaman

condotel

Klik Menu User untuk mengubah halaman tentang

user

Keterangan:

Teks button menggunakan jenis huruf Arial dengan

ukuran 12pt

20

Teks menu menggunakan jenis huruf arial Uppercase

dengan ukuran 12pt

1.3 Jaringan Sematik Tampilan (JST)

Jaringan Semantik Tampilan merupakan pengetahuan

secara grafis yang menunjukkan hubungan antar berbagai

objek,adapun JST dalam pembuatan website yang telah

dibuat adalah sebagai berikut:

8

1

i

2

4

5

6

3

7

t

u

v

l

n

q

f

g

a

c

b

d

e

11

10

9

w

x

y

j

k

s

p

h

r

o

m

Gambar 3.6 Jaringan Sematik Tampilan

Navigasi:

a. Klik halaman Atria Condotel & Conference dari

halaman About Us atau Klik halaman About Us dari

Halaman Atria Condotel & Conference.

21

b. Klik halaman Contact Us dari halaman Atria

Condotel & Conference atau klik Halaman Atria

Condotel & Conference dari halaman Contact Us.

c. Klik halaman Progress dari halaman Contact Us atau

klik halaman Contact Us dari halaman Progress

d. Klik halaman Gallery dari halaman Progress atau

klik halaman Progress dari halaman Gallery.

e. Klik halaman News Update dari halaman Gallery

atau klik halaman Gallery dari halaman News

Update.

f. Klik halaman Our Partner dari halaman News

Update atau klik halaman News Update dari halaman

Our Partner.

g. Klik halaman About Us dari halaman Our Partner

atau klik halaman Our Partner dari halaman About

Us

h. Klik halaman Atria Condotel & Conference dari

halaman Our Partner atau klik halaman Our Partner

dari halaman Atria Condotel & Conference.

i. Klik halaman Home dari halaman Our Partner atau

klik halaman Our Partner dari halaman Home.

j. Klik halaman Gallery dari halaman Our Partner atau

klik halaman Our Partner dari halaman Gallery.

k. Klik halaman About Us dari halaman News Update

atau klik halaman News Update dari halaman About

Us.

22

l. Klik halaman Home dari halaman About Us atau klik

halaman About Us dari halaman Home.

m. Klik halaman Contact Us dari halaman About Us

atau klik halaman About Us dari halaman Contact

Us.

n. Klik halaman Atria Condotel & Conference dari

halaman Home atau klik halaman Home dari

halaman Atria Condotel & Conference.

o. Klik halaman Gallery dari halaman Atria Condotel &

Conference atau klik halaman Atria Condotel &

Conference dari halaman Gallery.

p. Klik halaman Progress dari halaman Atria Condotel

& Conference atau klik halaman Atria Condotel &

Conference dari halaman Progress.

q. Klik halaman Contact Us dari halaman Home atau

klik halaman Home dari halaman Contact Us.

r. Klik halaman Contact Us dari halaman News Update

atau klik halaman News Update dari halaman

Contact Us

s. Klik halaman Gallery dari halaman Contact Us atau

klik halaman Contact Us dari halaman Gallery.

t. Klik halaman Progress dari halaman Home atau klik

halaman Home dari halaman Progress.

u. Klik halaman Gallery dari halaman Home atau klik

halaman Home dari halaman Gallery.

23

v. Klik halaman News Update dari halaman Home atau

klik halaman Home dari halaman News Update.

w. Klik halaman Job Oppurtunities dari halaman Atria

Condotel & Conference atau klik halaman Atria

Condotel & Conference dari halaman Job

Oppurtunities.

x. Klik halaman Special Promo dari halaman Atria

Condotel & Conference atau klik halaman Atria

Condotel & Conference dari halaman Special Promo.

y. Klik halaman Event dari halaman Atria Condotel &

Conference atau klik halaman Atria Condotel &

Conference dari halaman Event.

Keterangan :

1. Halaman Home

2. Halaman About Us

3. Halaman Atria Condotel & Conference

4. Halaman Contact Us

5. Halaman Progress

6. Halaman Gallery

7. Halaman News Update

8. Halaman Our Partner

9. Halaman Job Oppurtunities

10. Halaman Special Promo

11. Halaman event

24

3.2 Context Diagram (CD)

Diagram konteks pada sistem pembuatan website

promosi ditujukan pada gambar

Sistem informasi promosi

PT.Anugerah Tri Artha

admin pengunjung

Informasi data calon

pelanggan dan calon

investor

Data promosi,data

pelangganInformasi tentang

condotel,berita

Memberikan

komentar atau

tanggapan

Gambar 3.7 Context Diagram

3.3 Data Flow Diagram (DFD)

ADMIN

Pembeli

Data pengunjung

Data pengunjung

Informasi perusahaanBerita

Sistem Informasi

Pembuatan

Website Promosi

Gambar 3.8 DFD tingkat 0 Sistem informasi website promosi PT.Anugerah

Tri Artha

pembeli

25

ADMINHapus Informasi Perusahaan

Tambah Informasi Perusahaan

Hapus informasi perusahaan

Hapus Berita

Tambah Berita

Update Berita

Data

pengunjung

Informasi

perusahaan

Data Berita

Pembeli

Informasi pembeli

Update Informasi Pengunjung

Hapus informasi pengunjung

Gambar 3.9 DFD tingkat 1 Sistem informasi website promosi PT.Anugerah

Tri Artha

26

3.4 Daftar Tabel

Gambar 3.10 daftar tabel

3.5 Struktur Tabel

Struktur tabel pada pembuatan Sistem Informasi

Website Promosi PT.Anugerah Tri Arta adalah sebagai

berikut:

1. Tabel User

Tabel User digunakan untuk menyimpan Username

dan Password untuk proses login, digunakan untuk

identifikasi saat proses login pada halaman

Administrator.

27

Gambar 3.11 Struktur Tabel User

2. Tabel Album

Tabel Album digunakan untuk mengelompokkan foto

ataupun gambar yang dalamnya berisi foto-foto yang

mendeskripsikan album.

Gambar 3.12 Struktur Tabel Album

3. Tabel Banner

Tabel Banner digunakan untuk menampilkan iklan

yang akan ditampilkan pada halaman website.

Gambar 3.13 Struktur Tabel Banner

28

4. Tabel Berita

Tabel Berita digunakan untuk menapilkan berita-berita

seputar informasi condotel pada halaman website.

Gambar 3.14 Struktur Tabel Berita

5. Tabel Event

Tabel Event Digunakan Untuk menapilkan acara yang

diselenggarakan oleh pihak perusahaan.

Gambar 3.15 Struktur Tabel Event

6. Tabel Favicon

Tabel Favicon digunakan untuk menampiklan icon

atau shortcut pada tab website.

29

Gambar 3.16 Struktur Tabel Fav icon

7. Tabel Gallery

Tabel Gallery digunakan untuk menapilkan foto-foto

condotel dan fasilitas- fasilitas condotel

Gambar 3.17 Struktur Tabel Gallery

8. Tabel Galleryhome

Tabel Galleryhome digunakan untuk menampilkan

foto-foto pada halaman awal atau homepage.

Gambar 3.18 Struktur Tabel Galleryhome

9. Tabel Gambar

Tabel Gambar digunakan untuk menampilkan fasilitas-

fasilitas yang dimiliki oleh condotel.

Gambar 3.19 Struktur Tabel Gambar

30

10. Tabel Header

Tabel Header digunakan untuk menampilkan foto-foto

sekilas tentang condotel melalui foto slide pada

halaman awal atau home.

Gambar 3.20 Struktur Tabel Header

11. Tabel Modul

Tabel Modul adalah kumpulan data atau informasi

tentang condotel.

Gambar 3.21 Struktur Tabel Modul

12. Tabel Progress

Tabel Progess digunakan untuk menampikan progres

pembangunan condotel.

31

Gambar 3.22 Struktur Tabel Progress

13. Tabel Slide

Tabel Slide digunakan untuk menampilkan foto-foto

tentang condotel pada halaman condotel.

Gambar 3.23 Struktur Tabel Slide

14. Tabel Social

Tabel Social digunakan untuk menampilkan social

media yang dimiliki oleh condotel.

Gambar 3.24 Struktur Tabel Social

32

15. Tabel Statistik

Tabel Statistik digunakan untuk menampilkan atau

menghitung daftar pengunjung condotel.

Gambar 3.25 Struktur Tabel Statistik

16. Tabel Title

Tabel Title digunakan untuk menampilkan judul

halaman selama halaman itu dibuka.

Gambar 3.26 Struktur Tabel Title

17. Tabel YM

Tabel YM digunakan untuk menampilkan akun Yahoo

Messagger yang dimiliki condotel.

Gambar 3.27 Struktur Tabel YM