BAB IV IMPLEMENTASI KARYA - Dinamikarepository.dinamika.ac.id/id/eprint/2319/6/BAB_IV.pdf · KARYA . Pada Bab IV, penulis akan melakukan pembahasan secara detail desain dan visualisasi

65

BAB IV

IMPLEMENTASI KARYA

Pada Bab IV, penulis akan melakukan pembahasan secara detail desain

dan visualisasi yang disajikan pada desin web pada organisasi atau perusahaan

CV. Tunas Jaya.

4.1 Desain Layout Website

4.1.1 Idea Layout (Layout Gagasan)

Layout gagasan merupakan tahapan awal dari sebuah visualisasi perncangan

berupa coretan-coretan dasaar untuk mencari tt letak ataupun susunan bentuk teks

dan gambar. Berikut beberapa gambar mengenai layut gagasan dalam

perancangan desin website CV Tunas Jaya :

Gambar 4.1 : Idea Layout 1366 x 768 pixel

Sumber : Olahan Penulis

66

Keterangan:

Bidang yang ada digambar mempunyai ukuran 1366 x 768 pixel dengan

beberapa coretan kasar sebagai acuan layout menyeluruh pada desain

website untuk CV. Tunas Jaya.

4.1.2. Rought Layout (Layout Kasar)

1. Layout kasar halaman (Pengenalan)

Gambar 4.2 : Layout kasar halaman

Sumber: Olahan Penulis

Keterangan:

Layout kasar halaman ditampilkan sebagai halaman pengenalan atau pembuka

website dengn sejumlah panel menu button (tombol), diantaranya mulai dari

tombol menu beranda, profil, galeri, produk, hubungi.

67

2. Layout kasar halaman home (beranda)

Gambar 4.3 : Layout kasar halaman home (beranda)


Keterangan:

Layout kasar halaman home (Beranda) ditampilkan dengan menunjukkan

beberapa poster promo milik CV. Tunas jaya yang berfungsi untuk

mengenalkan perusahaan ini kepda masyarakat dan sebagai media

promosi

68

3. Layout kasar halaman profile (profil)

Gambar 4.4 : Layout kasar halaman profil (profil)


Keterangan: Layout kasar halaman profile (profil) ditampilkan dengan

menunjukkan informasi milik CV. Tunas jaya, serta visi dan misi milik

perusahaan. Ada beberapa informasi milik CV, Tunas Jaya yang disebutkan dalam

halaman profil, diantaranya nama pemilik, tahun berdirinya perusahaan, alamat

perusahaan, nomor telepon perusahaan, produk miik perusahaan, dan slogan.

69

4. Layout kasar halaman gallery (galeri)

Gambar 4.5 : Layout kasar halaman Gallery (galeri)


Keterangan:

Layout kasar halaman gallery (galeri) ditampilkan dengan menunjukkan foto-foto

kegiatan miik CV. Tunas Jaya, pada halaman ini diharapkan pengunjung bisa

melihat-lihat perusahaan CV. Tunas Jaya

70

5. Layout kasar halaman product (produk)

Gambar 4.6 : Layout kasar halaman product (produk)

Sumber: Olahan penulis

Keterangan:

Layout kasar halaman product (produk) ditampilkan dengan menunjukkan foto-

foto prouk milik CV. Tunas Jaya, ada halaman ini diharapkan pengunjung bisa

melihat-lihat jenis produk yng ada di CV. Tunas Jaya.

71

6. Layout kasar halaman hubungi

Gambar 4.7 : Layout kasar halaman hubungi


Keterangan:

Layout kasar halaman hubungi ditampilakn dengan menunjukkan informasi

kontak milik CV. Tunas Jaya, pada halaman ini diharapkan pengunjung bisa

mendapatkan informasi contact person dari perusahaan maupun ilik erusahaan,

serta bisa memberikan komentar dan saran guna menunjang kemajuan

perusahaan.

72

4.1.3. Comprehensive layout (Layout Menyeluruh)

1. Comprehensive layout home (beranda)

Halaman beranda ini mempunyai fungsi untuk menampilkan informasi kegiatan

CV. Tunas Jaya yang disampaikan lewat poster. Terdapat 3 macam poster

dibagian sisi kiri layut yang otomatis bergeser dari gambar stu ke gambar lainnya.

Serta terdapat pula kolom berita utama yang memberikan informasi/berita tentang

CV. Tunas jaya saat ini.

Gambar 4.8 : comprehensive layout halama home (beranda)

Sumber : Olahan penulis

Keterangan:

Halaman ini masih menggunakan warna dominan, yakni warna biru, putih,

