KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia...

63
PERANCANGAN WEBSITE “XYZ” STUDIO MUSIK MENGGUNAKAN MACROMEDIA DREAMWEAVER 8 TUGAS AKHIR Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III) Al Oki Prio Utomo NIM : 12050851 Jurusan Manajemen Informatika Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika Jakarta 2009

Transcript of KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia...

Page 1: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

PERANCANGAN WEBSITE “XYZ” STUDIO MUSIK

MENGGUNAKAN MACROMEDIA

DREAMWEAVER 8

TUGAS AKHIRDiajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III)

Al Oki Prio UtomoNIM : 12050851

Jurusan Manajemen Informatika

Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika

Jakarta

2009

Page 2: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

PERSETUJUAN DAN PENGESAHAN TUGAS AKHIR

Tugas akhir ini telah disetujui dan disahkan serta diizinkan untuk dipresentasikan

pada ujian lisan tugas akhir periode : III - 2008/2009

DOSEN PEMBIMBING KETUA JURUSAN Tugas Akhir Manajemen Informatika

Frans Edward Schaduw , S.Kom H. Ahmad Ishaq, S.Kom

Page 3: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

PENGUJI TUGAS AKHIR

Tugas Akhir ini telah dipresentasikan pada tanggal: .............................................

PENGUJI 1 PENGUJI 2

____________________ ___________________

Page 4: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

LEMBAR KONSULTASI TUGAS AKHIR

AKADEMI BINA SARANA INFORMATIKA

• NIM : 12050851• NAMA LENGKAP : Al Oki Prio Utomo• DOSEN PEMBIMBING : Frans Edward Schaduw S.Kom• Ass. PEMBIMBING : Wiwik Widiyanti SP• JUDUL TUGAS AKHIR : Perancangan Website “XYZ” Studio

Musik dengan menggunakan macromedia Dreamweaver 8

No Tanggal Bimbingan Pokok Bahasan Paraf Dosen Pembimbing

1 4 November 2008 Penyerahan judul

2 8 November 2008 Penyerahan Bab I

3 22 November 2008 Acc Bab I dan Penyerahan Bab II

4 5 Desember 2008 Revisi Bab II

5 18 Desember 2008 Acc Bab II

6 14 Januari 2009 Penyerahan Bab III

7 28 Januari 2009 Acc Bab III Dan Acc Keseluruhan

Catatan untuk Dosen PembimbingBimbingan Tugas Akhir

• Dimulai Pada Tanggal : 4 November 2008• Diakhiri Pada Tanggal : 28 Januari 2009 • Jumlah Pertemuan Bimbingan : 7 ( Tujuh )

Disetujui Oleh,

Dosen Pembimbing

(Frans Edward S S.Kom)

Page 5: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

KATA PENGANTAR

Puji syukur alhamdulillah, penulis panjatkan kehadirat Allah SWT yang telah

melimpahkan Rahmat, Ridho dan karunia-Nya, sehingga pada akhirnya penulis dapat

menyelesaikan tugas akhir ini dengan baik. Dimana Tugas Akhir ini penulis sajikan

dalam bentuk buku yang sederhana. Adapun judul penulisan Tugas Akhir yang penulis

ambil adalah :

“PERANCANGAN WEBSITE “XYZ” STUDIO MUSIK

MENGGUNAKAN MACROMEDIA

DREAMWEAVER 8”

Tujuan penulisan tugas akhir ini adalah sebagai salah satu syarat kelulusan

Program Diploma Tiga (D.III) AMIK BSI. Sebagai bahan penulisan, data diambil

berdasarkan studi pustaka dengan membaca beberapa sumber literatur untuk

mendukung penulisan ini. Penulis menyadari bahwa tanpa bimbingan dan dorongan

dari semua pihak, maka penulisan tugas akhir ini tidak akan lancar. Oleh karena itu

pada kesempatan ini, izinkanlah penulis menyampaikan ucapan terima kasih yang

sebesar-besarnya kepada :

1. Bapak Ir. Naba Aji Notoseputro selaku Direktur Akademi BSI.

2. Bapak H. Mochamad Wahyudi, S.Kom, MM, selaku Pudir I Bidang Akademik.

3. Bapak Ahmad Ishaq, S.Kom, selaku Ketua Jurusan Manajemen Informatika Bina

Sarana Informatika.

4. Frans Edward Schaduw, S.Kom selaku Dosen Pembimbing Tugas Akhir I.

5. Ibu Wiwik Widiyanti, SP selaku Dosen Pembimbing Tugas Akhir II.

Page 6: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

6. Staff / Karyawan / Dosen di lingkungan AMIK BSI.

7. Kedua Orangtua, dan kakak ku yang telah memberikan dorongan baik berupa

materi, semangat, dan doa hingga selesainya penulisan ini.

8. Kepada temanku Rendi dan Singgih yang telah menceriakan suasana serta

memberikan dorongan selama melakukan Tugas Akhir ini.

9. Feirna cahaya hatiku yang telah memberikan perhatian, dorongan semangat dan

doa’nya serta kasih sayang kepada penulis, demi terwujudnya Tugas Akhir ini.

10. Teman-teman seperjuangan angkatan 2005 Jurusan Manajemen Informatika

khususnya MI.6D.

Serta semua pihak yang terlalu banyak untuk disebutkan satu persatu sehingga

terwujudnya penulisan ini. Penulis menyadari bahwa penulisan Tugas Akhir ini masih

jauh sekali dari sempurna, untuk itu penulis mohon kritik dan saran yang bersifat

membangun demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata semoga Tugas Akhir ini dapat bermanfaat untuk penulis khususnya

dan bagi para pembaca yang berminat pada umumnya.

Jakarta, 4 November 2008

Penulis

Al Oki Prio Utomo

Page 7: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

ABSTRAKSI

Al Oki Prio Utomo (12050851), Perancangan Website ”XYZ” Studio Musik Dengan Menggunakan Dreamwever 8.

Penggunaan Internet di jaman sekarang bukanlah suatu hal yang baru lagi. Hampir di seluruh negara mengenalnya. Internet dapat memperkenalkan segala sesuatu dengan jelas. Hal ini dimanfaatkan oleh perusahaan “XYZ” Studio Musik untuk merancang dan membuat website yang berisi informasi yang berkaitan dalam memperluas jangkauan promosi, yaitu dengan informasi halaman home, halaman about us, halaman gallery, halaman buku tamu, sampai informasi halaman kontak perusahaan.

