PENULISAN LAPORAN KKP/ PP/ PI

(1)

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER JAKARTA STI&K

PENULISAN

LAPORAN KKP/ PP/ PI

APLIKASI PENGENALAN PRODUK MELALUI WEB ( SITUS WEB ) PADA TOKO ADVENTURER WORKSHOP “BOLDER” MENGGUNAKAN MACROMEDIA

DREAMWEAVER MX 6.0

DiTulis guna melengkapi sebagian syarat untuk mencapai jenjang Diploma Tiga ( D3 )

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER JAKARTA STI&K

2005

NAMA :

Mugi Prasetyo

NPM

: 30401214

JURUSAN

: D3 – Manajemen Informatika

(2)

BAB I

PENDAHULUAN

Latar Belakang

Menyambut era pasar bebas yang menurut informasi akan ada perdagangan bebas pada tahun akan datang, dimana akan banyak bermunculan perusahaan-perusahaaan asing disetiap negara-negara baik itu negara berkembang ataupun negara yang sedang menuju perkembangan. Akan banyak sekali produk-produk yang nanti akan bersaing antara perusahaan dalam negeri dan perusahaan-perusahaan luar negeri. Dan itu pasti diharuskan mengambil suatu keputusan dari manajemen, bagaimana dan seperti apa memproduksi dan mendesain suatu produk yang akan menarik para konsumen. Dan juga mendapatkan suatu barang yang mereka inginkan.

Suatu perusahaan yang ingin bersaing dengan perusahaan lain harus memikirkan bagaimana untuk mengimbangi pesatnya kemajuan dalam suatu perdagangan. Contohnya dalam bidang komputerisasi baik itu mengenai masalah ekonomi, sosial dan politik, kependudukan suatu daerah, itu semua bisa menggunakan komputer sebagai alat bantu untuk memudahkan semua kegiatan-kegiatan yang dilaksanakan. Dari semua masalah diatas pastilah akan terjadi banyak kekurangan dalam mengerjakan suatu masalah tersebut. Sehingga akan menemukan suatu ide-ide dan dapat meminimalkan kekurangan-kekurangan dari permasalahan yang dihadapinya.

(3)

Penulis disini mengadakan penelitian pada sistem pengenalan produk sebuah toko perlengkapan alam bebas, toko perlengkapan alam bebas ini bergerak dalam bidang penjualan barang yang berupa peralatan pendakian. Penulis langsung terjun kelapangan untuk mengetahui bagaimana jalannya memperkenalkan suatu barang dengan melalui web (situs web) sekarang ini dan setelah mengetahui jalannya program penulis akan merumuskan masalah-masalah yang ada dalam toko perlengkapan alam bebas tersebut, setelah itu bagaimana untuk mengatasi masalah-masalah yang ada.

1.2. Batasan masalah

Pada penulisan ilmiah ini, penulis hanya membatasi atas perencanaan arus informasi, petunjuk mengenai situs yang baik, peta navigasi, pembentukan elemen, pembuatan halaman web, Macromedia Dreamweaver MX 6.0 pada halaman web yang menyatu dengan tag-tag HTML, membuat link dengan teks kemudian menguji halaman web dengan Microsoft Internet Explorer.

1.3. Tujuan Penulisan

Tujuan penulisan ini adalah agar perusahaan dapat lebih mudah. Dan meningkatkan kepuasan terhadap pelangganya, juga menjadi tolak ukur untuk menilai sampai dimana kemampuan penulis, meningkatkan informasi cepat dan akurat. Secara terorganisir, tidak terlalu sulit untuk dibaca, namun tetap harus desain secara profesional dan dapat diperbaharui secara teratur, agar pengaksesan serta penyampaian informasi akurat dapat diterima dengan interaktif, efisien, dan cepat demi kepuasan pekerjaan seseorang . Untuk penulisan ini penulis berusaha :

(4)

1. Memperkenalkan MacromediaDreamweaver MX 6.0 untuk membuat halaman Web (situs web) pribadi.

2. Mengimplementasikan halaman web (situs web) yang telah dibuat. 3. Memfokuskan penulisan pada perancangan halaman web yang

interaktif, efektif dan efesien sesuai dengan profile homepage pribadi.

Sehingga yang dilakukan perusahaan tersebut dapat berjalan cepat dari sebelumnya. Karena semua produk yang akan di pasarkan melalui web lebih mudah dikenal oleh konsumen.

1.4. Metode Penelitian

Agar menghasilkan data yang lengkap, obyektif, tepat dan akurat didalam penulisan ini maka penulisan menggunakan metodologi. penulisan dengan studi pustaka yang dimana data ini diperoleh penulis melalui referensi yang dikumpulkan oleh penulis sendiri yang terdapat dalam artikel majalah dan beberapa sumber buku. Data pendukung yang diperoleh penulis mempunyai maksud agar dapat melengkapi susunan informasi yang dihasilkan dari penganalisaan dan pengkonfigurasian terhadap obyek penulisan yang telah dilakukan sebelumnya.

1.5. Sistematika Penulisan

Dalam penulisan ilmiah ini akan dikemukakan bab demi bab yaitu dengan beberapa sub-sub bab antara lain sebagai berikut:

BAB I : PENDAHULUAN

Pada bab pertama ini penulisan Menguraikan tentang Latar belakang, batasan masalah, Tujuan penulisan, metode penulisan dan sistematika penulisan.

(5)

BAB II : LANDASAN TEORI

Dalam bab kedua ini menjelaskan tentang jaringan dan internet, teori asal mula web, definisi halaman Web (web situs), Peta navigasi, sekilas tentang MacromediaDreawer MX 6.0 dan Macromedia Fireworks Mx 6.0.