kuning, dan abu-abu. Halaman ini menampilkan 3 buah poster berupa poster

73

promosi ataupun poster dari CV. Tunas Jaya yang berfungsi untuk mengajak

pengunjung website menjadi participant (peserta) dikegiatan CV. Tunas Jaya.

2. Comprehensive layout profile (Profil)

Halaman profile pada website ini berfungsi untuk menampilka informasi

mngenai profil milik CV. Tunas Jaya. Pada halaman profil ini berisi nama pemilik

perusahaan, tahun berdirinya perusahaan, alamat perusahaan, produk, serta slogan

perusahaan visi dan misi milik CV. Tunas Jaya

Gambar 4.9: Comprehensive layout halaman profile (profil)


Keterangan :Halaman ini hanya menggunakan 4 mcam warna yaitu, warna biru,

putih, kuning, dan abu-abu. Warna-warna tersebut memberikan kesan ceria dan

elegan.

74

3. Comprehensive layout gallery (Galeri)

Halama galeri inni dirancang untuk menampilkan berbagai macam kegiatan dan

beberapa tempat yang ada didalam perusahaan, mulai dari kegiatan distribusi, dan

kegiatan didalam perusahaan. Hal ini ditujukan untuk memperkuat promosi

perusahaan melalui website. Adanya foto-foto pada halaman ini diharapkan

mampu membuat pengunjung website tertarik untuk mengetahui lebih lnjut

tentang kegiatan-kegiatan yang dilakukan oleh CV. Tunas Jaya.

Gambar 4.10 : Comprehensive Layout halaman Gallery (galeri)

Sumber : Olahan Penulis

Keterangan: Masih menggunakan warna dominan seperti warna biru, putih,

kuning, dan abu-abu. Foto-foto kegiatan yang ada dihalaman ini berupa foto-foto

campuran, diantaranya adalah foto kegiatan distribusi, foto kegiatan didalam

perusahaan, dan foto tempat-tempat yang ada di perusahaan.

75

4. Comprehensive layout product (Produk)

Halaman ini berfungsi untuk menampilkan foto-foto produk milik CV. Tunas

Jaya. Adanya foto-foto aksesoris pada halaman ini diharapkan mampu untuk

membuat pengunjung website tertarik untuk membeli produk dari CV. Tunas

Jaya.

Gambar 4.11 : Comprehensive layout halaman product (produk)


Keterangan: Masih menggunakan warna dominan seperti warna biru, putih,

kuning, dan abu-abu. Foto-foto produk yang ada dihalaman ini berupa foto-foto

produk yang ditawarkan oleh CV. Tunas Jaya.

76

5. Comprehensive layout hubungi

Halaman ini berfungsi untuk menampilkan informasi kontak milik CV. Tunas

Jaya. Adanya halaman ini diharapkan bisa memberikan informasi kontak yang

cukup bagi pengunjung website ketika ingin berkunjung ke CV. Tunas Jaya. Dan

juga dihalaman ini bisa memberikan komentar dan saran, guna memangun

kemajuan CV. Tunas Jaya.

Gambar 4.12 : Comprehensive layout halaman hubungi


Keterangan: Informasi kontak dari halaman ini berupa nomor telepon dan

handphone perusahaan yang bisa dihubungi. Informasi terletak pada sisi kiri atas

layout, menggunakan background putih transaparan. Menggunakan warna

dominan warna biru, kuning, dan abu-abu.

77

4.2 Perancangan Sistem

Pada website CV. Tunas Jaya ini diperuntukkan bagi para user yang ingin

mengetahui tentang informasi perusahaan tersebut. Informasi yang dapa diperoleh

para user adalah berbagai macam produk, profil perusahaan, visi dan misi dan

berita.

Untuk order produk, dapat dilakukan user umum secara langsung dengan

mencantumkan informasi identitas user untuk dilakukan aktivitas lebih lanjut

melalui email, tlephone ataupun chatting dilur aplikasi ini. Dan segala informasi

yang telah diinput hanya dipruntukkan oleh user yang berperan sebagai

administrator. Pembangunan website CV. Tunas Jaya ini dibangun dengan

menggunakan tools sebagai berikut:

1. .Net Framework yang digunakan sebagai framework aplikasi untuk

membca bahasa pemrorman C# .net

2. Database yang digunakan adalah SQL Server Express Edition

Adapun proes dari aplikasi web ersebut dapat dilihat dalam diagram konteks

dan diagram E-R (Entiti Relationship) dibawah ini:

78

4.2.1 Diagram Konteks

Diagram konteks adalah sebuah gambaran yang sangat umum mengenai

sebuah sistem dimana sistem tersebut digambarkan sebagai proses tunggal.