Tugas Akhir Website “XYZ” Studio Musik ini dibuat oleh penulis menggunakan web editor yaitu Adobe Dreamweaver 8, karena dengan metode klik dan drag mempermudah merancang website dengan cepat, menarik dan interaktif. Penggunaan database MySQL pada website ini didasarkan pada keunggulan yang dimiliki MySQL untuk menangani jutaan user secara bersamaan. Mampu menampung lebih dari ribuan record dan sangat cepat mengeksekusi data.

Tujuan penulis membuat website ini bukan hanya sebagai sarana promosi saja. Tetapi juga bertujuan untuk menginformasikan “XYZ” Studio Musik kepada masyarakat.

Kata Kunci : Perancangan Website, Website “XYZ” Studio Musik

Page 8: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

ABSTRACTION

Al Oki Prio Utomo (12050851), Website design of “XYZ” Studio Musik using Dreamwever 8.

Now, internet using is not something new. Almost all of country in the world know about it. Internet can introduce all about things clearly and completely. Because of that, internet can be used by company “XYZ” Studio Musik for design and make “website” which contain information for developing promotion area, like home page information, page of about us, gallery page, guess book page, untill page of company contact person.

This task, website of “XYZ” Studio Musik is made by author using web editor, Adobe Dreamwever 8. Because with klick metode and drag make easier for website design quickly, interesting, and interact. Using database MySQL in this website based on special quality of MySQL for helping a million user in the same time. And it can accommodate thousands of record and very quick for file execution.

From this task, author has purpose makes this website is not only for promotion. But it’s make for giving information about “XYZ” Studio Musik profile to go public.

Keyword : Website Design, Website of “XYZ” Studio Musik

Page 9: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

DAFTAR ISI

Halaman

Lembar Judul Tugas Akhir............................................................................... i

Lembar Persetujuan dan Pengesahan Tugas Akhir.......................................... ii

Lembar Penguji Tugas Akhir............................................................................ iii

Lembar Konsultasi TugasAkhir........................................................................ iv

Kata Pengantar.................................................................................................. vi

Abstraksi........................................................................................................... viii

Daftar Isi .......................................................................................................... x

Daftar Simbol.................................................................................................... xiii

Daftar Gambar.................................................................................................. xvi

Daftar Lampiran ............................................................................................... xviii

BAB I PENDAHULUAN

1.1 Latar Belakang .................................................................. 1

1.2 Maksud dan Tujuan ........................................................... 2

1.3 Metode Pengumpulan Data ............................................... 3

1.4 Ruang Lingkup .................................................................. 3

BAB II PEMBAHASAN

Page 10: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

2.1 Landasan Teori................................................................... 4

A. Pengenalan Internet .............................................. 4

B. Pengenalan PHP ................................................... 5

C. Pengenalan MySQL ............................................. 6

D. HTML ................................................................... 7

E. Pengenalan Macromedia Dreamweaver 8 ............ 8

F. Struktur Dasar Navigasi........................................ 12

2.2 Analisa Perancangan / Pembuatan Website ..................... 16

A. Struktur Navigasi. ................................................. 16

B. Rancangan Tampilan Website .............................. 17

1. Rancangan Halaman Index (Home).................. 17

2. Rancangan Halaman About Us ........................ 18

3. Rancangan Halaman Gallery............................ 19

4. Rancangan Halaman Buku Tamu..................... 20

5. Rancangan Halaman Contact Us...................... 21

6. Perancangan Basis Data ................................... 22

C. Pembuatan Halaman Website .............................. 25

1. Pembuatan Halaman Home.............................. 26

2. Pembuatan Halaman About Us ........................ 29

3. Pembuatan Halaman Gallery ........................... 30

4. Pembuatan Halaman Buku Tamu .................... 31

5. Pembuatan Halaman Contact Us ..................... 32

6. Spesifikasi Halaman Web................................. 33

Page 11: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

D. Spesifikasi Hardware dan Software....................... 36

1. Hardware yang digunakan ............................... 36

2. Software yang digunakan ................................. 37

3. Konfigurasi Komputer ..................................... 38

BAB III PENUTUP

3.1 Kesimpulan ........................................................................ 39

3.2 Saran .................................................................................. 40

Daftar Pustaka ............................................................................................... 41

Daftar Riwayat Hidup ................................................................................... 42

Lampiran-lampiran........................................................................................ 43

DAFTAR SIMBOL

A. Simbol Konfigurasi Komputer

Page 12: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

CENTRAL PROCESSING UNIT

Digunakan untuk menggambarkan proses pengolahan yang

dilakukan

DISPLAY

Digunakan untuk menggambarkan kegiatan pengeluaran data

melalui CRT (Chatode Ray tube) atau monitor.

MANUAL INPUT

Digunakan untuk menggambarkan kegiatan masukan data

dengan menggunakan terminal (keyboard).

LINE PRINTER

Digunakan untuk menggambarkan pengeluaran data pada mesin

pencetak (printer).

FLOPPY DISK DRIVE

Digunakan untuk menggambarkan proses pembacaan data

dengan media disket.

HARD DISK DRIVE

Digunakan untuk menggambarkan proses pembacaan data

dengan media hard disk.

Page 13: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

B. Simbol Flowchart

TERMINAL

Digunakan untuk menggambarkan awal dan akhir dari suatu

kegiatan.

DECISION

Digunakan untuk menggambarkan pengujian suatu kondisi yang

ada.

PREPARATION

Digunakan untuk menggambarkan persiapan harga awal, dari proses yang akan

dilakukan.

FLOW LINE

Digunakan untuk menggambarkan hubungan proses dari suatu proses ke proses

lainnya.

INPUT / OUTPUT

Digunakan untuk menggambarkan proses memasukan data yang

berupa pembacaan data dan sekaligus proses keluaran yang

berupa pencetakan data.

Page 14: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

PROCESSDigunakan untuk mewakili suatu proses.

SUBROUTINE

Digunakan untuk menggambarkan proses pemanggilan sub

program dari main program (recursivitas).

PENGHUBUNG (CONNECTOR )

Digunakan untuk menunjukan sambungan dari bagan alir yang terputus

dihalaman yang masih sama.

PENGHUBUNG HALAMAN (PAGE CONNECTOR)

Digunakan untuk menunjukan sambungan dari bagan alir yang

terputus dihalaman yang lainnya.

Page 15: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

DAFTAR GAMBAR

Gambar

Halaman

Gambar II.1 Tampilan Awal Macromedia Dreamweaver 8............................... 9