BAB III : PEMBAHASAN MASALAH

Pada dasar penulis menjelaskan mengenai Struktur Peta Navigasi Spesifikasi, Rancangan program bentuk masukan dan bentuk keluaran, perangkat keras dan perangkat lunak yang digunakan dalam membangun halaman web pribadi.

BAB IV : PENUTUP

Berisi kesimpulan yang diperoleh hasil analisa percobaan dan studi literature yang ada. serta saran-saran yang berisi pandangan dan usulan tentang hal-hal yang dapat dilakukan.

(6)

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Program.

Penggunaan scriting untuk membuat halaman sudah merupakan keharusan sekarang ini. Memang, kita dapat membuat halaman web yang baru atraktif hanya menggunakan sintak-sintak HTML. Murni, Namun semua itu belumlah cukup professional.

Banyak pengembang web atau web developer tidak puas dengan hal ini dan menginginkan agar halaman web dapat berinteraksi penuh dengan pengguna, seperti halnya program HTML, javascript, Macromedia Dreamweaver MX 6.0, Macromedia Fireworks Mx 6.0.

2.2. Jaringan dan Internet.

Jaringan dan internet merupakan akronim/istilah yang jelas perbedaanya tapi prinsipnya sama, mengapa demikian karena yang dimaksud jaringan disini ialah sekolompok komputer yang saling dihubungkan dengan peralatan tertentu sehingga dapat saling berrtukar informasi dan menggunakan sarana/program secara bersama-sama, kita sebut saja “jaringan local”

Internet mulai komersial dan berkembang sangat pesat sejak tahun 1990.di Indonesia sendiri,sudah dikenal dikalangan akademik dan pusat-pusat riset. layanan terbuka sejak indointernet berdiri sebagai penyedia layanan internet pertama diIndonesia. Kesukaan Indointernet ini kemudian di ikuti dengan munculnya internet servise provider ( ISP ) lainnya, yang kini semakin menjamur.

(7)

2.2.1. Elektronik mail (E-mail).

Adalah surat elektronik yang dikirim melalui internet. Fasilitas ini merupakan salah satu fasilitas yang paling banyak diminati, dengan fasilitas ini kita dapat berkirim atau menerima e-mail dari pengguna ke pengguna internet diseluruh dunia.

2.2.2. Kelompok diskusi ( Mailing list ).

Fasilitas ini merupakan berita atau file dikirim kebanyak pengguna sekaligus. sehingga pengguna dapat melakukan diskusi, ceramah, konferensi, seminar secara elektronik tanpa terikat oleh ruang dan waktu.

2.2.3. FTP ( File Transfer Protocol).

Melalui Sorfware FTP, kita dapat mentransfer data/file dari satu komputer ke komputer lain. Prosese mentransfer komputer ke komputer anda disebut dengan Down-load sedangkan proses mentrasfer file dari komputer anda ke komputer lain disebut Up-load.

2.2.4. WWW (World Wide Web).

Fasilitas di internet yang paling disukai. Fasilitas ini tergolong masih baru dibandingkan dengan e-mail.

2.3. Teori Asal Mula Web.

Pada tahun 1980-an, saat internet tumbuh perlahan-lahan dengan penambahan beberapa jaringan besar disana-sini, seorang ilmuwan bernama “Tim Berners-lee” mulai mencari cara yang lebih baik untuk koleganya di Europian Laboratory for Particle Physics (dikenal dalam akronim bahasa perancis sebagai CERN) untuk berkomunikasi dengan menggunakan komputer. saat itu satu-satunya informasi yang bisa ditransmisikan melalui internet muncul sebagai teks sederhana dilayar komputer Berners-lee dan rekan-rekannya membuat suatu interface

(8)

untuk menghubungkan informasi dari beragam sumber hasilnya adalah spesifikasi Macromedia Fireworks Mx 6.0. dan Macromedia Dreamweaver 6.0 yang merupakan basis World Wide Web (WWW). sekarang, teknologi web memungkinkan pembuatan halaman informasi terformat yang bisa dihubungkan kehalaman informasi lain dan diakses melalui sebuah jaringan.

2.4. WWW ( World Wide Web).

Bahwa world wide web merupakan fasilitas di internet yang paling disukai. Fasilitas ini tergolong masih baru dibandingkan dengan e-mail. World wide web sendiri terdiri dari banyaknya file dokumen-dokumen informasi pada komputer server (server web). Komputer-komputer server ini tersebar di lima benua termasuk di Indonesia, dan terhubung menjadi satu melalui jaringan yang disebut jaringan Internet. Dokumen-dokumen informasi ini dibuat dengan format HTML ( Hypertext Markup Language ) dan disimpan dalam komputer server sebuah bentuk file disebut dengan Web Page atau Page. Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait teks lainnya, tetapi juga dapat berupa gambar, mengandung suara bahkan klip video. Kaitan antara dokumen yang tidak hanya terdiri atau teks ini disebut hypertext.

2.5. Halaman Website (web situs).

Web adalah sekumpulan yang bisa diakses melalui browser web, aplikasi untuk melakukan download file ke komputer, Menterjemahkan tag-tag HTML dan link, serta menampilkan hasilnya pada monitor.

Halaman web (situs web) merupakan file teks yang berisi tag-tag dengan format HTML, link ke file-file grafik atau halaman web (situs

(9)

web) yang lain, file teks ini disimpan pada server web dan dapat diakses oleh komputer lain yang terhubung ke server, baik melalui internet maupun LAN (intranet). File-file tersebut juga dapat diakses dengan menggunakan aplikasi browser web. Definisi lain dari halaman web (situs web) adalah formulir komunikasi yang digunakan pada suatu jaringan komputer.

