BAB 3 ANALISIS DAN PERANCANGAN

Transkripsi

1 BAB 3 ANALISIS DAN PERANCANGAN 3.1 Sejarah Perusahaan Seorang mahasiswa lulusan dari Universitas Bina Nusantara 2007, Salman Nuriman K. J. yang juga seorang web design freelancer seringkali mendapatkan pekerjaan membuat website dari perusahaan-perusahaan yang ingin menginformasikan produk dan/atau jasa mereka melalui media di internet sehingga dikunjungi oleh pengunjung yang membutuhkan informasi. Pada bulan Agustus 2008, Salman Nuriman K. J. bersama sesama freelancer, Chandra Jatnika, Dali Dwiputra, Firman Solihuddin, Yusuf Wibisono dan Sinta Kumalasari bergabung untuk membangun sebuah Rumah Produksi bernama ADH Creative House. Nama ADH berasal dari yang sangat kuat eratnya dengan dunia apabila dieja maka akan terbaca edh atau adh apabila menggunakan ejaan bahasa inggris. ADH Creative House saat ini berada di bidang industri kreatif khususnya di bidang design, art product, multimedia, website dan application Misi Perusahaan Menjadi perusahaan terdepan di bidang Web Services. Menjadi perusahaan terdepan di bidang Application & System Development di Indonesia. 26

2 27 Memberikan layanan terbaik di bidangnya dan kualitas desain profesional Visi Perusahaan Sebagai salah satu penyedia jasa dan layanan pembuatan website dan aplikasi profesional yang murah, terpercaya dan handal di Indonesia. Sampai saat ini ADH Creative House telah memberikan jasa dan layanan untuk perusahaan dan organisasi profit maupun non-profit secara profesional, dengan layanan dan kualitas yang cepat dan memuaskan. ADH Creative House mampu meraih prestasi dengan cara memberikan support dan layanan yang terbaik kepada para klien. Kemampuan ADH Creative House dalam membangun sebuah website ternyata mendapat perhatian dan kepuasan yang tinggi dari para klien. 3.2 Struktur Organisasi Perusahaan Diagram Struktur Organisasi Perusahaan Adapun diagram struktur organisasi perusahaan seperti pada gambar dibawah:

3 28 Gambar 3.1 Struktur organisasi perusahaan Pembagian Tugas Dibawah ini adalah pembagian tugas masing-masing divisi secara rinci: 1. IT Executive a. Menyusun strategi perusahaan. b. Menyusun strategi pemasaran. c. Menentukan desain yang akan ditawarkan kepadaa klien. d. Menentukan konsep produk. e. Menentukan SOP (Standard Operating Procedures) perusahaan. 2. Finance, Marketing, and Admin a. Membukukan keuangan perusahaan. b. Membuat laporan keuangan.

4 29 c. Membuat SOP (Standard Operating Procedures) administrasi keuangan perusahaan. d. Mencari pekerjaan di semua bidang divisi. e. Membina relasi dengan klien maupun calon klien. f. Mengelola administrasi perusahaan. 3. Art and Design Division a. membuat konsep desain. b. Membuat layout website. c. Membuat ilustrasi desain. d. Melakukan proses fotografi. 4. IT Division a. membuat peta konsep aplikasi. b. membuat program aplikasi. c. membuat program website. 5. Networking Division a. membuat konsep jaringan komputer. b. membuat RAB (Rancangan Anggaran Biaya). c. implementasi dari konsep jaringan komputer yang telah dibuat.