Gambar II.2 Jendela Kerja Macromedia Dreamweaver 8 .................................10

Gambar II.3 Insert Bar...................................................................................... 10

Gambar II.4 Document ToolBar....................................................................... 10

Gambar II.5 Document Window...................................................................... 11

Gambar II.6 Property Inspector........................................................................ 11

Gambar II.7 Panel Groups..................................................................................12

Gambar II.8 Struktur Navigasi Linear................................................................13

Gambar II.9 Struktur Navigasi Hirarki...............................................................14

Gambar II.10 Struktur Navigasi Non Linear........................................................15

Gambar II.11 Struktur Navigasi Composite.........................................................15

Gambar II.12 Struktur Navigasi...........................................................................17

Gambar II.13 Rancangan Halaman Index (Home)...............................................18

Gambar II.14 Rancangan Halaman About Us......................................................19

Gambar II.15 Rancangan Halaman Gallery..........................................................20

Gambar II.16 Rancangan Halaman Buku Tamu...................................................21

Gambar II.17 Racangan Halaman Contact Us......................................................22

Gambar II.18 Pembuatan Database......................................................................23

Page 16: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.19 Pembuatan Tabel Bukutamu..........................................................24

Gambar II.20 Tampilan Utama Aplikasi Macromedia Dreamweaver 8...............26

Gambar II.21 Dialog memasukkan table..............................................................27

Gambar II.22 Dialog memasukkan object flash...................................................27

Gambar II.23 Dialog Memasukkan Gambar........................................................28

Gambar II.24 Dialog memasukkan Link..............................................................28

Gambar II.25 Halaman Index (Home)..................................................................29

Gambar II.26 Halaman About Us.........................................................................30

Gambar II.27 Halaman Gallery............................................................................31

Gambar II.28 Halaman Buku Tamu.....................................................................32

Gambar II.29 Halaman Contact Us......................................................................33

Gambar II.30 Konfigurasi Komputer...................................................................38

Page 17: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

DAFTAR LAMPIRAN

Lampiran Halaman

A. Lampiran A.1........................................................................................... 43

B. Lampiran A.2........................................................................................... 44

C. Lampiran A.3........................................................................................... 45

D. Lampiran A.4........................................................................................... 46

E. Lampiran A.5 .......................................................................................... 47

BAB I

Page 18: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

PENDAHULUAN

1.1. Latar Belakang

Penemuan yang ada dibidang ilmu teknologi terus dikembangkan dan usaha

untuk dapat diaplikasikan dalam lingkungan dan kondisi tertentu serta diharapkan

dapat diterima di seluruh dunia. Kecepatan dan keakuratan informasi yang dulu

memerlukan waktu yang lama kini dalam hitungan detik informasi tersebut sudah

dapat kita terima.

Begitu juga dalam sebuah perusahaan, organisasi, dan individu membutuhkan

informasi untuk mempromosikan segala sesuatu yang memiliki nilai jual dengan

tujuan dapat diketahui oleh banyak orang. Banyak cara sebuah perusahaan untuk

melakukan promosi, antara lain dengan memasang iklan melalui media cetak ataupun

media elektronik, menyebarkan brosur, memasang spanduk, dan lain sebagainya.

Tetapi semua itu membutuhkan biaya yang sangat besar dan terlihat monoton.

Ada cara lain untuk menghemat biaya promosi yaitu dengan internet. Internet

sebagai sarana informasi terpopuler saat ini mempunyai jangkauan sangat luas, karena

itu internet ideal sekali sebagai sarana promosi.

Oleh karena itu “XYZ” Studio Musik yang masih melakukan promosi hanya

sebatas iklan media cetak, dari mulut ke mulut saja, dan ingin sekali memiliki website

Page 19: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

agar jangkauan promosi lebih luas dan terlihat menarik. Melihat hal diatas, maka

penulis tertarik untuk memberikan solusi mengambil judul dalam penulisan tugas akhir

ini adalah sebagai berikut : “PERANCANGAN WEBSITE “XYZ” STUDIO

MUSIK MENGGUNAKAN MACROMEDIA DREMWEAVER 8”.

1.2. Maksud dan Tujuan

Adapun maksud dan tujuan dari penulisan Tugas akhir ini adalah :

a. Meningkatkan kemampuan penulis terutama dalam membuat dan

merancang suatu website.

b. Untuk memperluas jangkauan promosi “XYZ” Studio Musik.

c. Memberikan informasi yang selengkap-lengkapnya tentang “XYZ”

Studio Musik kepada pengunjung website.

d. Untuk menerapkan dan mengembangkan ilmu yang didapat dari bangku

kuliah.

e. Untuk menumbuhkan sikap rasa tanggung jawab dalam melaksanakan

Tugas Akhir ini.

Tujuan dari penulisan tugas akhir ini adalah salah satu syarat kelulusan

Program Diploma III (D3) untuk program studi Manajemen Informatika pada

Akademi Manjemen Informatika dan Komputer Bina Sarana Informatika (AMIK BSI)

Jakarta.

Page 20: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

1.3. Metode Pengumpulan Data

Dalam rangka pengumpulan data yang diperlukan penulis untuk bahan pnulisan

tugas akhir ini, maka penulis menggunakan beberapa metode, yaitu:

a. Metode Wawancara

Penulis melakukan wawancara langsung pada sumber data untuk mendapatkan

informasi yang berhubungan dengan promosi perusahaan.

b. Metode Survei atau Observasi

Mengumpulkan data-data informasi studio musik dan foto alat-alat atau

perlengkapan musik juga dilakukan penulis untuk mendapatkan bahan-bahan

yang dibutuhkan.

c. Metode Kepustakaan

Metode studi pustaka (literatur), seperti buku-buku mengenai pembuatan

website, brosur-brosur dan lain sebagainya.

1.4. Ruang Lingkup

Dalam penulisan tugas akhir ini, website yang dirancang berisi informasi yang

berkaitan dalam memperluas jangkauan promosi, yaitu informasi halaman home,

halaman about us atau profil studio musik, halaman gallery studio musik, halaman

buku tamu, sampai informasi halaman kontak studio musik.

Page 21: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

BAB II

PEMBAHASAN

2.1. Landasan Teori

A. Pengenalan Internet

Menurut Syukur(2003:1) mengemukakan bahwa” Internet adalah suatu jaringan

komputer global terbentuk dari jaringan-jaringan komputer lokal dan regional,

memungkinkan komunikasi data antar komputer-komputer yang terhubung ke jaringan