Dua properti halaman web (situs web) yang membuatnya berbeda dengan yang lain adalah sifatnya yang interaktif dan menggunakan multimedia. Istilah multimedia bisa mencakup grafis, suara, animasi, video efek khusus lain sebagai tambahan pada yang dikombinasikan untuk menghasilkan suatu informasi sebagai contoh, ensiklopedia interaktif atau game. pada saat yang sama tipe-tipe file yang di distribusikan melalui internet atau LAN (intranet) pengguna bisa menggunakan istilah hypermedia untuk menggambarkan. Halaman web (situs web) dapat interaktif karena pembaca atau user dapat mengirimkan informasi atau perintah kehalaman web yang akan dikontrol oleh aplikasi yang dijalankan server web, sebuah halaman bisa kehalaman lain untuk memberikan akses ke informasi tambahan .seluruhnya ditransmisikan menggunakan medium fisik dan protokol internet. Itulah sebabnya banyak orang berpikir bahwa web merupakan sinonim dari internet.

Halaman web (situs web) tampak seperti dokumen teks, grafis atau image animasi, ini sebenarnya adalah dokumen teks yang mempunyai kode format HTML khusus, atau tag yang memberitahu kepada browser bagaimana harus menampilkan teks, grafis dan file-file animasi yang ada pada halaman web (situs web)

Hanya teks dalam paragraf sebuah halaman web yang benar-benar ada pada halaman web (situs web). Sebarang grafis, suara atau image animasi yang dilihat pada halaman web (situs web) adalah

(10)

file-file terpisah yang namanya maupun informasi tentang cara membuka file,men-download file, dan dimana menempatkan file pada halaman web (situs web) diberikan dalam HTML. Ketika melihat kode-kode HTML yang sesuai, browser akan menyalin atau men-download suara atau image animasi komputer.

Web telah tumbuh secara luar biasa, ribuan orang memiliki situs web pribadi, dan sejumlah kalangan bisnis telah bergabung di web. (istilah homepage sering kali digunakan untuk menunjuk ke sebuah situs web, sebenarnya homepage adalah halaman pembuka sebuah situs web, halaman default biasanya memiliki hubungan kehalaman lain).

2.6. Peta Navigasi.

Nasigasi merupakan unsur penting dalam banyak halaman web. Tujuannya adalah agar seseorang merasa mudah mengemudikan suatu halaman web. Program web browser sendiri seperti Intrenet Explorer dan Netscape Navigator, dilengkapi fasilitas navigasi untuk mempermudah seseorang dalam menjelajah dunia Internet.

Komponen navigasi biasanya berupa fasilitas yang berfungsi untuk berpindah ke halaman web lainnya, yang diwujudkan dalam berbagai macam cara.:

2.6.1. Navigasi linier ( linear )

Struktur navigasi yang hanya mempunyai suatu rangkai-rangkai cerita terurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurut menurut aturannya. Tampilan yang ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya.

(11)

Gambar A-1 Struktur navigasi model linear

2.6.2. Navigasi hirarki ( Hiraerchi )

Struktur navigasi yang menghandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertamanya disebut sebagai master page (halaman utama ke-1), halaman utama ini akan mempunyai halaman percabangan yang disebut slash page (halaman pendukung).

Gambar A-2 Struktur navigasi model hiraerchi

2.6.3. Navigasi non linier (non-linear)

Struktur navigasi yang tidak memperhatikan batasan rute dengan kata lain pemakai dapat menelusuri program sesudahnya. Tampilan pada menu pertamanya disebut sebagai master page (halaman utama ke-1), halaman utama ini akan mempunyai halaman percabangan yang disebut slash page (halaman pendukung).

(12)

Gambar A-3 Struktur navigasi model non-linear

2.6.4. Navigasi campuran (composet)

Struktur navigasi yang merupakan gabungan demi struktur navigasi non linier dan hirarki.

Gambar A-4 Struktur navigasi model composet

2.7. Marcomedia Dreamweaver 6.0

Macromedia Dreemweaver adalah sebuah HTML editor professional untuk mendesain secara visual dan mengelola situs web maupun halaman web.

(13)

Bila seseorang menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dalam lingkungan secara visual dalam melakukan editing, Dreamweaver membuatnya menjadi mudah dengan menyediakan tool-tool yang sangat berguna dalam meningkatkan kemampuan dan berpengalaman seseorang dalam mendesain web. Dreamweaver mengikutsertakan banyak tool untuk kode-kode dalam halaman web dengan fasilitas-fasilitas adalah Referensi HTML, CSS, editor (tampilan kode dan code inspector) yang mengizinkan kita mengedit kode javascript, XML dan dokumen teks lain secara langsung dalam dreamweaver.teknologi macromedia Roundtrip HTML maupun mengimpor dokumen Dreamweaver tanpa perlu menformat ulang kode tersebut.

2.8. Macromedia Fireworks MX 6.0.

Macromedia Fireworks ialah standar program aplikasi yang sama dengan Photoshop sebagai pengolah foto penyunting grafik dan editing yang banyak digunakan oleh para desainer untuk keperluan media cetak, reklame, elektronik, stiker, iklan dan Internet. keunggulannya terletak pada kemudahannya, fasilitas, fleksibilitas berbagai filter dan style dan efek-efek yang sangat membantu dalam grafik yang mudah dan cepat. Photoshop banyak digunakan dilingkungan Internet, terutama para desainer web mengolah grafik dihalaman Web maupun orang yang ingin mendesain sebuah situs yang indah dan menarik merupakan suatu keharusan untuk mengetahui tool atau aplikasi yang dapat mengolah grafik web dengan baik.

