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 symbol ‘@’ yang sangat kuat eratnya dengan dunia IT. ‘@’ 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.
3.1.1
Misi Perusahaan •
Menjadi perusahaan terdepan di bidang Web Services.
•
Menjadi perusahaan terdepan di bidang Application & System Development di Indonesia.
26
27 •
Memberikan layanan terbaik di bidangnya dan kualitas desain profesional.
3.1.2
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 3.2.1 Diagram Struktur Organisasi Perusahaan Adapun diagram struktur organisasi perusahaan seperti pada gambar dibawah:
28
Gambar 3.11 Struktur orgaanisasi perusahhaan
3.2.2 2 Pembagiian Tugas D Dibawah ini adalah a pembbagian tugas masing-masing divisi secara s rinci: 1. IT Exxecutive a. Menyusun M strrategi perusaahaan. b. Menyusun M strrategi pemassaran. c. Menentukan M d desain yang akan ditawaarkan kepadaa klien. d. Menentukan M k konsep prodduk. e. Menentukan M S SOP (Standaard Operatinng Procedurres) perusahaaan. 2. Finannce, Marketiing, and Adm min a. Membukukan M n keuangan perusahaan. p b. Membuat M lapooran keuanggan.
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.
30 3.3
Analisis Permasalahan 3.3.1
Analisis Sistem Pemasaran yang Berjalan Sistem pemasaran yang dilakukan oleh ADH Creative House sekarang adalah dengan menggunakan social networking website (www.facebook.com dan www.twitter.com), 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).
31 3.3.2
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
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
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 email perusahaan, dan yang terakhir adalah halaman Showcase yang berisi portfolio semua divisi yang ada diperusahaan dalam bentuk flash image gallery.
3.3.3
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.
34 3.3.4
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
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.
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 e-mail perusahaan. 6. Menu Company Profile Didalam menu Company Profile ini klien/pengunjung dapat melihat sejarah dan profil perusahaan.
37 33.5
Pera ancangan Sttruktur Men nu Website untuk Adm min
Gambar 3.3 3 Struktur Meenu Website unntuk Admin
1. Menu M Home Menuu Home menggambarkaan keseluruhhan pilihan fungsi yangg ada pada p admin.
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.
39
Gamba ar 3.4 STD klien/P Pengunjung
40
Gamb bar 3.5 STD Admin n
41 33.7
Stru uktur Perancangan Layyar Klien/Peengunjung 3.7.1 1 Perancan ngan Layarr Menu Hom me Layar menu ini merupakkan bagian tampilan t utaama dari weebsite p layar inni ditampilkaan beberapa buah ADH Creeative Housee, di mana pada menu uttama, yaitu menu Hom me, Companny Profile, News, Servvices, Contact Us, Showcaase, dan piliihan on/off untuk suaraa. Masing-m masing menu billa dipilih akkan menuju ke halamann yang sesuaai. Pada layar ini juga mennampilkan Latest L Website Creation yang diambbil dari dataabase. Rancangaan layar mennu utama dappat dilihat paada gambar berikut:
Gam mbar 3.6 Ranccangan Layar Home H
Spesifikaasi Proses Menu Home: Modul Menu M Home Tampilkaan layar mennu Home Mainkan musik Tampilkaan animasi Lakukan jika
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 Akhir jika
3.7.2
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:
43
Gam mbar 3.7 Ranccangan Layar News N
Spesifikaasi Proses Menu News: Modul Menu M News Lakukan koneksi ke database d bejodb Tampilkaan layar mennu News Mainkan musik Baca dataabase bejodbb Baca tabeel news Baca fieldd newsbody dari tabel neews diurutkaan menurun Tampilkaan isi recordd dari newsboody Lakukan jika Klik menu m “On” m mainkan musik Klik menu m “Off” M Matikan musiik Klik menu m “Home” Lakukan moddul menu Hoome m “Newss” Klik menu Lakukan moddul menu News Klik menu m “Comppany Profilee” Lakukan moddul menu Coompany Proffile m “Serviices” Klik menu Lakukan moddul menu Serrvices Klik menu m “Conttact Us” Lakukan moddul menu Coontact Us Klik menu”Show m case”
44 Lakukan moddul menu Shoowcase Akhir jikka
3.7.3 3 Perancan ngan Layarr Menu Com mpany Profille Paada layar ini i menamppilkan isi dari d Company Profile yang diambil dari d databasse. Pada layyar ini jugaa ditampilkan beberapa buah menu uttama, yaitu menu Hom me, Companny Profile, News, Servvices, Contact Us, Showcaase, dan piliihan on/off untuk suaraa. Masing-m masing menu bila dipilih akaan menuju ke k halaman yang y sesuai. Rancangan layar mbar berikuut: menu Company Proffile dapat diliihat pada gam
Gambar 3.8 Rancangann Layar Compaany Profile
Spesifikaasi Proses Menu Companny Profile: Modul Menu M Compaany Profile Lakukan koneksi ke database d bejodb Tampilkaan layar mennu Company Profile Mainkan musik Baca dataabase bejodbb Baca tabeel pages Baca fieldd pagebody dari tabel paages
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 Akhir jika
3.7.4
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:
46
Gambar 3.9 Rancangann Layar Servicees
Spesifikaasi Proses Menu Servicess: M Servicces Modul Menu Lakukan koneksi ke database d bejodb Tampilkaan layar mennu Services Mainkan musik Baca dataabase bejodbb Baca tabeel division Baca fieldd division daari tabel diviision Tampilkaan isi recordd dari division pada kolom m Division Lakukan jika d Art & Design padaa kolom diviision Klik divisi Tampilkan isii record desccription darii tabel divisioon id nomorr 1 Tampilkan isii record clients pada kollom clients dari d tabel clieents Jika klik salah s satu isii kolom cliennts Tampiilkan isi reccord descripption dari tabbel clients sesuai s dengaan pilihan Akhir jikaa Klik divisi d Netwoorking pada kolom k divisiion Tampilkan isii record desccription darii tabel divisioon id nomorr 2 Tampilkan isii record clients pada kollom clients dari d tabel clieents Jika klik salah s satu isii kolom cliennts
47 Tampilkan isi record description dari tabel clients sesuai dengan pilihan Akhir jika 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 Akhir jika 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 Akhir jika
3.7.5
Perancangan Layar Menu Contact Us Pada layar ini terdapat form pengisian nama, e-mail, dan message. Form ini berguna untuk para klien/pengunjung yang ingin bertanya, memberikan saran, kritik, dan lainnya kepada perusahaan. Data akan langsung dikirim ke e-mail 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:
48
Gambar 3.110 Rancangan Layar Contactt Us
Spesifikaasi Proses Menu Contactt Us: Modul Menu M Contacct Us Tampilkaan layar mennu Contact Us U Mainkan musik Lakukan jika m “On” Klik menu m mainkan musik Klik menu m “Off” M Matikan musiik Klik menu m “Home” Lakukan moddul menu Hoome Klik menu m “Newss” Lakukan moddul menu News Klik menu m “Comppany Profilee” Lakukan moddul menu Coompany Proffile Klik menu m “Serviices” Lakukan moddul menu Serrvices Klik menu m “Conttact Us” Lakukan moddul menu Coontact Us Klik menu”Show m case” Lakukan moddul menu Shoowcase Jika klik k submit Jiika name tidaak diisi Keluarkann pesan errorr Jiika E-Mail tiidak diisi Keluarkann pesan errorr
49 Jiika format E-Mail salah Keluarkann pesan errorr Jiika message tidak diisi Keluarkann pesan errorr Jiika gender tidak dipilih Keluarkann pesan errorr Jiika semua diiisi lengkap Keluarkann pesan suksses Akhirr jika Akhir jikka
6 Perancan ngan Layarr Menu Show wcase 3.7.6 Paada layar ini terdapat 3 menu baru, yaitu Art A Makingg, Art Design, dan d Multimeedia & IT beserta b deskkripsi masingg-masing isii dari menu terrsebut. Padaa layar ini juga ditamppilkan beberapa buah menu m utama, yaaitu menu Home, H Company Profile, News, Servvices, Contacct Us, Showcasee, dan pilihhan on/off untuk u suara. Masing-m masing menuu bila dipilih akkan menujuu ke halamaan yang sessuai. Rancanngan layar menu m Showcasee dapat dilihhat pada gam mbar 3.11.
Gambar 3..11 Rancangann Layar Showcaase
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.
51
Gam mbar 3.12 Ranncangan Layarr Showcase-Artt Making Galleery
Spesifikaasi Proses Menu untuk menu m Art Maaking: Modul Menu M Art Making Ma Tampilkaan layar mennu Art Makinng Mainkan musik Tampilkaan amGallery ry.swf Lakukan jika m “On” Klik menu m mainkan musik Klik menu m “Off” M Matikan musiik Klik menu m “Home” Lakukan moddul menu Hoome Klik menu m “Newss” Lakukan moddul menu News m “Comppany Profilee” Klik menu Lakukan moddul menu Coompany Proffile Klik menu m “Serviices” Lakukan moddul menu Serrvices Klik menu m “Conttact Us” Lakukan moddul menu Coontact Us m case” Klik menu”Show Lakukan moddul menu Shoowcase Klik menu”Art m M Making” Lakukan moddul menu Artt Making m D Design” Klik menu”Art Lakukan moddul menu Artt Design m media & IT”” Klik menu”Multi
52 Lakukan moddul menu Muultimedia & IT I Akhir jikka
2. Peranncangan Layyar Menu Artt Design Galllery D Dibawah ini adalah ranccangan layaar menu Artt Design Gaallery yang berisi gambbar-gambar/ffoto-foto hassil pekerjaann dan contohh dari produuk yang ada pada perusaahaan di bidaang Art Desiggn.
Gambar 3.13 Ranncangan Layarr Showcase-Arrt Design Galleery
Spesifikaasi Proses Menu untuk menu m Art Dessign: Modul Menu M Art Deesign Tampilkaan layar mennu Art Desiggn Mainkan musik Tampilkaan adGalleryy.swf Lakukan jika m “On” Klik menu m mainkan musik Klik menu m “Off” M Matikan musiik Klik menu m “Home” Lakukan moddul menu Hoome Klik menu m “Newss” Lakukan moddul menu News
53 Klik menu m “Comppany Profilee” Lakukan moddul menu Coompany Proffile Klik menu m “Serviices” Lakukan moddul menu Serrvices Klik menu m “Conttact Us” Lakukan moddul menu Coontact Us m case” Klik menu”Show Lakukan moddul menu Shoowcase Klik menu”Art m M Making” Lakukan moddul menu Artt Making Klik menu”Art m D Design” Lakukan moddul menu Artt Design m media & IT”” Klik menu”Multi Lakukan moddul menu Muultimedia & IT I Akhir jikka
3. Peranncangan Layyar Menu Muultimedia & IT I Gallery D Dibawah ini adalah ranncangan layyar menu Multimedia M & IT Galleery yang beerisi gambaar-gambar/foto-foto hasiil pekerjaann dan contooh dari produuk yang adaa pada perussahaan di biidang Multim media & IT.
Gamb bar 3.14 Rancaangan Layar Shhowcase-Multim media & IT Gaallery
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 Akhir jika
3.8
Struktur Perancangan Layar Admin 3.8.1
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
55 melanjutkkan ke prosses berikutnyya dan terddapat 1 link yaitu link untuk u kembali ke k layar Hom me. Berikut ini i adalah raancangan layyar menu Loggin:
Gambar 3.15 Rancangaan Layar Loginn Admin
Spesifikaasi Proses Menu Login Admin: A Modul Menu M Login Admin Tampilkaan layar mennu Login Adm min Lakukan jika t “Subbmit” Klik tombol Jiika input useer valid Lakukan modul m Admiin Home Jiika input useer tidak validd Tampilkann status di message m box klik link “klik dissini untuk keembali ke hoomepage” Lakukan moddul menu Hoome Akhir jikka
2 Perancan ngan Layarr Menu Adm min Home 3.8.2 Paada layar Menu M Admin Home, akann terdapat 2 menu, yaituu Edit Page dann Edit Show wcase. Masinng-masing menu m tersebuut akan dibaagi ke dalam beeberapa subbmenu. Berikut ini adalah rancanngan layar menu m Admin Home: H
56
Gambar 3.16 Rancangaan Layar Admiin Home
Spesifikaasi Proses Menu Admin Home: H Modul menu m Admin n Home Tampilkaan layar utam ma menu Addmin Home Lakukan jika kllik menu “Eddit Page” Lakukkan modul menu m Edit Paage Piilih menu “E Edit Showcasse” Lakukkan modul menu m Edit Showcase Akhir jikka
3.8.3 3 Perancan ngan Layarr Menu Editt Page Paada layar Menu M Edit Page, P akan terdapat t 4 menu m baru, yaitu News, Company C Prrofile, Latesst Creation, dan Servicces. Menu-m menu tersebut akan menuju ke halam man editor masing-masin m ng sesuai deengan B ini addalah rancanggan layar meenu Edit Pagge: menu yanng dipilih. Berikut
57
Gambaar 3.17 Rancanngan Layar Ediit Page
Spesifikaasi Proses Menu Edit Pagge: m Edit Paage Modul menu Tampilkaan layar mennu Edit Pagee Lakukan jika Klik menu m “Edit Page” P Tampilkan modul Edit Paage m “Edit Showcase” S Klik menu Tampilkan modul Edit Shhowcase Klik menu m “Newss” Tampilkan modul Edit Paage – News Editor E Klik menu m “Comppany Profilee” Tampilkan modul Edit Paage – Compaany Profile Editor E Klik menu m “Spotllight” Tampilkan modul Edit Paage – Latest Creation Edditor Klik menu m “Serviices” Tampilkan modul Edit Paage – Servicees Editor Akhir jikka •
Peranncangan Layyar Submenuu Edit Page – News Editoor D Dibawah ini adalah ranccangan layaar menu Neews Editor. Pada layar menu ini, terdapat kollom untuk Add A News dan d News Editor E m bila input yang memiliki toombol submiit dan status yang akan muncul m yang diseebelah kirinnya menamppilkan suksees, dan jugaa ada kolom
58 semua berita yaang sudah ada didalaam databasee dan diseebelah kanannnya masingg-masing adda 2 link untuk u edit dan d delete berita b tersebbut. Dibawahh ini adalah rancangan layar l menu Edit E Page - News Editoor:
Gam mbar 3.18 Ranncangan Layar Edit Page - Neews Editor
Spesifikaasi Proses Menu Edit Pagge – News Editor: E m Edit Paage - News Editor E Modul menu Lakukan koneksi ke database d bejodb Tampilkaan layar mennu Edit Pagee - News Ediitor Baca dataabase bejodbb Baca tabeel news Baca fieldd newsbody dari tabel neews diurutkaan menurun Tampilkaan isi recordd dari newsboody Lakukan jika Klik tombol t “Subbmit” yang ada a dibawah kolom add news n Jiika input valid
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 Akhir jika •
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:
60
Gambar 3.19 Rancangann Layar Edit Paage - Companyy Profile Editor
Spesifikaasi Proses Menu Edit Pagge – Compaany Profile Editor: E m Edit Paage - Compaany Profile Editor E Modul menu Lakukan koneksi ke database d bejodb Tampilkaan layar mennu Edit Pagee - Companyy Profile Edittor Baca dataabase bejodbb Baca tabeel pages Baca fieldd pagebody dari tabel paages Tampilkaan isi recordd dari pageboody id nomor 1 Lakukan jika Klik tombol t “Subbmit” Jiika input valid Ubah isi record r menjaadi teks yangg baru diinpuut Tampilkann status suksses Jiika input tidaak valid Tampilkann status gagaal Klik menu m “Edit Page” P Tampilkan modul Edit Paage Klik menu m “Edit Showcase” S Tampilkan modul Edit Shhowcase m “Newss” Klik menu Tampilkan modul Edit Paage – News Editor E Klik menu m “Comppany Profilee” Tampilkan modul Edit Paage – Compaany Profile Editor E Klik menu m “Spotllight” Tampilkan modul Edit Paage – Latest Creation Edditor Klik menu m “Serviices” Tampilkan modul Edit Paage – Servicees Editor Akhir jikka
61 •
Peranncangan Layyar Submenuu Edit Page – Home Edittor D Dibawah ini adalah ranccangan layaar menu Hoome Editor. Pada rancaangan layar menu m ini terddapat tombool browse unntuk meng-uppload file animasi a yanng ada padaa halaman home. Penuulis membeerikan sebuaah file Flashh kepada addmin untuk dimodifikaasi secara offfline, setelaah selesai diimodifikasi dan di-comppile, admin dapat menggganti file annimasi yangg ada di halaaman home dengan d yangg baru saja seelesai dimoddifikasi. Dibbawah terdappat tombol Submit S yangg berfungsi untuk u menggirim file yang sudah dii-compile daan untuk menghasilkan status s yang berisi tentanng informasii sukses atauu gagalnya edit e untuk addmin. Berikkut ini adalahh rancangan layar menu Edit Page – Home Editoor:
Gambar 3.20 Rancangann Layar Edit Paage – Home Edditor
Spesifikaasi Proses Menu Edit Pagge – Home Editor: E Modul menu m Edit Paage - Promootions Editorr Tampilkaan layar mennu Edit Pagee - Home Ediitor Lakukan jika Klik tombol t “Subbmit” Jiika input valid (tidak kossong dan benntuk file adaalah .swf) Ubah anim masi home dengan d animasi yang barru
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 Akhir jika •
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
63 kolom m clients desscription berrguna untuk merubah deskripsi dari client yang dipilih, kollom ini terddapat tomboll submit ediiting dibawaahnya a muncull saat input sukses s atau gagal. g Berikkut ini dan status yang akan A & adalaah rancangann layar mennu Edit Pagee – Servicess Editor – Art Desiggn Editor:
Ga ambar 3.21 Raancangan Layarr Edit Page – Services S Editorr – Art & Desiggn Editor
Spesifikaasi Proses Menu Edit Pagge – Servicees Editor – Art A & Designn Editor: Modul menu m Edit Paage - Services Editor – Art A & Desiggn Editor Lakukan koneksi ke database d bejodb Tampilkaan layar mennu Edit Pagee - Services Editor E – Art & Design Editor E Baca dataabase bejodbb Baca tabeel division Baca fieldd descriptionn dari tabel division d Tampilkaan record daari descriptioon pada koloom descriptioon Baca fieldd clients darri tabel clientts
64 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
65 Klik menu m “Newss” Tampilkan modul Edit Paage – News Editor E Klik menu m “Comppany Profilee” Tampilkan modul Edit Paage – Compaany Profile Editor E Klik menu m “Spotllight” Tampilkan modul Edit Paage – Latest Creation Edditor m “Serviices” Klik menu Tampilkan modul Edit Paage – Servicees Editor Akhir jikka •
Peranncangan Layyar Submenuu Edit Page – Services Edditor – Traccking Dibawah ini adalahh rancangann layar mennu Edit Paage Servicces Editor – Trackingg. Kolom baagian kiri adalah a isi record r didalaam field cniid, yaitu Coode Number website yanng sedang dalam d pengeembangan, sedangkan s k kolom bagiann kanan adalah isi dari status s perkeembangan daari website itu i sendiri. Berikut B ini adalah a rancaangan layar menu Edit Page P – Serviices Editor – Tracking:
Gambar 3..22 Rancangann Layar Edit Paage – Services Editor - Trackking
Spesifikaasi Proses Menu Edit Pagge – Servicees Editor – Tracking: T
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 Akhir jika
3.8.4
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
67 tersebut akan dibagii ke dalam beberapa submenu. s Beerikut ini adalah a rancangaan layar menuu Edit Show wcase:
Gambar 3.233 Rancangan Layar L Edit Show wcase
Spesifikaasi Proses Menu Edit Shoowcase: m Edit Sh howcase Modul menu Tampilkaan layar mennu Edit Show wcase Lakukan jika Klik menu m “Edit Page” P Tampilkan modul Edit Paage Klik menu m “Edit Showcase” S Tampilkan modul Edit Shhowcase m “Art Making” M Klik menu Tampilkan modul Edit Shhowcase – Arrt Making m “Art Design” D Klik menu Tampilkan modul Edit Shhowcase – Arrt Design Klik menu m “Multimedia & IT T” Tampilkan modul Edit Shhowcase – Multimedia M & IT Akhir jikka •
Peranncangan Layyar Submenuu Edit Showccase D Dibawah ini adalah ranccangan layarr menu Editt Showcase - Art Makinng sebagai contoh, c karenna baik Edit Showcase - Art Makingg, Edit Show wcase - Art Design, D mauupun Edit Showcase S - Multimedia M & IT
68 memiiliki rancanggan layar Suubmenu Edit Showcase yang y sama, hanya h judul halamannyaa saja yang berbeda, akaan terdapat 3 submenu, yaitu M ng menu terssebut akan dibagi d Uploaad, Edit, dann Delete. Masing-masin ke daalam beberappa submenu. Berikut ini adalah rancaangan layar menu m Edit Showcase S - Art A Making:
Gamb bar 3.24 Rancaangan Layar Eddit Showcase – Art Making
Spesiifikasi Proses Menu Editt Showcase – Art Makingg: Moduul menu Editt Showcase – Art Makin ng Tamppilkan layar menu m Edit Showcase S – Art A Making Lakukan jika Klik menuu “Edit Pagee” Lakukan modul m menu Edit Page Klik menuu “Edit Show wcase” Lakukan modul m menu Edit Showcaase Klik menuu “Art Makinng” Lakukkan modul menu m Edit Showcase – Arrt Making Klik menuu “Art Desiggn” Lakukkan modul menu m Edit Showcase – Arrt Design Klik menuu “Multimeddia & IT” Lakukkan modul menu m Edit Showcase – Multimedia M & IT Klik tombbol “Upload”” Lakukkan modul menu m Edit Showcase – Arrt Making – Uploaad Image Klik tombbol “Edit”
69 Lakukkan modul menu m Edit Showcase – Arrt Making – Edit Descrription Klik tombbol “Delete” Lakukkan modul menu m Edit Showcase – Arrt Making – Deletee Image Akhir jikaa
a. Peerancangan Layar Menuu Upload Imaage Dibawah ini adalah rancangan r layar menu Edit E Showcaase – Art Making – Upload Image Im sebaggai contoh, karena k baikk Edit Shhowcase – Art A Making – Upload Image, I Edit Showcase – Art D Design – Uplload Image, maupun Eddit Showcasee – Multimeddia & IT T – Upload Image I memiiliki rancanggan layar Uppload Image yang saama, hanya judul j halamaannya saja yang y berbedaa. Pada rancaangan laayar menu ini, terdappat form peengisian Im mage ID, Image I D Description, dan Uploadd Image untuuk diisi olehh admin. Beerikut inni adalah ranncangan layar menu Eddit Showcasee – Art Makking – Up Upload Imagee:
Gambar 3.225 Rancangan Layar Edit Shoowcase – Art Making M – Uploaad Image
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 Akhir jika 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 Akhir jika
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
71 diiisi oleh adm min. Berikuut ini adalahh rancangan layar menuu Edit Shhowcase – Art A Making – Edit Imagee Descriptionn:
Ga ambar 3.26 Raancangan Layarr Edit Showcasse – Art Makingg – Edit Imagee Description
Sppesifikasi Prroses Menu Edit E Showcaase – Art Maaking – Edit Im mage Descrip iption: Modul menu M u Edit Showccase – Art Making M – Eddit Image D Description Tampilkan layyar menu Eddit Showcasee – Art Makiing – Edit Im mage D Description Lakukan jika input text Image ID input text Image Desccription t “Submit” Pilih tombol Taampilkan Image Descripption yang baaru diubah pada p tabbel yang berrada dibawahh A Akhir jika Lakukan jika m “Edit Page” P Klik menu Lakukan modul m menu Edit Page Klik menu m “Edit Showcase” S Lakukan modul m menu Edit Showcaase Klik menu m “Art Making” M Lakukan modul m menu Edit Showcaase – Art Maaking Klik menu m “Art Design” D Lakukan modul m menu Edit Showcaase – Art Deesign
72 Klik menu m “Multim media & IT”” Lakukan modul m menu Edit Showcaase – Multim media & IT A Akhir jika
c. Peerancangan Layar Menuu Delete Imaage Dibawah ini adalah rancangan r layar menu Edit E Showcaase – Art Making – Delete Im mage sebagaai contoh, karena k baikk Edit Shhowcase – Art A Makingg – Delete Image, I Edit Showcase – Art D Design – Dellete Image, maupun Ediit Showcase – Multimeddia & IT T – Delete Image mem miliki rancanngan layar Edit Descriiption yaang sama, hanya h judull halamannyya saja yanng berbeda. Pada raancangan layyar menu ini, i terdapatt form penggisian Imagee ID, Im mage Description, dan Upload Imaage untuk diisi d oleh addmin. B Berikut ini adalah a rancaangan layar menu Edit Showcase – Art M Making – Dellete Image:
Gambar 3.27 3 Rancangann Layar Edit Shhowcase – Art Making – Deleete Image
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 Akhir jika 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 Akhir jika
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
74 Tabel 3.1 Tabel Pages
Nama Field id pagetitle pagebody •
Tipe Data Panjang Field Keterangan numeric 11 Row id char 255 Judul halaman text Isi dari halaman
Tabel News Nama file: bejodb.sql Nama tabel: news Primary Key: nid Tabel 3.2 Tabel News
Nama Field nid newsbody •
Tipe Data Panjang Field Keterangan numeric 11 Row id text Isi dari halaman
Tabel division Nama file: bejodb.sql Nama tabel: division Primary Key: did Tabel 3.3 Tabel Division
Nama Field did division description •
Tipe Data Panjang Field Keterangan numeric 11 Row id text Nama divisi text Deskripsi dari divisi
Tabel track Nama file: bejodb.sql Nama tabel: track Primary Key: did
75
Tabel 3.4 Tabel Track
Nama Field cnid content •
Tipe Data Panjang Field Keterangan numeric 11 Row id text Isi dari order tracking
Tabel clients Nama file: bejodb.sql Nama tabel: clients Primary Key: cid Tabel 3.5 Tabel Clients
Nama Field cid clients description type
•
Tipe Data numeric text text text
Panjang Field 11 -
Keterangan Row id Nama klien Deskripsi dari divisi 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 Pic id image thumbnail caption
•
Tipe Data int text text text
Tabel adgall Nama file: adgall.xml Primary Key: pic id
Panjang Field 3 -
Keterangan Row id Lokasi gambar ukuran asli Lokasi gambar ukuran diperkecil Deskripsi dari gambar
76 Tabel T 3.7 Tabeel adgall
Nama N Field Pic id image thumbnail caption
•
Tipe Dataa Panjang Field F int 3 text text text -
Keterrangan Row id Lokaasi gambar ukuran u asli Lokaasi gambar ukuran u diperkkecil Deskkripsi dari gaambar
Tabel T migall Nama N file: migall.xml m Primary P Keyy: pic id Tabel T 3.8 Tabeel migall
Nama N Field Pic id image thumbnail caption
3 3.10
Tipe Dataa Panjang Field F int 3 text text text -
Keterrangan Row id Lokaasi gambar ukuran u asli Lokaasi gambar ukuran u diperkkecil Deskkripsi dari gaambar
ERD D (Entity Reelationship Diagram) D Entity Reelationship diagram d diguunakan untuuk menggam mbarkan hubuungan antarr entity. Tabeel diatas mem miliki relatioonship sebaggai berikut:
Gambar 3.228 ERD