tersebut“. Dimulai dari suatu proyek pada sekitar tahun 60’an yang dinamakan

APRANET atau Advance Research Projects Agency Network. Beberapa Universitas

di Amerika Serikat mengerjakan proyek ini, dan awalnya telah berhasil

menghubungkan 4 komputer di lokasi Universitas yang berbeda. Perkembangan

APRANET ini cukup pesat jika dilihat dari perkembangan komputer pada saat itu. Pada

tahun 1977, APRANET telah menghubungkan lebih dari 100 main frame komputer,

dan saat ini terdapat sekitar 4 juta host jaringan yang terhubung dengan jaringan itu.

Jumlah sebenarnya dari komputer yang terhubung tidak dapat diketahui

dengan pasti, kerena perkembangan jumlah komputer yang terhubung dengan suatu

jaringan semakin lama semakin besar. Karena perkembangannya sangat pesat, jaringan

komputer ini tidak dapat lagi disebut sebagai APRANET semakin banyak komputer

dan jaringan-jaringan regional yang terhubung. Konsep ini yang kemudian

berkembang dan dikenal sebagai konsep internetworking. Internet berasal dari kata

Interconnection networking, inter kependekan dari internasional, connection berarti

Page 22: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

hubungan dan networking adalah jaringan. Sehingga Internet dapat juga didefinisikan

sebagai jaringan yang terdiri dari berbagai macam dan jenis komputer diseluruh dunia

yang saling berkomunikasi dengan berbasiskan suatu protokol yang dinamakan TCP /

IP ( Transmission Control Protocol / Internet Protocol ). Setiap pemakai yang

komputernya terhubung ke Internet dapat saling mengakses layanan yang disediakan

oleh komputer lain dalam bentuk pertukaran data lateral, melalui jalur telekomunikasi

seperti telepon, wireless.

B. Pengenalan PHP

Menurut Nugroho(2004:6) mengemukakan bahwa “PHP (Hypertext

Preprocessor) adalah sebuah bahasa pemrograman yang berbentuk scripting, yang

digunakan untuk membuat halaman web yang dinamis”. Dinamis berarti halaman yang

akan ditampilkan dibuat saat halaman itu diminta oleh client. Mekanisme ini

menyebabkan informasi yang diterima client selalu yang terbaru. Sistem kerja dari

program ini adalah sebagai interpreter dan bukan sebagai compiler. Dikatakan sebagai

bahasa interpreter, script mentahnya tidak harus diubah kedalam bentuk source code.

Sehingga pada saat menjalankan program, kode dasar secara langsung akan dijalankan

tanpa harus melalui proses pengubahan kedalam bentuk source kode. Sedangkan

disebut sebagai bahasa compiler adalah bahasa yang akan merubah script-script

program kedalam source code, yang akan diubah menjadi bentuk object code dan akan

menghasilkan file yang lebih kecil dari file mentah sebelumnya, sehingga hasil dari

bahasa pemrograman yang berbentuk compiler akan membentuk sebuah program yang

berstatus sebagai program exe.

Page 23: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Diantara kelebihan-kelebihan dari PHP:

1. Mudah dibuat dan kecepatan akses tinggi.

2. Dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang

berbeda pula seperti Unix, Windows NT dan Macintosh.

3. Diterbitkan secara gratis.

4. Dapat berjalan pada web server Microsoft Personal Web Server, Apache, IIS,

Xitami.

5. Termasuk bahasa yang embedded (bisa ditempel atau diletakkan dalam tag

HTML).

6. Kemampuan untuk mengolah keluaran gambar (seperti file PDF, dan movie

flash).

C. Pengenalan MySQL

Database digunakan untuk menyimpan data, demikian pula dengan MySQL,

MySQL termasuk jenis Relational Database Management System (RDBMS) yaitu

hubungan antar tabel yang berisi data-data pada suatu database. Database pada

MySQL terdiri dari table-tabel. Setiap table mempunyai kolom, baris, serta record

untuk menyimpan data. Tabel-tabel tersebut di link oleh suatu relasi yang

memungkinkan untuk mengkombinasikan data dari beberapa tabel ketika seseorang

user menginginkan menampilkan informasi dari suatu database. Penggunaan MySQL

biasanya dipadukan dengan menggunakan program aplikasi PHP, karena dengan

menggunakan kedua program tersebut telah terbukti akan kehandalannya dalam

menangani permintaan data.

Page 24: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

D. HTML

Menurut Menurut Syukur(2003:7) mengemukakan bahwa”HTML (Hyper Text

Markup Language) dewasa ini dikenal sebagai bahasa standar untuk membuat

dokumen web“. Arti HTML dapat dipelajari dari setiap elemennya, yaitu : HyperText,

WWW memungkinkan penggunaannya untuk melompat dari satu lokasi ke lokasi lain.

Ini dapat terjadi karena adanya hypertext link yang berfungsi sebagai penghubung

(connection) dari suatu web ke lokasi lainnya. Dengan kemampuan multimedia dalam

web, istilah ini kemudian berkembang menjadi hypermedia link. Untuk

menyederhanakan, kedua istilah ini dipadukan menjadi hyperlink atau biasa disebut

link saja. MarkUp, untuk membuat suatu link, atau komponen-komponen web lainnya

dilakukan dengan cara memberikan tanda pada link atau text yang akan dibuat tebal

atau miring tersebut. Tanda-tanda ini disebut sebagai markup atau biasa disingkat

sebagai tag. Language, HTML adalah bahasa pemprograman yang digunakan sebagai

(Formatting Tools). Format adalah mekanisme yang mengatur bentuk visual yang

tampil pada Web Browser seperti Netscape Navigator atau Internet Exsplorer. Objek

yang dapat diformat antara lain adalah Teks, Style dari teks (Font), ukuran, tebal,

gambar, suara, koneksi (link) dan lainnya.

Walaupun ada software yang membantu pengembangan pembuatan HTML

seperti FrontPage dari Microsoft, Netscape Editor, Web Edit dan lain sebagainya,

namun pemahaman HTML dengan mengenal individual TAG (markup) yang berupa

elemen dari HTML sangat diperlukan untuk membuat Home Page yang baik dan

memudahkan Troubleshooting bila terjadi eror atau hal lainnya.

Page 25: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

E. Pengenalan Macromedia Dreamweaver 8

Saat ini aktivitas membuat website sudah mulai menjadi tren baru yang banyak