(14)

BAB III

PEMBAHASAN MASALAH

3.1. Umum.

Program yang telah dirancang mengikuti alur program yang diterapkan pada sebuah pembuatan situs web untuk menampilkan informasi pribadi seseorang, perancangan situs web pribadi secara efektif memberikan informasi lengkap tentang hal-hal yang dimiliki. Pembuatan sebuah halaman Web (situs web) dapat dilakukan dengan menjelaskan perencanaan arus informasi, petunjuk situs yang baik, menentukan Struktur navigasi, pembentukan elemen membuat link dengan teks, dan penambahan elemen Macromedia Dreamweaver Mx 6.0. kemudian sebagai langkah akhir, barulah kita melakukan pengujian terhadap halaman web (situs web) yang kita buat dan cara mempublikasikan halaman yang telah dibuat.

3.2. Tinjauan kasus.

Toko ADVENTURER WORKSHOP “BOLDER” suatu wiraswasta yang bergerak dalam bidang penjualan alat-alat pendakian alam bebas yang berdiri pada tanggal 15 Februari 2002 jika dilihat dari usia berdirinya perusahaan ini, memang masih tergolong muda akan tetapi dengan keuletan para karyawannya perusahaan ini bisa dan mampu berusaha untuk bersaing dengan perusahaan-perusahaan lainnya yang ada terlebih dahulu didirikan.

Walaupun karyawan tergolong sedikit perusahaan ini siap dan mampu dalam menghadapi persaingan dimasa depan. Adapun produk yang ingin diperkenalkan oleh toko tersebut yaitu bermacam-macam merek atau produk yang dibutuhkan kepada konsumen saat ini, alat-alat pendakian dan asesoris-asesoris.

(15)

Tujuan mendirikan usaha ini adalah :

•Menjalankan perdagangan umum yang berorientasi pada perlengkapan pendakian melalui Web (situs web).

•Menjalankan usaha dalam bidang ditribusi dari segala jenis dan merek perlengkapan pendakian dan asesories-asesories.

Untuk kesempatan kali ini penulis hanya mencoba bagaimana mendesain halaman web yang secara efektif dan interaktif yang sesuai dengan profile homepage perusahaan. Konsumen bisa mendapatkan apa yang mereka inginkan, berkeliling dan kembali tanpa harus berpikir cukup banyak mengenai hal itu. Situs Web adalah situs yang menarik menyampaikan pesan secara ringkas, tidak membuat pengunjung terlalu lama untuk kemunculan informasi dilayar komputer mereka.

3.3. Struktur Navigasi.

Dalam membuat halaman web (situs web) pribadi, penulis mengganti program flowchart dengan membuat peta navigasi untuk memudahkan mengetahui arah dari perjalanan halaman web pribadi ini. Terlebih dahulu menentukan struktur navigasi yang digunakan adalah struktur navigasi campuran. Struktur navigasi ini fleksibel karena alur program dapat bergerak bebas. Setelah menetukan struktur navigasi dibuatlah peta navigasi, peta navigasi adalah bentuk detail dari struktur navigasi, peta navigasi menunjukkan arah dari perjalanan halaman web pribadi. Peta navigasi dapat terlihat seperti gambar dibawah ini :

(16)

Peta Navigasi

Gambar A-5 Struktur Navigasi

Keterangan Struktur Navigasi : 1. Home

Home ialah halaman pembuka dari sebuah web dimana dari home ini akan melakukan loncatan (link) ke halaman berikutnya dalam sebuah halaman web.

2. Link Profil

Dalam halaman pembuka (home) terdapat link profil yang apabila diklik akan menampilkan profil gambar toko yang berupa teks asal terbentuknya web ini.

3. Link Produk

Link ini apabila diklik akan menampilkan berbagai produk yang ditawarkan kepada konsumen dan macam produk lainnya.

4. Link Kontak kami

Berhubungan dengan link profil dan produk. Apabila pengunjung mengklik kontak kami akan terjadi perubahan pada halaman utama home yaitu muncul teks yang isinya alamat “toko Adventurer Workshop ‘bolder’ ”dan e-mail toko tersebut.

5. Link Download

HOME

Profile Produk Kontak kami Download

Image produk

(17)

Tak beda dengan link lain, apabila mengklik download maka produk anda inginkan akan keluar.

3.4. Spesifikasi Rancangan Program.

3.4.1. Spesifikasi Bentuk Masukan (Input).

Kita ketahui bahwa Elemen-elemen yang dipakai dalam pembuatan Web (situs web) pribadi antara lain gambar dengan extension.png. didalam pembentukan elemen tabel teks, gambar dan tombol tahap pengerjaan mnggunakan Macromedia Fireworks MX.

Semua gambar yang akan digunakan dalam pembuatan sebuah halaman Web (situs web) sebaiknya dipersiapkan terlebih dahulu, dengan tujuan agar pembuatan halaman Web (situs web) tidak terganggu dan berjalan lancar yang terangkum dalam struktur tabel. Tabel Struktur halaman sebagai berikut

a. Tabel halaman utama

Layout table

Tabel 3-4-a Halaman Utama

b. Tabel halaman profile

Layout table

Image Teks

Image Rollover

image

Flash button Flash button Flash button Flash button

(18)

Tabel 3-4-b Halaman Profile

c. Tabel halaman produk

Layout table

Tabel 3-4-c Halaman Produk d. Tabel halaman kontak kami

Layout table

image Teks image

Flash button Flash button Flash button

Flash button

teks

Image Rollover

Image teks