5 Analisis Permasalahan Analisis Sistem Pemasaran yang Berjalan Sistem pemasaran yang dilakukan oleh ADH Creative House sekarang adalah dengan menggunakan social networking website ( dan pemasaran dari mulut ke mulut (koneksi), dan menawarkan portfolio melalui CD interaktif. Bagi pihak konsumen yang tertarik dapat memperoleh informasi secara lengkap dengan datang ke kantor perusahaan, menelpon ke salah satu pegawai perusahaan atau pemilik perusahaan, atau meeting di suatu tempat untuk membicarakan tentang jasa maupun produk yang dituju. Apabila konsumen merasa cocok, selanjutnya dilakukan proses negosiasi harga jasa atau meminta list harga produk untuk produk yang sudah ada (akan ada negosiasi harga untuk permintaan pembuatan produk tertentu, contoh; shoes painting, t-shirts, annual report book). Untuk pembayaran dilakukan dengan pembayaran secara tunai maupun kredit sesuai dengan perjanjian yang dilakukan sebelumnya. Menurut penulis, sistem pemasaran yang sedang berjalan pada perusahaan sampai saat ini dianggap terbatas pada orang-orang yang dikenal oleh semua pegawai yang ada didalam perusahaan. Orang-orang yang tidak mengenal sama sekali tentang perusahaan ini, baik nama perusahaan maupun pegawai yang ada didalam perusahaan tidak akan mengetahui apa yang ditawarkan oleh perusahaan (bahkan melalui social networking website, karena calon klien harus masuk kedalam friendlist perusahaan supaya bisa mengetahui informasi perusahaan).

6 Analisis Hasil Wawancara Dari hasil wawancara dengan Salman Nuriman K. J. selaku IT Executive ADH Creative House, dapat disimpulkan bahwa: 1. Selama ini pemasaran yang dilakukan sangat terbatas karena kesibukan pemilik maupun pegawai lainnya, karena semua pegawai yang bekerja di perusahaan tersebut adalah pekerja bebas (freelance) sehingga mereka kurang bisa meluangi waktu mereka untuk memasarkan jasa yang ada di perusahaan. 2. Cara pemasaran pertama, yaitu cara pemasaran melalui CD interaktif, dianggap membuang waktu dalam hal desain, pencetakan, dan perubahan isi dari CD interaktif tersebut, karena informasi tentang portfolio selalu berubah, minimal ada perubahan setiap bulannya. 3. Cara pemasaran kedua, yaitu melalui social networking website, hasil wawancara dengan Salman Nuriman K. J. Dalam hal pemasaran melalui cara ini, sama dengan apa yang sudah dianalisa oleh penulis, yaitu calon klien harus masuk kedalam friendlist perusahaan supaya bisa mengetahui informasi perusahaan. 4. Cara pemasaran terakhir, yaitu cara pemasaran melalui mulut ke mulut (koneksi) adalah yang paling sering digunakan, karena dengan cara tersebut, pihak perusahaan bisa menjelaskan secara detail kepada calon klien tentang apa yang ditawarkan oleh perusahaan, tetapi cara ini pun tetap dianggap terbatas, karena tetap mengandalkan orangorang yang dikenal oleh pegawai perusahaan. 5. Perusahaan mengharapkan penyebaran informasi tentang perusahaan

7 32 dan jasa yang ditawarkan secara luas tanpa tergantung dari sistem pemasaran yang biasanya perusahaan lakukan. Penggunaan website multimedia diharapkan dapat menjawab masalah ini. 6. Pihak perusahaan menginginkan website yang menarik secara visual, dengan isi profile dan portfolio perusahaan yang lengkap sehingga konsumen bisa langsung membicarakan tentang apa yang konsumen inginkan kepada salah satu pegawai perusahaan atau pemilik perusahaan, lalu langsung masuk ke dalam tahap negosiasi harga tanpa perlu bertanya kepada pihak perusahaan tentang jasa yang ditawarkan dan hasil dari pekerjaan yang sudah diselesaikan oleh perusahaan. 7. Perusahaan juga membutuhkan fasilitas admin sebagai editor halaman dan image gallery database. Fasilitas admin diminta untuk dirancang sesederhana mungkin agar pegawai perusahaan dapat menggunakannya dengan mudah. 8. Susunan yang diinginkan oleh pihak perusahaan didalam website yaitu halaman Home yang berisi tentang hasil dari pekerjaan perusahaan dalam bentuk Flash Animation, halaman News yang berisi tentang semua berita yang ingin disampaikan oleh perusahaan kepada pengunjung website, halaman Company Profile yang berisi tentang profil perusahaan, halaman Services yang berisi tentang deskripsi masing-masing divisi beserta klien-klien yang pernah dan/atau masih bekerja sama dengan divisi yang bersangkutan dan fitur order tracking yang berguna bagi klien yang sedang menyewa jasa

8 33 pembuatan website kepada perusahaan untuk memantau perkembangan websitenya, halaman Contact Us yang berisi form pengisian kritik, saran, sewa jasa, atau lainnya untuk dikirim ke e- mail perusahaan, dan yang terakhir adalah halaman Showcase yang berisi portfolio semua divisi yang ada diperusahaan dalam bentuk flash image gallery Rumusan Permasalahan Dari hasil wawancara, maka dapat disimpulkan bahwa permasalahan yang dihadapi ADH Creative House dalam memasarkan produk dan jasanya adalah: 1. Sistem pemasaran melalui social networking website tidak dapat memberikan informasi yang jelas tentang perusahaan karena keterbatasan dari website itu sendiri (bukan tempat untuk memasarkan produk dan layanan jasa perusahaan, karena termasuk kategori website jaringan sosial, bukan website yang sepenuhnya untuk memasarkan produk atau jasa), dan juga calon klien harus masuk kedalam friendlist perusahaan supaya bisa mengetahui informasi perusahaan. 2. Sistem pemasaran dari mulut ke mulut maupun CD interaktif hanya mengandalkan luasnya koneksi masing-masing pegawai dan pemilik perusahaan sehingga membatasi gerak perusahaan dalam memasarkan produk dan layanan jasa.

9 Usulan Pemecahan Masalah Untuk menghadapi permasalahan yang ada, usulan yang diberikan adalah dengan pembuatan website yang berbasiskan multimedia. Alasan penggunaan website karena pihak perusahaan hanya perlu memberitahukan link website perusahaan kepada calon klien dalam memberikan informasi tentang perusahaan dan perusahaan juga bisa memasang iklan pada media cetak maupun website-website ternama cukup dengan memasang link website, sedangkan alasan website yang berbasiskan multimedia karena multimedia bisa memberikan kesan website yang menarik secara visual dan mudah dimengerti tapi tetap lengkap akan informasi tentang perusahaan. Usulan ini ditanggapi dengan positif oleh pemilik perusahaan karena dapat menjawab semua permasalahan yang perusahaan hadapi saat ini. Penggunaan website berbasiskan multimedia karena isi dari website tidak banyak, yaitu halaman home yang berisi tentang pekerjaan jasa website yang sudah selesai, company profile yang berisi tentang sejarah perusahaan, news yang berisi tentang berita dari perusahaan, halaman services yang isinya tentang semua informasi tentang divisi yang ada didalam perusahaan, baik deskripsi maupun klien masing-masing divisi beserta tipe pekerjaan yang diterima dari klien dan tempat bagi klien yang sedang bekerja sama dengan perusahaan (klien dapat melihat perkembangan website milik klien yang sedang dikembangkan oleh perusahaan), halaman tempat pengunjung website untuk memberikan kritik, saran, maupun pertanyaan, dan gallery yang berisi portfolio

10 35 keseluruhan perusahaan, dikarenakan sedikitnya isi dari website yang akan dibuat, maka website ini harus menarik secara visual dan mudah dimengerti tapi tetap lengkap akan informasi tentang perusahaan dan juga memanjakan mereka. 3.4 Perancangan Struktur Menu Website untuk Klien/Pengunjung Pada bagian ini akan dibahas tentang perancangan struktur menu. Rancangan struktur menu untuk sistem dari website yang akan dibuat ada 2, pertama adalah struktur menu website untuk klien/pengunjung, yang menampilkan semua informasi tentang perusahaan, sedangkan yang kedua adalah struktur menu website untuk admin, tempat admin untuk menambah, merubah, maupun menghapus data yang ada didalam website. Gambar 3.2 Struktur Menu Website untuk Klien/Pengunjung 1. Menu Home Didalam menu Home ini terdapat informasi berupa animasi tentang pekerjaan perusahaan di bidang website yang sudah selesai dikerjakan oleh perusahaan.

11 36 2. Menu News Didalam menu News ini klien/pengunjung dapat melihat berita dari perusahaan mengenai apapun yang berubah atau bertambah didalam perusahaan (selesainya suatu pekerjaan, lowongan pekerjaan, dan lain-lain). 3. Menu Services Didalam menu Services ini klien/pengunjung dapat melihat informasi tentang divisi apa saja yang ada didalam perusahaan beserta deskripsinya dan klien mana saja yang sudah bekerja sama dengan perusahaan beserta tipe pekerjaan yang diterima dari klien. Pada menu ini juga terdapat fitur Order Tracking yang berguna untuk memberitahukan perkembangan pekerjaan yang sedang dikerjakan (klien mengisi Code Number, lalu muncul informasi tentang perkembangan website milik klien yang sedang dibuat oleh perusahaan). 4. Menu Showcase Didalam menu Showcase ini klien/pengunjung dapat melihat hasil pekerjaan dari semua bidang yang ada didalam perusahaan dalam bentuk flash image gallery. 5. Menu Contact Us Didalam menu Contact Us ini klien/pengunjung dapat mengirim langsung pesan pertanyaan, saran, kritik, dan lainnya tentang perusahaan maupun tentang website yang langsung masuk kedalam perusahaan. 6. Menu Company Profile Didalam menu Company Profile ini klien/pengunjung dapat melihat sejarah dan profil perusahaan.

12 Perancangan Struktur Menu Website untuk Admin Gambar 3.3 Struktur Menu Website untuk Admin 1. Menu Home Menu Home menggambarkan keseluruhan pilihan fungsi yang ada pada admin.

13 38 2. Menu Edit Page Di dalam menu Edit Page ini admin dapat merubah isi dari halaman Company Profile, Latest Creation, News, dan Services (pada halaman Services, terbagi menjadi 4 submenu, yaitu Art & Design, IT, Networking dan Order Tracking). 3. Menu Edit Showcase Didalam menu Edit Showcase ini admin dapat menambah (upload), merubah image description (edit), maupun menghapus image (delete) dari halaman Showcase. 4. Menu Logout Didalam menu Logout ini digunakan admin untuk keluar dari halaman admin dan langsung menuju ke halaman utama pada website. 3.6 Perancangan Struktur State Transition Diagram (STD) State Transition Diagram (STD) merupakan alat bantu modeling tool yang digunakan untuk membantu merancang layar tampilan. Perancangan State Transition Diagram (STD) merupakan kelanjutan dari perancangan struktur menu dan merupakan rincian dari diagram struktur menu yang sudah ada. Perancangan ini berfungsi untuk menggambarkan perubahan dari suatu state ke state lainnya dalam suatu sistem. Berikut ini adalah STD klien/pengunjung dan STD admin berbasiskan multimedia pada ADH Creative House, dapat dilihat pada Gambar 3.4 dan Gambar 3.5.

14 Gambar 3.4 STD klien/pengunjung 39

15 Gambar 3.5 STD Admin 40

16 Struktur Perancangan Layar Klien/Pengunjung Perancangan Layar Menu Home Layar menu ini merupakan bagian tampilan utama dari website ADH Creative House, di mana pada layar ini ditampilkan beberapa buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menuju ke halaman yang sesuai. Pada layar ini juga menampilkan Latest Website Creation yang diambil dari database. Rancangan layar menu utama dapat dilihat pada gambar berikut: Gambar 3.6 Rancangan Layar Home Spesifikasi Proses Menu Home: Modul Menu Home Tampilkan layar menu Home Mainkan musik Tampilkan animasi Lakukan jika

17 42 Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Perancangan Layar Menu News Pada layar ini menampilkan isi dari News yang diambil dari database. Pada layar ini juga ditampilkan beberapa buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menuju ke halaman yang sesuai. Rancangan layar menu News dapat dilihat pada gambar berikut:

18 43 Gambar 3.7 Rancangan Layar News Spesifikasi Proses Menu News: Modul Menu News Lakukan koneksi ke database bejodb Tampilkan layar menu News Mainkan musik Baca database bejodbb Baca tabel news Baca field newsbody dari tabel news diurutkan menurun Tampilkan isi record dari newsbody Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase

19 44 Lakukan modul menu Showcase Perancangan Layar Menu Company Profile Pada layar ini menampilkan isi dari Company Profile diambil dari database. Pada layar ini juga ditampilkan beberapa yang buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menuju ke halaman yang sesuai. Rancangan layar menu Company Profile dapat dilihat pada gambar berikut: Gambar 3.8 Rancangann Layar Company Profile Spesifikasi Proses Menu Company Profile: Modul Menu Company Profile Lakukan koneksi ke database bejodb Tampilkan layar menu Company Profile Mainkan musik Baca database bejodbb Baca tabel pages Baca field pagebody dari tabel pages

20 45 Tampilkan isi record dari pagebody id nomor 1 Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Perancangan Layar Menu Services Pada layar ini menampilkan isi dari Services dan Clients yang diambil dari database. Pada layar ini juga ditampilkan beberapa buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menuju ke halaman yang sesuai. Rancangan layar menu Services dapat dilihat pada gambar berikut:

21 46 Gambar 3.9 Rancangann Layar Services Spesifikasi Proses Menu Services: Modul Menu Services Lakukan koneksi ke database bejodb Tampilkan layar menu Services Mainkan musik Baca database bejodbb Baca tabel division Baca field division dari tabel division Tampilkan isi record dari division pada kolom Division Lakukan jika Klik divisi Art & Design padaa kolom division Tampilkan isii record description dari tabel division id nomor 1 Tampilkan isii record clients pada kolom clients dari tabel clients Jika klik salah satu isii kolom clients Tampilkan isi record description dari tabel clients sesuai dengan pilihan Klik divisi Networking pada kolom division Tampilkan isii record description dari tabel division id nomor 2 Tampilkan isii record clients pada kolom clients dari tabel clients Jika klik salah satu isii kolom clients

22 47 Tampilkan isi record description dari tabel clients sesuai dengan pilihan Klik divisi IT pada kolom division Tampilkan isi record description dari tabel division id nomor 3 Tampilkan isi record clients pada kolom clients dari tabel clients Jika klik salah satu isi kolom clients Tampilkan isi record description dari tabel clients sesuai dengan pilihan Klik tombol Submit Jika input code number valid Tampilkan isi record dari field content pada tabel track sesuai dengan code number (ID) yang diisi oleh user Jika input user tidak valid Tampilkan status di message box Perancangan Layar Menu Contact Us Pada layar ini terdapat form pengisian nama, , dan message. Form ini berguna untuk para klien/pengunjung yang ingin bertanya, memberikan saran, kritik, dan lainnya kepada perusahaan. Data akan langsung dikirim ke perusahaan setelah klien/pengunjung klik tombol Submit. Pada layar ini juga ditampilkan beberapa buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menuju ke halaman yang sesuai. Rancangan layar menu Company Profile dapat dilihat pada gambar berikut:

23 48 Gambar 3.10 Rancangan Layar Contactt Us Spesifikasi Proses Menu Contactt Us: Modul Menu Contact Us Tampilkan layar menu Contact Us Mainkan musik Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Jika klik submit Jika name tidak diisi Keluarkan pesan errorr Jika tidak diisi Keluarkan pesan errorr

24 49 Jika format salah Keluarkan pesan errorr Jika message tidak diisi Keluarkan pesan errorr Jika gender tidak dipilih Keluarkan pesan errorr Jika semua diisi lengkap Keluarkan pesan sukses Akhir jika Perancangan Layar Menu Showcase Pada layar ini terdapat 3 menu baru, yaitu Art Making, Art Design, dan Multimedia & IT beserta deskripsi masing-masing isii dari menu tersebut. Padaa layar ini juga ditampilkan beberapa buah menu utama, yaitu menu Home, Company Profile, News, Services, Contact Us, Showcase, dan pilihan on/off untuk suara. Masing-masing menu bila dipilih akan menujuu ke halaman yang sesuai. Rancangan layar menu Showcase dapat dilihat pada gambar Gambar Rancangann Layar Showcase

25 50 Spesifikasi Proses Menu Showcase: Modul Menu Showcase Tampilkan layar menu Showcase Mainkan musik Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Klik menu Art Making Lakukan modul menu Art Making Klik menu Art Design Lakukan modul menu Art Design Klik menu Multimedia & IT Lakukan modul menu Multimedia & IT Akhir lakukan jika 1. Perancangan Layar Menu Art Making Gallery Dibawah ini adalah rancangan layar menu Art Making Gallery yang berisi gambar-gambar/foto-foto hasil pekerjaan dan contoh dari produk yang ada pada perusahaan di bidang Art Making.

26 51 Gambar 3.12 Rancangan Layar Showcase-Art Making Gallery Spesifikasi Proses Menu untuk menu Art Making: Modul Menu Art Making Tampilkan layar menu Art Making Mainkan musik Tampilkan amgallery.swf Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Klik menu Art Making Lakukan modul menu Art Making Klik menu Art Design Lakukan modul menu Art Design Klik menu Multimedia & IT

27 52 Lakukan modul menu Multimedia & IT 2. Perancangan Layar Menu Art Design Gallery Dibawah ini adalah rancangan layar menu Art Design Gallery yang berisi gambar-gambar/foto-foto hasil pekerjaan dan contoh dari produk yang ada pada perusahaan di bidang Art Design. Gambar 3.13 Rancangan Layar Showcase-Art Design Gallery Spesifikasi Proses Menu untuk menu Art Design: Modul Menu Art Design Tampilkan layar menu Art Design Mainkan musik Tampilkan adgallery.swf Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News

28 53 Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Klik menu Art Making Lakukan modul menu Art Making Klik menu Art Design Lakukan modul menu Art Design Klik menu Multimedia & IT Lakukan modul menu Multimedia & IT 3. Perancangan Layar Menu Multimedia & IT Gallery Dibawah ini adalah rancangan layar menu Multimedia & IT Gallery yang berisi gambar-gambar/foto-foto hasil pekerjaan dan contoh dari produk yang adaa pada perusahaan di bidang Multimedia & IT. Gambar 3.14 Rancangan Layar Showcase-Multimedia & IT Gallery

29 54 Spesifikasi Proses Menu untuk menu Multimedia & IT: Modul Menu Multimedia & IT Tampilkan layar menu Multimedia & IT Mainkan musik Tampilkan migallery.swf Lakukan jika Klik menu On mainkan musik Klik menu Off Matikan musik Klik menu Home Lakukan modul menu Home Klik menu News Lakukan modul menu News Klik menu Company Profile Lakukan modul menu Company Profile Klik menu Services Lakukan modul menu Services Klik menu Contact Us Lakukan modul menu Contact Us Klik menu Showcase Lakukan modul menu Showcase Klik menu Art Making Lakukan modul menu Art Making Klik menu Art Design Lakukan modul menu Art Design Klik menu Multimedia & IT Lakukan modul menu Multimedia & IT 3.8 Struktur Perancangan Layar Admin Perancangan Layar Menu Login Pada layar login admin ini terdapat username dan password dimana digunakan hanya untuk user yang akan melakukan maintenance website ini. Jika username dan password benar maka akan lanjut ke proses berikutnya, namun jika salah maka akan muncul message yang akan memberikan peringatan bahwa username atau password yang diisi tidak valid. Pada layar ini terdapat 1 button yaitu submit untuk

30 55 melanjutkan ke proses berikutnya dan terdapat 1 link yaitu link untuk kembali ke layar Home. Berikut ini adalah rancangan layar menu Login: Gambar 3.15 Rancangan Layar Login Admin Spesifikasi Proses Menu Login Admin: Modul Menu Login Admin Tampilkan layar menu Login Admin Lakukan jika Klik tombol Submit Jika input user valid Lakukan modul Admin Home Jika input user tidak valid Tampilkan status di message box klik link klik disini untuk kembali ke homepage Lakukan modul menu Home Perancangan Layar Menu Admin Home Pada layar Menu Admin Home, akan terdapat 2 menu, yaitu Edit Page dan Edit Showcase. Masing-masing menu tersebut akan dibagi ke dalam beberapa submenu. Berikut ini adalah rancangan layar menu Admin Home:

31 56 Gambar 3.16 Rancangan Layar Admin Home Spesifikasi Proses Menu Admin Home: Modul menu Admin Home Tampilkan layar utama menu Admin Home Lakukan jika klik menu Edit Page Lakukan modul menu Edit Page Pilih menu Edit Showcase Lakukan modul menu Edit Showcase Perancangan Layar Menu Edit Page Pada layar Menu Edit Page, akan terdapat 4 menu baru, yaitu News, Company Profile, Latest Creation, dan Services. Menu-menu tersebut akan menuju ke halaman editor masing-masing sesuai dengan menu yang dipilih. Berikut ini adalah rancangan layar menu Edit Page:

32 57 Gambar 3.17 Rancangan Layar Edit Page Spesifikasi Proses Menu Edit Page: Modul menu Edit Page Tampilkan layar menu Edit Page Lakukan jika Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor Perancangan Layar Submenuu Edit Page News Editor Dibawah ini adalah rancangan layar menu News Editor. Pada layar menu ini, terdapat kolom untuk Add News dan News Editor yang memiliki tombol submit dan status yang akan muncul bila input sukses, dan juga ada kolom yang disebelah kirinya menampilkan

33 58 semua berita yang sudah ada didalam database dan disebelah kanannya masing-masing ada 2 link untuk edit dan delete berita tersebut. Dibawah ini adalah rancangan layar menu Edit Page - News Editor: Gambar 3.18 Rancangan Layar Edit Page - News Editor Spesifikasi Proses Menu Edit Page News Editor: Modul menu Edit Page - News Editor Lakukan koneksi ke database bejodb Tampilkan layar menu Edit Page - News Editor Baca database bejodbb Baca tabel news Baca field newsbody dari tabel news diurutkan menurun Tampilkan isi record dari newsbody Lakukan jika Klik tombol Submit yang ada dibawah kolom add news Jika input valid

34 59 Tambahkan berita yang baru ditambahkan kedalam tabel news Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik link edit pada kolom actions Tampilkan berita yang dipilih kedalam kolom news editor Klik tombol Submit yang ada dibawah kolom news editor Jika input valid Ubah berita yang dipilih menjadi berita yang baru diinput yang ada didalam tabel news Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik link delete pada kolom actions Hapus berita yang dipilih dari tabel news Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor Perancangan Layar Submenu Edit Page Company Profile Editor Dibawah ini adalah rancangan layar menu Company Profile Editor. Pada rancangan layar menu ini terdapat input text untuk mengisi teks baru untuk mengubah isi dari halaman Company Profile. Dibawah terdapat tombol Submit yang berfungsi untuk mengubah isi halaman dan menghasilkan status yang berisi tentang informasi sukses atau gagalnya edit untuk admin. Berikut ini adalah rancangan layar menu Edit Page Company Profile Editor:

35 60 Gambar 3.19 Rancangann Layar Edit Page - Company Profile Editor Spesifikasi Proses Menu Edit Page Company Profile Editor: Modul menu Edit Page - Company Profile Editor Lakukan koneksi ke database bejodb Tampilkan layar menu Edit Page - Company Profile Editor Baca database bejodbb Baca tabel pages Baca field pagebody dari tabel pages Tampilkan isi record dari pagebody id nomor 1 Lakukan jika Klik tombol Submit Jika input valid Ubah isi record menjadi teks yang baru diinput Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor

36 61 Perancangan Layar Submenuu Edit Page Home Editor Dibawah ini adalah rancangan layar menu Home Editor. Pada rancangan layar menu ini terdapat tombol browse untuk meng-upload file animasi yang ada padaa halaman sebuah file Flash kepada admin untuk home. Penulis memberikan dimodifikasi secara offline, setelah selesai dimodifikasi dan di-compile, admin dapat mengganti file animasi yang ada di halaman home dengan yang baru saja selesai dimodifikasi. Dibawah terdapat tombol Submit yang berfungsi untuk mengirim file yang sudah di-compile dan untuk menghasilkan status yang berisi tentang informasii sukses atau gagalnya edit untuk admin. Berikut ini adalah rancangan layar menu Edit Page Home Editor: Gambar 3.20 Rancangann Layar Edit Page Home Editor Spesifikasi Proses Menu Edit Page Home Editor: Modul menu Edit Page - Promotions Editor Tampilkan layar menu Edit Page - Home Editor Lakukan jika Klik tombol Submit Jika input valid (tidak kosong dan bentuk file adalah.swf) Ubah animasi home dengan animasi yang baru

37 62 Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor Perancangan Layar Submenu Edit Page Services Editor Dibawah ini adalah rancangan layar menu Edit Page - Services Editor Art & Design Editor sebagai contoh, karena baik pada halaman Art & Design Editor, Networking, maupun IT memiliki isi yang hampir sama, perbedaannya ada pada judul dan isi tiap kolom tergantung dari isi record pada tabel yang dipanggil. Pada rancangan layar menu ini terdapat input text untuk mengganti deskripsi divisi. Dibawahnya terdapat tombol submit editing yang berfungsi untuk mengubah isi halaman dan menghasilkan status yang berisi tentang informasi sukses atau gagalnya edit untuk admin. Lalu ada kolom clients yang menampilkan record yang diambil dari tabel database, disebelahnya terdapat link add new (berguna untuk menambah record), edit (berguna untuk memanggil record yang dipilih kedalam specialty editor box untuk diubah isinya) dan delete (berguna untuk menghapus record yang dipilih dari tabel database). Sedangkan

38 63 kolom clients description berguna untuk merubah deskripsi dari client yang dipilih, kolom ini terdapat tombol submit editing dibawahnya dan status yang akan muncul saat input sukses atau gagal. Berikut ini adalah rancangann layar menu Edit Page Services Editor Art & Design Editor: Gambar 3.21 Rancangan Layar Edit Page Services Editor Art & Design Editor Spesifikasi Proses Menu Edit Page Services Editor Art & Design Editor: Modul menu Edit Page - Services Editor Art & Design Editor Lakukan koneksi ke database bejodb Tampilkan layar menu Edit Page - Services Editor Art & Design Editor Baca database bejodbb Baca tabel division Baca field description dari tabel division Tampilkan record dari description pada kolom description Baca field clients dari tabel clients

39 Tampilkan record dari clients pada kolom clients Baca field description dari tabel clients Lakukan jika Klik tombol Submit editing yang ada dibawah kolom description Jika input valid Ubah deskripsi lama menjadi deskripsi yang baru diinput oleh admin Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik salah satu record yang ada pada kolom clients Tampilkan deskripsi dari record yang dipilih kedalam kolom client description Klik tombol Submit editing yang ada dibawah kolom client description Jika input valid Ubah deskripsi lama menjadi deskripsi yang baru diinput oleh admin Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik salah satu link edit pada kolom clients Tampilkan record yang dipilih kedalam kolom client editor box Klik tombol Submit yang ada dibawah kolom client editor box Jika input valid Ubah record yang dipilih menjadi teks yang baru diinput yang ada didalam tabel clients Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik link add new pada kolom clients Jika input pada kolom valid Tambah satu record pada tabel clients Klik salah satu link delete pada kolom clients Hapus clients yang dipilih beserta deskripsinya Klik submenu Art & Design Tampilkan modul Art & Design Editor Klik submenu Networking Tampilkan modul Networking Editor Klik submenu IT Tampilkan modul IT Editor Klik submenu Tracking Tampilkan modul Tracking Editor Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase 64

40 65 Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor Perancangan Layar Submenuu Edit Page Services Editor Tracking Dibawah Services Editor ini adalah rancangann layar menu Edit Page - Tracking. Kolom bagian kiri adalah isi record didalam field cnid, yaitu Code Number website yang sedang dalam pengembangan, sedangkan kolom bagian kanan adalah isi dari status perkembangan dari website itu sendiri. Berikut ini adalah rancangan layar menu Edit Page Services Editor Tracking: Gambar Rancangann Layar Edit Page Services Editor - Tracking Spesifikasi Proses Menu Edit Page Services Editor Tracking:

41 66 Modul menu Edit Page - Services Editor Tracking Lakukan koneksi ke database bejodb Tampilkan layar menu Edit Page Services Editor - Tracking Baca database bejodb Baca tabel track Baca field cnid dari tabel track Tampilkan isi record dari field cnid Lakukan jika Klik salah satu Code Number Baca field content dari tabel track Tampilkan isi record dari content sesuai dengan kode yang dipilih Jika input valid Ubah isi record content menjadi teks yang baru diinput Tampilkan status sukses Jika input tidak valid Tampilkan status gagal Klik submenu Art & Design Tampilkan modul Art & Design Editor Klik submenu Networking Tampilkan modul Networking Editor Klik submenu IT Tampilkan modul IT Editor Klik submenu Tracking Tampilkan modul Tracking Editor Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu News Tampilkan modul Edit Page News Editor Klik menu Company Profile Tampilkan modul Edit Page Company Profile Editor Klik menu Spotlight Tampilkan modul Edit Page Latest Creation Editor Klik menu Services Tampilkan modul Edit Page Services Editor Perancangan Layar Menu Edit Showcase Pada layar Menu Edit Showcase, akan terdapat 3 menu baru, yaitu Art Making, Art Design, dan Multimedia & IT. Masing-masing menu

42 67 tersebut akan dibagii ke dalam beberapa submenu. Berikut ini adalah rancangan layar menu Edit Showcase: Gambar Rancangan Layar Edit Showcase Spesifikasi Proses Menu Edit Showcase: Modul menu Edit Showcase Tampilkan layar menu Edit Showcase Lakukan jika Klik menu Edit Page Tampilkan modul Edit Page Klik menu Edit Showcase Tampilkan modul Edit Showcase Klik menu Art Making Tampilkan modul Edit Showcase Art Making Klik menu Art Design Tampilkan modul Edit Showcase Art Design Klik menu Multimedia & IT Tampilkan modul Edit Showcase Multimedia & IT Perancangan Layar Submenuu Edit Showcase Dibawah ini adalah rancangan layar menu Edit Showcase - Art Making sebagai contoh, karena baik Edit Showcase - Art Making, Edit Showcase - Art Design, maupun Edit Showcase - Multimedia & IT

43 68 memiliki rancangan layar Submenu Edit Showcase yang sama, hanya judul halamannyaa saja yang berbeda, akan terdapat 3 submenu, yaitu Upload, Edit, dan Delete. Masing-masing menu tersebut akan dibagi ke dalam beberapa submenu. Berikut ini adalah rancangan layar menu Edit Showcase - Art Making: Gambar 3.24 Rancangan Layar Edit Showcase Art Making Spesifikasi Proses Menu Edit Showcase Art Making: Modul menu Edit Showcase Art Making Tampilkan layar menu Edit Showcase Art Making Lakukan jika Klik menu Edit Page Lakukan modul menu Edit Page Klik menu Edit Showcase Lakukan modul menu Edit Showcase Klik menu Art Making Lakukan modul menu Edit Showcase Art Making Klik menu Art Design Lakukan modul menu Edit Showcase Art Design Klik menu Multimedia & IT Lakukan modul menu Edit Showcase Multimedia & IT Klik tombol Upload Lakukan modul menu Edit Showcase Art Making Upload Image Klik tombol Edit

44 69 Lakukan modul menu Edit Showcase Art Making Edit Description Klik tombol Delete Lakukan modul menu Edit Showcase Art Making Deletee Image a. Perancangan Layar Menu Upload Image Dibawah ini adalah rancangan layar menu Edit Showcase Art Making Upload Image sebagai contoh, karena baik Edit Showcase Art Making Upload Image, Edit Showcase Art Design Upload Image, maupun Edit Showcase Multimedia & IT Upload Image memiliki rancangan layar Upload Image yang sama, hanya judul halamannya saja yang berbeda. Pada rancangan layar menu Description, ini, terdapat form pengisian Image ID, Image dan Upload Image untuk diisi oleh admin. Berikut ini adalah rancangan layar menu Edit Showcase Art Making Upload Image: Gambar 3.25 Rancangan Layar Edit Showcase Art Making Upload Image

45 70 Spesifikasi Proses Menu Edit Showcase Art Making Upload Image: Modul menu Edit Showcase Art Making Upload Image Tampilkan layar menu Edit Showcase Art Making Upload Image Lakukan jika input text Image ID input text Image Description input text Upload Image Pilih tombol Browse Pilih tombol Submit Tampilkan Image ID dan Image Description yang baru di upload pada tabel yang berada dibawah Lakukan jika Klik menu Edit Page Lakukan modul menu Edit Page Klik menu Edit Showcase Lakukan modul menu Edit Showcase Klik menu Art Making Lakukan modul menu Edit Showcase Art Making Klik menu Art Design Lakukan modul menu Edit Showcase Art Design Klik menu Multimedia & IT Lakukan modul menu Edit Showcase Multimedia & IT b. Perancangan Layar Menu Edit Image Description Dibawah ini adalah rancangan layar menu Edit Showcase Art Making Edit Image Description sebagai contoh, karena baik Edit Showcase Art Making Edit Image Description, Edit Showcase Art Design Edit Image Description, maupun Edit Showcase Multimedia & IT Edit Image Description memiliki rancangan layar Edit Description yang sama, hanya judul halamannya saja yang berbeda. Pada rancangan layar menu ini, terdapat form pengisian Image ID dan Image Description untuk

46 71 diisi oleh admin. Berikut ini adalah rancangan layar menu Edit Showcase Art Making Edit Image Description: Gambar 3.26 Rancangan Layar Edit Showcase Art Making Edit Image Description Spesifikasi Proses Menu Edit Showcase Art Making Edit Image Description: Modul menu Edit Showcase Art Making Edit Image Description Tampilkan layar menu Edit Showcase Art Making Edit Image Description Lakukan jika input text Image ID input text Image Description Pilih tombol Submit Tampilkan Image Description yang baru diubah pada tabel yang berada dibawah Lakukan jika Klik menu Edit Page Lakukan modul menu Edit Page Klik menu Edit Showcase Lakukan modul menu Edit Showcase Klik menu Art Making Lakukan modul menu Edit Showcase Art Making Klik menu Art Design Lakukan modul menu Edit Showcase Art Design

47 72 Klik menu Multimedia & IT Lakukan modul menu Edit Showcase Multimedia & IT c. Perancangan Layar Menu Delete Image Dibawah ini adalah rancangan layar menu Edit Showcase Art Making Delete Image sebagai contoh, karena baik Edit Showcase Art Making Delete Image, Edit Showcase Art Design Delete Image, maupun Edit Showcase Multimedia & IT Delete Image memiliki rancangan layar Edit Description yang sama, hanya judul halamannya saja yang berbeda. Pada rancangan layar menu ini, terdapatt form pengisian Image ID, Image Description, dan Upload Image untuk diisi oleh admin. Berikut ini adalah rancangan layar Making Delete Image: menu Edit Showcase Art Gambar 3.27 Rancangann Layar Edit Showcase Art Making Delete Image

48 73 Spesifikasi Proses Menu Edit Showcase Art Making Delete Image: Modul menu Edit Showcase Art Making Delete Image Tampilkan layar menu Edit Showcase Art Making Delete Image Lakukan jika input text Image ID Pilih tombol Submit Tampilkan Image ID dan Image Description yang baru setelah menghapus gambar yang dituju pada tabel yang berada dibawah Lakukan jika Klik menu Edit Page Lakukan modul menu Edit Page Klik menu Edit Showcase Lakukan modul menu Edit Showcase Klik menu Art Making Lakukan modul menu Edit Showcase Art Making Klik menu Art Design Lakukan modul menu Edit Showcase Art Design Klik menu Multimedia & IT Lakukan modul menu Edit Showcase Multimedia & IT 3.9 Perancangan Basis Data Data-data yang akan diolah menjadi informasi akan ditampung di dalam tabel-tabel yang sesuai dengan fungsinya. Di bawah ini akan dijelaskan mengenai spesifikasi tabel dari tabel tersebut. Tabel Pages Nama file: bejodb.sql Nama tabel: pages Primary Key: id

49 74 Tabel 3.1 Tabel Pages Nama Field Tipe Data Panjang Field Keterangan id numeric 11 Row id pagetitle char 255 Judul halaman pagebody text - Isi dari halaman Tabel News Nama file: bejodb.sql Nama tabel: news Primary Key: nid Tabel 3.2 Tabel News Nama Field Tipe Data Panjang Field Keterangan nid numeric 11 Row id newsbody text - Isi dari halaman Tabel division Nama file: bejodb.sql Nama tabel: division Primary Key: did Tabel 3.3 Tabel Division Nama Field Tipe Data Panjang Field Keterangan did numeric 11 Row id division text - Nama divisi description text - Deskripsi dari divisi Tabel track Nama file: bejodb.sql Nama tabel: track Primary Key: did

50 75 Tabel 3.4 Tabel Track Nama Field Tipe Data Panjang Field Keterangan cnid numeric 11 Row id content text - Isi dari order tracking Tabel clients Nama file: bejodb.sql Nama tabel: clients Primary Key: cid Tabel 3.5 Tabel Clients Nama Field Tipe Data Panjang Field Keterangan cid numeric 11 Row id clients text - Nama klien description text - Deskripsi dari divisi type text - Tipe pekerjaan, isi, dan link website pekerjaan (jika ada) Tabel amgall Nama file: amgall.xml Primary Key: pic id Tabel 3.6 Tabel amgall Nama Field Tipe Data Panjang Field Keterangan Pic id int 3 Row id image text - Lokasi gambar ukuran asli thumbnail text - Lokasi gambar ukuran diperkecil caption text - Deskripsi dari gambar Tabel adgall Nama file: adgall.xml Primary Key: pic id

51 76 Tabel 3.7 Tabel adgall Nama Field Tipe Dataa Pic id int image text thumbnail text caption text Panjang Field Keterangan Row id Lokasi gambar ukuran asli Lokasi gambar ukuran diperkecil Deskripsi dari gambar Tabel migall Nama file: migall.xml Primary Key: pic id Tabel 3.8 Tabel migall Nama Field Tipe Dataa Pic id int image text thumbnail text caption text Panjang Field Keterangan Row id Lokasi gambar ukuran asli Lokasi gambar ukuran diperkecil Deskripsi dari gambar 3.10 ERD (Entity Relationship Diagram) Entity Relationship diagram digunakan untuk menggambarkan hubungan antar entity. Tabel diatas memiliki relationship sebagai berikut: Gambar 3.28 ERD