dipelajari orang, menggeser aktivitas membuat e-mail beberapa waktu lalu. Apalagi,

saat ini sudah banyak program aplikasi web editor yang memudahkan orang untuk

membuat website dengan mudah dan cepat. Salah satu program aplikasi web editor

tersebut adalah Macromedia Dreamweaver 8. Menurut Hadi(2007:4) mengemukakan

bahwa”Macromedia Dreamweaver 8 adalah suatu aplikasi yang sangat mudah untuk

menggunakan perangkat lunak yang mengijinkan kamu untuk menciptakan halaman

web profesional”. Salah satu kekuatan Macromedia Dreamweaver 8 ini adalah

kemampuannya mendukung pemrograman script server side seperti Active Server

Pages (ASP), ASP.NET, ColdFusion, Java Server Pages (JSP) dan PHP. Selain itu,

tentunya mendukung pemrograman client side yang sangat terkenal dan banyak

dipakai orang, yakni HTML dan JavaScript.

Banyak jenis web editor yang dapat mengelola file PHP, dari shareware sampai

dengan yang freeware dan memiliki kemampuan untuk mendukung pemrograman

server side dan client side. Server side digunakan untuk memproses data yang

berhubungan dengan server seperti pengolahan database, sedangkan client side

merupakan bahasa pemrograman tambahan.

Untuk lebih jelasnya perhatikan gambar dibawah ini :

Page 26: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.1 Tampilan Awal Macromedia Dreamweaver 8

Berikut ini adalah bagian-bagian yang terdapat pada jendela kerja Macromedia

Dreamweaver 8 :

Gambar II.2 Jendela Kerja Macromedia Dreamweaver 8

Page 27: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

1. Insert Bar

Komponen ini mengandung tombol-tombol untuk menyisipkan berbagai

macam objek seperti image, table, dan layer ke dalam dokumen. Setiap objek adalah

kutipan kode HTML yang memberikan fasilitas bagi kita untuk mengatur atributnya

sebagaimana kita menyisipkannya. Sebagai contoh, anda dapat mengklik icon.

Image pada Insert bar untuk menyisipkan image. Juga dapat melakukan hal

sama dengan memiliki menu Insert > Image dapat melihat tampilan Insert bar dibawah

ini.

Gambar II.3 Insert Bar

2. Document Toolbar

Digunakan untuk mengubah tampilan dokumen seperti menampilkan kode atau

tampilan desain saja atau dapat pula menampilkan keduanya. Dapat melihat tampilan

Document toobar dibawah ini.

Gambar II.4 Document ToolBar

3. Document Window

Jendela dokumen merupakan tempat kita mendesain dan memasukan objek atau

kode dari tab code, split dan design.

Page 28: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.5 Document Window

4. Property Inspector

Berfungsi untuk mengetahui atau mengubah properties dari objek yang

dimasukkan kedalam dokumen seperti mengubah jenis huruf, warna dan ukuran huruf.

Gambar II.6 Property Inspector

5. Panel Groups

Panel groups adalah kumpulan panel berkaitan yang dikelompokkan bersama

di bawah satu judul. Untuk mengekspansi panel group, klik pada panah expander di

sebelah kiri nama group. Untuk membuat panel menjadi mengapung (tidak menempel

pada pojok window), lakukan drag pada paling pojok kiri dari judul group.

Page 29: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Terdapat beberapa jenis panel group, antara lain design, code, application, files,

dan answer. Dalam suatu jenis group terdapat beberapa macam panel, misalnya group

design memiliki panel HTML, Styles, CSS Styles, dan Behaviour. Masing-masing

panel ini dapat dibuat mengapung dan terpisah dengan group dengan cara men-drag

tab dari panel tersebut sehingga terlepas dari panel group.

Gambar II.7 Panel Groups

F. Struktur Dasar Navigasi

Penjejakan (navigasi) termasuk struktur terpenting dalam pembuatan suatu

website dan gambarannya harus sudah ada pada tahap perencanaan. Peta penjejakan

merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan

dapat membantu mengorganisasikan seluruh elemen pages. Peta penjejakan juga

Page 30: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

memberikan kemudahan dalam menganalisa keinteraktifan seluruh pages dalam web

dan bagaimana pengaruh keinteraktifannya terhadap pengguna.

Ciri khas peta penjajakan yaitu dapat digolongkan menurut kebutuhan akan

obyek, kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya

yang berpengaruh terhadap waktu pembuatan suatu multimedia. Bentuk dasar dari peta

navigasi adalah sebagai berikut:

1. Linear