Gambar 4.13 : Diagram Konteks


4.2.2 Diagram E-R

Diagram E-R (ERD) merupakan suatu model untuk menjelaskan hubungan

antar data dalam basis data berdasarkan obyek-obyek dasar data yang mempunyai

hubungan dasaar antar relasi. ERD untuk memodelkan struktur data dan hubungan

antar data, untuk menggambarkannya digunakan beberapa notasi dan simbol. Tapi

pada dasarnya untuk perancangan aplikasi website CV.Tunas Jaya hanya

membutuhkan sedikit data yang direlasikan dikarenakan sebagian besar data yang

ditampilkan hanya bersifat memberikan informasi.

79

Gambar 4.14 : Diagram E-R


4.3 Desain Peta Situs

Peta situs yang akan memberikan gambaran representatif visual sebuah

situs web. Homepage seuah website akan selalu diatas sebuah peta situs,

dibawahnya terdapat file-file yang merupakan link-link dari homepage tersebut.

Dengan adanya desain peta situs akan memberikan kemudahan kepada kami

untuk memulai tahap demi tahap yang akan dibangun dan dikembangkan. Dan

juga memudahkan kami untuk mengintegrasikan dengan basis data yang tersedia

dikarenakan sebagian besar informasi tersimpan didalamnya. Berikut desain situs

untuk website CV.Tunas Jaya:

80

Gambar 4.16 : Desain Peta Situs


4.4 Desain Tabel pada Database

Desain tabel terdiri dari dua jenis, dimana tabel-tabel utama yang menyimpan

segala macam informasi pada website sedangkan tabel-tabel pendukung berasal

dari generate aplikasi antar muka yang dihasilkan dengan penambahan

informasinya juga terangkum pada tabel user. Berikut isi tabel dan juga tipe data

yang digunakan :

1. Tabel Berita

Tabel 4.1 Tabel Berita

No Nama Tabel Tipe Data Panjang Kolom Primary Key

1 Berita ID Varchar 4 √

2 Berita Judul Int 50

3 Berita Deskripsi Varchar -1

4 Berita Image Image 16

81

5 Berita Tanggal Datetime 8


2. Tabel Galeri

Tabel 4.2 Tabel Galeri

No. Nama Tabel Tipe Data Panjang Kolom Primary Key

1 Galeri ID Varchar 4 √

2 Galeri Judul Int 50

3 Galeri Deskripsi Varchar -1

4 Galeri Image Image 16

5 Galeri Tanggal datetime 8


3. Tabel Order Produk

Tabel 4.3 Tabel Order Produk


1 ProdukID Int 4 √

2 Nama Tamu Varchar 50

3 Email Varchar 50

4 NoInformasiYangDihubungi Varchar 50

5 IsiOrder Varchar -1

6 OrderTanggal Datetime 8


4. Tabel Poster

Tabel 4.4 Tabel Poster


1 PosterID int 4 √

2 PosterJudul Varchar 50

3 PosterImage Image 16

4 PosterTanggal datetime 8


5. Tabel Produk

Tabel 4.5 Tabel Produk


1 ProdukID Int 4 √

82

2 ProdukNama Varchar 50

3 Produk Deskripsi Varchar -1

4 ProdukKategori Varchar 50

5 ProdukImage Image 16

6 ProdukTanggal datetime 8


6. Tabel Tamu

Tabel 4.6 Tabel Tamu


1 TamuID Int 4 √

2 NamaTamu Varchar 50

3 AlamatTamu Varchar 255

4 Email Varchr 50

5 Phone Varchar 20

6 IsiPesan Varchar -1

7 PesanTanggal Datetime 8


7. Tabel aspnet_Applications

Tabel 4.7 Tabel aspnet_Applications

No Nama Tabel Tipe Data Panjang Kolom

1 ApplicationName Nvarchar 256

2 LowredApplicationName Nvarchar 256

3 Applicationid Uniqueidentifier NULL

4 Description nvarchar 256


8. Tabel aspnet_Membership

Tabel 4.8 Tabel aspnet_Membership

N

o

Nama Tabel Tipe Data Panjang

Kolom

1 ApplicationID uniqueidentifi

er

NULL

2 UserID Uniqueidentif

ier

NULL

3 Password Nvarchar 128

4 PasswordFormat Int NULL

5 PasswordSat Nvarchar 128

83

6 MobilePIN Nvarchar 16

7 Email Nvarchar 256

8 LoweredEmail Nvarchar 256

9 PasswordQuestion Nvarchar 256

10 PasswordAnswer Nvarchar 128

11 IsApproved Bit NULL