Teks teks teks

Teks teks teks teks image

Flash button Flash button Flash button Flash button

Flash button Image Rollover Image Rollover Image Rollover Image Rollover Image

Rollover RolloverImage Image Rollover

Image Teks

(19)

Tabel 3-4-d Halaman Kontak kami

3.4.2. Spesifikasi Bentuk keluaran (Output).

1. Tampilan halaman utama :

Gambar B-1 Tampilan utama.

Menu halaman utama situs web pribadi

www.adventurerbolder.com ditampilkan pada gambar di atas. Pada menu utama terdapat image rollover yang terdiri dari 5 link yaitu : home, profile, produk, kontak kami dan download. Khusus untuk link produk situs akan membuka halaman image yang berisi foto-foto produk yang ada pada toko tersebut.

2. Tampilan Profile. Flash buton Flash buton Flash buton Flash buton Flash buton teks

(20)

Gambar B-2 Tampilan Profile

3. Tampilan Produk.

Gambar B-3 Tampilan Produk

4. Tampilan kontak kami.

Gambar B-4 Tampilan Kontak Kami

3.4.3. Spesifikasi Program.

Sepenggal Langkah awal dalam pembuatan web dengan menggunakan Macromedia Dreamweaver sebagai berikut:

(21)

1. start pilih program windows, kemudian arahkan kursor ke macromedia dreamweaver mx, di kilk.

2. setelah itu muncul jendela Macromedia Dreamweaver Mx, pilih file new untuk membuat tampilan baru.

Gambar C-1 jendela kerja.

3. pada toolbar terdapat insert dan property untuk alat pendukung, memilih layout table masukkan image>file:/c/document/my picture/adventurer.png”>E:/gerak/compass/png” yang sudah tersimpan di file extension.png.

4. membuat nama “bolder” memakai format<paragraf> front <ozhandicraft>size(+5)color#330000/hitam<italic>adventurerwor kshop<BankGotihicLTBT>size(3)color#FFFF66<formatParagraf> Bold>Aligncenter.

Teks Bolder Teks adventurerworkshop

Gambar C-2 memasukkan image

5. link button >starpinner>size(12)sepertihome,Profile, Produk dan kontak kami.Menggunakan>Insert>media <flashbutton> width(129) height(27)> filelink <button9.swf>

(22)

quality <High> scale <defaultshowall> Align <default> kecuali Download> slider >size >1 4

Link Button Produk Link Button kontakKami

Link Button home Link Button Profile

Gambar C-3 Link Button

6. pada link home terdapat selogan<nikmati alam hadapi tantangan>Front<OzhandicraftBT>size(5)Color<#CC3300>Paragr af>Aligncenter dan rangkuman Produk > Scr:Files/image/camp/png > width (401) height (163) > paragraf<aligncenter>.

Rangkuman Produk selogan

Gambar C-4 Rangkuman Produk

7. Link Profile hanya menanpilkan sejarah toko ini berdiri dengan memakai insert teks <BankGothicLtLT> size (-3) format <paragraf> front <justify> sedangkan image>width(170)height(127) Scr:age/16-05-05_1232.png >Front<Aligncenter>

(23)

Teks

Download

Image toko

Gambar C-5 Link Profile

8. Link Produk memasukan gambar produk yang diperkenalkan menggunakan insert > image/age/16-05-05_1136.png> width(122)link>files:/image/c2.png>teksface<BankGothicLtBT>si ze(2)Front<Aligncenter>Bulletandnumbering<anordened list>.

image produk

Teks

Gambar C-6 Link Produk

9. Link kontak kami memberitahu alamat toko ini menggunakan insert>teksface<CenturyGothic,ComicSandMS,Dauphin>size(2)Fr ont<AlignCenter><OzhandicraftBT>Size(6)>color#00FF00<italic >Front<AlignCenter>format<paragraf>.

(24)

Teks Colour

Insert/Propertis

Gambar C-7 Link kontak kami

Spesifikasi program yang digunakan pada pembuatan web (situs web). Dalam penggunan tag-tag HTML untuk membuat halaman web dan link antar program. Tag-tag HTML dieksekusi pada sebuah program browser yaitu Internet Ekplorer atau Netscape Navigator.untuk penulisan tag-tag HTML penulis menggunakan program editor teks NotePad yang sudah tersedia pada Windows pada komputer.

Pada desktop Windows 2000 terdapat start dklik, kemudian dipilih program accessories lalui NotePad.

1. Struktur Dokumen HTML.

Dalam dokumen HTML terdapat 3 tag utama bernama yaitu Tag HTML, Tag HEAD, Tag BODY.tag ini membentuk struktur dokumen HTML.tag tersebut fungsi yang sangat berbeda tag HTML memberikan pengenal pada dokumen, tag HEAD memberi informasi sedangkan tag BODY menyimpanan berbagai informasi atau data-data yang akan ditampilkan pada browser.

HTML lebih menekankan pada penggambaran komponen-komponen, struktur dan formatting didalam halaman web daripada menentukan penampilannya HTML tidak didesain untuk desktop publishing,tetapi didesain sebagai bahasa pengkodean untuk WWW.

(25)

Perintah-perintah HTML memungkinkan untuk memformat dokumen dengan fasilitas sebagai berikut:

a.Variable ukuran font membuat heading teks, yang memungkinkan user dapat menemukan informasi secara cepat. b. Teks bold, italic dan underline.

c.Daftar numbering atau bullet agar informasi mudah dibaca. Web browser mendukung multi-level bullet seperti halnya pada daftar numbering.

d. Table untuk kolom dan teks dapat menggunakan spasi tunggal atau menggunakan kemampuan HTML lainnya.