Linear (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian

cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi

satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat di

tampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman

sesudahnya dan tidak dapat menampilkan dua halaman sebelumnya atau dua halaman

sesudahnya. Salah satu yang terpenting dari struktur ini adalah tidak diperkenankan

terjadinya percabangan.

Gambar II.8 Struktur Navigasi Linear

2. Hierarchical (Hirarki)

Struktur Hierarchi (bercabang) ini percabangan untuk menampilkan data

berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai

Master Page (halaman utama kesatu), halaman utama ini akan mempunyai halaman

Page 31: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

percabangan yang dikatakan Slave Page (halaman pendukung). Jika salah satu

halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama

Master Page (halaman utama kedua), dan seterusnya. Yang terpenting dari struktur

penjejakan ini tidak diperkenankan adanya tampilan secara linear.

Gambar II.9 Struktur Navigasi Hirarki

3. Non Linear

Struktur penjejakan Non Linear (tidak berurut) merupakan pengembangan dari

struktur penjejakan Linear. Pada struktur ini diperkenankan membuat penjejakan

bercabang. Pemakai bebas menelusuri website tanpa dibatasi oleh suatu rute dimana

kontrol navigasi dapat mengakses ke semua halaman manapun. Percabangan yang

dibuat pada struktur Non Linear ini berbeda dengan percabangan pada struktur

Hierarchi, karena pada percabangan Non Linear ini walaupun terdapat percabangan,

tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada Master Page dan

Slave Page.

Page 32: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.10 Struktur Navigasi Non Linear

4. Composite

Composite (campuran) atau disebut juga struktur penjejakan bebas merupakan

gabungan dari ketiga struktur sebelumnya yaitu Linear, Non Linear dan Hierarchi. Jika

suatu tampilan membutuhkan percabangan, maka dapat dibuat percabangan, dan bila

dalam percabangan tersebut terdapat suatu tampilan yang sama kedudukannya maka

dapat dibuat struktur Linear dalam percabangan tersebut.

Gambar II.11 Struktur Navigasi Composite

Setiap struktur peta penjejakan seperti yang baru di bahas mempunyai fungsi dan

tujuan tersendiri, tidak ada yang lebih baik atau lebih buruk. Penggunaan peta

penjejakan bergantung kepada kebutuhan dan tujuan dari web yang hendak dibuat.

Semakin kompleks peta penjejakan yang digunakan, maka semakin sulit pula

pembuatan page dari peta penjejakan tersebut.

Page 33: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

2.2. Analisa Perancangan/Pembuatan Website

A. Struktur Navigasi

Struktur Navigasi website digunakan untuk menggambarkan secara garis besar

isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi

tersebut. Struktur navigasi website “XYZ” Studio Musik ini adalah struktur navigasi

campuran (Composite). Melalui struktur navigasi website ini, terlihat bagaimana isi

dan susunan dari sebuah website secara menyeluruh.

Pembuatan struktur navigasi website ini akan sangat membantu nantinya ketika

akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik

adalah yang mampu memberitahukan kepada pengunjung tentang lokasi mereka

sekarang, lokasi-lokasi yang bisa dikunjungi dari lokasi sekarang.

Gambar II.12 Struktur Navigasi

Index(Home)

About Us Gallery Buku Tamu Contact Us

[Gallery 2] [Gallery 3][Gallery 1]

Page 34: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

B. Rancangan Tampilan Website

1. Rancangan Halaman Index (Home)

Index adalah halaman depan dari semua halaman yang ada pada website.

Halaman ini juga dapat disebut sebagai halaman pembuka karena pada saat pertama

website dibuka maka halaman inilah yang akan tampil sebelum halaman yang lainnya.

Pada halaman index akan dirancang cukup kompleks karena akan ada link untuk

kesemua halaman. Halaman index.php mempunyai rancangan tampilan sebagai

berikut:

Gambar II.13 Rancangan Halaman Index (Home)

Tanggal

Bottom

(Banner Flash)

Welcome

Kalimat Pembuka

gambar

HomeAbout Us Gallery

Buku TamuContact Us

jam

Counter page

Page 35: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

2. Rancangan Halaman About Us

Halaman About Us merupakan halaman yang menjelaskan tentang perusahaan

“XYZ” Studio Musik sebagian besar terdiri dari text dan gambar. Rancangannya

adalah sebagai berikut :

Gambar II.14 Rancangan Halaman About Us

3. Rancangan Halaman Gallery

Halaman gallery akan dirancang atas 3 halaman yang memuat 6 gambar-gambar

“XYZ” Studio Musik pada setiap halamannya. Rancangannya adalah sebagai berikut :

Tanggal

About Us

Text Tentang Perusahaan

Bottom

(Banner Flash)

HomeAbout Us Gallery

Buku TamuContact Us

jam

Page 36: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.15 Rancangan Halaman Gallery

4. Rancangan Halaman Buku Tamu

Halaman buku tamu akan dirancang untuk membuat suatu komunikasi antar

pengunjung dan “XYZ” Studio Musik khususnya. Rancangannya adalah sebagai

berikut :

Tanggal

Bottom

(Banner Flash)

Gallery

1 >> 2 >> 3

HomeAbout Us Gallery

Buku TamuContact Us

jam

Gambar1 Gambar 2 Gambar 3

Gambar 4 Gambar 5 Gambar 6

Page 37: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.16 Rancangan Halaman Buku Tamu

5. Rancangan Halaman Contact Us

Halaman contact akan dirancang untuk memberikan info tentang bagaimana

cara menghubungi “XYZ” Studio Musik. Rancangannya adalah sebagai berikut :

Tanggal

Buku Tamu

Nama

Email

Komentar

Kirim

Bottom

Batal

Daftar Komentar Pengunjung

(Banner Flash)

HomeAbout Us Gallery

Buku TamuContact Us

C

Page 38: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.17 Rancangan Halaman Contact Us

6. Perancangan Basis Data

Dalam perancangan database ini, database yang digunakan adalah MySQL dibuat

dengan phpMyAdmin langkah awal dilakukan dengan membuat database “okhie”

dengan cara create new database seperti gambar dibawah ini.

Tanggal

Contact Us

Text

Bottom

(Banner Flash)

HomeAbout Us Gallery

Buku TamuContact Us

jam

gambar

Page 39: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.18 Pembuatan Database

a. Listing SQL

create database okhie;

Setelah database tercipta langkah selanjutnya adalah pembuatan table dalam

database ini akan dibuat satu buah table. Yaitu tabel yang berisi data buku tamu.

Page 40: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.19 Pembuatan Tabel Bukutamu

CREATE TABLE `bukutamu` (

`tanggal` date NOT NULL,

`nama` varchar(30) collate latin1_general_ci NOT NULL,

`email` varchar(30) collate latin1_general_ci NOT NULL,

`komentar` text collate latin1_general_ci NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

Untuk dapat menghubungkan antara PHP dan MySQL harus dilakukan koneksi

dengan menuliskan script PHP sebagai berikut :

<?php

$host = "localhost";

Page 41: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

$dbname = "okhie";

$user = "root";

$pass = "";

$conn = mysql_connect($host,$user,$pass); //menghubungkan database dengan

webserver

if($conn) {

$sele = mysql_select_db($dbname); // mengakses database

if(!$sele) {

echo mysql_error();

}

}

?>

Simpan dengan nama connect.php.

Dengan demikian semua data yang ada pada database MySQL dapat ditampilkan

pada halaman website.

C. Pembuatan Halaman Website

Setelah membuat struktur navigasi, rancangan halaman situs web, dan

perancangan basis data maka langkah selanjutnya adalah mengimplementasikannya

kedalam pembuatan situs web. Langkah pertama adalah membuka program

Macromedia Dreamweaver 8, dengan cara tekan start All Program Macromedia

Macromedia Dreamweaver 8. Kemudian tentukan site name dan lokasinya.

Page 42: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Selanjutnya adalah membuat halaman situs web, langkahnya adalah mengklik File

New.

Gambar II.20 Tampilan Utama Aplikasi Macromedia Dreamweaver 8

1. Pembuatan Halaman Home

Pembuatan halaman ini dimulai dengan memasukkan table untuk membuat

layout seperti yang telah ditentukan di rancangan. Untuk memasukkan table cukup klik

gambar table pada toolbar diatas. Atur ukuran sesuai dengan rancangan yang sudah

ditentukan.

Page 43: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.21 Dialog memasukkan table

Kemudian masukkan gambar untuk dijadikan banner yang dibuat di flash. Cara

memasukkan objek flash adalah dengan cara mengklik insert media flash. Lalu

pilh file flash yang akan dijadikan banner.

Gambar II.22 Dialog memasukkan objek flash

Page 44: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Kemudian masukkan gambar yang akan dijadikan background. Cara memasukan

gambar adalah dengan menekan insert image. Lalu pilih nama file yang akan

dijadikan background.

Gambar II.23 Dialog Memasukkan Gambar

Setelah membuat table dan memasukkan gambar, langkah selanjutnya adalah

membuat link kehalaman lainnya yaitu home, about us, gallery, buku tamu dan contact.

Membuat link cukup dengan mengisi dialog link dengan nama file yang dimaksud,

contohnya jika kita ingin membuat link ke halaman home maka di dalam dialog link

cukup diisi dengan index.php.

Gambar II.24 Dialog Memasukkan Link

Page 45: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Berikut adalah tampilan design dari halaman Index (Home) :

Gambar II.25 Halaman Index (Home)

2. Pembuatan Halaman About Us

Pembuatan halaman about us juga diawali dengan memasukkan table, dan link.

Semua ini sudah dibahas diatas. Halaman about us menjelaskan tentang sejarah singkat

dari “XYZ” Studio Musik dan fasilitas disediakannya, pembuatan text dapat langsung

diketikan ke dalam editor Dreamweaver. Tampilan design dari halaman ini adalah

sebagai berikut :

Page 46: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.26 Halaman About Us

3. Pembuatan Halaman Gallery

Pembuatan halaman gallery juga diawali dengan memasukkan table, dan link.

Semua ini sudah dibahas diatas. Kemudian masukkan gambar-gambar yang akan

dijadikan gallery dan ditambah menggunakan hyperlink untuk memasukan 3 halaman

yang terdapat didalamnya. Cara memasukkan gambar sudah dibahas diatas. Tampilan

design dari halaman ini adalah sebagai berikut :

Page 47: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.27 Halaman Gallery

4. Pembuatan Halaman Buku Tamu

Pembuatan halaman buku tamu diperuntukan bagi para pengguna agar dapat

memberikan pesan atau atau komentar mereka, kemudian setelah database terhubung

langkah selanjutnya adalah membuat recordset. Caranya dengan mengklik application

server behaviour recordset. Masukkan control textarea untuk menerima inputan

nama, email dan komentar. Serta masukkan juga tombol kirim.dan batal. Semua

control ini ada pada tab form. Tampilan design dari halaman ini adalah sebagai berikut

:

Page 48: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.28 Halaman Buku Tamu

5. Pembuatan Halaman Contact Us

Pembuatan halaman contact diawali dengan memasukkan table, dan link. Semua

ini sudah dibahas diatas. Sebagai halaman yang menginformasikan alamat dan nomor

telepon “XYZ” Studio Musik yang bisa dihubungi serta informasi untuk reservasi atau

booking studio. Tampilan dari halaman ini adalah sebagai berikut :

Page 49: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Gambar II.29 Halaman Contact Us

6. Spesifikasi Halaman Web

Spesifikasi halaman berisi tentang halaman website yang penulis buat. Adapun

penjelasan dari spesifikasi halaman tersebut sebagai berikut:

a. Spesifikasi Halaman Home

Nama Program : Home

Akronim : index.php

Fungsi : Sebagai halaman pembuka dari website ini yang

berisikalimat pembuka dan daftar harga sewa serta

menampilkan menu utama yang menampilkan

Page 50: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

keseluruhan menu, mulai dari halaman home, about us,

gallery, buku tamu dan contact us.

Bahasa Program : php

Bentuk Tampilan : Lampiran A-1

Proses Program:

1) Pertama kali browsing di internet dengan alamat web tersebut, lalu

akan muncul halaman home ini sebagai tampilan pertama.

2) Di halaman home ini tersedia menu home, about us, gallery, buku