12 IsLockedOut Bit NULL

13 CreateDate Datetime NULL

14 LastLoginDate Datetime NULL

15 LastPasswordChangedDate Datetime NULL

16 LastLockoutDate Datetime NULL

17 FailedPasswordAttemptCount Int NULL

18 FailedPasswordAttemptStart Datetime NULL

19 FailedPasswordAnswerAttemptCount Int NULL

20 FailedPasswordAnswerAttemptWindowsSta

rt

Datetime NULL

21 Comment Ntext 1073741823


9. Tabel aspnet_Paths

Tabel 4.9 Tabel aspnet_Paths


1 ApplicationID Uniqueidentifier NULL

2 PathID Uniqueidentifier NULL

3 Path Nvarchar 256

4 LoweredPath nvarchar 256


10. Tabel aspnet_PersonalizationAIIUsers

Tabel 4.10 Tabel aspnet_PersonalizationAIIUsers


1 PathID Uniqueidentifier NULL

2 PageSettings Image 2147483647

3 LastUpdateDate Datetime NULL


11. Tabel aspnet_PersonalizationPerUser

Tabel 4.11 aspnet_PersonalizationPerUser


84

1 Id Uniqueidentifier NULL

2 Pathid Uniqueidentifier NULL

3 Userid Uniqueidentifier NULL

4 PageSettings Image 2147483647



12. Tabel aspnet_Profile

Tabel 4.12 Tabel aspnet_Profile


1 Userid uniqueidentifier NULL

2 PropertyNames Ntext 1073741823

3 PropertyValuesString Ntext 1073741823

4 PropertyValuesBinary Image 2147483647



13. Tabel aspnet_Roles

Tabel 4.13 Tabel aspnet_Roles


1 ApplicationID uniqueidentifier NULL

2 RoleID Uniqueidentifier NULL

3 RoleName Nvarchar 256

4 LoweredRoleName Nvarchar 256

5 Description Nvarchar 256


14. Tabel aspnet_Schema Versions

Tabel 4.14 Tabel aspnet_Schema Versions


1 Feature Nvarchar 128

2 CompatibleSchemaVersion Nvarchar 128

3 IsCurrentVersion bit NULL


85

15. Tabel aspnet_Users

4.15 Tabel aspnet_Users


1 Applicationid uniqueidentifier NULL

2 UserId Uniqueidentifier NULL

3 UserName Nvrchar 256

4 LoweredUserName Nvarchar 256

5 MobileAlias Nvarchar 16

6 IsAnonymous Bit NULL

7 LastActivityDate Datetime NULL


16. Tabel aspnet_UserInRoles

4.16 Tabel aspnet_UserInRoles


1 UserId Uniqueidentifier NULL

2 RoleId uniqueidentifier NULL


17. Tabel aspnet_WebEvents_Events

Tabel 4.17 Tabel aspnet_WebEvents_Events


1 EventId char 32

2 EventTimeUtc Datetime NULL

3 EventTime Datetime NULL

4 EventType Nvarchar 256

5 EventSequence Decimal NULL

6 EventOccurrence Decimal NULL

7 EventCode Int NULL

8 EventDetailCode Int NULL

9 Message Nvarchar 1024

10 ApplicationPath Nvarchar 256

11 ApplicationVirtualPath Nvarchar 256

12 MachineName Nvarchar 256

13 RequestUrl Nvarchar 1024

14 ExceptionType nvarchar 256

15 Details Ntext 173741823


86

4.5 Hasil Karya Website

1. Halaman Home (Beranda)

Halaman ini mempunyai fungsi untuk menyampaikan informasi kepada

pengunjung website melalui poster iklan. Terdapat 3 buah iklan promo pada

halaman ini. Serta terdapat berita utama yang bisa diganti setiap saat ketika ada

informasi penting mengenai CV. Tunas Jaya.

Gambar 4.17: Final Artwork halaman home (beranda)


Pembahasan:

a. Ukuran halaman: 1366 x 768 pixel menyesuaikan resolusi layar monitor

standar

b. Format halaman : vertikal kiri

87

c. Font yang digunakan: georgia, cambria, times new roman, arial, verdana

an calibri

d. Warna yang digunakan : putih, abu-abu, biru, kuning

e. Ilustrasi : Desain website ini mengacu kepada desain flat user interface

demi memudahkan orang dalam mengakses website ini

f. Logo milik CV. Tunas Jaya yang ditampilkan pada sisi pojok kiri atas

layout

g. Menu yang ditampilakan: home (beranda), profile (profile), gallery

(galeri), product (produk) hubungi dan direct link button k situs jejaring

sosial seperti facebook, yahoo, dan twitter