e.Garis horizontal untuk memisahkan area satu dengan lainnya. f. Grafik untuk menyemarakan halaman web.

g. Menggunakan hypertext untuk membuat link yang memungkinkan untuk meloncat ke lokasi lain pada web.

Dasar penulisan tag HTML yang harus diperhatikan:

Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar atau tanda kurang siku miring <…..>, dapat menggunakan huruf kecil ataupun besar (huruf kapital) akan menghasilkan efek yang sama.

< BR > < hr > < Spacer >

ini akan sangat bermanfaat terumata bila kita sedang mengecek atau mengedit dokumen untuk mengetahui mengapa format yang kita berikan tidak dapat berjalan sebagai mana mestinya. tag kebanyakan berpasangan. Yaitu tag awal dan tag akhir. Tag awal berguna untuk menandai suatu style, dan tag akhir untuk menandai akhir style.

< H1 > ini adalah heading < H1>

(26)

Bahwa tag akhir sebenarnya adalah tag awal juga yang mendapat tambahan tanda/ garis miring.dokumen HTML harus disimpan sebagai file teks murni, yaitu file yang menggunakan ekstensi html atau htm tidak bisa menyimpan ke file word, excel dan lainnya. Struktur tabel dokumen HTML :

Tabel 3-e Dokumen HTML

Penulis disini membuat link teks seperti menu, profile, produk, kontak kami yang maksud link dengan teks adalah sebuah link yang menggunakan teks sebagai penghubungnya, kedua tag secara bersama menciptakan link.

3.5. Sarana Pendukung Program

Untuk menunjang kebutuhan akan pengolahan data diperlukan komputer sebagai alat Bantu, karena kecepatan pengolahan data merupakan salah satu kelebihan dari komputer. Komputer adalah sistem elektronik untuk manipulasi data yang secara cepat dan tepat serta dirancang dan diorganisasikan supaya secara otomatis menerima dan menyimpan data input, memprosesnya dan menghasilkan output dibawah pengawasan suatu langkah instruksi program yang tersimpan di memori. < HTML > < HEAD > ………..blok judul…………. < /HEAD > < BODY > ………blok Body………….. < /BODY > < /HTML >

(27)

Dalam penggunaannya komputer memerlukan program aplikasi yang sesuai untuk membantu mengolah data sehingga dapat menghasilkan informasi yang lebih berkualitas, dan ini dapat terlaksana jika ada elemen-elemen dari sistem komputer yaitu :

a. Hardware (perangkat keras) merupakan peralatan dari sistem komputer yang secara fisik terlihat dan dapat dijamah.

b. Software (perangkat lunak) merupakan program yang berisi perintah untuk mengolah data.

c. Brainware merupakan manusia yang berperan dalam mengoperasikan dan mengatur system komputer.

3.6. Perangkat Keras ( Hardware )

Perangkat keras yang disarankan untuk digunakan sebagai pendukung program aplikasi ini adalah sebagai berikut :

a. Motherboard ASUS P4XP-X b. Processor Intel Pentium 4 1.8G c. RAM 128 MB

d. Harddisk