tamu dan contact us.

b. Spesifikasi Halaman About Us

Nama Program : About Us

Akronim : about.php

Fungsi : Sebagai halaman yang menginformasikan tentang sejarah dari

“XYZ” Studio Musik dan fasilitas yang di sediakan.

Bahasa Program : php

Bentuk Tampilan : Lampiran A-2

Proses Program:

1) Untuk menampilkan halaman ini, klik menu About Us yang terdapat

pada pilihan menu.

c. Spesifikasi Halaman Gallery

Nama Program : Gallery

Akronim : gallery.php

Page 51: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Fungsi : Sebagai halaman yang menampilkan gambar alat-alat

musik yang ada di “XYZ” Studio Musik.

Bahasa Program : php

Bentuk Tampilan : Lampiran A-3

Proses Program:

1) Untuk menampilkan halaman ini, klik menu Gallery yang terdapat

pada pilihan menu.

2) Didalam menu gallery terdapat 3 halaman link yang memiliki

gambar alat-alat “XYZ” Studio Musik yang berbeda.

d. Spesifikasi Halaman Buku Tamu

Nama Program : Buku Tamu

Akronim : bukutamu.php

Fungsi : Sebagai halaman tempat pengunjung dapat memberikan pesan

atau komentar mereka.

Bahasa Program : php

Bentuk Tampilan : Lampiran A-4

Proses Program:

1) Untuk menampilkan halaman ini, klik menu buku tamu yang terdapat

pada pilihan menu.

2) Di halaman ini bisa melakukan pengiriman pesan atau komentar

kepada “XYZ” Studio Musik.

3) Isi form buku tamu sesuai dengan kolom-kolom yang telah

disediakan.

Page 52: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

4) Apabila telah selesai mengisi semua kolom dalam form buku tamu

tersebut, lalu klik tombol kirim untuk mengirim dan klik batal bila

ingin membatalkannya.

e. Spesifikasi Halaman Contact Us

Nama Program : Contact Us

Akronim : contact.php

Fungsi : Sebagai halaman yang menginformasikan alamat dan nomor

telepon ”XYZ” Studio Musik, serta informasi untuk

reservasi atau booking studio.

Bahasa Program : php

Bentuk Tampilan : Lampiran A-5

Proses Program:

1) Untuk menampilkan halaman ini, klik menu Contact yang terdapat

pada pilihan menu.

D. Sarana Pendukung Program

Untuk mengetahui sarana pendukung program ini, penulis akan menjelaskannya,

antara lain adalah perangkat keras (hardware), perangkat lunak (software) dan