h. Content (Isi halaman) yang ditampilkan: 3 buah iklan promo pendukung

yang mempunyai efek slide otomatis

Keterangan Unsur warna: warna kuning dimaksud agar memberikan kesan

ceria, sehingga pengunjung akan merasa disambut. Warna putih digunakan untuk

menimbulkan kesan sederhana. Warna biru dimaksudkan agar mempunyai nuansa

tenang dan berenergi. Warna abu-abu digunakan pada background content

digunakan untuk menimbulkan suasana klasik, dikarenakan CV. Tunas jaya yang

sudah berdiri lebih dari 10 tahun lamanya. Warna biru muda yang merupakan

warna dari header memberikan kesan damai dan tenang.

Keterangan tipografi: penggunaan font yang memadukan font times new

roman dan font arial pada halaman ini sudah disesuaikan agar bisa terbaca oleh

pengunjung website

88

1. Halaman Profil

Halaman Profil berfungsi untuk menampilakn informasi mengenai profil

milik CV. Tunas Jaya. Terdapat 2 slide pada halaman profil, yang pertama

yaitu: informasi profil yang diantaranya adalah nama pemilik,tahun

berdiri,alamat,nomor telepon, jenis produk dan slogan, kemudian yang

kedua yaitu visi dan misi dari CV.Tunas Jaya

Gambar 4.18: Final Artwork halaman profil


Pembahasan :


standar



an calibri

89





layout


(galeri), product (produk) hubungi dan direct link button ke situs jejaring


h. Content (Isi halaman) yang ditampilkan: Informasi tentang CV. Tunas

Jaya


gembira dan memberikan nuansa santai. Warna putih digunakan untuk

mnimbulkan kesan sederhana dan ceria.Warna abu-abu digunakan pada

background content digunakan untuk menimbulkan suasana klasik, berkesan dan

elegan. Warna biru muda yang merupakan warna dari header memberikan kesan

damai dan tenang.



pengunjung website.

90

2. Halaman Galeri

Halaman galeri berfungsi untuk menampilkan foto-foto dokumentasi tentang

kegiatan dan tempat-tempat yang ada di CV. Tunas Jaya

Gambar 4.19: Final Artwork halaman galeri


Pembahasan :


standar



an calibri




91


layout




h. Content (Isi halaman) yang ditampilkan: Informasi tentang CV. Tunas

Jaya






damai dan tenang.



pengunjung website.

92

3. Halaman Produk

Halaman produk berfungsi untuk menampilakan informasi mengenai produk-

produk yang ditawarkan oleh CV. Tunas Jaya.

Gambar 4.20 : Final Artwork halaman produk


Pembahasan :


standar


i. Font yang digunakan: georgia, cambria, times new roman, arial, verdana

an calibri

j. Warna yang digunakan : putih, abu-abu, biru, kuning

93

k. Ilustrasi : Desain website ini mengacu kepada desain flat user interface


l. Logo milik CV. Tunas Jaya yang ditampilkan pada sisi pojok kiri atas

layout

m. Menu yang ditampilakan: home (beranda), profile (profile), gallery



n. Content (Isi halaman) yang ditampilkan: Informasi tentang CV. Tunas

Jaya






damai dan tenang.



pengunjung website.

94

3.1 Publikasi

Media publikasi yang digunakan adalah poster karena poster dapat memuat

informasi tentang gambaran Perusahaan CV.Tunas Jaya.

1. Poster

Gambar 4.22 Poster Website Company Profile

(Sumber: Olahan Penulis)

Media Publikasi yang digunakan adalah poster karena poster dapat

memuat informasi tentang gambaran perusahaan CV.Tunas Jaya.

95

2. Merchandise

Gambar 4.23 Mug Sebagai salah satu Media Publikasi


Gambar 4.23 adalah foto dokumentasi merchandise mug dengan 3 desain

yang berbeda. Mug dipilih karena dapat menampilkan karakter dan tema

game serta judul game yang diaplikasikan dalam bentuk fisik dengan harga

yang terjangkau.

96

Gambar 4.24 Stiker Logo Perusahaan


Gambar 4.24 adalah tampilan stiker dari perusahaan CV Tunas Jaya.

Logo Perusahaan pada Stiker melambangkan Perusahaan itu sendiri. Oleh

karena itu logo perusahaan CV.Tunas Jaya digunakan sebagai stiker.

Documents

BAB IV IMPLEMENTASI KARYA - Dinamikarepository.dinamika.ac.id/id/eprint/2319/6/BAB_IV.pdf · KARYA . Pada Bab IV, penulis akan melakukan pembahasan secara detail desain dan visualisasi