e. Monitor GTC ‘14` f. Floppy disk 3.5 inchi. g. Keyboard 102 keys.

h. Mouse standar serial mouse. i. CD ROM 40X.

j. Printer Canon BJC-2100SP

3.7. Perangkat Lunak ( Software ).

Perangkat lunak merupakan salah satu sub sistem dalam aplikasi computer, oleh sebab itu perangkat lunak harus ada. Dalam penulisan ini, penulis mengunakan dua macam perangkat lunak, yaitu :

(28)

3.7.1 Sistem Operasi.

Pengertian sistem operasi (Operating system) adalah sekumpulan program kontrol atau alat pengendali yang secara terpadu bertindak sebagai penghubung antara komputer dengan pemakainya.

Banyak sistem operasi yang tersedia dengan kemampuan yang berbeda-beda,Tetapi sampai saat ini sistem operasi Microsoft Windows merupakan sistem operasi yang sangat popular digunakan. Dalam hal ini penulis menggunakan sistem operasi Microsoft Windows XP.

3.7.2 Program Aplikasi.

Program aplikasi yang penulis gunakan dalam pembuatan program ini adalah Macromedia Dreamweaver MX 6.0, Macromedia Fireworks Mx 6.0, Microsoft Internet Exploler, Microsoft Word 2000.

Alasan penulis menggunakan Macromedia Dreamwever MX 6.0 adalah:

Karena Macromedia Dreamweaver MX 2004 memiliki fasilitas-fasilitas yang dapat memudahkan dalam membuat ataupun mendesain suatu situs web. selain itu Dreamweaver juga memudahkan penulis dalam mengelola keseluruhan elemen yang ada dalam situs. Kemudian untuk memenuhi factor kemudahan navigasi maka dalam Dreamweaver juga telah tersedia juga fasilitas navigator bar. Sedangkan mengenai faktor isi, kita dapat memanfaatkan Assets panel untuk memantau isi dari situs kita.

(29)

BAB IV

PENUTUP

Kesimpulan

Dalam bab terakhir ini akan disimpulkan, bahwa setelah melakukan penelitian. penulis dapat mengambil kesimpulan bahwa dengan dibuatnya rancangan program komputerisasi diharapkan akan mampu mengatasi permasalahan yang selalu menjadi kendala, diharapkan dengan diterapkannya rancangan program yang akan dikembangkan mampu membuat dan mengoptimalkan proses rancangan sistem komputer yang meliputi :

 Peningkatan kontrol dan mempercepat proses pengenalan produk dapat cepat dan akurat sehingga membantu dalam proses mengembangkan kegiatan pemasaran produk.

 Dalam menggunakan porgram komputerisasi, maka data-data yang diperlukan baik produk maupun pelanggan akan efisien dan dapat terdefinisi, hal ini mengakibatkan tiap perubahaan data yang diperlukan dengan akan dapat diselesaikan dengan baik.

 Proses pemberian informasi akan lebih cepat dan efisien.

4.1. Saran

Setelah penulis melihat proses program komputerisasi yang diusulkan maka untuk menunjang keberhasilan dari beberapa hal yang dapat disarankan yaitu :

 Untuk mendukung mekanisme pengendalian masukan, proses dan keluaran, diperlukan rancangan komputerisasi dimana selain diperlukan adanya dukungan penuh dari pihak. Pengolah perusahaan dan pihak yang terlibat secara langsung dan tidak langsung, maka diperlukan juga kerjasamanya untuk

(30)

mengembangkan progarm ini sehingga dapat membuka kelancaran hasil web (situs web) tersebut, dan dapat memberikan suatu hasil kerja yang baik dan memuaskan.

 Penulis mengharapkan untuk mengurangi kesalahan-kesalahan pada pengoperasian sebaiknya pekerja yang mengoperasikan program adalah orang-orang atau tenaga kerja yang sudah diberi bimbingan tentang program komputerisasi karena memasukkan input data yang salah akan mengakibatkan informasi yang tidak tepat.

Akhir kata dari penulis mudah-mudahan dengan menggunakan rancangan informasi ini, maka informasi yang dibutuhkan dapat lebih cepat dan berhasil.

(31)

DAFTAR PUSTAKA

1. Bustami, Ahmad, Cara mudah Belajar Internet dan HTML, Dinastindo, Jakarta,1999.

2. D.s,Steve, Cara Mudah Berkreasi Web disitus Internet (teknik

perancangan program Javascript siap pakai),Dinastindo,Jakarta, 2000. 3. Ir.H.W.kwari,Latihan Macromedia Firewoks, PT.Elex Media

komputindo,Jakarta 2001.

4. Kurniadi, Adi, Belajar Sendiri Internet, PT. Elex Media Komputindo, Jakarta,1998

5. McFarlene, Nigel,Instant JavaSscript, WRO,Febuari,1998.

6. M.Andy kwari M.Sc,Memakai Macromedia Dreamweaver Mx, PT.Elek Media Komputindo,Jakarta 2000.

(32)

LAMPIRAN LISTING

PROGRAM

(33)

A. Halaman Utama

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>Untitled Document</title>

<!--function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }

//--> </script> </head> <body>

<tr>

<td width="127" height="101" valign="top"><img src="file:///C|/My

%20Documents/My%20Pictures/ADVENTURE.png" width="129" height="102" border="0"></td>

<td width="443" valign="middle" bgcolor="#99CCFF"><div align="center"> <p><em><font color="#F3CD4B" size="+5" face="OzHandicraft

BT"> <font color="#330000">"bolder

" </font></font></em><strong><font color="#FFFF66" size="3" face="BankGothic Lt BT">ADVENTURER

WORK SHOP</font></strong></p>

<p><em><font size="3" face="BankGothic Lt BT">Multiproduct</font> </em></p>

</div></td>

</tr> </table>

<tr>

(34)

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=5,0,0,0" name="Menu" width="129" height="27" id="Menu">

</object>

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=5,0,0,0" width="136" height="28">

</object>

</object> </p>

(35)

<p align="center"><font size="2" face="BankGothic Lt BT">bila anda menginginkan

di klik</font></p> <p align="center">

</object> </p></td> </tr> </table> </body> </html> Halaman Profile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>Untitled Document</title>

</head>

<body>

<tr>

(36)

<p><em><font color="#F3CD4B" size="+5" face="OzHandicraft BT"> <font color="#330000">"bolder

</div></td>

</tr> </table>

<tr>

</object>

(37)

</object>

</object> </font> </p>

<p align="justify"><font size="-3" face="BankGothic Lt BT">Toko ADVENTURER

WORKSHOP “BOLDER” suatu wiraswasta yang bergerak dalam bidang

penjualan alat-alat pendakian alam bebas yang berdiri pada tanggal 15 Februari 2002 jika dilihat dari usia berdirinya perusahaan ini, memang masih tergolong muda akan tetapi dengan keuletan para karyawannya perusahaan

ini bisa dan mampu berusaha untuk bersaing dengan perusahaan-perusahaan lainnya yang ada terlebih dahulu didirikan</font></p>

<p align="center"><font size="-2" face="BankGothic Lt BT"><img src="file:///E|/Program%20Files/image/16-05-05_1232.jpg" width="170" height="127"><img src="file:///E|/Program%20Files/image/16-05-05_1230.jpg" width="171" height="126" align="baseline"><img src="file:///E|/Program %20Files/image/16-05-05_1231.jpg" width="189" height="127"></font></p> <p align="center"><font size="2" face="BankGothic Lt BT">bila anda menginginkan

di klik</font>

</object> </p></td>

(38)

</tr> <tr> <td></td> </tr> </table> </body> </html> Halaman Produk

<tr>

<td width="423" valign="middle" bgcolor="#99CCFF"><div align="center"> <p><em><font color="#F3CD4B" size="+5" face="OzHandicraft

BT"> <font color="#330000">"bolder

</div></td>

</tr> <tr> <td height="0"></td> <td></td> <td></td> </tr> </table>

<tr>

(39)

<div align="left"><font size="2" face="BankGothic Lt BT">Carriel: boogie <a href="file:///E|/Program%20Files/image/c%202.png"><img

src="file:///E|/Program%20Files/image/16-05-05_1138.jpg" width="122" height="161" border="0" align="absbottom"></a>kapasitas:

(40)

100 kg <a href="file:///E|/Program%20Files/image/shoes1.png"><img src="file:///E|/Program%20Files/image/16-05-05_1140.jpg" width="95" height="97" border="0" align="bottom"></a>shoes

trekking</font></div> </li>

<li>

<div align="left"><font size="2" face="BankGothic Lt BT">Carriel : salewa<a href="file:///E|/Program%20Files/image/16-05-05_1145.jpg"><img src="file:///E|/Program%20Files/image/16-05-05_1145.jpg" width="119" height="116" border="0"></a>kapasitas

:60 kg <a href="file:///E|/Program%20Files/image/16-05-05_1216.jpg"><img src="file:///E|/Program%20Files/image/16-05-05_1216.jpg" width="98" height="95" border="0"></a>platipus

: 2 liter</font></div> </li>

<li>

<div align="left"><font size="2" face="BankGothic Lt BT">day pack : consina</font><a href="file:///E|/Program%20Files/image/dp1.png"><img src="file:///E|/Program%20Files/image/16-05-05_1155.jpg" width="102"

height="104" border="0"></a><font size="2" face="BankGothic Lt BT">kapasitas : 40 kg<a

href="file:///E|/Program%20Files/image/16-05-05_1157.png"><img src="file:///E|/Program%20Files/image/16-05-05_1158.jpg" width="84" height="92" border="0"></a>rain

coat: colombia</font></div> </li>

<li>

<div align="left"><font size="2" face="BankGothic Lt BT" align="center">tas pinggang : boogie<a

href="file:///E|/Program%20Files/image/16-05-05_1150.png"><img src="file:///E|/Program%20Files/image/16-05-05_1150.jpg" width="53" height="70" border="0"></a>

sandal gunung<a href="file:///E|/Program%20Files/image/sdl

%20gnung.png"><img src="file:///E|/Program%20Files/image/16-05-05_1239.jpg" width="116" height="86" border="0"></a>carabiner<a href="file:///E|/Program %20Files/image/16-05-05_1204.png"><img src="file:///E|/Program

%20Files/image/16-05-05_1202.jpg" width="50" height="59" border="0"></a></font></div>

</li> </ul>

<p align="center"><font size="2" face="BankGothic Lt BT">bila anda menginginkan

di klik</font></p> <p align="center">

(41)

Halaman kontak kami

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

 <title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

 </head>

<body>

<table width="710" border="0" cellpadding="0" cellspacing="0"> 

<tr> <td width="130" height="91" valign="top"><img src="file:///C|/My %20Documents/My%20Pictures/ADVENTURE.png" width="130"

height="91" border="0"></td>

<td width="440" valign="middle" bgcolor="#99CCFF"><div align="center"> <p><em><font color="#F3CD4B" size="+5" face="OzHandicraft

(42)

" </font></font></em><strong><font color="#FFFF66" size="3" face="BankGothic Lt BT">ADVENTURER

WORK SHOP</font></strong></p>

<p><em><font size="3" face="BankGothic Lt BT">Multiproduct</font> </em></p>

</div></td>

<td width="140" valign="top" bgcolor="#FFCC66"><div align="center"> <img src="COMPASS_2.GIF" width="98" height="87"></div></td>

</tr></table><table width="710" border="0" cellpadding="0" cellspacing="0">

 <tr>

<td width="710" height="288" align="center" valign="top" bgcolor="#CCCCCC">

<p align="center">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash .cab#version=5,0,0,0" name="Menu" width="129" height="27" id="Menu"> <param name="BASE" value=".">

<param name="BGCOLOR" value="#CCCCCC"> <param name="movie" value="button9.swf"> <param name="quality" value="high">

<embed src="button9.swf" width="129" height="27" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#CCCCCC" base="." name="Menu" ></embed>

</object>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash .cab#version=5,0,0,0" width="136" height="28">

<param name="BASE" value=".">

<embed src="button10.swf" width="136" height="28" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#CCCCCC" base="." ></embed>

</object>

(43)

<embed src="button12.swf" width="128" height="28" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#CCCCCC" ></embed> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash .cab#version=5,0,0,0" width="108" height="28">

<embed src="button13.swf" width="108" height="28" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#CCCCCC" ></embed>

</object> </p>

<p align="center"> Toko ADVENTURER WORKSHOP "<em>BOLDER</em>"</p>

<p align="center"><font face="Century Gothic, Comic Sans MS, Dauphin">JL.Beringin

Raya no.125 blok 6 kav.2 tlp : (021)55730840 Perumnas 1 - Tangerang</font></p>

<p align="center"> <font size="2" face="BankGothic Lt BT">Anda dapat berkunjung

di workshop kami kapan saja jika sempat</font></p>

<p align="center"><font color="#00FF00" size="6" face="OzHandicraft BT"><em>jadilah petualangan tangguh</em></font></p>

<p align="center"><font size="2" face="BankGothic Lt BT">bila anda menginginkan di klik</font></p> <p align="center">

<param name="BGCOLOR" value="#FFCC00"> <param name="movie" value="button14.swf"> <param name="QUALITY" value="low">

<embed src="button14.swf" width="655" height="36" quality="low" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#FFCC00" ></embed> </object> </p></td> </tr> <tr> <td height="2"></td> </tr> </table> </body>

(44)

</html>

LAMPIRAN OUTPUT

PROGRAM

(45)

1. Tampilan utama.

(46)

3. Tampilan Produk.

(47)

(48)