konfigurasi sistem komputer.

1. Perangkat Keras

Perangkat keras atau Hardware adalah seluruh komponen peralatan yang

berbentuk suatu sistem komputer dan peralatan lainya yang memungkinkan komputer

melaksanakan tugasnya, termaksud juga mesin-mesin pembantu penyimpanan data dan

Page 53: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

juga termaksud alat komunikasi lainya. Pada pembuatan situs web ini penulis

mengusulkan komputer dengan spesifikasi sebagai berikut :

Microprocessor : Pentium IV 2.0 GHZ

Memory Size : 1GB RAM

Monitor : SVGA 15”

Floppy Disk Drive : 3.5 Floppy (1.44 MB)

Hard Disk : 80GB

Keyboard : P/S 2 (110 key)

Mouse : Optik

Printer : Inkjet

2. Perangkat Lunak

Perangkat lunak yang digunakan untuk pembuatan situsnya ataupun

dokumentasinya adalah sebagai berikut :

Sistem Operasi : Windows XP Profesional Service Pack 2

Program Aplikasi Design : Macromedia Dreamweaver 8, Adobe Photoshop CS3

dan Flash Website Design v1.16.

Paket Program : PHP

Web Server : Xampp Versi 1.5.3

Web Browser : Mozilla Firefox 3.0

Database : MySQL dengan phpMyAdmin 2.8.1

Page 54: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Hard Disk80GB

3. Konfigurasi Sistem Komputer

Adapun bentuk gambar dari konfigurasi komputer yang digunakan dalam

perancangan website “XYZ” Studio Musik ini adalah sebagai berikut :

Gambar II.30 Konfigurasi Komputer

Pentium IV2.0 GHZ

Floppy Disk

1.4MB

Keyboard P/S 2 Mouse

Monitor SVGA

15”PrinterInkjet

Page 55: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

BAB III

PENUTUP

3.1. Kesimpulan

Sesuai dengan apa yang telah dibahas pada bab-bab terdahulu, maka penulis

mengambil kesimpulan sebagai berikut:

a. Penggunaan Macromedia Dreamweaver 8 ini sangat membantu dalam

pembuatan website yang dinamis, dan juga memberikan kemudahan dalam

pengkoneksian database MySQL.

b. Penyampaian informasi melalui website mampu menyediakan informasi dalam

bentuk teks, gambar, suara, maupun gambar bergerak yang membuat website

tersebut lebih menarik untuk dilihat.

c. Pembuatan website merupakan sarana yang efektif untuk mempromosikan

produk suatu perusahaan, dalam hal ini jasa penyewaan Studio Musik. Dengan

kemudahan untuk memperoleh informasi ini diharapkan agar "XYZ" Studio

Musik dapat memperoleh lebih banyak pelanggan.

d. Tersedianya media buku tamu pada website ini memudahkan komunikasi antar

pengunjung.

3.2. Saran

Page 56: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Dari kesimpulan yang penulis kemukakan diatas, maka penulis memberikan

beberapa saran yang mungkin dapat membantu agar perancangan website ini dapat

bekerja secara optimal. Adapun saran-saran dari penulis adalah sebagai berikut :

a. Penulis menyadari bahwa dalam perancangan website ini memiliki tampilan

yang kurang menarik, untuk itu lebih baik diatur kembali komposisi warna dan

tata letaknya.

b. Agar dapat meningkatkan jumlah pengunjung yang mengunjungi suatu website,

diharapkan untuk selalu melakukan peng-update’an website secara berkala

sehingga website menjadi lebih dinamis karena informasi didalamnya selalu

mengikuti perkembangan yang up to date.

c. Dalam merancang sebuah website hendaknya menggunakan database MySQL

dengan kemampuannya yang dapat menyimpan banyak record.

d. Diharapkan untuk mempunyai backup file dimana bagian untuk mencegah

apabila terjadi kesalahan/permasalahan didalam rancangan website.

e. Perlu adanya perawatan (maintenance) terhadap hardware maupun software

yang terencana dan rutin.

f. Menyempurnakan kembali rancangan website yang sudah ada.

DAFTAR PUSTAKA

Page 57: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Chandra. 2007. 7 Jam Belajar Interaktif Flash CS3 untuk Orang Awam. Palembang:Maxikom.

Firdaus. 2007. 7 Jam Belajar Interaktif PHP & MySQL dengan Dreamweaver. Palembang: Maxikom.

Hadi, Mulya. 2007. 7 Jam Belajar Interaktif Dreamweaver 8 untuk Orang Awam. Palembang: Maxikom.

Lia kuswayanto, 2006. MAHIR BERKOMPUTER. Jakarta. Grafindo Media Pratama.

Nugroho, Bunafit. 2004. Aplikasi Pemrograman Web Dinamis dengan PHP dan MySQL ( Studi Kasus, Membuat Sistem Informasi Pengolahan Data Buku ).Yogyakarta: Gava Media.

Sutisna, Dadan. 2007. 7 Langkah Mudah Menjadi WEBMASTER. Jakarta: Mediakita.

Syukur, Mark Ade. 2003.Aplikasi dengan PHP. Diambil dari: http://ilmukomputer.com/html/umum/mark-php.php

DAFTAR RIWAYAT HIDUP

Page 58: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

I. Biodata Mahasiswa

N.I.M. : 12050851

Nama Lengkap : Al Oki Prio Utomo

Tempat dan Tanggal Lahir : Jakarta, 31 Oktober 1987

Jenis Kelamin : Laki – laki

Agama : Katholik

Alamat Lengkap : Jl. Kp . Pondok Ranggon RT.02/03 Jatimurni,

Pondok Melati Bekasi 17431

No telp : 021-92387451

II. Riwayat Pendidikan Formal & Non Formal

1. SDN 20 Pejaten Timur Jakarta Selatan Tamat Tahun 1999

2. SLTPN 46 Jakarta Selatan Tamat Tahun 2002

3. SMA KHARISMAWITA Jakarta Selatan Tamat Tahun 2005

Depok, November 2008

Saya yang bersangkutan,

AL OKI PRIO UTOMO

Lampiran A.1

Page 59: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Lampiran A.2

Page 60: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Lampiran A.3

Page 61: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Lampiran A.4

Page 62: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information

Lampiran A.5

Page 63: KOMPUTERISASI SISTEM PENJUALAN BUKU PADA · PDF fileMusik dengan menggunakan macromedia Dreamweaver 8 ... internet can be used by company ... But it’s make for giving information